@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');

/* =========================================================================
   En-tete Kroma - refonte a 3 bandeaux (cf. maquette validee)
   Bandeau 1 : displayNav1 (contact) / displayNav2 (langue, devise)
   Bandeau 2 : logo + displayTop (recherche, compte, panier)
   Bandeau 3 : displayNavFullWidth (menu categories illustre)
   ========================================================================= */

/* ---- Bandeau 1 : barre utilitaire ---- */
html body .header-top {
    background-color: #2b2420 !important;
    color: #f3ece1 !important;
    min-height: 40px !important;
}
html body .header-top a,
html body .header-top .header-top__left,
html body .header-top .header-top__right,
html body .header-top .material-icons {
    color: #f3ece1 !important;
}
html body .header-top .row {
    align-items: center !important;
    min-height: 40px !important;
}
html body .header-top__left {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
}
html body .header-top__right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 20px !important;
}

/* Selecteur de langue : on retire le carre blanc natif du <select>
   et on reprend la police de la maquette */
html body .header-top .js-language-selector {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #f3ece1 !important;
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
html body .header-top .js-language-selector option {
    color: #2b2420 !important;
}
html body .header-top .ps-languageselector {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 14px !important;
}
html body .header-top .ps-languageselector::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #f3ece1 !important;
    opacity: 0.6 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* Avis Trustpilot : lien statique (cote gauche de la barre utilitaire sur desktop,
   au-dessus de "Contactez-nous" dans le menu mobile). Meme gabarit qu'un lien de texte
   classique, pour rester a la meme largeur/taille que "Contactez-nous". */
html body .header-top__trustpilot,
html body #_mobile_ps_trustpilot {
    display: flex !important;
    align-items: center !important;
}
html body .header-top__trustpilot-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
html body .header-top__trustpilot-link:hover {
    text-decoration: underline !important;
}
html body .header-top__trustpilot-star {
    color: #00b67a !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Avis Trustpilot : version compacte casee dans l'espace vide a droite du
   bouton hamburger (en dessous de xl, le bloc .ps-mainmenu est force en
   width:100% pour le menu desktop mais ne contient que le hamburger). */
html body .ps-mainmenu__mobile-trustpilot {
    margin-left: auto !important;
    align-items: center !important;
    padding-right: 12px !important;
}
html body .ps-mainmenu__mobile-trustpilot-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    color: #2b2420 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
html body .ps-mainmenu__mobile-trustpilot-link:hover {
    text-decoration: underline !important;
}
html body .ps-mainmenu__mobile-trustpilot-star {
    color: #00b67a !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

/* ---- Bandeau 2 : logo / recherche / compte / panier ----
   Desktop (>=768px) : grille a 4 pistes, la recherche occupe la piste
   centrale flexible (1fr), ce qui la centre vraiment entre le logo et le
   bloc compte+panier, quelle que soit leur largeur. */
html body .header-bottom__row > * {
    padding: 0 !important;
}
@media (min-width: 768px) {
    html body .header-bottom__row {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto;
        align-items: center !important;
        column-gap: 20px !important;
        margin: 0 !important;
    }
    html body .header-bottom__logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        width: fit-content !important;
    }
    html body #_desktop_ps_searchbar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        width: 640px !important;
        margin: 0 auto !important;
    }
    html body #_desktop_ps_customersignin {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: fit-content !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    html body #_desktop_ps_shoppingcart {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: fit-content !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* Mobile (<768px) : logo a gauche, recherche + compte + panier groupes
   tout en haut a droite (meme ligne que le logo). */
@media (max-width: 767.98px) {
    html body .header-bottom__row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }
    html body .header-bottom__logo {
        margin: 0 !important;
        width: fit-content !important;
    }
    html body .header-bottom__row .ps-searchbar--mobile {
        margin-left: auto !important;
    }
    html body .header-bottom__row .ps-searchbar--mobile,
    html body .header-bottom__row #_mobile_ps_customersignin,
    html body .header-bottom__row #_mobile_ps_shoppingcart {
        flex: 0 0 auto !important;
    }
    /* Le composant compte/panier "desktop" reste dans le DOM une fois son
       contenu transfere vers la version mobile (cf. responsive-toggler.ts) :
       on le masque explicitement pour eviter tout debordement horizontal. */
    html body #_desktop_ps_customersignin,
    html body #_desktop_ps_shoppingcart {
        display: none !important;
    }
}

/* Compte et panier : icone au-dessus du libelle, centres, comme sur la maquette */
html body .header-bottom .header-block__action-btn,
html body .header-bottom .ps-customersignin .dropdown-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
    padding: 4px 12px !important;
}
html body .header-bottom .header-block__icon,
html body .header-bottom .dropdown-icon.header-block__icon {
    width: 36px !important;
    height: 36px !important;
}
html body .header-bottom .header-block__title {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

/* Compte : on retire la fleche de dropdown */
html body .header-bottom .ps-customersignin .dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Panier : le nombre devient une bulle rouge sur l'icone, plus de chiffre sous le libelle */
html body .header-bottom .header-block__icon-wrap {
    position: relative !important;
    display: inline-flex !important;
}
html body .header-bottom .header-block__badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background-color: #DD3238 !important;
    color: #fff !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
}

/* Style de la barre de recherche elle-meme */
html body #ps_searchbar {
    display: flex !important;
    width: 100% !important;
}
html body #ps_searchbar .ps-searchbar__form {
    width: 100% !important;
    position: relative !important;
}
html body #ps_searchbar .js-search-input {
    width: 100% !important;
    border-radius: 25px !important;
    height: 44px !important;
    padding-left: 20px !important;
    padding-right: 44px !important;
    background-color: #f3ece1 !important;
    border: 1px solid #e8ddcd !important;
}
html body #ps_searchbar .ps-searchbar__magnifier {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
}

/* ---- Bandeau 3 : menu categories illustre ---- */
html body .header-nav-full-width {
    background-color: #f3ece1 !important;
    border-top: 1px solid #e8ddcd;
    border-bottom: 1px solid #e8ddcd;
}
html body .header-nav-full-width .ps-mainmenu.ps-mainmenu--desktop {
    width: 100% !important;
}
/* Le menu deroulant (bouton "hamburger") ne s'affiche qu'en dessous de xl :
   on le colle a gauche plutot que centre, le menu categories restant
   centre a partir de xl. */
@media (min-width: 1200px) {
    html body .header-nav-full-width .ps-mainmenu.ps-mainmenu--desktop {
        justify-content: center !important;
    }
}
@media (max-width: 1199.98px) {
    html body .header-nav-full-width .ps-mainmenu.ps-mainmenu--desktop {
        justify-content: flex-start !important;
    }
    html body .header-nav-full-width .ps-mainmenu__mobile-toggle {
        padding-left: 12px !important;
    }
}
html body .ps-mainmenu__tree {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 1180px !important;
}
html body .ps-mainmenu__tree-link--icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 18px 10px !important;
    text-align: center !important;
    border-bottom: 2px solid transparent !important;
    color: #2b2420 !important;
}
html body .ps-mainmenu__tree-link--icon:hover {
    color: #DD3238 !important;
    border-bottom-color: #DD3238 !important;
}
html body .ps-mainmenu__tree-icon {
    display: block !important;
    height: 34px !important;
    width: auto !important;
    max-width: 48px !important;
    object-fit: contain !important;
}
html body .ps-mainmenu__tree-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Icones de categories dans le menu mobile (offcanvas), meme logique que le
   menu desktop ci-dessus : aide au reperage visuel rapide au pouce. */
html body .menu--mobile .menu__link--icon {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body .menu__link-icon {
    display: block !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    width: 24px !important;
    object-fit: contain !important;
}

/* =========================================================================
   Carrousel d'accueil (ps_imageslider) : par defaut le theme l'affiche en
   pleine largeur de l'ecran (full-bleed). On le recale sur la meme largeur
   que le reste du site (paliers identiques a .container), avec des bandes
   blanches sur les cotes au-dela de cette largeur.
   ========================================================================= */
.ps-imageslider {
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
    box-sizing: border-box !important;
}
@media (min-width: 576px)  { .ps-imageslider { max-width: 540px !important; } }
@media (min-width: 768px)  { .ps-imageslider { max-width: 720px !important; } }
@media (min-width: 992px)  { .ps-imageslider { max-width: 960px !important; } }
@media (min-width: 1200px) { .ps-imageslider { max-width: 1140px !important; } }
@media (min-width: 1400px) { .ps-imageslider { max-width: 1320px !important; } }

/* Sur tablette/mobile le theme force une hauteur fixe en pixels (320px/240px)
   qui ne correspond au ratio d'aucune image, d'ou du recadrage (cover) ou
   des bandes vides (contain). On remplace cette hauteur fixe par un ratio
   (2.4:1, meme ratio que les images recommandees : ~1920x800px) : l'image
   remplit alors sa boite a toute taille d'ecran, sans rognage ni bande vide. */
@media (max-width: 991.98px) {
    .ps-imageslider__figure {
        height: auto !important;
        aspect-ratio: 2.4 / 1 !important;
    }
    .ps-imageslider__figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

img[alt="logo"] {
    max-width: 200px !important;
    width: 100% !important;
    height: auto !important;
}

#content .product-cover img,
.js-qv-product img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Modification de la couleur du bouton Tout accepter */
div[id*="cookie"] button[class*="accept"],
div[class*="cookie"] button[class*="accept"],
div[id*="pp_"] button.btn-primary,
.pp-cookie-banner-container .btn-primary,
#pp_cookie_banner .btn-primary {
    background-color: #DC5A60 !important;
    background: #DC5A60 !important;
    border-color: #DC5A60 !important;
}

/* --- Ajustement taille icônes réassurance --- */
.blockreassurance .reassurance__image img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  margin-right: 4px;
}
.blockreassurance .reassurance {
  align-items: center;
}

/* --- Icônes menu compte --- */
.dropdown-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.header-block__icon.dropdown-icon {
  width: 24px;
  height: 24px;
}
/* Recolore l'icône Material "Retours produit" en rouge Kroma */
.ps-customersignin .dropdown-item:has(i.material-icons) i.material-icons {
  color: #DD3238;
}

/* =========================================================================
   Recolorisation globale : rouge Kroma (#DD3238) a la place du bleu Bootstrap
   Couvre les boutons (pleins + contour), les liens/textes, les cases a
   cocher/radios cochees et les etats "actif" des menus deroulants/listes.
   ========================================================================= */

/* Variables Bootstrap globales : entrainent automatiquement .text-primary,
   .bg-primary, .border-primary et la couleur des liens par defaut (<a>) */
:root,
[data-bs-theme=light] {
    --bs-blue: #DD3238 !important;
    --bs-primary: #DD3238 !important;
    --bs-primary-rgb: 221, 50, 56 !important;
    --bs-primary-text-emphasis: #DD3238 !important;
    --bs-primary-bg-subtle: #f8d6d7 !important;
    --bs-primary-border-subtle: #f1adaf !important;
    --bs-link-color: #DD3238 !important;
    --bs-link-color-rgb: 221, 50, 56 !important;
    --bs-link-hover-color: #b1282d !important;
    --bs-link-hover-color-rgb: 177, 40, 45 !important;
    --bs-focus-ring-color: rgba(221, 50, 56, .25) !important;
}

/* Boutons pleins (ex : Ajouter au panier, Envoyer...) */
html body .btn-primary {
    --bs-btn-bg: #DD3238 !important;
    --bs-btn-border-color: #DD3238 !important;
    --bs-btn-hover-bg: #bc2b30 !important;
    --bs-btn-hover-border-color: #b1282d !important;
    --bs-btn-active-bg: #b1282d !important;
    --bs-btn-active-border-color: #a6262a !important;
    --bs-btn-disabled-bg: #DD3238 !important;
    --bs-btn-disabled-border-color: #DD3238 !important;
    --bs-btn-focus-shadow-rgb: 221, 50, 56 !important;
    background-color: #DD3238 !important;
    border-color: #DD3238 !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus {
    background-color: #bc2b30 !important;
    border-color: #b1282d !important;
}
html body .btn-primary:active,
html body .btn-primary.active {
    background-color: #b1282d !important;
    border-color: #a6262a !important;
}

/* Boutons contour */
html body .btn-outline-primary {
    --bs-btn-color: #DD3238 !important;
    --bs-btn-border-color: #DD3238 !important;
    --bs-btn-hover-bg: #DD3238 !important;
    --bs-btn-hover-border-color: #DD3238 !important;
    --bs-btn-active-bg: #DD3238 !important;
    --bs-btn-active-border-color: #DD3238 !important;
    --bs-btn-disabled-color: #DD3238 !important;
    --bs-btn-disabled-border-color: #DD3238 !important;
    --bs-btn-focus-shadow-rgb: 221, 50, 56 !important;
    color: #DD3238 !important;
    border-color: #DD3238 !important;
}
html body .btn-outline-primary:hover,
html body .btn-outline-primary:active {
    background-color: #DD3238 !important;
    border-color: #DD3238 !important;
    color: #fff !important;
}

/* Cases a cocher / radios cochees (ex : consentement newsletter, CGV) */
html body .form-check-input:checked,
html body .form-check-input[type="checkbox"]:indeterminate {
    background-color: #DD3238 !important;
    border-color: #DD3238 !important;
}
html body .form-control:focus,
html body .form-select:focus,
html body .form-check-input:focus {
    border-color: #ee999c !important;
    box-shadow: 0 0 0 .25rem rgba(221, 50, 56, .25) !important;
}

/* Elements actifs des menus deroulants / listes / onglets */
html body .dropdown-menu {
    --bs-dropdown-link-active-bg: #DD3238 !important;
}
html body .list-group {
    --bs-list-group-active-bg: #DD3238 !important;
    --bs-list-group-active-border-color: #DD3238 !important;
}
html body .nav-pills {
    --bs-nav-pills-link-active-bg: #DD3238 !important;
}