/* =====================================================
   KARIO — CSS PRINCIPAL
   Factorisation : variables étendues, sélecteurs groupés,
   règles communes auth/password/registration fusionnées.
   ===================================================== */

/* ── Polices ── */

@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Moderat';
    src: url('../fonts/Moderat Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ── Variables globales ── */

:root {
    /* Couleurs */
    --color-beige: #F5EDD6;
    --color-noir: #000000;
    --color-gris: #222;
    --color-noir-hover: #333;

    /* Layout */
    --grid-gap: 22px;
    --border: 1px solid var(--color-noir);
    --max-content-width: 2000px;
    --body-side-padding: 0px;
    --header-height: 60px;
    --col-left: calc(50% - var(--grid-gap) / 2);
    --col-right: calc(50% + var(--grid-gap) / 2);

    /* Carousel */
    --carousel-card-w: 406px; /* fallback — valeur injectée dynamiquement par JS */
    --carousel-margin: min(8vw, calc(var(--col-left) - var(--carousel-card-w) - 250px));

    /* Transitions réutilisées */
    --ease-main: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-nav: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-nav: background-color 0.5s var(--ease-nav), color 0.5s var(--ease-nav);

    /* Typographie */
    --font-main: 'Moderat', sans-serif;
}

/* ── Classes typo utilitaires ── */

.txt-titre, .elementor-heading-title {
    font-family: var(--font-main) !important;
    font-size: 58px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
}

.txt-sous-titre {
    font-family: var(--font-main) !important;
    font-size: clamp(24px, 1vw, 28px) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.txt-texte {
    font-family: var(--font-main);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}


.breadcrumb {
    display: none !important;
}

/* ── Base ── */

* { box-sizing: border-box; }

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--color-noir) var(--color-beige);
}
html::-webkit-scrollbar        { width: 6px; }
html::-webkit-scrollbar-track  { background: var(--color-beige); }
html::-webkit-scrollbar-thumb  { background-color: var(--color-noir); }

body {
    background-color: var(--color-beige) !important;
    color: var(--color-noir) !important;
    font-family: var(--font-main) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}

p   { line-height: 1.2 !important; }

a:hover,
a:active { color: var(--color-noir); }

#main section { background-color: var(--color-beige) !important; }

/* ── Suppression des overrides de layout Bootstrap / PrestaShop ── */

.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#content-wrapper,
#js-content-wrapper,
#main,
#content,
.page-content,
.page-footer,
footer {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

#wrapper,
section#wrapper {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.card-block { padding: 0 !important; }

#main {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Header ── */

#header,
#header *,
#header .header-top,
.header-inner,
.header-logo,
.header-nav-desktop {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: transparent;
    border: none;
}

#header .header-top {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0;
    background-color: var(--color-beige) !important;
}

.header-inner {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    background-color: transparent;
    align-items: end;
}

.header-logo {
    position: fixed;
    top: 0;
    left: var(--body-side-padding);
    width: calc(var(--col-left) - var(--body-side-padding));
    right: auto;
    margin-right: 0;
    padding: 0 var(--grid-gap);
    background-color: var(--color-beige);
    z-index: 100000;
    border-right: var(--border);
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.header-logo a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.header-logo img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: top left;
    transition: opacity 0.3s ease;
}

.header-logo .logo-full {
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.header-logo .logo-sticky {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Pages internes : logo sticky uniquement */
body:not(.page-index) .header-logo .logo-full {
    opacity: 0;
    pointer-events: none;
}
body:not(.page-index) .header-logo .logo-sticky {
    opacity: 1;
    pointer-events: auto;
}

/* Home : logo full par défaut */
body.page-index .header-logo .logo-full {
    opacity: 1;
    pointer-events: auto;
}
body.page-index .header-logo .logo-sticky {
    opacity: 0;
    pointer-events: none;
}

/* Home sticky */
body.page-index .header-logo.is-sticky .logo-full {
    opacity: 0;
    pointer-events: none;
}
body.page-index .header-logo.is-sticky .logo-sticky {
    opacity: 1;
    pointer-events: auto;
}

.header-logo.is-sticky.has-border { border-bottom: var(--border); }

.header-nav-desktop {
    display: flex;
    align-items: stretch;
    height: var(--header-height);
    background-color: var(--color-beige);
    border-bottom: var(--border);
    grid-column: 2;
}

.header-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-menu li { border-right: var(--border); }

.header-nav-menu li:nth-child(1) { width: 110px; flex-shrink: 0; }
.header-nav-menu li:nth-child(2) { width: 156px; flex-shrink: 0; }
.header-nav-menu li:nth-child(3) { width: 141px; flex-shrink: 0; }

.header-nav-menu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 0 var(--grid-gap);
    font-family: var(--font-main);
    font-size: clamp(18px, 1.2vw, 20px);
    font-weight: 400;
    color: var(--color-noir);
    text-decoration: none;
    text-transform: none;
    transition: var(--transition-nav);
}

.header-nav-menu li a:hover,
.header-nav-menu li.current > a {
    background-color: var(--color-noir);
    color: var(--color-beige) !important;
}

/* Icônes header */
.header-nav-account .icon-auth,
.header-nav-cart .icon-cart {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.header-nav-account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    margin-left: auto;
    text-decoration: none;
    border-left: var(--border);
    align-self: flex-end;
    transition: var(--transition-nav);
}

#header .header-nav-account,
#header .header-nav-account:visited,
#header .header-nav-account:link {
    color: var(--color-noir) !important;
}

.header-nav-account:hover,
.header-nav-account.active,
#header .header-nav-account:hover,
#header .header-nav-account.active {
    background-color: var(--color-noir);
    color: var(--color-beige) !important;
}

#header .header-nav-account:hover,
#header .header-nav-account:hover:visited,
#header .header-nav-account.active,
#header .header-nav-account.active:visited {
    color: var(--color-beige) !important;
}

/* Cart header */
.header-nav-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60px;
    height: 60px;
    padding: 0;
    background-color: var(--color-noir);
    color: var(--color-beige) !important;
    text-decoration: none;
    align-self: flex-end;
    transition: background-color 0.5s var(--ease-nav);
}

#header .header-nav-cart,
#header .header-nav-cart:link,
#header .header-nav-cart:visited,
#header .header-nav-cart:hover,
#header .header-nav-cart:focus,
.header-nav-cart:visited,
.header-nav-cart:hover,
.header-nav-cart:focus {
    color: var(--color-beige) !important;
}

.header-nav-cart:hover { background-color: var(--color-noir-hover); }

/* Boutons dropdown panier */
#header .cart-dropdown-btn--secondary,
#header .cart-dropdown-btn--secondary:link,
#header .cart-dropdown-btn--secondary:visited {
    color: var(--color-noir) !important;
}
#header .cart-dropdown-btn--secondary:hover { color: var(--color-beige) !important; }

#header .cart-dropdown-btn--primary,
#header .cart-dropdown-btn--primary:link,
#header .cart-dropdown-btn--primary:visited,
#header .cart-dropdown-btn--primary:hover {
    color: var(--color-beige) !important;
}

/* ── Logo hero ── */

/* Masque le logo pendant que le JS calcule sa position initiale */
.js-preload #hero-logo {
    opacity: 0 !important;
    transition: none !important;
    border-left: var(--border) !important;
}

.js-preload #hero-logo *,
.js-preload .header-logo img,
.js-preload .header-logo .logo-full,
.js-preload .header-logo .logo-sticky {
    transition: none !important;
}

@keyframes logo-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#hero-logo {
    animation: logo-reveal 0.4s ease forwards;
    border-left: var(--border) !important;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #hero-logo { animation: none; }
    #hero-logo,
    #hero-logo img { will-change: auto !important; transition: none !important; }
}

/* ── Cart badge ── */

.cart-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px 2px 3px;
    border-radius: 50px;
    background-color: var(--color-beige);
    color: var(--color-noir);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    transition: transform 0.2s var(--ease-bounce);
}

.cart-badge.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-badge.bump { transform: scale(1.4); }

.cart-badge--mobile {
    position: static;
    margin-left: 8px;
}

/* ── Cart dropdown ── */

.cart-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    width: 300px;
    background-color: var(--color-beige);
    border: var(--border);
    z-index: 9998;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s var(--ease-bounce);
    pointer-events: none;
}

.cart-dropdown.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cart-dropdown-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-noir) transparent;
}

.cart-dropdown-list::-webkit-scrollbar       { width: 4px; }
.cart-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.cart-dropdown-list::-webkit-scrollbar-thumb { background-color: var(--color-noir); }

.cart-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cart-dropdown-item:last-child { border-bottom: none; }

.cart-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Typographie partagée dans le dropdown */
.cart-dropdown-item-name,
.cart-dropdown-item-price,
.cart-qty-value,
.cart-dropdown-empty,
.cart-dropdown-item-rupture,
.cart-dropdown-total,
.cart-dropdown-btn {
    font-family: var(--font-main);
    color: var(--color-noir);
}

.cart-dropdown-item-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.cart-dropdown-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--color-noir);
    color: var(--color-noir);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.cart-qty-btn:hover:not(:disabled) {
    background-color: var(--color-noir);
    color: var(--color-beige);
}

.cart-qty-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.cart-qty-value {
    font-size: 13px;
    font-weight: 500;
    min-width: 16px;
    text-align: center;
}

.cart-dropdown-item-price {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.cart-dropdown-empty {
    font-size: 13px;
    opacity: 0.6;
    padding: 16px 18px;
    margin: 0;
}

.cart-dropdown-item--unavailable { opacity: 0.6; }

.cart-dropdown-item-rupture {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.cart-dropdown-footer {
    border-top: var(--border);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-dropdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.cart-dropdown-total-price { font-weight: 700; }

.cart-dropdown-actions {
    display: flex;
    gap: 8px;
}

.cart-dropdown-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart-dropdown-btn--secondary {
    background-color: transparent;
    border: var(--border);
    color: var(--color-noir);
}

.cart-dropdown-btn--secondary:hover {
    background-color: var(--color-noir);
    color: var(--color-beige);
}

.cart-dropdown-btn--primary {
    background-color: var(--color-noir);
    color: var(--color-beige);
}

.cart-dropdown-btn--primary:hover {
    background-color: var(--color-noir-hover);
    color: var(--color-beige);
}

/* ── Hamburger / Menu mobile ── */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--header-height);
    height: var(--header-height);
    background: var(--color-noir);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-beige);
}

.mobile-panel {
    position: fixed !important;
    top: var(--header-height) !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    min-width: 300px !important;
    height: calc(100vh - var(--header-height)) !important;
    background-color: var(--color-beige) !important;
    border-left: var(--border) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.7s var(--ease-nav) !important;
}

.mobile-panel.is-open { transform: translateX(0) !important; }

#_mobile_top_menu { width: 100% !important; }

#_mobile_top_menu #top-menu,
#_mobile_top_menu .top-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#_mobile_top_menu #top-menu > li,
#_mobile_top_menu .top-menu > li {
    border-bottom: var(--border) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

#_mobile_top_menu #top-menu > li > a,
#_mobile_top_menu .top-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 18px 20px !important;
    font-size: clamp(18px, 1.2vw, 20px) !important;
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
    text-decoration: none !important;
    text-transform: none !important;
    background-color: var(--color-beige) !important;
    box-sizing: border-box !important;
    transition: var(--transition-nav) !important;
}

#_mobile_top_menu #top-menu > li > a:hover,
#_mobile_top_menu .top-menu > li > a:hover {
    background-color: var(--color-noir-hover) !important;
    color: var(--color-beige) !important;
}

#_mobile_top_menu .clearfix { display: none !important; }

#_mobile_actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: auto !important;
}

#_mobile_actions #_desktop_user_info,
#_mobile_actions #_mobile_user_info_clone {
    height: auto !important;
    border-bottom: var(--border) !important;
    border-top: var(--border) !important;
    border-left: none !important;
    display: block !important;
}

#_mobile_actions #_desktop_user_info .user-info a,
#_mobile_actions #_mobile_user_info_clone .user-info a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 18px 20px !important;
    font-size: clamp(18px, 1.2vw, 20px) !important;
    color: var(--color-noir) !important;
    text-decoration: none !important;
    text-transform: none !important;
    background-color: var(--color-beige) !important;
    width: 100% !important;
    transition: var(--transition-nav) !important;
}

#_mobile_actions #_desktop_user_info .user-info a:hover,
#_mobile_actions #_mobile_user_info_clone .user-info a:hover {
    background-color: var(--color-noir-hover) !important;
    color: var(--color-beige) !important;
}

#_mobile_actions #_desktop_user_info .user-info a span,
#_mobile_actions #_mobile_user_info_clone .user-info a span {
    display: inline !important;
}

#_mobile_actions #_desktop_cart,
#_mobile_actions #_mobile_cart_clone {
    border-bottom: var(--border) !important;
    display: block !important;
}

#_mobile_actions #_desktop_cart .blockcart,
#_mobile_actions #_mobile_cart_clone .blockcart {
    background-color: var(--color-noir) !important;
    padding: 18px 20px !important;
    width: 100% !important;
    display: block !important;
}

#_mobile_actions #_desktop_cart .blockcart .header,
#_mobile_actions #_mobile_cart_clone .blockcart .header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: clamp(18px, 1.2vw, 20px) !important;
    color: var(--color-beige) !important;
    text-transform: none !important;
}

#_mobile_actions #_desktop_cart .blockcart .header span,
#_mobile_actions #_mobile_cart_clone .blockcart .header span {
    display: inline !important;
    color: var(--color-beige) !important;
}

/* ── Homepage ── */

.homepage-content {
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    border-bottom: var(--border);
}

/* ── Hero section ── */

.hero-section {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.hero-section,
.hero-section * { color: var(--color-noir); }

.hero-nav-space {
    height: var(--header-height);
    flex-shrink: 0;
}

.hero-left {
    display: flex;
    flex-direction: column;
    border-right: var(--border);
    height: 100%;
    overflow: hidden;
}

.hero-tagline {
    padding: var(--grid-gap);
    margin: auto 0 0;
    flex-shrink: 0;
}

.hero-image-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    flex-shrink: 1;
    flex-grow: 0;
    overflow: hidden;
}

.hero-image-main {
    overflow: hidden;
    padding: 0 var(--grid-gap) var(--grid-gap) var(--grid-gap);
    display: flex;
    min-height: 0;
    flex-shrink: 1;
    flex-grow: 0;
}

.hero-image-main img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
}

.hero-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.hero-description-main {
    padding: var(--grid-gap) 0 var(--grid-gap) var(--grid-gap);
    flex-shrink: 0;
    width: calc(100% - 100px);
}

.hero-description-main p {
    line-height: 1.5;
    margin: 0;
}

.hero-description-main a {
    color: var(--color-noir);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-description-main a:hover { text-decoration-thickness: 2px; }

.hero-middle-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.hero-product-title {
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-product-title h3 {
    line-height: 1.2;
    margin: 0;
}

.hero-product-description {
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-product-description-line {
    border-bottom: var(--border);
    margin-bottom: var(--grid-gap);
}

.hero-product-description p {
    line-height: 1.6;
    margin: 0;
}

.hero-images-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: var(--border);
    flex-shrink: 0;
    padding: var(--grid-gap);
    gap: var(--grid-gap);
}

.hero-img-wrapper { width: 100%; }

.hero-images-bottom img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.txt-side-hero {
    font-weight: 700 !important;
    margin: 0;
}

/* ── Marquee ── */

.marquee-section {
    width: 100%;
    overflow: hidden;
    background-color: var(--color-beige);
    border-top: var(--border);
    border-bottom: var(--border);
}

.marquee-container {
    overflow: hidden;
    height: calc(100vh / 6);
    padding: 0;
    display: flex;
    align-items: center;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    flex-shrink: 0;
}

.marquee-content span {
    font-family: var(--font-main);
    text-transform: lowercase;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.marquee-content span::before {
    content: '•';
    margin: 0 30px;
    position: relative;
    top: 2px;
}

.marquee-content:not(.marquee-clone) span:first-child::before { content: none; }

@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ── Carousel ── */

.section-carousel {
    width: 100%;
    border-bottom: var(--border);
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--color-beige);
}

.carousel-wrapper {
    display: grid;
    grid-template-columns: var(--carousel-margin) calc(var(--col-left) - var(--carousel-margin) - var(--carousel-card-w) - 1px) var(--carousel-card-w) 1fr;
    min-height: calc(100vh * 5 / 6 - var(--header-height));
    overflow: hidden;
}

.carousel-sidebar {
    flex-shrink: 0;
    border-left: var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.carousel-sidebar-top {
    flex: 1;
    padding: var(--grid-gap) var(--grid-gap) 0 var(--grid-gap);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.carousel-sidebar-bottom {
    padding: var(--grid-gap) var(--grid-gap) 36px var(--grid-gap);
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.carousel-sidebar-title {
    line-height: 1.15;
    margin: auto 0 10% 0;
    color: var(--color-noir);
}

.carousel-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--border);
}

.carousel-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--grid-gap) 8px 0;
    border-bottom: var(--border);
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    color: var(--color-noir);
    user-select: none;
    transition: background-color 0.5s var(--ease-nav),
    padding      0.5s var(--ease-nav),
    color        0.5s var(--ease-nav);
}

.carousel-nav-item span:not(.nav-icon) { pointer-events: none; }

.nav-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    pointer-events: none;
}

.nav-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    display: block;
    transition: opacity   0.4s var(--ease-nav),
    transform 0.4s var(--ease-nav);
}

.icon-arrow { opacity: 1; transform: rotate(0deg); }
.icon-close { opacity: 0; transform: rotate(-45deg); }

.carousel-nav-item.is-clicked {
    background-color: var(--color-noir);
    color: var(--color-beige);
    padding-left: var(--grid-gap) !important;
}

.carousel-nav-item.is-clicked span:not(.nav-icon),
.carousel-nav-item.is-clicked .nav-icon svg path {
    color: var(--color-beige);
    stroke: var(--color-beige);
}

.carousel-nav-item.is-clicked .icon-arrow { opacity: 0; transform: rotate(45deg); }
.carousel-nav-item.is-clicked .icon-close { opacity: 1; transform: rotate(0deg); }

.carousel-nav-item:hover:not(.is-clicked) {
    padding-left: 6px;
}

.sidebar-accordion {
    overflow: hidden;
    height: 0;
    border-bottom: var(--border);
}

.sidebar-accordion-list {
    list-style: none;
    margin: 0;
    padding: 10px 0 15px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-accordion-list li {
    font-family: var(--font-main);
    color: var(--color-noir);
    line-height: 1.2;
}

.sidebar-accordion-list li::before {
    content: '• ' !important;
    font-weight: 700 !important;
}

.carousel-sidebar-link {
    font-family: var(--font-main);
    color: var(--color-noir);
    text-decoration: none;
    display: inline-block;
    text-underline-offset: 4px;
    transition: transform 0.2s ease-out, text-decoration-color 0.2s ease-out;
}

.carousel-sidebar-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-noir);
    transform: translateX(6px);
}

.carousel-products-area {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    grid-column: 3 / -1;
}

/* Hint scroll carousel */
.carousel-hint {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000 !important;
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: default;
    user-select: none;
    z-index: 999;
    animation: hint-pulse 3s ease-in-out infinite;
    transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
    background: rgba(245, 237, 214, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.carousel-hint svg              { display: block !important; width: 30px !important; height: 30px !important; overflow: visible !important; }
.carousel-hint svg path         { stroke: #000 !important; opacity: 0.7 !important; transition: stroke 0.2s ease; }
.carousel-hint.is-hidden        { opacity: 0 !important; pointer-events: none !important; animation: none !important; }

@keyframes hint-pulse {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%       { transform: translateY(-50%) translateX(8px); }
}

@media (max-width: 1400px) {
    .carousel-hint { display: flex !important; }
}

/* Viewport / track */
.carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    border-left: var(--border);
    transition: opacity 0.05s ease;
}

.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.carousel-track {
    display: flex;
    height: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* Cards */
.carousel-card {
    flex: 0 0 var(--carousel-card-w);
    width: var(--carousel-card-w);
    min-width: 250px;
    border-right: var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    cursor: pointer;
    transition: opacity 0.4s ease;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.carousel-card:last-child {
    margin-right: calc(92vw - 3 * var(--carousel-card-w) - var(--grid-gap) / 2);
}

.carousel-card-img {
    flex: 1;
    overflow: hidden;
    padding: 0;
    min-height: 0;
}

.carousel-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    font-size: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-card:hover .carousel-card-img img       { transform: scale(1.06); }
.carousel-card.is-dimmed:hover .carousel-card-img img { transform: scale(1) !important; }
.carousel-card.is-focused .carousel-card-img img  { transform: scale(1.06); }

.carousel-card-body {
    border-top: var(--border);
    display: flex;
    flex-direction: column;
}

.carousel-card-name,
.carousel-card-tags {
    padding-right: var(--grid-gap);
    padding-left: var(--grid-gap);
}

h3.carousel-card-name,
.carousel-card-body h3,
.carousel-card-name {
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center;
    border-bottom: var(--border);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    white-space: nowrap;
}

.carousel-card-tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0px;
    padding-top: 10px;
    padding-bottom: 12px;
    text-align: center;
}

.carousel-card-tags span {
    font-family: var(--font-main);
    color: var(--color-noir);
    line-height: 1.1;
    text-align: center;
}

.carousel-card-tags span::before {
    content: '' !important;
}

.carousel-card-footer {
    display: flex;
    align-items: stretch;
    border-top: var(--border);
}

.carousel-card-info { display: none; }

.carousel-card-info:hover {
    background-color: var(--color-noir);
    color: var(--color-beige);
}

.carousel-card-price {
    font-family: var(--font-main);
    text-align: center;
    padding: 6px var(--grid-gap);
}

.carousel-card-btn {
    display: block;
    padding: 3px var(--grid-gap) 6px;
    background-color: var(--color-noir);
    color: var(--color-beige);
    font-family: var(--font-main);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    flex: 1;
    text-align: center;
    transition: background-color 0.5s var(--ease-nav);
    border: none;
    cursor: pointer;
    font-size: inherit;
}

.carousel-card-btn:hover         { background-color: var(--color-noir-hover); color: var(--color-beige); }
.carousel-card-btn:disabled      { opacity: 0.5; cursor: not-allowed; background-color: var(--color-gris); }
.carousel-card-btn:disabled:hover{ background-color: var(--color-gris); }

.carousel-card-btn .btn-icon-add { display: none; flex-shrink: 0; }

/* States */
.carousel-card.is-hidden  { display: none; }
.carousel-card.is-dimmed { opacity: 0.25; }

.carousel-card.is-dimmed .carousel-card-img img { transform: scale(1) !important; }

.carousel-card.is-solo {
    flex: 0 0 var(--carousel-card-w);
    width: var(--carousel-card-w);
    border-right: var(--border);
}

/* Toast indisponible */
.toast-unavailable {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background-color: var(--color-noir);
    color: var(--color-beige);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    border: var(--border);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-bounce);
    pointer-events: none;
}

.toast-unavailable.is-visible { opacity: 1; transform: translateY(0); }
.toast-unavailable.is-hiding  { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }

/* Accordion carousel */
#carousel-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s var(--ease-nav);
}

#carousel-accordion.is-open {
    max-height: 400px;
    border-top: var(--border);
}

.accordion-inner {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
}

.accordion-product-name {
    font-family: var(--font-main);
    margin: 0;
    padding: var(--grid-gap);
    border-right: var(--border);
    color: var(--color-noir);
}

.accordion-ingredients {
    list-style: none;
    margin: 0;
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.accordion-ingredients li {
    font-family: var(--font-main);
    color: var(--color-noir);
    line-height: 1.2;
}

.accordion-ingredients li::before {
    content: '• ' !important;
    font-weight: 700 !important;
}

/* ── Section Wellbeing ── */

.section-wellbeing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    width: 100%;
    padding: 4%;
    box-sizing: border-box;
}

.wb-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.wb-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wb-content {
    position: absolute;
    bottom: var(--grid-gap);
    right: var(--grid-gap);
    color: var(--color-beige) !important;
    max-width: 30%;
}

.wb-content h4 {
    line-height: 1.1;
    padding-bottom: var(--grid-gap);
    padding-top: var(--grid-gap);
    border-bottom: solid 1px var(--color-beige);
}

.wb-content p {
    margin-bottom: var(--grid-gap);
    margin-top: var(--grid-gap);
    line-height: 1.4;
    color: var(--color-beige);
}

.wb-btn {
    display: inline-block;
    padding: 2px 5px 5px 5px;
    font-family: var(--font-main);
    text-transform: lowercase;
    background-color: var(--color-beige);
    color: var(--color-noir);
    text-decoration: none;
    transition: var(--transition-nav);
}

.wb-btn:hover {
    background-color: var(--color-noir);
    color: var(--color-beige);
}

/* ── Section Ingrédients ── */

.section-ingredients {
    width: 100%;
    padding: 4% 10% 6% 10%;
    border-top: var(--border);
}

.ingredients-grid {
    display: grid;
    grid-template-columns: calc(var(--col-left) + 115px) calc(var(--col-right) - 115px);
}

.ingredients-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    gap: var(--grid-gap);
}

.ingredients-photos-stack {
    display: flex;
    flex-direction: column;
}

.ingredients-photo-item {
    flex: 1;
    overflow: hidden;
}

.ingredients-photo-item:first-child { margin-bottom: calc(var(--grid-gap) / 2); }
.ingredients-photo-item:nth-child(2) { margin-top: calc(var(--grid-gap) / 2); }

.ingredients-photo-item img,
.ingredients-photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ingredients-photo-main { overflow: hidden; }

.ingredients-col-right {
    padding: 0 var(--grid-gap);
    display: flex;
    align-items: center;
}

.ingredients-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ingredients-title {
    line-height: 1.1;
    margin: 0 0 8% 0;
}

.ingredients-table {
    width: 100%;
    margin-bottom: 25px;
}

.ingredients-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gap);
}

.ingredients-row--header {
    grid-template-columns: 1fr;
    column-gap: 0;
    border-top: var(--border);
}

.ingredients-row span {
    font-family: var(--font-main);
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    border-bottom: var(--border);
    padding: 8px 0;
}

.ingredients-link {
    font-family: var(--font-main);
    color: var(--color-noir);
    text-decoration: none;
    display: inline-block;
    margin-top: auto;
    text-underline-offset: 4px;
    transition: transform 0.2s ease-out;
}

.ingredients-link:hover {
    text-decoration: underline;
    transform: translateX(6px);
}

/* ── Section Histoire ── */

.section-history {
    width: 100%;
    border-top: var(--border);
}

.history-grid {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    min-height: 500px;
}

.history-col-left {
    padding: var(--grid-gap) 0 var(--grid-gap) var(--grid-gap);
    display: flex;
    flex-direction: column;
}

.history-title {
    line-height: 1.1;
    margin: 0 0 var(--grid-gap) 0;
}

.history-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    margin-top: auto;
}

.history-img {
    overflow: hidden;
}

.history-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.history-col-right {
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
}

.history-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.history-text    { margin-top: auto; }
.history-intro   { color: var(--color-noir) !important; }

.history-text p {
    font-family: var(--font-main);
    font-weight: 400;
    color: var(--color-noir) !important;
    padding: var(--grid-gap) 0 0 var(--grid-gap);
    border-top: 1px solid var(--color-noir);
    width: 70%;
    margin-top: auto;
    margin-left: auto;
}

.history-text p:last-child { margin-bottom: 0; }

/* ── Media queries — desktop large ── */

@media (min-width: 1401px) {
    .header-nav-desktop { display: flex !important; }
    .hamburger          { display: none !important; }
    .mobile-panel       { display: none !important; }
    .wb-content .txt-texte { font-size: 28px !important; }
}

@media (min-width: 1401px) and (max-height: 725px) {
    .hero-section { height: auto; max-height: none; overflow: visible; }
    .hero-left,
    .hero-right   { height: auto; overflow: visible; }
    .hero-image-main { height: 300px; flex-grow: 0; }
}

@media (min-width: 2061px) {
    :root {
        --body-side-padding: max(80px, calc((100vw - var(--max-content-width)) / 2));
    }
    body {
        padding-left: var(--body-side-padding) !important;
        padding-right: var(--body-side-padding) !important;
    }
    .homepage-content  { border-left: var(--border); border-right: var(--border); }
    .hero-section      { border: none !important; }
    .header-nav-desktop{ width: calc(100% - 5px); }
    #hero-logo         { border-left: var(--border) !important; }
    #footer            { border-left: var(--border) !important; border-right: var(--border) !important; }
}

/* ── Lenis scroll ── */

@media (min-width: 1401px) {
    html.lenis                               { height: auto; }
    .lenis.lenis-smooth                      { scroll-behavior: auto; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped                     { overflow: hidden; }
    .lenis.lenis-scrolling iframe            { pointer-events: none; }
    #hero-logo,
    #hero-logo img {
        will-change: transform, height;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

@media (max-width: 1400px) {
    html.lenis     { height: auto !important; overflow: auto !important; }
    #hero-logo,
    #hero-logo img { will-change: auto !important; }
}

/* ── Media queries — tablette (768–1400px) ── */

@media (min-width: 768px) and (max-width: 1400px) {
    :root { --carousel-card-w: calc(var(--col-left) - 250px); } /* tablette */

    .header-inner {
        display: grid !important;
        grid-template-columns: var(--col-left) var(--col-right) !important;
        height: var(--header-height) !important;
        background-color: transparent !important;
    }

    .header-logo {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: var(--col-left) !important;
        padding: 15px var(--grid-gap) !important;
        height: var(--header-height) !important;
        background-color: var(--color-beige) !important;
        border-right: var(--border) !important;
        border-bottom: var(--border) !important;
        display: flex !important;
        align-items: center !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    .header-logo img { width: auto !important; height: 30px !important; transform: none !important; }

    .header-nav-desktop {
        display: flex !important;
        align-items: stretch !important;
        height: var(--header-height) !important;
        background-color: var(--color-beige) !important;
        border-bottom: var(--border) !important;
        grid-column: 2 !important;
    }

    .header-nav-desktop .header-nav-menu,
    .header-nav-desktop .header-nav-account,
    .header-nav-desktop .header-nav-cart { display: none !important; }

    #_mobile_actions .header-nav-account,
    #_mobile_actions .header-nav-cart    { display: flex !important; }
    #_mobile_actions .blockcart          { display: block !important; }
    #_mobile_top_menu .header-nav-menu,
    #_mobile_top_menu .top-menu          { display: flex !important; }

    .hamburger {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        border-left: var(--border) !important;
        border-bottom: var(--border) !important;
        z-index: 10000 !important;
    }

    .carousel-wrapper { grid-template-columns: 0 250px calc(var(--col-left) - 250px) 1fr !important; }

    .wb-content {
        max-width: 75% !important;
        position: absolute;
        left: var(--grid-gap) !important;
        bottom: var(--grid-gap) !important;
    }

    .wb-card img { filter: brightness(0.6); }
    .wb-card h4  { width: 80%; }

    .carousel-card:last-child {
        margin-right: calc(100vw - var(--col-left) - var(--carousel-card-w)) !important;
    }

    .hero-product-title  { display: none !important; }
    .hero-middle-section { grid-template-columns: 1fr !important; }

    .hero-section {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .hero-left,
    .hero-right {
        height: auto !important;
        min-height: calc(100vh - var(--header-height)) !important;
        overflow: visible !important;
    }

    .hero-image-main img { max-height: 60vh !important; }

    .ingredients-photos-stack { display: none !important; }
    .ingredients-photos       { grid-template-columns: 1fr !important; }

    .ingredients-grid {
        grid-template-columns: calc(var(--col-right) - 115px) calc(var(--col-left) + 115px) !important;
    }

    .history-col-right { justify-content: space-between !important; }
    .history-text      { margin-top: auto !important; }
    .history-text p {
        position: static !important;
        width: 100% !important;
        padding: var(--grid-gap) 0 0 0 !important;
        right: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
    }
}

/* ── Media query — 1020px ── */

@media (max-width: 1020px) {
    .hero-description-main {
        width: 100%;
        padding-right: var(--grid-gap);
    }
}

/* ── Media queries — mobile (< 768px) ── */

@media (max-width: 767px) {
    :root {
        --carousel-card-w: 42vw;
        --carousel-margin: 8vw;
    }

    .txt-titre      { font-size: 30px !important; font-weight: 700 !important;}
    .txt-sous-titre { font-size: 22px !important; }
    .txt-texte      { font-size: 16px !important; }
    body            { font-size: 18px !important; }

    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: var(--header-height) !important;
        background-color: var(--color-beige) !important;
        border-bottom: var(--border) !important;
        position: relative !important;
    }

    .header-logo {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: var(--header-height) !important;
        padding: 15px 20px !important;
        border: none !important;
        background-color: transparent !important;
        align-items: center !important;
        overflow: visible !important;
        z-index: auto !important;
        max-width: none !important;
    }

    .header-logo img { width: auto !important; height: 32px !important; transform: none !important; }

    .hamburger {
        display: flex !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        border-left: var(--border) !important;
        z-index: 10000 !important;
    }

    .header-nav-desktop { display: none !important; }

    .hero-section {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .hero-left  { display: contents !important; }
    .hero-right { display: contents !important; }

    .hero-tagline          { order: 1 !important; margin: 0 !important; padding: var(--grid-gap) var(--grid-gap) 0 var(--grid-gap) !important; }
    .hero-nav-space        { display: none !important; }
    .hero-description-main { order: 2 !important; }
    .hero-image-block      { order: 3 !important; display: flex !important; flex-shrink: 0 !important; }
    .hero-middle-section   { order: 4 !important; grid-template-columns: 1fr !important; overflow: visible !important; flex: none !important; }
    .hero-images-bottom    { order: 5 !important; }

    .hero-image-main       { max-height: 122px !important; flex: 1 !important; }
    .hero-image-main img   { height: 100% !important; width: 100% !important; object-fit: cover !important; max-height: none !important; }

    .hero-txt-droite    { height: auto !important; min-height: 0 !important; max-height: none !important; }
    .hero-product-title { display: none !important; }
    .hero-product-description-line { border: 0 !important; margin: 0 !important; }

    .marquee-container    { height: 60px !important; }
    .marquee-content span { font-weight: 500 !important; }

    .section-wellbeing { grid-template-columns: 1fr !important; padding: var(--grid-gap) 8% !important; gap: var(--grid-gap) !important; }
    .wb-card           { aspect-ratio: 16 / 10 !important; border: none !important; }
    .wb-card img       { filter: brightness(0.6); }
    .wb-content        { max-width: 80% !important; position: absolute !important; left: var(--grid-gap) !important; bottom: var(--grid-gap) !important; right: auto !important; }
    .wb-card h4        { width: auto !important; }

    .ingredients-grid           { grid-template-columns: 1fr !important; gap: var(--grid-gap) !important; }
    .ingredients-photos-stack   { display: none !important; }
    .ingredients-photos         { grid-template-columns: 1fr !important; }
    .ingredients-col-left       { height: 200px !important; overflow: hidden !important; }
    .ingredients-col-right      { padding: 0 !important; }
    .ingredients-photo-main     { height: 100% !important; }
    .ingredients-photo-main img { height: 100% !important; width: 100% !important; object-fit: cover !important; }
    .ingredients-title          { margin: 0 0 5% 0; }

    .carousel-wrapper {
        grid-template-columns: var(--carousel-margin) 1fr !important;
        border-left: var(--border) !important;
    }
    .carousel-sidebar       { display: none !important; }
    .carousel-products-area { grid-column: 2 / -1 !important;}

    .history-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .history-col-left {
        order: 1 !important;
        border-right: none !important;
        border-bottom: none !important;
        padding: var(--grid-gap) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .history-images {
        order: 1 !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--grid-gap) !important;
        margin: 0 0 var(--grid-gap) 0 !important;
    }
    .history-title {
        order: 2 !important;
        margin: 0 !important;
    }
    .history-img {
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .history-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
    .history-col-right {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 var(--grid-gap) var(--grid-gap) var(--grid-gap) !important;
    }
    .history-text   { margin-top: auto !important; }
    .history-text p {
        position: static !important;
        width: 100% !important;
        padding: var(--grid-gap) 0 0 0 !important;
        right: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
    }
    .history-content { max-width: none !important; }
}

/* ── Carousel — breakpoints icône/texte bouton ── */

@media (max-width: 1230px) {
    .carousel-card-btn .btn-text-add { display: inline; }
    .carousel-card-btn .btn-icon-add { display: none; }
    .carousel-card-price { flex: 0 0 auto; }
}

@media (min-width: 1231px) {
    .carousel-card-btn .btn-text-add { display: inline; }
    .carousel-card-btn .btn-icon-add { display: none; }
    .carousel-card-price             { flex: 0 0 auto; }
}

/* ── Footer ── */

#footer {
    width: 100% !important;
    border-top: var(--border) !important;
}

.kario-footer-links {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: var(--grid-gap);
    padding-left: max(var(--grid-gap), var(--body-side-padding));
    padding-right: max(var(--grid-gap), var(--body-side-padding));
    box-sizing: border-box;
}

.kario-footer-col { flex: 0 0 auto; }

.kario-footer-title {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.kario-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kario-footer-col li { margin-bottom: 6px !important; }

.kario-footer-col a {
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    text-decoration: none !important;
}

.kario-footer-col a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.kario-footer-copy {
    border-top: var(--border);
    padding: var(--grid-gap);
    padding-left: max(var(--grid-gap), var(--body-side-padding));
    padding-right: max(var(--grid-gap), var(--body-side-padding));
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.kario-footer-copy p {
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    margin: 0 !important;
}

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

.row #content-wrapper {
    margin-top: var(--header-height) !important;
    background-color: var(--color-beige) !important;
    font-family: var(--font-main) !important;
}

.cart-grid {
    margin: 0 !important;
    border-bottom: var(--border) !important;
}

.bootstrap-touchspin {
    height: 100%;
    border: none !important;
    background-color: var(--color-beige) !important;
    width: 100% !important;
    min-width: 140px !important;
    display: flex !important;
}

.cart-grid-body {
    min-height: 80vh !important;
    width: calc(var(--col-left) + 116px);
    padding: var(--grid-gap) !important;
    border-right: var(--border);
    margin: 0 !important;
}

.cart-grid-body .card-block,
.cart-grid-body .cart-overview { padding: 0 !important; }

.card { background-color: var(--color-beige) !important; }

.cart-grid-body .card-block h1 {
    font-family: var(--font-main) !important;
    font-size: 58px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    padding-bottom: var(--grid-gap);
}

body#cart .cart-grid .cart-grid-body .card.cart-container hr.separator {
    display: none !important;
    visibility: hidden !important;
}

.cart-grid-body ul .cart-item        { border-bottom: var(--border) !important; }
.cart-grid-body ul .cart-item:first-child,
li.cart-item:first-child             { border-top: var(--border) !important; }
li.cart-item                         { border-bottom: var(--border) !important; border-top: none !important; padding: var(--grid-gap) 0 !important; }

.cart-grid-right {
    min-height: 80vh !important;
    width: calc(var(--col-right) - 361px) !important;
    border-right: var(--border) !important;
}

.cart-summary { padding: var(--grid-gap) !important; }

/* Typo produits panier */
.cart-item .product-line-info a,
.cart-item .product-line-info .label,
.product-line-grid-body .label {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--color-noir) !important;
}

.cart-item .product-price,
.cart-item .current-price,
.product-line-grid-right .price,
.product-line-grid-right .current-price span {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
}

.bootstrap-touchspin input.form-control,
.qty input {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
    background-color: var(--color-beige) !important;
    flex: 1 !important;
    text-align: center !important;
}

.bootstrap-touchspin .btn,
.bootstrap-touchspin button {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    background-color: var(--color-noir) !important;
    color: var(--color-beige) !important;
    border: none !important;
    transition: background-color 0.5s var(--ease-nav) !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.bootstrap-touchspin .btn:hover,
.bootstrap-touchspin button:hover {
    background-color: var(--color-noir-hover) !important;
    color: var(--color-beige) !important;
}

.bootstrap-touchspin .btn:disabled,
.bootstrap-touchspin button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: var(--color-gris) !important;
}

.cart-line-product-actions .remove-from-cart {
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    color: var(--color-noir) !important;
}

/* Lien "Continuer les achats" */
.cart-grid-body > a.label,
.cart-overview-bottom > a {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-underline-offset: 4px !important;
    transition: transform 0.2s ease-out, text-decoration-color 0.2s ease-out !important;
    position: relative !important;
    padding-left: calc(var(--grid-gap) + 24px) !important;
    padding-top: var(--grid-gap) !important;
    padding-bottom: var(--grid-gap) !important;
}

.cart-grid-body > a.label::before,
.cart-overview-bottom > a::before {
    content: '←' !important;
    position: absolute !important;
    left: var(--grid-gap) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease-out !important;
}

.cart-grid-body > a.label:hover,
.cart-overview-bottom > a:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--color-noir) !important;
}

.cart-grid-body > a.label:hover::before,
.cart-overview-bottom > a:hover::before {
    transform: translateY(-50%) translateX(-6px) !important;
}

/* Masquer flèche PS par défaut */
.cart-grid-body a.label i,
.cart-overview-bottom a i,
.cart-grid-body a.label svg,
.cart-overview-bottom a svg { display: none !important; }

/* Récap commande */
.cart-summary-line .label,
.cart-summary-products .label {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
}

.cart-summary-line .value,
.cart-summary-products .value {
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
}

.cart-summary-totals .cart-total .label {
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--color-noir) !important;
}

.cart-summary-totals .cart-total .value {
    font-family: var(--font-main) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--color-noir) !important;
}

.promo-code .promo-input,
.promo-code .promo-code-button,
.promo-code button,
.block-promo input,
.block-promo button {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    color: var(--color-noir) !important;
}

.checkout .btn,
.checkout a,
.cart-detailed-actions .btn-primary {
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    padding: var(--grid-gap) !important;
}

.cart-overview .alert,
.cart-grid-body .alert {
    font-family: var(--font-main) !important;
    font-size: 16px !important;
}

/* Layout ligne produit */
.product-line-grid {
    display: flex !important;
    align-items: stretch !important;
    gap: var(--grid-gap) !important;
    min-height: 100px !important;
}

.product-line-grid-left,
.product-line-grid-left.col-md-3,
.product-line-grid-left.col-xs-4 {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.product-line-grid-left a,
.product-line-grid-left span,
.product-line-grid-left picture {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-line-grid-left img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.product-line-grid-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    padding-left: 0 !important;
}

.product-line-grid-body.col-md-4,
.product-line-grid-body.col-xs-8,
.cart-item .col-md-4,
.cart-item .col-xs-8 { padding-left: 0 !important; }

.product-line-grid-body .product-line-info { display: flex !important; flex-direction: column !important; justify-content: center !important; }

.product-line-grid-right {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.product-line-grid-right .row {
    display: flex !important;
    align-items: center !important;
    gap: var(--grid-gap) !important;
    margin: 0 !important;
}

.product-line-grid-right .col-md-10 {
    display: flex !important;
    align-items: center !important;
    gap: var(--grid-gap) !important;
    padding: 0 !important;
}

.qty,
.product-line-grid-right .qty,
.product-line-grid-right .product-price {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.product-line-grid-right .col-md-2,
.cart-line-product-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Padding titres produits */
.cart-item .product-line-info,
.product-line-grid-body .product-line-info,
.product-line-grid-body .label,
.cart-item .label {
    padding: 0 var(--grid-gap) 0 0 !important;
    margin-left: 0 !important;
}

/* Minuscules partout */
.checkout .btn,
.checkout a,
.cart-detailed-actions .btn-primary,
.cart-summary-line .label,
.cart-summary-totals .cart-total .label,
.cart-grid-body .card-block h1,
#blockreassurance_product .block-title,
#blockreassurance_product .block-description {
    text-transform: lowercase !important;
}

/* Bordures noires */
.cart-grid,
.cart-grid-body,
.cart-grid-right,
.cart-summary,
.bootstrap-touchspin,
.checkout .btn,
.cart-detailed-actions .btn-primary,
#blockreassurance_product,
.bootstrap-touchspin .btn,
.bootstrap-touchspin button,
.bootstrap-touchspin input {
    border-color: var(--color-noir) !important;
}

.cart-grid *,
.cart-summary *,
.cart-detailed-actions *,
.product-line-grid * { border-color: var(--color-noir) !important; }

hr, hr.separator {
    border-color: var(--color-noir) !important;
    background-color: var(--color-noir) !important;
}

.cart-grid-right::before,
.cart-summary::before { border-color: var(--color-noir) !important; }

/* Bloc réassurance */
.blockreassurance_product,
#blockreassurance_product { padding: var(--grid-gap) !important; }

.blockreassurance_product > div,
#blockreassurance_product > div {
    display: block !important;
    border-bottom: var(--border) !important;
    padding: var(--grid-gap) 0 !important;
    margin: 0 !important;
}

.blockreassurance_product > div:last-child,
#blockreassurance_product > div:last-child,
.blockreassurance_product div:last-of-type,
#blockreassurance_product div:last-of-type { border-bottom: none !important; }

.blockreassurance_product .block-title,
.blockreassurance_product p,
#blockreassurance_product .block-title,
#blockreassurance_product p {
    font-family: var(--font-main) !important;
    color: var(--color-noir) !important;
    margin: 0 !important;
}

#blockreassurance_product .block-title { font-size: 18px !important; font-weight: 500 !important; }
#blockreassurance_product .block-description { font-size: 14px !important; font-weight: 400 !important; }

.blockreassurance_product svg,
#blockreassurance_product svg { margin: 0 !important; padding: 0 !important; }

.blockreassurance_product > div span.item-product,
#blockreassurance_product > div span.item-product {
    margin-right: calc(var(--grid-gap) * 2) !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Masquer icônes checkout (sauf poubelle) */
.cart-item .product-line-info i,
.cart-item .product-line-info svg,
.cart-item .product-line-grid-body i,
.cart-item .product-line-grid-body svg,
.checkout i,
.checkout svg,
.cart-detailed-actions i,
.cart-detailed-actions svg { display: none !important; }

.cart-item .remove-from-cart i,
.cart-item .remove-from-cart svg,
.cart-line-product-actions i,
.cart-line-product-actions svg { display: inline-block !important; }

/* Masquer flèche titres produits */
.cart-item .product-line-info a::before,
.cart-item .label::before,
.product-line-grid-body .label::before { display: none !important; content: none !important; }

/* Code promo */
.promo-code,
.promo-code a,
.promo-code .collapse-button,
.cart-summary .promo-code,
.cart-summary .promo-code a,
.cart-summary .promo-discounts a,
#promo-code,
.block-promo,
.cart-summary .block-promo,
.js-cart-summary .block-promo,
#promo-code a,
.block-promo a,
.cart-voucher a,
.promo-name,
.collapse-button,
span.collapse-button {
    color: var(--color-noir) !important;
    background: none !important;
    background-color: transparent !important;
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

#promo-code,
.block-promo,
.cart-summary .block-promo {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

.promo-code,
#promo-code,
.block-promo form {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
}

/* Lien promo avec flèche */
.promo-code a,
.cart-summary .promo-code a,
.cart-summary .promo-discounts a,
#promo-code a,
.block-promo a,
.collapse-button {
    display: inline-block !important;
    position: relative !important;
    padding-right: 28px !important;
    text-underline-offset: 4px !important;
    transition: transform 0.2s ease-out !important;
}

.promo-code a::after,
.cart-summary .promo-code a::after,
.cart-summary .promo-discounts a::after,
#promo-code a::after,
.block-promo a::after,
.collapse-button::after {
    content: '→' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease-out !important;
}

.promo-code a:hover,
.cart-summary .promo-code a:hover,
.cart-summary .promo-discounts a:hover,
#promo-code a:hover,
.block-promo a:hover,
.collapse-button:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--color-noir) !important;
}

.promo-code a:hover::after,
.cart-summary .promo-code a:hover::after,
.cart-summary .promo-discounts a:hover::after,
#promo-code a:hover::after,
.block-promo a:hover::after,
.collapse-button:hover::after {
    transform: translateY(-50%) translateX(6px) !important;
}

.cart-summary-line.cart-summary-reductions,
.cart-summary .cart-summary-line { text-align: left !important; }

/* Masquer éléments promo inutiles */
.promo-code-button,
.collapse-button,
.cancel-promo,
a.cancel-promo,
.promo-code .cancel-promo { display: none !important; visibility: hidden !important; }

/* Input et bouton promo */
.promo-code input.promo-input,
.promo-code input[type="text"] {
    flex: 1 !important;
    background-color: var(--color-beige) !important;
    border: var(--border) !important;
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    padding: 12px var(--grid-gap) !important;
    height: auto !important;
    margin: 0 !important;
}

.promo-code button[type="submit"],
.promo-code .btn-primary {
    padding: 12px var(--grid-gap) !important;
    height: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-family: var(--font-main) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Padding résumé commande */
.cart-summary-line,
.cart-summary-products,
.cart-summary-totals { padding: var(--grid-gap) 0 !important; }

.cart-summary-line .label,
.cart-summary-line .value { padding: 0 !important; }

#cart-subtotal-products,
#cart-subtotal-shipping { margin: 0 !important; padding-bottom: 0 !important; }

/* Btn checkout désactivé */
.checkout .btn-primary.disabled,
.checkout .btn-primary:disabled {
    background-color: var(--color-noir-hover) !important;
    color: var(--color-beige) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    padding: var(--grid-gap) !important;
    border: none !important;
}

/* Layout grid panier */
body#cart .container,
body#cart .row,
body#cart #content-wrapper,
body#cart #main,
body#cart .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

body#cart .cart-grid {
    display: grid !important;
    grid-template-columns: var(--col-left) var(--col-right) !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
}

body#cart .cart-grid-body {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 80vh !important;
    padding: var(--grid-gap) !important;
    border: none !important;
    border-left: var(--border) !important;
    border-right: var(--border) !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

body#cart .cart-grid-right {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 80vh !important;
    border: none !important;
    border-right: var(--border) !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

body#cart .cart-summary { padding: var(--grid-gap) !important; flex: 1 !important; }

body#cart .blockreassurance_product,
body#cart #blockreassurance_product {
    padding: var(--grid-gap) !important;
    border-top: var(--border) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

body#cart .cart-grid-body .card-block h1 {
    font-size: 58px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    padding-bottom: var(--grid-gap) !important;
}

/* =====================================================
   PAGES COMPTE (login / mot de passe / inscription)
   Règles communes fusionnées
   ===================================================== */

body#authentication #content-wrapper,
body#password #content-wrapper,
body#registration #content-wrapper {
    margin-top: var(--header-height) !important;
    background-color: var(--color-beige) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 3% 0 6% !important;
    overflow: visible !important;
}

/* Centrage vertical pour login/password */
body#authentication #content-wrapper,
body#password #content-wrapper { align-items: center !important; }

body#authentication #main,
body#password #main,
body#registration #main {
    width: 30vw !important;
    min-width: 320px !important;
    max-width: 560px !important;
    overflow: visible !important;
    padding: 0 4px !important;
}

body#authentication #main { max-width: none !important; }

body#authentication #content,
body#password #content,
body#registration #content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

body#password #content { margin-top: var(--grid-gap) !important; }

body#authentication #main,
body#authentication #content,
body#password #main,
body#password #content { overflow: visible !important; }

body#authentication .page-header,
body#password .page-header,
body#registration .page-header {
    border-bottom: var(--border) !important;
    padding-bottom: var(--grid-gap) !important;
    margin-bottom: var(--grid-gap) !important;
}

body#password .page-header     { margin-bottom: 0 !important; }
body#registration .page-header { margin-bottom: var(--grid-gap); }

body#authentication .page-header h1,
body#password .page-header h1,
body#registration .page-header h1 {
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: var(--color-noir) !important;
    text-transform: lowercase !important;
}

body#authentication .login-form { padding-bottom: 40px !important; }
body#password .forgotten-password { padding-bottom: 40px !important; }
body#password .forgotten-password header { margin-bottom: var(--grid-gap) !important; }
body#registration #customer-form { padding-bottom: 40px !important; }
body#registration #customer-form > div { width: 100% !important; overflow: visible !important; }

body#authentication #content { overflow: visible !important; }

/* Form groups */
body#authentication .form-group,
body#password .form-group,
body#registration .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    overflow: visible !important;
}

body#registration .form-group { margin: 0 0 var(--grid-gap) 0 !important; }

body#authentication .form-group.row,
body#password .form-group.row,
body#registration .form-group.row { margin-left: 0 !important; margin-right: 0 !important; }

/* Labels */
body#authentication .col-md-3.form-control-label,
body#registration .col-md-3.form-control-label,
body#password .form-control-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-noir) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    text-transform: lowercase !important;
    width: 100% !important;
    max-width: none !important;
}

/* Colonnes input */
body#authentication .col-md-6,
body#authentication .js-input-column,
body#password .email,
body#password .col-md-5,
body#registration .col-md-6,
body#registration .js-input-column,
body#registration .form-group [class*="col-md-"] {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    overflow: visible !important;
}

body#authentication .col-md-3.form-control-comment,
body#registration .col-md-3.form-control-comment { display: none !important; }

body#registration .form-group .col-md-3:not(.form-control-label):not(.form-control-comment) { display: none !important; }

/* Form controls */
body#authentication .form-control,
body#password .form-control,
body#registration .form-control {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    background-color: var(--color-beige) !important;
    border: var(--border) !important;
    border-radius: 0 !important;
    padding: 12px var(--grid-gap) !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

body#password .form-control { min-height: 48px !important; }

body#password .form-control::placeholder,
body#registration .form-control::placeholder { color: var(--color-noir) !important; opacity: 0.5 !important; }

body#authentication .form-control:hover,
body#password .form-control:hover,
body#registration .form-control:hover { outline: none !important; box-shadow: none !important; }

body#authentication .form-control:focus,
body#password .form-control:focus,
body#registration .form-control:focus {
    outline: 2px solid var(--color-noir) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

/* Autofill */
body#authentication .form-control:-webkit-autofill,
body#authentication .form-control:-webkit-autofill:hover,
body#authentication .form-control:-webkit-autofill:focus,
body#password .form-control:-webkit-autofill,
body#password .form-control:-webkit-autofill:hover,
body#password .form-control:-webkit-autofill:focus,
body#registration .form-control:-webkit-autofill,
body#registration .form-control:-webkit-autofill:hover,
body#registration .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-beige) inset !important;
    -webkit-text-fill-color: var(--color-noir) !important;
    border: var(--border) !important;
}

/* Input group */
body#authentication .input-group,
body#registration .input-group {
    display: flex !important;
    border: var(--border) !important;
    outline: none !important;
    box-shadow: none !important;
}

body#authentication .input-group:hover,
body#registration .input-group:hover { border: var(--border) !important; outline: none !important; box-shadow: none !important; }

body#authentication .input-group:has(input:focus),
body#registration .input-group:has(input:focus) {
    outline: 2px solid var(--color-noir) !important;
    outline-offset: 3px !important;
}

body#authentication .input-group .form-control,
body#authentication .input-group input.form-control,
body#registration .input-group .form-control,
body#registration .input-group input.form-control {
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body#authentication .input-group .form-control:hover,
body#authentication .input-group input.form-control:hover,
body#authentication .input-group .form-control:focus,
body#authentication .input-group input.form-control:focus,
body#registration .input-group .form-control:hover,
body#registration .input-group input.form-control:hover,
body#registration .input-group .form-control:focus,
body#registration .input-group input.form-control:focus { border: none !important; outline: none !important; box-shadow: none !important; }

body#authentication .input-group-btn,
body#registration .input-group-btn { display: flex !important; }

body#authentication .input-group-btn .btn,
body#registration .input-group-btn .btn {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-beige) !important;
    background: var(--color-noir) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 var(--grid-gap) !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    text-transform: lowercase !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease !important;
}

body#authentication .input-group-btn .btn:hover,
body#registration .input-group-btn .btn:hover {
    background-color: var(--color-gris) !important;
    color: var(--color-beige) !important;
    outline: none !important;
}

body#authentication .input-group-btn .btn:focus-visible,
body#registration .input-group-btn .btn:focus-visible {
    outline: 2px solid var(--color-noir) !important;
    outline-offset: 3px !important;
}

/* Bouton submit (login + registration) */
body#authentication #submit-login,
body#registration .form-control-submit {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--color-beige) !important;
    background-color: var(--color-noir) !important;
    border: none !important;
    padding: 14px var(--grid-gap) !important;
    height: auto !important;
    min-height: unset !important;
    line-height: 1 !important;
    text-transform: lowercase !important;
    text-align: left !important;
    cursor: pointer !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 0.5s var(--ease-main) !important;
}

body#authentication #submit-login { margin-top: 4% !important; }
body#registration .form-control-submit { border-radius: 0 !important; }

body#authentication #submit-login:hover,
body#authentication #submit-login:focus-visible,
body#registration .form-control-submit:hover,
body#registration .form-control-submit:focus-visible {
    background-color: var(--color-noir-hover) !important;
    outline: none !important;
}

body#registration .form-control-submit:focus-visible {
    outline: 2px solid var(--color-noir) !important;
    outline-offset: 3px !important;
}

body#authentication #submit-login:not(:focus-visible) { outline: none !important; }

/* Bouton submit (password reset) */
body#password #send-reset-link,
body#password .form-control-submit {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    margin: 8px 0 0 0 !important;
    padding: 14px var(--grid-gap) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-transform: lowercase !important;
    text-align: left !important;
    color: var(--color-beige) !important;
    background-color: var(--color-noir) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.5s var(--ease-main) !important;
}

body#password #send-reset-link:hover,
body#password .form-control-submit:hover { background-color: var(--color-noir-hover) !important; }

body#password #send-reset-link:focus-visible,
body#password .form-control-submit:focus-visible {
    outline: 2px solid var(--color-noir) !important;
    outline-offset: 3px !important;
    background-color: var(--color-noir-hover) !important;
}

body#authentication hr,
body#password hr {
    border-color: var(--color-noir) !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* Liens divers pages compte */
body#authentication .forgot-password a,
body#authentication .no-account a,
body#password .page-footer a,
body#password #back-to-login {
    color: var(--color-noir) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-transform: lowercase !important;
    display: inline-block !important;
}

body#authentication .forgot-password a { font-size: 13px !important; font-weight: 400 !important; margin: 0 !important; }
body#authentication .no-account a { font-size: 14px !important; font-weight: 400 !important; }
body#password .page-footer a,
body#password #back-to-login { font-size: 14px !important; font-weight: 400 !important; }

body#password .hidden-sm-up { display: none !important; }
body#password #back-to-login i { display: none !important; }
body#password .page-footer { margin-top: var(--grid-gap) !important; }

.page-customer-account #content .forgot-password { margin: 0 !important; padding-bottom: 0 !important; }

/* Form footer */
body#authentication .form-footer,
body#authentication .form-footer.clearfix,
body#registration .form-footer {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    margin-top: var(--grid-gap) !important;
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    float: none !important;
}

/* Descriptions password */
body#password .send-renew-password-link {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-transform: lowercase !important;
}

body#password .form-fields,
body#password .center-email-fields { width: 100% !important; }

/* Alertes */
body#password .ps-alert-success,
body#password .ps-alert-error {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--grid-gap) 0 !important;
}

body#password .ps-alert-success .item,
body#password .ps-alert-error .item {
    display: block !important;
    padding: 14px var(--grid-gap) !important;
    border: var(--border) !important;
    background-color: var(--color-beige) !important;
    margin: 0 !important;
}

body#password .ps-alert-success .item *,
body#password .ps-alert-error .item * {
    background-color: var(--color-beige) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

body#password .ps-alert-success .item i,
body#password .ps-alert-error .item i { display: none !important; }

body#password .ps-alert-success .item p,
body#password .ps-alert-error .item p {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    line-height: 1.4 !important;
    text-transform: lowercase !important;
}

/* Inscription — éléments spécifiques */
body#registration .register-form > p {
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 0 var(--grid-gap) 0 !important;
    text-transform: lowercase !important;
}

body#registration .register-form > p a { color: var(--color-noir) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* Indicateur force mot de passe */
body#registration .password-strength-feedback { margin-top: 8px !important; }

body#registration .progress {
    height: 4px !important;
    background-color: rgba(0,0,0,0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 6px !important;
}

body#registration .progress-bar {
    background-color: var(--color-noir) !important;
    transition: width 0.3s ease !important;
}

body#registration .password-strength-text,
body#registration .password-requirements p {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    margin: 4px 0 !important;
    line-height: 1.4 !important;
    text-transform: lowercase !important;
}

body#registration .password-requirements .material-icons { display: none !important; }

body#registration .form-control-comment {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    opacity: 0.6 !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    line-height: 1.4 !important;
    text-transform: lowercase !important;
}

/* Radio / Checkbox */
body#registration .radio-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: var(--grid-gap) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    text-transform: lowercase !important;
}

body#registration .custom-radio { display: inline-flex !important; align-items: center !important; }

body#registration .custom-radio input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    accent-color: var(--color-noir) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
    align-self: center !important;
    box-sizing: content-box !important;
}

body#registration .custom-radio > span { display: none !important; }
body#registration .radio-inline:first-child { padding-left: 4px !important; }

body#registration .custom-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-left: 4px !important;
}

body#registration .custom-checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-noir) !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    text-transform: lowercase !important;
}

body#registration .custom-checkbox input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    accent-color: var(--color-noir) !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
    align-self: flex-start !important;
    box-sizing: content-box !important;
}

body#registration .custom-checkbox input[type="checkbox"]:focus,
body#registration .custom-radio input[type="radio"]:focus { outline: 2px solid var(--color-noir) !important; outline-offset: 2px !important; }

body#registration .custom-checkbox label > span { display: none !important; }

body#registration .custom-checkbox em {
    display: inline-block !important;
    font-size: 11px !important;
    opacity: 0.6 !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

/* ── Responsive compte ── */

@media (max-width: 1024px) {
    body#password #main,
    body#registration #main { width: 42vw !important; }
}

@media (max-width: 767px) {
    body#authentication #content-wrapper,
    body#password #content-wrapper,
    body#registration #content-wrapper { padding: 24px 0 40px !important; }

    body#authentication #main,
    body#password #main,
    body#registration #main {
        width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body#password .page-header h1,
    body#registration .page-header h1,
    body#authentication .page-header h1 { font-size: 30px !important; }
}