body {
    zoom: 0.9;
}


/* --- ELEMENTS CACHES SUR ORDINATEUR --- */
.burger-menu, 
.close-menu, 
.mobile-socials, 
.mobile-lang-currency, 
.menu-overlay {
    display: none !important;
}




/* =========================================
   0. RESET (OBLIGATOIRE POUR ENLEVER LES BANDES BLANCHES)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: clip; /* Empêche le scroll horizontal inutile */
}



/* =========================================
   1. CHARGEMENT DES POLICES LOCALES
   ========================================= */

/* Montserrat EXTRA LIGHT (Le style principal très fin) */
@font-face {
    font-family: 'MyMontserrat';
    src: url('fonts/montserrat-extralight.ttf') format('truetype');
    font-weight: 200; /* Identifiant "200" pour le très fin */
    font-style: normal;
    
}
@font-face {
    font-family: 'MyMontserrat';
    src: url('fonts/Montserrat-light.ttf') format('truetype');
    font-weight: 400; 
    font-style: normal;
}


@font-face {
    font-family: 'MyMontserrat';
    src: url('fonts/montserrat-regular.ttf') format('truetype');
    font-weight: 500; 
    font-style: normal;
}


/* Montserrat BOLD (Pour les accents) */
@font-face {
    font-family: 'MyMontserrat';
    src: url('fonts/montserrat-semibold.ttf') format('truetype');
    font-weight: 600; /* Identifiant "700" pour le gras */
    font-style: normal;
}
/* Montserrat BOLD (Pour les accents) */
@font-face {
    font-family: 'MyMontserrat';
    src: url('fonts/montserrat-bold.ttf') format('truetype');
    font-weight: 700; /* Identifiant "700" pour le gras */
    font-style: normal;
}



/* (Optionnel) Si tu veux garder Broadway pour le Logo uniquement */
@font-face {
    font-family: 'MyBroadway';
    src: url('fonts/Broadway.otf') format('opentype');
    font-weight: normal;
}













/* =========================================
   2. BASE & TYPOGRAPHIE
   ========================================= */
body {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400; /* On force le ExtraLight (200) par défaut partout */
    color: #000;      /* Noir pur */
    line-height: 1.6;
    background-color: #fff;
    font-size: 18px; /* Taille de base demandée pour les textes courants */
}

/* Titres courants */
h1, h2, h3, h4 {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* LE LOGO (Choix : Broadway ou Montserrat ?) */
.logo {
    /* Si tu veux garder le style Broadway Art Déco : */
    font-family: 'MyBroadway', sans-serif; 
    /* Si tu préfères Montserrat : font-family: 'MyMontserrat', sans-serif; */
    font-size: 2rem;
    letter-spacing: 2px;
}

/* NAVBAR (Menu) */
.nav-links a {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400; /* Très fin */
    font-size: 18px;  /* Taille demandée */
    text-transform: none; /* Pas de majuscules */
    letter-spacing: 0.5px;
}

/* BANDEAU PROMO (-10%...) */
.top-banner {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 14px;  /* Un peu plus petit pour tenir sur une ligne */
    letter-spacing: 1px;
}

















/*  CRÉATION DU DESIGN DE LA BANDE */
.top-banner {
    background-color: #bc2f47; /* La couleur de fond (ici rouge) */
    color: #fff;               /* La couleur du texte */


    /* Le Centrage Parfait (Flexbox) */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */


    padding: 0px;             /* Épaisseur de la bande */
    height: 30px;              /* On fixe la hauteur pour calculer la suite */
    width: 100%;
    position: fixed;        /* Pour qu'elle reste tout en haut */
    top: 0;
    z-index: 1001;             /* Au-dessus de tout */
    font-size: 1rem;
}

/*  DÉCALAGE DE LA NAVBAR */
.navbar {
    /* ... garde les autres lignes ... */
    top: 40px; /* <--- MODIFIE ICI (C'était top: 0 avant) */
    /* On met 40px car c'est la hauteur de la bande rouge */
}









/* =========================================
   3. NAVIGATION (ICONES & LOGO CENTRÉ)
   ========================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aligne verticalement au centre */
    padding: 65px 60px; /* Ajuste selon ton goût */
    position: fixed; 
    width: 100%; /* Comme ton image de fond */
    left: 50%;
    transform: translateX(-50%);
    top: 10px; /* Comme ton image de fond */
    z-index: 1000;
    background: #ffff;
    border-bottom: 1px solid #000;
}

/* --- BLOC CENTRAL (Logo + Réseaux) --- */
.nav-center-block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column; /* Empile le logo et les icônes verticalement */
    align-items: center;    /* Centre horizontalement */
    font-size: 1rem;
}



.logo {
    font-family: 'MyBroadway', 'Broadway', cursive;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #000000; 
    letter-spacing: 2px;
    text-decoration: none;
    line-height: 1; /* Réduit l'espace sous le logo */
    margin-bottom: 5px; /* Petit espace avant les icônes */
    margin-top: 70px;
}

/* --- LES ICÔNES RÉSEAUX --- */
.social-icons {
    display: flex;
    gap: 15px; /* Espace entre X, Insta et Pinterest */
    margin-bottom: 15%;
}

.social-icons a {
    color: #000000;
    font-size: 1.3rem; /* Taille des icônes */
    transition: opacity 0.3s, transform 0.3s;
}

.social-icons a:hover {
    opacity: 0.7;
    transform: translateY(-2px); /* Petit effet de saut au survol */
}

/* --- LE MENU GAUCHE & DROITE --- */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-right: 30px;
}
.nav-links li:last-child { margin-right: 0; }

/* --- LIENS DU MENU (Style Global) --- */
.nav-links a {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400; /* ExtraLight par défaut */
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #000; /* Noir par défaut */
    position: relative; /* Nécessaire pour placer le trait */
    transition: color 0.2s, font-weight 0.2s;
}

/* --- AU SURVOL (HOVER) --- */
.nav-links a:hover {
    color: #bc2f47 !important; /* Le Rouge demandé (force sur toutes les pages) */
    font-weight: 700 !important; /* Passe en Bold */
}

/* --- LE TRAIT DE SOULIGNEMENT (Animation) --- */
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Espace entre le texte et le trait */
    width: 0; /* Invisible au départ (largeur 0) */
    height: 2px; /* Épaisseur du trait (un peu plus visible pour le rouge) */
    background-color: #bc2f47 ! important; /* Le Rouge demandé */
    transition: width 0.3s ease;
}

/* Quand on survole le lien, le trait s'étend à 100% */
.nav-links a:hover::after {
    width: 100%;
}


/* Soulignement au survol (Menu gauche) */
.left-links a::after {
    content: '';
    display: block; width: 0; height: 1px; background: #fff;
    transition: width .3s; margin-top: 5px;
}
.left-links a:hover::after {
     width: 100%; 
     
    }


/* --- STYLE SPÉCIFIQUE PANIER --- */
.cart-link {
    font-size: 1.1rem !important; /* Icône un peu plus grosse */
}

#cart-count {
    font-size: 0.8rem;
    vertical-align: top; /* Met le chiffre un peu en hauteur */
    margin-left: 3px;
    font-weight: bold;
}

/* --- GESTION COULEURS (Fond blanc vs Fond sombre) --- */
/* Quand on est sur fond clair, tout devient noir */
body.light-mode .logo { color: #000; }
body.light-mode .social-icons a { color: #000; }
body.light-mode .nav-links a { color: #000; }
body.light-mode .left-links a::after { background: #000; }










/* Alignement de la partie Droite (Langue + Panier) */
.right-links {
    display: flex;
    align-items: center;
    gap: 30px; /* Espace entre "English..." et le Panier */
}

/* Style du bouton Langue/Monnaie */
.lang-currency a {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400; /* ExtraLight */
    font-size: 16px;  /* Taille élégante */
    text-transform: none; /* Pas de majuscules forcées */
    cursor: pointer;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    color: inherit; /* Prend la couleur du parent (blanc ou noir selon la page) */
}










/* --- ELEMENTS CACHES SUR ORDINATEUR --- */
.burger-menu, .close-menu, .mobile-socials, .lang-short, .menu-overlay {
    display: none;
}
.sub-logo {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 14px;
    margin-bottom: 5px;
    color: #000;
}













/* =========================================
   4. HERO SECTION (ACCUEIL)
   ========================================= */
.hero {
    height: 120vh;
    width: 100%;

    margin: 170px auto -20px auto ;

    background-image: url('images/image2.webp'); 
    background-color: #fff;
    background-size: cover;
    background-position: 50% 27%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Filtre sombre */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 20px;
}

.hero h1 {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.hero p {
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.btn-main {
    padding: 15px 40px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: all 0.3s;
}

.btn-main:hover {
    background-color: #fff;
    color: #000;
}

























/* =========================================
   PAGE SHOP (GRILLE & CARTE A4)
   ========================================= */
.shop-section {
    padding: 240px 20px 80px; /* Marge haute sous le menu */
    text-align: center;
    max-width: 1400px; /* Largeur max pour que ça respire */
    margin: 0 auto;
}

.shop-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* --- FILTRES (Boutons) --- */
.shop-filters {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.filter-btn {
    background: none;
    border: none;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    color: #000;
}

.filter-btn:hover, .filter-btn.active {
    color: #bc2f47;   /* Rouge */
    font-weight: 700; /* Gras */
}

/* --- GRILLE PRODUITS --- */
.shop-grid {
    display: grid;
    /* 4 colonnes, comme l'accueil */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; 
}

/* CARTE INDIVIDUELLE */
.product-card {
    text-decoration: none;
    color: #000;
    display: block;
    /* Pas de transform ici, on reste sobre */
}

/* --- LE CADRE A4 BLANC (Le cœur du design) --- */
.prod-image-container {
    width: 70%;
    /* Ratio A4 Vertical (21 x 29.7) */
    aspect-ratio: 210 / 297; 
    
    /* Le Cadre Blanc */
    background-color: #fff;
    padding: 15px; /* Épaisseur du blanc autour de la photo */
    border: 1px solid #eee; /* Bordure grise très fine */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Légère ombre */
    
    margin-bottom: 20px;
    position: relative; /* Pour le calque rouge */
    overflow: hidden;
}

.prod-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit bien le cadre */
    display: block;
}

/* --- L'EFFET ROUGE (OVERLAY) --- */
.prod-image-container::after {
    content: '';
    position: absolute;
    /* Couvre tout le cadre (y compris le blanc) */
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-color: rgba(255, 0, 0, 0); /* Invisible par défaut */
    transition: background-color 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

/* Au survol de la carte, le cadre devient rouge pâle */
.product-card:hover .prod-image-container::after {
    background-color: rgba(105, 0, 0, 0.2); /* Ton rouge #bc2f47 à 20% */
}

/* --- TEXTES (Nom et Prix) --- */
.prod-info {
    text-align: left; /* Ou center, selon ton goût */
    padding-left: 5px;
}

.prod-info h3 {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200; /* ExtraLight */
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
    color: #000;
}

.prod-info .price {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700; /* Bold/SemiBold pour le prix */
    font-size: 16px;
    color: #000;
    display: block;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .shop-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}




































/* =========================================
   PAGE PRODUIT UNIQUE (SCROLL CENTRÉ & TEXTE ÉTROIT)
   ========================================= */
.product-details-section {
    height: 110vh; 
    padding-top: 140px; 
    box-sizing: border-box;
    display: flex;
    align-items: center; 
}

.product-container {
    display: flex;
    /* On augmente l'espace global entre l'image et le bloc texte */
    gap: 40px; 
    width: 100%;
    max-width: 1300px; /* Un peu plus large au total pour compenser les marges */
    margin: 0 auto;
    height: 70vh; 
}

/* --- COLONNE IMAGE (GAUCHE) --- */
.prod-col-left {
    flex: 1;
    display: flex;
    justify-content: flex-end; 
    height: 100%; 
}

.main-image-frame {
    height: 100%; 
    width: auto;  
    aspect-ratio: 210 / 297; 
    background-color: #fff;
    padding: 15px;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.main-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- COLONNE INFOS (DROITE - SCROLLABLE) --- */
.prod-col-right {
    flex: 1;
    height: 100%; 
    overflow-y: auto; 
    
    /* La barre de scroll reste à gauche (au centre de l'écran) */
    direction: rtl; 
}

/* --- CONTENU TEXTE (On le remet à l'endroit) --- */
.prod-scroll-content {
    direction: ltr; 
    text-align: left;

    /* C'EST ICI QUE TOUT SE JOUE : */
    
    /* 1. Éloigne le texte de la barre de scroll (donc la barre parait plus centrée) */
    padding-left: 50px; 

    /* 2. Force le texte à revenir à la ligne plus tôt (grosse marge à droite) */
    padding-right: 160px; 
}

/* --- DESIGN DE LA BARRE DE SCROLL --- */
.prod-col-right::-webkit-scrollbar {
    width: 4px; /* Encore plus fin pour faire élégant */
}

.prod-col-right::-webkit-scrollbar-track {
    background: transparent; 
}

.prod-col-right::-webkit-scrollbar-thumb {
    background-color: #bbb; /* Gris clair discret */
    border-radius: 10px;   
}

.prod-col-right::-webkit-scrollbar-thumb:hover {
    background-color: #bc2f47; /* Devient rouge au survol (Optionnel, classe !) */
}

/* --- STYLE DU TITRE, PRIX, ETC... --- */
#prod-title {
    font-family: 'MyBroadway', sans-serif;
    font-weight: 600;
    font-size: 30px; 
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.prod-description {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 16px; /* Un peu plus petit pour l'élégance */
    margin-bottom: 30px;
    line-height: 1.8; /* Lignes aérées */
}

.prod-information {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 16px; /* Un peu plus petit pour l'élégance */
    margin-bottom: 30px;
    line-height: 1.8; /* Lignes aérées */
}

.prod-price-tag {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 600; 
    font-size: 22px;
    margin-bottom: 40px;
}


.options-group {
    margin-bottom: 10px;
}

.option-label {
    display: block;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 18px; /* [cite: 77] */
    margin-bottom: 10px;
    color: #bc2f47; /* Petit rappel couleur rouge pour les labels ? ou noir selon goût */
}

/* BOUTONS A5 / A4 (Style Pilule) */
.size-buttons {
    display: flex;
    flex-direction: column; /* L'un sous l'autre comme sur l'image */
    gap: 15px;
    max-width: 300px;
}

/* On cache le vrai bouton radio moche */
.size-buttons input[type="radio"] {
    display: none;
}

/* Le design du bouton (Label) */
.size-btn {
    display: block;
    padding: 12px 20px;
    border: 1px solid #bc2f47;
    border-radius: 50px; /* Arrondi pilule [cite: 101] */
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    color: #555;
}

/* Quand c'est sélectionné */
.size-buttons input[type="radio"]:checked + .size-btn {
    background-color: #db9f9f; /* Fond gris/rose pâle comme sur l'image [cite: 101] */
    color: #000;
    font-weight: 700;
    border-color: #bc2f47;
}

/* QUANTITÉ (- 1 +) */
.qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    width: fit-content;
    padding: 2px;
}

.qty-selector button {
    background: none;
    border: none;
    font-size: 20px;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
}

#qty-input {
    width: 40px;
    border: none;
    text-align: center;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

/* BOUTON ADD TO CART [cite: 86] */
.btn-add-cart {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 22px;
    text-transform: none;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.btn-add-cart:hover {
    background-color: #bc2f47;
    color: #fff;
}

/* MORE INFO (Bas de page) [cite: 112] */
.more-info-block h3 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 15px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    display: inline-block;
    text-transform: none;
}

.info-content p {
    font-size: 14px;
    margin-bottom: 5px;
    color: #777;
    font-weight: 400;
}
.disclaimer {
    font-style: italic;
    margin-top: 10px;
}

/* RESPONSIVE (Mobile) */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column;
    }
    .prod-col-left {
        width: 100%;
        max-width: none;
    }
    .btn-add-cart, .size-buttons {
        max-width: 100%;
    }
}








































/* =========================================
   PAGE CONTACT (DESIGN PDF PAGE 15)
   ========================================= */
.contact-section {
    padding: 240px 20px 80px;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* Titre Broadway 24px */
.contact-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* BLOC TEXTE INFORMATIF */
.contact-info {
    margin-bottom: 20px;
    max-width: 900px; /* Limite la largeur du texte pour qu'il reste lisible */
    margin-left: auto;
    margin-right: auto; 
    margin-top: 45px;
}

/* Texte courant : Montserrat ExtraLight 22px */
.info-text {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 19px;
    margin-bottom: 10px;
    color: #000;
}

/* L'email en gras (SemiBold demandé) */
.email-highlight {
    font-weight: 600; /* Utilise ton fichier Bold */
    display: block;   /* Force le passage à la ligne */
}
.text-highlight {
    font-weight: 600; /* Utilise ton fichier Bold */
    color: #000;
    text-decoration: none;
}
.text-highlight:hover {
    font-weight: 600; /* Utilise ton fichier Bold */
    color: #bc2f47;
    text-decoration: underline;
}









/* Lien FAQ */

.faq-redirect {
    font-weight: 600; /* Utilise ton fichier Bold */
    color: #000;
    text-decoration: none;
}
.faq-redirect:hover {
    font-weight: 600; /* Utilise ton fichier Bold */
    color: #bc2f47;
    text-decoration: underline;
}




/* Heures d'ouverture : SemiBold 22px */
.hours-text {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 18px;
    margin-bottom: 10px;
}

/* Spam Warning : ExtraLight Italic 22px */
.spam-text {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-style: italic; /* <--- C'est ici que ça devient italique */
    font-size: 16px;
    color: #2b2b2b; /* Un peu plus gris pour différencier ? ou #000 si tu préfères */
}

/* --- LE FORMULAIRE --- */
.contact-form {
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 10px;
}

/* Labels : NAME, EMAIL... (Montserrat ExtraLight 22) */
.contact-form label {
    display: block;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Champs de saisie */  
.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #000; /* Bordure noire fine */
    background: transparent;
    font-family: 'MyMontserrat', sans-serif;
    font-size: 18px;
    font-weight: 200;
}

/* Bouton SEND (Montserrat SemiBold 22) */
.btn-submit {
    width: 100%;
    padding: 15px;
    background-color: #bc2f47;
    color: #ffffff;
    border: 1px solid #000;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700; /* Bold/SemiBold */
    font-size: 22px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #000;
    color: #fff;
}

























































/* Style Quantité Panier */
.qty-controls {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.qty-btn {
    width: 30px; height: 30px;
    background: #eee; border: none; cursor: pointer;
    font-weight: bold;
}
.qty-btn:hover { background: #ddd; }
.qty-display {
    padding: 0 10px;
    font-weight: bold;
}

/* Style Poubelle */
.btn-trash {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.2rem; color: #000;
}
.btn-trash:hover { color: #bc2f47; }



















/* =========================================
   SECTION CATÉGORIES (FORMAT A4 & EFFET ROUGE)
   ========================================= */
.categories-section {
    padding: 50px 20px;
    background-color: #fff;
    text-align: center;
}






.cat-text-h2{
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-top: 15px;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.cat-text-h3{
    font-family: 'MyMontserrat', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #bc2f47;
}



.categories-grid {
    display: grid;
    /* On garde 4 colonnes, mais on limite la largeur pour que ça ressemble à des affiches */
    grid-template-columns: repeat(3, 1fr); 
    gap: 150px; /* Plus d'espace entre les cadres */
    max-width: 70%;
    margin: 0 auto;
}

.category-card {
    text-decoration: none;
    color: #000;
    display: block;
    /* Pas d'animation de mouvement (transform) pour rester sobre, juste la couleur */
}

/* LE CADRE PHOTO (A4) */
.cat-image-container {
    width: 100%;
    /* La formule magique pour le format A4 Vertical */
    aspect-ratio: 210 / 297; 
    
    /* Le Cadre Blanc */
    background-color: #fff; 
    padding: 15px; /* Épaisseur du cadre blanc autour de la photo */
    border: 1px solid #eee; /* Petite bordure grise subtile pour délimiter le blanc sur blanc */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Ombre légère pour donner du relief */
    
    margin-bottom: 20px;
    position: relative; /* Important pour placer le filtre rouge par-dessus */
    overflow: hidden;
}

/* L'IMAGE */
.cat-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit bien la zone sans déformer */
    display: block;
    opacity: 0.5;
    cursor: default;
}


/* LE FILTRE ROUGE (Overlay) */
.cat-image-container::after {
    content: '';
    position: absolute;
    
    /* MODIFICATION ICI : On couvre tout le bloc, bordures comprises */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    background-color: rgba(255, 0, 0, 0); /* Transparent par défaut */
    transition: background-color 0.1s ease;
    pointer-events: none;
    z-index: 10; /* On s'assure qu'il passe bien par-dessus tout */
}

/* ACTION : AU SURVOL */
.category-card:hover .cat-image-container::after {
    /* Rouge (255,0,0) avec 20% d'opacité (0.2) */
    background-color: #bc2f4733; 
}

/* Les Titres sous images */
.category-card h3 {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Style Coming Soon */
.category-card.coming-soon {
    opacity: 0.5;
    cursor: default;
}
.category-card.coming-soon:hover .cat-image-container::after {
    background-color: transparent; /* Pas d'effet rouge sur le coming soon */
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
    .categories-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}






















/* =========================================
   PAGE FAQ (MENU COLLANT & SECTIONS)
   ========================================= */

/* Le conteneur principal */
.faq-page-wrapper {
    display: flex;
    gap: 60px;
    max-width: 96%;
    margin: 0 auto;
    padding: 240px 20px 80px; /* Le padding-top laisse la place à la navbar */
    
    /* HYPER IMPORTANT POUR LE STICKY : Empêche la sidebar de s'étirer jusqu'en bas */
    align-items: flex-start; 
}
/* L'ASTUCE MAGIQUE : Le contrepoids invisible à droite */
.faq-page-wrapper::after {
    content: "";
    flex: 0 0 170px; /* Exactement la même largeur que le menu de gauche */
}

/* --- MENU LATÉRAL COLLANT --- */
.faq-sidebar {
    flex: 0 0 170px; /* Largeur de 170px fixe */
    
    /* LA MAGIE DU COLLANT */
    position: -webkit-sticky; /* Pour compatibilité Safari */
    position: sticky;
    top: 220px; /* Hauteur à laquelle il s'arrête de monter (sous ta navbar) */
    
    /* SÉCURITÉ VITAL : Forcer la hauteur pour que le sticky comprenne ses limites */
    height: fit-content; 
    /*margin-left: -18%;*/
}

.faq-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 2px solid #eee;
    padding-left: 0px;
}

.faq-link {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: #777;
    padding: 12px 15px;
    transition: all 0.3s ease;
    border-radius: 4px;
}   

.faq-link:hover {
    background-color: #f9f9f9;
    color: #bc2f47;
}

/* ÉTAT ACTIF (Noirci par le clic ou le scroll) */
.faq-link.active {
    background-color: #bc2f47;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

/* --- CONTENU DE LA FAQ (Droite) --- */
.faq-content {
    flex: 1; 
    /* Ajout d'une largeur max pour que le texte ne soit pas trop étiré, et centrage du bloc */
    max-width: 800px; 
    margin: 0 auto; 
    text-align: center; /* ON CENTRE TOUT LE TEXTE ICI */
}

.faq-main-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 50px;
    text-transform: uppercase;
}


.faq-section {
    margin-bottom: 70px;
    scroll-margin-top: 140px; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments à l'intérieur */
}

.faq-section h2 {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.faq-item {
    margin-bottom: 35px;
    width: 100%;
}

.faq-item h3 {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}




.faq-item p {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
}
/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .faq-page-wrapper {
        flex-direction: column; /* Le menu passe au-dessus du texte */
        gap: 40px;
    }
    
    .faq-sidebar {
        width: 100%;
        position: relative; /* Désactive le sticky sur mobile, c'est plus ergonomique */
        top: 0;
    }
    
    .faq-nav {
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap; /* Les boutons passent à la ligne si besoin */
        justify-content: center;
    }
    
    .faq-link {
        padding: 10px;
        font-size: 12px;
    }
}




















































/* =========================================
   PAGE CATALOG
   ========================================= */
.catalog-section {
    padding: 240px 20px 80px; /* Marge haute pour compenser le menu fixe */
    min-height: 80vh; /* Prend au moins 80% de l'écran pour pas faire vide */
    text-align: center;
    background-color: #fff;
}

/* On s'assure que le titre du catalog est bien stylé */
.catalog-section .cat-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}


















/* =========================================
   PAGE PANIER (CART)
   ========================================= */
.cart-section {
    padding: 240px 20px 80px;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 60vh;
}

.cart-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* --- LISTE DES ARTICLES --- */
.cart-items-list {
    margin-bottom: 50px;
    border-top: 1px solid #eee;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    gap: 20px;
}

/* Image */
.cart-img-box {
    width: 80px;
    height: 100px; /* Petit format vertical */
    background: #f9f9f9;
    flex-shrink: 0;
}
.cart-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Détails (Nom, Taille) */
.cart-item-details {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cart-item-details h3 {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;
}
.item-size, .item-price {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 14px;
    color: #555;
}

/* Contrôles Quantité */
.cart-qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    height: 35px;
}
.cart-qty-controls button {
    background: none;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
}
.cart-qty-controls span {
    width: 30px;
    text-align: center;
    font-family: 'MyMontserrat', sans-serif;
    font-size: 14px;
}

/* Actions (Total ligne + Trash) */
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}
.item-subtotal {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
}
.btn-trash {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    transition: color 0.3s;
}
.btn-trash:hover {
    color: #bc2f47; /* Rouge au survol */
}

/* --- RÉSUMÉ (TOTAL) --- */
.cart-summary {
    text-align: right;
    margin-top: 40px;
    border-top: 2px solid #000;
    padding-top: 20px;
}

.summary-row {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.summary-row span:first-child {
    font-weight: 200;
}
.summary-row span:last-child {
    font-weight: 700; /* Prix en gras */
}

.shipping-note {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 14px;
    color: #777;
    margin-bottom: 30px;
    font-style: italic;
}

/* Boutons d'action */
.cart-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.btn-clear {
    background: none;
    border: none;
    text-decoration: underline;
    font-family: 'MyMontserrat', sans-serif;
    cursor: pointer;
    color: #555;
    font-size: 14px;
}
.btn-clear:hover {
    color: #000;
}

.btn-checkout, .btn-continue {
    background-color: #000;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    border: 1px solid #000;
    transition: all 0.3s;
}
.btn-checkout:hover, .btn-continue:hover {
    background-color: #fff;
    color: #000;
}

/* Message panier vide */
.empty-cart-msg {
    text-align: center;
    padding: 40px;
}
.empty-cart-msg p {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .cart-img-box {
        width: 100%;
        height: auto;
    }
    .cart-item-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
    .cart-qty-controls {
        margin-top: 10px;
    }
    .cart-buttons {
        flex-direction: column;
    }
    .btn-checkout {
        width: 100%;
        text-align: center;
    }
}




/* =========================================
   PAGE CHECKOUT (PAIEMENT)
   ========================================= */
.checkout-section {
    padding: 240px 20px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.checkout-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 22px;
    text-align: center;
    margin-bottom: 60px;
    text-transform: uppercase;
}

.checkout-container {
    display: flex;
    gap: 60px;
}

/* --- COLONNE GAUCHE (FORMULAIRE) --- */
.checkout-form-col {
    flex: 3; /* Prend plus de place */
    padding-right: 20px;
}

.checkout-form-col h2 {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Styles des inputs (comme page Contact) */
.checkout-form-col .form-group {
    margin-bottom: 20px;
}

.checkout-form-col label {
    display: block;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 14px;
    margin-bottom: 5px;
    color: #555;
}

.checkout-form-col input, 
.checkout-form-col select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    font-family: 'MyMontserrat', sans-serif;
    font-size: 16px;
    background: transparent;
}

.form-row {
    display: flex;
    gap: 20px;
}
.form-row .form-group {
    flex: 1;
}

.payment-info {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}
.payment-note {
    font-style: italic;
    font-size: 14px;
    color: #bc2f47;
}

.btn-confirm {
    width: 100%;
    padding: 15px;
    background-color: #000;
    color: #fff;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-confirm:hover {
    background-color: #333;
}

/* --- COLONNE DROITE (RÉSUMÉ) --- */
.checkout-summary-col {
    flex: 2; /* Prend moins de place */
    background-color: #fcfcfc;
    padding: 30px;
    border: 1px solid #eee;
    height: fit-content; /* S'arrête à la fin du contenu */
}

.checkout-summary-col h2 {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200;
    font-size: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.summary-list {
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.sum-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sum-item-left img {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border: 1px solid #eee;
}

.sum-info {
    display: flex;
    flex-direction: column;
}

.sum-name {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.sum-qty {
    font-size: 12px;
    color: #777;
}

.sum-price {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 20px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .checkout-container {
        flex-direction: column-reverse; /* Met le résumé au dessus sur mobile, ou en dessous, selon préférence. Ici reverse = résumé en haut */
    }
    .checkout-form-col {
        padding-right: 0;
    }
}










/* =========================================
   PAGE COMMISSIONS
   ========================================= */
.commissions-hero {
    padding: 240px 20px 80px;
    text-align: center;
    max-width: 1100px ;
    margin: 0 auto;
}

.commissions-hero .page-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* --- CARROUSEL --- */
/* =========================================
   PAGE COMMISSIONS (Carrousel Uniforme)
   ========================================= */

/* (Haut .commissions-hero reste inchangé) */

/* --- CONTENEUR GLOBAL DU CARROUSEL (On le réduit pour que les images soient moins grandes) --- */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0px; /* Plus d'espace pour les boutons */
    
    /* MODIFICATION : On réduit la largeur max pour avoir des images plus petites au total */
    max-width: 100%; 
    margin: -80px 0; /* Centre le carrousel dans la page */
}

.carousel-track-container {
    overflow: hidden; 
    width: 100%;
    
    /* LA SOLUTION GUILLOTINE : */
    /* On ajoute 20px d'espace vide en haut et en bas à l'intérieur du bloc caché */
    padding: 0px 0; 
    
    /* On retire ces 20px à l'extérieur pour que ton design global ne bouge pas */
    margin: 115px 0; 
}


.carousel-track {
    display: flex;
    gap: 15px; 
    transition: transform 0.4s ease-in-out;
    
    /* AJOUT IMPORTANT : Empêche le conteneur d'étirer l'image vers le bas */
    align-items: flex-start; 
}

#carousel-track {
    display: flex;
    /* L'AJOUT CRUCIAL : On force l'alignement à gauche pour ne pas fausser le JS ! */
    justify-content: flex-start !important; 
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 0 !important; /* On s'assure qu'il n'y a pas d'espace fantôme entre les images */
}








/* --- STYLE DE L'IMAGE (C'est ici que la magie opère) --- */

/* --- STYLE DE L'IMAGE CARROUSEL --- */
.carousel-item {
    /* 3 colonnes exactes */
    flex: 0 0 calc((100% ) / 3); 
    width: calc((100% ) / 3); 
    padding: 0 10px;
    
    /* On force la hauteur à s'adapter sans jamais se bloquer */
    height: auto !important; 
    
    /* Règle d'or : tout afficher, interdiction de couper */
    box-sizing: border-box; /* Vital pour que le padding ne casse pas le calcul des 33% */
    
    object-fit: cover;
    
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    border-radius: 2px;
}

/* --- BOUTONS (Mise à jour du style) --- */
/* --- BOUTONS (Sans le cercle) --- */
.carousel-btn {
    position: absolute;
    background-color: transparent; /* On enlève le fond blanc */
    border: none;                  /* On enlève le trait de contour */
    cursor: pointer;
    font-size: 28px;               /* Flèche un peu plus grande */
    color: #000;                   /* Flèche noire */
    z-index: 10;
    transition: transform 0.2s;    /* Animation fluide */
    padding: 10px;                 /* Garde une zone cliquable confortable pour les doigts sur mobile */
}

.carousel-btn:hover {
    transform: scale(1.5);         /* Effet sympa : la flèche grossit au survol */
    color: #000000;           /* Décommente cette ligne si tu veux qu'elle devienne rouge ! */
}

.carousel-btn:hover {
    color: #bc2f47;
    border-color: #000;
}

/* Positionnement des flèches à l'extérieur du rail d'images */
.prev-btn { left:-50px ; }
.next-btn { right: -50px; }



/* --- POINTS DE PAGINATION DU CARROUSEL --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;         /* L'écart entre chaque point */
    margin-top: 5px;  /* L'espace entre l'image et les points */
    padding-bottom: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #d3d3d3; /* Gris très clair */
    border-radius: 50%;        /* Arrondi parfait */
    cursor: pointer;
    transition: all 0.3s ease; /* Animation fluide */
}

/* Effet au survol de la souris */
.dot:hover {
    background-color: #888;
}

/* Le point de l'image actuellement visible */
.dot.active {
    background-color: #000; /* Noir (ou tu peux mettre ton rouge #690000) */
    transform: scale(1.3);  /* Le point grossit un peu */
}
















/* =========================================
   SECTION TARIFS (COMMISSIONS)
   ========================================= */
.commissions-pricing {
    max-width: 100%;
    text-align: center;
    padding: 0;
    margin: -20px auto 80px;
}

/* --- 1. VERSION ORDINATEUR (Images superposées) --- */
.pricing-desktop {
    display: block; /* Visible sur PC */
}

.pricing-img-wrapper {
    position: relative; 
    display: block;
    width: 100%;
    z-index: 2;
}

.pricing-img {
    width: 100%;
    height: auto;
    position: relative; 
    display: block;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgb(255, 255, 255);
}

.pricing-img:first-of-type {
    margin-top: -150px; 
    z-index: 2; 
}

.pricing-img:last-of-type {
    margin-top: -30px; /* Remonte l'image 2 sous l'image 1 */
    z-index: 1; 
}

.invisible-hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10; 
    top: 78%;    
    left: 78%;   
    width: 14%;  
    height: 12%; 
   /* background-color: rgba(255, 0, 0, 0.5);*/
}

.invisible-hotspot2 {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10; 
    top: 27%;    
    left: 20.5%;   
    width: 13%;  
    height: 10%; 
    /*background-color: rgba(255, 0, 0, 0.5);*/
}

/* --- 2. VERSION MOBILE (Cachée sur PC) --- */
.pricing-mobile {
    display: none; /* On cache les morceaux découpés sur l'ordinateur */
}


/* --- BOUTON INVISIBLE MOBILE --- */
.pricing-img-wrapper-mobile {
    position: relative;
    width: 100%;
    display: block;
}
.invisible-hotspot-mobile1 {
    position: absolute;
    display: block;
    z-index: 10;
    cursor: pointer;
    
    /* J'ai calibré ça par rapport à ton image "prix_part4" */
    bottom: 35%; 
    left: 54%;
    width: 40%;
    height: 8%;
    
    /* DÉCOMMENTE CETTE LIGNE POUR VOIR LE CARRÉ ROUGE ET AJUSTER LES % SI BESOIN : */
     /*background: rgba(255, 0, 0, 0.4); */
}

.invisible-hotspot-mobile2 {
    position: absolute;
    display: block;
    z-index: 10;
    cursor: pointer;
    
    /* J'ai calibré ça par rapport à ton image "prix_part4" */
    bottom: 8%; 
    left: 32%;
    width: 38%;
    height: 12%;
    
    /* DÉCOMMENTE CETTE LIGNE POUR VOIR LE CARRÉ ROUGE ET AJUSTER LES % SI BESOIN : */
    /* background: rgba(255, 0, 0, 0.4); */
}





















/* --- ABOUT ME --- */



.aboutme-section {
    padding: 240px 20px 80px;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}


.aboutme-img {
    width: 114%;
    height: auto;
    border: 0px solid #eee;
    position: relative; 
    display: block;
    margin: -4% -6.8% -130px;
    box-shadow: 0 5px 20px rgb(255, 255, 255); /* Légère ombre élégante */
}


.aboutme-title {
    font-family: 'MyBroadway', sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 85px;
    text-transform: uppercase;
}


































/* =========================================
   PAGE COMING SOON
   ========================================= */
.coming-soon-section {
    /* Flexbox pour centrer parfaitement le bloc au milieu de l'écran */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* On prend 70% de la hauteur de l'écran pour être bien au centre */
    min-height: 70vh; 
    
    /* On laisse de la place pour la navbar en haut */
    padding-top: 150px; 
    padding-bottom: 145px;
    text-align: center;
}

.coming-soon-content h1 {
    font-family: 'MyBroadway', sans-serif;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 2px;
    margin-top: 60%;
    color: #bc2f47; 
    text-transform: uppercase;
}

.coming-soon-content p {
    font-family: 'MyMontserrat', sans-serif;
    font-weight: 200; /* Très fin */
    font-size: 20px;
    color: #000;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .coming-soon-content h1 {
        font-size: 40px; /* On réduit un peu pour que ça tienne sur téléphone */
    }
    .coming-soon-content p {
        font-size: 16px;
    }
}











































/* =========================================
   FOOTER (PIED DE PAGE)
   ========================================= */
footer {
    width: 100%;
    padding: 40px 20px;
    background-color: #fff; /* Fond blanc */
    border-top: 1px solid #eee; /* Petit trait gris de séparation */
    text-align: center; /* Texte centré */
    margin-top: 50px; /* Espace avec le contenu du dessus */
}

footer p {
    font-family: 'MyMontserrat', sans-serif;
    font-size: 14px;
    color: #000;
    font-weight: 400; /* ExtraLight pour rester chic */
    letter-spacing: 1px;
    margin: 0;
}




























































































    /* =========================================
    PARTIE PORTABLE
    ========================================= */




/* =========================================
   VERSION MOBILE & TABLETTE (Écrans < 768px)
   ========================================= */
@media (max-width: 768px) {
    
    body { zoom: 1 !important; }

    /* --- 1. AJUSTEMENT DE LA NAVBAR --- */
    .top-banner p { font-size: 11px; } /* Texte promo plus petit */
    
    .navbar {
        padding: 10px 20px !important;
        height: 60px;
        top: 30px !important;
        background-color: #fff !important; 
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        
        z-index: 2500 !important; 
    }

    .menu-overlay {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: 1500 !important; /* Bien en dessous de la navbar */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    .menu-overlay.active { opacity: 1; visibility: visible; }


 


    /* --- 2. MENU BURGER & LOGO --- */
    .burger-menu {
        display: block !important;
        font-size: 24px;
        cursor: pointer;
        color: #000;
        z-index: 1010;
    }
    .nav-center-block {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }
    .logo {
        font-size: 1.5rem !important;
        margin: 0 !important;
        margin-top: 3px !important;
    }
    .sub-logo, .desktop-socials { display: none; }


    /* --- 3. DROITE (Panier uniquement sur mobile) --- */

    .right-links {
        gap: 15px !important;
        margin: 0 !important;
    }
    .desktop-lang { 
        display: none !important; 
    }
    
    /* (Efface toutes les anciennes lignes avec .lang-full ou .lang-short si tu en as encore) */

    /* --- 4. LE TIROIR COULISSANT (Menu Gauche) --- */
    .left-links {
        position: fixed;
        top: 0;
        left: -100%; /* Hors de l'écran par défaut */
        width: 75%;
        max-width: 300px;
        height: 100vh;
        background-color: #fff;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start;
        padding: 80px 30px;
        transition: left 0.3s ease;
        z-index: 2000;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2);
        margin: 0 !important;
    }
    .left-links.active { left: 0; }
    .left-links li { margin-bottom: 25px; margin-right: 0; }
    .left-links a { font-size: 20px; font-weight: 600; }
    
    .close-menu {
        display: block !important;
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 30px;
        cursor: pointer;
        color: #000;
    }
    
    /* Réseaux sociaux mobile */
    .mobile-socials {
        display: flex !important;
        gap: 20px;
        margin-top: auto; /* Pousse ça tout en bas du menu */
        margin-bottom: 20px;
    }
    .mobile-socials a { font-size: 26px; color: #000; }

    /* --- LE BOUTON LANGUE DANS LE MENU BURGER --- */
    .mobile-lang-currency {
        display: block !important;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .mobile-lang-currency a {
        font-size: 16px;
        font-weight: 400;
        color: #555;
    }





    /* --- 5. FOND SOMBRE --- */
    .menu-overlay {
        display: block !important;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: 1500;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    .menu-overlay.active { opacity: 1; visibility: visible; }

    /* --- 6. RÉDUCTION DES ESPACES VIDES --- */
    .shop-section, .contact-section, .catalog-section, .commissions-hero, .cart-section, .aboutme-section, .faq-page-wrapper, .coming-soon-section {
        padding-top: 120px !important;
    }
    .hero {
        margin-top: 90px;
        height: 70vh;
    }

    /* --- 7. AJUSTEMENTS DU CONTENU (Carrousel, Grille) --- */
    .page-title, .faq-main-title { font-size: 28px; margin-bottom: 30px; }
    h2 { font-size: 20px; }
    #shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-layout { flex-direction: column; }



    /* --- 7. AJUSTEMENTS DU CARROUSEL MOBILE (PEEKABOO PARFAIT) --- */
    .carousel-wrapper {
        padding: 0 !important; 
        width: 100vw !important; /* Prend exactement la largeur de l'écran */
        overflow: hidden !important; /* Coupe proprement tout ce qui dépasse à gauche et à droite */
        box-sizing: border-box;
    }

    .carousel-track-container {
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important; /* Centre le rail lui-même */
        padding: 0 !important;
    }

    /* 2. Le rail doit être une simple ligne flexible */
    #carousel-track {
        display: flex !important;
        justify-content: center !important; /* Centre les éléments */
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important; /* Le rail s'adapte au contenu */
    }

    /* 3. L'image centrale est forcée à 75% */
    .carousel-item {
        flex: 0 0 75vw !important; 
        max-width: 75vw !important; 
        aspect-ratio: 4 / 5;
        height: auto;
        opacity: 0.4;
        transition: opacity 0.4s ease !important;
    }

    /* 4. L'image active devient centrale et opaque */
    .carousel-item.active-slide {
        opacity: 1 !important;
    }

    /* --- CORRECTION DES FLÈCHES --- */
    .carousel-btn {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        -webkit-tap-highlight-color: transparent; 
    }
    .prev-btn { left: 5px !important; color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 20; }
    .next-btn { right: 5px !important; color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 20; }


    /* --- 8. SECTION TARIFS (Empilement sans espace) --- */
    .pricing-desktop {
        display: none !important; /* On cache la version PC */
    }

    .pricing-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Le secret pour coller les images bord à bord : */
    .pricing-mobile img {
        width: 100%;
        height: auto;
        display: block;       
        margin: 0;            
        padding: 0;           
        border: none;         
    }



 



}