/**
 * ============================================
 * EUGÈNE COLOR - CUSTOM CSS
 * Thème enfant Uncode
 * ============================================
 * 
 * TABLE DES MATIÈRES :
 * 
 * 1. VARIABLES & BASES
 * 2. TYPOGRAPHIE & ÉLÉMENTS GLOBAUX
 * 3. NAVIGATION & MENU
 * 4. LISTES À PUCES PERSONNALISÉES
 * 5. FORMULAIRES (Gravity Forms)
 * 6. FICHE PRODUIT - GÉNÉRAL
 * 7. FICHE PRODUIT - GALERIE/SLIDER
 * 8. FICHE PRODUIT - SÉLECTEUR COULEURS
 * 9. FICHE PRODUIT - TABS/ONGLETS
 * 10. FICHE PRODUIT - BADGES & ÉTIQUETTES
 * 11. FICHE PRODUIT - RÉSULTATS & CONSEILS
 * 12. SYSTÈME DE GAMMES (Eclat/Glow)
 * 13. BOUTONS CTA
 * 14. PAGES SPÉCIFIQUES
 * 15. FOOTER
 * 16. RESPONSIVE - TABLETTE (max 991px)
 * 17. RESPONSIVE - MOBILE (max 767px)
 * 18. RESPONSIVE - PETIT MOBILE (max 480px)
 * 19. RESPONSIVE - TRÈS PETIT (max 375px)
 * 
 * ============================================
 */


/* ============================================
   1. VARIABLES & BASES
   ============================================ */

:root {
    /* Couleurs principales */
    --ec-violet: #643AB5;
    --ec-violet-light: #8B5FBF;
    --ec-violet-lighter: #B88DD9;
    --ec-violet-bg: #f8f4ff;
    --ec-violet-border: #e1d5f0;
    
    --ec-rose: #d8146b;
    --ec-rose-light: #E4538D;
    --ec-rose-lighter: #F285B5;
    
    --ec-text-dark: #1a004f;
    --ec-text-medium: #555;
    --ec-text-light: #666;
    
    --ec-bg-product: #F6F4FA;
    
    /* Espacements */
    --ec-spacing-xs: 5px;
    --ec-spacing-sm: 10px;
    --ec-spacing-md: 15px;
    --ec-spacing-lg: 20px;
    --ec-spacing-xl: 30px;
    
    /* Border radius */
    --ec-radius-sm: 8px;
    --ec-radius-md: 12px;
    --ec-radius-lg: 20px;
    --ec-radius-xl: 50px;
}


/* ============================================
   2. TYPOGRAPHIE & ÉLÉMENTS GLOBAUX
   ============================================ */

/* Titres principaux - graisse allégée pour harmoniser avec le logo */
.home h1,
.home h2,
.home .h1,
.home .h2,
.page h1,
.page h2,
.page .h1,
.page .h2 {
    font-weight: 300 !important; /* Light pour harmoniser avec le logo */
}

/* Exposants */
.h2 sup,
.single-product sup {
    font-size: 0.4em;
    line-height: 0;
    vertical-align: super;
    margin-right: 3px;
}

.fontsize-648796-custom sup {
    font-size: 0.5em;
    top: -10px !important;
}

/* Titres fiche produit */
.single-product .style-light h6 {
    color: var(--ec-violet);
    font-size: 16px;
    font-weight: 600;
}

/* Icon-box headings */
.icon-box-left .icon-box-heading > *,
.icon-box-right .icon-box-heading > * {
    display: table-cell;
    vertical-align: middle;
    padding-top: 11px !important;
    color: var(--ec-text-dark) !important;
    line-height: 1.5 !important;
}


/* ============================================
   3. NAVIGATION & MENU
   ============================================ */

/* Menu mobile - icônes */
.single-product .row-menu .mobile-menu-button.mobile-menu-button-light .lines span,
.single-product .row-menu .mobile-menu-button.mobile-menu-button-light .lines span:before,
.single-product .row-menu .mobile-menu-button.mobile-menu-button-light .lines span:after {
    background-color: #ffffff !important;
}


/* ============================================
   4. LISTES À PUCES PERSONNALISÉES
   ============================================ */

/* Liste avec coches violettes */
ul.liste-coches-bleues {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul.liste-coches-bleues li,
.liste-coches-bleues li {
    list-style: none;
    padding-left: 25px;
    position: relative;
}

ul.liste-coches-bleues li:before,
.liste-coches-bleues li:before {
    content: "\f058";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 300;
    position: absolute;
    left: 0;
    color: var(--ec-violet);
}

/* Liste numérotée avec badges dégradés */
.icons {
    counter-reset: step-counter;
}

.icons li {
    position: relative;
    counter-increment: step-counter;
}

.icons li i.fa.fa-check {
    display: none !important;
}

.icons li:before {
    content: counter(step-counter);
    width: 32px;
    height: 40px;
    background: linear-gradient(to right, var(--ec-violet-border), var(--ec-violet));
    border-radius: 10px 0 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Gotham', sans-serif;
    margin-right: 5px;
    vertical-align: middle;
}

/* Single product - liste numérotée */
.single-product ul.icons {
    padding-left: 0 !important;
    list-style: none !important;
    counter-reset: step-counter;
}

.single-product ul.icons li {
    position: relative;
    padding-left: 45px !important;
    margin-bottom: 10px !important;
    counter-increment: step-counter;
    min-height: 50px;
    display: block;
    white-space: normal;
    word-spacing: normal;
}

.single-product ul.icons li .fa {
    display: none !important;
}

.single-product ul.icons li:before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 25px;
    width: 32px;
    height: 40px;
    background: linear-gradient(to right, var(--ec-violet-border), var(--ec-violet));
    border-radius: 10px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Gotham', sans-serif;
}

.single-product ul.icons li sup {
    font-size: 0.5em;
    line-height: 0;
    display: inline;
    margin: 0 -2px 0 0;
}

/* Variante text-small */
body.single-product ul.icons.text-small li {
    position: relative !important;
    padding-left: 50px !important;
    padding-top: 0 !important;
    margin-bottom: 15px !important;
    min-height: 40px !important;
    display: table !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body.single-product ul.icons.text-small li:before {
    content: counter(step-counter) !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: auto 0 !important;
    margin-top: -12px !important;
    width: 32px !important;
    height: 40px !important;
    background: linear-gradient(to right, var(--ec-violet-border), var(--ec-violet)) !important;
    border-radius: 10px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

body.single-product ul.icons.text-small li:nth-child(2):before {
    margin-top: -5px !important;
}

body.single-product ul.icons.text-small li:nth-child(3) {
    margin-top: 22px !important;
}


/* ============================================
   5. FORMULAIRES (Gravity Forms)
   ============================================ */

#gform_submit_button_1 {
    background: var(--ec-violet) !important;
    border-radius: var(--ec-radius-xl);
}

#gform_wrapper_1 input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: white;
}

/* Bouton formulaire avec animation */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
    background-color: transparent !important;
    color: var(--ec-violet) !important;
    border: none !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    display: inline-block !important;
    background: linear-gradient(var(--ec-violet), var(--ec-violet-border)) left bottom / 100% 2px no-repeat !important;
    transition: background-size 400ms cubic-bezier(0.25, 0.45, 0.4, 1),
                background-position 400ms cubic-bezier(0.25, 0.45, 0.4, 1) 400ms !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
    background-size: 0% 2px !important;
    background-position: right bottom !important;
}


/* ============================================
   6. FICHE PRODUIT - GÉNÉRAL
   ============================================ */

div.product .wootabs .tab-content:not(.vertical) {
    border-top-width: 0px;
}

.nav-tabs > li {
    font-size: 20px;
    font-weight: 600;
}

/* Background images produit */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-main-image img {
    background-color: var(--ec-bg-product);
    padding: 20px;
    border-radius: var(--ec-radius-sm);
}

.single-product .flex-control-thumbs img {
    background-color: var(--ec-bg-product);
    padding: 10px;
    border-radius: var(--ec-radius-sm);
}

/* Espacement contenu produit */
.single-product .main-container .row-container .row-parent .single-internal-gutter .uncont > *:not(.uncode-owl-nav-wrap):not(.pin-spacer):not([data-sticky]) {
    margin-top: 18px;
}

.single-product .liste-coches-bleues {
    margin-top: 0px;
}

/* Désactiver uppercase dans tabs */
.product-tab,
.product-tab .uncode_text_column,
.product-tab ul li,
.product-tab p,
.tab-pane .uncode_text_column,
.tab-pane .uncode_text_column ul,
.tab-pane .uncode_text_column p,
.tab-pane .uncode_text_column li {
    text-transform: none !important;
}

.vc_tta-tab a {
    text-transform: uppercase !important;
}


/* ============================================
   7. FICHE PRODUIT - GALERIE/SLIDER
   ============================================ */

/* Navigation slider */
.woocommerce-product-gallery .owl-nav,
.woocommerce-product-gallery-nav .owl-nav {
    display: block !important;
}

.woocommerce-product-gallery .owl-prev,
.woocommerce-product-gallery .owl-next,
.woocommerce-product-gallery-nav .owl-prev,
.woocommerce-product-gallery-nav .owl-next {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(150, 150, 150, 0.8) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
    overflow: hidden !important;
}

/* Masquer contenu interne flèches */
.woocommerce-product-gallery .owl-prev *,
.woocommerce-product-gallery .owl-next *,
.woocommerce-product-gallery-nav .owl-prev *,
.woocommerce-product-gallery-nav .owl-next * {
    display: none !important;
    visibility: hidden !important;
}

/* Symboles flèches */
.woocommerce-product-gallery .owl-prev::before,
.woocommerce-product-gallery-nav .owl-prev::before {
    content: "‹" !important;
    font-size: 16px !important;
    color: #333 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-weight: 300 !important;
    text-indent: 0 !important;
    visibility: visible !important;
    display: block !important;
}

.woocommerce-product-gallery .owl-next::before,
.woocommerce-product-gallery-nav .owl-next::before {
    content: "›" !important;
    font-size: 16px !important;
    color: #333 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-weight: 300 !important;
    text-indent: 0 !important;
    visibility: visible !important;
    display: block !important;
}

/* Hover flèches */
.woocommerce-product-gallery .owl-prev:hover,
.woocommerce-product-gallery .owl-next:hover,
.woocommerce-product-gallery-nav .owl-prev:hover,
.woocommerce-product-gallery-nav .owl-next:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(100, 100, 100, 0.9) !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* Positionnement flèches */
.woocommerce-product-gallery .owl-prev,
.woocommerce-product-gallery-nav .owl-prev {
    left: 5px !important;
}

.woocommerce-product-gallery .owl-next,
.woocommerce-product-gallery-nav .owl-next {
    right: 5px !important;
}


/* ============================================
   8. FICHE PRODUIT - SÉLECTEUR COULEURS
   ============================================ */

.color-images-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0px 10px !important;
    max-width: 500px !important;
}

.color-image-item {
    width: 90px !important;
}

.color-image-item:nth-child(6) {
    margin-left: 0 !important;
}

/* Pastilles - état normal */
.color-image-item .color-image {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Pastilles non actives - hover avec bordure dégradée */
.color-image-hover {
    width: 65px !important;
    height: 65px !important;
    margin: 0 auto !important;
    border: 2px solid transparent !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    padding: 0px !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.color-image-hover:hover {
    padding: 4px !important;
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(135deg, #E5C5F1, #B88DD9, #8B5FBF, #643AB5) border-box !important;
    box-shadow: 0 0 15px rgba(100, 58, 181, 0.4) !important;
}

.color-image-hover:hover img {
    border-radius: 50px !important;
}


/* ============================================
   9. FICHE PRODUIT - TABS/ONGLETS
   ============================================ */

.vc_custom_1758205325368 .btn.text_button {
    font-size: 12px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}


/* ============================================
   10. FICHE PRODUIT - BADGES & ÉTIQUETTES
   ============================================ */

/* Container étiquettes */
.etiquettes-produit-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

/* Style Badge */
.etiquette-produit-badge {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--ec-violet-bg) 0%, #ffffff 100%);
    border: 1px solid var(--ec-violet-border);
    border-radius: var(--ec-radius-lg);
    color: var(--ec-violet);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* Style Texte */
.etiquette-produit-texte {
    display: inline-block;
    color: var(--ec-violet);
    font-size: 15px;
    font-weight: 600;
}

/* Style Bouton */
.etiquette-produit-bouton {
    display: inline-block;
    padding: 10px 20px;
    background: var(--ec-violet);
    color: white !important;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    line-height: 1;
}

.etiquette-produit-bouton:hover {
    background: #4a2a85;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 58, 181, 0.3);
}

/* Badge avec border-radius spécial */
.badge-rounded-top-right {
    border-radius: 0 80px 0 0 !important;
    padding: 25px 50px 25px 30px !important;
    display: inline-block !important;
}

.badge-rounded-top-right .badge-style { border-radius: 0 50px 0 0 !important; }
.badge-rounded-bottom-left .badge-style { border-radius: 0 0 0 50px !important; }
.badge-rounded-top-left .badge-style { border-radius: 50px 0 0 0 !important; }
.badge-rounded-bottom-right .badge-style { border-radius: 0 0 50px 0 !important; }

.badge-rounded-top-right,
.badge-rounded-bottom-left,
.badge-rounded-top-left,
.badge-rounded-bottom-right {
    overflow: visible !important;
}

/* Badge gamme avec logo */
.product-gamme {
    width: fit-content !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    box-shadow: none !important;
}

.product-gamme .gamme-logo,
.product-gamme img.gamme-logo,
.uncode_text_column .product-gamme img {
    height: 40px !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Supprimer tous les fonds des gammes */
.product-gamme.gamme-color-eclat,
.product-gamme.gamme-eclat,
.product-gamme.gamme-coloration-permanente,
.product-gamme.gamme-color-glow,
.product-gamme.gamme-glow,
.product-gamme.gamme-decolorant,
.product-gamme.gamme-le-decolorant {
    background: none !important;
    box-shadow: none !important;
}


/* ============================================
   11. FICHE PRODUIT - RÉSULTATS & CONSEILS
   ============================================ */

/* Zone résultats */
.zone-resultats {
    margin: 15px 0 30px 0;
}

.zone-resultats .resultats-titre {
    display: none;
}

.single-product .zone-resultats {
    margin-top: 5px;
}

/* ========================================
   ENCART CONSEIL DE CORRESPONDANCE
   ======================================== */

.encart-conseil {
    border-radius: 12px;
    padding: 18px 20px;
    margin: 20px 0;
    border-left: 4px solid;
}

.encart-conseil .conseil-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    padding-left: 28px;
}

.encart-conseil .conseil-header::before {
    content: "\f0eb";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.encart-conseil .conseil-header strong {
    font-size: 15px;
    font-weight: 600;
}

.encart-conseil p {
    margin: 8px 0 0 0;
    line-height: 1.6;
    font-size: 14px;
}

.encart-conseil .btn-guide {
    display: inline-flex;
    align-items: center;
    background: transparent;
    padding: 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    margin-top: 12px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 20px;
}

.encart-conseil .btn-guide::before {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.encart-conseil .btn-guide:hover::before {
    transform: translateX(3px);
}

/* --- Variante ECLAT (Violet) - Par défaut --- */
.encart-conseil.gamme-eclat {
    background: linear-gradient(135deg, #f8f4ff 0%, #ede6f7 100%);
    border-left-color: #643AB5;
}

.encart-conseil.gamme-eclat .conseil-header {
    color: #643AB5;
}

.encart-conseil.gamme-eclat .conseil-header::before {
    color: #B88DD9;
}

.encart-conseil.gamme-eclat p {
    color: #4a3a6b;
}

.encart-conseil.gamme-eclat .btn-guide {
    color: #643AB5 !important;
    border-bottom: 1px solid #643AB5;
}

.encart-conseil.gamme-eclat .btn-guide:hover {
    color: #4a2a85 !important;
    border-bottom-color: #4a2a85;
}

/* --- Variante GLOW (Rose) --- */
.encart-conseil.gamme-glow {
    background: linear-gradient(135deg, #fff5f9 0%, #fce8f0 100%);
    border-left-color: #E61B75;
}

.encart-conseil.gamme-glow .conseil-header {
    color: #E61B75;
}

.encart-conseil.gamme-glow .conseil-header::before {
    color: #F285B5;
}

.encart-conseil.gamme-glow p {
    color: #6b3a4a;
}

.encart-conseil.gamme-glow .btn-guide {
    color: #E61B75 !important;
    border-bottom: 1px solid #E61B75;
}

.encart-conseil.gamme-glow .btn-guide:hover {
    color: #c4165f !important;
    border-bottom-color: #c4165f;
}

/* --- Variante DECOLORANT (Bleu) --- */
.encart-conseil.gamme-decolorant {
    background: linear-gradient(135deg, #f0faff 0%, #e0f4fc 100%);
    border-left-color: #0FAAE3;
}

.encart-conseil.gamme-decolorant .conseil-header {
    color: #0FAAE3;
}

.encart-conseil.gamme-decolorant .conseil-header::before {
    color: #5BC8F0;
}

.encart-conseil.gamme-decolorant p {
    color: #2a5a6b;
}

.encart-conseil.gamme-decolorant .btn-guide {
    color: #0FAAE3 !important;
    border-bottom: 1px solid #0FAAE3;
}

.encart-conseil.gamme-decolorant .btn-guide:hover {
    color: #0a8bbb !important;
    border-bottom-color: #0a8bbb;
}

/* Responsive mobile */
@media (max-width: 767px) {
    .encart-conseil {
        padding: 15px 16px;
        margin: 15px 0;
        border-radius: 10px;
    }
    
    .encart-conseil .conseil-header {
        padding-left: 26px;
    }
    
    .encart-conseil .conseil-header::before {
        font-size: 16px;
    }
    
    .encart-conseil .conseil-header strong {
        font-size: 14px;
    }
    
    .encart-conseil p {
        font-size: 13px;
    }
    
    .encart-conseil .btn-guide {
        font-size: 12px;
        margin-top: 10px;
    }
}

/* Phrase de correspondance */
.phrase-correspondance {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-text-medium);
    margin: 15px 0;
}

.phrase-correspondance strong {
    color: var(--ec-violet);
    font-weight: 600;
}

.phrase-correspondance-encadre {
    background: linear-gradient(135deg, var(--ec-violet-bg) 0%, #ffffff 100%);
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: var(--ec-radius-sm);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-text-medium);
}

.phrase-correspondance-encadre strong {
    color: var(--ec-violet);
    font-weight: 600;
}

.phrase-correspondance-minimal {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ec-text-light);
    font-style: italic;
    margin: 15px 0;
}

.phrase-correspondance-minimal strong {
    color: var(--ec-violet);
    font-weight: 600;
    font-style: normal;
}


/* ============================================
   12. SYSTÈME DE GAMMES (Eclat/Glow)
   ============================================ */

/* Masquer blocs par gamme */
body.gamme-eclat #glow-engagement,
body.gamme-eclat #glow-soin,
body.gamme-color-eclat #glow-engagement,
body.gamme-color-eclat #glow-soin {
    display: none !important;
}

body.gamme-glow #eclat-engagement,
body.gamme-glow #eclat-soin,
body.gamme-color-glow #eclat-engagement,
body.gamme-color-glow #eclat-soin {
    display: none !important;
}

/* --- PUCES LISTE PAR GAMME --- */

/* Couleur par défaut (violet pour Eclat) */
ul.liste-coches-bleues li:before {
    color: #663AB5;
}

/* Couleur rose pour les produits Glow */
body.gamme-glow ul.liste-coches-bleues li:before,
body.gamme-color-glow ul.liste-coches-bleues li:before {
    color: #E61B75;
}

/* Couleur bleue pour les produits Décolorant */
body.gamme-decolorant ul.liste-coches-bleues li:before,
body.gamme-le-decolorant ul.liste-coches-bleues li:before {
    color: #04A7E1;
}

/* --- BOUTONS PAR GAMME --- */

/* Bouton par défaut violet (Eclat) */
.btn-button_color-207632 {
    color: #ffffff !important;
    background-color: #663AB5 !important;
    border-color: #663AB5 !important;
}

/* Bouton rose pour Glow */
body.gamme-glow .btn-button_color-207632,
body.gamme-color-glow .btn-button_color-207632 {
    background-color: #E61B75 !important;
    border-color: #E61B75 !important;
}

/* Bouton bleu pour Décolorant */
body.gamme-decolorant .btn-button_color-207632,
body.gamme-le-decolorant .btn-button_color-207632 {
    background-color: #04A7E1 !important;
    border-color: #04A7E1 !important;
}

/* --- HOVER BOUTONS PAR GAMME --- */

/* Hover bouton Eclat */
body.gamme-eclat .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,
body.gamme-color-eclat .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover {
    background-color: transparent !important;
    border-color: #663AB5 !important;
    color: #663AB5 !important;
}

/* Hover bouton Glow */
body.gamme-glow .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,
body.gamme-color-glow .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover {
    background-color: transparent !important;
    border-color: #E61B75 !important;
    color: #E61B75 !important;
}

/* Hover bouton Décolorant */
body.gamme-decolorant .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,
body.gamme-le-decolorant .btn-button_color-207632:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover {
    background-color: transparent !important;
    border-color: #04A7E1 !important;
    color: #04A7E1 !important;
}

/* Phrase correspondance Glow */
body.gamme-glow .phrase-correspondance strong,
body.gamme-color-glow .phrase-correspondance strong,
body.gamme-glow .phrase-correspondance-encadre strong,
body.gamme-color-glow .phrase-correspondance-encadre strong,
body.gamme-glow .phrase-correspondance-minimal strong,
body.gamme-color-glow .phrase-correspondance-minimal strong {
    color: var(--ec-rose);
}

body.gamme-glow .phrase-correspondance-encadre,
body.gamme-color-glow .phrase-correspondance-encadre {
    border-left-color: var(--ec-rose);
}


/* ============================================
   13. BOUTONS CTA
   ============================================ */

.btn-product-cta {
    box-shadow: 0 2px 10px rgba(63, 182, 180, 0.3);
    transition: all 0.3s ease;
}


/* ============================================
   14. PAGES SPÉCIFIQUES
   ============================================ */

/* --- Page Coloration (159633) --- */

/* Border radius images nuances */
.tmb-grid .t-entry-visual img,
.tmb-grid .t-entry-visual-cont,
.tmb-grid .t-entry-visual-tc,
.tmb-grid .t-entry-visual a.pushed {
    border-radius: 12px 0 12px 0 !important;
    overflow: hidden;
}


/* ============================================
   15. FOOTER
   ============================================ */

.site-footer ul li {
    font-size: 13px;
}


/* ============================================
   15B. TABLEAU CORRESPONDANCE NUANCES
   ============================================ */

.tableau-correspondance-nuances {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.tableau-correspondance-nuances thead th {
    color: white;
    font-weight: 600;
    padding: 15px 20px;
    text-align: center;
    font-size: 16px;
}

.tableau-correspondance-nuances tbody td {
    padding: 12px 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

/* Tableau Glow - Rose */
.tableau-correspondance-nuances thead th {
    background: #E61B75;
}

.tableau-correspondance-nuances tbody tr:nth-child(even) {
    background-color: #fdf2f7;
}

/* Tableau Eclat - Violet */
.tableau-correspondance-nuances.tableau-eclat thead th {
    background: #663ab5;
}

.tableau-correspondance-nuances.tableau-eclat tbody tr:nth-child(even) {
    background-color: #f3f1f8;
}

/* Responsive mobile */
@media (max-width: 767px) {
    .tableau-correspondance-nuances {
        font-size: 13px;
    }
    
    .tableau-correspondance-nuances thead th {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    .tableau-correspondance-nuances tbody td {
        padding: 10px 8px;
    }
}


/* ============================================
   16. RESPONSIVE - TABLETTE (max 991px)
   ============================================ */

@media (max-width: 991px) {
    /* Page 159633 - Icon boxes */
    .page-id-159633 .icon-box-top .icon-box-icon {
        width: 50px !important;
        margin-bottom: 10px !important;
    }
    
    .page-id-159633 .icon-box-top .icon-box-icon img {
        max-width: 50px !important;
    }
    
    .page-id-159633 .icon-box-top h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .page-id-159633 .icon-box-top .text-small {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    .page-id-159633 .double-block-padding {
        padding: 20px 15px !important;
    }
}


/* ============================================
   17. RESPONSIVE - MOBILE (max 767px)
   ============================================ */

@media (max-width: 767px) {
    
    /* --- Grille couleurs --- */
    .color-images-grid {
        gap: 18px 6px !important;
        justify-content: center !important;
        padding: 0 5px !important;
        margin: 0 -10px !important;
    }
    
    .color-image-item {
        flex: 0 0 calc((100% - 12px) / 3) !important;
        max-width: 100px !important;
        width: 90px !important;
    }
    
    .color-image-item a,
    .color-image-item .color-image {
        width: 60px !important;
        height: 60px !important;
    }
    
    .color-image-item span {
        font-size: 10px !important;
    }
    
    /* --- Boutons CTA --- */
    .btn-product-cta {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 14px 25px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
        margin: 0 auto !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    .row-inner-force {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    /* --- Étiquettes --- */
    .etiquette-produit-badge,
    .etiquette-produit-bouton {
        font-size: 13px;
        padding: 7px 16px;
    }
    
    .etiquette-produit-texte {
        font-size: 14px;
    }
    
    /* --- Badge gamme --- */
    .product-gamme {
        padding: 6px 12px !important;
    }
    
    .product-gamme .gamme-logo,
    .product-gamme img.gamme-logo {
        height: 20px !important;
        max-width: 85px !important;
    }
    
    /* --- Badge arrondi --- */
    .badge-rounded-top-right {
        border-radius: 0 50px 0 0 !important;
        padding: 15px 30px 15px 20px !important;
        font-size: 1.2rem !important;
    }
    
    .tmb-grid .t-entry-visual img,
    .tmb-grid .t-entry-visual-cont,
    .tmb-grid .t-entry-visual-tc,
    .tmb-grid .t-entry-visual a.pushed {
        border-radius: 20px 0 20px 0 !important;
    }
    
    /* --- Phrase correspondance --- */
    .phrase-correspondance,
    .phrase-correspondance-encadre,
    .phrase-correspondance-minimal {
        font-size: 14px;
    }
    
    .phrase-correspondance-encadre {
        padding: 12px 15px;
    }
    
    /* --- Tabs produit mobile --- */
    .single-product .vc_tta-tabs-container {
        position: relative !important;
        min-height: 600px !important;
    }
    
    .single-product .vc_tta-tabs-list {
        display: block !important;
        text-align: center !important;
    }
    
    .single-product .vc_tta-tab {
        display: block !important;
        width: 100% !important;
    }
    
    .single-product .vc_tta-tab > a {
        display: block !important;
        padding: 10px 20px !important;
        margin-bottom: 5px !important;
    }
    
    .single-product .tab-pane {
        display: none !important;
    }
    
    .single-product .switcher-cursor {
        display: none !important;
    }
    
    /* --- Bouton point de vente --- */
    .single-product .desktop-hidden .btn-container.btn-block {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .single-product .desktop-hidden .btn-block .custom-link.btn,
    .single-product .desktop-hidden.tablet-hidden .custom-link.btn {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        min-width: 280px !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    /* --- Images produit sans padding --- */
    .single-product .wpb_column.no-mobile-padding,
    .single-product .col-sm-100.single-internal-gutter,
    .single-product .no-mobile-padding .uncol,
    .single-product .no-mobile-padding .uncoltable,
    .single-product .no-mobile-padding .uncell,
    .single-product .no-mobile-padding .uncont,
    .single-product .no-mobile-padding .row-container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    .single-product .no-border {
        border-top: none !important;
        border-bottom: none !important;
    }
    
    /* --- Page 159633 spécifique --- */
    .page-id-159633 .icon-box-top .icon-box-icon {
        width: 40px !important;
    }
    
    .page-id-159633 .icon-box-top .icon-box-icon img {
        max-width: 40px !important;
    }
    
    .page-id-159633 .icon-box-top h3 {
        font-size: 16px !important;
    }
    
    .page-id-159633 .icon-box-top .text-small {
        font-size: 12px !important;
    }
    
    .page-id-159633 .double-block-padding {
        padding: 15px 10px !important;
    }
    
    .page-id-159633 .icon-box-left {
        padding-left: 20px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-icon {
        margin-right: 20px !important;
        width: 15px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-icon img {
        max-width: 15px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-heading h3.h5 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-heading .h6 {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .page-id-159633 .fontsize-355009-custom {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }
    
    .page-id-159633 .badge-rounded-top-right h3.h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .page-id-159633 .fontsize-211407-custom {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .page-id-159633 .badge-rounded-top-right .badge-style,
    .page-id-159633 .badge-rounded-bottom-left .badge-style {
        padding: 20px 30px !important;
    }
    
    .page-id-159633 .badge-rounded-bottom-left .fontsize-355009-custom {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    
    /* --- Page contact --- */
    .page-id-160155 .h4.text-accent-color {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    /* --- Homepage --- */
    .home .h6:not([class*="fontsize-"]),
    .page-id-159602 .h6:not([class*="fontsize-"]) {
        font-size: 15px;
    }
    
    .home .icon-box-left .icon-box-content,
    .page-id-159602 .icon-box-left .icon-box-content {
        padding-top: 15px !important;
    }
    
    .home .icon-box.icon-box-left,
    .page-id-159602 .icon-box.icon-box-left {
        margin-left: -15px !important;
    }
    
    .home .icon-box.icon-box-left .h6:not([class*="fontsize-"]),
    .page-id-159602 .icon-box.icon-box-left .h6:not([class*="fontsize-"]) {
        font-size: 14px !important;
    }
    
    .page-id-159602 h3:not([class*="fontsize-"]),
    .page-id-159602 .h3:not([class*="fontsize-"]) {
        font-size: 20px;
    }
    
    /* --- Footer --- */
    footer .footer-last {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}


/* ============================================
   18. RESPONSIVE - PETIT MOBILE (max 480px)
   ============================================ */

@media (max-width: 480px) {
    
    /* --- Grille couleurs --- */
    .color-images-grid {
        gap: 15px 4px !important;
    }
    
    .color-image-item {
        flex: 0 0 calc((100% - 8px) / 3) !important;
        max-width: 90px !important;
    }
    
    .color-image-item a,
    .color-image-item .color-image {
        width: 55px !important;
        height: 55px !important;
    }
    
    /* --- Boutons --- */
    .btn-product-cta {
        font-size: 13px !important;
        padding: 12px 18px !important;
    }
    
    /* --- Page 159633 --- */
    .page-id-159633 .icon-box-left {
        padding-left: 15px !important;
    }
    
    .page-id-159633 .icon-box-icon {
        width: 60px !important;
    }
    
    .page-id-159633 .icon-box-icon img {
        max-width: 60px !important;
    }
    
    .page-id-159633 .icon-box-top .icon-box-icon {
        width: 35px !important;
    }
    
    .page-id-159633 .icon-box-top .icon-box-icon img {
        max-width: 35px !important;
    }
    
    .page-id-159633 .icon-box-top h3 {
        font-size: 15px !important;
    }
    
    .page-id-159633 .icon-box-top .text-small {
        font-size: 11px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-icon img {
        max-width: 30px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-heading .h6 {
        font-size: 13px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-content {
        padding-top: 6px !important;
    }
    
    .page-id-159633 .icon-box-left .icon-box-heading h3.h5 {
        font-size: 14px !important;
    }
    
    .page-id-159633 .h4:not([class*="fontsize-"]) {
        font-size: 16px !important;
    }
    
    .page-id-159633 .fontsize-178638-custom {
        font-size: 22px;
    }
    
    .page-id-159633 .quad-block-padding {
        padding: 45px 24px;
    }
    
    .page-id-159633 .text-small > * {
        font-size: 13px !important;
    }
    
    .page-id-159633 .main-container .row-container .triple-top-padding {
        padding-top: 36px;
    }
    
    .page-id-159633 .fontsize-355009-custom {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
    
    .page-id-159633 .badge-rounded-top-right h3.h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    
    .page-id-159633 .fontsize-211407-custom {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }
    
    .page-id-159633 .badge-rounded-top-right .badge-style,
    .page-id-159633 .badge-rounded-bottom-left .badge-style {
        padding: 15px 25px !important;
    }
    
    .page-id-159633 .badge-rounded-bottom-left .fontsize-355009-custom {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }
    
    /* --- Single product --- */
    .single-product .main-container .row-container .double-bottom-padding {
        padding-bottom: 18px;
    }
    
    /* --- Footer --- */
    footer .footer-last {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}


/* ============================================
   19. RESPONSIVE - TRÈS PETIT (max 400px)
   ============================================ */

@media (max-width: 400px) {
    .btn-product-cta {
        font-size: 11px !important;
        padding: 14px 20px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        width: 260px !important;
        letter-spacing: -0.2px !important;
    }
}

@media (max-width: 390px) {
    .single-product .desktop-hidden .btn-block .custom-link.btn,
    .single-product .desktop-hidden.tablet-hidden .custom-link.btn {
        font-size: 12px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        min-width: 260px !important;
    }
    
    .single-product .vc_custom_1760968397055 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

@media (max-width: 375px) {
    .page-id-159633 .fontsize-355009-custom {
        font-size: 14px !important;
    }
    
    .page-id-159633 .badge-rounded-top-right h3.h2 {
        font-size: 15px !important;
    }
    
    .page-id-159633 .fontsize-211407-custom {
        font-size: 20px !important;
    }
}


/* ============================================
   FIN DU FICHIER
   ============================================ */