/* =====================================================
KARIO — CSS PRINCIPAL
─────────────────────────────────────────────────────
01. Polices
02. Variables globales couleurs · layout · typo · animations
03. Breakpoints typo responsive des font-size
04. Classes typo utilitaires .txt-*
05. Base & reset Bootstrap · PrestaShop · boutons noirs
06. Header logo · nav · badge · dropdown panier
07. Menu mobile
08. Homepage hero · marquee · carousel · wellbeing · histoire
09. Footer
10. La Gamme
11. Page produit galerie · info · achat · FAQ · carousel also
12. Pages compte A login · password · inscription
13A. Pages compte B adresses · historique · avoirs · RGPD
13. Pages compte B my-account · identité
13B. Détail commande order-detail
13C. Confirmation order-confirmation
14. Panier layout · lignes · résumé · code promo · réassurance
15. Checkout layout · steps · adresses · livraison · paiement
16. Page CMS mentions légales · CGV
17. Accessibilité outline clavier uniquement
18. Media queries responsive cross-sections
19. Module rétractation rbfree
===================================================== */
/* ==========================================================================
01. 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; }
/* ==========================================================================
02. VARIABLES GLOBALES
========================================================================== */
:root {
--color-beige: #F5EDD6;
--color-noir: #000000;
--color-gris: #222;
--color-noir-hover: #333;
--grid-gap: 22px;
--border: 1px solid var(--color-noir);
--max-content-width: 2000px;
--body-side-padding: 0px;
--header-height: 60px;
--header-height-min: 60px;
--header-img-min: 30px;
--col-left: calc(50% - var(--grid-gap) / 2);
--col-right: calc(50% + var(--grid-gap) / 2);
--carousel-card-w: 350px;
--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.15s ease, color 0.15s ease;
--font-main: 'Moderat', sans-serif;
--fs-display: 72px;
--fs-title: 55px;
--fs-subtitle: 24px;
--fs-body-lg: 22px;
--fs-body: 18px;
--fs-small: 15px;
--fs-micro: 13px;
--lh-display: 0.95;
--lh-title: 1.05;
--lh-subtitle: 1.25;
--lh-body: 1.35;
--lh-body-relaxed: 1.5;
--ls-display: -0.045em;
--ls-title: -0.03em;
--ls-subtitle: -0.02em;
--ls-body: -0.01em;
--ls-small: 0em;
--ls-micro: 0.01em;
--pp-pad-left: 0px;
--pp-pad-right: 0px;
--pp-thumb-size: calc((50vw - var(--grid-gap) * 2 - var(--grid-gap) * 5) / 6);
/* Couleur erreur / champs requis */
--color-error: #c0392b;
/* Boutons hint scroll (carousel homepage + carousel page produit) */
--hint-size: 52px;
--hint-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
--hint-animation: hint-pulse 3s ease-in-out infinite;
}
/* ==========================================================================
03. BREAKPOINTS TYPO
========================================================================== */
@media (max-width: 2000px) {
:root { --fs-display: 68px; --fs-title: 52px; --fs-subtitle: 28px; --fs-body-lg: 21px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 12px; --lh-subtitle: 1.1; }
}
@media (max-width: 1669px) {
:root { --fs-display: 60px; --fs-title: 46px; --fs-subtitle: 26px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; --grid-gap: 18px; --lh-subtitle: 1.2; --lh-body: 1.28; --lh-body-relaxed: 1.4; }
.hero-product-description p { line-height: var(--lh-title); }
}
@media (max-width: 1439px) {
:root { --fs-display: 52px; --fs-title: 40px; --fs-subtitle: 24px; --fs-body-lg: 17px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 12px; --lh-subtitle: 1.2; --lh-body: 1.2; --lh-body-relaxed: 1.3; }
}
@media (max-width: 1199px) {
:root { --fs-display: 44px; --fs-title: 34px; --fs-subtitle: 21px; --fs-body-lg: 16px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 12px; --lh-subtitle: 1.2; --lh-body: 1.15; --lh-body-relaxed: 1.2; }
}
@media (max-width: 1023px) {
:root { --fs-display: 38px; --fs-title: 29px; --fs-subtitle: 20px; --fs-body-lg: 15px; --fs-body: 14px; --fs-small: 13px; --fs-micro: 12px; --lh-subtitle: 1.2; --lh-body: 1.1; --lh-body-relaxed: 1.15; }
}
@media (max-width: 767px) {
:root { --fs-display: 48px; --fs-title: 40px; --fs-subtitle: 23px; --fs-body-lg: 20px; --fs-body: 17px; --fs-small: 15px; --fs-micro: 14px; --lh-subtitle: 1.2; --lh-body: 1.1; --lh-body-relaxed: 1.1; }
}
/* ==========================================================================
04. CLASSES TYPO UTILITAIRES
========================================================================== */
body#cms .page-cms h1 { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; color: var(--color-noir) !important; margin: 0 !important; }
body#cms .page-cms h2 { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-subtitle) !important; font-weight: 500 !important; letter-spacing: var(--ls-subtitle) !important; color: var(--color-noir) !important; padding-top: calc(var(--grid-gap) * 2) !important; border-top: var(--border) !important; }
body#cms .page-cms h2:first-child { border-top: none !important; padding-top: 0 !important; }
body#cms .page-cms h3 { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; color: var(--color-noir) !important; margin: calc(var(--grid-gap) * 1.5) 0 var(--grid-gap) !important; }
body#cms .page-cms p { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: 1.7 !important; color: var(--color-noir) !important; margin: 0 0 var(--grid-gap) !important; }
body#cms .page-cms .txt-display p, body#cms .page-cms .txt-display span, body#cms .page-cms .txt-display h1, body#cms .page-cms .txt-display h2, body#cms .page-cms .txt-display h3, body#cms .page-cms .txt-display h4, body#cms .page-cms .txt-display li, .txt-display
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-display) !important; font-weight: 500 !important; line-height: var(--lh-display) !important; letter-spacing: var(--ls-display) !important; }
body#cms .page-cms .txt-titre p, body#cms .page-cms .txt-titre span, body#cms .page-cms .txt-titre h1, body#cms .page-cms .txt-titre h2, body#cms .page-cms .txt-titre h3, body#cms .page-cms .txt-titre h4, body#cms .page-cms .txt-titre li, .txt-titre
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; }
body#cms .page-cms .txt-sous-titre p, body#cms .page-cms .txt-sous-titre span, body#cms .page-cms .txt-sous-titre h1, body#cms .page-cms .txt-sous-titre h2, body#cms .page-cms .txt-sous-titre h3, body#cms .page-cms .txt-sous-titre h4, body#cms .page-cms .txt-sous-titre li, .txt-sous-titre
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-subtitle) !important; font-weight: 500 !important; line-height: var(--lh-subtitle) !important; letter-spacing: var(--ls-subtitle) !important; }
body#cms .page-cms .txt-normal p, body#cms .page-cms .txt-normal span, body#cms .page-cms .txt-normal h1, body#cms .page-cms .txt-normal h2, body#cms .page-cms .txt-normal h3, body#cms .page-cms .txt-normal h4, body#cms .page-cms .txt-normal li, txt-normal
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; line-height: var(--lh-body) !important; letter-spacing: var(--ls-body) !important; }
body#cms .page-cms .txt-texte p, body#cms .page-cms .txt-texte span, body#cms .page-cms .txt-texte h1, body#cms .page-cms .txt-texte h2, body#cms .page-cms .txt-texte h3, body#cms .page-cms .txt-texte h4, body#cms .page-cms .txt-texte li, .txt-texte
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: var(--lh-body) !important; letter-spacing: var(--ls-body) !important; }
body#cms .page-cms .txt-small p, body#cms .page-cms .txt-small span, body#cms .page-cms .txt-small h1, body#cms .page-cms .txt-small h2, body#cms .page-cms .txt-small h3, body#cms .page-cms .txt-small h4, body#cms .page-cms .txt-small li, .txt-small
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; font-weight: 400 !important; line-height: var(--lh-body) !important; letter-spacing: var(--ls-small) !important; }
body#cms .page-cms .txt-micro p, body#cms .page-cms .txt-micro span, body#cms .page-cms .txt-micro h1, body#cms .page-cms .txt-micro h2, body#cms .page-cms .txt-micro h3, body#cms .page-cms .txt-micro h4, body#cms .page-cms .txt-micro li
{ font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-micro) !important; font-weight: 400 !important; line-height: var(--lh-body) !important; letter-spacing: var(--ls-micro) !important; }
.breadcrumb { display: none !important; }
/* ==========================================================================
05. BASE & RESET BOOTSTRAP / PRESTASHOP + BOUTONS NOIRS (05B)
========================================================================== */
/* --- Base --- */
#main .page-header { margin: 0;}
/* Force couleur noir sur tous les textes */
* { color: var(--color-noir) !important; }
/* Exceptions : éléments à fond noir → texte beige */
.carousel-card-btn,
.carousel-card-btn *,
.pp-add-to-cart,
.pp-add-to-cart *,
.btn-primary,
.btn-primary *,
.header-nav-cart,
.header-nav-cart *,
.hamburger,
.hamburger *,
.mobile-panel #_mobile_actions #_desktop_cart .blockcart *,
.mobile-panel #_mobile_actions #_mobile_cart_clone .blockcart *,
.cart-dropdown-btn--primary,
.cart-dropdown-btn--primary *,
.kario-logout-btn,
.kario-logout-btn:hover { color: var(--color-beige) !important; }
/* page-cms override */
.page-content p,
.page-content.page-cms p,
.page-content.page-cms ul,
.page-content.page-cms ol,
.page-content.page-cms dl,
.page-content.page-cms li { color: var(--color-noir) !important; }
* { 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, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
line-height: var(--lh-body) !important;
letter-spacing: var(--ls-body) !important;
margin: 0 !important;
padding: 0 !important;
}
p {
font-size: var(--fs-body) !important;
font-weight: 400 !important;
line-height: var(--lh-body-relaxed) !important;
letter-spacing: var(--ls-body) !important;
margin: 0;
}
a:hover, a:active { color: var(--color-noir); }
#main section { background-color: var(--color-beige) !important; }
/* --- Reset 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;
background-color: var(--color-beige) !important;
}
body#my-account #wrapper,
body#identity #wrapper { background-color: var(--color-beige) !important; }
.card-block { padding: 0 !important; }
#main { padding: 0 !important; margin: 0 !important; }
#main .page-content { margin: 0 !important;}
/* Boutons wb / gamme */
.wb-btn:hover,
.gamme-card-btn,
.gamme-card-btn *,
.gamme-card-link:hover .gamme-card-btn { color: var(--color-beige) !important; }
/* ==========================================================================
06. HEADER
========================================================================== */
#header .header-top,
.header-inner,
.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;
padding-bottom: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
#header .header-top {
max-width: calc(100vw - var(--body-side-padding) * 2);
margin: 0 var(--body-side-padding);
padding: 0;
padding-bottom: 0 !important;
background-color: var(--color-beige) !important;
box-sizing: border-box;
}
.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;
pointer-events: none;
display: flex;
align-items: center;
box-sizing: border-box;
}
body.page-index .header-logo:not(.is-sticky) {
padding-top: var(--grid-gap);
align-items: flex-start;
}
.header-logo a { display: block; width: 100%; height: 100%; position: relative; }
.header-logo img {
width: 100%;
object-fit: contain;
object-position: left center;
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;
width: 100%;
opacity: 0;
pointer-events: none;
z-index: 1;
transition: opacity 0.3s ease;
}
/* Logo selon page */
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; }
body.page-index .header-logo .logo-full { opacity: 1; pointer-events: auto; }
body.page-index .header-logo .logo-sticky { opacity: 0; pointer-events: none; }
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); }
body:not(.page-index) .header-logo {
height: var(--header-height);
padding-top: calc((var(--header-height) - var(--header-img-min)) / 2);
padding-bottom: calc((var(--header-height) - var(--header-img-min)) / 2);
margin: 0;
align-items: center;
}
body:not(.page-index) .header-logo img {
height: var(--header-img-min) !important;
width: auto !important;
max-width: 100% !important;
transform: none !important;
}
body:not(.page-index) .header-nav-desktop { margin: 0; }
.header-nav-desktop {
display: flex;
align-items: stretch;
height: var(--header-height);
background-color: var(--color-beige);
border-bottom: var(--border);
margin: 0;
grid-column: 2;
}
.header-nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-left: var(--border);
align-self: stretch;
}
.header-nav-menu li { border-right: var(--border); flex-shrink: 0; }
.header-nav-menu li:nth-child(3) { width: 155px; }
.header-nav-menu li a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 var(--grid-gap);
font-family: var(--font-main, sans-serif);
font-size: var(--fs-body-lg);
font-weight: 400;
color: var(--color-noir);
text-decoration: none;
text-transform: none;
transition: var(--transition-nav);
white-space: nowrap;
}
.header-nav-menu li a:hover,
#header .header-nav-menu li a:hover,
.header-nav-menu li.current > a,
#header .header-nav-menu li.current > a {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
}
/* Nav active via body class — CMS et blog */
body.cms-id-19 .header-nav-menu li:nth-child(2) > a,
body.cms-id-8 .header-nav-menu li:nth-child(3) > a,
body.cms-id-16 .header-nav-menu li:nth-child(4) > a,
body.page-module-mdn_blog .header-nav-menu li:nth-child(5) > a,
body#module-mdn_blog-home .header-nav-menu li:nth-child(5) > a,
body#module-mdn_blog-category .header-nav-menu li:nth-child(5) > a,
body#module-mdn_blog-post .header-nav-menu li:nth-child(5) > a {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
}
.header-nav-account .icon-auth,
.header-nav-cart .icon-cart {
display: block;
width: 26px; height: 26px;
flex-shrink: 0;
transition: color 0.15s ease;
}
.header-nav-account .icon-auth { color: var(--color-noir); }
.header-nav-account .icon-auth path { fill: var(--color-noir); transition: fill 0.15s ease; }
.header-nav-cart .icon-cart { color: var(--color-beige); }
.header-nav-account {
display: flex;
align-items: center;
justify-content: center;
width: 60px; height: 60px;
padding: 0;
margin-left: auto;
text-decoration: none;
align-self: flex-end;
transition: var(--transition-nav);
border-left: var(--border);
}
.header-nav-account:not(.active),
.header-nav-account:not(.active):visited,
.header-nav-account:not(.active):link { color: var(--color-noir) !important; }
.header-nav-account:hover,
.header-nav-account.active { background-color: var(--color-noir); color: var(--color-beige) !important; }
.header-nav-account:hover:visited,
.header-nav-account.active:visited { color: var(--color-beige) !important; }
.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.15s ease;
}
#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); }
#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 --- */
.js-preload #hero-logo { opacity: 0 !important; transition: none !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; }
@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; }
}
/* --- Badge panier --- */
.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) !important;
font-family: var(--font-main, sans-serif);
font-size: var(--fs-micro);
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:empty,
.cart-badge.is-visible:empty { display: none !important; }
.cart-badge.bump { transform: scale(1.4); }
/* Animation ajout panier */
@keyframes cart-shake {
0% { transform: rotate(0deg) scale(1); }
20% { transform: rotate(-12deg) scale(1.1); }
40% { transform: rotate(10deg) scale(1.1); }
60% { transform: rotate(-8deg) scale(1.05); }
80% { transform: rotate(5deg) scale(1.02); }
100% { transform: rotate(0deg) scale(1); }
}
.header-nav-cart.cart-adding .icon-cart { animation: cart-shake 0.5s var(--ease-bounce) forwards; }
.cart-badge--mobile {
position: static;
margin-left: 8px;
display: none !important;
background: none !important;
min-width: 0 !important;
height: 0 !important;
padding: 0 !important;
}
.cart-badge--mobile.is-visible:not(:empty) {
display: flex !important;
background-color: var(--color-beige) !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 4px 2px 3px !important;
}
.header-nav-account:hover .icon-auth,
.header-nav-account.active .icon-auth { color: var(--color-beige) !important; }
.header-nav-account:hover .icon-auth path,
.header-nav-account.active .icon-auth path { fill: var(--color-beige) !important; }
.header-nav-cart:hover .icon-cart { color: var(--color-beige); }
/* Btn connexion actif sur toutes les pages compte (via body id) */
body.page-customer-account .header-nav-account,
body#identity .header-nav-account,
body#addresses .header-nav-account,
body#history .header-nav-account,
body#order-detail .header-nav-account,
body#order-slip .header-nav-account,
body#discount .header-nav-account,
/* Pages gamme & produits */
body.page-product .header-nav-account,
body.page-category .header-nav-account {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
}
body.page-customer-account .header-nav-account .icon-auth path,
body#identity .header-nav-account .icon-auth path,
body#addresses .header-nav-account .icon-auth path,
body#history .header-nav-account .icon-auth path,
body#order-detail .header-nav-account .icon-auth path,
body#order-slip .header-nav-account .icon-auth path,
body#discount .header-nav-account .icon-auth path,
body.page-product .header-nav-account .icon-auth path,
body.page-category .header-nav-account .icon-auth path {
fill: var(--color-beige) !important;
}
/* --- Dropdown panier --- */
.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;
}
.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, sans-serif); color: var(--color-noir); }
.cart-dropdown-item-name {
font-size: var(--fs-small);
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, sans-serif);
font-size: var(--fs-small);
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: var(--fs-small); font-weight: 500; min-width: 16px; text-align: center; }
.cart-dropdown-item-price { font-size: var(--fs-small); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.cart-dropdown-empty { font-size: var(--fs-small); opacity: 0.6; padding: 16px 18px; margin: 0; }
.cart-dropdown-item--unavailable { opacity: 0.6; }
.cart-dropdown-item-rupture { font-size: var(--fs-micro); font-weight: 500; 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: var(--fs-small); 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: var(--fs-micro);
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); }
/* ==========================================================================
07. 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);
transition: transform 0.3s var(--ease-nav), opacity 0.3s var(--ease-nav), width 0.3s var(--ease-nav);
transform-origin: center;
}
.hamburger .hamburger-bars {
display: flex;
flex-direction: column;
gap: 5px;
transition: transform 0.3s var(--ease-nav);
}
.hamburger.is-active .hamburger-bars { transform: rotate(90deg); }
.hamburger.is-active .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger-bar:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-active .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-panel {
position: fixed !important;
top: var(--header-height) !important;
bottom: 0 !important;
right: 0 !important;
left: auto !important;
width: auto !important;
min-width: 300px !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: var(--fs-body-lg) !important;
font-family: var(--font-main, sans-serif) !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) !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: var(--fs-body-lg) !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) !important; color: var(--color-beige) !important; }
#_mobile_actions #_desktop_user_info .user-info a:hover span,
#_mobile_actions #_mobile_user_info_clone .user-info a:hover span,
#_mobile_actions #_desktop_user_info .user-info a:hover .icon-auth,
#_mobile_actions #_mobile_user_info_clone .user-info a:hover .icon-auth { color: var(--color-beige) !important; }
#_mobile_actions #_desktop_user_info .user-info a:hover .icon-auth path,
#_mobile_actions #_mobile_user_info_clone .user-info a:hover .icon-auth path { fill: 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: var(--fs-body-lg) !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; }
#_mobile_actions #_desktop_cart .blockcart .header,
#_mobile_actions #_mobile_cart_clone .blockcart .header { position: static !important; }
.cart-icon-wrapper {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
}
.cart-icon-wrapper .cart-badge--mobile {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
transform: translate(40%, -40%) !important;
margin: 0 !important;
padding: 0 4px !important;
background-color: var(--color-beige) !important;
z-index: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.mobile-panel #_mobile_actions #_desktop_cart .blockcart .cart-badge--mobile,
.mobile-panel #_mobile_actions #_mobile_cart_clone .blockcart .cart-badge--mobile { color: var(--color-noir) !important; }
/* Panier mobile : clone de .header-nav-cart (le vrai bouton du header,
plus fiable que l'ancien placeholder #_desktop_cart) */
#_mobile_actions .header-nav-cart {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
align-self: auto !important;
gap: 10px !important;
padding: 18px 20px !important;
font-size: var(--fs-body-lg) !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
text-decoration: none !important;
text-transform: none !important;
width: 100% !important;
height: auto !important;
border-bottom: var(--border) !important;
border-top: var(--border) !important;
position: static !important;
}
#_mobile_actions .header-nav-cart::before {
content: 'panier';
order: 1;
}
#_mobile_actions .header-nav-cart .cart-icon-wrapper {
order: 2;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
}
#_mobile_actions .header-nav-cart .icon-cart {
width: 20px !important;
height: 22px !important;
color: var(--color-beige) !important;
}
#_mobile_actions .header-nav-cart .cart-badge {
position: absolute !important;
top: 0 !important;
right: 0 !important;
transform: translate(50%, -50%) !important;
display: none;
margin: 0 !important;
padding: 0 !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
border-radius: 50% !important;
background-color: var(--color-beige) !important;
color: var(--color-noir) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
#_mobile_actions .header-nav-cart .cart-badge.is-visible { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
/* ==========================================================================
08. HOMEPAGE
========================================================================== */
.homepage-content {
width: 100%;
max-width: var(--max-content-width);
margin: 0 auto;
}
/* --- Hero --- */
.hero-section {
display: grid;
grid-template-columns: var(--col-left) var(--col-right);
min-height: calc(100svh - var(--header-height));
height: auto;
overflow: visible;
position: relative;
}.hero-section, .hero-section * { color: var(--color-noir); }
.hero-nav-space { height: var(--header-height); flex-shrink: 0; }
.hero-left {
display: grid;
grid-template-rows: 1fr 1fr;
overflow: hidden;
height: calc(100svh - var(--header-height));
}
.hero-section::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: var(--col-left);
width: 1px;
background-color: var(--color-noir);
pointer-events: none;
}
.hero-left-top {
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.hero-tagline { padding: clamp(var(--grid-gap), 3svh, var(--grid-gap)); margin: 0; }
.hero-left-bottom {
display: flex;
flex-direction: column;
overflow: hidden;
padding: var(--grid-gap);
padding-top: 0;
}
.hero-image-block {
flex: 1;
min-height: 0;
overflow: hidden;
}
.hero-image-main {
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-image-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-right { display: flex; flex-direction: column; overflow: hidden; }
.hero-description-main {
padding: var(--grid-gap) 0 var(--grid-gap) var(--grid-gap);
flex-shrink: 0;
width: calc(100% - 120px);
}
.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: visible; 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: var(--lh-subtitle); 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, sans-serif);
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: flex;
min-height: calc(100vh * 5 / 6 - var(--header-height));
}
@media (max-width: 700px) { .carousel-wrapper { min-height: calc(100vw * 0.6); } }
.carousel-wrapper > div:first-child { flex: 0 0 8%; width: 8%; }
.carousel-sidebar {
flex: 0 0 350px;
width: 350px;
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, sans-serif);
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
color: var(--color-noir);
user-select: none;
transition: background-color 0.15s ease, 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) !important; color: var(--color-beige) !important; padding-left: var(--grid-gap) !important; }
.carousel-nav-item.is-clicked span:not(.nav-icon),
.carousel-nav-item.is-clicked .nav-icon,
.carousel-nav-item.is-clicked .nav-icon svg,
.carousel-nav-item.is-clicked .nav-icon svg path { color: var(--color-beige) !important; stroke: var(--color-beige) !important; }
.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[aria-selected="true"] { background-color: var(--color-noir); color: var(--color-beige); }
.carousel-nav-item[aria-selected="true"] span:not(.nav-icon),
.carousel-nav-item[aria-selected="true"] .nav-icon,
.carousel-nav-item[aria-selected="true"] .nav-icon svg,
.carousel-nav-item[aria-selected="true"] .nav-icon svg path { color: var(--color-beige) !important; stroke: var(--color-beige) !important; }
.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, sans-serif); 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, sans-serif);
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;
flex: 1;
border-left: var(--border);
}
/* Styles communs aux boutons hint (carousel homepage et page produit) */
.carousel-hint,
.pp-also-hint {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--hint-size);
height: var(--hint-size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-beige) !important;
pointer-events: auto;
cursor: pointer;
user-select: none;
background: var(--color-noir);
border: 1px solid var(--color-noir);
border-radius: 999px;
box-shadow: var(--hint-shadow);
animation: var(--hint-animation);
transition: opacity 0.25s ease;
}
.carousel-hint:hover,
.pp-also-hint:hover { opacity: 0.8 !important; }
.carousel-hint svg,
.pp-also-hint svg { display: block !important; width: 30px !important; height: 30px !important; overflow: visible !important; }
.carousel-hint svg path,
.pp-also-hint svg path { stroke: var(--color-beige) !important; }
.carousel-hint.is-hidden,
.pp-also-hint.is-hidden { opacity: 0 !important; pointer-events: none !important; animation: none !important; }
/* Overrides carousel-hint */
.carousel-hint {
opacity: 1 !important;
right: 24px;
z-index: 999;
transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}
.carousel-hint svg path { transition: stroke 0.2s ease; }
@keyframes hint-pulse {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(8px); }
}
@media (max-width: 1480px) { .carousel-hint { display: flex !important; } }
.carousel-viewport {
overflow: hidden;
flex: 1;
cursor: grab;
transition: opacity 0.05s ease;
/* transform-based : pas de scrollLeft, pas de scroll-behavior */
}
.carousel-viewport:not(.is-ready) { opacity: 0; }
.carousel-viewport.is-dragging { cursor: grabbing; }
.carousel-track { display: flex; height: 100%; align-items: stretch; margin: 0; padding: 0; }
.carousel-card {
flex: 0 0 var(--carousel-card-w);
width: var(--carousel-card-w);
min-width: 250px;
display: flex;
flex-direction: column;
min-height: 0;
cursor: pointer;
transition: opacity 0.4s ease;
position: relative;
transform: translateZ(0);
backface-visibility: hidden;
border-right: var(--border);
border-left: none !important;
}
.carousel-card:last-child { margin-right: 0; }
.carousel-card-link {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
min-height: 0;
text-decoration: none !important;
color: inherit !important;
}
.carousel-card-link:hover,
.carousel-card-link:visited,
.carousel-card-link:active,
.carousel-card-link:focus { color: inherit !important; text-decoration: none !important; }
.carousel-card-img { flex: 1; overflow: hidden; padding: calc(var(--grid-gap) * 2); 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 {
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;
text-decoration: none !important;
}
.carousel-card-tags {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: 0;
padding-top: 10px;
padding-bottom: 12px;
text-align: center;
}
.carousel-card-tags span { font-family: var(--font-main, sans-serif); color: var(--color-noir); line-height: 1.1; text-align: center; text-decoration: none !important; }
.carousel-card-tags span::before, .carousel-card-tags span::after { content: none !important; display: none !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, sans-serif); text-align: center; padding: 6px var(--grid-gap); }
.carousel-card-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--grid-gap);
background-color: var(--color-noir);
color: var(--color-beige);
font-family: var(--font-main, sans-serif);
font-weight: 400;
text-decoration: none;
white-space: nowrap;
flex: 1;
align-self: stretch;
text-align: center;
transition: background-color 0.15s ease, 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; }
.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-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, sans-serif);
font-size: var(--fs-small);
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; }
#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, sans-serif); 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, sans-serif); color: var(--color-noir); line-height: 1.2; }
.accordion-ingredients li::before { content: '• ' !important; font-weight: 700 !important; }
/* --- Wellbeing --- */
.section-wellbeing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-gap);
width: 100%;
padding: 4%;
box-sizing: border-box;
}
.section-wellbeing p { color: var(--color-beige) !important; }
.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 h2 { color: var(--color-beige) !important; }
.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, sans-serif);
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); }
/* --- Ingrédients --- */
.section-ingredients { width: 100%; padding: 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, sans-serif);
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
border-bottom: var(--border);
padding: 8px 0;
}
.ingredients-link {
font-family: var(--font-main, sans-serif);
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); }
/* --- 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, sans-serif);
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; }
/* ==========================================================================
09. FOOTER
========================================================================== */
#footer { width: 100% !important; border-top: var(--border) !important; padding: 0 !important; }
#footer .container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; }
.kario-footer-links {
display: flex;
justify-content: space-around;
gap: clamp(16px, 4vw, 80px);
width: 100%;
padding: calc(var(--grid-gap) * 2);
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, sans-serif) !important; font-size: var(--fs-body) !important; font-weight: 700 !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 li:last-child { margin-bottom: 0 !important; }
.kario-footer-col a { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !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, sans-serif) !important; font-size: var(--fs-small) !important; font-weight: 400 !important; color: var(--color-noir) !important; margin: 0 !important; }
/* Footer responsive */
@media (max-width: 599px) {
.kario-footer-links {
flex-direction: column !important;
gap: calc(var(--grid-gap) * 1.5) !important;
padding: var(--grid-gap) !important;
}
.kario-footer-col { flex: 0 0 100% !important; width: 100% !important; }
.kario-footer-copy { padding: var(--grid-gap) !important; }
}
/* ==========================================================================
10. LA GAMME
Grille 4 colonnes : col-left/2 × 2 | col-right/2 × 2
Ligne 1 : bloc éditorial (span 2 col gauches) + 2 premiers produits
Lignes suivantes : 4 produits par ligne
========================================================================== */
.gamme-main {
background-color: var(--color-beige);
padding-bottom: var(--grid-gap);
}
@media (min-width: 2000px) {
body#category #content-wrapper {
border-left: var(--border);
border-right: var(--border);
}
}
/* --- Bloc éditorial : span 2 colonnes gauches --- */
.gamme-editorial {
grid-column: 1 / 3;
grid-row: span 4;
border-right: var(--border);
border-bottom: var(--border);
display: flex;
flex-direction: column;
}
.gamme-editorial-inner {
padding: var(--grid-gap);
display: flex;
flex-direction: column;
height: 100%;
}
.gamme-titre { margin: 0 0 var(--grid-gap) 0; }
.gamme-desc { margin: 0 0 auto 0;}
.gamme-photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(var(--grid-gap) / 2);
margin-top: var(--grid-gap);
}
.gamme-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.gamme-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- Cartes produits --- */
/* Masquer les éléments parasites du thème Classic sur la page catégorie */
body#category .block-categories,
body#category #search_filters_wrapper,
body#category nav.breadcrumb,
body#category #left-column { display: none !important; }
body#category #content-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
/*
* 4 colonnes :
* col A+B = col-left = calc(50% - gap/2) → chacune / 2
* col C+D = col-right = calc(50% + gap/2) → chacune / 2
* Chaque carte span 4 rows (img / nom / tags / footer) via subgrid
*/
.gamme-grid {
display: grid;
grid-template-columns:
calc((50% - var(--grid-gap) / 2) / 2)
calc((50% - var(--grid-gap) / 2) / 2 + 1px)
calc((50% + var(--grid-gap) / 2) / 2)
calc((50% + var(--grid-gap) / 2) / 2);
grid-template-rows: 60vh auto auto auto;
grid-auto-rows: 60vh auto auto auto;
align-items: stretch;
}
/* --- Bloc éditorial : span 2 colonnes gauches, span 4 rows --- */
.gamme-editorial {
grid-column: 1 / 3;
grid-row: 1 / 5;
border-right: var(--border);
border-bottom: var(--border);
display: flex;
flex-direction: column;
}
.gamme-editorial-inner {
padding: var(--grid-gap);
display: flex;
flex-direction: column;
height: 100%;
}
.gamme-titre { margin: 0 0 var(--grid-gap) 0; }
.gamme-photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(var(--grid-gap) / 2);
margin-top: var(--grid-gap);
}
.gamme-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.gamme-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- Cartes : chacune span 4 rows via subgrid --- */
.gamme-card {
grid-row: span 4;
display: grid;
grid-template-rows: subgrid;
border-bottom: var(--border);
max-height: 1000px;
}
/* Première carte de chaque ligne : margin-left -1px pour couvrir la border de l'éditorial */
.gamme-card:nth-child(2),
.gamme-card:nth-child(n+4):nth-child(4n) { margin-left: -1px; width: calc(100% + 1px); }
/* Desktop 4 colonnes : cards paires en col 3 → border-right, impaires en col 4 → pas de border-right */
.gamme-card:nth-child(even) { border-right: var(--border); }
.gamme-card:nth-child(odd) { border-right: none; }
/* child 5 exception → border-right */
.gamme-card:nth-child(5) { border-right: var(--border); }
.gamme-card-link {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
text-decoration: none;
color: var(--color-noir);
}
.gamme-card-link:hover .gamme-card-img img { transform: scale(1.04); }
/* Row 1 : image — remplit sa cellule, padding interne */
.gamme-card-img {
overflow: hidden;
border-bottom: var(--border);
padding: calc(var(--grid-gap) * 2);
box-sizing: border-box;
}
.gamme-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.5s var(--ease-main);
}
/* Row 2 : nom centré */
.gamme-card-name-block {
padding: 8px var(--grid-gap);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.gamme-card-name {
margin: 0 !important;
padding: 0 !important;
text-transform: lowercase;
color: var(--color-noir) !important;
text-align: center;
}
/* Row 3 : tags — s'étire, contenu centré verticalement */
.gamme-card-tags {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
padding: 10px var(--grid-gap) 12px;
width: calc(100% + 1px);
border-top: var(--border);
}
.gamme-card-tags span {
line-height: 1.3;
color: var(--color-noir) !important;
}
/* Row 4 : footer collé en bas */
.gamme-card-footer {
display: flex;
align-items: stretch;
border-top: var(--border);
align-self: end;
width: 100%;
}
/* Forcer padding sur le bloc nom — le h2 a des marges du thème */
.gamme-card-name-block .gamme-card-name {
margin: 0 !important;
padding: 0 !important;
}
.gamme-card-price {
font-weight: 700;
color: var(--color-noir) !important;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--grid-gap) / 2) var(--grid-gap);
flex: 1;
min-width: 0;
box-sizing: border-box;
border-right: var(--border);
}
.gamme-card-btn {
background-color: var(--color-noir);
color: var(--color-beige) !important;
padding: calc(var(--grid-gap) / 2) var(--grid-gap);
font-family: var(--font-main, sans-serif);
font-size: var(--fs-small);
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-width: 0;
box-sizing: border-box;
transition: background-color 0.3s var(--ease-nav);
}
.gamme-card-link:hover .gamme-card-btn { background-color: var(--color-noir-hover); }
@media (min-width: 768px) and (max-width: 1023px) {
.gamme-grid { grid-template-columns: var(--col-left) var(--col-right); }
.gamme-editorial {
grid-column: 1 / 3;
border-right: none;
}
/* 4 photos sur 1 seule row :
photo 1+2 occupent col-left, photo 3+4 occupent col-right
séparation verticale calée sur la frontière col-left / col-right
1 seul grid-gap : padding container + gap entre photos */
.gamme-photos {
display: grid;
grid-template-columns:
calc((var(--col-left) - var(--grid-gap) * 1.5) / 2)
calc((var(--col-left) - var(--grid-gap) * 1.5) / 2)
calc((var(--col-right) - var(--grid-gap) * 1.5) / 2)
calc((var(--col-right) - var(--grid-gap) * 1.5) / 2);
grid-template-rows: 1fr;
gap: var(--grid-gap);
padding: var(--grid-gap);
margin-top: 0;
box-sizing: border-box;
width: 100%;
}
/* Reset placement (hérité du desktop) */
.gamme-photo:nth-child(1),
.gamme-photo:nth-child(2),
.gamme-photo:nth-child(3),
.gamme-photo:nth-child(4) { grid-column: unset; grid-row: unset; }
/* Col-left (photos 1+2) : pas de ratio, elles remplissent la hauteur */
.gamme-photo:nth-child(1),
.gamme-photo:nth-child(2) { aspect-ratio: unset; }
/* Col-right (photos 3+4) : ratio 1/1 conservé */
.gamme-photo:nth-child(3),
.gamme-photo:nth-child(4) { aspect-ratio: 1 / 1; }
/* Reset border-right du desktop sur les cards paires */
.gamme-card:nth-child(even) { border-right: none; }
/* En 2 colonnes, les cards impaires (3, 5, 7…) sont à droite → border-left */
.gamme-card:nth-child(odd) { border-left: var(--border); }
}
@media (max-width: 767px) {
.gamme-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
grid-auto-rows: 50vw auto auto auto;
}
.gamme-editorial { grid-column: 1 / 3; border-right: none; }
.gamme-photos { display: none; }
.gamme-card-img { padding: var(--grid-gap); }
/* Reset border-right du desktop sur les cards paires */
.gamme-card:nth-child(even) { border-right: none; }
/* Maintenu en mobile également */
.gamme-card:nth-child(odd) { border-left: var(--border); }
/* Footer : price + btn prennent toute la largeur sans espace blanc */
.gamme-card-price { flex: 1; width: auto; box-sizing: border-box; }
.gamme-card-btn { flex: 1; width: auto; box-sizing: border-box; }
}
@media (max-width: 370px) {
.gamme-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
grid-auto-rows: 70vw auto auto auto;
}
.gamme-editorial { grid-column: 1; }
/* 1 seule colonne → toutes les borders de séparation disparaissent */
.gamme-card,
.gamme-card:nth-child(n) {
border-left: none !important;
border-right: none !important;
}
.gamme-card:nth-child(5) { border-right: none !important; }
}
/* ==========================================================================
11. PAGE PRODUIT
Galerie → info → achat → détail → FAQ → carousel "aussi"
========================================================================== */
.pp-main { background-color: var(--color-beige); }
.pp-top {
display: grid;
grid-template-columns: var(--col-left) var(--col-right);
min-height: calc(100vh - var(--header-height));
border-bottom: var(--border);
}
.pp-top > .pp-gallery,
.pp-top > .pp-info { min-width: 0; }
/* --- Galerie --- */
.pp-gallery { height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; overflow: hidden; }
.pp-gallery-main { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }
.pp-gallery-track { position: absolute; inset: var(--grid-gap); display: flex; gap: calc(var(--grid-gap) * 2); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.pp-gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; overflow: hidden; }
.pp-gallery-slide picture { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; }
.pp-cover-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; max-width: none !important; max-height: none !important; transform-origin: center center; }
.pp-gallery-slide.is-first .pp-cover-img { object-fit: contain; }
.pp-gallery-slide.is-cover .pp-cover-img { background-size: cover; background-position: center; }
.pp-gallery-arrows { position: absolute; bottom: calc(var(--grid-gap) * 1.5); left: 50%; transform: translateX(-50%); display: flex; gap: 24px; white-space: nowrap;}
.pp-gallery-arrow { width: 30px; height: 30px; background: var(--color-noir); border: var(--border); color: var(--color-beige); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color 0.15s, color 0.15s; }
.pp-gallery-arrow svg { width: 22px; height: 22px; flex-shrink: 0; display: block; color: var(--color-beige)!important; }
.pp-gallery-arrow:hover, .pp-gallery-arrow:focus-visible { background: var(--color-noir-hover); color: var(--color-beige); }
.pp-gallery-arrow:focus { outline: none; }
.pp-gallery-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-beige), 0 0 0 4px var(--color-noir); }
.pp-gallery-arrow svg path { color: var(--color-beige) !important; }
.pp-gallery-thumbs { flex: 0 0 calc(var(--pp-thumb-size) + var(--grid-gap) * 2); border-top: var(--border); display: flex; align-items: center; padding: var(--grid-gap); gap: var(--grid-gap); overflow: hidden; }
.pp-gallery-thumb { flex: 0 0 var(--pp-thumb-size); width: var(--pp-thumb-size); height: var(--pp-thumb-size); padding: 0; border: none; background: transparent; cursor: pointer; transition: opacity 0.2s; position: relative; overflow: hidden; }
.pp-gallery-thumb.is-active { opacity: 0.35; }
.pp-gallery-thumb:not(.is-active):hover { opacity: 0.7; }
.pp-gallery-thumb-inner { position: absolute; inset: 0; overflow: hidden; }
.pp-gallery-thumb-inner picture { display: block; width: 100%; height: 100%; }
.pp-gallery-thumb-inner img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center !important; }
/* --- Colonne info droite --- */
.pp-info { display: flex; flex-direction: column; border-left: var(--border); }
.pp-info-row-1 { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--grid-gap), 6svh, 8%) max(var(--grid-gap), 60px) clamp(var(--grid-gap), 6svh, 8%) var(--grid-gap); }
.pp-info-row-2 { display: grid; grid-template-columns: repeat(4, auto); border-top: var(--border); align-items: stretch; }
.pp-info-col { padding: calc(var(--grid-gap) / 2); border-right: var(--border); display: flex; align-items: stretch; }
.pp-info-col:last-child { border-right: none; }
.pp-reass-item--has-img { display: grid !important; grid-template-columns: auto 1fr; align-items: flex-end; gap: calc(var(--grid-gap) / 2); }
.pp-reass-img { width: auto; height: 40px; object-fit: contain; display: block !important; }
.pp-info-row-2 .pp-reass-text { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-micro) !important; font-weight: 500 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--color-noir) !important; margin: 0 !important; line-height: 1.35 !important; padding: 0 !important; }
.pp-reass-item { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
/* --- Typo & contenu info produit --- */
.pp-title { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; text-transform: lowercase; margin: 0 0 8px 0; }
.pp-subtitle-block { margin-bottom: 0; }
.pp-ingredients-label { font-weight: 900 !important; margin: 0 0 4px 0 !important; }
.pp-ingredient { display: inline; }
.pp-ingredient:first-child { display: block; }
.pp-ingredient + .pp-ingredient::before { content: ' / '; font-weight: 400; }
.pp-ingredient:first-child + .pp-ingredient::before { content: ''; }
.pp-plants-label { font-weight: 700 !important; margin: 0 !important; }
.pp-divider { border: none; border-top: var(--border); margin: 10px 0; }
.pp-section-label { letter-spacing: 0.04em !important; text-transform: uppercase !important; margin: 0 0 4px 0 !important; }
.pp-section-text { margin: 0 !important; }
.pp-benefices-text { font-size: var(--fs-body-lg) !important; font-weight: 500 !important; line-height: 1.4 !important; }
.pp-dose-list { list-style: none; padding: 0; margin: 0; }
.pp-dose-list li { font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: var(--lh-body-relaxed) !important; padding-left: 14px; position: relative; }
.pp-dose-list li::before { content: '·'; position: absolute; left: 0; }
/* --- Accordéon info produit --- */
.pp-accordion-trigger {
width: 100%;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-family: var(--font-main, sans-serif);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-noir);
}
.pp-accordion-trigger--left { justify-content: flex-start; }
.pp-accordion-trigger--right { justify-content: flex-end; }
.pp-accordion-icon { position: relative; display: block; width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.4s var(--ease-nav); font-size: 0; }
.pp-accordion-icon::before, .pp-accordion-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pp-accordion-icon::before { width: 10px; height: 1.5px; }
.pp-accordion-icon::after { width: 1.5px; height: 10px; transition: transform 0.4s var(--ease-nav); }
.pp-accordion-trigger[aria-expanded="true"] .pp-accordion-icon { transform: rotate(135deg); }
.pp-accordion-body { overflow: hidden; height: 0; transition: height 0.45s var(--ease-nav); font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: var(--lh-body-relaxed) !important; }
.pp-accordion-inner { padding-top: 12px; }
/* --- Bloc achat --- */
.pp-buy-block { display: flex; flex-direction: row; align-items: stretch; gap: calc(var(--grid-gap) * 0.75); margin: 10px 0; border-top: var(--border); border-bottom: var(--border); }
.pp-cure-choices { display: flex; flex-direction: column; flex-shrink: 0; justify-content: center; margin-right: var(--grid-gap); gap: 0; }
.pp-cure-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body) !important; font-weight: 400 !important; }
.pp-cure-choice:last-child { margin-bottom: 0; }
.pp-cure-radio-vis { display: none; }
.pp-cure-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-noir); flex-shrink: 0; position: relative; }
.pp-cure-choice.is-selected .pp-cure-dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--color-noir); }
.pp-buy-actions { display: flex; flex-direction: row; align-items: stretch; gap: 0; flex: 1; min-width: 0; border-left: var(--border); border-right: var(--border); min-height: 60px; }
.pp-price { font-size: var(--fs-subtitle) !important; font-weight: 700 !important; letter-spacing: var(--ls-subtitle) !important; padding: 0 16px; margin: 0; display: flex; align-items: center; align-self: stretch; border-right: var(--border); white-space: nowrap; min-width: 35%;}
.pp-qty-stepper { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; margin: 0; gap: 0; align-self: stretch; border-right: var(--border); min-width: 44px; }
.pp-qty-btn { flex: 1; background: var(--color-noir); border: none; cursor: pointer; font-family: var(--font-main, sans-serif); font-size: 1rem; font-weight: 500; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--color-beige) !important; transition: background 0.2s var(--ease-main); }
.pp-qty-btn > span { transform: translateY(-2px); display: block; color: var(--color-beige) !important; }
.pp-qty-btn:hover { background: var(--color-noir-hover); }
.pp-qty-val { flex: 2; font-family: var(--font-main, sans-serif); font-size: var(--fs-body-lg); font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; border-top: var(--border); border-bottom: var(--border); color: var(--color-noir); background: var(--color-beige); }
.pp-add-to-cart { flex: 1; background: var(--color-noir); color: var(--color-beige) !important; border: none; border-right: var(--border); font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; padding: 10px 20px; align-self: stretch; cursor: pointer; transition: background 0.2s var(--ease-main); text-align: center; line-height: 1.3; }
.pp-add-to-cart:hover { background: var(--color-noir-hover) !important; }
.pp-add-to-cart:active { background: var(--color-noir-hover); color: var(--color-beige) !important; }
.pp-add-to-cart .pp-btn-icon { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; }
.pp-add-to-cart .pp-btn-icon svg { width: 28px; height: 28px; }
.pp-add-to-cart .pp-btn-icon svg path { fill: var(--color-beige); }
/* --- États stock bouton ajouter au panier --- */
.pp-add-to-cart[disabled],
.pp-add-to-cart.is-out-of-stock,
.pp-add-to-cart.is-over-stock {
background: #a8a095 !important; /* gris neutre, visible sur fond clair ET sombre */
color: #fff !important;
cursor: not-allowed !important;
opacity: 1;
pointer-events: auto;
}
.pp-add-to-cart[disabled]:hover,
.pp-add-to-cart.is-out-of-stock:hover,
.pp-add-to-cart.is-over-stock:hover {
background: #a8a095 !important;
}
.pp-add-to-cart[disabled] .pp-btn-icon svg path,
.pp-add-to-cart.is-out-of-stock .pp-btn-icon svg path,
.pp-add-to-cart.is-over-stock .pp-btn-icon svg path {
fill: #fff;
}
.pp-qty-btn[disabled],
.pp-qty-btn:disabled {
opacity: 1;
cursor: default;
pointer-events: none;
background: #a8a095;
}
/* --- Rupture dans le panier --- */
.cart-item--out-of-stock,
.cart-item--at-max {
position: relative;
}
.cart-item--out-of-stock {
opacity: 0.7;
}
/* Message alerte sous le nom produit */
.cart-item-rupture-msg {
font-size: 0.78rem;
margin: 5px 0 0;
font-style: italic;
font-weight: 500;
}
.cart-item-rupture-msg--out {
color: #c0392b;
}
.cart-item-rupture-msg--max {
color: #b07800;
}
/* Bouton + désactivé dans le panier */
.cart-item--at-max .bootstrap-touchspin-up,
.cart-item--out-of-stock .bootstrap-touchspin-up {
opacity: 0.3;
cursor: not-allowed !important;
pointer-events: none;
}
/* Le bouton − reste toujours cliquable */
.cart-item--out-of-stock .bootstrap-touchspin-down,
.cart-item--at-max .bootstrap-touchspin-down {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
/* Input qty non-éditable : curseur neutre, pas de sélection de texte */
.js-cart-line-product-quantity[readonly] {
cursor: default;
-webkit-user-select: none;
user-select: none;
}
/* --- Responsive page produit --- */
@media (max-width: 768px) {
.pp-top { display: flex; flex-direction: column; }
.pp-gallery { position: relative; top: 0; height: auto; border-bottom: var(--border); }
.pp-gallery-main { height: 60vw; max-height: 480px; flex: 0 0 60vw; }
.pp-gallery-thumbs { display: none; }
.pp-gallery-arrows { left: auto; transform: translateY(-50%); top: 50%; bottom: auto; width: 100%; justify-content: space-between; padding: 0 var(--grid-gap); box-sizing: border-box; }
.pp-info { border-left: none; }
.pp-info-row-1 { padding: 8%; }
}
@media (max-width: 500px) {
.pp-detail { flex-direction: column; }
.pp-detail-right { width: 100% !important; height: 60vw; max-height: 420px; order: 1; }
.pp-detail-img { inset: 8% !important; width: calc(100% - 16%) !important; height: calc(100% - 16%) !important; }
.pp-detail-left { width: 100% !important; flex-shrink: 1; padding: 0 var(--grid-gap) var(--grid-gap) var(--grid-gap) !important; text-align: left !important; order: 2; }
.pp-detail-label, .pp-detail-body, .pp-detail-body--center, .pp-nutri-text { text-align: left !important; }
.pp-faq { flex-direction: column; }
.pp-faq-left { width: 100% !important; height: 56vw; max-height: 380px; order: 1; }
.pp-faq-right { padding: var(--grid-gap) !important; order: 2; }
}
/* --- Section détail produit --- */
.pp-detail { display: flex; }
.pp-detail-left { padding: 4% 8% 4% 4%; display: flex; flex-direction: column; width: var(--col-left); flex-shrink: 0; box-sizing: border-box; }
.pp-detail-left > .pp-divider:first-child { margin-top: 0; }
.pp-detail-left > .pp-divider:last-child { margin-bottom: 0; }
.pp-detail-right { flex: 1; position: relative; overflow: hidden; min-height: 200px; }
.pp-detail-img { position: absolute; inset: 8% 8% 8% 0; width: calc(100% - 8%); height: calc(100% - 16%); object-fit: cover; object-position: center; display: block; }
.pp-detail-section { padding: calc(var(--grid-gap) * 0.5) 0; }
.pp-detail-label { text-align: right; margin-bottom: 8px !important; }
.pp-detail-body { font-size: var(--fs-body) !important; font-weight: 500 !important; line-height: var(--lh-body-relaxed) !important; margin: 0 !important; text-align: right; }
.pp-detail-body--center { text-align: right; }
.pp-nutri-text { font-size: var(--fs-body) !important; font-weight: 500 !important; line-height: var(--lh-body-relaxed) !important; text-align: right; margin: 0 !important; }
.pp-nutri-text em { font-style: italic; font-size: var(--fs-small) !important; }
/* --- FAQ --- */
.pp-faq { display: flex; border-top: var(--border); }
.pp-faq-left { position: relative; width: var(--col-left); flex-shrink: 0; overflow: hidden; min-height: 200px; }
.pp-faq-img-wrapper { display: none; }
.pp-faq-img { position: absolute; inset: 8%; object-fit: cover; display: block; width: calc(100% - 16%); height: calc(100% - 16%); }
.pp-faq-right { flex: 1; padding: 8% 8% 8% 0; display: flex; flex-direction: column; }
.pp-faq-title { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: var(--lh-title) !important; letter-spacing: var(--ls-title) !important; margin: 0 0 var(--grid-gap) 0; }
.pp-faq-item { padding: 6px 0; }
.pp-faq-trigger { width: 100%; background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-main, sans-serif); font-size: var(--fs-body) !important; font-weight: 400; color: var(--color-noir); text-align: left; }
.pp-faq-icon { position: relative; display: block; width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.4s var(--ease-nav); font-size: 0; }
.pp-faq-icon::before, .pp-faq-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pp-faq-icon::before { width: 10px; height: 1.5px; }
.pp-faq-icon::after { width: 1.5px; height: 10px; }
.pp-faq-trigger[aria-expanded="true"] .pp-faq-icon { transform: rotate(135deg); }
.pp-faq-body { overflow: hidden; height: 0; transition: height 0.45s var(--ease-nav); }
.pp-faq-inner { padding-top: 10px; }
.pp-faq-body p { font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: var(--lh-body-relaxed) !important; margin: 0 !important; color: var(--color-gris); }
.pp-faq-contact { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 16px 0; font-size: var(--fs-body) !important; font-weight: 400 !important; border-bottom: var(--border); }
.pp-faq-contact-link { text-decoration: underline; text-underline-offset: 3px; color: var(--color-noir); font-weight: 400; }
/* --- Carousel "vous aimerez aussi" --- */
.pp-also-section { position: static !important; z-index: auto !important; border-top: var(--border); border-bottom: none !important; }
.pp-also-layout { display: flex; width: 100%; }
.pp-also-products-area { flex: 1; min-width: 0; padding-left: 10%; box-sizing: border-box; position: relative; }
.pp-also-col-right { flex: 0 0 10%; width: 10%; border-left: var(--border); }
/* Overrides pp-also-hint */
.pp-also-hint { z-index: 2; }
.pp-also-hint--left { left: calc(10% + 24px); }
.pp-also-hint--right { right: 24px; }
.pp-also-products-area .carousel-viewport {
overflow: hidden;
cursor: grab;
border-left: var(--border);
position: relative;
z-index: 0;
}
.pp-also-products-area .carousel-viewport.is-dragging { cursor: grabbing; }
.pp-also-products-area .carousel-track { display: flex; height: auto; align-items: stretch; }
.pp-also-products-area .carousel-card { height: auto; }
.pp-also-products-area .carousel-card-link,
.pp-also-products-area .carousel-card-link:hover,
.pp-also-products-area .carousel-card-link:visited,
.pp-also-products-area .carousel-card-link:active,
.pp-also-products-area .carousel-card-link:focus { text-decoration: none !important; color: inherit !important; }
body .pp-also-products-area a.carousel-card-link,
body .pp-also-products-area a.carousel-card-link:hover,
body .pp-also-products-area a.carousel-card-link:visited,
body .pp-also-products-area a.carousel-card-link:active,
body .pp-also-products-area a.carousel-card-link:focus { text-decoration: none !important; color: inherit !important; }
.pp-also-products-area .carousel-card-name,
.pp-also-products-area .carousel-card-tags,
.pp-also-products-area .carousel-card-tags span,
.pp-also-products-area .carousel-card-price { text-decoration: none !important; }
.pp-also-products-area .carousel-card-img { aspect-ratio: 1 / 1; flex: none; padding: calc(var(--grid-gap) * 2); }
.pp-also-products-area .carousel-card-img img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 769px) and (max-width: 1669px) {
.pp-info-row-1 { padding: clamp(var(--grid-gap), 6svh, 8%) max(var(--grid-gap), 60px) clamp(var(--grid-gap), 6svh, 8%) var(--grid-gap); }
}
@media (max-width: 1265px) {
.pp-price { border-left: var(--border); }
.pp-buy-block { flex-direction: column; gap: 0; margin-bottom: 0; }
.pp-cure-choices { flex-direction: column; margin-right: 0; padding-bottom: 15px; margin-top: 15px; border-bottom: var(--border); gap: 2px; }
.pp-cure-choice { flex: 0 0 auto; }
.pp-buy-actions { border-left: none; border-right: none; }
.pp-price { padding: 0 12px; }
.pp-add-to-cart { padding: 10px 14px; }
.pp-info-row-2 { grid-template-columns: repeat(2, 1fr); }
.pp-info-col:nth-child(2) { border-right: none; }
.pp-info-col:nth-child(3) { border-top: var(--border); }
.pp-info-col:nth-child(4) { border-top: var(--border); border-right: none; }
}
@media (min-width: 999px) and (max-width: 1480px) {
.pp-info-row-2 .pp-reass-text { font-size: var(--fs-micro) !important; }
}
@media (max-width: 520px) {
.pp-add-to-cart .pp-btn-text { display: none; }
.pp-add-to-cart .pp-btn-icon { display: flex; }
.pp-add-to-cart { flex: 0 0 auto; padding: 0 6%; }
.pp-price { flex: 1; justify-content: center; }
.pp-cure-choice label { margin-bottom: 0 !important; }
}
@media (max-width: 500px) {
.pp-top { min-height: 0; }
.pp-info-row-1 { padding: 8%; }
}
/* ==========================================================================
12. PAGES COMPTE A (login / password / inscription)
========================================================================== */
body#authentication #content-wrapper,
body#password #content-wrapper,
body#registration #content-wrapper {
width: 100%;
}
body#authentication #content-wrapper,
body#password #content-wrapper { align-items: center !important; }
body#authentication #main,
body#password #main,
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: var(--fs-display) !important; font-weight: 500 !important; line-height: var(--lh-display) !important; margin: 0 !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; }
body#authentication hr, body#password hr { border-color: var(--color-noir) !important; margin-top: 20px !important; margin-bottom: 20px !important; }
/* Liens secondaires */
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: var(--fs-small) !important; font-weight: 400 !important; margin: 0 !important; }
body#authentication .no-account a { font-size: var(--fs-small) !important; font-weight: 400 !important; }
body#password .page-footer a,
body#password #back-to-login { font-size: var(--fs-small) !important; font-weight: 400 !important; }
body#password .hidden-sm-up,
body#password .form-control-submit.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; }
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; }
body#password .send-renew-password-link { font-size: var(--fs-small) !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; }
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: var(--fs-small) !important; font-weight: 400 !important; color: var(--color-noir) !important; line-height: 1.4 !important; text-transform: lowercase !important; }
body#registration .register-form > p { font-size: var(--fs-small) !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; }
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: var(--fs-micro) !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 .radio-inline { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-right: var(--grid-gap) !important; font-size: var(--fs-small) !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; }
/* Bouton submit — login */
body#authentication #submit-login { margin-top: 4% !important; }
/* Bouton mot de passe oublié */
body#password #send-reset-link,
body#password .form-control-submit { margin: 8px 0 0 0 !important; }
/* --- Compte responsive --- */
@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: var(--fs-title) !important; }
}
/* La case visuelle est portée par label::before — on neutralise le span natif PS */
.custom-checkbox input[type="checkbox"] + span {
display: none !important;
}
/* ==========================================================================
12B. FORMULAIRES — styles communs à toutes les pages formulaire
(authentication, password, registration, identity, checkout customer/login)
========================================================================== */
/* Raccourci lisible utilisé dans tout ce bloc */
/* Pages : #authentication #password #registration #identity
#checkout #customer-form #checkout #login-form */
/* --- form-group --- */
body#authentication .form-group,
body#password .form-group,
body#registration .form-group,
body#identity .form-group,
body#checkout #customer-form .form-group,
body#checkout #login-form .form-group {
display: flex !important;
flex-direction: column !important;
row-gap: 5px !important;
padding: 3px 4px !important;
overflow: visible !important;
margin: 0 !important;
}
/* identity a un row-gap légèrement différent */
body#identity .form-group { gap: 10px !important; padding: 0 !important; margin: 0; }
/* Annuler les marges Bootstrap sur .form-group.row */
body#authentication .form-group.row,
body#password .form-group.row,
body#registration .form-group.row,
body#identity .form-group.row,
body#checkout #customer-form .form-group.row,
body#checkout #login-form .form-group.row { margin-left: 0 !important; margin-right: 0 !important; }
/* --- Labels --- */
body#authentication .col-md-3.form-control-label,
body#password .form-control-label,
body#registration .col-md-3.form-control-label,
body#identity .col-md-3.form-control-label,
body#checkout #customer-form .col-md-3.form-control-label,
body#checkout #login-form .col-md-3.form-control-label {
font-size: var(--fs-small) !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;
}
/* Étoile rouge sur les labels required */
body#authentication .col-md-3.form-control-label.required::after,
body#password .form-control-label.required::after,
body#registration .col-md-3.form-control-label.required::after,
body#identity .col-md-3.form-control-label.required::after,
body#checkout #customer-form .col-md-3.form-control-label.required::after,
body#checkout #login-form .col-md-3.form-control-label.required::after { content: " *" !important; color: var(--color-error) !important; }
/* --- Neutraliser les colonnes Bootstrap --- */
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-"],
body#identity .col-md-6, body#identity .js-input-column,
body#identity .form-group [class*="col-md-"],
body#checkout #customer-form .col-md-6, body#checkout #customer-form .js-input-column,
body#checkout #customer-form .form-group [class*="col-md-"],
body#checkout #login-form .col-md-6, body#checkout #login-form .js-input-column,
body#checkout #login-form .form-group [class*="col-md-"] {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
flex: none !important;
overflow: visible !important;
}
/* Masquer col form-control-comment Bootstrap */
body#authentication .col-md-3.form-control-comment,
body#registration .col-md-3.form-control-comment,
body#identity .col-md-3.form-control-comment,
body#checkout #customer-form .col-md-3.form-control-comment,
body#checkout #login-form .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-control-comment visible (petite note sous l'input) */
body#registration .form-control-comment,
body#identity .form-control-comment { display: block !important; margin-top: 2px !important; padding: 0 !important; }
body#registration .form-control-comment { font-size: var(--fs-micro) !important; font-weight: 400 !important; color: var(--color-noir) !important; width: 100% !important; max-width: none !important; line-height: 1.4 !important; text-transform: lowercase !important; }
body#checkout #customer-form .js-input-column .form-control-comment,
body#checkout #login-form .js-input-column .form-control-comment { display: block !important; font-size: var(--fs-micro) !important; color: var(--color-noir) !important; opacity: 1 !important; margin-top: 4px !important; }
/* --- Inputs .form-control --- */
body#authentication .form-control,
body#password .form-control,
body#registration .form-control,
body#identity .form-control,
body#checkout #customer-form .form-control,
body#checkout #login-form .form-control {
font-size: var(--fs-body) !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;
height: auto !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
body#password .form-control { min-height: 48px !important; }
/* Placeholder */
body#password .form-control::placeholder,
body#registration .form-control::placeholder,
body#identity .form-control::placeholder,
body#checkout #customer-form .form-control::placeholder,
body#checkout #login-form .form-control::placeholder { color: var(--color-noir) !important; opacity: 0.5 !important; }
/* Hover */
body#authentication .form-control:hover,
body#password .form-control:hover,
body#registration .form-control:hover { outline: none !important; box-shadow: none !important; }
/* Focus */
body#authentication .form-control:focus,
body#password .form-control:focus,
body#registration .form-control:focus,
body#identity .form-control:focus,
body#checkout #customer-form .form-control:focus,
body#checkout #login-form .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,
body#identity .form-control:-webkit-autofill,
body#identity .form-control:-webkit-autofill:hover,
body#identity .form-control:-webkit-autofill:focus,
body#checkout #customer-form .form-control:-webkit-autofill,
body#checkout #login-form .form-control:-webkit-autofill {
-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 groups (champ mot de passe + bouton Afficher) --- */
body#authentication .input-group,
body#registration .input-group,
body#identity .input-group,
body#checkout #customer-form .input-group,
body#checkout #login-form .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),
body#identity .input-group:has(input:focus),
body#checkout #customer-form .input-group:has(input:focus),
body#checkout #login-form .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,
body#identity .input-group .form-control,
body#checkout #customer-form .input-group .form-control,
body#checkout #login-form .input-group .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,
body#identity .input-group-btn,
body#checkout #customer-form .input-group-btn,
body#checkout #login-form .input-group-btn { display: flex !important; }
body#authentication .input-group-btn .btn,
body#registration .input-group-btn .btn,
body#identity .input-group-btn .btn,
body#checkout #customer-form .input-group-btn .btn,
body#checkout #login-form .input-group-btn .btn {
font-size: var(--fs-small) !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,
body#identity .input-group-btn .btn:hover,
body#checkout #customer-form .input-group-btn .btn:hover,
body#checkout #login-form .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; }
/* --- Boutons submit --- */
body#authentication #submit-login,
body#password #send-reset-link,
body#password .form-control-submit,
body#registration .form-control-submit,
body#identity .form-control-submit,
body#checkout #customer-form .btn-primary.continue,
body#checkout #login-form .btn-primary.continue {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: unset !important;
padding: 14px var(--grid-gap) !important;
font-size: var(--fs-body) !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;
float: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color 0.5s var(--ease-main) !important;
}
/* Hover & focus submit */
body#authentication #submit-login:hover,
body#authentication #submit-login:focus-visible,
body#password #send-reset-link:hover,
body#password .form-control-submit:hover,
body#registration .form-control-submit:hover,
body#registration .form-control-submit:focus-visible,
body#identity .form-control-submit:hover,
body#checkout #customer-form .btn-primary.continue:hover,
body#checkout #login-form .btn-primary.continue:hover { background-color: var(--color-noir-hover) !important; outline: none !important; }
body#password #send-reset-link:focus-visible,
body#password .form-control-submit:focus-visible,
body#registration .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 #submit-login:not(:focus-visible) { outline: none !important; }
/* --- Checkboxes (shared) — case carrée custom, texte principal gras --- */
/* Masquer la case native */
body#registration .custom-checkbox input[type="checkbox"],
body#identity .custom-checkbox input[type="checkbox"],
body#checkout .custom-checkbox input[type="checkbox"] {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
}
/* Case visuelle via ::before sur le label */
body#registration .custom-checkbox label,
body#identity .custom-checkbox label,
body#checkout .custom-checkbox label {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 0 !important;
column-gap: 10px !important;
cursor: pointer !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
position: relative !important;
width: 100% !important;
}
body#checkout .custom-checkbox label > b {
display: inline !important;
flex: none !important;
}
body#registration .custom-checkbox label::before,
body#identity .custom-checkbox label::before,
body#checkout .custom-checkbox label::before {
content: "" !important;
display: inline-flex !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
margin-top: 2px !important;
border: var(--border) !important;
background-color: var(--color-beige) !important;
border-radius: 0 !important;
}
/* Coche quand coché
NB : dans le HTML généré par PrestaShop, l'input est À L'INTÉRIEUR du label
(), pas son frère. Le sélecteur "input:checked + label"
ne peut donc jamais matcher : on utilise :has() pour cibler le label parent. */
body#registration .custom-checkbox label:has(> input[type="checkbox"]:checked)::before,
body#identity .custom-checkbox label:has(> input[type="checkbox"]:checked)::before,
body#checkout .custom-checkbox label:has(> input[type="checkbox"]:checked)::before {
background-color: var(--color-noir) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F5F0E8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px 8px !important;
}
/* Tout le label en gras, sauf l'em italique */
body#registration .custom-checkbox label,
body#identity .custom-checkbox label,
body#checkout .custom-checkbox label {
font-weight: 700 !important;
}
body#checkout .custom-checkbox label > span {
position: unset !important;
flex: unset !important;
}
/* em (sous-texte italique) : normal, pleine largeur sous le texte */
body#registration .custom-checkbox label em,
body#identity .custom-checkbox label em,
body#checkout .custom-checkbox label em {
font-weight: 400 !important;
font-style: italic !important;
display: block !important;
width: 100% !important;
padding-left: calc(16px + 10px) !important;
margin-top: 2px !important;
opacity: 0.75 !important;
line-height: 1.4 !important;
}
/* Astérisques checkboxes required : gérés en JS (custom.js) */
body#registration .form-group:has(input[name="customer_privacy"]) .custom-checkbox label::after,
body#identity .form-group:has(input[name="customer_privacy"]) .custom-checkbox label::after,
body#checkout .form-group:has(input[name="customer_privacy"]) .custom-checkbox label::after {
content: none !important;
}
/* --- Masquer offres partenaires sur toutes les pages formulaire --- */
body#authentication .form-group:has(input[name="optin"]),
body#registration .form-group:has(input[name="optin"]),
body#identity .form-group:has(input[name="optin"]),
body#checkout #customer-form .form-group:has(input[name="optin"]) { display: none !important; }
/* --- Masquer labels vides --- */
body#registration .form-group .form-control-label:empty,
body#registration .form-group .col-md-3.form-control-label:empty,
body#identity .form-group .form-control-label:empty,
body#identity .form-group .col-md-3.form-control-label:empty,
body#checkout #customer-form .form-control-label:empty,
body#checkout #customer-form .form-group .col-md-3.form-control-label:empty { display: none !important; }
body#registration .form-group:has(.custom-checkbox) .form-control-label,
body#identity .form-group:has(.custom-checkbox) .form-control-label,
body#checkout #customer-form .form-group:has(.custom-checkbox) .form-control-label { display: none !important; }
body#checkout #customer-form .form-group:has(.form-control-label:empty):not(:has(.custom-checkbox)) { display: none !important; }
body#checkout #customer-form .form-group:has(.custom-checkbox) .form-control-label::after,
body#checkout #customer-form .form-group:has(.custom-checkbox) .form-control-label::before { content: "" !important; display: none !important; }
/* ==========================================================================
/* ==========================================================================
13A. PAGES COMPTE B — adresses, historique, avoirs, RGPD
========================================================================== */
/* --- Sous-pages compte (adresses, historique, avoirs, bons, RGPD) --- */
/* Layout commun */
body#my-account #content-wrapper {
margin-top: var(--header-height) !important;
background-color: var(--color-beige) !important;
padding: 4% calc(var(--grid-gap) * 2) 8% !important;
}
body#history #content-wrapper {
margin-top: var(--header-height) !important;
background-color: var(--color-beige) !important;
padding: 4% calc(var(--grid-gap) * 2) 8% !important;
max-width: none !important;
}
/* Fix tableau historique entre 768px et 991px */
body#history .table { display: table !important; width: 100% !important; }
body#history .table thead { display: table-header-group !important; }
body#history .table tbody { display: table-row-group !important; }
body#history .table tr { display: table-row !important; }
body#history .table th,
body#history .table td { display: table-cell !important; word-break: break-word; font-size: 0.75rem !important; padding: 6px 4px !important; vertical-align: middle !important; }
body#history .hidden-md-down { display: table-cell !important; }
body#history .table th:nth-child(1), body#history .table td:nth-child(1) { min-width: 170px; }
body#history .table th:nth-child(2), body#history .table td:nth-child(2) { min-width: 80px; }
body#history .table th:nth-child(3), body#history .table td:nth-child(3) { min-width: 100px; }
body#history .table th:nth-child(4), body#history .table td:nth-child(4) { min-width: 120px; }
body#history .table th:nth-child(5), body#history .table td:nth-child(5) { min-width: 120px; }
body#history .table th:nth-child(6), body#history .table td:nth-child(6) { min-width: 130px; }
body#history .table th:nth-child(7), body#history .table td:nth-child(7) { min-width: 200px; }
body#history .table th:nth-child(8), body#history .table td:nth-child(8) { min-width: 60px; }
body.page-customer-account .page-header,
body#addresses .page-header,
body#history .page-header,
body#discount .page-header,
body#order-slip .page-header,
body#module-psgdpr-gdpr .page-header {
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body.page-customer-account .page-header h1,
body#addresses .page-header h1,
body#history .page-header h1,
body#discount .page-header h1,
body#order-slip .page-header h1,
body#module-psgdpr-gdpr .page-header h1 {
font-size: var(--fs-title) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
color: var(--color-noir) !important;
margin: 0 !important;
}
/* Lien retour mon compte */
body.page-customer-account #footer-container,
body.page-customer-account .account-links,
body.page-customer-account .my-account-links { display: none !important; }
/* --- Adresses --- */
body#addresses .address {
border: var(--border);
padding: var(--grid-gap);
margin-bottom: var(--grid-gap);
background-color: var(--color-beige) !important;
}
body#addresses .address h4 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
margin: 0 0 8px 0 !important;
}
body#addresses address {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 400 !important;
font-style: normal !important;
color: var(--color-noir) !important;
line-height: 1.6 !important;
}
body#addresses .address-footer {
display: flex;
gap: var(--grid-gap);
margin-top: var(--grid-gap);
padding-top: var(--grid-gap);
border-top: var(--border);
}
body#addresses .address-footer a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
}
body#addresses .address-footer i { display: none !important; }
body#addresses .addresses-footer { margin-top: var(--grid-gap); padding-top: var(--grid-gap); border-top: var(--border); }
body#addresses .addresses-footer a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
color: var(--color-beige) !important;
background: var(--color-noir) !important;
padding: 12px var(--grid-gap) !important;
display: inline-block !important;
text-decoration: none !important;
text-transform: lowercase !important;
transition: background 0.2s var(--ease-main) !important;
}
body#addresses .addresses-footer a *,
body#addresses .addresses-footer a span { color: var(--color-beige) !important; }
body#addresses .addresses-footer a:hover { background: var(--color-noir-hover) !important; }
body#addresses .addresses-footer i { display: none !important; }
/* --- Historique commandes --- */
body#history h6 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 400 !important;
margin: 0 0 var(--grid-gap) 0 !important;
text-transform: lowercase !important;
color: var(--color-noir) !important;
}
body#history .table {
width: 100% !important;
border-collapse: collapse !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
table-layout: auto !important;
}
/* Neutralise table-striped et table-bordered du thème Classic */
body#history .table-striped tbody tr:nth-of-type(odd),
body#history .table-striped tbody tr:nth-of-type(even) {
background-color: transparent !important;
background: transparent !important;
}
body#history .table-bordered,
body#history .table-bordered th,
body#history .table-bordered td {
border-color: var(--color-noir) !important;
}
body#history .table th,
body#history .table td {
padding: 10px var(--grid-gap) !important;
border: none !important;
border-bottom: 1px solid var(--color-noir) !important;
text-align: left !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
text-transform: lowercase !important;
vertical-align: middle !important;
background-color: transparent !important;
white-space: nowrap !important;
}
body#history .table thead th {
font-weight: 500 !important;
border-top: 1px solid var(--color-noir) !important;
border-bottom: 1px solid var(--color-noir) !important;
font-size: var(--fs-small) !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
background-color: transparent !important;
white-space: normal !important;
}
body#history .table tbody tr:last-child td { border-bottom: none !important; }
body#history .label { display: none !important; }
body#history .order-actions a,
body#history .view-order-details-link,
body#history .reorder-link {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
display: inline-block !important;
margin-right: 8px !important;
}
body#history .orders { display: none !important; }
body#history .table { display: table !important; }
body#history #content {
overflow-x: auto !important;
}
/* --- Avoirs & Bons de réduction --- */
body#order-slip h6,
body#discount h6 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 400 !important;
margin: 0 0 var(--grid-gap) 0 !important;
text-transform: lowercase !important;
}
body#order-slip .alert,
body#discount .alert {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
background: none !important;
border: var(--border) !important;
padding: var(--grid-gap) !important;
text-transform: lowercase !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* --- RGPD --- */
body#module-psgdpr-gdpr .psgdprinfo17 {
margin-bottom: calc(var(--grid-gap) * 2) !important;
padding: 0 !important;
background: transparent !important;
background-color: var(--color-beige) !important;
border: none !important;
box-shadow: none !important;
}
body#module-psgdpr-gdpr .page_content {
background: transparent !important;
background-color: var(--color-beige) !important;
}
body#module-psgdpr-gdpr h2 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-subtitle) !important;
font-weight: 500 !important;
margin: 0 0 var(--grid-gap) 0 !important;
text-transform: lowercase !important;
color: var(--color-noir) !important;
border-bottom: 1px solid var(--color-noir) !important;
padding-bottom: var(--grid-gap) !important;
background: transparent !important;
}
body#module-psgdpr-gdpr p,
body#module-psgdpr-gdpr .psgdprinfo17 p {
font-size: var(--fs-body) !important;
margin-bottom: var(--grid-gap) !important;
color: var(--color-noir) !important;
}
body#module-psgdpr-gdpr .psgdprgetdatabtn17 {
display: inline-block !important;
margin-right: var(--grid-gap) !important;
margin-top: 8px !important;
padding: 10px var(--grid-gap) !important;
background: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 500 !important;
text-decoration: none !important;
text-transform: lowercase !important;
border: none !important;
border-radius: 0 !important;
transition: background 0.2s var(--ease-main) !important;
}
body#module-psgdpr-gdpr .psgdprgetdatabtn17:hover { background: var(--color-noir-hover) !important; }
body#module-psgdpr-gdpr .container { padding: 0 !important; }
body#module-psgdpr-gdpr a { color: var(--color-noir) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
/* ==========================================================================
13. PAGES COMPTE B — dashboard (my-account) & identité
========================================================================== */
body#my-account .container {
padding-left: calc(var(--grid-gap) * 2) !important;
padding-right: calc(var(--grid-gap) * 2) !important;
}
/* Contrainte de largeur sur #main (pas sur .container, pour que les notifications restent pleine largeur) */
body#authentication #main,
body#registration #main,
body#password #main,
body#identity #main,
body#addresses #main,
body#discount #main,
body#order-slip #main,
body#module-psgdpr-gdpr #main {
max-width: 800px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: calc(var(--grid-gap) * 4) var(--grid-gap) !important;
}
/* .container pleine largeur sur ces pages */
body#identity .container,
body.page-customer-account .container,
body#addresses .container,
body#discount .container,
body#order-slip .container,
body#module-psgdpr-gdpr .container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
/* Section notifications : pleine largeur, sans padding de #main */
body#identity #notifications,
body.page-customer-account #notifications,
body#addresses #notifications,
body#discount #notifications,
body#order-slip #notifications,
body#module-psgdpr-gdpr #notifications {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body#identity .notifications-container,
body.page-customer-account .notifications-container,
body#addresses .notifications-container,
body#discount .notifications-container {
padding: 0 !important;
max-width: none !important;
width: 100% !important;
}
body#history .container {
max-width: none !important;
padding-left: calc(var(--grid-gap) * 2) !important;
padding-right: calc(var(--grid-gap) * 2) !important;
}
body#my-account .page-header,
body#identity .page-header {
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
}
body#my-account .page-header h1,
body#identity .page-header h1 {
font-size: var(--fs-title) !important;
font-weight: 500 !important;
line-height: var(--lh-title) !important;
letter-spacing: var(--ls-title) !important;
margin: 0 !important;
}
/* Dashboard : grille de tuiles */
body#my-account .kario-account-links {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--grid-gap) !important;
padding: 0 !important;
margin-top: calc(var(--grid-gap) * 2) !important;;
}
@media (max-width: 450px) {
}
body#my-account .kario-account-links a {
display: block !important;
width: 100% !important;
padding: 0 !important;
float: none !important;
}
body#my-account .kario-account-links a.col-lg-4,
body#my-account .kario-account-links a.col-md-6,
body#my-account .kario-account-links a.col-sm-6,
body#my-account .kario-account-links a.col-xs-12 {
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
float: none !important;
width: 100% !important;
margin-bottom: 0 !important;
}
body#my-account.page-my-account #content .links.kario-account-links a span.link-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
padding: var(--grid-gap) !important;
border: var(--border) !important;
background: transparent !important;
background-color: transparent !important;
color: var(--color-noir) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
text-transform: lowercase !important;
letter-spacing: var(--ls-body) !important;
transition: background-color 0.25s ease, color 0.25s ease !important;
box-shadow: none !important;
border-radius: 0 !important;
height: 100% !important;
min-height: 140px !important;
}
body#my-account.page-my-account #content .links.kario-account-links a i {
display: inline-block !important;
width: auto !important;
padding-bottom: 0 !important;
font-size: 32px !important;
color: inherit !important;
}
body#my-account.page-my-account #content .links.kario-account-links a:hover span.link-item {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
}
/* Bouton déconnexion */
body#my-account .kario-account-footer {
margin-top: calc(var(--grid-gap) * 2) !important;
border-top: var(--border) !important;
padding-top: var(--grid-gap) !important;
}
body#my-account .kario-logout-btn {
display: inline-block !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
color: var(--color-beige) !important;
background-color: var(--color-noir) !important;
text-transform: lowercase !important;
text-decoration: none !important;
padding: 14px var(--grid-gap) !important;
border: none !important;
transition: background 0.2s var(--ease-main) !important;
cursor: pointer !important;
}
body#my-account .kario-logout-btn:hover,
body#my-account .kario-logout-btn:active,
body#my-account .kario-logout-btn:focus {
background-color: var(--color-noir-hover) !important;
color: var(--color-beige) !important;
text-decoration: none !important;
}
/* Page identité : formulaire */
body#identity #main { max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; }
body#identity #customer-form { padding-bottom: 40px !important; }
body#identity #customer-form > div { width: 100% !important; overflow: visible !important; }
/* --- Identité : overrides spécifiques --- */
/* Pas de focus sur les champs standard (clavier géré via .using-keyboard) */
body#identity *:focus { outline: none !important; }
body#identity.using-keyboard *:focus-visible { outline: 2px solid var(--color-noir) !important; outline-offset: 3px !important; }
body#identity .radio-inline { cursor: pointer !important; }
body#identity .custom-radio input[type="radio"] { cursor: pointer !important; }
/* Astérisque rouge required — toutes les formes générées par PS */
body#identity .form-group .form-control-label.required::after,
body#identity label.required::after,
body#identity .form-control-label.required::after,
body#identity .form-control-label .required,
body#identity label .required,
body#identity sup,
body#identity label .required-field,
body#identity label .form-required,
body#identity label span.required,
body#identity .label-required::after,
body#identity abbr[title="required"] { color: var(--color-error) !important; }
/* Form-footer checkout */
body#checkout #customer-form .form-footer,
body#checkout #login-form .form-footer {
display: flex !important;
justify-content: flex-end !important;
margin-top: var(--grid-gap) !important;
padding-top: var(--grid-gap) !important;
clear: both !important;
}
/* Étoile rouge sur checkboxes required checkout : gérée en JS */
/* CGV */
body#checkout #conditions-to-approve li {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
body#checkout #conditions-to-approve .float-xs-left {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
position: relative !important;
margin-top: -6px !important;
}
/* Input positionné par-dessus, transparent, cliquable */
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"] {
position: absolute !important;
opacity: 0 !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
cursor: pointer !important;
z-index: 1 !important;
pointer-events: auto !important;
}
/* Case visuelle via le span natif PS */
body#checkout #conditions-to-approve .custom-checkbox span:not(.custom-radio) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
border: var(--border) !important;
background-color: var(--color-beige) !important;
border-radius: 0 !important;
pointer-events: none !important;
}
body#checkout #conditions-to-approve .custom-checkbox span:not(.custom-radio) i {
display: none !important;
}
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"]:checked + span:not(.custom-radio) {
background-color: var(--color-noir) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F5F0E8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px 8px !important;
}
body#checkout #conditions-to-approve .condition-label {
flex: 1 !important;
}
body#checkout #conditions-to-approve .condition-label label {
font-size: var(--fs-small) !important;
font-weight: 700 !important;
color: var(--color-noir) !important;
cursor: pointer !important;
margin: 0 !important;
}
/* Étoile required après le texte */
body#checkout #conditions-to-approve .condition-label label::after {
content: " *" !important;
color: var(--color-error) !important;
}
/* Mot de passe oublié (checkout) */
body#checkout .forgot-password a {
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* Bloc "Créez votre compte" */
body#checkout .form-informations {
padding: var(--grid-gap) 0 !important;
border-top: var(--border) !important;
border-bottom: var(--border) !important;
margin: var(--grid-gap) 0 !important;
}
body#checkout .form-informations-title {
font-size: var(--fs-body) !important;
font-weight: 500 !important;
color: var(--color-noir) !important;
}
body#checkout .form-informations-option,
body#checkout .form-informations-subtitle {
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
opacity: 1 !important;
}
/* Onglets Commander/Connexion */
body#checkout .nav-inline {
display: flex !important;
gap: 0 !important;
align-items: center !important;
border-bottom: none !important;
margin-bottom: var(--grid-gap) !important;
padding: 0 !important;
list-style: none !important;
}
body#checkout .nav-inline .nav-item { list-style: none !important; }
body#checkout .nav-inline .nav-link {
font-size: var(--fs-body) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
text-decoration: none !important;
padding: 10px var(--grid-gap) !important;
display: block !important;
opacity: 0.5 !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px !important;
}
body#checkout .nav-inline .nav-link.active {
opacity: 1 !important;
font-weight: 500 !important;
border-bottom-color: var(--color-noir) !important;
}
body#checkout .nav-inline .nav-separator {
opacity: 0.3 !important;
padding: 0 4px !important;
color: var(--color-noir) !important;
}
/* ==========================================================================
13B. DÉTAIL COMMANDE (order-detail)
========================================================================== */
body#order-detail #wrapper,
body#order-detail .container,
body#order-detail #content-wrapper {
background-color: var(--color-beige) !important;
}
body#order-detail .box {
background-color: transparent !important;
border: var(--border) !important;
border-radius: 0 !important;
padding: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
box-shadow: none !important;
}
body#order-detail .table {
background-color: transparent !important;
border: var(--border) !important;
border-radius: 0 !important;
}
body#order-detail .table thead th {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border: none !important;
padding: var(--grid-gap) !important;
}
body#order-detail .table tbody tr {
background-color: transparent !important;
}
body#order-detail .table tbody tr:nth-child(even) {
background-color: rgba(0,0,0,0.03) !important;
}
body#order-detail .table td {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
border-color: var(--color-noir) !important;
padding: var(--grid-gap) !important;
vertical-align: middle !important;
}
body#order-detail .page-header h1 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-display) !important;
font-weight: 500 !important;
line-height: var(--lh-display) !important;
letter-spacing: var(--ls-display) !important;
padding-top: var(--grid-gap) !important;
padding-left: var(--grid-gap) !important;
}
body#order-detail .label-pill {
border-radius: 0 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
letter-spacing: 0.05em !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
}
/* Masquer colonne "Poids" dans le tableau d'expédition (3e colonne) */
body#order-detail .table th:nth-child(3),
body#order-detail .table td:nth-child(3) {
display: none !important;
}
/* Ré-afficher la 3e colonne dans les tableaux qui en ont besoin */
body#order-detail #order-products th:nth-child(3),
body#order-detail #order-products td:nth-child(3),
body#order-detail #order-history th:nth-child(3),
body#order-detail #order-history td:nth-child(3) {
display: table-cell !important;
}
body#order-detail .button-primary {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px var(--grid-gap) !important;
text-decoration: none !important;
}
body#order-detail .button-primary:hover {
background-color: var(--color-noir-hover) !important;
}
/* Tableau produits — layout fixe pour aligner tfoot sur thead */
body#order-detail #order-products {
table-layout: fixed !important;
width: 100% !important;
}
body#order-detail #order-products thead th:nth-child(1) { width: 40% !important; }
body#order-detail #order-products thead th:nth-child(2) { width: 15% !important; }
body#order-detail #order-products thead th:nth-child(3) { width: 25% !important; }
body#order-detail #order-products thead th:nth-child(4) { width: 20% !important; }
body#order-detail #order-products tfoot td:nth-child(1),
body#order-detail #order-products tfoot td:nth-child(2) {
border: none !important;
background: transparent !important;
}
body#order-detail #order-products tfoot td[colspan="3"] {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
/* Formulaire message */
body#order-detail .order-message-form header h3 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
margin-bottom: var(--grid-gap) !important;
}
body#order-detail .order-message-form header p {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
margin-bottom: var(--grid-gap) !important;
}
body#order-detail select,
body#order-detail textarea {
border: var(--border) !important;
border-radius: 0 !important;
background-color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
box-shadow: none !important;
}
body#order-detail .order-message-form .form-fields,
body#order-detail .order-message-form .form-footer {
max-width: 600px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
body#order-detail .form-control-submit {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px calc(var(--grid-gap) * 2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body#order-detail .form-control-submit:hover {
background-color: var(--color-noir-hover) !important;
}
body#order-detail h3 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#order-detail .addresses {
padding-left: var(--grid-gap) !important;
padding-right: var(--grid-gap) !important;
}
body#order-detail #order-infos .box:nth-child(2) {
padding-left: var(--grid-gap) !important;
}
body#order-detail .addresses article h4 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
border-bottom: var(--border) !important;
padding-bottom: calc(var(--grid-gap) / 2) !important;
margin-bottom: calc(var(--grid-gap) / 2) !important;
}
body#order-detail address {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-style: normal !important;
}
/* ==========================================================================
13C. CONFIRMATION DE COMMANDE (order-confirmation)
========================================================================== */
body#order-confirmation #wrapper,
body#order-confirmation .container,
body#order-confirmation #content-wrapper {
background-color: var(--color-beige) !important;
}
/* Reset cards */
body#order-confirmation .card,
body#order-confirmation .card-block {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Titre */
body#order-confirmation .card-title.h1 {
font-size: var(--fs-display) !important;
font-weight: 500 !important;
line-height: var(--lh-display) !important;
letter-spacing: var(--ls-display) !important;
padding: 0 0 var(--grid-gap) !important;
border-bottom: var(--border) !important;
text-transform: none !important;
display: flex !important;
align-items: center !important;
gap: var(--grid-gap) !important;
margin: 0 0 calc(var(--grid-gap) * 2) !important;
}
body#order-confirmation .card-title.h1 .material-icons {
font-size: inherit !important;
}
/* Reset col-md-12 wrapper */
body#order-confirmation #content-hook_order_confirmation .col-md-12 {
padding: 0 !important;
}
/* Bloc texte intro */
body#order-confirmation #content-hook_order_confirmation {
padding: var(--grid-gap) !important;
border-bottom: var(--border) !important;
}
body#order-confirmation #content-hook_order_confirmation p,
body#order-confirmation #content-hook_order_confirmation #ps_cashondelivery-displayOrderConfirmation p {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
margin: 0 0 calc(var(--grid-gap) / 3) !important;
padding: 0 !important;
}
/* Section articles */
body#order-confirmation #order-items {
padding: var(--grid-gap) !important;
border-bottom: var(--border) !important;
}
/* Headers colonnes */
body#order-confirmation #order-items .card-title.h3 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: var(--color-noir) !important;
border-bottom: var(--border) !important;
padding: 0 0 var(--grid-gap) !important;
margin: 0 0 var(--grid-gap) !important;
}
/* Nom produit */
body#order-confirmation .order-line .details span {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
}
/* Total TTC mis en valeur */
body#order-confirmation .order-confirmation-table table .total-value td {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 700 !important;
padding-top: var(--grid-gap) !important;
}
/* Ligne produit */
body#order-confirmation .order-line {
display: flex !important;
align-items: center !important;
padding: var(--grid-gap) 0 !important;
border-bottom: var(--border) !important;
margin: 0 !important;
}
body#order-confirmation .order-line .image {
flex: 0 0 80px !important;
}
body#order-confirmation .order-line .image img {
width: 60px !important;
height: auto !important;
object-fit: contain !important;
}
body#order-confirmation .order-line .details {
flex: 1 !important;
}
body#order-confirmation .order-line .details span {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
}
body#order-confirmation .order-line .qty {
flex: 0 0 calc(100% - 50%) !important;
width: 50% !important;
display: flex !important;
padding: 0 !important;
margin-left: auto !important;
}
body#order-confirmation .order-line .qty .row {
display: flex !important;
width: 100% !important;
margin: 0 !important;
}
body#order-confirmation .order-line .qty .col-xs-4 {
flex: 1 !important;
width: 33.333% !important;
text-align: center !important;
padding: 0 !important;
float: none !important;
}
body#order-confirmation .order-line .qty .col-xs-4:last-child {
text-align: right !important;
}
body#order-confirmation .order-line .qty .row {
display: flex !important;
align-items: center !important;
}
body#order-confirmation .order-line .qty div {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
text-align: center !important;
}
/* Aligner valeurs sur headers */
body#order-confirmation .order-line .qty .col-xs-4:nth-child(1) {
text-align: center !important;
}
body#order-confirmation .order-line .qty .col-xs-4:nth-child(2) {
text-align: center !important;
}
body#order-confirmation .order-line .qty .col-xs-4:nth-child(3) {
text-align: right !important;
}
/* Headers alignés pareil */
body#order-confirmation #order-items .card-title.h3.col-md-2 {
text-align: center !important;
}
body#order-confirmation #order-items .card-title.h3.col-md-2:last-child {
text-align: right !important;
}
body#order-confirmation .order-confirmation-table hr {
display: none !important;
}
/* Tableau totaux */
body#order-confirmation .order-confirmation-table table {
width: 100% !important;
border-collapse: collapse !important;
margin-top: var(--grid-gap) !important;
}
body#order-confirmation .order-confirmation-table table tr {
border-bottom: var(--border) !important;
}
body#order-confirmation .order-confirmation-table table td,
body#order-confirmation #order-items table tr td {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
padding: calc(var(--grid-gap) * 0.6) 0 !important;
background-color: transparent !important;
background: transparent !important;
}
body#order-confirmation #order-items table tr,
body#order-confirmation #order-items table tr.total-value,
body#order-confirmation #order-items .row,
body#order-confirmation .order-confirmation-table .row {
background-color: transparent !important;
background: transparent !important;
}
body#order-confirmation .order-confirmation-table table td:last-child {
text-align: right !important;
}
body#order-confirmation .order-confirmation-table table .total-value td {
font-weight: 500 !important;
font-size: var(--fs-body) !important;
}
/* Détails commande */
body#order-confirmation #order-details {
padding: var(--grid-gap) !important;
}
body#order-confirmation #order-details h3 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
text-transform: none !important;
}
body#order-confirmation #order-details ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body#order-confirmation #order-details li {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
padding: calc(var(--grid-gap) / 2) 0 !important;
border-bottom: var(--border) !important;
}
/* ==========================================================================
14. PANIER
Layout → lignes produit → résumé → code promo → réassurance
========================================================================== */
.row #content-wrapper {
margin-top: calc(var(--header-height) - 1px) !important;
background-color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !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: clamp(90px, 9vw, 130px) !important;
display: flex !important;
}
.cart-grid-body {
min-height: 80vh !important;
width: calc(var(--col-left) + 116px);
padding: var(--grid-gap) !important;
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, sans-serif) !important;
font-size: var(--fs-title) !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-left: var(--border);
border-right: var(--border) !important;
}
.cart-summary { padding: var(--grid-gap) !important; }
.cart-item .product-line-info a,
.cart-item .product-line-info .label,
.product-line-grid-body .label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !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,
.product-line-grid-right .product-price strong {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-subtitle) !important;
font-weight: 700 !important;
color: var(--color-noir) !important;
}
.bootstrap-touchspin input.form-control,
.qty input {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !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, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
border: none !important;
transition: background-color 0.15s ease !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; }
.bootstrap-touchspin .btn .material-icons,
.bootstrap-touchspin button .material-icons { color: var(--color-beige) !important; }
/* Remplace les flèches haut/bas de TouchSpin par + et − */
.bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after { content: "\E145" !important; } /* material: add */
.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after { content: "\E15B" !important; } /* material: remove */
/* Décale les icônes de 2px vers le bas */
.bootstrap-touchspin .input-group-btn-vertical i { top: calc(.0625rem + 2px) !important; }
.cart-line-product-actions .remove-from-cart {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 32px !important;
min-height: 32px !important;
cursor: pointer !important;
}
.product-line-grid-right .col-md-2.col-xs-2,
.product-line-grid-right .col-md-2.text-xs-right,
.product-line-grid-right .col-xs-2.text-xs-right {
display: flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 32px !important;
align-items: center !important;
justify-content: center !important;
}
/* --- Lien retour boutique --- */
.cart-grid-body > a.label,
.cart-overview-bottom > a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !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: var(--fs-body-lg) !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; }
.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ésumé commande --- */
.cart-summary-line .label, .cart-summary-products .label { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 400 !important; color: var(--color-noir) !important; }
.cart-summary-line .value, .cart-summary-products .value { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; color: var(--color-noir) !important; }
.cart-summary-totals .cart-total .label { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; color: var(--color-noir) !important; }
.cart-summary-totals .cart-total .value { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-subtitle) !important; font-weight: 700 !important; color: var(--color-noir) !important; }
.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, sans-serif) !important;
font-size: var(--fs-body-lg) !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; padding: 0 !important; margin-bottom: 62px !important; }
.block-promo form {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.promo-code, #promo-code, .block-promo .promo-code {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.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: var(--fs-body-lg) !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; }
.promo-code-button, .collapse-button, .cancel-promo, a.cancel-promo, .promo-code .cancel-promo { display: none !important; visibility: hidden !important; }
#promo-code a.cancel-promo, .block-promo a.cancel-promo, .promo-code a.cancel-promo { display: none !important; visibility: hidden !important; }
body#cart .promo-code input.promo-input,
body#cart .promo-code input[type="text"],
.promo-code input.promo-input,
.promo-code input[type="text"] {
flex: 1 !important;
width: 100% !important;
min-width: 0 !important;
align-self: stretch !important;
height: auto !important;
background-color: var(--color-beige) !important;
border: var(--border) !important;
border-right: none !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
padding: 0 var(--grid-gap) !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.promo-code button[type="submit"], .promo-code .btn-primary {
padding: 0 var(--grid-gap) !important;
height: auto !important;
align-self: stretch !important;
min-height: 44px !important;
margin: 0 !important;
flex-shrink: 0 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Alert promo : hors du flux via position absolute */
body#cart .promo-code,
.block-promo .promo-code {
position: relative !important;
}
body#cart .promo-code .alert,
body#cart .promo-code .js-error,
.block-promo .promo-code .alert,
.block-promo .promo-code .js-error {
position: absolute !important;
top: calc(100% + 4px) !important;
left: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
z-index: 10 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
border: none !important;
}
.cart-summary-line, .cart-summary-products, .cart-summary-totals { padding: var(--grid-gap) 0 !important; }
.cart-summary-line {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
.cart-summary-line .label { padding: 0 !important; flex-shrink: 0 !important; }
.cart-summary-line .value { padding: 0 !important; text-align: right !important; flex-shrink: 0 !important; margin-left: auto !important; }
.cart-summary-line > div { display: none !important; }
#cart-subtotal-products, #cart-subtotal-shipping { margin: 0 !important; padding-bottom: 0 !important; }
.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, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
padding: var(--grid-gap) !important;
border: none !important;
}
/* lowercase */
.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; }
/* border-color global panier */
.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; }
/* Checkout buttons */
.checkout .btn, .checkout a, .cart-detailed-actions .btn-primary {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
padding: var(--grid-gap) !important;
}
/* blockreassurance global (hors bande panier) */
:not(.cart-reassurance-band) > .blockreassurance_product,
:not(.cart-reassurance-band) > #blockreassurance_product { padding: var(--grid-gap) !important; }
:not(.cart-reassurance-band) > .blockreassurance_product > div,
:not(.cart-reassurance-band) > #blockreassurance_product > div {
display: block !important;
border-bottom: var(--border) !important;
padding: var(--grid-gap) 0 !important;
margin: 0 !important;
}
:not(.cart-reassurance-band) > .blockreassurance_product > div:last-child,
:not(.cart-reassurance-band) > #blockreassurance_product > div:last-child,
:not(.cart-reassurance-band) > .blockreassurance_product div:last-of-type,
:not(.cart-reassurance-band) > #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, sans-serif) !important; color: var(--color-noir) !important; margin: 0 !important; }
#blockreassurance_product .block-title { font-size: var(--fs-body-lg) !important; font-weight: 500 !important; }
#blockreassurance_product .block-description { font-size: var(--fs-small) !important; font-weight: 400 !important; }
.blockreassurance_product svg, #blockreassurance_product svg { margin: 0 !important; padding: 0 !important; }
:not(.cart-reassurance-band) > .blockreassurance_product > div span.item-product,
:not(.cart-reassurance-band) > #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;
}
/* Icônes panier — masquer sauf remove */
.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; }
.cart-item .product-line-info a::before, .cart-item .label::before, .product-line-grid-body .label::before { display: none !important; content: none !important; }
/* Layout panier — grid body/right */
body#cart .container, body#cart #content-wrapper, body#cart #main {
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; 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-left: var(--border) !important; float: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; }
body#cart .btn-primary,
body#cart .checkout .btn,
body#cart .cart-detailed-actions .btn-primary,
body#cart .promo-code .btn-primary { background-color: var(--color-noir) !important; color: var(--color-beige) !important; border: none !important; }
body#cart .btn-primary:hover, body#cart .btn-primary:active, body#cart .btn-primary:focus,
body#cart .checkout .btn:hover, body#cart .checkout .btn:active,
body#cart .cart-detailed-actions .btn-primary:hover, body#cart .cart-detailed-actions .btn-primary:active,
body#cart .promo-code .btn-primary:hover, body#cart .promo-code .btn-primary:active { background-color: var(--color-noir-hover) !important; color: var(--color-beige) !important; }
body#cart .cart-summary { padding: var(--grid-gap) !important; flex: 1 !important; margin-bottom: 0 !important; max-width: 100vw}
body#cart .card { margin-bottom: 0 !important; }
@media (max-width: 1023px) { body#cart .cart-summary { padding-top: 4% !important; padding-bottom: 4% !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: var(--fs-title) !important; font-weight: 500 !important; line-height: 1.1 !important; padding-bottom: var(--grid-gap) !important; }
/* 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; }
.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 1 0 !important; min-width: 0 !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; }
/* Reset Bootstrap colonnes droite */
.product-line-grid-right,
.product-line-grid-right .row, .product-line-grid-right .col-md-10,
.product-line-grid-right .col-xs-4, .product-line-grid-right .col-md-6,
.product-line-grid-right .col-xs-6, .product-line-grid-right .col-xs-2,
.product-line-grid-right .col-md-2 { float: none !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.product-line-grid-right { display: flex !important; align-items: center !important; gap: var(--grid-gap) !important; flex: 0 0 auto !important; min-width: 0 !important; overflow: visible !important; }
.product-line-grid-right .row { display: flex !important; align-items: center !important; gap: var(--grid-gap) !important; flex: 0 0 auto !important; min-width: 0 !important; flex-wrap: nowrap !important; }
.product-line-grid-right .col-xs-4.hidden-md-up { display: none !important; }
.product-line-grid-right .col-md-10 { display: flex !important; align-items: center !important; gap: var(--grid-gap) !important; flex: 0 0 auto !important; min-width: 0 !important; overflow: visible !important; }
.product-line-grid-right .col-md-6.qty, .product-line-grid-right .col-xs-6.qty { flex: 0 0 auto !important; width: auto !important; }
.product-line-grid-right .col-md-6.price, .product-line-grid-right .col-xs-2.price { flex: 0 0 auto !important; text-align: right !important; min-width: 0 !important; white-space: nowrap !important; }
.product-line-grid-right .col-md-2, .product-line-grid-right .col-xs-2.text-xs-right { flex: 0 0 auto !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; flex-shrink: 0 !important; }
.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; }
.product-line-grid-body .product-line-info a.label { overflow-wrap: break-word !important; word-break: break-word !important; }
/* --- Réassurance (sidebar + bande pleine largeur) --- */
body#cart .cart-grid-right .blockreassurance_product { display: none !important; }
/* --- Notifications panier --- */
body#cart #notifications {
position: fixed;
bottom: var(--grid-gap);
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: auto;
max-width: 500px;
pointer-events: none;
}
body#cart #notifications .notifications-container {
padding: 0 !important;
margin: 0 !important;
}
body#cart #notifications article.alert {
font-size: var(--fs-small) !important;
padding: 10px 16px !important;
margin: 0 !important;
border: var(--border) !important;
background: var(--color-beige) !important;
color: var(--color-noir) !important;
border-radius: 0 !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
pointer-events: auto;
}
body#cart #notifications article.alert ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body#cart #notifications article.alert i { display: none !important; }
.cart-reassurance-band {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: var(--color-beige);
border-top: var(--border);
}
.cart-reassurance-band > div {
display: flex !important;
align-items: flex-end !important;
gap: calc(var(--grid-gap) / 2) !important;
padding: calc(var(--grid-gap) / 2) !important;
border-right: var(--border) !important;
border-bottom: var(--border) !important;
margin: 0 !important;
min-height: 60px;
}
.cart-reassurance-band > div:nth-child(2n) { border-right: none !important; }
.cart-reassurance-band > div:nth-child(3),
.cart-reassurance-band > div:nth-child(4) { border-bottom: none !important; }
.cart-reassurance-band .crb-item--has-img { display: grid; grid-template-columns: auto 1fr; align-items: flex-end; gap: calc(var(--grid-gap) / 2); }
.cart-reassurance-band .crb-img { width: auto; height: 40px; object-fit: contain; display: block; flex-shrink: 0; }
.cart-reassurance-band .crb-text { letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--color-noir) !important; margin: 0 !important; padding: 0 !important; }
/* --- Panier responsive --- */
@media (max-width: 1199px) {
body#cart .cart-grid-body .card-block h1 {padding: var(--grid-gap) !important}
body#cart .cart-grid { grid-template-columns: 1fr !important; }
body#cart .cart-grid-body { grid-column: 1 !important; border-right: none !important; border-bottom: var(--border) !important; min-height: 0 !important; padding: 0!important; }
body#cart .cart-grid-right { grid-column: 1 !important; min-height: 0 !important; }
body#cart .cart-summary, body#cart .blockreassurance_product { margin-left: 10% !important; margin-right: 10% !important; padding-left: var(--grid-gap) !important; padding-right: var(--grid-gap) !important; border-left: var(--border) !important; border-right: var(--border) !important; }
body#cart .cart-detailed-actions { margin: 0 !important; padding: 0 !important; border: none !important; }
.cart-summary-line { display: flex !important; justify-content: space-between !important; align-items: center !important; }
body#cart .checkout .btn, body#cart .cart-detailed-actions .btn-primary { display: block !important; width: 100% !important; text-align: center !important; }
}
@media (max-width: 700px) {
.carousel-hint, .pp-also-hint { width: 36px; height: 36px; }
.carousel-hint { right: 12px; }
.carousel-hint svg, .pp-also-hint svg { width: 20px !important; height: 20px !important; }
.pp-also-hint--left { left: calc(10% + 10px); }
.pp-also-hint--right { right: 10px; }
body#my-account .kario-account-links{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 450px) {
body#my-account .kario-account-links { grid-template-columns: 1fr !important; }
}
@media (max-width: 650px) {
body#cart .cart-summary {
margin: 0 !important;
border: 0 !important;
}
body#cart .cart-grid-right { border-left: 0 !important}
}
@media (max-width: 615px) {
body#cart .cart-grid-body { padding: 0 !important; }
.h5 { margin: 0; }
.col-md-3 { padding: 0; }
li.cart-item { padding: 0 !important; }
.cart-items { padding: 0; }
.cart-grid-body .card-block { padding: var(--grid-gap); }
.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: var(--grid-gap) !important;}
.product-line-grid {
display: grid !important;
grid-template-columns: 80px 1fr !important;
grid-template-rows: auto auto !important;
gap: 0 !important;
height: auto !important;
min-height: unset !important;
}
.product-line-grid-left,
.product-line-grid-left.col-md-3,
.product-line-grid-left.col-xs-4 {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
position: static !important;
align-self: stretch !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border-right: var(--border) !important;
}
.product-line-grid-left span.product-image {
width: 100% !important;
height: 100% !important;
padding: 0 10% !important;
box-sizing: border-box !important;
}
.product-line-grid-left picture { display: block !important; width: 100% !important; height: 100% !important; }
.product-line-grid-left img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.product-line-grid-body {
grid-column: 2 !important;
grid-row: 1 !important;
padding: var(--grid-gap) !important;
margin: 0 !important;
}
.product-line-grid-right {
grid-column: 2 !important;
grid-row: 2 !important;
padding: 0 var(--grid-gap) var(--grid-gap) var(--grid-gap) !important;
margin-top: 0 !important;
}
.bootstrap-touchspin { min-width: 0 !important; width: auto !important; max-width: 110px !important; }
.bootstrap-touchspin .btn,
.bootstrap-touchspin button { padding: 6px 8px !important; }
.bootstrap-touchspin .input-group-btn-vertical { width: 20px !important; flex: 0 0 20px !important; }
.cart-line-product-actions { height: 100% !important; align-items: center !important; }
.remove-from-cart { display: flex !important; align-items: center !important; height: 100% !important; }
.remove-from-cart i { float: none !important; }
}
@media (max-width: 500px) {
body#cart .cart-summary, body#cart .cart-detailed-actions, body#cart .blockreassurance_product { margin-left: 0 !important; margin-right: 0 !important; border-left: none !important; border-right: none !important; padding-left: var(--grid-gap) !important; padding-right: var(--grid-gap) !important; }
.cart-reassurance-band > div { padding-left: var(--grid-gap) !important; padding-right: var(--grid-gap) !important; }
}
/* ==========================================================================
15. CHECKOUT
========================================================================== */
/* Reset layout */
body#checkout .breadcrumb,
body#checkout #notifications { display: none !important; }
body#checkout #wrapper { margin-top: var(--header-height) !important; padding: 0 !important; }
body#checkout .container { max-width: 100% !important; padding: 0 !important; }
body#checkout #content-wrapper,
body#checkout #content { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }
body#checkout #content > .row,
body#checkout .row { margin: 0 !important; }
/* Colonne gauche — flex responsive, sans border */
body#checkout .cart-grid-body {
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: var(--grid-gap) !important;
border-right: none !important;
border-left: none !important;
box-sizing: border-box !important;
float: none !important;
}
/* Colonne droite — collée à droite, pleine hauteur */
body#checkout .cart-grid-right {
flex: 0 0 33.333% !important;
width: 33.333% !important;
min-width: 0 !important;
position: sticky !important;
top: 0 !important;
align-self: stretch !important;
min-height: 100vh !important;
height: auto !important;
overflow-y: auto !important;
border-left: var(--border) !important;
border-right: none !important;
background-color: var(--color-beige) !important;
padding: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
float: none !important;
}
/* Wrapper .row Bootstrap — flex deux colonnes */
body#checkout #content > .row {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
@media (max-width: 991px) {
body#checkout #content > .row {
flex-direction: column !important;
flex-wrap: wrap !important;
}
body#checkout .cart-grid-body,
body#checkout .cart-grid-right {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
min-height: 0 !important;
}
body#checkout .cart-grid-right {
margin-top: var(--grid-gap) !important;
border-left: none !important;
}
}
/* Steps — border autour de chaque step (cadre complet) */
body#checkout .checkout-step {
border: var(--border) !important;
margin-bottom: calc(var(--grid-gap) / 2) !important;
padding: var(--grid-gap) !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body#checkout .step-title {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: var(--color-noir) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
}
body#checkout .checkout-step.-unreachable .step-title { opacity: 0.4 !important; }
body#checkout .step-number {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 500 !important;
border: 1px solid currentColor !important;
border-radius: 0 !important;
width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
flex-shrink: 0 !important;
}
body#checkout .checkout-step.-complete .step-number { display: none !important; }
body#checkout .material-icons.done { font-size: var(--fs-body) !important; }
body#checkout .checkout-step.-unreachable .material-icons.done { display: none !important; }
body#checkout .step-edit,
body#checkout .step-edit a,
body#checkout .step-edit span {
margin-left: auto !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
text-transform: lowercase !important;
opacity: 1 !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
body#checkout .step-edit .material-icons { display: none !important; }
body#checkout .checkout-step .content {
padding-top: var(--grid-gap) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
}
/* Lien "Se déconnecter" — à la ligne + souligné */
body#checkout .checkout-step .content p a[href*="mylogout"] {
display: block !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
margin-top: calc(var(--grid-gap) * 1.5) !important;
}
/* Margin top sur "L'adresse de facturation est différente..." */
body#checkout [data-link-action="different-invoice-address"] {
display: block !important;
margin-top: var(--grid-gap) !important;
}
/* Adresses */
body#checkout .address-item {
border: var(--border) !important;
padding: var(--grid-gap) !important;
border-radius: 0 !important;
background: transparent !important;
margin-bottom: var(--grid-gap) !important;
}
body#checkout .address-item.selected { outline: 2px solid var(--color-noir) !important; }
body#checkout .address-alias { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; }
body#checkout .address { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; font-weight: 400 !important; line-height: 1.6 !important; margin-top: 8px !important; }
body#checkout .address-footer { display: flex !important; gap: var(--grid-gap) !important; padding-top: var(--grid-gap) !important; }
body#checkout .address-footer a { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; color: var(--color-noir) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: lowercase !important; }
body#checkout .address-footer .material-icons { display: none !important; }
body#checkout .add-address a,
body#checkout [data-link-action="different-invoice-address"] { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; color: var(--color-noir) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: lowercase !important; }
body#checkout .add-address .material-icons { display: none !important; }
body#checkout hr { border-color: var(--color-noir) !important; }
/* Formulaire adresse (modifier / nouvelle adresse) */
body#checkout .js-address-form form,
body#checkout .address-form { padding: 0 !important; }
/* form-group row → flex colonne : label au-dessus, input en dessous */
body#checkout .js-address-form .form-group.row,
body#checkout .address-form .form-group.row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 0 14px !important;
margin: 0 !important;
border-bottom: none !important;
position: relative !important;
}
/* Neutraliser les col-* Bootstrap à l'intérieur */
body#checkout .js-address-form .form-group .col-md-3,
body#checkout .js-address-form .form-group .col-md-6,
body#checkout .js-address-form .form-group .col-md-9,
body#checkout .address-form .form-group .col-md-3,
body#checkout .address-form .form-group .col-md-6,
body#checkout .address-form .form-group .col-md-9 {
width: 100% !important;
padding: 0 !important;
float: none !important;
flex: none !important;
}
/* Masquer la col "Optionnel" (form-control-comment) */
body#checkout .js-address-form .form-group .form-control-comment,
body#checkout .address-form .form-group .form-control-comment {
display: none !important;
}
/* Label micro uppercase noir */
body#checkout .js-address-form .form-group .form-control-label,
body#checkout .address-form .form-group .form-control-label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 500 !important;
color: var(--color-noir) !important;
opacity: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* * rouge sur les labels required */
body#checkout .js-address-form .form-group .form-control-label.required::after,
body#checkout .address-form .form-group .form-control-label.required::after {
content: " *" !important;
color: var(--color-error) !important;
}
/* Input / select : fond transparent, ligne noire en dessous */
/* Input : box blanche avec border tout autour */
body#checkout .js-address-form .form-group .js-input-column,
body#checkout .address-form .form-group .js-input-column {
border-bottom: none !important;
margin-bottom: 0 !important;
}
body#checkout .js-address-form .form-control,
body#checkout .address-form .form-control {
width: 100% !important;
background: var(--color-beige) !important;
border: 1px solid var(--color-noir) !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
padding: 10px 12px !important;
margin: 6px 0 0 !important;
height: auto !important;
appearance: none !important;
-webkit-appearance: none !important;
}
body#checkout .js-address-form .form-control:focus,
body#checkout .address-form .form-control:focus {
outline: none !important;
box-shadow: none !important;
border-color: var(--color-noir) !important;
}
/* Cacher le champ Pays */
body#checkout .js-address-form .form-group:has(select.js-country),
body#checkout .address-form .form-group:has(select.js-country) {
display: none !important;
}
/* Checkbox */
body#checkout .js-address-form .form-group.checkbox-field,
body#checkout .address-form .form-group.checkbox-field {
flex-direction: row !important;
align-items: center !important;
border-bottom: none !important;
gap: 8px !important;
padding-top: var(--grid-gap) !important;
}
body#checkout .js-address-form .form-group.checkbox-field label,
body#checkout .address-form .form-group.checkbox-field label {
opacity: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: var(--fs-small) !important;
}
/* Titre "Votre adresse de facturation" */
body#checkout .js-address-form h4,
body#checkout .address-form h4 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin: var(--grid-gap) 0 !important;
}
/* Bouton Annuler */
body#checkout .js-address-form .cancel-address,
body#checkout .address-form .cancel-address,
body#checkout .js-address-form a.cancel,
body#checkout .address-form a.cancel {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
/* Bouton continuer */
body#checkout .btn-primary.continue {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
color: var(--color-beige) !important;
background-color: var(--color-noir) !important;
border: none !important;
border-radius: 0 !important;
padding: 14px var(--grid-gap) !important;
text-transform: lowercase !important;
float: none !important;
transition: background 0.2s var(--ease-main) !important;
box-shadow: none !important;
}
body#checkout .btn-primary.continue:hover { background-color: var(--color-noir-hover) !important; }
body#checkout .clearfix { display: flex !important; justify-content: flex-end !important; }
/* Résumé droite */
body#checkout .card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
body#checkout .cart-summary-products { padding: var(--grid-gap) !important; border-bottom: var(--border) !important; }
body#checkout .cart-summary-products p { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 500 !important; margin: 0 0 8px 0 !important; }
body#checkout .cart-summary-products a { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; color: var(--color-noir) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: lowercase !important; }
body#checkout .cart-summary-products .material-icons { display: none !important; }
body#checkout .media-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
body#checkout .media { display: flex !important; gap: var(--grid-gap) !important; padding: 8px 0 !important; align-items: center !important; }
body#checkout .media-left { flex-shrink: 0 !important; }
body#checkout .media-left img { width: 50px !important; height: 50px !important; object-fit: cover !important; display: block !important; }
body#checkout .media-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex: 1 !important;
min-width: 0 !important;
}
/* Bloc nom + quantité empilés */
body#checkout .media-body .product-name {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
flex: 1 !important;
min-width: 0 !important;
}
body#checkout .product-name a { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; font-weight: 400 !important; display: block !important; }
body#checkout .product-quantity { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; font-weight: 400 !important; opacity: 0.6 !important; display: block !important; }
body#checkout .product-price { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-small) !important; font-weight: 500 !important; display: block !important; white-space: nowrap !important; flex-shrink: 0 !important; }
body#checkout .cart-summary-subtotals-container { padding: var(--grid-gap) !important; border-bottom: var(--border) !important; }
body#checkout .cart-summary-totals { padding: var(--grid-gap) !important; }
body#checkout .cart-summary-line { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 0 !important; }
body#checkout .cart-summary-line .label,
body#checkout .cart-summary-line .value { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 400 !important; text-transform: lowercase !important; padding: 0 !important; }
body#checkout .cart-total .label,
body#checkout .cart-total .value { font-weight: 700 !important; }
body#checkout .cart-total .value { font-size: var(--fs-subtitle) !important; }
/* Code promo */
body#checkout .block-promo { padding: var(--grid-gap) !important; }
body#checkout .promo-code-button a { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body-lg) !important; font-weight: 400 !important; color: var(--color-noir) !important; text-decoration: none !important; text-transform: lowercase !important; }
body#checkout .promo-code { display: flex !important; flex-direction: row !important; gap: 0 !important; }
body#checkout .promo-input { flex: 1 !important; border: var(--border) !important; border-right: none !important; background: var(--color-beige) !important; font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; padding: 0 var(--grid-gap) !important; border-radius: 0 !important; outline: none !important; }
body#checkout .promo-code .btn-primary {
padding: 0 var(--grid-gap) !important;
min-height: 44px !important;
border-radius: 0 !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
border: none !important;
}
body#checkout .promo-code .btn-primary:hover { background-color: var(--color-noir-hover) !important; }
body#checkout .cancel-promo { display: none !important; }
/* Blockreassurance — masqué, remplacé par .cart-reassurance-band via JS */
body#checkout .blockreassurance_product {
display: none !important;
}
/* cart-reassurance-band dans le checkout — même style grid 2x2 que la bande panier */
body#checkout .cart-reassurance-band {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
background-color: var(--color-beige) !important;
border-top: var(--border) !important;
border-bottom: var(--border) !important;
padding: 0 !important;
}
body#checkout .cart-reassurance-band > div {
display: flex !important;
align-items: center !important;
gap: calc(var(--grid-gap) / 2) !important;
padding: calc(var(--grid-gap) / 2) !important;
border-right: var(--border) !important;
border-bottom: var(--border) !important;
margin: 0 !important;
min-height: 60px !important;
}
body#checkout .cart-reassurance-band > div:nth-child(2n) { border-right: none !important; }
body#checkout .cart-reassurance-band > div:nth-child(3),
body#checkout .cart-reassurance-band > div:nth-child(4) { border-bottom: none !important; }
body#checkout .cart-reassurance-band > div span.item-product {
display: flex !important;
align-items: flex-end !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body#checkout .cart-reassurance-band > div span.item-product img {
width: auto !important;
height: 40px !important;
object-fit: contain !important;
display: block !important;
}
body#checkout .cart-reassurance-band .block-title {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 500 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
color: var(--color-noir) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Header checkout — identique au header Kario sans nav */
body#checkout #header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9998;
background-color: var(--color-beige);
border-bottom: var(--border);
}
body#checkout .header-nav {
height: var(--header-height);
display: flex;
align-items: center;
box-shadow: none !important;
}
body#checkout .header-nav .container,
body#checkout .header-nav .row {
height: 100%;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
body#checkout #_desktop_logo {
display: flex !important;
align-items: center;
height: 100%;
padding: 0 var(--grid-gap) !important;
flex: 0 0 auto !important;
width: auto !important;
}
body#checkout #_desktop_logo a {
position: relative !important;
display: block !important;
width: 130px !important;
height: var(--header-img-min) !important;
flex: 0 0 auto !important;
}
body#checkout #_desktop_logo img {
visibility: hidden !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
}
/* content:url() n'étant pas fiable sur Safari/iOS, on peint le bon logo
par-dessus l'image masquée via un pseudo-élément en background-image */
body#checkout #_desktop_logo a::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/KARIO.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
body#checkout #_desktop_contact_link {
display: flex !important;
align-items: center;
justify-content: flex-end;
height: 100%;
padding: 0 var(--grid-gap) !important;
margin-left: auto !important;
}
body#checkout #_desktop_contact_link a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
text-decoration: none !important;
}
body#checkout #_desktop_contact_link a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
body#checkout .header-top { display: none !important; }
/* Le thème classic déplace le ![]()
dans #_mobile_logo sur petits écrans
(le contenu de #_desktop_logo devient vide) : on affiche donc le bon
conteneur selon le contexte, et on n'y laisse que le logo. */
body#checkout #_desktop_logo { display: flex !important; }
@media (max-width: 767px) {
/* :empty ne suffit pas (texte/espace résiduel dans le node) : on cache
par largeur d'écran, fiable à 100% */
body#checkout #_desktop_logo { display: none !important; }
}
body#checkout .hidden-md-up.mobile {
display: flex !important;
align-items: center;
height: 100%;
padding: 0 var(--grid-gap) !important;
}
body#checkout .hidden-md-up.mobile > *:not(#_mobile_logo) { display: none !important; }
body#checkout #_mobile_logo {
display: block !important;
position: relative !important;
width: 130px !important;
height: var(--header-img-min) !important;
}
body#checkout #_mobile_logo a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
body#checkout #_mobile_logo img {
visibility: hidden !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
}
body#checkout #_mobile_logo a::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/KARIO.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
@media (min-width: 768px) {
/* Au-dessus de 768px, #_desktop_logo garde son vrai contenu : on cache
juste le bloc mobile pour ne pas avoir 2 logos en même temps. */
body#checkout .hidden-md-up.mobile { display: none !important; }
}
/* Footer checkout */
body#checkout #footer {
border-top: var(--border) !important;
background-color: var(--color-beige) !important;
padding: calc(var(--grid-gap) * 2) calc(var(--grid-gap) * 3) var(--grid-gap) !important;
overflow: hidden !important;
}
/* Masquer le contenu PS par défaut */
body#checkout #footer .text-sm-center { display: none !important; }
/* Footer Kario injecté par JS */
body#checkout #footer .kario-checkout-footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
width: 100% !important;
}
/* Ligne liens */
body#checkout #footer .kario-checkout-footer-links {
display: flex !important;
gap: calc(var(--grid-gap) * 3) !important;
flex-wrap: wrap !important;
justify-content: center !important;
padding-bottom: calc(var(--grid-gap) * 1.5) !important;
width: 100% !important;
}
body#checkout #footer .kario-checkout-footer-links a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
text-transform: lowercase !important;
text-decoration: none !important;
}
body#checkout #footer .kario-checkout-footer-links a:hover { text-decoration: underline !important; }
/* Ligne séparatrice — pleine largeur, noir */
body#checkout #footer .kario-checkout-footer-sep {
width: 100vw !important;
margin-left: calc(-1 * var(--grid-gap) * 3) !important;
height: 1px !important;
background: var(--color-noir) !important;
opacity: 1 !important;
margin-bottom: var(--grid-gap) !important;
}
/* Copyright */
body#checkout #footer .kario-checkout-footer-copy {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
opacity: 1 !important;
text-align: center !important;
}
/* Checkout — bande réassurance (injectée par JS, même structure que panier) */
body#checkout .cart-reassurance-band {
border-top: var(--border) !important;
}
/* Footer formulaire — marge au-dessus + espacement boutons */
body#checkout .js-address-form .form-footer,
body#checkout .address-form .form-footer {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: var(--grid-gap) !important;
margin-top: var(--grid-gap) !important;
padding-top: var(--grid-gap) !important;
}
body#checkout .js-address-form .cancel-address,
body#checkout .address-form .cancel-address {
margin-left: var(--grid-gap) !important;
float: none !important;
}
/* Marge au-dessus du titre "Votre adresse de facturation" */
body#checkout .js-address-form h4,
body#checkout .address-form h4 {
}
/* ===================== MODE DE LIVRAISON ===================== */
/* Conteneur options */
body#checkout .delivery-options-list { padding: 0 !important; }
body#checkout #js-delivery { margin: 0 !important; }
/* Chaque option transporteur */
body#checkout .delivery-option {
display: flex !important;
align-items: center !important;
gap: var(--grid-gap) !important;
padding: var(--grid-gap) !important;
border: var(--border) !important;
margin-bottom: calc(var(--grid-gap) / 2) !important;
background: transparent !important;
}
body#checkout .delivery-option .col-sm-1 { flex-shrink: 0 !important; padding: 0 !important; width: auto !important; }
body#checkout .delivery-option label { padding: 0 !important; width: auto !important; flex: 1 !important; cursor: pointer !important; }
body#checkout .delivery-option .row { display: flex !important; align-items: center !important; gap: 0 !important; width: 100% !important; margin: 0 !important; }
body#checkout .delivery-option .col-sm-5,
body#checkout .delivery-option .col-sm-4,
body#checkout .delivery-option .col-sm-3 { padding: 0 !important; float: none !important; }
body#checkout .delivery-option .col-sm-5 { flex: 1 !important; }
body#checkout .delivery-option .col-sm-4 { flex: 1 !important; }
body#checkout .delivery-option .col-sm-3 { flex-shrink: 0 !important; text-align: right !important; }
/* Textes transporteur */
body#checkout .carrier-name {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
color: var(--color-noir) !important;
text-transform: none !important;
}
body#checkout .carrier-delay,
body#checkout .carrier-price {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
}
/* Zone message */
body#checkout .order-options { margin-top: var(--grid-gap) !important; }
body#checkout .order-options label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 500 !important;
color: var(--color-noir) !important;
opacity: 0.6 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
display: block !important;
margin-top: var(--grid-gap) !important;
margin-bottom: 6px !important;
}
body#checkout #delivery_message {
width: 100% !important;
background: var(--color-beige) !important;
border: var(--border) !important;
border-radius: 0 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
padding: 10px 12px !important;
resize: vertical !important;
box-sizing: border-box !important;
outline: none !important;
box-shadow: none !important;
min-height: 80px !important;
max-height: 200px !important;
}
body#checkout #delivery_message:focus { outline: none !important; box-shadow: none !important; }
/* Btn continuer livraison — aligné à droite, hauteur normale */
body#checkout #js-delivery .continue {
display: block !important;
float: none !important;
margin-left: auto !important;
margin-top: var(--grid-gap) !important;
width: auto !important;
height: auto !important;
}
body#checkout #js-delivery .form-fields { width: 100% !important; }
/* Neutraliser les col-* Bootstrap dans delivery-option */
body#checkout .delivery-option [class*="col-"] {
float: none !important;
padding: 0 !important;
}
body#checkout .carriere-name-container { padding: 0 !important; }
/* Fix btn continuer livraison — annuler le float Bootstrap */
body#checkout #js-delivery > button.continue,
body#checkout #js-delivery button[name="confirmDeliveryOption"] {
float: none !important;
display: block !important;
margin-left: auto !important;
margin-top: var(--grid-gap) !important;
width: auto !important;
position: static !important;
clear: both !important;
}
/* Wrapper form en flex-column pour que le btn se place après le contenu */
body#checkout #js-delivery {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
/* Marge au-dessus des options transporteur */
body#checkout .delivery-options {
margin-top: var(--grid-gap) !important;
}
/* Label message livraison — noir forcé */
body#checkout label[for="delivery_message"] {
color: var(--color-noir) !important;
opacity: 1 !important;
}
/* ===================== PAIEMENT ===================== */
/* Options de paiement — alignées à gauche */
body#checkout #payment-confirmation,
body#checkout .payment-options,
body#checkout #js-payment-option-form,
body#checkout .payment-option {
text-align: left !important;
justify-content: flex-start !important;
}
body#checkout .payment-option {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 8px !important;
}
body#checkout .payment-option label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
}
/* Btn Commander — fond noir */
body#checkout #payment-confirmation .btn,
body#checkout button#payment-confirmation__continue-button,
body#checkout .payment-confirmation button {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
border: none !important;
border-radius: 0 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
font-weight: 500 !important;
text-transform: lowercase !important;
padding: 14px var(--grid-gap) !important;
box-shadow: none !important;
opacity: 1 !important;
transition: background 0.2s var(--ease-main) !important;
}
body#checkout #payment-confirmation .btn:hover,
body#checkout .payment-confirmation button:hover {
background-color: var(--color-noir-hover) !important;
}
body#checkout #payment-confirmation .btn:disabled,
body#checkout .payment-confirmation button:disabled {
background-color: var(--color-noir) !important;
opacity: 0.4 !important;
}
/* ==========================================================================
16. PAGE CMS (livraison, mentions légales, CGV, etc.)
========================================================================== */
body#cms #wrapper { background-color: var(--color-beige) !important; }
body#cms .breadcrumb { display: none !important; }
body#cms #main {
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: calc(var(--grid-gap) * 4) var(--grid-gap) !important;
}
/* Titre principal */
body#cms .page-header {
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: calc(var(--grid-gap) * 3) !important;
}
body#cms .page-cms ul,
body#cms .page-cms ol {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
padding-left: var(--grid-gap) !important;
margin: 0 0 var(--grid-gap) !important;
}
body#cms .page-cms li {
line-height: 1.7 !important;
margin-bottom: 4px !important;
}
body#cms .page-cms a {
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
body#cms .page-cms .pp-also-products-area a.carousel-card-link,
body#cms .page-cms .pp-also-products-area a.carousel-card-link:hover,
body#cms .page-cms .pp-also-products-area a.carousel-card-link:visited,
body#cms .page-cms .pp-also-products-area a.carousel-card-link:active,
body#cms .page-cms .pp-also-products-area a.carousel-card-link:focus {
text-decoration: none !important;
}
/* ==========================================================================
17. ACCESSIBILITÉ — outline tab uniquement (body.using-keyboard)
========================================================================== */
@media (max-width: 991px) {
.hidden-md-down {
display: block !important;
}
}
body:not(.using-keyboard) *:focus,
body:not(.using-keyboard) *:focus-visible { outline: none !important; box-shadow: none !important; }
body.using-keyboard *:focus-visible { outline: 2px solid var(--color-noir) !important; outline-offset: 3px !important; }
/* ==========================================================================
18. MEDIA QUERIES GLOBALES
========================================================================== */
/* --- Desktop large > 1480px --- */
@media (min-width: 1481px) {
.header-nav-desktop { display: flex !important; }
.hamburger { display: none !important; }
.mobile-panel { display: none !important; transform: translateX(100%) !important; pointer-events: none !important; }
}
/* max-height: 725px */
@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; }
#hero-logo { border-left: var(--border) !important; }
#footer { border-left: var(--border) !important; border-right: var(--border) !important; }
#module-mdn_blog-home .bk-header, #module-mdn_blog-home .bk-body,
#module-mdn_blog-category .bk-header, #module-mdn_blog-category .bk-body { border-left: var(--border) !important; border-right: var(--border) !important; }
.pp-main { border-left: var(--border); border-right: var(--border); }
body#cart .cart-grid-body { border-left: var(--border) !important; }
body#cart .cart-grid-right { border-right: var(--border) !important; }
}
/* --- Lenis scroll --- */
@media (min-width: 1481px) {
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: 1480px) {
html.lenis { height: auto !important; overflow: auto !important; }
#hero-logo, #hero-logo img { will-change: auto !important; }
.hero-description-main { width: calc(100% - 60px); }
}
/* --- Header réduit 999–1669px --- */
@media (min-width: 999px) and (max-width: 1669px) {
:root { --header-height: 45px; }
.header-nav-desktop { height: var(--header-height); box-sizing: border-box; }
.header-nav-menu li { width: auto; flex-shrink: 1; }
.header-nav-menu li:nth-child(1),
.header-nav-menu li:nth-child(2),
.header-nav-menu li:nth-child(3) { width: auto; }
.header-nav-menu li a { font-size: var(--fs-small); padding: 0 clamp(6px, 1vw, 16px); }
.header-nav-account, .header-nav-cart { width: var(--header-height); height: var(--header-height); }
}
/* margin-bottom: -1px uniquement pour le petit header (pas le grand format > 1480px) */
@media (min-width: 999px) and (max-width: 1480px) {
.header-nav-account, .header-nav-cart { margin-bottom: -1px; }
.header-nav-menu { margin-bottom: 0; }
}
/* --- Petit desktop & tablette 1001–1480px --- */
@media (min-width: 1001px) and (max-width: 1480px) {
body .txt-titre, body .elementor-heading-title { font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: 1.1 !important; }
body .txt-texte { font-size: var(--fs-small) !important; font-weight: 400 !important; line-height: 1.3 !important; }
.hero-left, .hero-right { overflow: hidden !important; }
.hero-image-main img, .hero-image-main, .hero-image-block { max-height: 55vh !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; }
}
/* --- Tablette 768–1000px --- */
@media (min-width: 768px) and (max-width: 1000px) {
body .txt-titre, body .elementor-heading-title { font-size: var(--fs-title) !important; font-weight: 500 !important; line-height: 1.1 !important; }
body .txt-texte { font-size: var(--fs-small) !important; font-weight: 400 !important; line-height: 1.3 !important; }
.header-nav-desktop { border-left: var(--border); height: var(--header-height); box-sizing: border-box; }
.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; }
.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%; }
.hero-left, .hero-right { overflow: hidden !important; }
.hero-product-title { display: none !important; }
.hero-middle-section { grid-template-columns: 1fr !important; }
.hero-section { height: auto !important; min-height: calc(100vh - var(--header-height)) !important; max-height: none !important; overflow: visible !important; }
.hero-image-main img, .hero-image-main, .hero-image-block { max-height: 55vh !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; }
}
/* --- Mobile < 768px --- */
@media (max-width: 767px) {
:root { --carousel-card-w: 42vw; }
.txt-titre { font-size: var(--fs-title) !important; }
.txt-sous-titre { font-size: var(--fs-subtitle) !important; }
.txt-texte { font-size: var(--fs-body) !important; }
body { font-size: var(--fs-body-lg) !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; }
/* Sur mobile : toujours logo-sticky, jamais logo-full */
.header-logo .logo-full { opacity: 0 !important; pointer-events: none !important; }
.header-logo .logo-sticky { opacity: 1 !important; pointer-events: auto !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: calc(100svh - var(--header-height)) !important; max-height: none !important; overflow: visible !important; }
.hero-section::after { display: none !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; padding: var(--grid-gap) !important; }
.hero-image-block { display: none !important; }
.hero-middle-section { order: 3 !important; grid-template-columns: 1fr !important; overflow: visible !important; flex: none !important; margin-top: auto !important; }
.hero-images-bottom { order: 4 !important; }
.hero-txt-droite { height: auto !important; min-height: 0 !important; max-height: none !important; }
.hero-product-title { display: none !important; }
.hero-product-description { display: none !important; }
.marquee-container { height: 100px !important; }
.marquee-content span { font-weight: 500 !important; }
.wb-card .txt-sous-titre { font-size: var(--fs-subtitle) !important; }
.section-wellbeing { grid-template-columns: 1fr !important; padding: 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-content p { margin-top: 0; }
.wb-card h4 { width: auto !important; }
.section-ingredients { padding: 10%; }
.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-sidebar { display: none !important; }
.carousel-products-area { flex: 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: 20% !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; }
}
@media (max-width: 500px) { .hero-description-main { width: 100%; } }
/* --- Carousel bouton breakpoints --- */
@media (max-width: 1230px), (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; }
}
/* ==========================================================================
PAGE ADRESSE — body#address (formulaire création/édition d'adresse)
Calqué sur le même système que #registration, #identity, etc.
========================================================================== */
/* --- Layout wrapper --- */
body#address #main {
max-width: 800px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: calc(var(--grid-gap) * 4) var(--grid-gap) !important;
}
body#address .container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
body#address #notifications {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body#address .notifications-container {
padding: 0 !important;
max-width: none !important;
width: 100% !important;
}
body#address #content-wrapper {
margin-top: var(--header-height) !important;
background-color: var(--color-beige) !important;
padding: 4% calc(var(--grid-gap) * 2) 8% !important;
}
/* --- Page header --- */
body#address .page-header {
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#address .page-header h1 {
font-size: var(--fs-title) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
color: var(--color-noir) !important;
margin: 0 !important;
}
/* --- form-group --- */
body#address .form-group {
display: flex !important;
flex-direction: column !important;
row-gap: 5px !important;
padding: 3px 4px !important;
overflow: visible !important;
margin: 0 !important;
}
body#address .form-group.row { margin-left: 0 !important; margin-right: 0 !important; }
/* --- form-fields wrapper --- */
body#address .form-fields {
display: flex !important;
flex-direction: column !important;
gap: var(--grid-gap) !important;
}
/* --- Labels --- */
body#address .col-md-3.form-control-label {
font-size: var(--fs-small) !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;
}
body#address .col-md-3.form-control-label.required::after {
content: " *" !important;
color: var(--color-error) !important;
}
/* --- Neutraliser les colonnes Bootstrap --- */
body#address .col-md-6,
body#address .js-input-column,
body#address .form-group [class*="col-md-"] {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
flex: none !important;
overflow: visible !important;
}
/* Masquer col form-control-comment Bootstrap */
body#address .col-md-3.form-control-comment { display: none !important; }
/* --- Inputs .form-control --- */
body#address .form-control {
font-size: var(--fs-body) !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;
height: auto !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
body#address .form-control::placeholder {
color: var(--color-noir) !important;
opacity: 0.5 !important;
}
body#address .form-control:focus {
outline: 2px solid var(--color-noir) !important;
outline-offset: 3px !important;
box-shadow: none !important;
}
body#address .form-control:-webkit-autofill,
body#address .form-control:-webkit-autofill:hover,
body#address .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;
}
/* Select */
body#address select.form-control {
cursor: pointer !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right var(--grid-gap) center !important;
padding-right: calc(var(--grid-gap) * 2.5) !important;
}
/* --- Bouton submit --- */
body#address .form-control-submit,
body#address .btn-primary.form-control-submit {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: unset !important;
padding: 14px var(--grid-gap) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !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;
float: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color 0.5s var(--ease-main) !important;
}
body#address .form-control-submit:hover { background-color: var(--color-noir-hover) !important; }
body#address .form-control-submit:focus-visible {
outline: 2px solid var(--color-noir) !important;
outline-offset: 3px !important;
background-color: var(--color-noir-hover) !important;
}
/* --- form-footer --- */
body#address .form-footer {
margin-top: calc(var(--grid-gap) * 1.5) !important;
padding-top: var(--grid-gap) !important;
border-top: var(--border) !important;
float: none !important;
}
/* --- Texte beige sur le bouton submit (anti-override global) --- */
body#address .form-control-submit,
body#address .form-control-submit * { color: var(--color-beige) !important; }
/* --- Breadcrumb --- */
body#address .breadcrumb { padding-left: calc(var(--grid-gap) * 2) !important; }
/* --- Nav compte header --- */
body#address .header-nav-account { color: var(--color-noir) !important; }
body#address .header-nav-account.active { color: var(--color-noir) !important; }
/* --- Page succès (body#module-rbfree-confirm après soumission) --- */
body#module-rbfree-confirm .rbf-success .alert,
body#module-rbfree-confirm .rbf-success .alert-success {
background-color: var(--color-beige) !important;
border: var(--border) !important;
border-radius: 0 !important;
color: var(--color-noir) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
text-align: left !important;
padding: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-confirm .rbf-success .alert h2 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-confirm .rbf-success .alert ul {
list-style: none !important;
padding: 0 !important;
margin: var(--grid-gap) 0 !important;
text-align: left !important;
}
body#module-rbfree-confirm .rbf-success .alert li {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
padding: 4px 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
color: var(--color-noir) !important;
}
/* Boutons dans la page succès */
body#module-rbfree-confirm .rbf-success .btn.btn-primary,
body#module-rbfree-confirm .rbf-success a.btn.btn-primary {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px var(--grid-gap) !important;
text-decoration: none !important;
text-transform: lowercase !important;
display: inline-block !important;
box-shadow: none !important;
transition: var(--transition-nav) !important;
}
body#module-rbfree-confirm .rbf-success .btn.btn-primary:hover { background-color: var(--color-noir-hover) !important; }
/* "Suivre le statut" (btn-default) et "Imprimer" (btn-outline-secondary) → lien souligné */
body#module-rbfree-confirm .rbf-success .btn.btn-default,
body#module-rbfree-confirm .rbf-success .btn.btn-outline-secondary {
background: none !important;
border: none !important;
color: var(--color-noir) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
padding: 4px 0 !important;
display: inline-block !important;
box-shadow: none !important;
}
body#module-rbfree-confirm .rbf-success .btn.btn-default:hover,
body#module-rbfree-confirm .rbf-success .btn.btn-outline-secondary:hover { opacity: 0.6 !important; }
/* Alignement gauche du bloc succès */
body#module-rbfree-confirm .rbf-success.text-center { text-align: left !important; }
body#module-rbfree-confirm .rbf-success .alert .list-unstyled { max-width: none !important; margin: var(--grid-gap) 0 !important; }
/* Étapes — border droite sur le dernier step (fix border manquante) */
.rbf-steps-front .rbf-step:last-child {
border-right: var(--border) !important;
}
/* --- Mobile --- */
@media (max-width: 768px) {
body#address #content-wrapper { padding: 24px 0 40px !important; }
body#address #main { padding: var(--grid-gap) !important; }
}
/* ==========================================================================
19. MODULE RÉTRACTATION (rbfree)
Calqué sur body#history et body#order-detail
========================================================================== */
/* Shorthand : toutes les pages du module */
body#module-rbfree-form #content-wrapper,
body#module-rbfree-confirm #content-wrapper,
body#module-rbfree-status #content-wrapper,
body#module-rbfree-track #content-wrapper,
body#module-rbfree-print #content-wrapper {
margin-top: var(--header-height) !important;
background-color: var(--color-beige) !important;
padding: 4% calc(var(--grid-gap) * 2) 8% !important;
max-width: none !important;
}
/* Neutraliser body#history .container qui écraserait le padding */
body#module-rbfree-form .container,
body#module-rbfree-confirm .container,
body#module-rbfree-status .container,
body#module-rbfree-track .container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body#module-rbfree-form .page-header,
body#module-rbfree-confirm .page-header,
body#module-rbfree-status .page-header,
body#module-rbfree-track .page-header {
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: calc(var(--grid-gap) * 2) !important;
}
body#module-rbfree-form .page-header h1,
body#module-rbfree-confirm .page-header h1,
body#module-rbfree-status .page-header h1,
body#module-rbfree-track .page-header h1 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-title) !important;
font-weight: 500 !important;
line-height: var(--lh-title) !important;
letter-spacing: var(--ls-title) !important;
margin: 0 !important;
}
/* Lien "Déjà soumis ?" */
body#module-rbfree-form p.text-muted.small,
body#module-rbfree-form p.text-muted.small a {
color: var(--color-noir) !important;
opacity: 1 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
margin-bottom: var(--grid-gap) !important;
display: block !important;
}
/* Texte intro tableau */
body#module-rbfree-form .rbf-order-picker p.text-muted:not(.small),
body#module-rbfree-form p.text-muted:not(.small) {
color: var(--color-noir) !important;
opacity: 1 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
}
/* --- Cards / conteneur (calqué sur body#order-detail .box) --- */
body#module-rbfree-form .card,
body#module-rbfree-form .card-block,
body#module-rbfree-form #content.card.card-block,
body#module-rbfree-confirm .card,
body#module-rbfree-confirm .card-block,
body#module-rbfree-status .card,
body#module-rbfree-status .card-block,
body#module-rbfree-track .card,
body#module-rbfree-track .card-block {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body#module-rbfree-form .rbf-order-picker,
body#module-rbfree-confirm .rbf-order-picker {
background-color: transparent !important;
border: var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-form .rbf-order-picker h2,
body#module-rbfree-form .rbf-order-picker .h3 {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body-lg) !important;
font-weight: 500 !important;
border-bottom: var(--border) !important;
padding-bottom: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-form p.text-muted,
body#module-rbfree-form .text-muted,
body#module-rbfree-confirm p.text-muted,
body#module-rbfree-status p.text-muted,
body#module-rbfree-track p.text-muted {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
opacity: 0.6 !important;
}
body#module-rbfree-form .text-muted a,
body#module-rbfree-form p.text-muted a {
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
opacity: 1 !important;
}
/* --- Étapes (calqué sur body#order-detail thead th) --- */
.rbf-steps-front {
gap: 0 !important;
margin-bottom: var(--grid-gap) !important;
}
.rbf-steps-front .rbf-step {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 500 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
background: transparent !important;
color: var(--color-noir) !important;
border-radius: 0 !important;
border: var(--border) !important;
margin-right: -1px !important;
padding: 10px var(--grid-gap) !important;
opacity: 0.4 !important;
}
.rbf-steps-front .rbf-step.is-active {
background: var(--color-noir) !important;
color: var(--color-beige) !important;
opacity: 1 !important;
}
.rbf-steps-front .rbf-step.is-active * { color: var(--color-beige) !important; }
.rbf-steps-front .rbf-step.is-done {
background: transparent !important;
color: var(--color-noir) !important;
opacity: 1 !important;
}
/* --- Tableau (calqué exactement sur body#history .table) --- */
.rbf-orders-table {
width: 100% !important;
border-collapse: collapse !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
table-layout: auto !important;
}
.rbf-orders-table thead th {
font-weight: 500 !important;
border-top: 1px solid var(--color-noir) !important;
border-bottom: 1px solid var(--color-noir) !important;
border-left: none !important;
border-right: none !important;
font-size: var(--fs-small) !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
background-color: transparent !important;
padding: 10px var(--grid-gap) !important;
white-space: normal !important;
color: var(--color-noir) !important;
}
.rbf-orders-table th,
.rbf-orders-table td {
padding: 10px var(--grid-gap) !important;
border: none !important;
border-bottom: 1px solid var(--color-noir) !important;
text-align: left !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
text-transform: lowercase !important;
vertical-align: middle !important;
background-color: transparent !important;
white-space: nowrap !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
}
.rbf-orders-table tbody tr:last-child td { border-bottom: none !important; }
.rbf-orders-table tbody tr:nth-of-type(odd),
.rbf-orders-table tbody tr:nth-of-type(even) { background-color: transparent !important; }
/* Lignes désactivées */
.rbf-order-row--disabled { opacity: 0.4 !important; background-color: transparent !important; }
.rbf-order-row--disabled td { color: var(--color-noir) !important; }
/* Liens dans le tableau (calqué sur .order-actions a) */
.rbf-order-ref-link,
.rbf-order-history-init,
.rbf-order-history-view,
.rbf-order-history-view a {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
display: inline-block !important;
margin-right: 8px !important;
background: none !important;
border: none !important;
}
.rbf-order-ref-muted {
font-family: var(--font-main, sans-serif) !important;
color: var(--color-noir) !important;
font-weight: 400 !important;
opacity: 0.4 !important;
cursor: not-allowed !important;
}
.rbf-order-history-empty {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
color: var(--color-noir) !important;
opacity: 0.4 !important;
font-style: normal !important;
}
/* --- Bouton "Retourner cette commande" (calqué sur body#order-detail .button-primary) --- */
body#module-rbfree-form .btn.btn-primary,
body#module-rbfree-form .btn.btn-primary.btn-sm,
body#module-rbfree-form a.btn.btn-primary,
body#module-rbfree-confirm .btn.btn-primary,
body#module-rbfree-status .btn.btn-primary {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px var(--grid-gap) !important;
text-decoration: none !important;
text-transform: lowercase !important;
box-shadow: none !important;
transition: var(--transition-nav) !important;
}
body#module-rbfree-form .btn.btn-primary:hover,
body#module-rbfree-form a.btn.btn-primary:hover { background-color: var(--color-noir-hover) !important; color: var(--color-beige) !important; }
body#module-rbfree-form .btn.btn-primary *,
body#module-rbfree-form a.btn.btn-primary * { color: var(--color-beige) !important; }
/* Bouton "Voir" (outline) */
body#module-rbfree-form .btn.btn-outline-primary,
body#module-rbfree-form .btn.btn-outline-primary.btn-sm {
background-color: transparent !important;
color: var(--color-noir) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: var(--border) !important;
padding: 6px var(--grid-gap) !important;
text-decoration: none !important;
text-transform: lowercase !important;
box-shadow: none !important;
transition: var(--transition-nav) !important;
}
body#module-rbfree-form .btn.btn-outline-primary:hover { background-color: var(--color-noir) !important; color: var(--color-beige) !important; }
/* btn-link "Retour" */
body#module-rbfree-form .btn.btn-link,
body#module-rbfree-confirm .btn.btn-link {
background: none !important;
border: none !important;
color: var(--color-noir) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
padding: 0 !important;
box-shadow: none !important;
}
/* btn-danger → noir KARIO */
body#module-rbfree-form .btn.btn-danger,
body#module-rbfree-confirm .btn.btn-danger {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px var(--grid-gap) !important;
text-decoration: none !important;
text-transform: lowercase !important;
box-shadow: none !important;
transition: var(--transition-nav) !important;
}
body#module-rbfree-form .btn.btn-danger:hover,
body#module-rbfree-confirm .btn.btn-danger:hover { background-color: var(--color-noir-hover) !important; color: var(--color-beige) !important; }
body#module-rbfree-confirm .btn.btn-danger * { color: var(--color-beige) !important; }
/* --- Alertes (info / warning / secondary) --- */
body#module-rbfree-form .alert,
body#module-rbfree-confirm .alert,
body#module-rbfree-track .alert {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
color: var(--color-noir) !important;
background-color: transparent !important;
border: var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--grid-gap) !important;
margin-bottom: var(--grid-gap) !important;
}
/* --- Formulaire (inputs, textarea, labels) --- */
body#module-rbfree-form .form-group,
body#module-rbfree-confirm .form-group,
body#module-rbfree-track .form-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-form .form-group label,
body#module-rbfree-confirm .form-group label,
body#module-rbfree-track .form-group label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
color: var(--color-noir) !important;
text-transform: lowercase !important;
}
body#module-rbfree-form .form-control,
body#module-rbfree-confirm .form-control,
body#module-rbfree-track .form-control {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !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;
height: auto !important;
outline: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
body#module-rbfree-form .form-control:focus,
body#module-rbfree-track .form-control:focus {
outline: 2px solid var(--color-noir) !important;
outline-offset: 3px !important;
box-shadow: none !important;
}
body#module-rbfree-form textarea.form-control,
body#module-rbfree-confirm textarea.form-control {
resize: vertical !important;
min-height: 100px !important;
}
/* Override agressif text-align: right du theme.css sur toutes les pages rbfree */
#module-rbfree-form label,
#module-rbfree-confirm label,
#module-rbfree-track label,
#module-rbfree-status label,
body#module-rbfree-form #content label,
body#module-rbfree-confirm #content label,
body#module-rbfree-track #content label {
text-align: left !important;
color: var(--color-noir) !important;
}
/* Override theme.css : label, label { text-align: right; color: #232323 } */
body#module-rbfree-confirm label,
body#module-rbfree-confirm label label {
text-align: left !important;
color: var(--color-noir) !important;
font-size: var(--fs-small) !important;
}
/* --- Checkbox confirmation --- */
/* Structure : */
#module-rbfree-confirm label.d-block {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
cursor: pointer !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
color: var(--color-noir) !important;
text-align: left !important;
text-transform: none !important;
width: 100% !important;
margin-bottom: var(--grid-gap) !important;
}
#module-rbfree-confirm label.d-block input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
margin: 2px 0 0 0 !important;
padding: 0 !important;
border: var(--border) !important;
background-color: var(--color-beige) !important;
border-radius: 0 !important;
cursor: pointer !important;
position: static !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#module-rbfree-confirm label.d-block input[type="checkbox"]:checked {
background-color: var(--color-noir) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F5EDD6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px 8px !important;
}
/* --- Labels délai (bordure noire, pas de fond) --- */
body#module-rbfree-form .label-success {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: lowercase !important;
border-radius: 0 !important;
border: var(--border) !important;
padding: 2px 8px !important;
background-color: transparent !important;
color: var(--color-noir) !important;
display: inline-block !important;
}
/* Labels désactivés (délai expiré / return not available) — texte gras sans cadre */
body#module-rbfree-form .label-default {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: lowercase !important;
border-radius: 0 !important;
border: 1px solid rgba(0,0,0,0.3) !important;
padding: 2px 8px !important;
background-color: transparent !important;
color: var(--color-noir) !important;
opacity: 0.5 !important;
display: inline-block !important;
}
/* Label "confirmé" (rétractation) — texte gras simple, pas de fond */
body#module-rbfree-form .label-info,
body#module-rbfree-form span.label:not(.label-success):not(.label-default) {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: lowercase !important;
border-radius: 0 !important;
border: none !important;
padding: 0 !important;
background-color: transparent !important;
color: var(--color-noir) !important;
display: inline !important;
}
/* --- Badges statut dans body#history --- */
.rbf-order-history-badge {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-micro) !important;
font-weight: 400 !important;
letter-spacing: 0.05em !important;
text-transform: lowercase !important;
border-radius: 0 !important;
padding: 2px 8px !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
display: inline-block !important;
}
.rbf-order-history-badge--pending { opacity: 1; }
.rbf-order-history-badge--confirmed { opacity: 0.85; }
.rbf-order-history-badge--processing { opacity: 0.7; }
.rbf-order-history-badge--refunded { opacity: 0.55; }
.rbf-order-history-badge--rejected { opacity: 0.45; }
/* --- Bouton de rétractation inline --- */
.rbf-withdrawal-btn {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 10px var(--grid-gap) !important;
text-transform: lowercase !important;
transition: var(--transition-nav) !important;
display: inline-block !important;
}
.rbf-withdrawal-btn:hover,
.rbf-withdrawal-btn:focus { background-color: var(--color-noir-hover) !important; color: var(--color-beige) !important; transform: none !important; box-shadow: none !important; outline: none !important; }
.rbf-withdrawal-btn * { color: var(--color-beige) !important; }
.rbf-withdrawal-muted { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-micro) !important; color: var(--color-noir) !important; opacity: 0.6 !important; }
/* --- Timeline suivi --- */
.rbf-timeline__item { border-left: var(--border) !important; padding-left: var(--grid-gap) !important; padding-bottom: var(--grid-gap) !important; }
.rbf-timeline__item::before { width: 8px !important; height: 8px !important; background: var(--color-noir) !important; border-radius: 0 !important; left: -5px !important; top: 4px !important; }
.rbf-timeline__label { font-family: var(--font-main, sans-serif) !important; font-weight: 500 !important; font-size: var(--fs-body) !important; color: var(--color-noir) !important; }
.rbf-timeline__date { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-micro) !important; color: var(--color-noir) !important; opacity: 0.5 !important; }
.rbf-timeline__body { font-family: var(--font-main, sans-serif) !important; font-size: var(--fs-body) !important; color: var(--color-gris) !important; }
/* --- Bloc détail commande --- */
.rbf-order-detail { margin: var(--grid-gap) 0 !important; border-top: var(--border) !important; padding-top: var(--grid-gap) !important; }
.rbf-order-withdrawal-notice__item + .rbf-order-withdrawal-notice__item { border-top: 1px solid rgba(0,0,0,0.1) !important; }
.rbf-order-withdrawal-notice__ref { font-weight: 500 !important; font-family: var(--font-main, sans-serif) !important; }
/* --- Formulaires (inputs, textarea, select) --- */
body#module-rbfree-form .form-control,
body#module-rbfree-confirm .form-control,
body#module-rbfree-track .form-control {
background-color: var(--color-beige) !important;
border: var(--border) !important;
border-radius: 0 !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
padding: 12px var(--grid-gap) !important;
box-shadow: none !important;
outline: none !important;
-webkit-appearance: none !important;
}
body#module-rbfree-form .form-control:focus,
body#module-rbfree-confirm .form-control:focus,
body#module-rbfree-track .form-control:focus {
outline: 2px solid var(--color-noir) !important;
outline-offset: 2px !important;
box-shadow: none !important;
}
body#module-rbfree-form .form-control:-webkit-autofill,
body#module-rbfree-track .form-control:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px var(--color-beige) inset !important;
-webkit-text-fill-color: var(--color-noir) !important;
}
body#module-rbfree-form label,
body#module-rbfree-confirm label,
body#module-rbfree-track label {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 700 !important;
color: var(--color-noir) !important;
text-transform: lowercase !important;
display: block !important;
margin-bottom: 6px !important;
}
/* --- Alertes (info, warning, secondary) → style KARIO --- */
body#module-rbfree-form .alert,
body#module-rbfree-confirm .alert {
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-body) !important;
color: var(--color-noir) !important;
background-color: var(--color-beige) !important;
border: var(--border) !important;
border-radius: 0 !important;
padding: var(--grid-gap) !important;
box-shadow: none !important;
margin-bottom: var(--grid-gap) !important;
}
body#module-rbfree-form .alert strong,
body#module-rbfree-confirm .alert strong { font-weight: 700 !important; color: var(--color-noir) !important; }
/* --- Bouton danger (submit final) → noir --- */
body#module-rbfree-confirm .btn.btn-danger {
background-color: var(--color-noir) !important;
color: var(--color-beige) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border: none !important;
padding: 10px var(--grid-gap) !important;
text-decoration: none !important;
text-transform: lowercase !important;
box-shadow: none !important;
transition: var(--transition-nav) !important;
}
body#module-rbfree-confirm .btn.btn-danger:hover { background-color: var(--color-noir-hover) !important; }
body#module-rbfree-confirm .btn.btn-danger * { color: var(--color-beige) !important; }
/* --- Lien "Retour" (btn-link) --- */
body#module-rbfree-confirm .btn.btn-link,
body#module-rbfree-form .btn.btn-link {
background: none !important;
border: none !important;
color: var(--color-noir) !important;
font-family: var(--font-main, sans-serif) !important;
font-size: var(--fs-small) !important;
font-weight: 400 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: lowercase !important;
padding: 0 0 0 var(--grid-gap) !important;
box-shadow: none !important;
}
/* --- Lien "Soumettre une nouvelle rétractation" dans track --- */
body#module-rbfree-track .mt-3 a,
body#module-rbfree-track p a {
font-family: var(--font-main, sans-serif) !important;
color: var(--color-noir) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
font-size: var(--fs-small) !important;
}
/* --- Mobile --- */
@media (max-width: 767px) {
body#module-rbfree-form #content-wrapper,
body#module-rbfree-confirm #content-wrapper,
body#module-rbfree-status #content-wrapper { padding: 24px 0 40px !important; }
.rbf-orders-table thead { display: none !important; }
.rbf-orders-table tr { display: block !important; margin-bottom: var(--grid-gap) !important; border: var(--border) !important; padding: calc(var(--grid-gap) / 2) !important; }
.rbf-orders-table td { display: block !important; text-align: right !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; white-space: normal !important; }
.rbf-orders-table td::before { font-weight: 500 !important; float: left !important; }
.rbf-withdrawal-btn { display: block !important; text-align: center !important; }
}
/* ==========================================================================
CHECKBOX RÉTRACTATION — ajouté en fin de fichier pour priorité max
========================================================================== */
#module-rbfree-confirm input[type="checkbox"],
#module-rbfree-form input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
display: inline-block !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
margin: 2px 10px 0 0 !important;
padding: 0 !important;
border: 1px solid var(--color-noir) !important;
background-color: var(--color-beige) !important;
border-radius: 0 !important;
cursor: pointer !important;
vertical-align: top !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: none !important;
outline: none !important;
}
#module-rbfree-confirm input[type="checkbox"]:checked,
#module-rbfree-form input[type="checkbox"]:checked {
background-color: var(--color-noir) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23F5EDD6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px 8px !important;
border-color: var(--color-noir) !important;
}