/* Custom CSS pour le Header et le Fond du Site - Animation Loupe vers la Gauche */

/*------------------------------------------------------------*/
/*                  COULEUR BOUTON/LIEN                       */
/*------------------------------------------------------------*/

/*-----NUANCIER------*/

:root {
  --couleur-lien: #5c5c5c;
  --couleur-lien-hover: #9cbf9b;
  --couleur-bouton: #9cbf9b;
  --couleur-bouton-hover: #c0d4bf;
  --couleur-bouton-focus-active: #9cbf9b;
  --couleur-bouton-active-hover: #9cbf9b;
  --couleur-bouton-disabled-hover: #9cbf9b;
  --couleur-bouton-disabled: #9cbf9b; 
  --couleur-bouton-second: #9cbf9b;
  --couleur-bouton-second-hover: #c0d4bf;
  --couleur-input-focus: #c0d4bf;
  --couleur-prix: #666666;
  --couleur-onglet-produit: #6b716a;
  --couleur-details-hover: #6b716a;
  --couleur-nouveau-produit: #9cbf9b;
  --couleur-case-a-cocher: #6b716a;
  --couleur-icone-mon-compte: #9cbf9b;
  --couleur-icone-mon-compte-hover: #9cbf9b;
  --couleur-texte-mon-compte: #3b3b3b;
  --couleur-texte-mon-compte-hover: #9cbf9b;
  --couleur-lien-footer: #9cbf9b;
  --couleur-bloc-promotion: #9cbf9b;
  --couleur-texte-categorie-catalogue-hover: #9cbf9b;
  --couleur-border-catalogue: #9cbf9b;
  --couleur-apercu-rapide: #9cbf9b;
  --couleur-popup-produit: #9cbf9b;
  --couleur-plus-hover: #6b716a;
  --couleur-cadre-adresse-commande: #9cbf9b;
  --couleur-tri-catalogue: #9cbf9b;
  --couleur-fond-declinaisons: #f4f4f4;
  --couleur-bouton-tertiaire: #9cbf9b;
  --couleur-bouton-tertiaire-hover: #d2e8d2;
  --couleur-bouton-tertiaire-active: #d2e8d2;
  --couleur-text-primary: #3e3e3e;
  --couleur-plus-whishlist: #9cbf9b;
  --couleur-hover-whishlist: #c0d4bf;
  --couleur-icon-validation-commande: #9cbf9b;
  --couleur-icon-validation-commande-ok: #9cbf9b;
  --couleur-alert-background: #d9e6d8;
  --couleur-alert-border: #9cbf9b;
  --couleur-alert-text: #444444;
  --couleur-alert-link: #63835d;
  --couleur-hover-plus:#9cbf9b;


}

/*------------------------------------------------------------*/
/*           GESTION GLOBALE DES RETOURS À LA LIGNE          */
/*            (LES MOTS RESTENT TOUJOURS ENTIERS)            */
/*------------------------------------------------------------*/

/* Règles globales pour tous les éléments textuels */
* {
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* Règles spécifiques pour le body */
body {
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Éléments textuels principaux */
p, h1, h2, h3, h4, h5, h6, span, div, a, li, td, th, label {
    word-wrap: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    -webkit-hyphens: none;
    white-space: normal;
}

/* Titres de produits - mots toujours entiers */
.product-title,
.product-name,
.product-miniature .product-title a {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    white-space: normal !important;
}

/* Descriptions et contenus - mots toujours entiers */
.product-description,
.product-description-short,
.product-attributes,
.attribute-line .value {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* Panier et checkout - mots toujours entiers */
.cart-grid-body,
.product-line-grid-body,
.product-line-grid-body .label {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* URLs et emails - peuvent se couper pour éviter débordements */
a[href^="http"],
a[href^="mailto"],
.email,
.url {
    /*word-break: break-all;*/
    /*overflow-wrap: anywhere;*/
}

a.text-primary:focus, a.text-primary:hover, a.text-primary {
    
    color: var(--couleur-text-primary) !important;
}

/*-------------Whishlist---------*/

.wishlist-add-to-new i {
    color: var(--couleur-plus-whishlist) !important;
}

.wishlist-list .wishlist-list-item:hover {
    background: var(--couleur-hover-whishlist) !important;
}

/*-------Liens--------*/
#header a:hover{
    color: var(--couleur-lien-hover);
}

a {
    color: var(--couleur-lien);
}

a:hover {
    color: var(--couleur-lien-hover);
}

a:focus {
    color: var(--couleur-lien-hover);
}


/*--------boutons principaux------*/
.btn-primary {
    background-color: var(--couleur-bouton);
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: var(--couleur-bouton-hover);
}

.btn-primary:active {
    background-color: var(--couleur-bouton-hover);
}

.btn-primary:focus {
    background-color: var(--couleur-bouton-hover);
}

.btn-primary:active:focus {
    background-color: var(--couleur-bouton-focus-active);
}

.btn-primary:active:hover {
    background-color: var(--couleur-bouton-active-hover);
}

.btn-primary:disabled:hover {
    background-color: var(--couleur-bouton-disabled-hover);
}

.btn-primary:disabled {
    background-color: var(--couleur-bouton-disabled);
}

.btn-primary.disabled:focus {
    background-color: var(--couleur-bouton-disabled);
}


.btn-primary.disabled:hover, .btn-primary:disabled:hover {
    background-color: var(--couleur-bouton-disabled);
}


/*--------boutons secondaires------*/

.btn-secondary {
    background-color: var(--couleur-bouton-second);
    border-radius: 5px;
    color : #4f4f4f;
}

.btn-secondary:hover {
    background-color: var(--couleur-bouton-second-hover);
    color : #4f4f4f;
}

.btn-secondary:focus {
    background-color: var(--couleur-bouton-second-hover);
}
.btn-secondary:active {
    background-color: var(--couleur-bouton-second-hover);
}

.btn-secondary:active:hover {
    background-color: var(--couleur-bouton-second-hover);
}

/*--------Boutons tertiaire----------------*/

.btn-tertiary {
    background-color: var(--couleur-bouton-tertiaire);
    border-radius: 5px;
}

.btn-tertiary:hover {
    background-color: var(--couleur-bouton-tertiaire-hover);
}

.btn-tertiary:active {
    background-color: var(--couleur-bouton-tertiaire-active);
}

.btn-tertiary:active:hover {
    background-color: var(--couleur-bouton-tertiaire-active);
}

.btn-tertiary:focus {
    background-color: var(--couleur-bouton-tertiaire-hover);
}


/*---------Bouton page contactez nous-------*/
.group-span-filestyle .btn-default {
    background-color: var(--couleur-bouton);
}

/*-------Contour des champs de saisies-------*/
.form-control:focus {
    outline: 0.1875rem solid var(--couleur-input-focus);
    border-color: var(--couleur-input-focus);
}

.input-group.focus {
    outline: 0.1875rem solid var(--couleur-input-focus);
    border-radius: 5px;
}

/*----------Bloc Newsletter---------*/ 
.block_newsletter form input[type="email"]:focus {
    border: 3px var(--couleur-input-focus) solid;
}

/*--------Cases à cocher-------*/
.custom-radio input[type="radio"]:checked+span {
    background-color: var(--couleur-case-a-cocher);
}

/*-----------Menu mon compte---------*/
.page-my-account #content .links a {
    color : var(--couleur-texte-mon-compte);
}

.page-my-account #content .links a:hover {
    color : var(--couleur-texte-mon-compte-hover);
}

.page-my-account #content .links a:hover i {
    color : var(--couleur-icone-mon-compte-hover);
}

/*--------Page Produit--------------*/
.tabs .nav-tabs .nav-link.active {
    color: var(--couleur-onglet-produit) !important;
    border-bottom: var(--couleur-onglet-produit) 3px solid;
}

.product-price {
    color: var(--couleur-prix) !important;
}

.product-flags li.product-flag {
    background: var(--couleur-nouveau-produit) !important;
}

.product-cover .layer:hover {
    opacity: 0.3;
    border-radius: 15px;
    background-color: #a7a7a7;
}

.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 4px;
}

.has-discount .discount {
    background: var(--couleur-bloc-promotion);
}

.product-miniature .highlighted-informations .quick-view:hover{
    color: var(--couleur-apercu-rapide);
}

.tabs .nav-tabs .nav-link:hover {
    border-bottom: var(--couleur-details-hover) 3px solid;
}
main .product-variants ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* ---------Catalogue------*/
#subcategories ul li .subcategory-name:hover{
    color: var(--couleur-texte-categorie-catalogue-hover);
}

#subcategories ul li:hover .subcategory-image a {
    border: 2px solid var(--couleur-border-catalogue);
}

.block-categories .collapse-icons .add:hover {
    color: var(--couleur-plus-hover);
}

.products-selection p, .products-selection .page-content.page-cms ul, .page-content.page-cms .products-selection ul, .products-selection p .sort-by, .products-selection .page-content.page-cms ul .sort-by, .page-content.page-cms .products-selection ul .sort-by, .products-selection p .select-title, .products-selection .page-content.page-cms ul .select-title, .page-content.page-cms .products-selection ul .select-title, .products-selection .sort-by-row, .products-selection .sort-by-row .sort-by, .products-selection .sort-by-row .select-title {
    min-width: 200px;
    float: right;
    border-radius : 5px;
}

.products-sort-order .select-list:hover, .brands-sort .select-list:hover, .suppliers-sort .select-list:hover {
    color: #fff;
    text-decoration: none;
    background: var(--couleur-tri-catalogue);
}

.block-categories .collapse-icons {
    padding-left: 9px;
    
}

.scroll-box-arrows i {
    bottom: 4.625rem;
    height: 0px; 
    line-height: 0px; 
    cursor: pointer;
}

h5, .h5 {
    font-size: 1.5rem;
}

.tabs {
    padding: 1.25rem 1.875rem;
    margin-bottom: 20px;
    background: #fff;
    margin-top: 0px;
    border: 1px solid #dddddd;
    border-radius: 15px;

}

.block-categories .collapse-icons {
    right: -25px;
}

.navbar-toggler.collapse-icons {
    display: none;
}

@media (min-width: 1200px) {
    .col-xl-4 {
        float: left;
        width: 25%;
    }
}

/*----------Panier-------*/
.block-promo .promo-input+button {
    border: none;
    height: 2.4rem;
}

.block-promo .promo-input {
    border-radius: 5px;
}

.block-promo .promo-code-button.cancel-promo {
    color: black;
}

.cart-grid-body.col-lg-8 a:hover {
    color: var(--couleur-lien) !important;
}

body#checkout a:hover {
    color: var(--couleur-lien) !important;
}



/*-------------Pop Up panier------*/

#blockcart-modal .product-name {
    color: var(--couleur-popup-produit);
}

/*-------------Footer-------------*/
.footer-container li a:hover {
    color: var(--couleur-lien-footer) !important;
}

/*------------Validation commande---------*/

body#checkout section.checkout-step.-reachable.-current .step-number {
    background-color: var(--couleur-icon-validation-commande);
}

.done {
    color: var(--couleur-icon-validation-commande-ok);
}

/*------------Pop up alerte----------------*/
.alert-info {
    background-color: var(--couleur-alert-background);
    border-color: var(--couleur-alert-border);
    color: var(--couleur-alert-text);
}

.alert{
    font-size: 14px;
    border-radius: 5px;
    padding: 1.75rem 1.25rem;
}

.alert-info .alert-link {
    color: var(--couleur-alert-link);
    font-size: 15px;
}


/*--------------Bouton + selection catégorie-------*/

.block-categories .collapse-icons .add:hover, .block-categories .collapse-icons .remove:hover {
    color: var(--couleur-hover-plus);
}

/*----------decalage sous catégorie--------*/
div#exCollapsingNavbar95 {
    margin-left: 20px;
}

/* ------------------------------------------------------------- */
/*                       CATALOGUE                               */
/* ------------------------------------------------------------- */
#subcategories {
    display: none;
}


/* ------------------------------------------------------------- */
/* RÈGLES PRINCIPALES DU FOND DU HEADER ET DU SITE               */
/* ------------------------------------------------------------- */

/* Applique la couleur de fond BLANCHE à l'ensemble du header */
html body #header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Applique la couleur de fond BLANCHE aux conteneurs internes du header */
.main-header-container,
.header-line-1,
.header-line-2,
.header-line-3 {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Définit le fond du wrapper (et donc du contenu principal) en blanc */
#wrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ------------------------------------------------------------- */
/* STYLES GÉNÉRAUX DU HEADER                                     */
/* ------------------------------------------------------------- */

.main-header-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
}

.header-line-1,
.header-line-2,
.header-line-3 {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Annule les paddings des colonnes Bootstrap par défaut */
.header-line-1 [class*="col-"],
.header-line-2 [class*="col-"],
.header-line-3 [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Ligne 1 : Téléphone | Recherche, Connexion, Panier --- */
.header-line-1 {
    padding: 10px 15px;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.header-phone {
    display: flex;
    align-items: center;
}

#_desktop_contact_link #contact-link {
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

.header-top-right-elements {
    display: flex;
    align-items: center;
    /*gap: 5px;*/
    justify-content: flex-end;
    flex-wrap: nowrap; 
}

/* --- Styles pour la barre de recherche cliquable (loupe) et la barre elle-même --- */

/* Masque la loupe originale à l'intérieur du champ de recherche */
#search_widget.search-widget-wrapper i.material-icons.search {
    display: none !important;
}

/* Style de la nouvelle icône de loupe cliquable */
.search-toggle {
    cursor: pointer;
    font-size: 1.5em;
    color: #555;
    /*margin-right: 10px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 4;
}

/* Masquer la loupe personnalisée quand la barre de recherche est active */
.search-toggle.hidden {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

/* La barre de recherche elle-même : POSITIONNEMENT ET ANIMATION */
#search_widget.search-widget-wrapper {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    max-width: 300px;
    overflow: hidden;
    padding: 0;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    display: flex;
    background: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* État "visible" de la barre de recherche */
#search_widget.search-widget-wrapper.active {
    width: 210px;
    padding: 5px;
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

/* Ajustement du champ de saisie */
#search_widget.search-widget-wrapper input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: none;
    box-shadow: none;
}

/* Style des liens Connexion/Panier */
.user-info-wrapper,
.cart-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap; 
}
.user-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Aligne les éléments à droite */
  align-items: center; /* Centre verticalement les éléments */
}

#_desktop_user_info .user-info a,
#_desktop_cart .blockcart.cart-preview .header {
    display: flex;
    align-items: center;
    color: #555;
    text-decoration: none;
    font-size: 0.9em;
    margin-left: 10px !important;
}

/* --- MODIFICATIONS POUR LE COMPTE UTILISATEUR --- */
#_desktop_user_info .user-info a {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: 120px;
    padding: 0 5px; 
}

#_desktop_user_info .user-info a i {
    margin-right: 5px;
    font-size: 1.2em;
    flex-shrink: 0; 
}

#_desktop_user_info .user-info a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#_desktop_cart .blockcart.cart-preview .header i {
    margin-right: 5px;
    font-size: 1.2em;
}

/* --- Ligne 2 : Logo centré --- */
.header-line-2 {
    justify-content: center;
    padding: 20px 0;
}

.header-logo-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-logo-container img {
    max-height: 80px;
    width: auto;
}

/* --- Ligne 3 : Menu centré --- */
.header-line-3 {
    justify-content: center;
    padding-bottom: 20px;
}

.header-menu-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

#_desktop_top_menu .top-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

#_desktop_top_menu .top-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px 0;
    transition: color 0.3s ease;
}

#_desktop_top_menu .top-menu li a:hover {
    color: #4dc936;
}

/* ------------------------------------------------------------- */
/* MEDIA QUERIES POUR LA RESPONSIVITÉ                            */
/* ------------------------------------------------------------- */



/* --- Styles du Séparateur animé --- */
.separator-container {
    width: 100%;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    clear: both;
}

.separator-block {
    width: 80%;
    min-height: 1px;
    background-color: #e0e0e0;
    border: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    content: '';
    display: block;
}

.separator-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}



/*----Affichage "A partir de :" avant les prix----*/
.price-from {
    font-weight: normal;
}

/*----Bouton +/- d'ajout au panier----*/
.product-quantity .input-group-btn-vertical .btn {
    color: black;
    border-radius: 3px;
}

/*-----Bouton +/- du panier-------*/
.bootstrap-touchspin .input-group-btn-vertical i {
    color: black;
}

/*--modif footer-----*/
@media (min-width: 768px) {
    .footer-container {
        text-align: center;
        justify-items: center;
    }
}


#blockEmailSubscription_displayFooterBefore {
    padding-top: 30px;
}

/*--Banniere--*/
.banniere-everblock {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100vw;
}

/* Masquer sur toutes les pages sauf la page d'accueil */
body:not(.page-index) .banniere-everblock {
    display: none !important;
}

/* Masquer la bannière sur les téléphones */
@media (max-width: 767px) {
    .banniere-everblock {
        display: none !important;
    }
}

/*--Supprime le defilement du slider sans modifier le sticky --*/
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

/* ===================================================================
 * MISE EN PAGE PLEINE LARGEUR DES PAGES CATÉGORIES
 * =================================================================== */

/* Conteneurs principaux en pleine largeur */
#main-content,
.container {
    width: 100%;
    max-width: none;
}

/* Ajustement de la largeur des produits sur la page de catégorie */
.product-list .products .product-miniature {
    width: 20%;
}

/* Ajustement pour les tablettes */


/* ===================================================================
 * Ajustement final des colonnes sur la page produit
 * =================================================================== */

/* Pour les grands écrans (desktop) */
@media (min-width: 992px) {
    body.page-product #left-column.col-md-3 {
        width: 20% !important;
        float: left !important;
    }
    
    body.page-product #content-wrapper.col-md-9 {
        width: 80% !important;
        float: left !important;
    }

    body.page-product #content-wrapper .col-md-6 {
        width: 50% !important;
        float: left !important;
    }
    
    body.page-product #content-wrapper .col-md-6:last-child {
        width: 50% !important;
        float: right !important;
    }

    #product #content {
        max-width: 100% !important;
    }
}

/* Pour les tablettes */


/* ===================================================================
 * Modification des paddings de colonnes
 * =================================================================== */

@media (min-width: 1200px) {
    .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, 
    .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, 
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, 
    .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, 
    .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        /*padding-right: 35px !important;
        padding-left: 35px !important;*/
    }
}
/* ===================================================================
 * CORRECTION CHEVAUCHEMENT MENU MOBILE (EXEMPLE)
 * =================================================================== */

/* Adaptez le sélecteur #main-content si un autre élément est concerné */


/* ===================================================================
 * MISE EN PAGE FLEXBOX (PLUS ROBUSTE) - PAGES CATÉGORIES
 * =================================================================== */

/* Pour les écrans moyens et grands (tablettes et desktop) */
@media (min-width: 768px) {
  /* On applique Flexbox au conteneur des deux colonnes */
  body#category #columns .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Colonne de gauche : largeur flexible mais limitée */
  body#category #left-column {
    /*width: 25%;             /* Largeur de base pour tablette */
    max-width: 280px;       /* Limite maximale de largeur */
    flex: 0 0 auto;         /* Empêche la colonne de grandir ou rétrécir */
  }
  
  /* Colonne de contenu : prend tout l'espace restant */
  body#category #content-wrapper {
    flex: 1;                /* La colonne s'étire pour remplir l'espace */
    min-width: 0;           /* Correction pour éviter le débordement de contenu */
  }
}

/* Ajustement spécifique pour les grands écrans (desktop) */
@media (min-width: 992px) {
  body#category #left-column {
    /*width: 20%;             /* On réduit un peu plus la base pour les grands écrans */
    max-width: 330px;       /* La limite reste la même */
  }
}

/* ===================================================================
 * AJUSTEMENT SPÉCIFIQUE SLIDER DE PRIX
 * =================================================================== */
 
/* Cible les sliders dont la classe commence par "slider-range_" */
[class^="slider-range_"] {
  max-width: 200px !important;
  margin-left: auto; /* Centre le slider s'il est plus petit que son conteneur */
  margin-right: auto;
}
/* ===================================================================
 * Centrer les produits associés
 * =================================================================== */

.products.row {
    justify-content: center;
}

.product-accessories .h5 {
    text-align: center;
    margin-top: 20px;
}

/* ============================= */
/* FAQ Choco-Pack 4 colonnes Everblock */
/* ============================= */

/* Style pour le titre FAQ */
.faq-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #333;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto 20px auto;
    padding: 0 20px;
    line-height: 1.2;

    /* Effet d'apparition */
    opacity: 0; /* Commence invisible */
    transform: translateY(20px); /* Commence légèrement en dessous */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transition douce */
}

/* Classe pour rendre le titre visible */
.faq-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive pour le titre */


.faq-choco-pack.four-columns {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: 'Open Sans', sans-serif;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 28px;
    grid-auto-rows: min-content;
    align-items: start;
}

.faq-choco-pack.four-columns .faq-item {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.faq-choco-pack.four-columns .faq-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.faq-choco-pack.four-columns .faq-item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.faq-choco-pack.four-columns .faq-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--couleur-lien);
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    padding-right: 30px;
    user-select: none;
}

.faq-choco-pack.four-columns .faq-item h3::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.4rem;
    color: var(--couleur-lien);
    transition: transform 0.3s ease;
    user-select: none;
}

.faq-choco-pack.four-columns .faq-item.open h3::after {
    content: '−';
    transform: rotate(180deg);
}

.faq-choco-pack.four-columns .faq-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.faq-choco-pack.four-columns .faq-item.open p {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
}

/* Responsive FAQ */




/* ============================= */
/* Bannière calculateur coussinets */
/* ============================= */

.banniere-calculateur-b2b {
    background-color: transparent !important;
    background-image: url('/images%20choco/calculateur-de-coussinets-home.webp') !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

/* Overlay sombre pour assombrir l'image */
.banniere-calculateur-b2b .banner-overlay {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Textes en blanc pour contraster avec le fond sombre */
.banniere-calculateur-b2b .cta-calculateur h2,
.banniere-calculateur-b2b .cta-calculateur p {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Le contenu CTA reste au-dessus de l'overlay */
.banniere-calculateur-b2b .cta-calculateur {
    position: relative;
    z-index: 2;
    max-width: 90%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    pointer-events: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Bouton vert par défaut, blanc au survol */
.banniere-calculateur-b2b .btn-cta {
    background-color: #9cbf9b;
    color: #ffffff;
    padding: 14px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.banniere-calculateur-b2b .btn-cta:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

/* Styles d'animation conservés */
.cta-calculateur .animated-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.cta-calculateur.is-visible .animated-element {
    opacity: 1;
    transform: translateY(0);
}

/* Délais d'animation pour les différents éléments */
.cta-calculateur.is-visible h2 {
    transition-delay: 0s;
}

.cta-calculateur.is-visible p {
    transition-delay: 0.2s;
}

.cta-calculateur.is-visible .btn-cta {
    transition-delay: 0.4s;
}

/* Cache la bannière sur la page du calculateur */
.hidden-by-js {
    display: none !important;
}

/* Responsive */





/* ============================= */
/* Bloc titre catégorie */
/* ============================= */

.category-grid-title-section {
    width: 100%;
    padding: 60px 20px 40px 20px;
    box-sizing: border-box;
    text-align: center;
}

.container-grid-title {
    max-width: 1200px;
    margin: 0 auto;
}

.category-grid-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #333;
    margin-bottom: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 400;
}



/* ============================= */
/* STYLES BLOC PARTENAIRES B2B   */
/* ============================= */

.partenaires-b2b {
    /* 1. LA CORRECTION PRINCIPALE */
    /* Force un nouveau "contexte de formatage" pour "nettoyer"
       le flux cassé par les bannières 100vw. */
    display: flow-root;
    
    /* 2. STYLES DE BASE (MANQUANTS) */
    width: 100%;
    padding: 80px 0; /* Espace vertical */
    background-color: #f9f9f9; /* Fond léger pour le séparer */
    overflow: hidden; /* Empêche les débordements d'animation */
}

.container-partenaires {
    max-width: 1200px; /* ou la largeur max de votre site */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.texte-partenaires {
    text-align: center;
    margin-bottom: 50px;
}

/* 3. STYLES D'ANIMATION (liés à custom.js) */

.texte-partenaires h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
    
    /* État initial de l'animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.texte-partenaires p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    
    /* État initial de l'animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.logos-partenaires ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Espace entre les logos */
    list-style: none;
    padding: 0;
    margin: 0;
}

.logos-partenaires li {
    flex: 0 1 150px; /* Chaque logo fait 150px de large max */
    
    /* État initial de l'animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.logos-partenaires img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%); /* Logos en noir et blanc par défaut */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.logos-partenaires img:hover {
    filter: grayscale(0%); /* Couleur au survol */
    opacity: 1;
}

/* 4. CLASSE D'ACTIVATION (ajoutée par custom.js) */
/* Quand '.animate-in' est ajouté, les éléments deviennent visibles */

.partenaires-b2b.animate-in .texte-partenaires h2,
.partenaires-b2b.animate-in .texte-partenaires p,
.partenaires-b2b.animate-in .logos-partenaires li {
    opacity: 1;
    transform: translateY(0);
}
/* ============================= */
/* BANDEAU CONTACT - Une équipe à votre écoute */
/* ============================= */

/* Bandeau contact SANS la classe banniere-calculateur-b2b */
.banner-fullwidth:not(.banniere-calculateur-b2b) {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    min-height: 400px;
    height: auto;
    background-image: url('/images%20choco/ban-contact.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.banner-fullwidth:not(.banniere-calculateur-b2b) .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    z-index: 1;
}

/* Styles communs pour cta-choco-pack */
.cta-choco-pack {
    position: relative;
    max-width: 90%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    z-index: 2;
    pointer-events: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Bandeau contact - texte blanc */
.banner-fullwidth:not(.banniere-calculateur-b2b) .cta-choco-pack {
    color: white;
}

.banner-fullwidth:not(.banniere-calculateur-b2b) .cta-choco-pack h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    font-weight: 700;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.banner-fullwidth:not(.banniere-calculateur-b2b) .cta-choco-pack p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #f0f0f0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ============================= */
/* BANNIERE PERSONNALISATION */
/* ============================= */

.banner-fullwidth.banniere-personnalisation {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    min-height: 400px;
    height: auto;
    background-image: url('/images%20choco/personnalisation-chocopack-home1.webp?v=2') !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    margin-top: 40px;
}

.banniere-personnalisation .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    z-index: 1;
}

.banniere-personnalisation .cta-personnalisation {
    position: relative;
    max-width: 90%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: white;
    z-index: 2;
    pointer-events: auto;
    padding: 0 15px;
}

/* Titres et paragraphes */
.banniere-personnalisation .cta-personnalisation h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    font-weight: 700;
    color: #fff;
}

.banniere-personnalisation .cta-personnalisation p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #f0f0f0;
}

/* Bouton - identique à Démarrer la personnalisation */
.banniere-personnalisation .btn-cta {
    background-color: #9cbf9b !important;
    color: #ffffff !important;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 40px;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.5s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
}

/* Effet au survol */
.banniere-personnalisation .btn-cta:hover,
.banniere-personnalisation .btn-cta:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

/* Animation d'apparition */
.banniere-personnalisation.is-visible .btn-cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease-out, transform 1s ease-out 0.8s;
}

/* ============================= */
/* BANDEAU COUSSINETS */
/* ============================= */

.banniere-calculateur-b2b {
    background-color: transparent !important;
    background-image: url('/images%20choco/calculateur-de-coussinets-home.webp') !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 60px 0;
}

.banniere-calculateur-b2b .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    z-index: 1;
}

.banniere-calculateur-b2b .cta-calculateur h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.banniere-calculateur-b2b .cta-calculateur p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ============================= */
/* ANIMATIONS - VERSION CORRIGÉE */
/* ============================= */

.cta-choco-pack .animated-element,
.cta-calculateur .animated-element,
.cta-personnalisation .animated-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.cta-choco-pack.is-visible .animated-element,
.cta-calculateur.is-visible .animated-element,
.cta-personnalisation.is-visible .animated-element {
    opacity: 1;
    transform: translateY(0);
}

.cta-choco-pack.is-visible h2.animated-element,
.cta-calculateur.is-visible h2.animated-element,
.cta-personnalisation.is-visible h2.animated-element {
    transition-delay: 0.2s;
}

.cta-choco-pack.is-visible p.animated-element,
.cta-calculateur.is-visible p.animated-element,
.cta-personnalisation.is-visible p.animated-element {
    transition-delay: 0.5s;
}

.cta-choco-pack.is-visible .btn-cta.animated-element,
.cta-calculateur.is-visible .btn-cta.animated-element,
.cta-personnalisation.is-visible .btn-cta.animated-element {
    transition-delay: 0.8s;
}

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

.btn-cta {
    padding: 14px 40px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    position: relative;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.5s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: #9cbf9b;
    color: #ffffff;
}

.btn-cta:hover,
.btn-cta:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
    outline: none;
    cursor: pointer;
}

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





/* Cache la bannière sur la page du calculateur */
.hidden-by-js {
    display: none !important;
}

/* ============================= */
/* CORRECTION MISE PAGE PANIER   */
/* ============================= */

/* Container principal de la ligne produit */
.product-line-grid {
    display: flex !important;
    align-items: center !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Colonne image */
.product-line-grid-left {
    flex: 0 0 120px !important;
    padding-right: 20px !important;
}

.product-line-grid-left .product-image {
    display: block !important;
}

.product-line-grid-left img {
    width: 100px !important;
    height: auto !important;
    display: block !important;
}

/* Colonne informations produit */
.product-line-grid-body {
    flex: 1 1 auto !important;
    padding: 0 20px !important;
    min-width: 0 !important; /* Pour éviter les débordements */
}

/* Nom du produit - Plus visible */
.product-line-grid-body .product-name .label {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #2c2c2c !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.product-line-grid-body .product-name .label:hover {
    color: var(--couleur-lien-hover) !important;
    text-decoration: none !important;
}

/* Section prix avec meilleur espacement */
.product-line-grid-body .product-price {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    /*border-bottom: 1px solid #f0f0f0 !important;*/
}

.product-line-grid-body .product-price .current-price {
    margin-bottom: 5px !important;
}

.product-line-grid-body .product-price .price {
    color: var(--couleur-prix) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Prix unitaire (Le lot de...) */
.product-line-grid-body .unit-price-cart {
    font-size: 0.9rem !important;
    color: #666 !important;
    margin-top: 5px !important;
}

/* Prix barré si promotion */
.product-line-grid-body .product-discount {
    margin-bottom: 8px !important;
}

.product-line-grid-body .regular-price {
    text-decoration: line-through !important;
    color: #999 !important;
    margin-right: 10px !important;
}

.product-line-grid-body .discount {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

/* Container des attributs */
.product-line-grid-body .product-attributes {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* Chaque ligne d'attribut */
.product-line-grid-body .attribute-line {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
}

/* Label de l'attribut (Dimensions, Couleur, etc.) */
.product-line-grid-body .attribute-line .label {
    font-weight: 400 !important;
    color: #666 !important;
    font-size: 0.9rem !important;
    min-width: 180px !important;
    display: inline-block !important;
    margin-right: 10px !important;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Valeur de l'attribut */
.product-line-grid-body .attribute-line .value {
    color: #333 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    flex: 1 !important;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Groupement visuel par type d'attribut */
.product-line-grid-body .attribute-line.dimensions-int-rieur,
.product-line-grid-body .attribute-line.rang-es-compartiments {
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px dotted #e8e8e8 !important;
}

/* Dernier attribut sans bordure */
.product-line-grid-body .attribute-line:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Colonne actions (NOUVEAU CONTAINER) */
.product-line-grid-right {
    flex: 0 0 auto !important;
    padding: 0 !important;
    max-width: max-content;
}

/* Container des actions - LA CLÉ DE L'ALIGNEMENT */
.cart-actions-container {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important; /* Espacement entre les éléments */
    justify-content: flex-end !important;
    min-width: 400px !important;
}

@media (max-width: 1400px) {
.cart-actions-container {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; /* Espacement entre les éléments */
    justify-content: center !important;
    min-width: 400px !important;
}}

@media (max-width: 1200px) {
.cart-actions-container {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; /* Espacement entre les éléments */
    justify-content: center !important;
    min-width: 400px !important;
}}

@media (max-width: 1100px) {
.cart-actions-container {
    display: flex !important;
    align-items: center !important;
    flex-direction: column;
    min-width: 400px !important;
}

.action-price {
    justify-content: center !important;
}

}

/* Action Quantité */
.action-qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-qty input.js-cart-line-product-quantity {
    width: 70px !important;
    text-align: center !important;
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
}

/* Container TouchSpin s'il est généré */
.action-qty .bootstrap-touchspin {
    display: inline-flex !important;
    align-items: center !important;
}

/* Action Prix */
.action-price {
    display: flex !important;
    align-items: center !important;
    min-width: 100px !important;
    justify-content: flex-end ;
}

.action-price .product-price {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    white-space: nowrap !important;
}

/* Action Suppression */
.action-delete {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-delete .remove-from-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.action-delete .remove-from-cart:hover {
    background-color: rgba(211, 47, 47, 0.1) !important;
    transform: scale(1.1) !important;
}

.action-delete .remove-from-cart i.material-icons {
    font-size: 24px !important;
    color: #707070 !important;
    line-height: 1 !important;
}

.action-delete .remove-from-cart:hover i.material-icons {
    color: #d32f2f !important;
}

/* Responsive Tablette */
@media (max-width: 991px) and (min-width: 768px) {
    .product-line-grid {
        padding: 15px 0 !important;
    }
    
    .product-line-grid-left {
        flex: 0 0 100px !important;
    }
    
    .product-line-grid-left img {
        width: 80px !important;
    }
    
    .cart-actions-container {
        gap: 25px !important;
        min-width: 350px !important;
    }
    
    .action-qty input.js-cart-line-product-quantity {
        width: 60px !important;
        height: 36px !important;
    }
}

/* Responsive Mobile pour les attributs et infos produit */
@media (max-width: 767px) {
    .product-line-grid {
        padding: 15px 10px !important;
    }
    
    /* Image et infos sur la même ligne */
    .product-line-grid-left {
        flex: 0 0 80px !important;
        padding-right: 15px !important;
    }
    
    .product-line-grid-left img {
        width: 70px !important;
    }
    
    .product-line-grid-body {
        flex: 1 1 calc(100% - 95px) !important;
        padding: 0 !important;
    }
    
    .product-line-grid-body .product-name .label {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .product-line-grid-body .attribute-line {
        flex-direction: column !important;
        margin-bottom: 12px !important;
    }
    
    .product-line-grid-body .attribute-line .label {
        min-width: unset !important;
        margin-bottom: 3px !important;
        font-weight: 700 !important;
    }
    
    .product-line-grid-body .product-attributes {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
    
    /* Actions sur une nouvelle ligne */
    .product-line-grid-right {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    
    .cart-actions-container {
        width: 100% !important;
        min-width: unset !important;
        justify-content: space-between !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
    
    .action-qty input.js-cart-line-product-quantity {
        width: 55px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }
    
    .action-price {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-width: unset !important;
    }
    
    .action-price .product-price {
        font-size: 1rem !important;
    }
    
    .action-delete .remove-from-cart {
        padding: 8px !important;
    }
    
    .action-delete .remove-from-cart i.material-icons {
        font-size: 20px !important;
    }
}

/* Fix pour les boutons TouchSpin */
.bootstrap-touchspin .input-group-btn-vertical .btn {
    color: black !important;
    background-color: #f8f8f8 !important;
    border: 1px solid #ddd !important;
}

.bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background-color: #e8e8e8 !important;
}

.bootstrap-touchspin .input-group-btn-vertical i {
    color: black !important;
}

/* GESTION RESPONSIVE DES ONGLETS PRODUIT - VERSION FINALE FORCÉE */

/* Règle pour ÉCRANS DE BUREAU et TABLETTES (Largeur >= 992px) */
@media (min-width: 992px) {
    /* Cache le bloc mobile avec un sélecteur très spécifique */
    #main .product-description-section.tabs-mobile {
        display: none !important;
    }
    /* Affiche le bloc desktop avec un sélecteur très spécifique */
    #main .tabs-extended-container.tabs-desktop {
        display: block !important;
    }
}

/* Règle pour SMARTPHONES et PETITES TABLETTES (Largeur < 992px) */



/*-------colonne page produit réduite----*/

@media (max-width: 1150px) {
    main .product-container .col-md-3 {
    float: left;
    width: 100%; 
  }

  main .product-container .col-md-9 {
    float: left;
    width: 100%; 
  }
.product-actions .add-to-cart {
    line-height: unset;
}

.bootstrap-touchspin {
    display: flex;
}


}


@media (min-width: 1150px) {
    main .product-container .col-md-3 {
        float: left;
        width: 16%;
    }

    main .product-container .col-md-9 {
        float: left;
        width: 83%;
    }
}

/*------------style catégorie catalogue----*/
.block-categories .category-sub-menu li[data-depth="0"]>a {
    display: inline-block;
    width: 100%;
    padding-bottom: 0.1875rem;
    margin: 0.3125rem 0 0;
    font-weight: 400;
    font-family: system-ui, -apple-system, sans-serif;
}

/*------------style recherche catalogue------*/ 

#search_filters .facet .facet-title {
    width: 100%;
    overflow: unset; 
    text-overflow: ellipsis;
    white-space: unset;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 500;
}

/*-----------style catalogue------------*/

.js-product.product.col-xs-12.col-sm-6.col-xl-4 {
        min-height: 350px;
}

#search_filters {
    width: fit-content;
}

#search_filters .ui-widget-header {
    background: #9cbf9b;
}

#search_filters .ui-slider-horizontal {
    height: .25em;
    width: 95%;
}

.ui-widget-content {
    border: none;
    background: #fff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; */
    color: none;
}

/*----------Style page mon compte-------*/ 

.page-my-account #content .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 70%;
    justify-self: center;
}

/*@media (min-width: 768px) {
    .col-md-3 {
        float: left;
        width: 18%;
    }
}*/

/* Grossir typo produits */
.product-miniature .product-title a {
  font-size: 1.2rem;
  color: #000;
  text-transform: uppercase !important;
}

/* Cacher nombre de produits */
#products .products-selection .total-products {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Solution pour afficher les titres complets sous PrestaShop 8.2 */
.product-miniature .product-title {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}

.product-miniature .product-title a {
    font-size: 1rem;
    color: #000;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.4;
    word-wrap: break-word;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Ajuster les conteneurs parents */
.product-miniature {
    height: auto !important;
    min-height: 400px;
}

.product-miniature .thumbnail-container {
    height: auto !important;
}

.products .product-miniature {
    height: auto !important;
}

.js-product-miniature {
    height: auto !important;
}


/*-------Modification Bouton radio----*/

.input-color:checked+span, .input-color:hover+span, .input-radio:checked+span, .input-radio:hover+span {
    border: 1.8px solid #232323;
    border-radius: 3px;
}

.product-variants>.product-variants-item .color {
    border-radius: 50px;
    width : 30px;
    height: 30px;
}

/*-------- Adresse lors de la commandes----*/

body#checkout section.checkout-step .address-item.selected {
    background: #fff;
    border: var(--couleur-cadre-adresse-commande) 2px solid;
    border-radius: 15px;
}

//* ============================= */
/* Styles page personnalisation ChocoPack */
/* Version isolée - N'affecte que la section personnalisation */
/* Couleur principale: rgb(156, 191, 155) */
/* ============================= */

/* Conteneur principal isolé */
.personnalisation-page-wrapper {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    box-sizing: border-box;
}

/* Masquer le header de page par défaut */
.page-header {
    display: none !important;
}

.personnalisation-page-wrapper *,
.personnalisation-page-wrapper *::before,
.personnalisation-page-wrapper *::after {
    box-sizing: border-box;
}

/* Variables couleurs */
.personnalisation-page-wrapper {
    --couleur-lien: #5c5c5c;
    --couleur-lien-hover: #9cbf9b;
    --couleur-primaire: #333;
    --couleur-secondaire: #555;
    --couleur-background: #fff;
}

/* Section principale */
.personnalisation-page-wrapper .container-personnalisation {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0px 0;
    background: var(--couleur-background);
}

.personnalisation-page-wrapper .row-personnalisation {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.personnalisation-page-wrapper .col-image-personnalisation {
    flex: 3;
    min-width: 50%;
    max-width: 70%;
    overflow: hidden;
    padding: 0 20px;
}

.personnalisation-page-wrapper .images-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
}

.personnalisation-page-wrapper .main-image-container {
    flex: none;
    width: 100%;
    margin-bottom: 25px;
}

.personnalisation-page-wrapper .main-image-container img {
    max-width: 100%;
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    animation: fadeInScale 1.2s ease-out;
}


.personnalisation-page-wrapper .thumbnails-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.personnalisation-page-wrapper .thumbnails-container img {
    width: calc(33.33% - 10px);
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    opacity: 1 !important;
}


.personnalisation-page-wrapper .col-texte-personnalisation {
    flex: 2;
    min-width: 300px;
    max-width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--couleur-background);
}

.personnalisation-page-wrapper .presentation-personnalisation h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    margin-bottom: 10px;
    line-height: 1.2;
    color: var(--couleur-primaire);
    margin-bottom: 20px;
    text-align: left;
    opacity: 1 !important;
    visibility: visible !important;
    animation: slideInUp 0.8s ease-out;
}

.personnalisation-page-wrapper .presentation-personnalisation .subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--couleur-secondaire);
    margin-bottom: 40px;
    opacity: 1 !important;
    visibility: visible !important;
    animation: slideInUp 0.8s ease-out 0.2s both;
}

/* Section étapes */
.personnalisation-page-wrapper .section-etapes {
    max-width: 1400px;
    margin: 20px auto 100px auto;
    padding: 0 20px;
    text-align: center;
}

.personnalisation-page-wrapper .section-etapes h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 70px;
    color: var(--couleur-primaire);
    animation: fadeInDown 0.8s ease-out;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.personnalisation-page-wrapper .etapes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 80px;
    text-align: left;
}

.personnalisation-page-wrapper .etape-card {
    flex: 1 1 calc(25% - 22.5px);
    min-width: 250px;
    
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.8s ease-out;
}

.personnalisation-page-wrapper .etape-card:nth-child(2) { animation-delay: 0.1s; }
.personnalisation-page-wrapper .etape-card:nth-child(3) { animation-delay: 0.2s; }
.personnalisation-page-wrapper .etape-card:nth-child(4) { animation-delay: 0.3s; }

.personnalisation-page-wrapper .etape-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.personnalisation-page-wrapper .etape-numero {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: var(--couleur-lien);
    color: white;
    border-radius: 50%;
    line-height: 50px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.personnalisation-page-wrapper .etape-card:hover .etape-numero {
    transform: scale(1.1) rotate(10deg);
    background: var(--couleur-lien-hover);
}

.personnalisation-page-wrapper .etape-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--couleur-primaire);
    transition: color 0.3s ease;
}

.personnalisation-page-wrapper .etape-card:hover h3 {
    color: var(--couleur-lien);
}

.personnalisation-page-wrapper .etape-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-secondaire);
}

.personnalisation-page-wrapper .highlight {
    font-weight: 600;
    color: #9cbf9b ;
    background: linear-gradient(120deg, transparent 0%, rgba(156, 191, 155, 0.1) 50%, transparent 100%);
    padding: 2px 4px;
    border-radius: 4px;
}

/* Section nuancier couleurs */
.personnalisation-page-wrapper .section-nuancier {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
    text-align: center;
}

.personnalisation-page-wrapper .section-nuancier h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--couleur-primaire);
    text-align: center;
}

.personnalisation-page-wrapper .couleurs-grid {
    /* MODIFICATION MAJEURE ICI : Utilisation de Flexbox pour le centrage et le wrap */
    display: flex; /* Change de grid à flex */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centre les éléments sur l'axe principal */
    align-items: flex-start; /* Aligne les éléments au début sur l'axe secondaire (pour éviter qu'une ligne ne soit trop étirée si les hauteurs varient) */
    
    /* Supprimez grid-template-rows car nous utilisons flex-wrap */
    /* grid-template-rows: repeat(2, 1fr); */
    
    gap: 15px;
    width: 100%;
    max-width: 1000px; /* Ajout d'une max-width pour aider le centrage sur les très grands écrans si les couleurs sont peu nombreuses */
    margin: 0 auto; /* Permet de centrer le conteneur flex lui-même */
}

.personnalisation-page-wrapper .couleur-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    transition: transform 0.3s ease;
    animation: fadeInUp 0.8s ease-out;
    
    /* MODIFICATION : Nouvelle propriété flex pour la largeur des items de couleur */
    /* Assure que chaque élément prend sa part mais peut wrap */
    flex: 0 0 auto; /* Ne grandit pas, ne rétrécit pas, prend sa taille naturelle */
    width: 70px; /* Définissez une largeur fixe ou min-width pour chaque élément si désiré */
}

.personnalisation-page-wrapper .couleur-item:hover {
    transform: translateY(-3px);
}

.personnalisation-page-wrapper .couleur-pastille {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin-bottom: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.personnalisation-page-wrapper .couleur-item:hover .couleur-pastille {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.personnalisation-page-wrapper .couleur-nom {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--couleur-secondaire);
    text-align: center;
    line-height: 1.2;
}

/* Animation délais pour les couleurs (gardé tel quel car l'animation est toujours utile) */
.personnalisation-page-wrapper .couleur-item:nth-child(1) { animation-delay: 0.1s; }
.personnalisation-page-wrapper .couleur-item:nth-child(2) { animation-delay: 0.15s; }
.personnalisation-page-wrapper .couleur-item:nth-child(3) { animation-delay: 0.2s; }
.personnalisation-page-wrapper .couleur-item:nth-child(4) { animation-delay: 0.25s; }
.personnalisation-page-wrapper .couleur-item:nth-child(5) { animation-delay: 0.3s; }
.personnalisation-page-wrapper .couleur-item:nth-child(6) { animation-delay: 0.35s; }
.personnalisation-page-wrapper .couleur-item:nth-child(7) { animation-delay: 0.4s; }
.personnalisation-page-wrapper .couleur-item:nth-child(8) { animation-delay: 0.45s; }
.personnalisation-page-wrapper .couleur-item:nth-child(9) { animation-delay: 0.5s; }
.personnalisation-page-wrapper .couleur-item:nth-child(10) { animation-delay: 0.55s; }
.personnalisation-page-wrapper .couleur-item:nth-child(11) { animation-delay: 0.6s; }
.personnalisation-page-wrapper .couleur-item:nth-child(12) { animation-delay: 0.65s; }
.personnalisation-page-wrapper .couleur-item:nth-child(13) { animation-delay: 0.7s; }
.personnalisation-page-wrapper .couleur-item:nth-child(14) { animation-delay: 0.75s; }
.personnalisation-page-wrapper .couleur-item:nth-child(15) { animation-delay: 0.8s; }
.personnalisation-page-wrapper .couleur-item:nth-child(16) { animation-delay: 0.85s; }
.personnalisation-page-wrapper .couleur-item:nth-child(17) { animation-delay: 0.9s; }
.personnalisation-page-wrapper .couleur-item:nth-child(18) { animation-delay: 0.95s; }
.personnalisation-page-wrapper .couleur-item:nth-child(19) { animation-delay: 1s; }
.personnalisation-page-wrapper .couleur-item:nth-child(20) { animation-delay: 1.05s; }

/* Section informations */
.personnalisation-page-wrapper .section-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 0;
    margin: 60px 0;
    text-align: center;
}

.personnalisation-page-wrapper .container-info {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.personnalisation-page-wrapper .section-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 70px;
    color: var(--couleur-primaire);
    animation: fadeInDown 0.8s ease-out;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.personnalisation-page-wrapper .info-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: left;
}

.personnalisation-page-wrapper .info-item {
    flex: 1 1 calc(33.33% - 26.66px);
    min-width: 300px;
    
    background: white;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

.personnalisation-page-wrapper .info-item:nth-child(2) { animation-delay: 0.1s; }
.personnalisation-page-wrapper .info-item:nth-child(3) { animation-delay: 0.2s; }

.personnalisation-page-wrapper .info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #9cbf9b, #9cbf9b);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.personnalisation-page-wrapper .info-item:hover::before {
    transform: scaleX(1);
}

.personnalisation-page-wrapper .info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.personnalisation-page-wrapper .info-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #9cbf9b;
    transition: color 0.3s ease;
}

.personnalisation-page-wrapper .info-item:hover h3 {
    color: #333333;
}

.personnalisation-page-wrapper .info-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--couleur-secondaire);
    margin-bottom: 15px;
}

/* Bouton CTA - Style identique à la bannière calculateur */
.personnalisation-page-wrapper .cta-section {
    text-align: center;
    padding: 0px 20px;
    margin-top: 30px;
    margin-bottom: 0px;
    animation: fadeIn 1s ease-out;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.personnalisation-page-wrapper .btn-personnalisation {
    background-color: #9cbf9b;
    color: #ffffff;
    padding: 14px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.personnalisation-page-wrapper .btn-personnalisation:hover {
    background-color: #333333 !important;
    color: #ffffff;
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

/* Animations CSS */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive */


@media (max-width: 576px) {
    .personnalisation-page-wrapper .presentation-personnalisation h1 {
        font-size: 1.8rem;
    }

    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 2rem;
    }

    .personnalisation-page-wrapper .thumbnails-container {
        flex-direction: column;
        gap: 10px;
    }

    .personnalisation-page-wrapper .thumbnails-container img {
        width: 100%;
        height: 200px;
    }

    .personnalisation-page-wrapper .btn-personnalisation {
        padding: 15px 35px;
        font-size: 1rem;
    }

    .personnalisation-page-wrapper .main-image-container img {
        height: 350px;
    }
    
    .personnalisation-page-wrapper .etape-card {
        flex: 1 1 100%;
    }
    
    .personnalisation-page-wrapper .info-item {
        flex: 1 1 100%;
    }

    /* MODIFICATION : Ajustement des couleurs sur les petits écrans */
    .personnalisation-page-wrapper .couleur-item {
        width: calc(33.33% - 10px); /* Essayer 3 colonnes sur mobile */
        min-width: 70px;
    }
}

/* États initiaux pour l'animation */
.personnalisation-page-wrapper .main-image-container img,
.personnalisation-page-wrapper .thumbnails-container img,
.personnalisation-page-wrapper .presentation-personnalisation h1,
.personnalisation-page-wrapper .presentation-personnalisation .subtitle,
.personnalisation-page-wrapper .etape-card,
.personnalisation-page-wrapper .info-item,
.personnalisation-page-wrapper .section-etapes h2,
.personnalisation-page-wrapper .section-info h2,
.personnalisation-page-wrapper .btn-personnalisation {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* État animé */
.personnalisation-page-wrapper .animate-in .main-image-container img,
.personnalisation-page-wrapper .animate-in .thumbnails-container img,
.personnalisation-page-wrapper .animate-in .presentation-personnalisation h1,
.personnalisation-page-wrapper .animate-in .presentation-personnalisation .subtitle,
.personnalisation-page-wrapper .animate-in .etape-card,
.personnalisation-page-wrapper .animate-in .info-item,
.personnalisation-page-wrapper .section-etapes h2,
.personnalisation-page-wrapper .section-info h2,
.personnalisation-page-wrapper .animate-in .btn-personnalisation {
    opacity: 1;
    transform: translateY(0);
}

/*---------- colonne page contact---------*/
body#contact .col-xs-12.col-md-4.col-lg-3 {
    width: 18%;
}


/*--------------fond couleur declinaisons page produit----------*/
    body.page-product #content-wrapper .col-md-6:last-child {
        background-color: var(--couleur-fond-declinaisons);
        border-radius: 15px;
        padding-top: 20px;
        margin-bottom : 20px;
    }

/*---------------Taille bouton couleur page produit ------*/
.variant-links .color {
    width: 25px;
    height: 25px;
    border-radius: 50px;
}

/*--------------- Cache l'onglet "Détails du produit ----------*/
.tabs .nav-tabs .nav-item a[href="#product-details"] {
    display: none !important;
}

/* Cache le contenu de la section "Détails du produit" */
#product-details.tab-pane {
    display: none !important;
}

/* Styles pour le collapse des facettes */
.facet-title[data-toggle="collapse"] {
    cursor: pointer !important;
    position: relative;
    padding-right: 30px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.facet-title[data-toggle="collapse"]:hover {
    opacity: 0.8;
}

/* Animation du collapse *
.collapse {
    transition: all 0.3s ease;
}

.collapse:not(.in) {
    display: none !important;
}

.collapse.in {
    display: block !important;
}

/* Icônes + et - */
.facet-title .collapse-icons {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.facet-title .collapse-icons .add {
    display: inline-block;
}

.facet-title .collapse-icons .remove {
    display: none;
}

.facet-title[aria-expanded="true"] .collapse-icons .add {
    display: none;
}

.facet-title[aria-expanded="true"] .collapse-icons .remove {
    display: inline-block;
}

/*-----caroussel ------*/

.page-index .product {
    width: 100%;
}

/*--------------- wishlist-button  ----------*/
.wishlist-button-add i.material-icons {
    color: #9cbf9b !important;
}


/*------------- Cacher le header-nav -------*/

nav.header-nav {
    display: none;
}


/*------------- Affichage pop up ajout au panier --------*/


#blockcart-modal .modal-header {
    border-radius: 15px;

}

#blockcart-modal .modal-body {
    border-radius: 15px;

}

.modal-content {
    border-radius: 15px;

}

/*--------------- Taille connexion et inscription-------*/

.page-authentication #content, .page-registration #content {
    max-width: 1000px;
}






/* ═══════════════════════════════════════════════════════════
   bannière de nouveautés
   ═══════════════════════════════════════════════════════════ */
.ma-banniere-nouveautes {
  background-color: #9cbf9b; /* Un fond bleu clair */
  border-radius: 5px;         /* Des coins arrondis */
  padding: 15px;              /* De l'espace à l'intérieur */
  margin-bottom: 10px;        /* De l'espace en dessous, avant les produits */
  text-align: center;         /* Centrer le texte */

}

/* Rendre le texte à l'intérieur un peu plus visible */
.ma-banniere-nouveautes p {
  margin: 0; /* Enlève la marge par défaut du paragraphe */
  font-size: 1.1em;
  color: #ffffff; /* Une couleur de texte foncée */
}
#main {
  display: flex;
  flex-direction: column; 
}

/* 1. La bannière monte en première position */
.everblock-52 {
  order: 1;
  /* Ajout d'une marge propre en bas (à ajuster) */
  margin-bottom: 5px !important; 
}

/* 2. Le titre de la catégorie se positionne en dessous */
#js-product-list-header {
  order: 2;
  /* (Optionnel) Ajout d'une petite marge en bas du titre */
  margin-bottom: 5px; 
}

/* 3. La section des produits reste en bas */
#products {
  order: 3;
}

/* ═══════════════════════════════════════════════════════════
   enleve le padding top wapper sur téléphone 
   ═══════════════════════════════════════════════════════════ */
/* Padding top par défaut */
#wrapper {
  padding-top: 1.563rem;
}

/* Supprimer le padding top sur mobile (max 768px) */


/* ═══════════════════════════════════════════════════════════════════════
   MEDIA QUERIES RESPONSIVE - ORGANISATION PAR BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. LAPTOP ET DESKTOP - max-width: 1439px (< 1440px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
    /* Container principal */
    .container,
    .main-header-container {
        margin-left: 0px;
        margin-right: 0px;
    }

    /* Typographie */
    h1, .h1 {
        font-size: 2.5rem;
    }

    h2, .h2 {
        font-size: 2rem;
    }

    h3, .h3 {
        font-size: 1.6rem;
    }

    p, body {
        font-size: 1rem;
    }

    /* Header */
    .header-logo-container img {
        max-height: 70px;
    }

    #_desktop_top_menu .top-menu {
        gap: 25px;
    }

    #_desktop_top_menu .top-menu li a {
        font-size: 1rem;
    }

    /* Bannières */
    .banner-fullwidth,
    .banniere-calculateur-b2b,
    .banniere-personnalisation {
        min-height: 380px;
        padding: 50px 0;
    }

    .cta-choco-pack h2,
    .cta-calculateur h2,
    .cta-personnalisation h2 {
        font-size: 2.3rem;
    }

    .cta-choco-pack p,
    .cta-calculateur p,
    .cta-personnalisation p {
        font-size: 1.05rem;
    }

    /* Grille de produits */
    .product-miniature .product-title a {
        font-size: 1.1rem;
    }

    /* FAQ */
    .faq-title {
        font-size: 2.3rem;
    }

    .faq-choco-pack.four-columns .faq-item h3 {
        font-size: 1.15rem;
    }

    /* Personnalisation */
    .personnalisation-page-wrapper .presentation-personnalisation h1,
    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 2.8rem;
    }

    /* Panier */
    .cart-actions-container {
        min-width: 380px;
        gap: 35px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. TABLETTE PAYSAGE - max-width: 1023px (< 1024px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    /* Container principal */
    .container,
    .main-header-container {
        padding: 0 20px;
    }

    /* Typographie */
    h1, .h1 {
        font-size: 2.2rem;
    }

    h2, .h2 {
        font-size: 1.8rem;
    }

    h3, .h3 {
        font-size: 1.4rem;
    }

    p, body {
        font-size: 0.95rem;
    }

    /* Header */
    .header-line-1 {
        padding: 8px 15px;
    }

    .header-logo-container img {
        max-height: 65px;
    }

    #_desktop_top_menu .top-menu {
        gap: 20px;
        font-size: 0.95rem;
    }

    #_desktop_top_menu .top-menu li a {
        font-size: 0.95rem;
    }

    /* Barre de recherche */
    #search_widget.search-widget-wrapper.active {
        width: 180px;
    }

    /* Bannières */
    .banner-fullwidth,
    .banniere-calculateur-b2b,
    .banniere-personnalisation {
        min-height: 350px;
        padding: 45px 0;
    }

    .cta-choco-pack h2,
    .cta-calculateur h2,
    .cta-personnalisation h2 {
        font-size: 2rem;
        margin-bottom: 18px;
    }

    .cta-choco-pack p,
    .cta-calculateur p,
    .cta-personnalisation p {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .btn-cta {
        padding: 12px 32px;
        font-size: 1.05rem;
    }

    /* Bannière vidéo */
    .banniere-everblock-text h1.animated-title .text-line {
        font-size: 2.5rem;
    }

    .banniere-everblock-text {
        left: 5%;
        padding: 20px 30px;
    }

    /* FAQ */
    .faq-title {
        font-size: 2rem;
    }

    .faq-choco-pack.four-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grille de produits */
    .product-list .products .product-miniature {
        width: 33.33%;
    }

    .product-miniature .product-title a {
        font-size: 1.05rem;
    }

    /* Personnalisation */
    .personnalisation-page-wrapper .presentation-personnalisation h1 {
        font-size: 2.4rem;
    }

    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 2.4rem;
        margin-bottom: 50px;
    }

    .personnalisation-page-wrapper .etape-card {
        flex: 1 1 calc(50% - 15px);
    }

    /* Panier */
    .cart-actions-container {
        min-width: 350px;
        gap: 25px;
    }

    .action-qty input.js-cart-line-product-quantity {
        width: 60px;
        height: 36px;
    }

    /* Catégories */
    .category-grid-heading {
        font-size: 2.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. TABLETTE PORTRAIT - max-width: 833px (< 834px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 833px) {
    /* Container principal */
    .container,
    .main-header-container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* Typographie */
    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.6rem;
    }

    h3, .h3 {
        font-size: 1.3rem;
    }

    p, body {
        font-size: 0.9rem;
    }

    /* Header */
    .header-line-1 {
        padding: 8px 12px;
    }

    .header-line-2 {
        padding: 15px 0;
    }

    .header-logo-container img {
        max-height: 60px;
    }

    #_desktop_top_menu .top-menu {
        gap: 15px;
    }

    #_desktop_top_menu .top-menu li a {
        font-size: 0.9rem;
    }

    /* Barre de recherche */
    #search_widget.search-widget-wrapper.active {
        width: 160px;
        padding: 4px;
    }

    #search_widget.search-widget-wrapper input[type="text"] {
        padding: 6px 10px;
        font-size: 0.9rem;
    }

    /* Bannières */
    .banner-fullwidth,
    .banniere-calculateur-b2b,
    .banniere-personnalisation {
        min-height: 320px;
        padding: 40px 0;
    }

    .cta-choco-pack,
    .cta-calculateur,
    .cta-personnalisation {
        max-width: 90%;
        padding: 0 10px;
    }

    .cta-choco-pack h2,
    .cta-calculateur h2,
    .cta-personnalisation h2 {
        font-size: 1.8rem;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .cta-choco-pack p,
    .cta-calculateur p,
    .cta-personnalisation p {
        font-size: 0.95rem;
        margin-bottom: 22px;
    }

    .btn-cta {
        padding: 11px 28px;
        font-size: 1rem;
    }

    /* Bannière vidéo */
    .banniere-everblock-text h1.animated-title .text-line {
        font-size: 1.8rem;
    }

    .banniere-everblock-text {
        left: 4%;
        padding: 15px 20px;
    }

    /* FAQ */
    .faq-title {
        font-size: 1.8rem;
    }

    .faq-choco-pack.four-columns {
        display: block;
        padding: 0 15px;
    }

    .faq-choco-pack.four-columns .faq-item {
        margin-bottom: 15px;
    }

    /* Grille de produits */
    .product-miniature .product-title a {
        font-size: 1rem;
    }

    /* Personnalisation */
    .personnalisation-page-wrapper .row-personnalisation {
        flex-direction: column;
    }

    .personnalisation-page-wrapper .col-image-personnalisation,
    .personnalisation-page-wrapper .col-texte-personnalisation {
        width: 100%;
        max-width: 100%;
        padding: 20px 15px;
    }

    .personnalisation-page-wrapper .presentation-personnalisation h1 {
        font-size: 2.2rem;
        text-align: center;
    }

    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 2.2rem;
    }

    /* Panier */
    .product-line-grid {
        padding: 15px 10px;
    }

    .product-line-grid-body .product-name .label {
        font-size: 1.1rem;
    }

    .cart-actions-container {
        gap: 20px;
        min-width: 300px;
    }

    /* Footer */
    .footer-container {
        padding: 0 15px;
    }

    /* Catégories */
    .category-grid-heading {
        font-size: 2rem;
    }

    .category-grid-title-section {
        padding: 40px 15px 25px 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. MOBILE PAYSAGE - max-width: 767px (< 768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Container principal */
    .container,
    .main-header-container {
        padding: 0 12px;
    }

    /* Typographie */
    h1, .h1 {
        font-size: 1.8rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    h3, .h3 {
        font-size: 1.2rem;
    }

    h4, .h4 {
        font-size: 1.1rem;
    }

    h5, .h5 {
        font-size: 1rem;
    }

    p, body {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Header */
    .header-line-1 {
        padding: 6px 10px;
    }

    .header-line-2 {
        padding: 12px 0;
    }

    .header-line-3 {
        padding-bottom: 15px;
    }

    .header-logo-container img {
        max-height: 55px;
    }

    #_desktop_top_menu .top-menu {
        gap: 12px;
    }

    #_desktop_top_menu .top-menu li a {
        font-size: 0.85rem;
        padding: 3px 0;
    }

    #_desktop_user_info .user-info a {
        font-size: 0.85rem;
        max-width: 100px;
    }

    /* Barre de recherche */
    #search_widget.search-widget-wrapper.active {
        width: 150px;
    }

    .search-toggle {
        font-size: 1.3em;
    }

    /* Bannières cachées sur mobile */
    .banniere-everblock,
    .banniere-everblock-container {
        display: none !important;
    }

    /* Autres bannières */
    .banner-fullwidth,
    .banniere-calculateur-b2b,
    .banniere-personnalisation {
        min-height: 300px;
        padding: 35px 0;
    }

    .cta-choco-pack,
    .cta-calculateur,
    .cta-personnalisation {
        max-width: 95%;
        padding: 0 8px;
    }

    .cta-choco-pack h2,
    .cta-calculateur h2,
    .cta-personnalisation h2 {
        font-size: 1.6rem;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .cta-choco-pack p,
    .cta-calculateur p,
    .cta-personnalisation p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .btn-cta {
        padding: 10px 25px;
        font-size: 0.95rem;
    }

    /* Séparateur */
    .separator-container {
        padding: 25px 0;
    }

    .separator-block {
        width: 90%;
    }

    /* FAQ */
    .faq-title {
        font-size: 1.6rem;
        margin-top: 25px;
        margin-bottom: 12px;
    }

    .faq-choco-pack.four-columns {
        padding: 0 12px;
        margin: 40px auto;
    }

    .faq-choco-pack.four-columns .faq-item {
        padding: 18px 20px;
        margin-bottom: 12px;
    }

    .faq-choco-pack.four-columns .faq-item h3 {
        font-size: 1.05rem;
    }

    .faq-choco-pack.four-columns .faq-item p {
        font-size: 0.9rem;
    }

    /* Grille de produits */
    .product-list .products .product-miniature {
        width: 50%;
    }

    .product-miniature {
        min-height: 350px;
    }

    .product-miniature .product-title a {
        font-size: 0.95rem;
    }

    /* Personnalisation */
    .personnalisation-page-wrapper .col-image-personnalisation,
    .personnalisation-page-wrapper .col-texte-personnalisation {
        padding: 20px 12px;
    }

    .personnalisation-page-wrapper .presentation-personnalisation h1 {
        font-size: 2rem;
    }

    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .personnalisation-page-wrapper .etape-card,
    .personnalisation-page-wrapper .info-item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .personnalisation-page-wrapper .main-image-container img {
        height: 350px;
    }

    .personnalisation-page-wrapper .thumbnails-container {
        flex-direction: column;
        gap: 10px;
    }

    .personnalisation-page-wrapper .thumbnails-container img {
        width: 100%;
        height: 200px;
    }

    /* Panier */
    .product-line-grid {
        flex-wrap: wrap;
    }

    .product-line-grid-left {
        flex: 0 0 80px;
        padding-right: 15px;
    }

    .product-line-grid-left img {
        width: 70px;
    }

    .product-line-grid-body {
        flex: 1 1 calc(100% - 95px);
        padding: 0;
    }

    .product-line-grid-body .product-name .label {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .product-line-grid-body .product-price .price {
        font-size: 1rem;
    }

    .product-line-grid-body .attribute-line {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .product-line-grid-body .attribute-line .label {
        min-width: unset;
        margin-bottom: 3px;
        font-weight: 700;
    }

    .product-line-grid-right {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 15px;
    }

    .cart-actions-container {
        width: 100%;
        min-width: unset;
        justify-content: space-between;
        gap: 12px;
        padding: 0 8px;
    }

    .action-qty input.js-cart-line-product-quantity {
        width: 55px;
        height: 34px;
        font-size: 0.9rem;
    }

    .action-price {
        flex: 1 1 auto;
        justify-content: center;
        min-width: unset;
    }

    .action-price .product-price {
        font-size: 1rem;
    }

    .action-delete .remove-from-cart {
        padding: 8px;
    }

    .action-delete .remove-from-cart i.material-icons {
        font-size: 20px;
    }

    /* Footer */
    .footer-container {
        text-align: center;
        padding: 0 12px;
    }

    #blockEmailSubscription_displayFooterBefore {
        padding-top: 25px;
    }

    /* Catégories */
    .category-grid-heading {
        font-size: 1.8rem;
    }

    .category-grid-title-section {
        padding: 35px 12px 20px 12px;
    }

    /* Bloc partenaires */
    .partenaires-b2b {
        padding: 60px 0;
    }

    .texte-partenaires h2 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .texte-partenaires p {
        font-size: 1rem;
    }

    .logos-partenaires {
        gap: 30px;
    }

    .logos-partenaires li {
        flex: 0 1 120px;
    }

    /* Onglets produit mobile */
    #main .tabs-extended-container.tabs-desktop {
        display: none !important;
    }

    #main .product-description-section.tabs-mobile {
        display: block !important;
    }

    /* Ajustement marges */
    #main-content {
        margin-top: 40px;
    }

    .tabs {
        padding: 1rem 1.2rem;
        margin-bottom: 15px;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary,
    .btn-tertiary {
        font-size: 0.9rem;
        padding: 10px 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. MOBILE PORTRAIT - max-width: 479px (< 480px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
    /* Container principal */
    .container,
    .main-header-container {
        padding: 0 10px;
    }

    /* Typographie */
    h1, .h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    h2, .h2 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    h3, .h3 {
        font-size: 1.1rem;
    }

    h4, .h4 {
        font-size: 1rem;
    }

    h5, .h5 {
        font-size: 0.95rem;
    }

    p, body {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Header */
    .header-line-1 {
        padding: 5px 8px;
        height: 45px;
    }

    .header-line-2 {
        padding: 10px 0;
    }

    .header-line-3 {
        padding-bottom: 12px;
    }

    .header-logo-container img {
        max-height: 50px;
    }

    #_desktop_contact_link #contact-link {
        font-size: 0.8rem;
    }

    #_desktop_top_menu .top-menu {
        gap: 10px;
    }

    #_desktop_top_menu .top-menu li a {
        font-size: 0.8rem;
        padding: 2px 0;
    }

    #_desktop_user_info .user-info a {
        font-size: 0.8rem;
        max-width: 90px;
    }

    #_desktop_user_info .user-info a i {
        font-size: 1em;
    }

    #_desktop_cart .blockcart.cart-preview .header i {
        font-size: 1em;
    }

    #_desktop_user_info .user-info a, #_desktop_cart .blockcart.cart-preview .header{
        margin-left: 0px !important;
        padding-right: 0px;
    }

    .col-md-8.col-xs-12.header-top-right-elements {
        scale: 1.8;
        transform-origin: right;
    }

    .col-md-4.col-xs-12.header-phone {
    scale: 1.4;
    transform-origin: left;
    }

    .user-info {
    margin-top: 2.8px;
    scale: 1.1;
    }

    .search-toggle {
        font-size: 1.1em;
        margin-top: 2px;
    }

    /* MON COMPTE */ 

    .page-my-account #content .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    }

    .text-sm-center {
    justify-self: center;
    }

    footer.page-footer {
    align-self: center;
}

    /* Barre de recherche */
    #search_widget.search-widget-wrapper.active {
        width: 140px;
        padding: 3px;
    }

    #search_widget.search-widget-wrapper input[type="text"] {
        padding: 5px 8px;
        font-size: 0.85rem;
    }

    .search-toggle {
        font-size: 1.2em;
    }

    /* Bannières */
    .banner-fullwidth,
    .banniere-calculateur-b2b,
    .banniere-personnalisation {
        min-height: 280px;
        padding: 30px 0;
    }

    .cta-choco-pack,
    .cta-calculateur,
    .cta-personnalisation {
        max-width: 95%;
        padding: 0 10px;
    }

    .cta-choco-pack h2,
    .cta-calculateur h2,
    .cta-personnalisation h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .cta-choco-pack p,
    .cta-calculateur p,
    .cta-personnalisation p {
        font-size: 0.85rem;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .btn-cta {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    /* Séparateur */
    .separator-container {
        padding: 20px 0;
    }

    .separator-block {
        width: 95%;
    }

    /* FAQ */
    .faq-title {
        font-size: 1.4rem;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .faq-choco-pack.four-columns {
        padding: 0 10px;
        margin: 30px auto;
    }

    .faq-choco-pack.four-columns .faq-item {
        padding: 15px 18px;
        margin-bottom: 10px;
    }

    .faq-choco-pack.four-columns .faq-item h3 {
        font-size: 1rem;
    }

    .faq-choco-pack.four-columns .faq-item p {
        font-size: 0.85rem;
    }

    /* Grille de produits */
    .product-miniature {
        min-height: 320px;
    }

    .product-miniature .product-title a {
        font-size: 0.9rem;
    }

    .product-miniature .product-price {
        font-size: 0.95rem;
    }

    /* Personnalisation */
    .personnalisation-page-wrapper .col-image-personnalisation,
    .personnalisation-page-wrapper .col-texte-personnalisation {
        padding: 18px 10px;
    }

    .personnalisation-page-wrapper .presentation-personnalisation h1 {
        font-size: 1.8rem;
    }

    .personnalisation-page-wrapper .presentation-personnalisation .subtitle {
        font-size: 1rem;
    }

    .personnalisation-page-wrapper .section-etapes h2,
    .personnalisation-page-wrapper .section-info h2 {
        font-size: 1.8rem;
        margin-bottom: 35px;
    }

    .personnalisation-page-wrapper .etape-card,
    .personnalisation-page-wrapper .info-item {
        padding: 25px 20px;
    }

    .personnalisation-page-wrapper .etape-card h3,
    .personnalisation-page-wrapper .info-item h3 {
        font-size: 1.2rem;
    }

    .personnalisation-page-wrapper .etape-card p,
    .personnalisation-page-wrapper .info-item p {
        font-size: 0.9rem;
    }

    .personnalisation-page-wrapper .main-image-container img {
        height: 300px;
    }

    .personnalisation-page-wrapper .thumbnails-container img {
        height: 180px;
    }

    .personnalisation-page-wrapper .btn-personnalisation {
        padding: 12px 30px;
        font-size: 0.95rem;
    }

    .personnalisation-page-wrapper .couleur-item {
        width: calc(33.33% - 10px);
        min-width: 60px;
    }

    .personnalisation-page-wrapper .couleur-pastille {
        width: 35px;
        height: 35px;
    }

    /* Panier */
    .product-line-grid {
        padding: 12px 8px;
    }

    .product-line-grid-left {
        flex: 0 0 70px;
        padding-right: 12px;
    }

    .product-line-grid-left img {
        width: 60px;
    }

    .product-line-grid-body {
        flex: 1 1 calc(100% - 82px);
    }

    .product-line-grid-body .product-name .label {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .product-line-grid-body .product-price .price {
        font-size: 0.95rem;
    }

    .product-line-grid-body .attribute-line .label {
        font-size: 0.85rem;
    }

    .product-line-grid-body .attribute-line .value {
        font-size: 0.85rem;
    }

    .cart-actions-container {
        gap: 10px;
        padding: 0 5px;
    }

    .action-qty input.js-cart-line-product-quantity {
        width: 50px;
        height: 32px;
        font-size: 0.85rem;
    }

    .action-price .product-price {
        font-size: 0.95rem;
    }

    .action-delete .remove-from-cart {
        padding: 6px;
    }

    .action-delete .remove-from-cart i.material-icons {
        font-size: 18px;
    }

    /* Footer */
    #blockEmailSubscription_displayFooterBefore {
        padding-top: 20px;
    }

    /* Catégories */
    .category-grid-heading {
        font-size: 1.6rem;
    }

    .category-grid-title-section {
        padding: 30px 10px 18px 10px;
    }

    /* Bloc partenaires */
    .partenaires-b2b {
        padding: 50px 0;
    }

    .container-partenaires {
        padding: 0 10px;
    }

    .texte-partenaires {
        margin-bottom: 40px;
    }

    .texte-partenaires h2 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .texte-partenaires p {
        font-size: 0.95rem;
    }

    .logos-partenaires {
        gap: 25px;
    }

    .logos-partenaires li {
        flex: 0 1 100px;
    }

    /* Ajustement marges */
    #main-content {
        margin-top: 35px;
    }

    .tabs {
        padding: 0.8rem 1rem;
        margin-bottom: 12px;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary,
    .btn-tertiary {
        font-size: 0.85rem;
        padding: 9px 16px;
    }

    /* Formulaires */
    .form-control {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    /* Alertes */
    .alert {
        font-size: 0.85rem;
        padding: 1.5rem 1rem;
    }

    .alert-info .alert-link {
        font-size: 0.9rem;
    }

    /* Page authentification */
    .page-authentication #content,
    .page-registration #content {
        max-width: 100%;
        padding: 0 10px;
    }

    /* Page contact */
    body#contact .col-xs-12.col-md-4.col-lg-3 {
        width: 100%;
    }

    /* Bannière vidéo */
    .banniere-everblock-text h1.animated-title .text-line {
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    .banniere-everblock-text {
        left: 3%;
        padding: 10px 15px;
        border-left: 4px solid #9cbf9b;
    }

.cta-choco-pack.is-visible p.animated-element, .cta-calculateur.is-visible p.animated-element, .cta-personnalisation.is-visible p.animated-element {
    font-size: 4vw;
}

.cta-choco-pack.is-visible h2.animated-element, .cta-calculateur.is-visible h2.animated-element, .cta-personnalisation.is-visible h2.animated-element {
    font-size: 7.1vw;
}

.cta-choco-pack.is-visible .btn-cta.animated-element, .cta-calculateur.is-visible .btn-cta.animated-element, .cta-personnalisation.is-visible .btn-cta.animated-element {
    font-size: 3.2vw;
}

#blockEmailSubscription_displayFooterBefore {
        padding: 30px 25px 20px 25px;
    }

#wrapper {
    padding-top: 0px;
}

.banner-fullwidth.banniere-personnalisation {
    background-position: -1420px;
}

.block-categories {
    text-align-last: center;
}

.product-actions .add-to-cart .material-icons {
    line-height: normal;
}

.bootstrap-touchspin {
    display: flex;

}

}

/* ═══════════════════════════════════════════════════════════════════════
   Enléve détails du produit sur mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) {
  li.nav-item > a[href="#product-details-mobile"] {
    display: none !important;
  }
}

.row.product-description-section.tabs-mobile {
        display: none;
}

/*-----------------RADIUS PARTOUT-------------*/

.form-control {
    border-radius: 5px;
}

.active_filters, .filter-block {
    border-radius: 5px;
}


/*---------GRAS H2--------*/

h2, H1 {
    font-weight: unset;
}


/*-------Problème affichage image declinaisons----*/ 

ul.product-images.js-qv-product-images {
    display: flex;
}


/*-------Bouton déconnexion mon compte-----*/

a#logout-btn {
    color: white;
    background: #9cbf9b;
    padding: 10px 20px;
    border-radius: 5px;
}

a#logout-btn:hover {
    background: #ef8181;

}

/*-------Décalage fil d'Ariane-----*/
#wrapper .breadcrumb {
  padding: 0rem 1.25rem;
}

/*----affichage description catégorie---*/

.custom-category-description {
    order: 2;
}
/*-------pastille or argent page de personnalisation----*/ 
.couleur-pastille.pastille-or {
  background: linear-gradient(135deg, #d4a017 0%, #8b6914 25%, #f0c040 45%, #9a7520 65%, #c8951a 80%, #b8820f 100%) !important;
}
.couleur-pastille.pastille-argent {
  background: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 25%, #f0f0f0 45%, #a8a8a8 65%, #d8d8d8 80%, #c0c0c0 100%) !important;
}

/*-------pastille couleurs specials toutes pages produit----*/ 
/* ================================================
   MÉTALLIQUES - Page produit (input + span)
   ================================================ */

/* ===== OR BRILLANT ===== */
input[value="9"] + span.color,
input[value="215"] + span.color,
input[value="258"] + span.color,
input[value="270"] + span.color,
input[value="275"] + span.color,
input[value="446"] + span.color,
input[title="Or brillant"] + span.color,
input[title="Or Brillant"] + span.color {
  background: linear-gradient(135deg, #d4a017 0%, #8b6914 25%, #f0c040 45%, #9a7520 65%, #c8951a 80%, #b8820f 100%) !important;
}

/* ===== OR MAT ===== */
input[value="4"] + span.color,
input[title="Or mat"] + span.color {
  background: linear-gradient(135deg, #c8a84b 0%, #a07830 40%, #b8983a 70%, #8a6820 100%) !important;
}

/* ===== ARGENT BRILLANT ===== */
input[value="7"] + span.color,
input[value="91"] + span.color,
input[value="216"] + span.color,
input[value="381"] + span.color,
input[value="447"] + span.color,
input[title="Argent brillant"] + span.color {
  background: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 25%, #f0f0f0 45%, #a8a8a8 65%, #d8d8d8 80%, #c0c0c0 100%) !important;
}

/* ===== ARGENT MAT ===== */
input[value="12"] + span.color,
input[title="Argent mat"] + span.color {
  background: linear-gradient(135deg, #b8b8b8 0%, #888888 40%, #a8a8a8 70%, #787878 100%) !important;
}

/* ===== ARGENT ===== */
input[value="117"] + span.color,
input[value="118"] + span.color,
input[title="Argent"] + span.color {
  background: linear-gradient(135deg, #d0d0d0 0%, #989898 35%, #c8c8c8 65%, #909090 100%) !important;
}

/* ===== BRONZE ===== */
input[value="45"] + span.color,
input[value="107"] + span.color,
input[value="201"] + span.color,
input[value="453"] + span.color,
input[title="Bronze"] + span.color {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 25%, #e8a050 45%, #9a5520 65%, #b8682a 80%, #8b4513 100%) !important;
}

/* ===== CUIVRE ===== */
input[value="159"] + span.color,
input[value="260"] + span.color,
input[title="Cuivre"] + span.color {
  background: linear-gradient(135deg, #b87333 0%, #7a3510 20%, #d4904a 40%, #c07030 60%, #e8a060 75%, #9a5520 100%) !important;
}

/* ===== NOIR BRILLANT ===== */
input[value="226"] + span.color,
input[title="Noir brillant"] + span.color {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 30%, #3a3a3a 50%, #0a0a0a 70%, #222222 100%) !important;
}

/* ===== NOIR EMBOSSÉ ===== */
input[value="11"] + span.color,
input[title="NOIR EMBOSSÉ"] + span.color {
  background: repeating-linear-gradient(
    45deg,
    #111111 0px,
    #111111 2px,
    #2a2a2a 2px,
    #2a2a2a 4px
  ) !important;
}

/* ===== TRANSPARENT ===== */
input[value="274"] + span.color,
input[title="Transparent"] + span.color {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.9) 0%,
    rgba(200,230,255,0.5) 30%,
    rgba(255,255,255,0.95) 50%,
    rgba(180,220,255,0.4) 70%,
    rgba(255,255,255,0.85) 100%) !important;
  border: 1px solid #cccccc !important;
}


/* ================================================
   MÉTALLIQUES - Prévisualisation listing (a.color)
   ================================================ */

/* ===== OR BRILLANT ===== */
a.color[title="Or brillant"],
a.color[title="Or Brillant"] {
  background: linear-gradient(135deg, #d4a017 0%, #8b6914 25%, #f0c040 45%, #9a7520 65%, #c8951a 80%, #b8820f 100%) !important;
}

/* ===== OR MAT ===== */
a.color[title="Or mat"] {
  background: linear-gradient(135deg, #c8a84b 0%, #a07830 40%, #b8983a 70%, #8a6820 100%) !important;
}

/* ===== ARGENT BRILLANT ===== */
a.color[title="Argent brillant"] {
  background: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 25%, #f0f0f0 45%, #a8a8a8 65%, #d8d8d8 80%, #c0c0c0 100%) !important;
}

/* ===== ARGENT MAT ===== */
a.color[title="Argent mat"] {
  background: linear-gradient(135deg, #b8b8b8 0%, #888888 40%, #a8a8a8 70%, #787878 100%) !important;
}

/* ===== ARGENT ===== */
a.color[title="Argent"] {
  background: linear-gradient(135deg, #d0d0d0 0%, #989898 35%, #c8c8c8 65%, #909090 100%) !important;
}

/* ===== BRONZE ===== */
a.color[title="Bronze"] {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 25%, #e8a050 45%, #9a5520 65%, #b8682a 80%, #8b4513 100%) !important;
}

/* ===== CUIVRE ===== */
a.color[title="Cuivre"] {
  background: linear-gradient(135deg, #b87333 0%, #7a3510 20%, #d4904a 40%, #c07030 60%, #e8a060 75%, #9a5520 100%) !important;
}

/* ===== NOIR BRILLANT ===== */
a.color[title="Noir brillant"] {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 30%, #3a3a3a 50%, #0a0a0a 70%, #222222 100%) !important;
}

/* ===== NOIR EMBOSSÉ ===== */
a.color[title="NOIR EMBOSSÉ"] {
  background: repeating-linear-gradient(
    45deg,
    #111111 0px,
    #111111 2px,
    #2a2a2a 2px,
    #2a2a2a 4px
  ) !important;
}

/* ===== TRANSPARENT ===== */
a.color[title="Transparent"] {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.9) 0%,
    rgba(200,230,255,0.5) 30%,
    rgba(255,255,255,0.95) 50%,
    rgba(180,220,255,0.4) 70%,
    rgba(255,255,255,0.85) 100%) !important;
  border: 1px solid #cccccc !important;
}
/* ================================================
   effet ligne au scroll sur les titres
   ================================================ */
.category-grid-heading,
.products-section-title,
.faq-title {
  position: relative;
}
.category-grid-heading {
  display: inline-block;
}
.category-grid-heading::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgb(156, 191, 155);
  transition: width 0.6s ease 0.4s, left 0.6s ease 0.4s;
}
.category-grid-heading.is-visible::after {
  width: 100%;
  left: 0;
  transition: width 0.6s ease 0.4s, left 0.6s ease 0.4s;
}
.underline-target {
  position: relative;
  display: inline-block;
}
.underline-target::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgb(156, 191, 155);
  transition: width 0.6s ease 0.4s, left 0.6s ease 0.4s;
}
.products-section-title.is-visible .underline-target::after,
.faq-title.is-visible .underline-target::after {
  width: 100%;
  left: 0;
  transition: width 0.6s ease 0.4s, left 0.6s ease 0.4s;
}
/* Anneau vert sur la couleur produit sélectionnée */
  input.input-color:checked + .color {
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px #9cbf9b !important;
}
.product-miniature .thumbnail-container {
        background: none;
}

.product-miniature {
    display: block;
}

/* ================================================
   ajout image de produit à la place de celle de la declinaison par default en plus du JS
   ================================================ */
/* Masque le bloc image le temps que custom.js bascule sur l'image produit générique,
   pour éviter le flash de l'image de déclinaison au premier chargement. */
.images-container.js-images-container {
  visibility: hidden;
}



/*---Centrer la page mon compte sur firefox et safari -----*/ 


#main .page-content {
  text-align: -webkit-center;
}

/* ================================================
   style pour le texte de la banniére video du header
   ================================================ 
.banniere-everblock-text p.animated-title { margin:0; padding:0; font-weight:400; line-height:1.1; }
.banniere-everblock-text p.animated-title .text-line {
  display:block;
  font-family:'Playfair Display','Times New Roman',serif;
  font-size:3.5rem;
  font-weight:400;
  color:#2d2d2d;
  line-height:1.15;
  letter-spacing:.05em;
  margin:0;
  text-align:left;
  opacity:0;
  transform:translateY(10px);
  animation:fadeInUp 0.6s ease-out forwards;
}
.banniere-everblock-text p.animated-title .text-line:nth-child(1){ animation-delay:0.5s; }
.banniere-everblock-text p.animated-title .text-line:nth-child(2){ animation-delay:0.7s; }
.banniere-everblock-text p.animated-title .text-line:nth-child(3){ animation-delay:0.9s; }
.banniere-everblock-text p.animated-title .text-line:nth-child(4){ animation-delay:1.1s; }
@media (max-width:1023px){ .banniere-everblock-text p.animated-title .text-line{ font-size:2.5rem; } }
@media (max-width:833px){ .banniere-everblock-text p.animated-title .text-line{ font-size:1.8rem; } }
@media (max-width:479px){ .banniere-everblock-text p.animated-title .text-line{ font-size:1rem; letter-spacing:.02em; } }
*/

/* ================================================
   style pour les titres des catégories
   ================================================ */
h1.category-title {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 3.0rem;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #2d2d2d;
  margin: 25px 0 20px;
}
@media (max-width: 767px){
  h1.category-title { font-size: 1.8rem; }
}


/* ================================================
   FAQ ChocoPack 
   ================================================ */
/* ===== FAQ ChocoPack — Custom CSS (bannière + cartes + filtres par section, compatible éditeur PrestaShop) ===== */
.faq-cp{max-width:820px;margin:0 auto;padding:0 0 30px;color:#232323;text-align:left}

/* --- Bannière pleine largeur (comme les articles) --- */
.faq-hero{position:relative;width:100vw;left:calc(-50vw + 50%);margin:0 0 34px;overflow:hidden}
.faq-hero>img{width:100%;height:auto;max-height:380px;object-fit:cover;object-position:center;display:block;margin:0}
.faq-hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42)}
.faq-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 8%}
.faq-hero-inner h1{font-family:'Playfair Display',serif;font-weight:700;color:#fff;font-size:2.5rem;line-height:1.18;text-transform:uppercase;letter-spacing:.05em;margin:0 0 20px}
.faq-hero-inner h1::after{content:'';display:block;width:52px;height:2px;background:var(--couleur-bouton,#9cbf9b);margin:18px auto 0}
.faq-hero-sub{max-width:780px;color:rgba(255,255,255,.94);font-size:1.08rem;line-height:1.65;margin:0}
.faq-hero-sub a{color:#fff;text-decoration:underline}

/* --- Boutons de tri par section --- */
.faq-cp-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 34px;scroll-margin-top:130px}
.faq-cp-nav a{display:inline-block;background:#fff;border:1px solid var(--couleur-bouton,#9cbf9b);color:#232323;padding:9px 18px;border-radius:6px;text-decoration:none;font-weight:600;font-size:.9rem;transition:background .2s,color .2s}
.faq-cp-nav a:hover{background:var(--couleur-bouton-hover,#c0d4bf);border-color:var(--couleur-bouton-hover,#c0d4bf);color:#fff}

/* Mécanique de filtrage (CSS pur, sans script) :
   - par défaut : toutes les sections visibles, bouton "Toutes" actif
   - clic sur un bouton : seule la section ciblée s'affiche
   - clic sur "Toutes" : tout réapparaît */
.faq-sec{scroll-margin-top:130px}
.faq-cp:has(.faq-sec:target) .faq-sec{display:none}
.faq-cp:has(.faq-sec:target) .faq-sec:target{display:block}
.faq-cp:not(:has(.faq-sec:target)) .faq-cp-nav .faq-nav-tous{background:var(--couleur-bouton,#9cbf9b);border-color:var(--couleur-bouton,#9cbf9b);color:#fff}
.faq-cp:has(#faq-commander:target) .faq-cp-nav a[href="#faq-commander"],
.faq-cp:has(#faq-livraison:target) .faq-cp-nav a[href="#faq-livraison"],
.faq-cp:has(#faq-paiement:target) .faq-cp-nav a[href="#faq-paiement"],
.faq-cp:has(#faq-perso:target) .faq-cp-nav a[href="#faq-perso"],
.faq-cp:has(#faq-surmesure:target) .faq-cp-nav a[href="#faq-surmesure"],
.faq-cp:has(#faq-produits:target) .faq-cp-nav a[href="#faq-produits"],
.faq-cp:has(#faq-service:target) .faq-cp-nav a[href="#faq-service"]{background:var(--couleur-bouton,#9cbf9b);border-color:var(--couleur-bouton,#9cbf9b);color:#fff}

/* Titres de section (stylés par la balise pour survivre à l'éditeur) */
.faq-cp h2{
  font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:400;color:#232323;
  letter-spacing:.02em;text-align:left;padding-bottom:8px;margin:36px 0 16px;
  border-bottom:2px solid var(--couleur-bouton,#9cbf9b)}
.faq-sec:first-of-type h2{margin-top:10px}
/* Carte question/réponse */
.faq-cp-item{
  border:1px solid #ececec;border-left:3px solid var(--couleur-bouton,#9cbf9b);
  border-radius:6px;padding:16px 20px;margin-bottom:12px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.03)}
.faq-cp-item h3{font-size:1.05rem;font-weight:600;color:#232323;margin:0 0 8px}
.faq-cp-item p{color:#555;line-height:1.7;margin:0}
.faq-cp-item a{color:var(--couleur-bouton,#9cbf9b)}
/* CTA + bouton */
.faq-cp-cta{text-align:center;margin-top:44px;padding:30px 24px;background:#f6f6f6;border-radius:10px}
.faq-cp-cta p{font-family:'Playfair Display',serif;font-size:1.3rem;color:#232323;margin:0 0 16px}
.faq-cp-more{text-align:center;margin:36px 0}
.faq-cp-btn{
  display:inline-block;background:var(--couleur-bouton,#9cbf9b)!important;color:#fff!important;
  padding:13px 32px;border-radius:6px;text-decoration:none;font-weight:600;font-size:1rem;
  border:none;line-height:1.2;transition:background .2s}
.faq-cp-btn:hover{background:var(--couleur-bouton-hover,#c0d4bf)!important;color:#fff!important}
@media(max-width:767px){
  .faq-cp h2{font-size:1.45rem}
  .faq-hero-inner h1{font-size:1.7rem}
  /* mobile : le texte donne sa hauteur à la bannière, l'image couvre derrière */
  .faq-hero>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
  .faq-hero-inner{position:relative;inset:auto;padding:46px 22px}
  .faq-hero-sub{font-size:.98rem}
  .faq-cp-nav a{font-size:.85rem;padding:8px 14px}}


/* ================================================
   Blog hub + articles
   ================================================ */
/* ===== Blog / Guides ChocoPack — à coller dans Custom CSS ===== */
@keyframes cpFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ===== ARTICLE : pleine largeur, sections alternées blanc / gris ===== */
.article-cp{position:relative;width:100vw;left:calc(-50vw + 50%);max-width:none;margin:0;padding:0;color:#333;line-height:1.75;font-size:1.05rem;animation:cpFadeUp .7s ease-out both}

/* --- Bannière (comme l'accueil) --- */
.article-hero{position:relative;margin:0;overflow:hidden}
.article-cp .article-hero>img{width:100%;height:auto;max-height:460px;object-fit:cover;display:block;margin:0;box-shadow:none}
.article-hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42)}
.article-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 8%}
.article-hero-tag{color:var(--couleur-bouton,#9cbf9b);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;margin-bottom:14px}
.article-hero-inner h1{font-family:'Playfair Display',serif;font-weight:700;color:#fff;font-size:2.5rem;line-height:1.18;text-transform:uppercase;letter-spacing:.05em;margin:0 0 20px}
.article-hero-inner h1::after{content:'';display:block;width:52px;height:2px;background:var(--couleur-bouton,#9cbf9b);margin:18px auto 0}
.article-hero-sub{max-width:780px;color:rgba(255,255,255,.94);font-size:1.08rem;line-height:1.65;margin:0}

/* --- Sections --- */
.a-sec{padding:56px clamp(20px,5vw,72px)}
.a-sec--grey{background:#f6f6f6}
.a-in{max-width:1100px;margin:0 auto}

/* --- Titres : Playfair centrés, trait vert dessous --- */
.article-cp h2{font-family:'Playfair Display',serif;font-weight:400;font-size:1.9rem;color:#232323;text-align:center;letter-spacing:.02em;margin:0 0 18px;padding:0;border:none}
.article-cp h2::after{content:'';display:block;width:52px;height:2px;background:var(--couleur-bouton,#9cbf9b);margin:16px auto 0}
.article-cp h3{font-size:1.15rem;font-weight:600;color:#232323;margin:0 0 10px}
.a-lead{text-align:center;color:#5c5c5c;max-width:780px;margin:0 auto 38px;font-size:1.07rem}
.article-cp p{margin:0 0 15px}
.article-cp ul{margin:0 0 16px;padding-left:20px}
.article-cp li{margin-bottom:8px}
.article-cp a{color:var(--couleur-bouton,#9cbf9b);text-decoration:underline}
.article-cp img{max-width:100%;height:auto}

/* --- Duo image / texte --- */
.a-duo{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.a-duo .duo-media img{display:block;max-width:100%;max-height:320px;width:auto;margin:0 auto}
.a-duo .duo-text p:last-child{margin-bottom:0}

/* --- 2 colonnes de texte --- */
.a-cols{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}

/* --- Fiches épaisseur : cartes blanches, liseré vert --- */
.a-thick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 28px}
.a-thick .thick{background:#fff;padding:30px 24px;text-align:center;border-top:3px solid var(--couleur-bouton,#9cbf9b)}
.a-thick h3{font-family:'Playfair Display',serif;font-weight:400;font-size:1.35rem;color:#232323;margin:0 0 6px}
.a-thick .thick-mm{display:block;color:var(--couleur-bouton,#9cbf9b);font-weight:700;font-size:.95rem;margin-bottom:12px}
.a-thick p{font-size:.94rem;color:#666;line-height:1.6;margin:0}
.a-rule{text-align:center;color:#5c5c5c;max-width:720px;margin:0 auto}

/* --- Capture du calculateur --- */
.a-shot img{display:block;max-width:640px;width:100%;margin:0 auto;box-shadow:0 14px 34px rgba(0,0,0,.12)}

/* --- Étapes : cartes blanches (s'adapte à 4 ou 5 cartes sur une rangée) --- */
.a-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:36px}
.a-steps .step{background:#fff;padding:28px 20px;text-align:center}
.a-steps .step-num{display:flex;width:42px;height:42px;margin:0 auto 14px;align-items:center;justify-content:center;border-radius:50%;background:var(--couleur-bouton,#9cbf9b);color:#fff;font-weight:700;font-size:1.05rem}
.a-steps h3{font-size:1rem;font-weight:600;margin:0 0 8px}
.a-steps p{font-size:.9rem;color:#666;line-height:1.55;margin:0}

/* --- Pastilles catégories --- */
.a-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px}
.a-cats a{display:inline-block;background:#fff;border:1px solid var(--couleur-bouton,#9cbf9b);color:#232323;padding:12px 26px;border-radius:6px;text-decoration:none;font-weight:600;font-size:.97rem;transition:background .25s,color .25s}
.a-cats a:hover{background:var(--couleur-bouton,#9cbf9b);color:#fff}

/* --- Notes (contact alimentaire / délai) --- */
.a-notes{display:flex;justify-content:center;gap:70px;flex-wrap:wrap;text-align:center}
.a-notes>div{max-width:360px}
.a-notes h3{margin-bottom:8px}
.a-notes p{color:#666;font-size:.97rem;margin:0}

/* --- Bande CTA verte --- */
.a-cta{background:var(--couleur-bouton,#9cbf9b);text-align:center;padding:58px 24px}
.a-cta p{font-family:'Playfair Display',serif;font-size:1.6rem;color:#fff;margin:0 0 26px}
.a-cta-btn{display:inline-block;background:#fff!important;color:#232323!important;padding:14px 36px;border-radius:6px;text-decoration:none!important;font-weight:600;letter-spacing:.02em;transition:opacity .25s}
.a-cta-btn:hover{opacity:.85}

/* --- Lien "à lire aussi" --- */
.a-related{text-align:center;color:#777;font-size:.95rem;padding:28px 20px 46px;margin:0}

/* --- (hérité, encore utilisé par la page perso en attendant sa refonte) --- */
.article-cp-chapo{font-size:1.15rem;color:#555;font-style:italic;border-left:3px solid var(--couleur-bouton,#9cbf9b);padding-left:22px;margin:30px auto;max-width:900px}
.article-cp-cta{max-width:900px;text-align:center;margin:50px auto;padding:40px 24px;background:#f6f6f6}
.article-cp-cta p{font-family:'Playfair Display',serif;font-size:1.4rem;color:#232323;margin:0 0 20px}
.article-cp-btn{display:inline-block;background:var(--couleur-bouton,#9cbf9b)!important;color:#fff!important;padding:14px 34px;border-radius:6px;text-decoration:none!important;font-weight:600;transition:background .25s}
.article-cp-btn:hover{background:var(--couleur-bouton-hover,#c0d4bf)!important}
.article-cp-related{text-align:center;font-size:.95rem;color:#777;padding:0 20px 40px}
.article-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin:42px auto;max-width:1100px;padding:0 20px}
.article-split .split-media img{display:block;max-width:100%;max-height:340px;width:auto;margin:0 auto}
.article-split.reverse .split-text{order:2}

/* ===== HUB "Nos conseils" — PLEINE LARGEUR bord à bord, mosaïque magazine ===== */
.conseils-hub{position:relative;width:100vw;left:calc(-50vw + 50%);max-width:none;padding:0 0 48px;animation:cpFadeUp .6s ease-out both}

/* en-tête sur fond blanc */
.conseils-panel{background:#fff;color:#232323;text-align:center;padding:44px 20px 38px}
.conseils-panel h1{font-family:'Playfair Display',serif;font-weight:400;font-size:3rem;line-height:1.14;color:#232323;margin:0 0 18px;border:none;padding:0}
.conseils-panel h1::after{content:'';display:block;width:52px;height:2px;background:var(--couleur-bouton,#9cbf9b);margin:18px auto 0}
.conseils-panel p{color:#555;line-height:1.6;font-size:1.15rem;margin:0 auto;max-width:820px}

/* lignes article : grande image + bloc texte, collés (gap 0), alternés */
.conseils-row{display:grid;grid-template-columns:1.2fr .8fr;gap:0;min-height:460px}
.conseils-row + .conseils-row{margin-top:24px}
.conseils-row.reverse{grid-template-columns:.8fr 1.2fr}
.conseils-row .row-media{position:relative;overflow:hidden}
.conseils-row .row-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease;margin:0;max-width:none;border-radius:0}
.conseils-row:hover .row-media img{transform:scale(1.03)}
.conseils-row .row-body{background:#f6f6f6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 40px}
.conseils-row .card-tag{display:inline-block;color:var(--couleur-bouton,#9cbf9b);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:16px}
.conseils-row h2{font-family:'Playfair Display',serif;font-weight:400;font-size:1.9rem;line-height:1.22;color:#232323;margin:0 0 18px;border:none;padding:0}
.conseils-row h2::after{content:'';display:block;width:52px;height:2px;background:var(--couleur-bouton,#9cbf9b);margin:16px auto 0}
.conseils-row p{color:#5c5c5c;line-height:1.6;margin:0 0 26px;font-size:1rem;max-width:460px}
.conseils-row .card-btn{display:inline-block;background:var(--couleur-bouton,#9cbf9b);color:#fff;padding:12px 28px;border-radius:6px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .25s}
.conseils-row:hover .card-btn,.conseils-row .card-btn:hover{background:var(--couleur-bouton-hover,#c0d4bf)}

/* bande "bientôt" */
.conseils-soon{position:relative;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 24px 10px}
.conseils-soon::before{content:'';width:44px;height:3px;background:var(--couleur-bouton,#9cbf9b);margin-bottom:20px}
.conseils-soon h3{font-family:'Playfair Display',serif;font-weight:400;font-size:1.5rem;color:#232323;margin:0 0 10px}
.conseils-soon p{color:#8a8a8a;line-height:1.55;margin:0;font-size:.96rem;max-width:420px}

/* ===== Responsive ===== */
@media(max-width:820px){
  .a-sec{padding:40px 20px}
  .a-duo,.a-cols{grid-template-columns:1fr;gap:26px}
  .a-thick{grid-template-columns:1fr}
  .a-steps{grid-template-columns:1fr 1fr}
  .a-notes{gap:28px}
  .article-hero-inner h1{font-size:1.65rem}
  .article-hero-sub{font-size:.98rem}
  /* mobile : le texte donne sa hauteur à la bannière, l'image couvre derrière */
  .article-cp .article-hero>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
  .article-hero-inner{position:relative;inset:auto;padding:46px 22px}
  .article-cp h2{font-size:1.55rem}.article-cp{font-size:1rem}
  .a-cta p{font-size:1.3rem}
  .article-split{grid-template-columns:1fr;gap:24px}
  .article-split.reverse .split-text{order:0}
  .conseils-row,.conseils-row.reverse{grid-template-columns:1fr;min-height:0}
  .conseils-row .row-media{min-height:260px}
  .conseils-row .row-body{padding:36px 22px}
  .conseils-panel h1{font-size:2rem}
}

/* ================================================
   Description longue categories en dessous de des produits 
   ================================================ */
#js-product-list-footer {
    order: 999;
}

/* ================================================
   STYLE CATÉGORIES CHOCOPACK
   ================================================ */

/* ---------- Description courte (HAUT) ---------- */
.custom-category-description .container {
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 20px 40px;
  text-align: center;
  border-bottom: 1px solid #e8ede4;
}

.custom-category-description .container p {
  margin-bottom: 14px;
  line-height: 1.7;
  color: #555;
  text-align: center;
}

.custom-category-description .container p:first-child strong {
  display: block;
  font-size: 1.15em;
  color: #2c3e2d;
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.custom-category-description .container p:last-child {
  margin-bottom: 0;
  font-size: 0.95em;
  color: #666;
}

.custom-category-description .container a {
  color: #5a8f47;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.custom-category-description .container a:hover {
  color: #3d6b30;
  border-bottom-color: #7fb069;
}

/* ---------- Informations complémentaires (BAS) ---------- */
.category-additional-description {
  max-width: 1100px;
  margin: 60px auto 40px !important;
  padding: 40px 40px !important;
  background: #fdfdfc;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.category-additional-description h2 {
  color: #2c3e2d;
  font-size: 1.4em;
  font-weight: 600;
  margin-top: 45px;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}

.category-additional-description h2:first-child {
  margin-top: 0;
}

.category-additional-description h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #7fb069 0%, #a8c98f 100%);
  border-radius: 2px;
}

.category-additional-description p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
  text-align: center;
}

.category-additional-description ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px dashed #e0e6dc;
}

.category-additional-description ul li {
  position: relative;
  padding: 8px 0 8px 28px;
  line-height: 1.5;
  color: #444;
  text-align: left;
  break-inside: avoid;
  page-break-inside: avoid;
}

.category-additional-description ul li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 8px;
  color: #7fb069;
  font-weight: bold;
  font-size: 1em;
}

.category-additional-description ul li strong {
  color: #2c3e2d;
  font-weight: 600;
}

.category-additional-description a {
  color: #5a8f47;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid #c8dcbb;
  transition: all 0.2s ease;
}

.category-additional-description a:hover {
  color: #3d6b30;
  border-bottom-color: #7fb069;
}

/* Encart "Personnalisation" (dernier H2) */
.category-additional-description h2:nth-last-of-type(1) {
  background: linear-gradient(135deg, #f4f8f0 0%, #eaf1e2 100%);
  padding: 25px 30px 20px !important;
  border-radius: 8px 8px 0 0;
  margin-top: 45px;
  margin-bottom: 0;
}

.category-additional-description h2:nth-last-of-type(1) + p {
  background: linear-gradient(135deg, #f4f8f0 0%, #eaf1e2 100%);
  padding: 5px 30px 25px;
  border-radius: 0 0 8px 8px;
  margin-bottom: 20px;
  text-align: center;
}

/* Encart final "Besoin de conseils" */
.category-additional-description p:last-child {
  background: #f8f9fa;
  padding: 18px 25px;
  border-radius: 6px;
  font-style: italic;
  color: #555;
  margin-top: 25px;
  text-align: center;
  font-size: 0.95em;
}

/* Responsive */
@media (max-width: 768px) {
  .category-additional-description {
    padding: 25px 20px !important;
    margin: 40px 15px !important;
  }
  
  .category-additional-description h2 {
    font-size: 1.2em;
  }
  
  .category-additional-description ul {
    column-count: 1;
  }
  
  .custom-category-description .container {
    padding: 15px;
    margin: 0 15px 30px;
  }
}

/* ================================================
   Bandeau Nos conseils - Homepage
   ================================================ */
   /* ================================================
   BANDEAU CONSEILS HOMEPAGE
   ================================================ */
.home-conseils-band {
  background: #9cbf9b;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.06) 0%, transparent 50%);
  padding: 45px 0;
  margin: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  font-family: Manrope, sans-serif;
}
.home-conseils-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.home-conseils-left {
  flex: 0 0 220px;
  position: relative;
}
.home-conseils-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: -8px;
  width: 40px;
  height: 2px;
  background: white;
  opacity: 0.7;
}
.home-conseils-left h2 {
  color: white;
  font-family: "Playfair Display", serif;
  font-size: 1.9em;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 10px 0;
  letter-spacing: 0.3px;
}
.home-conseils-left .subtitle {
  color: rgba(255,255,255,0.85);
  font-family: Manrope, sans-serif;
  font-size: 0.85em;
  font-weight: 300;
  letter-spacing: 0.3px;
}
.home-conseils-center {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.home-conseil-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 0 10px 20px;
  position: relative;
}
.home-conseil-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.3);
}
.home-conseil-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.home-conseil-card:hover {
  text-decoration: none;
  color: inherit;
}
.home-conseil-card:hover::after {
  transform: scaleY(1);
  transform-origin: top;
}
.home-conseil-card h3 {
  color: white;
  font-family: "Playfair Display", serif;
  font-size: 1.1em;
  font-weight: 400;
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.home-conseil-card p {
  color: rgba(255,255,255,0.85);
  font-family: Manrope, sans-serif;
  font-size: 0.85em;
  line-height: 1.5;
  margin: 0 0 14px 0;
  font-weight: 300;
}
.home-conseil-card .card-link {
  color: white;
  font-family: Manrope, sans-serif;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-conseil-card .card-link .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.home-conseil-card:hover .card-link .arrow {
  transform: translateX(6px);
}
.home-conseils-right {
  flex: 0 0 auto;
}
.home-conseils-right a {
  color: white;
  font-family: Manrope, sans-serif;
  font-size: 0.78em;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.home-conseils-right a .arrow {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.home-conseils-right a:hover {
  background: white;
  color: #5a8f47;
  border-color: white;
  text-decoration: none;
}
.home-conseils-right a:hover .arrow {
  transform: translateX(4px);
}
@media (max-width: 1000px) {
  .home-conseils-inner {
    flex-direction: column;
    gap: 25px;
    padding: 0 25px;
  }
  .home-conseils-left,
  .home-conseils-right {
    flex: 0 0 auto;
    text-align: center;
  }
  .home-conseils-left::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .home-conseils-center {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 25px;
  }
  .home-conseils-band {
    padding: 35px 0;
  }
}
.home-conseil-card {
  cursor: pointer;
}

.home-conseil-card .card-link {
  color: white;
  font-family: Manrope, sans-serif;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.home-conseil-card .card-link:hover {
  text-decoration: none;
  color: white;
}

/* ===============================
   Banniere accueil video 
   =============================== */

.banniere-everblock-container{
position:relative;
overflow:hidden;
width:100vw;
max-width:100vw;
left:50%;
margin-left:-50vw;
margin-right:-50vw;
height:clamp(360px,25vw,520px);
}

.banniere-everblock-container::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.25) 45%,rgba(0,0,0,.55));
z-index:2;
pointer-events:none;
}

.banniere-everblock-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
/* Masque les compteurs le temps que le JS les remette à 0,
   évite le flash du chiffre final avant l'animation */
.stack-count {
  opacity: 0;
}

/* ===============================
   TEXTE GAUCHE
   =============================== */

.banniere-everblock-text{
position:absolute;
top:48%;
left:5%;
transform:translateY(-50%);
z-index:3;
width:48%;
max-width:950px;
min-width:320px;
}

.animated-title{
color:white;
font-family:"Playfair Display",serif;
font-size:clamp(2.2rem,4vw,5rem);
font-weight:400;
line-height:1;
margin:0;
letter-spacing:-1px;
}

.text-line{
display:block;
opacity:0;
transform:translateY(30px);
animation:fadeInUpBan 1.1s cubic-bezier(.19,1,.22,1) forwards;
}

.text-line:nth-child(1){animation-delay:.15s}
.text-line:nth-child(2){animation-delay:.30s}
.text-line:nth-child(3){animation-delay:.45s}
.text-line:nth-child(4){animation-delay:.60s}

.animated-title em{
font-style:normal;
display:inline-block;
transform:skewX(-15deg);
}


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


/* ===============================
   SIGNATURE
   =============================== */

#test-hero-signature{
display:block;
margin-top:22px;
max-width:600px;
font-family:"Playfair Display",serif;
font-style:italic;
font-size:clamp(.85rem,1.1vw,1.3rem);
line-height:1.4;
color:rgba(255,255,255,.92);
opacity:0;
transform:translateY(20px);
animation:fadeInUpBan 1.1s cubic-bezier(.19,1,.22,1) .9s forwards;
}


/* ===============================
   BLOC DROITE
   =============================== */

#test-hero-stack{
position:absolute;
top:50%;
right:5%;
transform:translateY(-50%);

z-index:3;

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

gap:28px;

width:22vw;
max-width:380px;
min-width:220px;

padding-right:28px;

border-right:1px solid rgba(255,255,255,.35);
}


.stack-item{
display:flex;
flex-direction:column;
align-items:flex-end;
text-align:right;

opacity:0;
transform:translateY(20px);

animation:fadeInUpBan 1.1s cubic-bezier(.19,1,.22,1) forwards;
}

.stack-item:nth-child(1){animation-delay:.7s}
.stack-item:nth-child(2){animation-delay:.85s}
.stack-item:nth-child(3){animation-delay:1s}
.stack-item:nth-child(4){animation-delay:1.15s}


.stack-title{
color:white;
font-family:"Playfair Display",serif;
font-weight:400;
line-height:1.05;
text-shadow:0 2px 20px rgba(0,0,0,.25);
}

.stack-title-lg{
font-size:clamp(2rem,2.6vw,3.8rem);
}

.stack-title-md{
font-size:clamp(1.4rem,1.7vw,2.4rem);
}

.stack-plus{
font-size:.5em;
margin-left:2px;
color:rgba(255,255,255,.85);
}

.stack-label{
font-family:"Playfair Display",serif;
font-size:clamp(.85rem,1vw,1.35rem);
color:rgba(255,255,255,.9);
line-height:1.2;
margin-top:8px;
}


/* ===============================
   TABLETTE
   =============================== */

@media(max-width:1150px){

.banniere-everblock-text{
width:55%;
}

#test-hero-stack{
right:3%;
width:24vw;
min-width:180px;
padding-right:15px;
}

}



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

@media(max-width:1050px){

.banniere-everblock-container{
height:520px;
}


#test-hero-stack{
display:none;
}


.banniere-everblock-text{
top:auto;
bottom:35px;
left:5%;
width:90%;
min-width:auto;
transform:none;
}


.animated-title{
font-size:clamp(2rem,8vw,2.8rem);
}


#test-hero-signature{
font-size:1rem;
}

}
/*  Séparateur vert entre les modèles de ballotins */
.a-divider{
  display:flex;
  justify-content:center;
  margin:40px 0;
}
.a-divider::before{
  content:"";
  width:80px;
  height:3px;
  background-color:#9cbf9b; 
  border-radius:2px;
}


/* ==========================================================================
   ACCROCHE PAGE D'ACCUEIL  —  .presentation-choco-pack
   --------------------------------------------------------------------------
   ========================================================================== */

.presentation-choco-pack {
  /* ----- Couleurs ----- */
  --acc-font: 'Playfair Display', Georgia, serif;
  --acc-accent: #9cbf9b;
  --acc-accent-hover: #7fa87e;
  --acc-titre: #2f2f2f;
  --acc-texte: #4a4a4a;

  /* ----- Tailles de texte ----- */
  --acc-titre-size: clamp(1.55rem, 2.4vw, 2.6rem);
  --acc-texte-size: clamp(1rem, 0.98vw, 1.08rem);      /* mettre 1.1rem en 3e valeur pour revenir à l'origine */
  --acc-argument-size: clamp(1.3rem, 1.6vw, 1.75rem);  /* titres verts */
  --acc-argument-desc: clamp(1rem, 1.02vw, 1.12rem);   /* leurs descriptions */
  --acc-cta-size: clamp(1rem, 1.1vw, 1.2rem);

  /* ----- Rythme vertical ----- */
  --acc-gap-p: clamp(14px, 1.4vw, 20px);          /* entre deux paragraphes */
  --acc-gap-groupe: clamp(28px, 2.9vw, 40px);     /* avant le 1er et après le dernier argument */
  --acc-gap-argument: clamp(11px, 1.1vw, 14px);   /* entre deux arguments */
  --acc-gap-interne: 4px;                         /* titre vert / sa description */

  /* ----- Mise en page ----- */
  --acc-largeur-image: 56%;
  --acc-img-focus: center center;    /* zone conservée au recadrage, ex : center 35% */
  --acc-img-mini-ratio: 4 / 3;       /* ratio des miniatures */
  --acc-gouttiere: clamp(24px, 3vw, 56px);

  margin: clamp(30px, 4vw, 60px) 0 0;
  padding: 0;
}

.presentation-choco-pack *,
.presentation-choco-pack *::before,
.presentation-choco-pack *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   1. STRUCTURE
   ========================================================================== */

.presentation-choco-pack .container-choco-pack {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.presentation-choco-pack .row-choco-pack {
  display: flex;
  align-items: stretch;   /* égalise les deux hauteurs */
}

.presentation-choco-pack .col-image-choco-pack {
  flex: 0 0 var(--acc-largeur-image);
  max-width: var(--acc-largeur-image);
  min-width: 0;
  display: flex;
}

.presentation-choco-pack .col-texte-choco-pack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(10px, 1.4vw, 26px) 0 0 var(--acc-gouttiere);
  background-color: #fff;
}

/* ==========================================================================
   2. IMAGES
   ========================================================================== */

.presentation-choco-pack .images-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
}

.presentation-choco-pack .main-image-container {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(220px, 22vw, 400px);   /* garde-fou si le texte est court */
  overflow: hidden;
}

.presentation-choco-pack .main-image-container img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--acc-img-focus);
}

.presentation-choco-pack .thumbnails-container {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
}

.presentation-choco-pack .thumbnails-container img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  aspect-ratio: var(--acc-img-mini-ratio);
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   3. TITRE
   ========================================================================== */

.presentation-choco-pack h1 {
  font-family: var(--acc-font);
  font-size: var(--acc-titre-size);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-align: left;
  color: var(--acc-titre);
  margin: 0 0 clamp(14px, 1.4vw, 22px);
}

/* Filet vert sous le titre — supprimer ce bloc pour le retirer */
.presentation-choco-pack h1::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background: var(--acc-accent);
  margin: clamp(12px, 1.2vw, 18px) 0 0;
}

/* ==========================================================================
   4. TEXTE COURANT
   ========================================================================== */

.presentation-choco-pack p {
  font-family: var(--acc-font);
  font-size: var(--acc-texte-size);
  line-height: 1.75;
  color: var(--acc-texte);
  text-align: left;
  margin: 0 0 var(--acc-gap-p);
}

/* ==========================================================================
   5. LES TROIS ARGUMENTS
   ========================================================================== */

.presentation-choco-pack .feature-block {
  margin: 0;
  line-height: 1.4;
}

/* entre deux arguments : petit */
.presentation-choco-pack .feature-block + .feature-block {
  margin-top: var(--acc-gap-argument);
}

/* avant le premier : s'ajoute à la marge basse du paragraphe précédent */
.presentation-choco-pack p:not(.feature-block) + .feature-block {
  margin-top: clamp(14px, 1.5vw, 20px);
}

/* après le dernier : respiration identique à la première */
.presentation-choco-pack .feature-block + p:not(.feature-block) {
  margin-top: var(--acc-gap-groupe);
}

.presentation-choco-pack .feature-title {
  display: block;
  font-size: var(--acc-argument-size);
  line-height: 1.25;
  color: var(--acc-accent);
  margin: 0 0 var(--acc-gap-interne);
}

.presentation-choco-pack .feature-title strong {
  font-weight: 400;   /* sécurité si un <strong> traîne dans Everblock */
}

.presentation-choco-pack .feature-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.presentation-choco-pack .feature-title a:hover,
.presentation-choco-pack .feature-title a:focus {
  color: var(--acc-accent-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.presentation-choco-pack .feature-description {
  display: block;
  font-size: var(--acc-argument-desc);
  color: var(--acc-texte);
}

/* ==========================================================================
   6. SIGNATURE
   ========================================================================== */

.presentation-choco-pack .signature-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  margin-bottom: clamp(16px, 1.8vw, 26px);
  padding-top: clamp(8px, 1vw, 16px);
}

.presentation-choco-pack .signature-img {
  display: block;
  width: clamp(110px, 12vw, 170px);
  height: auto;
}

.presentation-choco-pack .signature-text {
  font-family: var(--acc-font);
  font-size: clamp(0.9rem, 0.92vw, 1rem);
  line-height: 1.45;
  color: var(--acc-texte);
}

/* ==========================================================================
   7. LIEN « DÉCOUVRIR NOTRE GAMME »
   ========================================================================== */

.presentation-choco-pack .btn-choco-pack {
  align-self: flex-start;
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;

  font-family: var(--acc-font);
  font-style: normal;
  font-weight: 400;
  font-size: var(--acc-cta-size);
  letter-spacing: 0.09em;

  color: var(--acc-accent);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 6px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.presentation-choco-pack .btn-choco-pack:hover,
.presentation-choco-pack .btn-choco-pack:focus {
  color: var(--acc-accent-hover);
  background: none;
  text-decoration: none;
}

.presentation-choco-pack .btn-choco-pack:focus-visible {
  outline: 2px solid var(--acc-accent-hover);
  outline-offset: 5px;
}

/* ==========================================================================
   8. ANIMATION D'APPARITION
   Les délais sont gérés ici, plus dans custom.js.
   ========================================================================== */

.presentation-choco-pack h1,
.presentation-choco-pack p,
.presentation-choco-pack .signature-container,
.presentation-choco-pack .btn-choco-pack,
.presentation-choco-pack .main-image-container img,
.presentation-choco-pack .thumbnails-container img {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.presentation-choco-pack.animate-in h1,
.presentation-choco-pack.animate-in p,
.presentation-choco-pack.animate-in .signature-container,
.presentation-choco-pack.animate-in .btn-choco-pack,
.presentation-choco-pack.animate-in .main-image-container img,
.presentation-choco-pack.animate-in .thumbnails-container img {
  opacity: 1;
  transform: translateY(0);
}

.presentation-choco-pack.animate-in .main-image-container img { transition-delay: 0.05s; }
.presentation-choco-pack.animate-in h1                        { transition-delay: 0.15s; }
.presentation-choco-pack.animate-in p                         { transition-delay: 0.25s; }
.presentation-choco-pack.animate-in .thumbnails-container img { transition-delay: 0.35s; }
.presentation-choco-pack.animate-in .signature-container      { transition-delay: 0.45s; }
.presentation-choco-pack.animate-in .btn-choco-pack           { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .presentation-choco-pack h1,
  .presentation-choco-pack p,
  .presentation-choco-pack .signature-container,
  .presentation-choco-pack .btn-choco-pack,
  .presentation-choco-pack .main-image-container img,
  .presentation-choco-pack .thumbnails-container img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* --- Tablette paysage : on resserre avant de casser --- */
@media (max-width: 1150px) {
  .presentation-choco-pack {
    --acc-largeur-image: 52%;
    --acc-gouttiere: clamp(18px, 2.4vw, 34px);
  }
}

/* --- Empilement : deux colonnes deviennent trop étroites en dessous --- */
@media (max-width: 1000px) {
  .presentation-choco-pack .row-choco-pack {
    flex-direction: column;
  }

  .presentation-choco-pack .col-image-choco-pack {
    order: 1;
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .presentation-choco-pack .col-texte-choco-pack {
    order: 2;
    align-items: center;
    padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 32px) 0;
  }

  /* L'image reprend son ratio naturel : plus rien à aligner */
  .presentation-choco-pack .main-image-container {
    position: static;
    min-height: 0;
    overflow: visible;
  }

  .presentation-choco-pack .main-image-container img {
    position: static;
    height: auto;
  }

  .presentation-choco-pack h1,
  .presentation-choco-pack p,
  .presentation-choco-pack .feature-title,
  .presentation-choco-pack .feature-description {
    text-align: center;
  }

  .presentation-choco-pack h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  .presentation-choco-pack .signature-container {
    align-items: center;
    margin-top: clamp(14px, 3vw, 24px);
  }

  .presentation-choco-pack .btn-choco-pack {
    align-self: center;
  }
}

/* --- Petit mobile : 3 miniatures en ligne deviennent trop étroites --- */
@media (max-width: 420px) {
  .presentation-choco-pack {
    --acc-img-mini-ratio: 1 / 1;
  }

  .presentation-choco-pack .thumbnails-container {
    gap: 6px;
  }
}
/* ==========================================================================
   Manrope — redéclaration sans .woff2. garde que .woff et .otf, qui sont bien présents.
   ========================================================================== */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200;
  src:url("/themes/classic/assets/css/1e81f33d197ccdb39d4e.woff") format("woff"),
      url("/themes/classic/assets/css/64041bf784575b30a79f.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:300;
  src:url("/themes/classic/assets/css/016d41b1da3f1f5aaa44.woff") format("woff"),
      url("/themes/classic/assets/css/4db1ea0d15010c761ee5.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:400;
  src:url("/themes/classic/assets/css/0f099f4e4d67aeb18ab6.woff") format("woff"),
      url("/themes/classic/assets/css/56b65c6bec8f40445da4.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:500;
  src:url("/themes/classic/assets/css/a8af1233a958bd1e96ed.woff") format("woff"),
      url("/themes/classic/assets/css/40ef5dc59db6eeef1694.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:600;
  src:url("/themes/classic/assets/css/c80d4fb11dcc2140b260.woff") format("woff"),
      url("/themes/classic/assets/css/fd2d932b381003546821.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:700;
  src:url("/themes/classic/assets/css/de69cd9e672c81725abc.woff") format("woff"),
      url("/themes/classic/assets/css/29acb3c63123183305b0.otf") format("truetype")}

@font-face{font-family:"Manrope";font-style:normal;font-weight:800;
  src:url("/themes/classic/assets/css/83131b9daba3e9a7b2c7.woff") format("woff"),
      url("/themes/classic/assets/css/057cc3c927dc0b2e8dbb.otf") format("truetype")}