/* ===================================================== */
/* LE PRESTIGE V2 */
/* RESET */
/* ===================================================== */ 

*{
    margin:0;
    padding:0; 
    box-sizing:border-box; 
    font-family:Arial, Helvetica, sans-serif;
}

 html,
body{
    width:100%; 
    overflow-x:hidden;
}

 body{
    margin:0;
    background:#111;
    color:#fff;
    line-height:1.6;
    overflow-x:hidden;
}

/* ===================================================== */ 
/* ACCUEIL */
/* ===================================================== */

 #accueil{

    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
        url("fond.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;

    padding:20px;

    padding-top:120px;

    margin-top:70px;

}

.logo{
    width:250px;
    max-width:90%;
    height:auto;
    display:block;
    margin:20px auto 25px;
}

h1{
    font-size:48px;
    color:#fff;
    margin-bottom:15px;
}

.slogan{

    font-size:26px;

    color:#fff;

    margin-bottom:35px;

}
.hero .btn-hero{

    margin-top:120px;

}

/* ===================================================== */
/* MENU */
/* ===================================================== */

 nav{
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding:6px 25px;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
    z-index: 9999;
}
nav a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

nav a:hover{

    color:#D4AF37;
}

/* ===================================================== */
/* TITRES */
/* ===================================================== */

h2{

    text-align:center;

    color:#D4AF37;

    font-size:38px;

    margin-bottom:40px;
}

/* ===================================================== */ 
/* BOUTONS */
/* ===================================================== */

.btn,
.btn-commander{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

.btn{

    background:#D4AF37;

    color:#111;
}

.btn:hover{

    background:white;
}

button{

    background:#6D071A;

    color:white;
}

button:hover{

    background:#D4AF37;

    color:#111;
}
button:focus,
.btn:focus,
.btn-commander:focus,
.btn-retour:focus,
.btn-paiement:focus{

    outline:3px solid #D4AF37;

    outline-offset:3px;

}

.btn-commander{

    background:#25D366;

    color:white;
}

.btn-commander:hover{

    background:#1FA851;
}

.btn-hero{

    display:inline-block; 

    width:auto;

    padding:12px 28px;

    height:auto;

    margin-top:45px;

    border-radius:30px;

    background:#D4AF37;

    color:#111;

    font-weight:bold;

    text-decoration:none;

}

.hero h1,
.hero h2,
.hero p{

    text-shadow:2px 2px 8px rgba(0,0,0,.6);

}

/* ===================================================== */
/* SECTIONS */
/* ===================================================== */

section{

    max-width:1400px;

    margin:auto;

    padding:70px 20px;
}
/* ===================================================== */
/* PRODUITS */
/* ===================================================== */

.produits{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    max-width:1400px;

    margin:auto;

    padding:20px;
    box-sizing:border-box;

}

/* ===================================================== */
/* CARTES PRODUITS */
/* ===================================================== */

.carte{
    background:#fff;
    color:#222;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
    transition:.35s;
}
.carte:hover{

    transform:translateY(-8px) scale(1.01);

    box-shadow:0 12px 30px rgba(0,0,0,.28);

}

.carte img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;
    
    user-select:none;
}

/* ===================================================== */
/* CONTENU */
/* ===================================================== */

.contenu{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:10px 14px;
}
.contenu h3{

    text-align:center;

    color:#6D071A;

    font-size:20px;

    margin-bottom:6px;

}

.contenu p{
    color:#444;
    font-size:14px;
    line-height:1.4;
    margin-bottom:15px;
    min-height:110px;
}

/* ===================================================== */
/* PRIX */
/* ===================================================== */

.prix{
    margin-top:auto;
    text-align:center;
    padding-top:15px;
}

/* ===================================================== */
/* ACTIONS */
/* ===================================================== */

.actions{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:12px;

}

.actions button,
.actions a{

    width:100%;

    height:48px;

}

/* ===================================================== */
/* BARRE DE RECHERCHE */
/* ===================================================== */

.recherche{

    position:relative;

    max-width:700px;

    margin:35px auto;

    margin-top:50px;

}

.recherche input{

    width:100%;

    box-sizing:border-box;

    padding:15px 55px 15px 20px;

    border:2px solid #D4AF37;

    border-radius:40px;

    outline:none;

    font-size:17px;

}
.recherche input:hover{

    border-color:#6D071A;

}

.recherche input:focus{

    border-color:#6D071A;

    box-shadow:0 0 10px rgba(109,7,26,.25);

}

#effacerRecherche{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    width:32px;

    height:32px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#C62828;

    color:white;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

    z-index:100;

}

/* ===================================================== */
/* SUGGESTIONS */
/* ===================================================== */

.suggestions{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.45);
    
    display:none;

    z-index:999;
    max-height:250px;
    overflow-y:auto;

}

.suggestions div{

    padding:14px 18px;

    color:#333;

    cursor:pointer;

    transition:.25s;

    border-bottom:1px solid #eee;

}

.suggestions div:hover,

.suggestions div.active{

    background:#6D071A;

    color:white;

    padding-left:28px;

}

/* ===================================================== */
/* NOMBRE DE RÉSULTATS */
/* ===================================================== */

#nb-resultats{

    text-align:center;

    margin-top:12px;

    color:#D4AF37;

    font-weight:bold;

}
/* ===================================================== */
/* CATÉGORIES */
/* ===================================================== */

.categories{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:40px;

}

.categories button{

    width:auto;

    padding:12px 25px;

    background:#D4AF37;

    color:#111;

    border:none;

    border-radius:30px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.categories button:hover{

    background:#6D071A;

    color:white;

    transform:translateY(-3px);

    transition:.3s;

}

/* ===================================================== */
/* PANIER */
/* ===================================================== */

#panier .carte{
    width:100%;
    max-width:none;
}

#liste-panier{
    margin-top:20px;
    overflow:visible;
}

#total{

    color:#D4AF37;

    font-size:28px;

    font-weight:bold;

}

/* ===================================================== */
/* SERVICES */
/* ===================================================== */

#services .carte,

#pourquoi .carte{

    transition:.3s;

}

#services .carte:hover,

#pourquoi .carte:hover{

    border:2px solid #D4AF37;

    transform:translateY(-8px);

}

/* ===================================================== */
/* AVIS */
/* ===================================================== */

#temoignages h3{

    color:#6D071A;

    font-size:28px;

}

/* ===================================================== */
/* PAIEMENT */
/* ===================================================== */

#paiement h3{

    color:#D4AF37;

    margin-bottom:20px;

}

.btn-paiement{

    display:block;

    width:100%;

    max-width:350px;

    margin:20px auto;

    padding:15px;

    background:#D4AF37;

    color:#111;

    text-align:center;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}

.btn-paiement:hover{

    background:#6D071A;

    color:white;

}

/* ===================================================== */
/* TABLEAUX */
/* ===================================================== */

.fiche-table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.fiche-table td{

    padding:12px;

    border:1px solid #444;

}

.fiche-table tr:nth-child(even){

    background:#222;

}

/* ===================================================== */
/* BOUTON RETOUR */
/* ===================================================== */

.btn-retour{

    display:inline-block;

    margin:20px 8px;

    padding:12px 22px;

    background:#D4AF37;

    color:#111;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}

.btn-retour:hover{

    background:#6D071A;

    color:white;

}

/* ===================================================== */
/* CONTACT */
/* ===================================================== */

#contact{

    text-align:center;

}

#contact p{

    margin:10px 0;

}

/* ===================================================== */
/* FOOTER */
/* ===================================================== */

footer{

    background:#000;

    color:#bbb;

    text-align:center;

    padding:30px 20px;

    margin-top:50px;

}

footer p{

    margin:8px 0;

}
/* ===================================================== */
/* BOUTONS FLOTTANTS */
/* ===================================================== */

.whatsapp-float{

    position:fixed;

    bottom:20px;

    right:20px;

    width:60px;

    height:60px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

    z-index:9999;

    transition:.3s;

}

.whatsapp-float:hover{

    transform:scale(1.1);

}

.whatsapp-float img{

    width:34px;

    height:34px;

}

/* Bouton Appeler */

.call-float{

    position:fixed;

    bottom:95px;

    right:20px;

    width:60px;

    height:60px;

    background:#007BFF;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:28px;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

    z-index:9999;

    transition:.3s;

}

.call-float:hover{

    transform:scale(1.1);

}

/* ===================================================== */
/* COMPTE À REBOURS */
/* ===================================================== */

.compte-rebours{

    text-align:center;

    margin-top:20px;

    font-size:18px;

    font-weight:bold;

    color:#D4AF37;

}

/* ===================================================== */
/* RESPONSIVE MOBILE */
/* ===================================================== */

@media (max-width:768px){

    nav{

        flex-wrap:wrap;

        gap:10px;

        padding:12px;

    }

    nav a{

        font-size:14px;

    }

   #accueil{

        min-height:85vh;

        padding:20px;

        padding-top:170px;

    }

    .logo{

        width:120px;

        margin-bottom:20px;

    }

    h1{

        font-size:34px;

    }

    .slogan{

        font-size:17px;

    }

    h2{

        font-size:30px;

    }

    .produits{

        grid-template-columns:1fr;

        gap:20px;

        padding:10px;

    }

    .carte{

        min-height:auto;

    }

    .carte img{

        height:280px;

    }

    .contenu{

        padding:10px;

    }

    .contenu h3{

        font-size:18px;

    }

    .contenu p{

        font-size:14px;

    }

    .prix{

        font-size:28px;

    }

    .actions{

        padding:10px;

    }

    .actions button,

    .actions a{

        height:46px;

    }

    .recherche{

        width:100%;

        padding:0 10px;

    }

    .recherche input{

        font-size:16px;

    }

    .categories{

        gap:10px;

    }

    .categories button{

        padding:10px 18px;

        font-size:14px;

    }

    .btn-retour{

        width:100%;

        text-align:center;

    }

    .btn-paiement{

        max-width:100%;

    }

    .whatsapp-float,

    .call-float{
       
        will-change:transform;

        width:55px;

        height:55px;
        
    }

    .whatsapp-float img{

        width:30px;

        height:30px;

    }

::selection{

    background:#D4AF37;

    color:#111;

}

}

/* ========================================= */
/* BADGES PRODUITS */
/* ========================================= */

.carte{

    position:relative;

}

.badge{

    position:absolute;

    top:12px;

    left:12px;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    color:white;

    z-index:20;

    box-shadow:0 3px 10px rgba(0,0,0,.3);

}

.badge.promo{

    background:#C62828;

}

.badge.nouveau{

    background:#2E7D32;

}

.badge{

    animation:badgePulse 2s infinite;

}

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* ========================================= */
/* NOTIFICATION PANIER */
/* ========================================= */

.notification-panier{

    position: fixed;

    top: 100px;

    right: 20px;

    background: #2E7D32;

    color: white;

    padding: 15px 22px;

    border-radius: 10px;

    font-weight: bold;

    box-shadow: 0 5px 15px rgba(0,0,0,.35);

    opacity: 0;

    transform: translateY(-20px);

    transition: all .4s ease;

    z-index: 999999;

    pointer-events: none;

}
.notification-panier.active{

    opacity:1;

    transform:translateY(0);

}
.notification-panier{
    display:block !important;
}

.quantite-btn{
    width:32px;
    height:32px;
    border:none;
    border-radius:8px;
    background:#8B0000;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
}

.quantite{
    display:inline-block;
    min-width:30px;
    text-align:center;
    font-weight:bold;
    font-size:18px;
    margin:0 10px;
}
.btn-supprimer{
    width:40px;
    height:40px;
    border:none;
    border-radius:8px;
    background:#C62828;
    color:white;
    cursor:pointer;
}

.ligne-panier{
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:center;
    background:#5a1428;
    border:1px solid #8c4b5d;
    border-radius:15px;
    padding:15px;
    margin-bottom:15px;
}

.infos-panier{
    padding-right:10px;
    font-size:15px;
    line-height:1.4;
    color:#fff;
}

.infos-panier strong{
    color:#fff;
    font-size:18px;
    display:block;
    margin-bottom:6px;
}
.quantite-zone{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.quantite-btn{
    width:35px;
    height:35px;
    border:none;
    border-radius:8px;
    background:#B00000;
    color:white;
    font-size:20px;
    cursor:pointer;
}

.quantite{
    min-width:25px;
    text-align:center;
    font-weight:bold;
}

.btn-supprimer{
    width:40px;
    height:40px;
    border:none;
    border-radius:8px;
    background:#C62828;
    color:white;
    cursor:pointer;
}

/* ===================================== */
/* AVIS CLIENTS */
/* ===================================== */

.avis{
    padding:60px 20px;
    background:#111;
    text-align:center;
}

.avis h2{
    color:#d4af37;
    font-size:38px;
    margin-bottom:10px;
}

.note-moyenne{
    color:#fff;
    font-size:18px;
    margin-bottom:40px;
}

.formulaire-avis{
    max-width:700px;
    margin:auto;
    margin-bottom:50px;
}

.formulaire-avis input,
.formulaire-avis textarea{
    width:100%;
    padding:15px;
    margin-bottom:15px;
    border:none;
    border-radius:10px;
    font-size:16px;
}

.etoiles{
    font-size:32px;
    margin-bottom:20px;
    cursor:pointer;
}

.btn-avis{
    background:#d4af37;
    color:#111;
    border:none;
    padding:15px 35px;
    border-radius:10px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.btn-avis:hover{
    background:#f0c94a;
}

#liste-avis{
    max-width:900px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.avis-card{
    background:#fff;
    color:#222;
    border-radius:15px;
    padding:25px;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
    text-align:left;
}

.etoiles-affichage{
    color:#f5b301;
    font-size:22px;
    margin-bottom:10px;
}

.avis-card h3{
    margin-bottom:10px;
}

/* Animation du menu */

#menu{
    transition: all 0.35s ease; 
    overflow: hidden;
}

@keyframes apparitionMenu{
    from{
        opacity:0;
        transform:translateY(-20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
    }

/* Animation des cartes */

.carte{
    transition:0.3s;
}

.carte:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.25);
}

#retour-haut{
    position: fixed;
    left: auto;
    right: 29px;
    bottom: 200px;
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #D4AF37;
    color: #111;
    font-size: 18px;
    cursor: pointer;
    z-index: 99999;
}

#retour-haut:hover{

transform:translateY(-3px);

box-shadow:0 8px 18px rgba(212,175,55,.35);

transition:all .3s ease;

}

/* =========================
   PANIER LATÉRAL
========================= */

#overlay-panier{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    display:none;
    z-index:9998;
}

#panier-lateral{
    position:fixed;
    top:0;
    right:-520px;
    width:520px;
    max-width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    background:#3b0010;
    overflow:hidden;
    transition:.35s;
    z-index:9999;
    padding:150px 20px 30px;
    box-sizing:border-box;
}

#contenu-panier{
    flex:1;
    overflow-y:auto;
    min-height:0;
    overscroll-behavior: contain;
}

#panier-lateral .carte{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

.footer-panier{
    position:sticky;
    bottom:0;
    background:#111;
    flex-shrink:0;
}

#panier-lateral.ouvert{
    right:0;
}

.fermer-panier{
    position:fixed;
    top:95px;
    right:20px;

    width:46px;
    height:46px;

    border:none;
    border-radius:50%;

    background:#d40000;
    color:#fff;

    font-size:28px;
    cursor:pointer;

    z-index:30000;
    display:none;
}

#panier-lateral.ouvert .fermer-panier{
    display:flex;
    align-items:center;
    justify-content:center;
}
#panier-lateral.ouvert .fermer-panier{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================
   BAS DU PANIER FIXE
========================== */

.footer-panier{

    position:sticky;

    bottom:0;

    background:#111;

    padding:20px;

    border-top:2px solid #d4af37;

}

.footer-panier h3{

    margin-bottom:15px;

    color:#fff;

}

.footer-panier button{
    width:100%;
    display:block;

    padding:16px 20px;

    background:#25D366;
    color:#fff;

    border:none;
    border-radius:12px;

    font-size:20px;
    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.footer-panier button:hover{
    background:#1faa52;
}

.carte-avis{

    max-width:700px;
    margin:40px auto;

    background:#1b1b1b;

    border:1px solid #333;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.30);

}

.icone-avis{

    font-size:55px;

    margin-bottom:20px;

}

.carte-avis h3{

    color:#d4af37;

    margin-bottom:15px;

}

.carte-avis p{

    color:#ddd;

    line-height:1.7;

    margin-bottom:25px;

}

#temoignages input,
#temoignages textarea{

    width:100% !important;
    max-width:700px !important;

    display:block;

    margin:15px auto;

    padding:18px;

    font-size:18px;

    box-sizing:border-box;
}

#temoignages textarea{

    min-height:180px !important;
}

.titre-panier{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

/* ===== Version PC ===== */

@media (min-width:769px){

/* Afficher le menu horizontal */
    #menu{
        display:flex !important;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:20px;

        width:auto !important;
        background:transparent;
        position:static;
        padding:0;
        margin:0;
    }

     #menu a{
        font-size:20px;
        font-weight:bold;
        letter-spacing:0.5px;
        color:#D4AF37;
        transition:.3s;
    }

    #menu a:hover{
    color:#ffffff;
}

    #menu li{
        width:auto;
        border:none;
    }

  nav{
    width:100%;
    max-width:none;
    left:0;
    transform:none;
    padding:10px 25px;
    display:flex;
    justify-content:center;
    align-items:center;
}

        #accueil{

        padding-top:50px;

    }

}

#panier-lateral .carte{
    min-height:unset;
}

.actions-panier{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
}

.actions-panier button{
    width:46px;
    height:46px;
    border:none;
    border-radius:10px;
    background:#B00000;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.actions-panier span{
    color:#fff;
    font-weight:bold;
    font-size:22px;
    min-width:30px;
    text-align:center;
}
/* Empêcher tout débordement horizontal */
html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

section,
div,
article{
    max-width:100%;
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

html,
body{
    overflow-x:hidden !important;
    width:100%;
}

*{
    box-sizing:border-box;
}

.panier-vide{
    min-height:120px;
    display:flex;
    align-items:center;
}

.panier-vide .infos-panier{
    width:100%;
    text-align:center;
}

.panier-vide strong{
    display:block;
    font-size:24px;
    margin-bottom:10px;
    color:#fff;
}

.panier-vide span{
    color:#ccc;
    font-size:18px;
}

nav{
    z-index:100000 !important;
}

#menu{
    position:relative;
    z-index:100001 !important;
}

#menu a{
    position:relative;
    z-index:100002 !important;
    pointer-events:auto !important;
}

/* ===== MENU MOBILE SUR 2 LIGNES ===== */
@media (max-width:768px){

    nav{
        padding:10px 5px;
    }

    #menu{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:12px 8px;
        width:100%;
        justify-items:center;
        align-items:center;
        text-align:center;
    }

   #menu a{
    display:block;
    color:#D4AF37;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    white-space:nowrap;
    transition:.3s;
}

#menu a:hover{
    color:#fff;
}

#menu a:last-child{
    grid-column:1 / 4;
    margin-top:8px;
    font-size:18px;
}

#contenu-panier{
    flex:1;
    overflow-y:auto;
    min-height:0;
    padding-bottom:20px;
}

.footer-panier{
    position: sticky;
    bottom: 0;
    background: #111;
    padding: 15px;
    border-top: 2px solid gold;
    z-index: 10;
}

   }

/* Téléphone */
@media (max-width:768px){

    #panier-lateral{
        padding-top:120px !important;
    }

   .fermer-panier{
    top:135px !important;
    right:15px !important;
}

    #panier-lateral h2{
        margin-top:15px;
    }
}
    @media (min-width:769px){
    h1{
        font-size:52px;
    }
}

.prix{
    text-align:center;
    color:#D4AF37;
    font-size:28px;
    font-weight:bold;
    margin-top:10px;
}

.prix strong{
    color:#D4AF37;
    font-size:28px;
    font-weight:bold;
}

.prix del{
    color:#d40000;
    text-decoration-color:#d40000;
    font-size:22px;
    font-weight:bold;
    text-decoration:line-through;
    text-decoration-thickness:3px;
}

/* ===================================== */
/* VERSION MOBILE */
/* ===================================== */

@media (max-width:768px){

    .infos-panier strong{
        font-size:17px;
    }

    .quantite-btn{
        width:32px;
        height:32px;
        font-size:18px;
    }

    .btn-supprimer{
        width:34px;
        height:34px;
    }

}

@media (max-width:768px){

    #menu a:last-child{
        position: relative;
        z-index: 999999;
        pointer-events: auto;
    }

}
/* =====================================
   FENÊTRE DE CONFIRMATION
===================================== */

.confirmation-cache{
    display:none;
}

#confirmation-commande{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

#confirmation-commande.active{
    opacity:1;
    visibility:visible;
}

.confirmation-box{

    width:90%;
    max-width:420px;

    background:#2b0010;

    border:2px solid #D4AF37;

    border-radius:18px;

    padding:30px;

    text-align:center;

    color:white;

    box-shadow:0 15px 40px rgba(0,0,0,.45);

    animation:popup .3s ease;
}

.confirmation-box h2{

    color:#D4AF37;

    margin-bottom:20px;

}

.confirmation-box p{

    line-height:1.7;

    margin-bottom:25px;

}

.confirmation-boutons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

#vider-panier-confirmation{

    background:#25D366;

    color:white;

}

#garder-panier-confirmation{

    background:#6D071A;

    color:white;

}

#vider-panier-confirmation,
#garder-panier-confirmation{

    border:none;

    border-radius:12px;

    padding:16px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

#vider-panier-confirmation:hover{

    background:#1FA851;

}

#garder-panier-confirmation:hover{

    background:#8B0B22;

}

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.confirmation-fin{
    text-align:center;
    animation:fadeUp .4s ease;
}

.confirmation-check{
    font-size:70px;
    margin-bottom:20px;
    animation:bounce .7s;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes bounce{

    0%{
        transform:scale(.5);
    }

    60%{
        transform:scale(1.2);
    }

    100%{
        transform:scale(1);
    }

}

/* =====================================
   POPUP MUSIQUE
===================================== */

.popup-musique{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.80);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.popup-musique-box{

    width:90%;

    max-width:430px;

    background:#2b0010;

    border:2px solid #D4AF37;

    border-radius:18px;

    padding:35px;

    text-align:center;

    color:white;

    box-shadow:0 15px 40px rgba(0,0,0,.45);

}

.popup-musique-box h2{

    color:#D4AF37;

    margin-bottom:20px;

}

.popup-musique-actions{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:25px;

}

.popup-musique-actions button{

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

}

#activer-musique{

    background:#25D366;

    color:white;

}

#refuser-musique{

    background:#6D071A;

    color:white;

}

/* =====================================
   VINYLE MUSICAL PREMIUM
===================================== */

#vinyle-musique{

position:fixed;

left:20px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

cursor:pointer;

z-index:9999;

background:
repeating-radial-gradient(
circle,
#111 0px,
#111 2px,
#000 3px,
#000 5px
);

border:3px solid #222;

box-shadow:
0 0 15px rgba(0,0,0,.5),
0 0 8px rgba(212,175,55,.4);

transition:transform .3s;

}

#vinyle-musique:hover{

transform:scale(1.08);

}

#vinyle-musique::before{

content:"♫\A LP";

white-space:pre;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:22px;

height:22px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

font-family:Georgia, serif;

font-size:7px;

font-weight:700;

line-height:1;

text-align:center;

color:#1b1b1b;

background:linear-gradient(
145deg,
#f8e7a1 0%,
#e4c76b 25%,
#c79a2d 50%,
#f3d97a 75%,
#fff2b8 100%
);

border:1px solid rgba(255,255,255,.25);

box-shadow:
inset 0 1px 2px rgba(255,255,255,.6),
inset 0 -1px 2px rgba(0,0,0,.35),
0 0 8px rgba(212,175,55,.6);

}
.rotation{

animation:tourner 6s linear infinite;

}

@keyframes tourner{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*=====================================
CITATIONS
=====================================*/

.citation-container{

position:relative;

min-height:120px;

max-width:850px;

margin:35px auto;

padding:0 20px;

}

.citation-vin{

.citation-vin{

position:absolute;

top:0;

left:0;

right:0;

width:100%;

box-sizing:border-box;

padding:0 20px;

}

opacity:0;

transition:opacity .8s ease-in-out;

font-size:20px;

font-style:italic;

font-weight:500;

color:#D4AF37;

line-height:1.7;

text-align:center;

text-shadow:0 0 8px rgba(212,175,55,.25);

will-change:opacity;

transform:translateZ(0);

-webkit-transform:translateZ(0);

}

.citation-vin.active{

opacity:1;

}

@media(max-width:768px){

.citation-container{

min-height:150px;

}

}

#vinyle-musique span{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

font-size:11px;

font-weight:bold;

color:#111;

pointer-events:none;

z-index:10;

user-select:none;

}

/* =====================================
   INFOBULLE VINYLE
===================================== */

#tooltip-musique{

position:fixed;

left:90px;

bottom:42px;

padding:8px 14px;

background:rgba(20,20,20,.96);

color:#D4AF37;

border:1px solid rgba(212,175,55,.45);

border-radius:20px;

font-size:13px;

font-family:Georgia,serif;

white-space:nowrap;

opacity:0;

transform:translateX(-10px);

transition:all .35s ease;

pointer-events:none;

z-index:99999;

box-shadow:0 8px 18px rgba(0,0,0,.35);

}

#vinyle-musique:hover + #tooltip-musique{

opacity:1;

transform:translateX(0);

}

/*=====================================
OUVERTURE DE LA CAVE
=====================================*/

#ecran-ouverture{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

z-index:9999999;

background:
radial-gradient(circle at center,
rgba(212,175,55,.08) 0%,
rgba(212,175,55,.03) 25%,
transparent 55%),
linear-gradient(
180deg,
#2b0010 0%,
#1a0008 55%,
#090304 100%
);

transition:opacity .8s ease, visibility .8s ease;

}

#ecran-ouverture.cache{

opacity:0;

visibility:hidden;

}

.ouverture-contenu{

text-align:center;

color:#D4AF37;

animation:fadeMaison 1.2s ease;

}

.ouverture-contenu h1{

margin:0;

font-size:42px;

letter-spacing:4px;

font-weight:700;

}

.ouverture-contenu p{

margin:10px 0 25px;

font-size:18px;

color:#fff;

letter-spacing:2px;

}

.etoile{

font-size:22px;

margin-bottom:25px;

}

.texte-ouverture{

font-size:18px;

font-style:italic;

letter-spacing:1px;

animation:apparition 1.5s ease infinite alternate;

}

@keyframes apparition{

from{

opacity:.45;

}

to{

opacity:1;

}

}

@keyframes fadeMaison{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =====================================
   MESSAGE DE LA MAISON
===================================== */

.message-maison{

padding:70px 20px 50px;

text-align:center;

}

.separateur-maison{

font-size:22px;

color:#D4AF37;

margin-bottom:20px;

opacity:.9;

}

.message-maison p{

margin:0;

font-size:20px;

font-style:italic;

font-family:Georgia, serif;

color:#D4AF37;

letter-spacing:.5px;

line-height:1.7;

text-shadow:0 0 8px rgba(212,175,55,.20);

}

/*=====================================
AMBIANCE DE LA MAISON
=====================================*/

body.ambiance-soiree{

background:#140006;

transition:background 1.5s ease;

}

body.ambiance-soiree header{

background:rgba(20,0,6,.96);

}

body.ambiance-soiree .citation-vin{

color:#e6c76a;

text-shadow:0 0 14px rgba(212,175,55,.35);

}

body.ambiance-soiree::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:
radial-gradient(circle at 20% 15%,
rgba(255,210,120,.05),
transparent 35%),

radial-gradient(circle at 80% 18%,
rgba(255,210,120,.04),
transparent 40%);

z-index:1;

animation:lueurBougie 6s ease-in-out infinite alternate;

}

@keyframes lueurBougie{

from{

opacity:.75;

}

to{

opacity:1;

}

}

/*=====================================
MESSAGE DES COLLECTIONS
=====================================*/

#message-categorie{

height:35px;

display:flex;

justify-content:center;

align-items:center;

margin:18px 0;

font-family:Georgia,serif;

font-size:18px;

font-style:italic;

color:#D4AF37;

opacity:0;

transition:opacity .6s ease;

text-align:center;

text-shadow:0 0 8px rgba(212,175,55,.25);

}

#message-categorie.visible{

opacity:1;

}

/*=====================================
BIENVENUE PREMIÈRE VISITE
=====================================*/

#bienvenue-maison{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:rgba(18,0,8,.82);

backdrop-filter:blur(3px);

z-index:9999998;

opacity:0;

visibility:hidden;

transition:opacity .8s ease;

}

#bienvenue-maison.visible{

opacity:1;

visibility:visible;

}

.carte-bienvenue{

text-align:center;

color:#D4AF37;

padding:40px;

}

.carte-bienvenue h2{

margin:0;

font-size:22px;

font-weight:400;

}

.carte-bienvenue h1{

margin:12px 0;

font-size:42px;

letter-spacing:4px;

}

.carte-bienvenue p{

margin:0;

font-size:18px;

color:white;

letter-spacing:2px;

}

.texte-bienvenue{

margin-top:35px;

font-size:20px;

font-style:italic;

}

/*=====================================
SÉPARATEUR LP
=====================================*/

.separateur-maison{

display:flex;

align-items:center;

justify-content:center;

margin:70px auto;

max-width:500px;

}

.separateur-maison::before,
.separateur-maison::after{

content:"";

flex:1;

height:1px;

background:linear-gradient(
to right,
transparent,
rgba(212,175,55,.35),
transparent
);

}

.separateur-maison span{

margin:0 18px;

padding:4px 10px;

border:1px solid rgba(212,175,55,.35);

border-radius:20px;

color:#D4AF37;

font-family:Georgia, serif;

font-size:14px;

font-weight:bold;

letter-spacing:2px;

background:rgba(20,20,20,.35);

box-shadow:0 0 10px rgba(212,175,55,.12);

}

/*=====================================
MESSAGE RETOUR EN HAUT
=====================================*/

#message-retour{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:transparent;

backdrop-filter:blur(2px);

opacity:0;

visibility:hidden;

transition:opacity .4s ease;

pointer-events:none;

z-index:999999;

}

#message-retour.visible{

opacity:1;

visibility:visible;

}

.retour-contenu{

padding:18px 35px;

border:1px solid rgba(212,175,55,.35);

border-radius:18px;

background:rgba(25,10,10,.95);

color:#D4AF37;

font-family:Georgia,serif;

font-size:20px;

font-style:italic;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.retour-contenu div{

margin-top:8px;

font-size:18px;

}

.logo{

    opacity:0;

    transform:translateY(15px);

    animation:apparitionLogo .8s ease-out forwards;

    animation-delay:.2s;

}

h1{

    opacity:0;

    animation:apparitionLogo .8s ease-out forwards;

    animation-delay:.8s;

}

.slogan{

    opacity:0;

    animation:apparitionLogo .8s ease-out forwards;

    animation-delay:1.3s;

}

.btn-hero{

    opacity:0;

    animation:apparitionLogo .8s ease-out forwards;

    animation-delay:1.8s;

}

@keyframes apparitionLogo{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.texte-caviste{

    max-width:650px;

    margin:0 auto 35px;

    text-align:center;

    color:#D4AF37;

    font-size:18px;

    font-style:italic;

    font-family:Georgia, serif;

    line-height:1.7;

}

h1{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.titre-principal{

    display:block;

}

.titre-secondaire{

    display:block;

}

.titre-ouverture{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin:0;

}

.titre-ouverture span{

    display:block;

}

.titre-ouverture small{

    display:block;

    margin-top:8px;

    font-size:28px;

    font-weight:400;

    color:#D4AF37;

}

/*=====================================
VERSION MOBILE PREMIUM
=====================================*/

@media (max-width:768px){

    .produits{
        display:flex;
        flex-direction:column;
        gap:18px;
        padding:0 10px;
    }

    .carte{
        margin:0;
        border-radius:18px;
        overflow:hidden;
    }

    .carte img{
        width:100%;
        height:200px;
        object-fit:cover;
    }

    .contenu{
        padding:14px;
    }

    .carte h3{
        font-size:18px;
        margin-bottom:8px;
        line-height:1.3;
    }

    .carte p{
        font-size:14px;
        line-height:1.5;
        margin:6px 0;
    }

    .prix{
        font-size:22px;
        color:#D4AF37;
        margin:12px 0;
    }

    .actions{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:14px;
    }

    .actions button,
    .btn-commander{
        width:100%;
        padding:12px;
        font-size:14px;
        border-radius:10px;
    }

}

/*=====================================
EFFET PRESTIGE SUR LES CARTES
=====================================*/

.carte{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:1px solid rgba(212,175,55,.15);

    overflow:hidden;

    position:relative;

}

.carte:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.35),
        0 0 18px rgba(212,175,55,.20);

    border-color:rgba(212,175,55,.45);

}

.selection-maison{

    margin-top:6px;

    color:#D4AF37;

    font-size:13px;

    font-style:italic;

    text-align:center;

    opacity:.9;

}

/*=====================================
LE CHOIX DU CAVISTE
=====================================*/

.choix-caviste{

    margin-top:8px;

    text-align:center;

    color:#D4AF37;

    font-size:13px;

    font-style:italic;

    letter-spacing:.5px;

    opacity:.95;

}