/* ============================================================
   L'Atelier d'Arthur — Refonte du header desktop
   Cible : .desktop-header-style-2 + .header-nav (bandeau top)
   ============================================================ */

a:focus {
    text-decoration: none;
}

/* Tous les titres h3 : 20px semibold, line-height 24px.
   On cible l'élément h3 (les titres de cartes produits sont des <h2 class="h3">,
   donc non impactés). */
h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

/* Gouttière latérale gérée au niveau de #wrapper (30px), pas sur les .container.
   Scopé UNIQUEMENT aux pages en cours de refonte (via body[id]) :
   catégories, meilleures ventes, promotions, nouveaux produits, recherche iqit, contact. */
#category #wrapper,
#best-sales #wrapper,
#prices-drop #wrapper,
#new-products #wrapper,
#module-iqitsearch-searchiqit #wrapper,
#contact #wrapper,
#product #wrapper,
#module-ph_simpleblog-list #wrapper,
#module-ph_simpleblog-category #wrapper,
#module-ph_simpleblog-single #wrapper,
#pagenotfound #wrapper,
body.cms-id-9 #wrapper,
body.cms-id-10 #wrapper,
#authentication #wrapper,
#password #wrapper,
#registration #wrapper,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #wrapper,
#cart #wrapper,
#checkout #wrapper,
#order-confirmation #wrapper,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #wrapper {
    padding-left: 30px;
    padding-right: 30px;
}
#category #wrapper > .container,
#category #wrapper > #inner-wrapper,
#best-sales #wrapper > .container,
#best-sales #wrapper > #inner-wrapper,
#prices-drop #wrapper > .container,
#prices-drop #wrapper > #inner-wrapper,
#new-products #wrapper > .container,
#new-products #wrapper > #inner-wrapper,
#module-iqitsearch-searchiqit #wrapper > .container,
#module-iqitsearch-searchiqit #wrapper > #inner-wrapper,
#contact #wrapper > .container,
#contact #wrapper > #inner-wrapper,
#product #wrapper > .container,
#product #wrapper > #inner-wrapper,
#module-ph_simpleblog-list #wrapper > .container,
#module-ph_simpleblog-list #wrapper > #inner-wrapper,
#module-ph_simpleblog-category #wrapper > .container,
#module-ph_simpleblog-category #wrapper > #inner-wrapper,
#module-ph_simpleblog-single #wrapper > .container,
#module-ph_simpleblog-single #wrapper > #inner-wrapper,
#pagenotfound #wrapper > .container,
#pagenotfound #wrapper > #inner-wrapper,
body.cms-id-9 #wrapper > .container,
body.cms-id-9 #wrapper > #inner-wrapper,
body.cms-id-10 #wrapper > .container,
body.cms-id-10 #wrapper > #inner-wrapper,
#authentication #wrapper > .container,
#authentication #wrapper > #inner-wrapper,
#password #wrapper > .container,
#password #wrapper > #inner-wrapper,
#registration #wrapper > .container,
#registration #wrapper > #inner-wrapper,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #wrapper > .container,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #wrapper > #inner-wrapper,
#cart #wrapper > .container,
#cart #wrapper > #inner-wrapper,
#checkout #wrapper > .container,
#checkout #wrapper > #inner-wrapper,
#order-confirmation #wrapper > .container,
#order-confirmation #wrapper > #inner-wrapper,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #wrapper > .container,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #wrapper > #inner-wrapper {
    padding-left: 0;
    padding-right: 0;
}

.btn {
    padding: 12px 30px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Effet au survol sur tous les boutons : léger scale + opacité réduite */
.btn:hover {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Pas de changement de fond sur les états hover/focus/active des boutons */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active,
.btn-secondary:disabled:hover,
.btn-secondary:disabled:focus,
.btn-secondary:disabled:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary:disabled:hover,
.btn-primary:disabled:focus,
.btn-primary:disabled:active {
    background: #1A282C;
    color: #FFFFFF;
}

:root {
    --lad-topbar-bg: #1a1a1a;
    --lad-topbar-color: #ffffff;
    --lad-search-bg: #F2F2F2;
    --lad-search-btn-bg: #1a1a1a;
    --lad-icon-color: #1a1a1a;
}

/* ----- Bandeau noir tout en haut ------------------------------ */

#header .header-nav {
    background: var(--lad-topbar-bg);
    color: var(--lad-topbar-color);
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 30px;
    border: 0;
}

#header .header-nav a,
#header .header-nav,
#header .header-nav .header-nav-text {
    color: var(--lad-topbar-color);
}

#header .header-nav .left-nav:not(:has(*)),
#header .header-nav .right-nav:not(:has(*)) {
    display: none;
}

/* Bandeau vide : quand on vide le texte du widget IQITHTMLBANNER en gardant le
   bloc à cet emplacement, aucun des 3 hooks (Nav1 / NavCenter / Nav2) ne rend de
   contenu. On masque alors toute la barre noire, sinon son padding laisse un
   liseré noir visible en haut de page. */
#header .header-nav:not(:has(.center-nav > *)):not(:has(.left-nav > *)):not(:has(.right-nav > *)) {
    display: none;
}

#header .header-nav .row {
    justify-content: center;
}

#header .header-nav .center-nav {
    flex: 1 1 auto;
    text-align: center;
}

#header .header-nav .center-nav .iqit-html-block,
#header .header-nav .center-nav p,
#header .header-nav .center-nav .block-html-content {
    margin: 0;
}

#header .header-nav .center-nav,
#header .header-nav .center-nav p {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
}

/* ----- Header principal (logo + recherche + actions) ---------- */

#desktop-header .header-top {
    padding: 20px 30px 60px;
}

#desktop-header-container {
    padding-left: 0;
    padding-right: 0;
}

/* Header-top : on remplace le gutter Bootstrap (padding latéral sur les .col +
   marge négative sur la .row) par un vrai column-gap. Scope STRICT en `>` pour
   ne PAS impacter les .row/.col imbriquées (dropdown panier, .row.no-gutters
   de droite, etc.). column-gap = var(--bs-gutter-x) → on conserve exactement
   l'espacement actuel (équivalent du gutter d'origine, 24px par défaut). */
#desktop-header-container > .row {
    margin-left: 0;
    margin-right: 0;
    column-gap: var(--bs-gutter-x);
}
#desktop-header-container > .row > * {
    padding-left: 0;
    padding-right: 0;
}

.container.iqit-megamenu-container {
    padding-left: 30px;
    padding-right: 30px;
}

#desktop-header .col-header-left {
    display: flex;
    align-items: center;
}

#desktop-header .col-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#desktop-header #desktop_logo .logo {
    width: 290px;
    max-width: 100%;
    height: auto;
}

/* ----- Barre de recherche en "pill" --------------------------- */

#desktop-header .search-widget {
    width: 100%;
    max-width: 360px;
}

/* Recherche desktop ET popup mobile (#search-widget-mobile) : même habillage —
   input pill + bouton rond avec SVG loupe sur le côté. */
#desktop-header .search-widget form,
#search-widget-mobile form {
    position: relative;
}

#desktop-header .search-widget .input-group,
#search-widget-mobile .input-group {
    background: var(--lad-search-bg);
    border-radius: 999px;
    padding: 8px 8px 8px 22px;
    display: flex;
    align-items: center;
    box-shadow: none;
    border: 0;
}

#desktop-header .search-widget .form-search-control,
#search-widget-mobile .form-search-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    flex: 1 1 auto;
    height: 38px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #1A282C;
}

#desktop-header .search-widget .form-search-control::placeholder,
#search-widget-mobile .form-search-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}

#desktop-header .search-widget .search-btn,
#search-widget-mobile .search-btn {
    position: static;
    background: var(--lad-search-btn-bg);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

/* Remplace le glyph FA loupe par le SVG */
#desktop-header .search-widget .search-btn .fa-search::before,
#search-widget-mobile .search-btn .fa-search::before {
    content: "";
}

#desktop-header .search-widget .search-btn .fa-search,
#search-widget-mobile .search-btn .fa-search {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('/img/cms/Icones/icone-loupe.svg') center / contain no-repeat;
}

/* Popup recherche mobile : conteneur sans padding ni bordure ; l'input reçoit
   ses marges latérales via le form (30px de base, 15px à 500px — voir RESPONSIVE). */
#mobile-header .dropdown-mobile {
    padding: 0px;
    border: none;
    background: transparent;
}
/* Rapproche la popup du bouton recherche (Bootstrap la cale à top:100% du header,
   d'où un écart). margin-top négatif → la remonte. id = bat .dropdown-menu[data-bs-popper]. */
#search-widget-mobile {
    margin-top: -30px;
}
#search-widget-mobile form {
    margin-left: 30px;
    margin-right: 30px;
}

/* ----- Boutons header (compte + panier) — base ---------------- */

#desktop-header .header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--lad-icon-color);
    text-decoration: none;
    line-height: 1;
}

#desktop-header .col-header-right > .row {
    gap: 20px;
}

/* On masque les labels textes ("Connexion", "Panier", prix…) */
#desktop-header .header-btn .title,
#desktop-header .header-btn .info-wrapper {
    display: none !important;
}

/* On enlève les pseudo-glyphes FontAwesome pour les remplacer */
#desktop-header .header-user-btn .fa-user::before,
#desktop-header .header-cart-btn .fa-shopping-bag::before {
    content: "";
}

#desktop-header .header-user-btn .fa-user,
#desktop-header .header-cart-btn .fa-shopping-bag {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

#desktop-header .header-user-btn .fa-user {
    background-image: url('/img/cms/Icones/icone-compte.svg');
}

#desktop-header .header-cart-btn .fa-shopping-bag {
    background-image: url('/img/cms/Icones/icone-panier.svg');
}

/* Badge compteur sur l'icône panier */
#desktop-header .header-cart-btn .cart-products-count-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: white;
    color: black;
    font-size: 12px;
    font-weight: 900;
    font-family: inherit;
    line-height: 18px;
    text-align: center;
    display: inline-block;
}

/* ----- Dropdown panier (s'ouvre au clic sur l'icône) ---------- */

.ps-shoppingcart.dropdown #blockcart-content {
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 3px 20px #DDF0F6;
    width: 350px;
    margin-top: 10px;
}
/* Reset du padding-right 8px hérité du thème */
#blockcart-content .cart-products { padding-right: 0; }
/* Image produit : 69x92 + radius 10 */
#blockcart-content .cart-products .product-image img {
    width: 69px;
    height: 92px;
    object-fit: cover;
    border-radius: 10px;
}
/* Col info : padding-left 15px */
#blockcart-content .cart-products .col-info {
    padding-left: 15px;
}
/* Nom produit */
#blockcart-content .cart-products .col-info .pb-1 a {
    color: #1A282C;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}
/* Input quantité */
#blockcart-content .cart-products .block-cart-product-quantity {
    background-color: #FEF3E1;
    border-radius: 10px;
    border: 0;
    width: 49px !important;
    min-width: 49px;
    max-width: 49px;
    flex: 0 0 49px;
    height: 38px;
    box-sizing: border-box;
}
/* Gap de 8px entre l'input et le wrapper des boutons +/-.
   Le width 75px du thème étrique tout (49 input + 8 gap + boutons > 75) → auto. */
#blockcart-content .cart-products .input-group.bootstrap-touchspin {
    gap: 8px;
    width: auto;
}
/* Boutons +/- : on cache les icônes FontAwesome et on injecte + / - en Raleway */
#blockcart-content .cart-products .bootstrap-touchspin-up .fa-angle-up,
#blockcart-content .cart-products .bootstrap-touchspin-down .fa-angle-down {
    display: none;
}
#blockcart-content .cart-products .bootstrap-touchspin-up,
#blockcart-content .cart-products .bootstrap-touchspin-down {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 18px;
    padding: 0;
    border: 0;
}
#blockcart-content .cart-products .bootstrap-touchspin-up::before { content: '+'; }
#blockcart-content .cart-products .bootstrap-touchspin-down::before { content: '-'; }
/* Colonne quantité (gauche) : pas de padding droit hérité de .col */
#blockcart-content .cart-products .col.ps-0 {
    padding-right: 0;
}
/* Prix + corbeille : on inverse l'ordre (prix à gauche, corbeille à droite),
   space-between pour pousser les deux extrémités contre les bords de la colonne */
#blockcart-content .cart-products .col.p-0 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#blockcart-content .cart-products .col.p-0 > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}
#blockcart-content .cart-products .col.p-0 > span::before { content: 'x '; }
/* Subtotals : border-top crème + padding vertical 20px */
#blockcart-content .cart-subtotals {
    border-top-color: #FEF3E1;
    padding: 20px 0;
}
/* Espace 5px entre les lignes de subtotal (articles / livraison) */
#blockcart-content .cart-subtotals .cart-summary-line + .cart-summary-line {
    margin-top: 5px;
}
/* Totals : border-top 1px crème + padding vertical 20px + typo 20/24 medium */
#blockcart-content .cart-totals {
    border-top: 1px solid #FEF3E1;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}
/* Bouton "Commander" : centré, 16/19 bold, fond #1A282C, radius 30, padding 12x30.
   L'effet hover (scale + opacité) vient du .btn global.
   !important + width:fit-content pour battre .btn-block du thème.
   margin-bottom: 20px → override .mb-2 (8px) pour avoir 20px d'écart avec "Panier". */
#blockcart-content .cart-buttons .btn-primary {
    display: block !important;
    width: fit-content !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px !important;
    background-color: #1A282C;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
}
/* Bouton "Panier" : style lien — pas de fond ni padding, 14/17 regular #1A282C, centré.
   On annule .btn-block (width:100%) pour que text-center du parent centre comme du texte. */
#blockcart-content .cart-buttons .btn-secondary {
    display: inline-block !important;
    width: auto !important;
    background-color: transparent;
    border: 0;
    padding: 0;
    color: #1A282C;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
}

/* ----- Espacement entre les actions --------------------------- */

#header .header-btn-w {
    padding: 0;
}

/* ----- Mégamenu : items principaux ---------------------------- */

#iqitmegamenu-horizontal .cbp-horizontal > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 50px;
}

#iqitmegamenu-horizontal .cbp-horizontal > ul > li > a,
#iqitmegamenu-horizontal .cbp-horizontal > ul > li > .cbp-main-link {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

#iqitmegamenu-horizontal .cbp-tab-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ----- Mégamenu : sous-menus en pleine largeur ---------------- */

/* Le .cbp-hrsub est ancré (position: absolute) sur le container Bootstrap
   (1410px, centré). On le GARDE en absolute pour qu'il suive la barre de menu
   au scroll (sinon, en fixed + top:auto, il se fige par rapport au viewport et
   part au milieu de l'écran). Pour la pleine largeur on utilise le "full-bleed"
   left:50% + margin-left:-50vw + width:100vw (le container étant centré, 50% =
   centre du viewport). */
#cbp-hrmenu .cbp-hrsub {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: transparent;
    /* Espace transparent au-dessus du panneau blanc. Il sert AUSSI de pont :
       comme .cbp-hrsub (descendant de l'item) démarre sous la barre, la souris
       ne quitte jamais la zone survolée en descendant → le sous-menu ne se ferme pas.
       !important pour passer devant `.cbp-hrmenu .cbp-hrsub { padding: 0 !important }`. */
    padding-top: 10px !important;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

#cbp-hrmenu .cbp-hrsub-inner {
    background: #FFFFFF;
    border: 0;
    padding: 50px;
    /* Même ombre que les miniatures au hover */
    box-shadow: 0 3px 20px #DDF0F6;
}

#cbp-hrmenu .cbp-hrsub-inner > .row:last-child,
#cbp-hrmenu .cbp-hrsub-inner .iqitmegamenu-submenu-container > .row:last-child {
    margin-bottom: 0;
}

#cbp-hrmenu .cbp-menu-column {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

#cbp-hrmenu .cbp-hrsub .menu_row {
    --bs-gutter-x: 0;
    gap: 50px;
}

#cbp-hrmenu .cbp-menu-column-inner > p {
    margin-bottom: 0;
}

/* Le contenu interne reste dans la grille normale */
#cbp-hrmenu .cbp-hrsub .iqitmegamenu-submenu-container {
    max-width: 1410px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

#cbp-hrmenu .cbp-hrsub .cbp-category-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
}

#cbp-hrmenu .cbp-hrsub .cbp-category-title:hover::after,
#iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column-title:hover::after {
    opacity: 1;
}

/* ----- Mégamenu : flèches sous-menus -------------------------- */

#iqitmegamenu-horizontal .cbp-submenu-aindicator::before,
#iqitmegamenu-horizontal .fa-angle-down.cbp-submenu-aindicator::before {
    content: "";
}

#iqitmegamenu-horizontal .cbp-submenu-aindicator {
    display: inline-block;
    width: 5px;
    height: 10px;
    background: url('/img/cms/Icones/fleche-menu.svg') center / contain no-repeat;
}

/* ============================================================
   HOME — Section top
   ============================================================ */

/* Header coloré (fond #B8D9E3) uniquement sur la page d'accueil */
#index #header {
    background: #B8D9E3;
}

/* Compensation scrollbar : ces sections sont en `width: 100vw` (full-bleed) donc
   elles débordent de la scrollbar (~15px / 7.5px par côté). On ajoute 7.5px au
   padding latéral pour ré-aligner le contenu avec le header (qui n'utilise pas
   100vw). !important pour passer devant les règles d'ID Elementor des sections. */
.section-top-accueil,
.home-section-title-block,
.home-section-selection,
.home-section-bestsellers,
.home-section-bloc-creme-wrap,
.home-section-grand-title {
    padding-left: 37.5px !important;
    padding-right: 37.5px !important;
}

/* .home-section-blog : Elementor stretched shifte la section de sbw/2 vers la
   gauche (boundingRect calculé sur viewport total avec scrollbar). On compense
   en ajoutant sbw/2 au padding gauche, et sbw/2 supplémentaire au padding droit
   (donc total padding-right = 30 + sbw/2 + sbw/2 = 30 + sbw) pour que le
   contenu interne soit à 30px de chaque bord du viewport visible. */
.elementor-section.home-section-blog {
    padding-left: calc(80px + var(--lad-sbw, 0px) / 2) !important;
    padding-right: calc(80px + var(--lad-sbw, 0px) / 2) !important;
}

.section-top-accueil .elementor-row {
    display: flex;
    align-items: center;
    gap: 130px;
}

.section-top-accueil .column-left-top-accueil,
.section-top-accueil .column-right-top-accueil {
    width: auto;
    max-width: none;
}

/* Ratio 680 / 600 (largeurs maquette) → flex-grow 17 / 15 */
.section-top-accueil .column-left-top-accueil {
    flex: 17 0 0;
}

.section-top-accueil .column-right-top-accueil {
    flex: 15 0 0;
}

/* ============================================================
   FOOTER
   ============================================================ */

#footer {
    background: linear-gradient(
        to bottom,
        rgba(219, 239, 246, 0.03) 0%,
        rgba(219, 239, 246, 0.65) 20%,
        rgba(184, 217, 227, 1) 100%
    );
    color: #1A282C;
}

#footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 500px;
    background: url('/img/cms/Formes/nuages-footer.png') bottom center / cover no-repeat;
}

#footer-container-brand > .container,
#footer-container-main > .container,
#footer-container-first > .container,
#footer-copyrights > .container {
    max-width: 100%;
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
}

/* ----- Zone marque (logo + contact) --------------------------- */

#footer-container-brand {
    padding: 0 0 100px;
}

#footer-container-brand .footer-brand-logo img {
    width: 480px;
    max-width: 100%;
    height: auto;
    display: block;
}

#footer-container-brand .footer-brand-contact {
    padding-left: 90px;
}

#footer-container-brand .footer-brand-contact p {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
}

#footer-container-brand .footer-brand-contact p:last-child {
    margin-bottom: 0;
}

#footer-container-brand .footer-brand-contact a {
    color: inherit;
    text-decoration: none;
}

/* ----- Colonnes de liens -------------------------------------- */

#footer-container-main {
    padding: 0 0 100px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #9BB6BF;
}

#footer-container-main > .container > .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0;
    --bs-gutter-x: 0;
    gap: 20px;
}

#footer-container-main > .container > .row > .col,
#footer-container-main > .container > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

#footer-container-main .block-iqitlinksmanager .block-title {
    color: #1A282C;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin: 0 0 15px;
    border: 0;
    padding-bottom: 0;
    text-transform: none;
}

#footer-container-main .block-iqitlinksmanager .block-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer-container-main .block-iqitlinksmanager .block-content li {
    margin-bottom: 15px;
}

#footer-container-main .block-iqitlinksmanager .block-content a {
    color: #1A282C;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

#footer-container-main .block-links ul > li a::before {
    content: none;
}

#footer-container-main .block-links ul > li a {
    padding-left: 0;
}

/* ----- Copyright (barre du bas) ------------------------------- */

#footer-copyrights {
    background: transparent;
    border: 0;
    padding: 25px 0;
    color: #1A282C;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

#footer-copyrights .footer-legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

#footer-copyrights .footer-legal-links li {
    position: relative;
    padding-right: 20px;
}

#footer-copyrights .footer-legal-links li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #1A282C;
}

#footer-copyrights .footer-legal-links li:last-child {
    padding-right: 0;
}

#footer-copyrights .footer-legal-links a {
    color: #1A282C;
    text-decoration: none;
}

/* ============================================================
   MEGAMENU — Cartes promo (best sellers / projet perso, etc.)
   ============================================================ */

.menu-feature-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.menu-feature-card__text {
    position: absolute;
    left: 20px;
    right: 30px;
    bottom: 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 35px;
    line-height: 41px;
    font-weight: 400;
    color: #FFFFFF;
}

.menu-feature-card__text strong {
    font-weight: 800;
}

/* ----- Petits ajustements responsive -------------------------- */

/* =====================================================================
   Page CMS "L'atelier" (id_cms=8) — styles dédiés
   ===================================================================== */

/* Le .page-header et .breadcrumb sont FRÈRES de .page-cms-8 dans le DOM
   (header.page-header > h1 + section#content.page-cms-8), donc le sélecteur
   doit remonter au body : body.cms-id-8 */
body.cms-id-8 .page-header,
body.cms-id-8 .breadcrumb {
    display: none !important;
}

.page-cms-8 #content-wrapper,
.page-cms-8 #main-page-content,
.page-cms-8 .page-cms,
.page-cms-8 #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
.page-cms-8 #content-wrapper > * {
    margin-left: 0;
    margin-right: 0;
}

.page-cms-8 .atelier-dots {
    line-height: 0;
    margin: 12px 0;
}
.page-cms-8 .atelier-dots .atelier-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.page-cms-8 .atelier-dots .atelier-dot-2 { opacity: 0.55; }
.page-cms-8 .atelier-dots .atelier-dot-3 { opacity: 0.28; }

/* Dots des sections atelier (markup .home-dots dans le widget HTML
   .atelier-section-dots) : couleur crème #EAD9BE au lieu du bleu pâle global. */
.atelier-section-dots .home-dot {
    background: #EAD9BE;
}

/* Sections atelier-section-tech + atelier-section-tech-detail (×2 incluant
   .atelier-section-limpia) : la colonne de droite ne dépasse pas 570px,
   la row passe en space-between pour pousser la col-right contre le bord droit. */
.atelier-section-tech .elementor-row,
.atelier-section-tech-detail .elementor-row {
    justify-content: space-between;
}
.atelier-tech-col-right,
.atelier-tech-detail-col-right {
    max-width: 570px;
}
/* Dots de la section "Nos catégories" (page atelier) : centrés. Override
   l'inline style="text-align:left" via !important. */
.atelier-cats-dots .home-dots {
    text-align: center !important;
}

.page-cms-8 .atelier-section-hero {
    overflow: hidden;
}
.page-cms-8 .atelier-section-hero .elementor-row {
    align-items: stretch;
}
.page-cms-8 .atelier-hero-col-right .elementor-column-wrap {
    padding: 0 !important;
}
/* Chaîne height: 100% pour que l'image remplisse toute la hauteur de la section
   (desktop seulement — retiré à 991 où les 2 colonnes s'empilent verticalement) */
@media (min-width: 992px) {
    .page-cms-8 .atelier-hero-col-right,
    .page-cms-8 .atelier-hero-col-right .elementor-column-wrap,
    .page-cms-8 .atelier-hero-col-right .elementor-widget-wrap,
    .page-cms-8 .atelier-hero-col-right .elementor-widget-image,
    .page-cms-8 .atelier-hero-col-right .elementor-widget-image > .elementor-widget-container {
        height: 100%;
    }
    .page-cms-8 .atelier-hero-col-right .elementor-image,
    .page-cms-8 .atelier-hero-col-right .elementor-image a,
    .page-cms-8 .atelier-hero-col-right .elementor-image img {
        width: 100%;
        height: 100%;
        display: block;
    }
}
.page-cms-8 .atelier-hero-col-right .elementor-image img {
    object-fit: cover;
    border-radius: 0 !important;
    min-height: 540px;
}
.page-cms-8 .atelier-hero-title .elementor-heading-title,
.page-cms-8 .atelier-hero-subtitle .elementor-heading-title {
    font-weight: 700;
}
.page-cms-8 .atelier-hero-text {
    max-width: 520px;
}

/* Hero col gauche : titre+dots en haut, subtitle+texte en bas.
   Mécanique : .elementor-column-wrap est déjà flex (mais en row par défaut, et il n'a
   qu'UN enfant .elementor-widget-wrap). Pour que `margin-top: auto` fonctionne sur le
   sous-titre, il faut transformer .elementor-widget-wrap en flex container vertical. */
.page-cms-8 .atelier-hero-col-left > .elementor-column-wrap {
    align-self: stretch;
}
.page-cms-8 .atelier-hero-col-left .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column;
    min-height: 540px;
    width: 100%;
}
.page-cms-8 .atelier-hero-col-left .atelier-hero-subtitle {
    margin-top: auto !important;
}

.page-cms-8 .atelier-section-title .elementor-heading-title,
.page-cms-8 .atelier-cats-title .elementor-heading-title {
    font-weight: 600;
}

.page-cms-8 .atelier-section-cards .elementor-row {
    align-items: stretch;
    gap: 30px;
}
.page-cms-8 .atelier-card {
    background: #ffffff;
    border-radius: 15px;
}
/* Reveal en fondu des cartes : masquées dès le 1er rendu (pas de flash),
   révélées par le JS (`.lad-reveal--visible`) quand chaque carte entre dans
   le viewport. */
.page-cms-8 .atelier-section-cards .atelier-card {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.page-cms-8 .atelier-section-cards .atelier-card.lad-reveal--visible {
    opacity: 1;
}
/* Desktop (4 cartes en ligne) : cascade de 0.3s entre chaque carte. Elles
   entrent ensemble dans le viewport → le `transition-delay` séquence leur
   apparition. En dessous de 1025px (2×2 puis empilé), pas de pause : chaque
   carte apparaît quand elle entre dans le viewport. */
@media (min-width: 1025px) {
    .page-cms-8 .atelier-section-cards .atelier-card:nth-child(2) { transition-delay: 0.3s; }
    .page-cms-8 .atelier-section-cards .atelier-card:nth-child(3) { transition-delay: 0.6s; }
    .page-cms-8 .atelier-section-cards .atelier-card:nth-child(4) { transition-delay: 0.9s; }
}
@media (prefers-reduced-motion: reduce) {
    .page-cms-8 .atelier-section-cards .atelier-card {
        opacity: 1;
        transition: none;
    }
}
@media (scripting: none) {
    .page-cms-8 .atelier-section-cards .atelier-card {
        opacity: 1;
    }
}
.page-cms-8 .atelier-card .elementor-column-wrap {
    padding-top: 28px;
    padding-bottom: 28px;
}
.page-cms-8 .atelier-card-icon-wrap {
    text-align: left;
}
.page-cms-8 .atelier-card-icon {
    color: #1A282C;
    margin-bottom: 18px;
    line-height: 0;
    display: inline-block;
}
.page-cms-8 .atelier-card-icon svg {
    display: block;
}
.page-cms-8 .atelier-card-title .elementor-heading-title {
    font-weight: 700;
    font-size: 14px;
}
.page-cms-8 .atelier-card-body p {
    margin: 0;
    color: #1A282C;
}

.page-cms-8 .atelier-tech-title .elementor-heading-title {
    font-weight: 600;
}
.page-cms-8 .atelier-tech-cta .elementor-button {
    background: #1A282C !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 12px 26px !important;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.page-cms-8 .atelier-tech-cta .elementor-button:hover {
    background: #000000 !important;
}

.page-cms-8 .atelier-tech-detail-title .elementor-heading-title {
    font-weight: 400;
}

/* Séparateurs Tech / Siliconage / LIMPIA
   - Tech : section padding-bottom 0, container padding-bottom 50px + bordure → trait à l'intérieur boxed
   - Tech-detail (Siliconage + LIMPIA) : section padding-bottom 0 côté builder,
     padding-bottom 75 + bordure portés par le row (donc au bord interne boxed) */
.page-cms-8 .atelier-section-tech > .elementor-container {
    padding-bottom: 50px;
    border-bottom: 1px solid #707070;
}
.page-cms-8 .atelier-section-tech-detail > .elementor-container > .elementor-row {
    padding-bottom: 75px;
    border-bottom: 1px solid #707070;
}
/* LIMPIA = dernière section tech-detail avant l'image pleine largeur : pas de border */
.page-cms-8 .atelier-section-limpia > .elementor-container > .elementor-row {
    border-bottom: none;
}

.page-cms-8 .atelier-section-full-image .elementor-image,
.page-cms-8 .atelier-section-full-image .elementor-image a,
.page-cms-8 .atelier-section-full-image .elementor-image img {
    width: 100%;
    display: block;
}
/* Flou de scroll de l'image plein-écran : le flou est PILOTÉ par le JS via
   `--lad-deblur` (vraie balise `<img>`, on la floute directement). Mode "pic
   au centre" : nette quand loin du centre, max flou quand son centre atteint
   le centre du viewport. 0px par défaut (nette) si le JS ne tourne pas. */
.page-cms-8 .atelier-section-full-image .elementor-image img {
    filter: blur(var(--lad-deblur, 0px));
}

/* Section cats : alignement vertical asymétrique
   - image gauche : en BAS de la row
   - liste centre : centrée verticalement
   - image droite : en HAUT de la row
   `align-self` sur chaque colonne flex-item override le `align-items: stretch` du row */
.page-cms-8 .atelier-section-cats .elementor-row {
    align-items: stretch;
    gap: 100px;
    flex-wrap: nowrap;
}
.page-cms-8 .atelier-cat-col-left { align-self: flex-end !important; }
.page-cms-8 .atelier-cat-col-list { align-self: center !important; }
.page-cms-8 .atelier-cat-col-right { align-self: flex-start !important; }
.page-cms-8 .atelier-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}
.page-cms-8 .atelier-cat-item {
    margin: 0;
    font-size: 66px;
    font-weight: 400;
    color: #1A282C;
    line-height: 1.1;
}
.page-cms-8 .atelier-cat-item a {
    color: inherit;
    text-decoration: none;
    transition: font-weight 0.15s ease;
}
.page-cms-8 .atelier-cat-item a:hover,
.page-cms-8 .atelier-cat-item.active a {
    font-weight: 700;
}
.page-cms-8 .atelier-cat-col-img .elementor-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 30px !important;
}

/* ================================================================== */
/* Page CMS "Avantages particuliers" (id_cms=9)                       */
/* ================================================================== */

/* Masque H1/breadcrumb auto PrestaShop sur ces pages */
body.cms-id-9 .page-header,
body.cms-id-9 .breadcrumb,
body.cms-id-10 .page-header,
body.cms-id-10 .breadcrumb { display: none !important; }

/* Neutralise le padding du wrapper PrestaShop pour les sections full-width */
.page-cms-9 #content-wrapper,
.page-cms-9 #main-page-content,
.page-cms-9 .page-cms,
.page-cms-9 #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
.page-cms-9 #content.page-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Composants partagés --- */
.page-cms-9 .atelier-av-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.page-cms-9 .atelier-av-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DDF0F6;
    display: inline-block;
}

/* --- Section 1 : Hero (commune cms-9 + cms-10) --- */
:is(.page-cms-9, .page-cms-10) .atelier-av-section-hero .elementor-container {
    align-items: stretch;
}
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left {
    width: 57.5% !important;
    z-index: 1;
}
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-right {
    width: calc(42.5% + 30px) !important;
    margin-left: -30px;
}
/* Chaîne full-height : la col stretchée doit transmettre sa hauteur jusqu'à
   l'image (chaque wrapper intermédiaire d'Elementor doit être 100%). */
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left > .elementor-element-populated,
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-widget-wrap,
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .atelier-av-hero-img,
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .atelier-av-hero-img .elementor-widget-container {
    height: 100%;
}
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-image,
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-image img {
    width: 100%;
    height: 100%;
    display: block;
}
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-image img {
    object-fit: cover;
    border-radius: 30px;
    min-height: 420px;
}
/* La col droite déborde un peu en bas de l'image */
:is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-right .elementor-column-wrap {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* --- Section 2 : Pourquoi + Confort --- */
.page-cms-9 .atelier-av-section-pourquoi .elementor-container {
    align-items: flex-start;
}
/* Cols : 720 (gauche) + 120 (gap) + 570 (droite) = 1410 (container max).
   Flex + gap pour rester propre ; % calculés sur 1410 : 720/1410 = 51.06%,
   120/1410 = 8.51%, 570/1410 = 40.43%. */
.page-cms-9 .atelier-av-section-pourquoi .elementor-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8.51%;
}
/* Col gauche : peut shrink pour absorber le min-width 430 imposé à droite
   quand 40.43% < 430px (viewport étroit). */
.page-cms-9 .atelier-av-pourquoi-col-left {
    flex: 1 1 51.06%;
    width: 51.06% !important;
    max-width: 51.06%;
    min-width: 0;
}
.page-cms-9 .atelier-av-pourquoi-col-right {
    flex: 0 0 auto;
    width: 40.43% !important;
    min-width: 430px;
}
.page-cms-9 .atelier-av-pourquoi-col-left > .elementor-element-populated,
.page-cms-9 .atelier-av-pourquoi-col-right > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.page-cms-9 .atelier-av-stat {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 50px;
    align-items: center;
    padding: 55px 0;
    border-bottom: 1px solid #707070;
}
.page-cms-9 .atelier-av-stat-wrap:last-of-type .atelier-av-stat {
    border-bottom: none;
}
.page-cms-9 .atelier-av-stat-num {
    font-size: 66px;
    font-weight: 400;
    color: #1A282C;
    line-height: 1;
    text-align: center;
}
.page-cms-9 .atelier-av-stat-title {
    font-size: 22px;
    font-weight: 700;
    color: #1A282C;
    margin: 0 0 20px 0;
    line-height: 26px;
}
.page-cms-9 .atelier-av-stat-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    margin: 0;
}

/* --- Section "Qualité française" : full-bleed avec hauteur fixe, contenu
   aligné en bas (container + row en height 100% + align-items: flex-end). */
.section-qualite-francais {
    height: 675px;
}
.section-qualite-francais > .elementor-container {
    height: 100%;
}
.section-qualite-francais .elementor-row {
    height: 100%;
    align-items: flex-end;
}
.titre-qualite-francais {
    max-width: 1065px;
    margin-left: auto;
    margin-right: 0;
}

/* --- Section "Solutions adaptées" : 3 cols centrées verticalement, gap 90.
   `flex-wrap: nowrap` + cols en `flex: 1 1 0` pour qu'elles partagent l'espace
   restant après le gap (au lieu d'occuper chacune 33% rigide → débord = 3e col
   qui wrap sous les 2 autres). */
.section-solutions-adaptees .elementor-row {
    align-items: center;
    gap: 90px;
    flex-wrap: nowrap;
}
.section-solutions-adaptees .elementor-row > .elementor-column {
    flex: 1 1 0;
    width: auto !important;
    max-width: none;
    min-width: 0;
}
/* Col centrale (image) : stretch à 100% de la section et chaîne height 100%
   jusqu'à l'image, avec object-fit cover pour cropper proprement. */
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) {
    align-self: stretch;
}
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) > .elementor-element-populated,
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) .elementor-widget-wrap,
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) .elementor-widget-image,
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) .elementor-widget-image .elementor-widget-container,
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) .elementor-image {
    height: 100%;
}
.section-solutions-adaptees .elementor-row > .elementor-column:nth-child(2) .elementor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Section "Fabricant à vos côtés" : 2 cols 570 (gauche) + 90 (gap)
   + 750 (droite) = 1410. En % du parent : 570/1410 = 40.43%, 90/1410 = 6.38%,
   750/1410 = 53.19%. Flex + gap + min-width 430 sur la col texte. */
.elementor-row:has(> .column-fabricant-left) {
    display: flex;
    flex-wrap: nowrap;
    gap: 6.38%;
}
.column-fabricant-left {
    flex: 1 1 40.43%;
    width: 40.43% !important;
    max-width: 40.43%;
    min-width: 0;
}
.column-fabricant-right {
    flex: 0 0 auto;
    width: 53.19% !important;
    min-width: 430px;
}
.column-fabricant-right .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* --- Grille de stats réutilisable (4 items, 2 cols, chiffre 66/400/77,
   divider 1px #707070, label 22/700/26). Markup attendu :
   .lad-stats-grid > .lad-stat-item > (.lad-stat-num + <hr.lad-stat-divider> + .lad-stat-label) */
.lad-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 90px;
}
.lad-stat-num {
    font-family: 'Raleway', sans-serif;
    font-size: 66px;
    font-weight: 400;
    line-height: 77px;
    color: #1A282C;
    margin: 0 0 30px;
}
/* hr.lad-stat-divider : spec (0,1,1) montée + !important pour battre
   `.elementor hr { margin:0 }` et `hr { border-top:1px solid rgba(160,160,160,.25); margin:16px 0 }` */
.lad-stats-grid hr.lad-stat-divider {
    border: 0 !important;
    border-top: 1px solid #707070 !important;
    margin: 0 0 30px !important;
    opacity: 1 !important;
    background: transparent !important;
}
.lad-stat-label {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #1A282C;
    margin: 0;
}

/* --- Liste d'icones réutilisable (icone + label aligné, vertical, gap 90 entre
   items, gap 35 entre l'icone et son label). Markup attendu :
   .lad-icon-list > .lad-icon-item > (img.lad-icon-item-icon + p.lad-icon-item-label) */
.lad-icon-list {
    display: flex;
    flex-direction: column;
    gap: 90px;
}
.lad-icon-item {
    display: flex;
    align-items: center;
    gap: 35px;
}
.lad-icon-item-icon {
    flex: 0 0 auto;
}
.lad-icon-item-label {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #1A282C;
    margin: 0;
}
.page-cms-9 .atelier-av-confort-img .elementor-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 30px !important;
}

/* --- Section 3 : Dark block --- */
/* Cols : inverse strict de la section pourquoi : 570 (gauche) + 120 (gap)
   + 720 (droite) = 1410. En % du parent : 570/1410 = 40.43% ;
   120/1410 = 8.51% ; 720/1410 = 51.06%. */
.page-cms-9 .atelier-av-section-dark .elementor-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8.51%;
}
/* Symétrique à la section pourquoi : la col étroite (40.43% = image)
   garde min 430px, la col large (51.06% = texte) peut shrink. */
.page-cms-9 .atelier-av-dark-col-left {
    flex: 0 0 auto;
    width: 40.43% !important;
    min-width: 430px;
}
.page-cms-9 .atelier-av-dark-col-right {
    flex: 1 1 51.06%;
    width: 51.06% !important;
    max-width: 51.06%;
    min-width: 0;
}
/* Image alignée en bas de la col-left : chaîne wrap en flex column avec
   justify-content: flex-end. Le margin-top: -150px est conservé pour le
   débord visuel vers le haut typique de la section. */
.page-cms-9 .atelier-av-dark-col-left > .elementor-element-populated,
.page-cms-9 .atelier-av-dark-col-left .elementor-widget-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.page-cms-9 .atelier-av-dark-col-left .elementor-image {
    margin-top: -150px;
}
.page-cms-9 .atelier-av-dark-col-left .elementor-image img {
    width: 100%;
    max-width: 600px;
    height: 796px;
    object-fit: cover;
    border-radius: 30px !important;
    display: block;
    margin: 0 auto;
}
.page-cms-9 .atelier-av-dark-col-right {
    display: flex;
    align-items: flex-end;
}
.page-cms-9 .atelier-av-dots-on-dark span {
    background: #FFFFFF;
}
.page-cms-9 .atelier-av-dark-cta .elementor-button {
    padding: 12px 28px !important;
}

/* --- Section 4 : Engagements --- */
.page-cms-9 .atelier-av-engagements-title .elementor-heading-title {
    max-width: 930px;
}
/* 3 cards égales avec un gap fixe de 30px entre chaque */
.page-cms-9 .atelier-av-section-cards .elementor-row {
    display: flex;
    gap: 30px;
}
.page-cms-9 .atelier-av-section-cards .atelier-av-card {
    flex: 1 1 0;
    width: auto !important;
    max-width: none;
}
.page-cms-9 .atelier-av-card .elementor-column-wrap {
    background: #FEF3E1;
    border-radius: 30px;
}
.page-cms-9 .atelier-av-card-text p {
    margin: 0;
}

/* --- Responsive --- */

/* =====================================================================
   Page d'accueil — sections ajoutées (build_landing_home.py)
   Préfixe `home-` pour ne pas collisionner avec `atelier-` / `atelier-av-`
   ===================================================================== */

/* --- Tous les H1 du site : extrabold (font-weight 800). La taille est laissée
   au theme parent en desktop (2.5rem) et est écrasée à 25px à ≤ 767px par
   la règle responsive plus bas. --- */
h1 { font-weight: 800; }

/* --- Tous les H2 du site : 25px / semibold / line-height 30px --- */
h2,
.home-section-title .elementor-heading-title {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
}

/* --- 3 dots component (réutilisé sur plusieurs sections) — #DDF0F6, 10x10 --- */
.home-dots { line-height: 0; margin: 0; }
.home-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    background: #DDF0F6;
}
.home-dot:last-child { margin-right: 0; }

/* --- Section 1 : Bandeau USPs marquee --- */
.home-section-usps { overflow: hidden; }
.home-section-usps .elementor-widget-html,
.home-section-usps .elementor-widget-wrap,
.home-section-usps .elementor-column-wrap { overflow: hidden; }
.home-usps {
    width: 100%;
    height: 58px;
    overflow: hidden;
    position: relative;
}
.home-usps-track {
    display: flex;
    width: max-content;
    height: 58px;
    align-items: center;
    white-space: nowrap;
    animation: home-usps-scroll 90s linear infinite;
    will-change: transform;
}
.home-usp-item {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    padding: 0 36px;
    white-space: nowrap;
}
.home-usp-icon { display: inline-flex; align-items: center; color: #1A282C; }
.home-usp-icon svg { display: block; }
.home-usp-svg { display: block; }
@keyframes home-usps-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Section titres "Notre sélection" / "Nos best sellers" --- */
.home-section-title .elementor-heading-title {
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}

/* --- Grand titre "Coussins & Déco…" : 66px / regular / lh77, aligné droite, coupé sur 2 lignes --- */
.home-grand-title .elementor-heading-title {
    font-family: 'Raleway', sans-serif;
    font-size: 66px !important;
    font-weight: 400 !important;
    line-height: 77px !important;
    color: #1A282C;
    max-width: 1110px;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* --- Retrait du padding automatique autour des colonnes (gap par défaut Elementor).
   Même spécificité (0,2,0) que les règles du module, chargé après => écrase le défaut.
   Les paddings explicites (par ID, spécificité supérieure) restent appliqués. --- */
.elementor-column-gap-default .elementor-element-populated,
.elementor-column-gap-narrow .elementor-element-populated,
.elementor-column-gap-extended .elementor-element-populated,
.elementor-column-gap-wide .elementor-element-populated { padding: 0; }

/* --- Carousel produits : flèches = SVG custom, 7.54x15.07, à 40px des cards --- */
.home-section-products .elementor-swiper-button {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 7.54px;
    height: 15.07px;
    padding: 0;          /* sinon le padding du thème + background contain agrandit la flèche */
    margin: 0;
    box-sizing: content-box;
    color: transparent;
}
/* Neutraliser le glyphe par défaut de Swiper (font-icon via ::after) */
.home-section-products .elementor-swiper-button::after,
.home-section-products .elementor-swiper-button::before {
    content: none !important;
    display: none !important;
}
/* Les flèches doivent sortir à 40px hors des cards, mais .swiper-container-wrapper
   a overflow:hidden qui les rogne. On déplace leur bloc conteneur vers le widget
   (.home-products-carousel) en neutralisant les position:relative intermédiaires :
   ainsi les flèches échappent au clip du wrapper. */
.home-products-carousel { position: relative; }
.home-products-carousel .swiper-container-wrapper,
.home-products-carousel .swiper-products-carousel { position: static; }
.home-section-products .elementor-swiper-button-prev {
    left: -47.5px;   /* => 40px entre la flèche et la 1ère card */
    background-image: url("/img/cms/Icones/fleche-gauche-slider.svg");
}
.home-section-products .elementor-swiper-button-next {
    right: -47.5px;  /* => 40px entre la flèche et la dernière card */
    background-image: url("/img/cms/Icones/fleche-droite-slider.svg");
}

/* --- Slider "Dans la même catégorie" (page produit) ---
   NB : le slider "Produits liés" (footer accessoires) réutilise ce style : son
   <section> porte AUSSI la classe .category-products (voir catalog/product.tpl,
   block product_accessories_footer). Toute règle ci-dessous s'applique donc aux deux.
   MÊME pattern que les sliders produits home (.home-products-carousel) :
   - position:relative sur le widget pour ancrer les flèches absolutes
   - position:static sur les wrappers internes pour échapper à overflow:hidden
   - gutter via padding 25px sur .swiper-slide + margin -25px sur wrapper englobant
     (PAS gap CSS qui casse les translations Swiper, PAS spaceBetween JS)
   - flèches SVG 7.54×15.07 à -47.5px des bords */
#product .category-products { position: static; }
/* On ancre les flèches sur .category-products-slider-anchor (wrapper ajouté
   dans le template autour du slider seulement, sans le titre ni les dots),
   pour que top:50% soit vraiment centré sur les miniatures. Le wrapper n'a
   PAS overflow:clip (contrairement à .block-content/.swiper-container)
   donc les flèches à -47.5px peuvent déborder. */
#product .category-products .category-products-slider-anchor { position: relative; }
#product .category-products .block-content,
#product .category-products .swiper-container-wrapper,
#product .category-products .swiper-default-carousel,
#product .category-products .swiper-container { position: static; }
/* Gutter : padding 25px sur slide, marge négative -25px sur wrapper pour aligner
   les bords des cards extrêmes sur le bord du widget */
#product .category-products .block-content {
    margin-left: -25px;
    margin-right: -25px;
}
#product .category-products .swiper-default-carousel,
#product .category-products .swiper-container {
    margin-left: 0;
    margin-right: 0;
}
#product .category-products .swiper-slide {
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
}
/* Overflow vertical libéré pour ombres hover des miniatures */
#product .category-products .block-content,
#product .category-products .swiper-default-carousel,
#product .category-products .swiper-container {
    overflow-x: clip;
    overflow-y: visible;
}
/* Miniature radius cohérent avec la home */
#product .category-products .product-miniature {
    border-radius: 30px;
    overflow: hidden;
}
/* Flèches : mêmes SVG que la home */
#product .category-products .swiper-button-prev,
#product .category-products .swiper-button-next {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 7.54px;
    height: 15.07px;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    color: transparent;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 5;
}
#product .category-products .swiper-button-prev::after,
#product .category-products .swiper-button-prev::before,
#product .category-products .swiper-button-next::after,
#product .category-products .swiper-button-next::before {
    content: none !important;
    display: none !important;
}
#product .category-products .swiper-button-prev {
    left: -47.5px;
    background-image: url("/img/cms/Icones/fleche-gauche-slider.svg");
}
#product .category-products .swiper-button-next {
    right: -47.5px;
    background-image: url("/img/cms/Icones/fleche-droite-slider.svg");
}
/* Titre de section : aligné à gauche, h2 24px 600, avec 3 dots à gauche dessous */
#product .category-products .section-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    color: #1A282C;
    margin: 0 0 15px 0;
    padding-bottom: 0;
    text-align: left;
}
#product .category-products .home-dots-center {
    text-align: left;
    margin: 0 0 35px 0;
}
#product .category-products .home-dots-center .home-dot {
    margin-right: 8px;
    background: #DDF0F6;
}
#product .category-products .home-dots-center .home-dot:last-child { margin-right: 0; }
#product .category-products.block.block-section { margin-top: 120px; }

/* --- Blog slider (home + page produit) : mêmes arrows SVG que les sliders produits --- */
.home-blog-cards .elementor-swiper-button,
.related-blog-cards .elementor-swiper-button {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 7.54px;
    height: 15.07px;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    color: transparent;
}
.home-blog-cards .elementor-swiper-button::after,
.home-blog-cards .elementor-swiper-button::before,
.related-blog-cards .elementor-swiper-button::after,
.related-blog-cards .elementor-swiper-button::before {
    display: none !important;
}
/* Échappement de l'overflow:hidden du <section.swiper-overflow> : on ancre les
   arrows sur le widget .home-blog-cards en neutralisant les position:relative
   intermédiaires (même technique que pour les sliders produits). */
.home-blog-cards,
.related-blog-cards { position: relative; }
.home-blog-cards .elementor-widget-container,
.home-blog-cards .elementor-blog-posts-carousel,
.related-blog-cards .elementor-widget-container,
.related-blog-cards .elementor-blog-posts-carousel { position: static; }
.home-blog-cards .elementor-swiper-button-prev,
.related-blog-cards .elementor-swiper-button-prev {
    left: -47.5px;
    background-image: url("/img/cms/Icones/fleche-gauche-slider.svg");
}
.home-blog-cards .elementor-swiper-button-next,
.related-blog-cards .elementor-swiper-button-next {
    right: -47.5px;
    background-image: url("/img/cms/Icones/fleche-droite-slider.svg");
}
.home-products-carousel .product-miniature {
    border-radius: 30px;
    overflow: hidden;
}

/* --- Section 4 : 2 banners cliquables --- */
.home-section-banners .elementor-row { display: flex; }
.home-banner-col .elementor-widget-wrap { padding: 0 !important; }
.home-banner-wrap,
.home-banner-wrap .elementor-widget-container { height: 100%; }
/* Full section 870px + bouton ancré en bas (space-between) */
.home-section-banners .home-banner-col { min-height: 870px; display: flex; }
.home-banner-col > .elementor-column-wrap { display: flex; flex: 1; }
.home-banner-col > .elementor-column-wrap > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
/* Bloc titre+texte épinglé au centre du viewport, descend au scroll (sticky natif).
   margin-bottom = hauteur du bouton + 30px (injectée par custom.js) → le bloc
   s'arrête exactement à 30px au-dessus du bouton. */
.home-section-banners .elementor-inner-section {
    position: -webkit-sticky;
    position: sticky;
    top: 42%;
    margin-bottom: var(--lad-banner-reserve, 90px);
}
/* Navigateurs récents : descente parallax pilotée par le scroll (compositeur =
   ultra-fluide). Le bloc avance MOINS vite que le scroll → ne colle pas pile au
   centre, descente un poil plus lente. Firefox conserve le sticky ci-dessus. */
@supports (animation-timeline: view()) {
    .home-section-banners {
        view-timeline-name: --lad-banners;
        view-timeline-axis: block;
    }
    .home-section-banners .elementor-inner-section {
        position: static;
        margin-bottom: 0;
        animation: lad-banner-descend linear both;
        animation-timeline: --lad-banners;
        /* Plage de scroll qui pilote la descente. Élargir la 2e valeur
           = plus lent / plus "lourd" (max = cover 100%) ; la réduire = plus rapide. */
        animation-range: cover 0% cover 75%;
    }
    @keyframes lad-banner-descend {
        from { transform: translateY(0); }
        to   { transform: translateY(var(--lad-banner-travel, 0px)); }
    }
}

/* Flou de l'image de fond des bannières piloté par le scroll (JS) :
   l'image arrive floue par le bas et se nettoie en atteignant le centre du
   viewport. On floute un `::before` (copie du bg injectée par JS dans
   `--lad-bg`) et non la colonne → le texte / bouton restent nets.
   PERF : le rayon `--lad-deblur` est quantifié par pas de 1px côté JS et écrit
   seulement quand il change → le flou n'est re-rendu qu'à chaque palier (~14×
   sur tout un défilement), pas à chaque frame. Le `::before` est en `inset:0`
   (pas de `clip-path`/`overflow` → couche compositable, et le bg Elementor net
   de la colonne comble les bords adoucis par le flou). Scope `.home-banner-col`,
   pas les IDs Elementor. N'agit que si `--lad-bg` est défini par le JS. */
.home-section-banners .home-banner-col > .elementor-column-wrap[style*="--lad-bg"] {
    position: relative;
}
.home-section-banners .home-banner-col > .elementor-column-wrap[style*="--lad-bg"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--lad-bg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    filter: blur(var(--lad-deblur, 0px));
}
.home-section-banners .home-banner-col > .elementor-column-wrap[style*="--lad-bg"] > .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* Texte : 350px max, centré */
.home-banner-col-texte .elementor-text-editor {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Ombre portée sur les titres : #000 16% / x0 y3 flou 6 */
.home-banner-col-title .elementor-heading-title {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.home-banner-card {
    display: block;
    position: relative;
    min-height: 460px;
    height: 100%;
    background-size: cover;
    background-position: center;
    text-decoration: none !important;
    overflow: hidden;
}
.home-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 40, 44, 0.45);
}
.home-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 460px;
    padding: 60px 40px;
    text-align: center;
    color: #FFFFFF;
}
.home-banner-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 18px;
}
.home-banner-subtitle {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: #FFFFFF;
    max-width: 480px;
    margin: 0 auto 28px;
    opacity: 0.92;
}
.home-banner-btn {
    display: inline-block;
    background: #1A282C;
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
}

/* --- Section 8 : Bloc CRÈME édito (inner-section radius global) --- */
.home-bloc-creme {
    border-radius: 30px;
    overflow: hidden;
    background-color: #FEF3E1 !important;
}
.home-bloc-creme > .elementor-container { max-width: 100% !important; }
.home-bloc-creme > .elementor-container > .elementor-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
/* Colonne image : largeur fixe 480px ; colonne texte : prend le reste, gap 80px */
.home-bloc-creme-img-col {
    flex: 0 0 480px !important;
    max-width: 480px !important;
    width: 480px !important;
    align-self: center;
}
.home-bloc-creme-text-col {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 80px !important;
    align-self: center;
}
.home-bloc-creme-img-col .elementor-widget-image .elementor-widget-container,
.home-bloc-creme-img-col .elementor-image { display: flex; }
.home-bloc-creme-img-col .elementor-image img {
    width: 480px;
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
    /* Flou de scroll piloté par JS (même système quantifié que les bannières).
       La balise étant une vraie `<img>`, on la floute directement (rien autour
       à protéger). `--lad-deblur` est mis à jour par le JS ; 0px par défaut
       (image nette) si le JS ne tourne pas. */
    filter: blur(var(--lad-deblur, 0px));
}
.home-bloc-creme-text-col .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.home-bloc-creme-subtitle .elementor-heading-title { font-family: 'Raleway', sans-serif; }
.home-bloc-creme-text { font-family: 'Raleway', sans-serif; }
/* 3 dots de cette section uniquement : crème #EAD9BE (override du global #DDF0F6) */
.home-bloc-creme-dots .home-dot { background: #EAD9BE; }

/* --- Cards produits (style maquette, GLOBAL — tous les carousels du site) ---
   Structure cible maquette :
     [ image produit plein cadre + dégradé bas ]
       Titre produit (BLANC, en overlay sur le dégradé)
     [  Prix  TTC          ☆   (🛒)  ]   (pill blanche arrondie, alignée bas)
*/
.product-miniature {
    background: #B8D9E3;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    padding: 0;
    box-shadow: none;
}
/* Ombre au survol sur toutes les miniatures : #DDF0F6 / x0 y3 flou20 */
.product-miniature:hover {
    box-shadow: 0 3px 20px #DDF0F6;
}
/* Image en plein cadre = définit la hauteur (carré) */
.product-miniature .thumbnail-container {
    background: transparent;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.product-miniature .thumbnail-container .thumbnail,
.product-miniature .thumbnail-container .product-thumbnail {
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
}
/* Hauteur de la zone image (= hauteur card, la description est en overlay absolu) */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-container .thumbnail,
.product-miniature .thumbnail-container .product-thumbnail {
    height: 420px;
}
.product-miniature .thumbnail-container .thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
/* Dégradé sur les 40% bas de l'image : #668C96 (transparent) -> #4B666C (opaque) */
.product-miniature .thumbnail-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(102,140,150,0) 0%, rgba(75,102,108,1) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Badge "Nouveauté" / "-30%" en haut-gauche, rond blanc */
.product-miniature .product-flags {
    position: absolute;
    top: 14px;
    left: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 4;
}
.product-miniature .product-flags li.product-flag {
    background: #FFFFFF;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    text-transform: none;
    letter-spacing: 0;
    display: inline-block;
}
/* Masquer le badge "En cours de réapprovisionnement", catégorie, réf, description, compare, quickview */
.product-miniature .product-availability,
.product-miniature .product-category-name,
.product-miniature .product-reference,
.product-miniature .product-brand,
.product-miniature .product-description-short { display: none !important; }
.product-miniature .btn-iqitcompare-add,
.product-miniature .js-quick-view-iqit { display: none !important; }

/* Description = overlay absolu sur toute la card. Clics neutralisés sauf sur la pill/titre. */
.product-miniature .product-description {
    position: absolute;
    inset: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
/* Titre BLANC en overlay, juste au-dessus de la pill */
.product-miniature .product-title {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 85px;
    margin: 0 !important;
    z-index: 3;
    pointer-events: auto;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
}
.product-miniature .product-title a { color: #FFFFFF !important; text-decoration: none; }

/* === La PILL : vraie <div> en bas de card (prix/TTC à gauche, favori + panier à droite) === */
.product-miniature .home-product-pill {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 55px;
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 4px 12px rgba(26,40,44,0.12);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 25px;
    pointer-events: auto;
}
/* Prix + TTC */
.product-miniature .home-product-pill .product-price-and-shipping {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 16px;
}
/* Label HT/TTC dynamique (sorti du template `.price-tax-label`, selon le
   groupe client). Remplace l'ancien `::after { content: "TTC" }` codé en dur. */
.product-miniature .home-product-pill .product-price-and-shipping .price-tax-label {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #D1D4D5;
}
.product-miniature .product-price {
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
}
.product-miniature .regular-price { color: #1A282C; font-size: 13px; text-decoration: line-through; opacity: 0.55; }
.product-miniature .discount-percentage,
.product-miniature .discount-amount,
.product-miniature .discount {
    background: #1A282C !important;
    color: #FFFFFF !important;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
}
/* Actions à droite : favori + panier, groupe compact aligné droite */
.product-miniature .home-pill-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.product-miniature .home-pill-actions .product-functional-buttons {
    display: inline-flex; align-items: center;
    background: transparent;
    margin: 0; padding: 0;
    min-width: 0; font-size: inherit; line-height: 1;
}
.product-miniature .home-pill-actions .product-functional-buttons-links {
    display: inline-flex; align-items: center;
    position: static; margin: 0; padding: 0;
}
.product-miniature .home-pill-actions .product-functional-buttons a { padding: 0; margin: 0; }
.product-miniature .home-pill-actions .product-functional-buttons,
.product-miniature .home-pill-actions .product-functional-buttons-links { line-height: 1; }
.product-miniature .btn-iqitwishlist-add {
    width: 34px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    background-color: transparent;
    background-image: url("/img/cms/Icones/icone-wishlist.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    vertical-align: middle;
    font-size: 0;
}
/* Icônes coeur FontAwesome natives masquées (évite le double coeur) : l'icône vient du SVG */
.product-miniature .btn-iqitwishlist-add i { display: none !important; }
/* État activé (produit en wishlist) : le module ajoute .iqitwishlist-added sur le bouton */
.product-miniature .btn-iqitwishlist-add.iqitwishlist-added {
    background-image: url("/img/cms/Icones/icone-wishlist-active.svg");
}
/* Bouton panier rond noir — annuler le padding-top .6rem du thème (layout-2) qui le décentre */
.product-miniature .home-pill-actions .product-add-cart {
    margin: 0 !important;
    padding: 0 !important;
    display: flex; align-items: center;
}
.product-miniature .product-add-cart form { margin: 0; display: flex; align-items: center; }
.product-miniature .product-add-cart .input-group-add-cart {
    display: flex; align-items: center; flex-wrap: nowrap; margin: 0;
}
.product-miniature .product-add-cart .input-qty,
.product-miniature .product-add-cart input[name="qty"] { display: none !important; }
.product-miniature .product-add-cart .add-to-cart,
.product-miniature .product-add-cart button[type="submit"] {
    background-color: #1A282C;
    background-image: url("/img/cms/Icones/icone-quick-buy.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16.54px 17.61px;
    color: #FFFFFF; border: none; border-radius: 50%;
    width: 34px; height: 34px; min-width: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0; line-height: 1; box-shadow: none;
    transition: background-color 0.2s ease;
}
/* Pas d'effet scale/opacité du .btn:hover global sur ce bouton de miniature */
.product-miniature .product-add-cart .add-to-cart:hover,
.product-miniature .product-add-cart button[type="submit"]:hover {
    transform: none;
    opacity: 1;
}
/* On masque les icônes FontAwesome natives : l'icône vient du SVG en background */
.product-miniature .product-add-cart .add-to-cart .spinner-icon,
.product-miniature .product-add-cart .add-to-cart .fa-circle-o-notch,
.product-miniature .product-add-cart .add-to-cart .bag-icon,
.product-miniature .product-add-cart .add-to-cart i.fa-shopping-bag { display: none !important; }

/* Métadonnées conservées pour compat mais masquées */
.product-miniature .home-product-hidden-meta { display: none !important; }

/* Gutter 50px entre produits, 1ère card flush à gauche et dernière flush à droite.
   Padding 25px de chaque côté des slides (=> 50px entre cards) + marge négative -25px
   sur le wrapper pour annuler le padding des cards extrêmes (bords alignés à la grille). */
.home-products-carousel .swiper-container-wrapper { margin-left: -25px; margin-right: -25px; }
.home-products-carousel .swiper-products-carousel { margin-left: 0; margin-right: 0; }
.home-products-carousel .swiper-slide {
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
}
/* Laisse respirer l'ombre des miniatures au hover. Les 2 conteneurs Swiper sont
   en overflow:hidden et rognent l'ombre en haut/bas. On clippe uniquement à
   l'horizontale (slides voisines toujours masquées) et on laisse déborder à la
   verticale → l'ombre s'affiche, sans décaler la mise en page. */
.home-products-carousel .swiper-container-wrapper,
.home-products-carousel .swiper-products-carousel {
    overflow-x: clip;
    overflow-y: visible;
}

/* --- Section 9 : Blog (intro à gauche + 3 cards à droite) ---
   Card cible maquette :
     [ photo article en BACKGROUND, plein cadre, radius ]
       (bloc blanc arrondi aligné en bas)  Titre article (noir)  >
*/
.home-section-blog .elementor-row { align-items: center; }
.home-blog-title { max-width: 200px; }
.home-blog-title .elementor-heading-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}
/* Les colonnes du widget (3 articles) remplissent la largeur de la colonne droite.
   Espace de 25px entre chaque article = 12,5px de padding par colonne (gutter).
   !important pour battre la règle du module .elementor-element-zhwjr64 (padding:1rem). */
/* Marge négative horizontale = padding des colonnes (-12.5px) → compense le
   padding des cards extrêmes pour aligner la grille sur le wrapper (pattern
   Bootstrap gutter). Pas de compensation verticale.
   Sélecteur sans .row pour couvrir aussi le mode slider (où .simpleblog-posts
   est sur le .swiper-container, plus une .row). */
/* Espacement entre cards blog : padding 12.5px sur la column interne du slide.
   Swiper garde sa width inline sur .swiper-slide intacte ; le padding shifte
   juste le contenu interne et crée 25px d'espace visuel entre 2 cards.
   (Le spaceBetween Swiper en JS ne propage pas pour ce widget — solution
   CSS plus fiable.) */
.home-blog-cards .simpleblog-posts-column,
.related-blog-cards .simpleblog-posts-column {
    padding: 12.5px 12.5px !important;
}
/* Marge négative -12.5px qui compense le padding 12.5px des columns internes :
   les cards extrêmes (1ère à gauche, dernière à droite) s'alignent sur les bords
   du wrapper, sans 12.5px de blanc résiduel. Override aussi la marge -1rem que
   le widget iqitelementor met sur .simpleblog-posts via son ID. */
.home-blog-cards .simpleblog-posts,
.related-blog-cards .simpleblog-posts {
    margin: 0 -12.5px !important;
}
/* Retire le margin-bottom du wrapper d'article (1.563rem par défaut) */
.home-section-blog .simpleblog__listing__post__wrapper,
.related-blog-cards .simpleblog__listing__post__wrapper { margin-bottom: 0; }
/* Card = conteneur position relative avec photo en fond, remplit la hauteur dispo */
.home-section-blog .simpleblog-posts .post-item,
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper.post-item,
.related-blog-cards .simpleblog-posts .post-item,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper.post-item {
    position: relative;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: #e9eef0 !important;
    padding: 0 !important;
    min-height: 360px;
    height: 100%;
    display: block;
    transition: box-shadow 0.3s ease;
}
/* Le partial post-miniature enveloppe la card dans une colonne Bootstrap
   (.simpleblog__listing__post.col-md-12). Sur la page produit ce wrapper n'a pas
   de parent flex .row, donc il se réduisait à la largeur du contenu (~103px) au
   lieu de remplir le slide Swiper (335px) → cards minuscules. On force le
   remplissage. Scopé .related-blog-cards (la home fonctionne déjà). */
.related-blog-cards .simpleblog-posts .simpleblog__listing__post,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper.post-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
/* Ombre au survol, identique aux miniatures produit : #DDF0F6 / x0 y3 flou20 */
.home-section-blog .simpleblog-posts .post-item:hover,
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper.post-item:hover,
.related-blog-cards .simpleblog-posts .post-item:hover,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper.post-item:hover {
    box-shadow: 0 3px 20px #DDF0F6 !important;
}
/* Lien + image en fond, couvrant toute la card */
.home-section-blog .simpleblog-posts .post-item > a:first-child,
.related-blog-cards .simpleblog-posts .post-item > a:first-child {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    margin: 0;
}
.home-section-blog .simpleblog-posts .post-item > a:first-child img.photo,
.home-section-blog .simpleblog-posts .post-item img.photo,
.related-blog-cards .simpleblog-posts .post-item > a:first-child img.photo,
.related-blog-cards .simpleblog-posts .post-item img.photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0 !important;
    display: block;
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}
/* Zoom au survol de la card (l'overflow:hidden de .post-item garde l'image
   confinée dans la card). */
.home-section-blog .simpleblog-posts .post-item:hover img.photo,
.related-blog-cards .simpleblog-posts .post-item:hover img.photo {
    transform: scale(1.08);
}
/* Masquer description, read-more, footer (date / tags / vues / commentaires) */
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content p,
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content [itemprop="description"],
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content__readmore,
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__footer,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content p,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content [itemprop="description"],
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content__readmore,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__footer { display: none !important; }
/* Bloc blanc en bas, aligné bottom, contenant le titre */
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content.card-block,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content.card-block {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    background: #FFFFFF;
    border-radius: 15px;
    padding: 20px 15px !important;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(26,40,44,0.10);
}
/* Flèche à droite du titre, centrée verticalement */
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content.card-block::after,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content.card-block::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 4.58px;
    height: 8.17px;
    background: url("/img/cms/Icones/fleche-articles.svg") no-repeat center / contain;
    pointer-events: none;
}
/* Titre noir, Raleway bold — retirer la bordure bottom du headline */
.home-section-blog .simpleblog-posts .post-title,
.home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper__content__headline.post-title,
.related-blog-cards .simpleblog-posts .post-title,
.related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper__content__headline.post-title {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 30px 0 0 !important; /* réserve l'espace de la flèche à droite */
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    width: 100%;
    display: block;
}
.home-section-blog .simpleblog-posts .post-title a,
.related-blog-cards .simpleblog-posts .post-title a {
    color: #1A282C !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none !important;
    display: block;
}
/* Colonnes : intro gauche / cards droite */
.home-blog-col-intro { align-self: flex-start; padding-top: 20px; }
/* Vrai gap de 70px entre les 2 colonnes. col-33 + col-66 = 100% → on réduit les
   largeurs en calc pour absorber le gap, et on neutralise le padding interne du
   column-gap Elementor pour que les 70px soient le seul espace. */
.home-section-blog .elementor-row { display: flex; flex-wrap: nowrap; gap: 70px; }
.home-blog-col-intro { flex: 0 0 350px; max-width: 350px; }
.home-blog-col-cards { flex: 1 1 auto; width: auto; min-width: 0; }
.home-blog-col-intro > .elementor-element-populated,
.home-blog-col-cards > .elementor-element-populated { padding-left: 0; padding-right: 0; }

/* --- Section 10 : Avis Google placeholder --- */
.home-section-avis .home-google-reviews-placeholder {
    max-width: 1100px;
    margin: 0 auto;
}

/* =====================================================================
   PAGE CATÉGORIE
   ===================================================================== */

/* --- Breadcrumb : 60px d'air au-dessus, 30px en-dessous, pas de marge bas.
   Le thème pose padding-top/bottom: 0.625rem (~10px) → on écrase. */
#wrapper .breadcrumb {
    padding-top: 60px;
    padding-bottom: 30px;
    margin-bottom: 0;
}

/* Sur la page produit : on cache le breadcrumb du layout (rendu en haut du
   #wrapper) et on l'affiche dans la colonne droite au-dessus du titre */
#product #wrapper > .breadcrumb,
#product #wrapper > .container > .breadcrumb {
    display: none;
}
#product .product-breadcrumb-inline {
    margin-bottom: 15px;
}
/* Retirer le padding du .container parent du .breadcrumb (Bootstrap injecte 15px LR par défaut) */
#product .product-breadcrumb-inline > .container,
#product .product-breadcrumb-inline .container {
    padding: 0;
    margin: 0;
    max-width: none;
    width: auto;
}
#product .product-breadcrumb-inline .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    min-height: 0;
}
#product .product-breadcrumb-inline .breadcrumb .row,
#product .product-breadcrumb-inline .breadcrumb .col,
#product .product-breadcrumb-inline .breadcrumb .container-fluid {
    padding: 0;
    margin: 0;
}
#product .product-breadcrumb-inline .breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Breadcrumb : 14px medium 16px, couleur #8C9395 ; dernier li (nom produit) en bold */
#product .product-breadcrumb-inline .breadcrumb li {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #8C9395;
}
#product .product-breadcrumb-inline .breadcrumb li:last-child,
#product .product-breadcrumb-inline .breadcrumb li:last-child span {
    font-weight: 700;
}
#product .product-breadcrumb-inline .breadcrumb li a,
#product .product-breadcrumb-inline .breadcrumb li span {
    color: #8C9395;
    text-decoration: none;
}
#product .product-breadcrumb-inline .breadcrumb li a:hover {
    text-decoration: underline;
}
/* Cacher les flèches précédent/suivant produit (iqitproductsnav) dans le breadcrumb */
#product .product-breadcrumb-inline #iqitproductsnav,
#product .product-breadcrumb-inline .col-auto {
    display: none;
}

/* --- Bannière : titre h1 inscrit en overlay bas-gauche sur la photo --- */
.category-image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 35px;
    height: 252px;
}
.category-image picture {
    display: block;
    width: 100%;
    height: 100%;
}
.category-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Dégradé sombre côté gauche pour la lisibilité du titre blanc */
.category-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26,40,44,0.50) 0%, rgba(26,40,44,0.15) 35%, transparent 60%);
    pointer-events: none;
}
.category-image #js-product-list-header {
    position: absolute;
    bottom: 90px;
    left: 110px;
    z-index: 2;
    margin: 0;
}
.category-image #js-product-list-header .h1.page-title,
.category-image #js-product-list-header .h1.page-title span {
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 35px;
    font-weight: 800;
    line-height: 41px;
    margin: 0;
    padding-bottom: 0;
}

/* --- Bannière des AUTRES pages de listing (best-sales, promotions, new-products,
   recherche iqit) : pas d'image de catégorie → on transforme le h1
   #js-product-list-header en bannière avec l'image statique background-cat.jpg.
   Même rendu que la bannière catégorie (252px, radius 30, titre bas-gauche). */
#best-sales #js-product-list-header,
#prices-drop #js-product-list-header,
#new-products #js-product-list-header,
#module-iqitsearch-searchiqit #js-product-list-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 252px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 35px;
    padding: 0 0 90px 110px;
    background-image: url('/img/cms/Images/background-cat.jpg');
    background-size: cover;
    background-position: center;
}
/* Dégradé sombre côté gauche pour la lisibilité du titre */
#best-sales #js-product-list-header::before,
#prices-drop #js-product-list-header::before,
#new-products #js-product-list-header::before,
#module-iqitsearch-searchiqit #js-product-list-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26,40,44,0.50) 0%, rgba(26,40,44,0.15) 35%, transparent 60%);
    pointer-events: none;
}
#best-sales #js-product-list-header span,
#prices-drop #js-product-list-header span,
#new-products #js-product-list-header span,
#module-iqitsearch-searchiqit #js-product-list-header span {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 35px;
    font-weight: 800;
    line-height: 41px;
}

/* --- Toolbar (tri + count + view switch) : masquée selon maquette --- */
#js-product-list-top {
    display: none !important;
}

/* --- Hr séparateur de la description catégorie : masqué --- */
.category-description.category-description-top > hr {
    display: none;
}

/* --- h3 de la description catégorie : marge bas 20px --- */
.category-description .rte-content h3 {
    margin-bottom: 20px;
}

/* --- Petite description catégorie (footer liste) : masquée --- */
#js-product-list-footer .category-additional-description {
    display: none;
}

/* --- Alerte "aucun produit" : sans padding autour.
   Rendue dans #products (pas #js-product-list, qui n'existe que s'il y a des produits). */
#products .alert {
    padding: 0;
}

/* --- Grille produits : MÊME fonctionnement que les sliders produits home.
   Colonnes : 4 (≥1300) / 3 (992-1300) / 2 (768-991) / 1 (<768) — voir RESPONSIVE.
   Espacement : gap 50px (padding 25px) en desktop, 30px (padding 15px) sous 1300px.
   On force la largeur en flex-basis !important pour battre les classes col du thème
   (col-1 col-md-3 col-lg-4, redéfinies de façon incohérente dans theme.css). */
#js-product-list .products.products-grid {
    margin-left: -25px;
    margin-right: -25px;
}
#js-product-list .products.products-grid > .js-product-miniature-wrapper {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 50px;
}

/* --- Chips de filtres : pill gris clair, chevron droite --- */
#search_filters.dropdown-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin: 0 0 35px 0 !important;
    padding: 0;
}
#search_filters .facet.facet-dropdown {
    flex: 0 0 auto;
    margin: 0;
}
/* h4.form-control.facet-title-dropdown : on annule les styles form-control */
#search_filters .facet-title.facet-title-dropdown {
    background-color: #F5F5F5;
    border: 0;
    border-radius: 30px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    padding: 10px 18px 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    cursor: pointer;
}
#search_filters .facet-title.facet-title-dropdown:hover,
#search_filters .facet-title.facet-title-dropdown:focus,
#search_filters .facet-title.facet-title-dropdown[aria-expanded="true"] {
    background-color: #ECECEC;
    outline: none;
    box-shadow: none;
}
#search_filters .facet-title-dropdown > span {
    font-weight: 500;
}
/* Chevron : on masque la glyphe FontAwesome et on affiche le SVG flèche
   (déjà orienté vers la droite, 4.535x7.656). */
#search_filters .facet-title-dropdown .drop-icon {
    display: inline-block;
    width: 4.53px;
    height: 7.66px;
    margin: 0;
    background-image: url('/img/cms/Icones/fleche-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#search_filters .facet-title-dropdown .drop-icon::before {
    display: none;
}
/* Menu déroulant de la facette (liste des valeurs) */
#search_filters .facet-type-checkbox.dropdown-menu-facet {
    padding: 10px 20px;
    background-color: rgb(236, 236, 236);
    border-radius: 10px;
    border: none;
    margin-top: 5px !important;
    /* Évite le débordement à droite quand les labels sont longs :
       largeur plafonnée + retour à la ligne du texte. */
    width: max-content;
    max-width: min(320px, calc(100vw - 30px));
}
/* Labels de facette : autoriser le retour à la ligne (sinon menu trop large) */
#search_filters .facet-type-checkbox.dropdown-menu-facet .facet-label,
#search_filters .facet-type-checkbox.dropdown-menu-facet .facet-label a {
    white-space: normal;
}
/* La case à cocher ne doit pas être écrasée quand le texte passe sur 2 lignes */
#search_filters .facet-type-checkbox.dropdown-menu-facet .custom-checkbox {
    flex-shrink: 0;
}
/* Case à cocher custom : fond transparent + radius 3px */
#search_filters .custom-checkbox .ps-shown-by-js {
    background-color: transparent !important;
    border-radius: 3px;
}

/* =====================================================================
   RECHERCHE — autocomplete (iqitsearch)
   ===================================================================== */

/* Panneau de suggestions : ombre douce, radius 10, sans bordure, décalé de 10px */
.autocomplete-suggestions {
    box-shadow: 0 3px 20px #DDF0F6;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
}
/* Plus de séparateur entre les items */
.dropdown-menu .dropdown-item,
.autocomplete-suggestions .dropdown-item {
    border-bottom: none;
}
/* 3e colonne (type de résultat) masquée pour les produits — repérés par leur prix */
.autocomplete-suggestion:has(.product-price) .col-shop {
    display: none;
}
/* Photo produit : même traitement que la miniature du panier (69x92, cover, radius 10) */
.autocomplete-suggestion .col-img img {
    width: 69px;
    height: 92px;
    object-fit: cover;
    border-radius: 10px;
}

/* =====================================================================
   PAGE CONTACT
   ===================================================================== */

/* Breadcrumb masqué sur la page contact */
#contact #wrapper .breadcrumb {
    display: none;
}

/* h1 "Contactez-nous" : déplacé dans la colonne texte du bloc info.
   35px extrabold 41 (comme les titres de bannière). Responsive 25/30 → @media 767px. */
#contact .contact-info-text .page-title,
#contact .contact-info-text .page-title span {
    font-size: 35px;
    font-weight: 800;
    line-height: 41px;
}
#contact .contact-info-text .page-title {
    margin: 0 0 70px 0;
    padding-bottom: 0;
}

/* --- Bloc info : email + adresse (66/77) à gauche, oreiller à droite --- */
#contact .contact-info-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 120px;
    margin-bottom: 110px;
}
#contact .contact-info-email,
#contact .contact-info-address {
    display: block;
    font-size: 66px;
    font-weight: 400;
    line-height: 77px;
    color: #1A282C;
}
#contact .contact-info-email {
    text-decoration: none;
    margin-bottom: 20px;
}
#contact .contact-info-img {
    flex-shrink: 0;
    align-self: flex-end;
}
#contact .contact-info-img img {
    width: 533px;
    height: 341px;
    max-width: 100%;
    object-fit: contain;
}

/* --- Section formulaire : image gauche (497x646) + formulaire à droite --- */
#contact .contact-form-block {
    display: flex;
    align-items: flex-start;
    gap: 90px;
}
#contact .contact-form-img {
    flex-shrink: 0;
}
#contact .contact-form-img img {
    width: 497px;
    height: 646px;
    max-width: 100%;
    object-fit: contain;
}
#contact .contact-form-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

/* Titre h2 "Besoin de plus d'informations ?" (h2 déjà 25/600/30 globalement)
   + 3 points décoratifs réutilisant le composant .home-dots de la home */
#contact .contact-form-title {
    margin: 0 0 15px 0;
}
#contact .home-dots {
    margin-bottom: 30px;
}

/* --- Champs du formulaire CF7 (ets_cfultimate) --- */
/* Titre h3 "Formulaire de contact" rendu par le module : masqué (déjà le h2 dessus) */
#contact .ets-cfu-form > h3 {
    display: none;
}
/* Le formulaire occupe toute la largeur dispo (le module borne sinon la largeur) */
#contact .ets-cfu-form,
#contact .ets_cfu_wrapper,
#contact .ets_cfu_box,
#contact .ets_cfu_col {
    width: 100%;
    max-width: none;
}
/* GLOBAL : on neutralise les marges négatives du module sur .ets_cfu_box
   et le padding latéral sur .ets_cfu_col (qui cassent le layout fluide). */
.ets_cfu_box {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}
.ets_cfu_col {
    padding: 0;
}
/* Colonne : pas de gap (on gère l'espacement via margin-bottom des champs) */
#contact .ets_cfu_col {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Espacement vertical entre les champs : 30px (un seul mécanisme, pas de double) */
#contact .ets_cfu_input {
    margin-bottom: 30px;
}
/* Champs spéciaux resserrés à 10px */
#contact .ets_cfu_input_textarea,
#contact .ets_cfu_input_html {
    margin-bottom: 10px;
}
/* Acceptation : un peu plus d'air avant le bouton Envoyer */
#contact .ets_cfu_input_acceptance {
    margin-bottom: 20px;
}
/* Bouton Envoyer : pas de marge bas (dernier champ) */
#contact .ets_cfu_input_submit {
    margin-bottom: 0;
}
/* Chaque ligne : label à gauche (right-aligned), champ à droite */
#contact .ets_cfu_input > label {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    width: 100%;
}
/* Label de champ : 22px bold 26px, colonne fixe alignée à droite, sur une ligne.
   font-weight !important pour battre le 600!important du module. */
#contact .ets_cfu_input > label .ets_cfu_span {
    flex: 0 0 180px;
    max-width: 180px;
    text-align: right;
    white-space: nowrap;
    font-size: 22px;
    font-weight: 700 !important;
    line-height: 26px;
    color: #1A282C;
    margin: 0;
    display: block;
}
/* Le champ est enveloppé dans <span class="ets_cfu_form-control-wrap"> (display:block).
   C'est CE wrap qui doit occuper la largeur restante du label, pas l'input. */
#contact .ets_cfu_input > label > .ets_cfu_form-control-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}
/* Pilule : UNIQUEMENT sur les vrais champs de saisie (pas submit/acceptance/html).
   Le module met .ets_cfu_form-control partout → on cible par type de champ. */
#contact .ets_cfu_input_text .ets_cfu_form-control,
#contact .ets_cfu_input_email .ets_cfu_form-control,
#contact .ets_cfu_input_tel .ets_cfu_form-control,
#contact .ets_cfu_input_textarea .ets_cfu_form-control {
    flex: 1 1 auto;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#contact .ets_cfu_input .ets_cfu_form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
/* Champs sur une ligne (hors textarea) : hauteur fixe 43px (texte centré).
   Inclut la zone texte du champ fichier. */
#contact .ets_cfu_input_text .ets_cfu_form-control,
#contact .ets_cfu_input_email .ets_cfu_form-control,
#contact .ets_cfu_input_tel .ets_cfu_form-control,
#contact .ets_cfu_input_file .bootstrap-filestyle .form-control {
    height: 43px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
/* Textarea : label aligné en haut, coins moins arrondis, hauteur confortable */
#contact .ets_cfu_input_textarea > label {
    align-items: flex-start;
}
#contact .ets_cfu_input_textarea .ets_cfu_form-control {
    border-radius: 20px;
    min-height: 120px;
    resize: vertical;
}
/* Champ fichier "Document joint" : l'input natif est masqué (filestyle), le widget
   visible est .bootstrap-filestyle. On veut : pilule blanche (nom fichier) +
   bouton plat "icône dossier + Choisir un fichier". */
#contact .ets_cfu_input_file .custom_choosefile {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
#contact .ets_cfu_input_file .bootstrap-filestyle.input-group {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    flex-wrap: nowrap;
}
/* Zone texte (nom du fichier) : pilule blanche comme les autres champs */
#contact .ets_cfu_input_file .bootstrap-filestyle .form-control {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 12px 22px;
    font-size: 16px;
    line-height: 19px;
    color: #1A282C;
    opacity: 1;
    box-shadow: none;
}
/* Bouton : plat (pas de fond sombre), texte sombre + icône dossier */
#contact .ets_cfu_input_file .group-span-filestyle {
    flex: 0 0 auto;
    width: auto;
}
#contact .ets_cfu_input_file .group-span-filestyle .btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: #1A282C;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
}
/* Icône dossier (FontAwesome) avant le libellé */
#contact .ets_cfu_input_file .group-span-filestyle .btn .buttonText::before {
    content: "\f07b";
    font-family: 'FontAwesome';
    font-weight: 400;
    margin-right: 8px;
}
#contact .ets_cfu_input_file .file_type_des {
    display: none;
}
/* Note "* Champs obligatoires" et acceptation : 14px regular 19px, sans pilule,
   pleine largeur (pas d'offset). */
#contact .ets_cfu_input_html > label,
#contact .ets_cfu_input_acceptance > label {
    display: block;
    width: 100%;
    margin: 0;
    padding-left: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
}
#contact .ets_cfu_input_acceptance > label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
/* La case d'acceptation hérite de .ets_cfu_form-control → on annule la pilule */
#contact .ets_cfu_input_acceptance .ets_cfu_form-control {
    width: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    flex: 0 0 auto;
    margin: 2px 0 0 0;
}
/* Bouton Envoyer : CTA standard (sombre, pill, 16/19 bold), aligné à droite.
   width:auto + text-transform:none pour battre .ets_cfu-submit du module. */
#contact .ets_cfu_input_submit {
    text-align: right;
}
#contact .ets_cfu_input_submit .ets_cfu_form-control,
#contact .ets_cfu_input_submit input[type="submit"],
#contact .ets_cfu_input_submit button {
    width: auto;
    background-color: #1A282C;
    color: #FFFFFF;
    border: 0;
    border-radius: 30px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    text-transform: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
#contact .ets_cfu_input_submit .ets_cfu_form-control:hover,
#contact .ets_cfu_input_submit input[type="submit"]:hover,
#contact .ets_cfu_input_submit button:hover {
    transform: scale(0.97);
    opacity: 0.9;
}

/* =====================================================================
   PAGE FICHE PRODUIT
   ===================================================================== */

/* --- Layout principal : image gauche, infos droite --- */
/* Clip horizontal pour éviter le débordement des sections full-bleed
   (.product-usps-band et .product-extracontent-section:has(.related-blog-posts))
   qui sont en width:100vw : 100vw inclut la scrollbar verticale dans certains
   browsers, ce qui crée un overflow horizontal à droite. overflow-x:clip clippe
   sans bloquer le scroll vertical. */
#product {
    overflow-x: clip;
}
#product #main-product-wrapper {
    margin-top: 70px;
}
#product .product-info-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    align-items: flex-start;
    margin: 0;
}
/* Colonnes proportionnelles : ratio 560 / 790 (gauche / droite). Le gap 60px est
   en absolu donc l'espace flex dispo = container - 60. Sur 1410px de container :
   1350 × 560/1350 = 560 à gauche, 1350 × 790/1350 = 790 à droite.
   Sur viewport plus petit, les deux colonnes rétrécissent proportionnellement.
   max-width:none + width:auto pour annuler les contraintes Bootstrap .col-md-X. */
#product .col-product-image {
    flex: 560 0 0;
    width: auto;
    max-width: none;
    padding: 0;
    min-width: 0;
}
#product .col-product-info {
    flex: 790 0 0;
    width: auto;
    max-width: none;
    padding: 0;
    min-width: 0;
}

/* --- Image produit ---
   Pas de border-radius + overflow:hidden sur le container parent (sinon le clip
   30px du container masque le radius 20px des thumbs au coin haut-gauche).
   Chaque enfant porte son propre radius : thumbs 20px, cover 20px. */
#product .images-container {
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
}
/* Override .mt-4 { margin-top: 16px !important } sur .after-cover-tumbnails2 */
#product .after-cover-tumbnails2,
#product .after-cover-tumbnails2.mt-4 {
    margin-top: 0 !important;
}
/* Gap entre thumbs et cover via gap CSS (au lieu de padding sur la col qui
   réduisait la largeur utile et causait le clipping à droite des thumbs 102px) */
#product .images-container .row.no-gutters {
    align-items: stretch;
    flex-wrap: nowrap;
    display: flex;
    gap: 15px;
}
#product .col-left-product-thumbs {
    flex: 0 0 102px;
    max-width: 102px;
    min-width: 102px;
    padding: 0;
}
#product .col-left-product-cover {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
/* Thumbs : format portrait 102x136 fixe, radius propre, gap de 15px.
   Override les hacks du thème parent qui forçaient position:absolute + top:-.5rem
   + height: calc(100% + 1.25rem) (= décalage haut qui coupait l'image). */
#product #product-images-thumbs.swiper-vertical,
#product #product-images-thumbs {
    position: static;
    top: 0;
    height: auto;
    margin-right: 0;
}
#product #product-images-thumbs .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: auto !important;
}
#product #product-images-thumbs .swiper-slide {
    width: 102px !important;
    height: 136px !important;
    margin: 0 !important;
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    flex: 0 0 auto;
}
#product #product-images-thumbs .thumb-container {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}
#product #product-images-thumbs .thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}
#product .product-cover {
    border-radius: 20px;
    overflow: hidden;
}
#product .product-cover img {
    width: 100%;
    height: auto;
    display: block;
}
/* Icône expand sur la cover : masquée (le thème parent la rend toujours sans
   vérifier la config "Type de zoom" du BO ; on la cache puisque zoom = Aucun) */
#product .product-cover .expander {
    display: none;
}
/* Flèches du slider image principale (product-images-large) : même style que
   les sliders produits de la home (SVG transparents), sans le fond noir hérité
   du thème parent. Position inner (dans le cadre). */
#product .product-images-large .swiper-button-prev,
#product .product-images-large .swiper-button-next {
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 7.54px;
    height: 15.07px;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    color: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    top: 50%;
    transform: translateY(-50%);
}
#product .product-images-large .swiper-button-prev::after,
#product .product-images-large .swiper-button-prev::before,
#product .product-images-large .swiper-button-next::after,
#product .product-images-large .swiper-button-next::before {
    content: none !important;
    display: none !important;
}
#product .product-images-large .swiper-button-prev {
    left: 20px;
    background-image: url("/img/cms/Icones/fleche-left-slider-product.svg");
}
#product .product-images-large .swiper-button-next {
    right: 20px;
    background-image: url("/img/cms/Icones/fleche-right-slider-product.svg");
}

/* --- Bloc infos produit --- */
/* Retirer le border-bottom + padding-bottom + margin-bottom du wrapper header
   (rendu par défaut par le thème parent) */
#product .product_header_container {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
#product .col-product-info .product_header_container .page-title,
#product .col-product-info .product_header_container .page-title span {
    font-size: 35px;
    font-weight: 800;
    line-height: 41px;
    color: #1A282C;
    margin: 0 0 16px 0;
    padding: 0;
}

/* Référence produit : 12px medium 14px, couleur #8C9395 */
#product .product-reference {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #8C9395;
    margin-bottom: 10px;
}
#product .product-reference .label,
#product .product-reference span {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #8C9395;
}

/* Badge stock : 3 variantes (en stock / hors stock / en cours de réappro),
   border-radius 5px, sans icône Font Awesome (cachée), texte seul. */
#product .js-product-availability,
#product #product-availability {
    display: inline-block;
    border-radius: 5px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
}
#product .js-product-availability .fa,
#product .js-product-availability i,
#product #product-availability .fa,
#product #product-availability i {
    display: none;
}
/* En stock — badge-success / product-available */
#product .js-product-availability.badge-success,
#product .js-product-availability.product-available {
    background: #588157;
    color: #FFFFFF;
}
/* Hors stock — badge-danger / product-unavailable */
#product .js-product-availability.badge-danger,
#product .js-product-availability.product-unavailable {
    background: #CF5C36;
    color: #FFFFFF;
}
/* En cours de réapprovisionnement — badge-warning / product-unavailable-allow-oosp
   / product-last-items (derniers articles) */
#product .js-product-availability.badge-warning,
#product .js-product-availability.product-unavailable-allow-oosp,
#product .js-product-availability.product-last-items {
    background: #FEF3E1;
    color: #1A282C;
}

/* Prix */
/* 20px d'espace entre le prix et la description courte (prix au-dessus, description en dessous) */
#product .product-prices {
    margin-bottom: 20px;
}
#product .product-prices .current-price {
    display: inline-block;
    margin-right: 12px;
}
#product .product-prices .current-price .product-price {
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
}
#product .product-prices .regular-price {
    font-size: 20px;
    color: #1A282C;
    text-decoration: line-through;
    opacity: 0.55;
    margin-right: 8px;
}
#product .product-prices .badge-discount {
    background: #1A282C;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    border-radius: 30px;
    padding: 4px 10px;
    vertical-align: middle;
}
/* Badge disponibilité affiché en block sur sa propre ligne, SOUS le prix
   (le template positionne le badge après le prix+TTC). */
#product .product-prices > #product-availability,
#product .product-prices > .js-product-availability {
    display: block;
    width: fit-content;
    margin-top: 10px;
    margin-bottom: 0;
}
/* TTC à droite du prix sur la même ligne : on met le wrapper du current-price et
   le tax-label en inline-block aligné baseline (ils sont enfants directs de
   .product-prices, séparés par d'autres frères au-dessus). */
#product .product-prices > div:has(.current-price),
#product .product-prices > .tax-shipping-delivery-label {
    display: inline-block;
    vertical-align: baseline;
    margin-top: 0;
    margin-bottom: 0;
}
#product .product-prices > .tax-shipping-delivery-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    color: #D1D4D5;
    opacity: 1;
    margin-left: 0;
}
/* `.delivery-information` (24h - 72h) : masquée à côté du prix (l'info
   est déjà présente dans les blocs réassurance). */
#product .product-prices > .tax-shipping-delivery-label .delivery-information {
    display: none;
}

/* Description courte */
#product .product-description-short {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    margin-bottom: 20px;
}
/* Margin-bottom sur le contenu RTE interne (#product-description-short-X) */
#product .product-description-short .rte-content.product-description,
#product [id^="product-description-short"].product-description {
    margin-bottom: 15px;
}

/* --- Variants : selects stylés en pills --- */
#product .product-variants-item,
#product .product-variants > .product-variants-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-right: 0;
    margin-bottom: 20px;
}
/* Annule le ::after clearfix Bootstrap (qui ajoute un block invisible cassant flex) */
#product .product-variants-item.clearfix::after,
#product .product-variants-item::after {
    content: none;
    display: none;
}
#product .product-variants-item:last-child {
    margin-bottom: 0;
}
#product .product-variants-item .form-control-label {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    color: #1A282C;
    margin: 0;
}
#product .product-variants-item .custom-select2,
#product .product-variants > .product-variants-item .custom-select2 {
    flex: 0 0 auto;
    width: 175px;
    min-width: 0;
    max-width: 175px;
    position: relative;
}
/* !important sur background-color/image pour battre la règle parent
   .custom-select2 .form-control-select { background: 0 0 !important; } */
#product .product-variants-item .form-control-select {
    width: 100%;
    height: 43px;
    background-color: #F2F2F2 !important;
    background-image: url('/img/cms/Icones/fleche-menu.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 5px 8px !important;
    transform: rotate(0);
    border: 0;
    border-radius: 25px;
    padding: 0 40px 0 22px;
    font-size: 16px;
    color: #1A282C;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: none;
}

/* --- Lien personnalisation : 20px bold 24px --- */
#product .product-perso-link {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #1A282C;
    margin: 30px 0;
}
#product .product-perso-link a {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #1A282C;
    text-decoration: underline;
}

/* --- Ligne Quantité + Bouton + Wishlist (sur une même ligne, éléments compacts) --- */
/* Override .pt-3 { padding-top: 12px !important } de Bootstrap utility */
#product .product-add-to-cart,
#product .product-add-to-cart.pt-3 {
    padding-top: 0 !important;
}
#product .product-quantity {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    flex-wrap: wrap;
}
/* Retirer le margin-bottom .8rem du thème parent sur les .col de la quantité */
#product .product-quantity > .col {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    margin-bottom: 0;
}
/* Important : le bouton n'est PLUS full-width — il prend sa largeur naturelle */
#product .product-quantity .col-add-btn {
    flex: 0 0 auto;
}
/* Petit espace au-dessus du message "quantité minimale pour commander" */
#product .product-minimal-quantity {
    margin-top: 15px;
}
/* === CHAMP QUANTITÉ — refonte : pill input + 2 ronds séparés pour +/- ===
   Le .input-group.bootstrap-touchspin n'a PAS de fond (transparent).
   - Pill input "1" : 28×43, fond #F2F2F2, border-radius 14px
   - 2 ronds 18×18 (+ en haut, − en bas), fond #F2F2F2, border-radius 50%
   - Gap 5px entre la pill et les ronds (+ 5px entre les 2 ronds) */
/* Override la règle parent .product-quantity .qty { width: 80px; height: 100%; }
   qui forçait l'input à 60px de large */
#product .product-quantity .qty,
#product .qty {
    width: auto;
    height: auto;
}
#product .qty .input-group.bootstrap-touchspin {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: auto;
    height: auto;
    position: static;
}
#product .qty .input-group input[type="number"] {
    width: 28px;
    height: 43px;
    text-align: center;
    background: #F2F2F2;
    border: 0;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #1A282C;
    box-shadow: none;
    padding: 0;
    -moz-appearance: textfield;
}
/* Masquer les spinners natifs du <input type="number"> */
#product .qty .input-group input[type="number"]::-webkit-outer-spin-button,
#product .qty .input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Conteneur des 2 ronds, empilés verticalement à droite de la pill */
#product .qty .input-group-btn-vertical {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: static;
    transform: none;
}
/* Chaque rond : 18×18, fond #F2F2F2, radius 50% */
#product .qty .bootstrap-touchspin-up,
#product .qty .bootstrap-touchspin-down {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #F2F2F2;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Substituer les chevrons (fa-angle-up/down) par les SVG custom + / − */
#product .qty .bootstrap-touchspin-up .touchspin-up,
#product .qty .bootstrap-touchspin-down .touchspin-down,
#product .qty .bootstrap-touchspin-up i,
#product .qty .bootstrap-touchspin-down i {
    display: none;
}
#product .qty .bootstrap-touchspin-up::before,
#product .qty .bootstrap-touchspin-down::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#product .qty .bootstrap-touchspin-up::before {
    width: 6.364px;
    height: 6.364px;
    background-image: url('/img/cms/Icones/quantite-plus.svg');
}
#product .qty .bootstrap-touchspin-down::before {
    width: 6.364px;
    height: 1px;
    background-image: url('/img/cms/Icones/quantite-moins.svg');
}
/* Bouton Ajouter au panier : pill noir compact, icône panier à droite, PAS full-width
   (uniquement bouton produit principal, pas les .add-to-cart des miniatures slider) */
#product .product-add-to-cart .add-to-cart {
    width: auto;
    min-width: 0;
    background: #1A282C;
    color: #FFFFFF;
    border: 0;
    border-radius: 30px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 43px;
    white-space: nowrap;
}
/* Icône panier SVG custom dans le bouton ajouter au panier : 18.25 x 19.44 */
#product .product-add-to-cart .add-to-cart .bag-icon {
    width: 18.25px;
    height: 19.44px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* Bouton wishlist : icône seule, AUCUN cercle border autour */
#product .col-add-wishlist {
    flex: 0 0 auto;
}
#product .col-add-wishlist .btn-iqitwishlist-add {
    background: transparent;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    color: #1A282C;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: relative;
}
/* Substitution wishlist : SVG custom (icone-wishlist.svg) en pseudo-element,
   bascule sur icone-wishlist-active.svg quand le bouton a la classe
   .iqitwishlist-added (ajoutée par le JS du module au clic, cf front.js du module).
   Dimensions exactes : 25.36 x 24.35. */
#product .col-add-wishlist .btn-iqitwishlist-add .fa-heart-o,
#product .col-add-wishlist .btn-iqitwishlist-add .fa-heart,
#product .col-add-wishlist .btn-iqitwishlist-add i {
    display: none !important;
}
#product .col-add-wishlist .btn-iqitwishlist-add::before {
    content: '';
    display: inline-block;
    width: 25.36px;
    height: 24.35px;
    background-image: url('/img/cms/Icones/icone-wishlist.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#product .col-add-wishlist .btn-iqitwishlist-add.iqitwishlist-added::before {
    background-image: url('/img/cms/Icones/icone-wishlist-active.svg');
}

/* Retirer le border-top + padding-top par défaut du thème parent */
#product .product-additional-info {
    border-top: 0;
    padding-top: 0;
}
/* Réseaux sociaux : masqués (pas dans la maquette) */
#product .product-additional-info .social-sharing {
    display: none;
}

/* --- Bandeau USPs sous .product-info-row : juste un wrapper full-bleed + fond crème.
   Le reste (.home-usps 58px, .home-usps-track marquee, .home-usp-item 20/700/24 +
   padding 36px) est déjà appliqué via les classes utilisées dans le markup, IDENTIQUE
   à la home. Pas de padding/border-radius ajouté ici — équivalent du wrapper Elementor
   qui porte juste le background-color sur la home. */
#product .product-usps-band {
    margin-top: 100px;
    margin-bottom: 140px;
    width: calc(100vw - var(--lad-sbw, 0px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #FEF3E1;
}

/* Wrapper des onglets/sections produit : espacement vertical au-dessus */
#product .product-tabs {
    margin-top: 140px;
}
/* --- Sections Description + Caractéristiques en 2 colonnes : ratio gauche/droite
   = 690/570 = 1.21/1. On utilise flex-grow proportionnel pour que les colonnes
   s'adaptent fluidement à la largeur dispo (sur 1410px de container + gap 150 :
   gauche = 690px, droite = 570px ; sur des largeurs plus petites, les deux
   colonnes rétrécissent proportionnellement sans déborder). */
#product .product-main-sections {
    display: flex;
    gap: 150px;
    align-items: flex-start;
    margin-top: 80px;
    margin-bottom: 150px;
}
#product .product-main-sections .product-description-section {
    flex: 1.21 1 0;
    min-width: 0;
    margin-bottom: 0;
}
#product .product-main-sections .product-details-section {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
/* --- Titres de section h2 (mêmes dimensions que le contact / global) + dots --- */
#product .product-description-section .section-title,
#product .product-details-section .section-title {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    color: #1A282C;
    margin: 0 0 15px 0;
    padding-bottom: 0;
    text-decoration: none;
    border: 0;
    background: transparent;
}
#product .product-description-section .section-title span,
#product .product-details-section .section-title span,
#product .product-description-section .section-title a,
#product .product-details-section .section-title a {
    display: inline-block;
    color: #1A282C;
    text-decoration: none;
    border: 0;
    background: transparent;
}
#product .product-description-section > .home-dots,
#product .product-details-section > .home-dots {
    margin: 0 0 35px 0;
}
/* Description : RTE content */
#product .product-description-section .rte-content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #1A282C;
    margin: 0 0 40px 0;
}
#product .product-description-section .rte-content h4 {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #1A282C;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    margin: 40px 0 10px 0;
}
#product .product-description-section .rte-content p,
#product .product-description-section .rte-content li {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
}
#product .product-description-section .rte-content ul,
#product .product-description-section .rte-content ol {
    padding: 0;
    margin: 10px 0;
    list-style-position: inside;
}
/* Caractéristiques techniques : bloc noir radius 30px + tableau 2 cols avec
   bordures blanches (pures, pas rgba). Labels 16px bold 19px, valeurs 16px
   regular 19px. */
#product .product-details-section .section-content {
    background: #1A282C;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
}
#product .product-details-section #product-details .product-features {
    margin: 0;
}
/* Tableau : grid 2 cols avec bordures blanches */
#product .product-details-section #product-details .data-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    gap: 0;
}
#product .product-details-section #product-details .data-sheet .name,
#product .product-details-section #product-details .data-sheet .value {
    background: transparent;
    color: #FFFFFF;
    margin: 0;
    padding: 15px 25px;
    font-size: 16px;
    line-height: 19px;
    border-top: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
}
#product .product-details-section #product-details .data-sheet .name {
    font-weight: 700;
    border-right: 1px solid #FFFFFF;
    text-align: left;
}
#product .product-details-section #product-details .data-sheet .value {
    font-weight: 400;
    text-align: left;
}
/* 1ère ligne (name+value) : pas de border-top (la séparation vient de l'en-tête) */
#product .product-details-section #product-details .data-sheet .name:first-child,
#product .product-details-section #product-details .data-sheet .name:first-child + .value {
    border-top: none;
}

/* --- Section articles de blog liés : full-bleed, fond crème, edge-to-edge.
       Le titre <h4> rendu par product-tabs-sections.tpl est masqué (on a un h2
       dans la colonne intro). Le contenu interne est dans .related-blog-inner
       qui suit la grille 1410px de la page. */
#product .product-extracontent-section:has(.related-blog-posts) {
    margin-top: 0;
    margin-bottom: 0;
    width: calc(100vw - var(--lad-sbw, 0px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #FEF3E1;
    border-radius: 0;
    padding: 100px 0;
}
#product .product-extracontent-section:has(.related-blog-posts) > .section-title {
    display: none;
}
.related-blog-inner {
    display: flex;
    padding: 0 80px;
    gap: 80px;
    align-items: center;
}
/* Colonne gauche : titre + dots + texte + bouton */
.related-blog-col-intro {
    flex: 0 0 320px;
    max-width: 320px;
}
.related-blog-col-intro .related-blog-title {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    color: #1A282C;
    margin: 0 0 15px 0;
}
.related-blog-col-intro .home-dots { margin: 0 0 35px 0; }
/* Dots dans la colonne intro du blog : crème #EAD9BE (override du global #DDF0F6) */
.related-blog-col-intro .home-dots .home-dot { background: #EAD9BE; }
.related-blog-col-intro .related-blog-intro-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #1A282C;
    margin: 0 0 30px 0;
}
.related-blog-col-intro .related-blog-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #1A282C;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 0 25px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 0;
}
.related-blog-col-intro .related-blog-cta:hover {
    color: #FFFFFF;
    text-decoration: none;
}
/* Colonne droite : slider plein largeur du reste */
.related-blog-col-cards {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}
#product .product-extracontent-section:has(.related-blog-posts) > .section-title {
    font-size: 28px;
    font-weight: 800;
    color: #1A282C;
    line-height: 1.2;
    margin: 0 0 20px 0;
    max-width: 240px;
}
#product .product-extracontent-section:has(.related-blog-posts) > .section-title span {
    display: block;
}
/* ============================================================
   PAGE LISTING BLOG (.lad-blog-listing) — override template
   ph_simpleblog/list.tpl. Hero centré + grille 3 colonnes
   réutilisant le look des cards home (.home-section-blog).
   ============================================================ */

/* Masque le breadcrumb sur les pages listing blog (.lad-blog-hero le
   remplace). Le breadcrumb est inclus directement dans layout-both-columns
   donc non-surchargeable via Smarty block. Le body porte un id PrestaShop
   `module-ph_simpleblog-list` (page index) ou `-category` (page catégorie).
   Le .page-header est, lui, vidé via {block name='page_header_container'}
   dans list.tpl. */
body#module-ph_simpleblog-list #wrapper > .container > nav.breadcrumb,
body#module-ph_simpleblog-category #wrapper > .container > nav.breadcrumb,
body#module-ph_simpleblog-single #wrapper > .container > nav.breadcrumb { display: none; }

/* Hero : titre + dots + intro + CTA, tout centré */
.lad-blog-hero {
    text-align: center;
    margin: 100px 0 90px;
}
/* Pas de font-size/weight/line-height ici : la balise est déjà <h1>, elle hérite
   donc des styles h1 globaux (theme parent 2.5rem desktop ; override responsive
   global `h1 { 25/800/30 }` à ≤ 767px). On ne fixe que la marge et la couleur. */
.lad-blog-hero-title {
    color: #1A282C;
    margin: 0 0 35px;
}
.lad-blog-hero .home-dots { margin: 0 0 25px; }
.lad-blog-hero-intro {
    max-width: 1030px;
    margin: 0 auto 30px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
}
.lad-blog-hero-cta,
.lad-blog-hero-cta:hover,
.lad-blog-hero-cta:focus,
.lad-blog-hero-cta:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.lad-blog-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #1A282C;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.lad-blog-hero-cta:hover {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Listing : grille 3 colonnes avec gap 25px, sans padding interne des cols.
   On override le pattern Bootstrap (row -15px / col +15px) avec un display:grid
   propre — les classes col-md-4 / col-sm-6 / col-xs-12 du markup deviennent
   inertes et le responsive est géré explicitement via @media. */
.lad-blog-listing .simpleblog__listing .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 0;
}
.lad-blog-listing .simpleblog__listing__post {
    padding: 0;
    margin: 0;
    flex: none;
    max-width: 100%;
    width: auto;
}

/* Card = reprend le look home : image en fond, overlay blanc en bas avec
   titre + flèche, ombre au survol, radius 15px. */
.lad-blog-listing .simpleblog__listing__post__wrapper { margin-bottom: 0; }
.lad-blog-listing .simpleblog__listing__post__wrapper.post-item {
    position: relative;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: #e9eef0 !important;
    padding: 0 !important;
    min-height: 360px;
    height: 100%;
    display: block;
    transition: box-shadow 0.3s ease;
}
.lad-blog-listing .simpleblog__listing__post__wrapper.post-item:hover {
    box-shadow: 0 3px 20px #DDF0F6 !important;
}
/* Image cover, lien wrapper en absolute */
.lad-blog-listing .simpleblog__listing__post__wrapper > a:first-child {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    margin: 0;
}
.lad-blog-listing .simpleblog__listing__post__wrapper > a:first-child img.photo,
.lad-blog-listing .simpleblog__listing__post__wrapper img.photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0 !important;
    display: block;
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}
/* Zoom de l'image au survol de la card (l'overflow:hidden de .post-item
   garde l'image confinée), identique aux cards home / articles liés. */
.lad-blog-listing .simpleblog__listing__post__wrapper.post-item:hover img.photo {
    transform: scale(1.08);
}
/* Masquer description, read more, footer (date/tags/views) */
.lad-blog-listing .simpleblog__listing__post__wrapper__content p,
.lad-blog-listing .simpleblog__listing__post__wrapper__content [itemprop="description"],
.lad-blog-listing .simpleblog__listing__post__wrapper__content__readmore,
.lad-blog-listing .simpleblog__listing__post__wrapper__footer { display: none !important; }
/* Overlay blanc en bas */
.lad-blog-listing .simpleblog__listing__post__wrapper__content.card-block {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    background: #FFFFFF;
    border-radius: 15px;
    padding: 20px 15px !important;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(26,40,44,0.10);
}
.lad-blog-listing .simpleblog__listing__post__wrapper__content.card-block::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 4.58px;
    height: 8.17px;
    background: url("/img/cms/Icones/fleche-articles.svg") no-repeat center / contain;
    pointer-events: none;
}
.lad-blog-listing .post-title,
.lad-blog-listing .simpleblog__listing__post__wrapper__content__headline.post-title {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 30px 0 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    width: 100%;
    display: block;
}
.lad-blog-listing .post-title a {
    color: #1A282C !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none !important;
    display: block;
}

/* ============================================================
   PAGE ARTICLE BLOG (.lad-blog-single) — override template
   ph_simpleblog/single.tpl. Image en haut + h1 centré + dots,
   puis contenu, puis section "Produits liés" centrée 3 cards.
   ============================================================ */

/* Article wrapper centré : pleine largeur du container parent */
.lad-blog-single {
    margin: 80px auto 100px;
}

/* Header : image + titre + dots. position:relative pour ancrer le bouton
   Retour en absolu sur l'image de couverture. */
.lad-blog-single-header {
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}
/* Bouton "Retour" en haut-gauche de l'image de couverture (pill noir,
   chevron + label, même langage visuel que les autres CTA du site) */
.lad-blog-back-btn,
.lad-blog-back-btn:hover,
.lad-blog-back-btn:focus,
.lad-blog-back-btn:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.lad-blog-back-btn {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 22px;
    background: #1A282C;
    border-radius: 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.lad-blog-back-btn:hover { transform: scale(0.97); opacity: 0.9; }
.lad-blog-back-btn-arrow {
    display: inline-block;
    width: 4.53px;
    height: 7.66px;
    background: url("/img/cms/Icones/fleche-left-slider-product.svg") no-repeat center / contain;
}
.lad-blog-single-cover {
    display: block;
    width: 100%;
    height: 470px;
    border-radius: 30px;
    margin: 0 0 60px;
    object-fit: cover;
}
.lad-blog-single-title {
    color: #1A282C;
    margin: 0 0 20px;
}
.lad-blog-single-header .home-dots { margin: 0; }

/* Méta-infos (date, catégorie, vues) : masquées par défaut. Décommenter le
   bloc si on veut les afficher. */
.lad-blog-single .lad-blog-single-meta { display: none; }

/* Corps de l'article : typo Raleway lisible, retire les bords de carte par
   défaut du theme (.cardblog) */
.lad-blog-single-body { background: transparent; border: 0; padding: 0; }
.lad-blog-single-body .card-block { padding: 0 !important; }
.lad-blog-single-body p,
.lad-blog-single-body li {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    color: #1A282C;
}
.lad-blog-single-body h2,
.lad-blog-single-body h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: #1A282C;
    margin: 40px 0 18px;
    line-height: 1.25;
}
.lad-blog-single-body h2 { font-size: 26px; }
.lad-blog-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: 30px;
    margin: 20px 0;
}
/* Tableaux dans le corps d'article : bordures grises fines + padding cellules */
.lad-blog-single-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: #1A282C;
}
.lad-blog-single-body table th,
.lad-blog-single-body table td {
    border: 1px solid #1A282C;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 19px;
}
.lad-blog-single-body table th {
    background: #FEF3E1;
    font-weight: 700;
}

/* === Section "Produits liés" : titre centré + dots + grid 3 cards === */
.lad-blog-related {
    text-align: center;
}
/* Aligné sur le h2 global du site (25/600/30). Spécificité montée à
   #content-wrapper pour battre la règle theme parent
   `#content-wrapper .section-title { margin-bottom:.8em; padding-bottom:.5em;
   font-weight:bold }`. */
#content-wrapper .lad-blog-related-title {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    color: #1A282C;
    margin: 0 0 15px;
    padding-bottom: 0;
    border: 0;
}
.lad-blog-related-title span { background: none; padding: 0; }
.lad-blog-related .home-dots { margin: 0 0 35px; }
/* Grille 4 cards (gap 50px) — override Bootstrap row, même pattern que le listing */
.lad-blog-related .lad-blog-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin: 0;
    text-align: left;
}
.lad-blog-related .lad-blog-related-grid > .js-product-miniature-wrapper {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    flex: none;
}

/* ============================================================
   PAGE 404 (.lad-404) — override template errors/404.tpl.
   2 colonnes : images empilées à gauche, h1 + intro + CTA à droite.
   ============================================================ */
/* Annule le margin-bottom 10rem du theme parent (rule
   `#pagenotfound #main .page-content { margin-bottom: 10rem }`) :
   on contrôle l'espacement vertical sur .lad-404 directement. */
#pagenotfound #main .page-content.lad-404 { margin-bottom: 0; }
.lad-404 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 180px;
    margin: 100px 0 0;
}
.lad-404-col-images {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.lad-404-img {
    height: 200px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 30px;
    display: block;
}
.lad-404-img:nth-child(1) { width: 492px; }
.lad-404-img:nth-child(2) { width: 684px; }
.lad-404-col-text { color: #1A282C; }
.lad-404-title {
    color: #1A282C;
    margin: 0 0 30px;
    width: fit-content;
}
.lad-404-intro {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
    color: #1A282C;
    margin: 0 0 30px;
    max-width: 480px;
}
/* CTA noir : strictement aligné sur .lad-blog-hero-cta / .related-blog-cta */
.lad-404-cta,
.lad-404-cta:hover,
.lad-404-cta:focus,
.lad-404-cta:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.lad-404-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    background: #1A282C;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.lad-404-cta:hover { transform: scale(0.97); opacity: 0.9; }

/* ============================================================
   PAGE CONNEXION / authentification (#authentication / .page-authentication)
   Pattern wrapper appliqué + breadcrumb / border / padding natifs neutralisés.
   Inputs au look des champs contact (pilule blanche, 1px #1A282C, radius 30).
   Bouton submit au look standard (pill noir, 16/700, height 42).
   ============================================================ */

/* Breadcrumb masqué */
body#authentication #wrapper > .container > nav.breadcrumb,
body#password #wrapper > .container > nav.breadcrumb,
body#registration #wrapper > .container > nav.breadcrumb,
body:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-confirmation, #order-detail, #order-return) #wrapper > .container > nav.breadcrumb { display: none; }

/* Retire le border + padding 1rem natifs du #content / wrapper compte */
.my-account-page-content-wrapper,
.page-authentication #content,
.page-password #content,
.page-registration #content,
.page-customer-account #content {
    border: 0 !important;
    padding: 0 !important;
}

/* Espace haut généreux entre le header et le titre */
#authentication #main,
#password #main,
#registration #main,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #main { padding-top: 130px; }

/* H1 page-title : aligne sur le H1 global du site. La règle theme parent
   `#content-wrapper .page-title { font-weight: normal; padding-bottom: 0.5em }`
   bat la règle globale `h1 { font-weight: 800 }` → on monte la spec ici. */
#authentication .page-header,
#password .page-header,
#registration .page-header,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .page-header { text-align: center; }
#authentication #content-wrapper .page-header .page-title,
#password #content-wrapper .page-header .page-title,
#registration #content-wrapper .page-header .page-title,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #content-wrapper .page-header .page-title {
    color: #1A282C;
    font-weight: 800;
    margin: 0 0 60px;
    padding-bottom: 0;
}
/* Page mot de passe : titre plus compact (intro juste en dessous) */
#password #content-wrapper .page-header .page-title {
    margin-bottom: 20px;
}
/* Page inscription : titre compact aussi (intro "Vous avez déjà..." juste en dessous) */
#registration #content-wrapper .page-header .page-title {
    margin-bottom: 20px;
}

/* --- Champs du formulaire login : look "pilule blanche" comme contact --- */
#authentication .login-form .form-control,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#authentication .login-form .form-control::placeholder,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}

/* Layout en row : col gauche (label) et col droite (comment) fixées à 165px,
   col du milieu (input) prend le reste. */
#authentication .login-form .form-group.row,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row {
    flex-wrap: nowrap;
}
#authentication .login-form .form-group.row > .col-form-label,
#authentication .login-form .form-group.row > .form-control-comment,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .col-form-label,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .form-control-comment {
    flex: 0 0 165px;
    width: 165px;
    max-width: 165px;
    min-width: 165px;
}
/* Page inscription : labels plus larges (intitulés "Date de naissance" etc.) */
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .col-form-label,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .form-control-comment {
    flex-basis: 220px;
    width: 220px;
    max-width: 220px;
    min-width: 220px;
}
/* Page informations personnelles : labels 200px (intitulés courts comme
   "Prénom" / "Nouveau mot de passe") + taille réduite 16/20.
   Exclut explicitement la page d'inscription qui a aussi `.page-customer-account`. */
:is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .col-form-label,
:is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .form-control-comment {
    flex-basis: 200px;
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

/* Page adresse : le `#vat-validation-feedback` est inséré DANS le `.form-group.row`
   du champ TVA (après la 3e col) et casse le layout flex-wrap nowrap → on
   passe le row en wrap pour que le feedback bascule en dessous, et on lui
   donne `flex-basis: 100%`. */
.address-form form .form-group.row:has(#vat-validation-feedback) {
    flex-wrap: wrap;
}
.address-form form .form-group.row > #vat-validation-feedback {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 200px;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}
.address-form form .form-group.row > #vat-validation-feedback:empty {
    display: none;
}
/* ============================================================
   PAGE CONFIRMATION DE COMMANDE (#order-confirmation)
   Layout 2 cols : message + détails paiement (col gauche) + récap commande
   (col droite, repris des patterns panier / checkout).
   ============================================================ */

#order-confirmation #content-wrapper { padding-top: 130px; }
/* Annule le `padding: 1rem 0` natif sur `#content-hook_order_confirmation` */
#order-confirmation #content-hook_order_confirmation {
    padding: 0;
}

/* H1 page : pattern global du site (800 centré à gauche) */
#order-confirmation #content-hook_order_confirmation .page-title {
    color: #1A282C;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
#order-confirmation #content-hook_order_confirmation .page-title .fa-check {
    display: none;
}

/* Gutter entre les 2 cols (idem panier / checkout) */
#order-confirmation #content-hook_order_confirmation > .row {
    --bs-gutter-x: 60px;
}

/* === Col gauche : message de confirmation === */
#order-confirmation .order-confirmation-title-payment {
    border-right: 0;
}
#order-confirmation .order-confirmation-title-payment .mail-sent-info {
    background: #F2F2F2;
    border-radius: 20px;
    padding: 15px 20px;
    margin: 0 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1A282C;
}
/* Bloc payment_return : texte + liste de coordonnées (dl/dt/dd) */
#order-confirmation #content-hook_payment_return {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1A282C;
}
#order-confirmation #content-hook_payment_return p {
    margin: 0 0 15px;
}
#order-confirmation #content-hook_payment_return p:last-child {
    margin-bottom: 0;
}
#order-confirmation #content-hook_payment_return dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 15px 0;
}
/* Annule le `margin: .125rem` natif (`.definition-list dl dt/dd`)
   qui décale les paires en hauteur. */
#order-confirmation #content-hook_payment_return dl dt,
#order-confirmation #content-hook_payment_return dl dd {
    background: #F2F2F2;
    margin: 0;
}
#order-confirmation #content-hook_payment_return dl dt {
    font-weight: 700;
}
#order-confirmation #content-hook_payment_return dl dd {
    font-weight: 400;
}
#order-confirmation #content-hook_payment_return strong {
    display: block;
    margin: 15px 0;
    font-weight: 700;
}
#order-confirmation #content-hook_payment_return a {
    color: #1A282C;
    text-decoration: underline;
}

/* === Col droite : récap commande (pilule crème comme panier / checkout) === */
#order-confirmation #order-details,
#order-confirmation #order-items {
    background: #FEF3E1;
    border-radius: 20px;
    padding: 25px;
    margin: 0 0 20px;
}
#order-confirmation .order-confirmation-details h3.h3,
#order-confirmation .order-confirmation-details h3.card-title {
    margin: 0 0 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
    border-bottom: 0;
    padding: 0;
}
/* Liste des détails (Référence, Paiement, Livraison) */
#order-confirmation #order-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
}
#order-confirmation #order-details li {
    margin-bottom: 8px;
}
#order-confirmation #order-details li:last-child {
    margin-bottom: 0;
}
#order-confirmation #order-details em.text-muted {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: #707070;
    margin-top: 2px;
}

/* === Articles de la commande (col droite, sous order-details) === */
#order-confirmation #order-items .order-confirmation-table {
    background: transparent;
    border: 0;
    padding: 0;
}
#order-confirmation .order-line {
    margin-bottom: 10px;
}
#order-confirmation .order-line .image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
#order-confirmation .order-line .details {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #1A282C;
}
#order-confirmation .order-line .qty {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
}
#order-confirmation .order-line .qty .bold {
    font-weight: 700;
}
/* Séparateur entre produits et totaux */
#order-confirmation #order-items hr {
    border: 0;
    border-top: 1px solid rgba(26, 40, 44, 0.15);
    margin: 15px 0;
}
/* Tableau des totaux */
#order-confirmation #order-items table {
    width: 100%;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
}
#order-confirmation #order-items table td {
    padding: 4px 0;
}
#order-confirmation #order-items table td:last-child {
    text-align: right;
}
#order-confirmation #order-items table tr.totals,
#order-confirmation #order-items table tr.font-weight-bold {
    font-size: 16px;
    font-weight: 700;
}
#order-confirmation #order-items table tr.totals td,
#order-confirmation #order-items table tr.font-weight-bold td {
    padding-top: 10px;
}
#order-confirmation #order-items table .text-uppercase {
    text-transform: uppercase;
}

/* ============================================================
   PAGE COMMANDE / CHECKOUT (#checkout)
   Layout 2 cols : étapes (col-md-8) + résumé panier (col-md-4).
   ============================================================ */

#checkout #main { padding-top: 130px; }

/* H1 page : pattern global du site (800 centré) */
#checkout #content-wrapper .page-title {
    color: #1A282C;
    font-weight: 800;
    margin: 0 0 60px;
    text-align: center;
}

/* Gutter entre cols étapes / résumé */
#checkout #main > .row {
    --bs-gutter-x: 60px;
}

/* === Étapes (.checkout-step) — même structure que les panels de la page
   compte pro (#module-advanced_b2b_b2c-account) : pilule blanche, radius
   30, bordure sombre, header avec background #1A282C. === */
#checkout .checkout-step {
    background: #FFFFFF !important;
    border: 1px solid #1A282C !important;
    border-radius: 30px !important;
    padding: 0 !important;
    margin-bottom: 20px;
    overflow: hidden;
    opacity: 1 !important;
}
/* Header de chaque étape : fond sombre, texte blanc */
#checkout .checkout-step .step-title {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 18px 25px !important;
    background-color: #1A282C !important;
    color: #FFFFFF !important;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    border: 0 !important;
    cursor: pointer;
}
#checkout .checkout-step .step-number {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    color: #1A282C;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}
#checkout .checkout-step .step-title .done {
    display: none !important;
}
#checkout .checkout-step .step-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
}
/* `.step-edit` dans le `.step-title` (fond sombre) → blanc.
   `.step-edit` dans le `.content` (fond clair) → garde la couleur sombre
   héritée (pas d'override). */
#checkout .checkout-step .step-title .step-edit {
    color: #FFFFFF !important;
}
#checkout .checkout-step .step-title .step-edit .fa-pencil {
    color: #FFFFFF;
}
/* Étapes inactives (-unreachable) : header sombre garde son fond, on grise
   juste le texte/numéro pour signaler que l'étape n'est pas accessible. */
#checkout .checkout-step.-unreachable .step-title {
    opacity: 0.55;
    cursor: default;
}
/* Contenu de l'étape : padding interne (le header garde son fond
   pleine largeur grâce à `.checkout-step { padding: 0 }`). */
#checkout .checkout-step .content {
    padding: 25px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1A282C;
}
#checkout .checkout-step .content > p,
#checkout .checkout-step .content > .identity {
    margin: 0 0 10px;
}
#checkout .checkout-step .content a {
    color: #1A282C;
}
#checkout .checkout-step .content h2.h4 {
    margin: 25px 0 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A282C;
}
#checkout .checkout-step .content h2.h4:first-of-type {
    margin-top: 10px;
}

/* Espace au-dessus du form d'inscription dans le tunnel (#customer-form) */
#checkout .js-customer-form {
    margin-top: 30px;
}
/* Bloc "delivery_message" : margin-bottom sur le label pour aérer du textarea */
#checkout #delivery label[for="delivery_message"] {
    display: block;
    margin-bottom: 10px;
}
/* Textarea : pilule arrondie radius 20 */
#checkout #delivery textarea#delivery_message.form-control {
    border-radius: 20px;
}
/* Carte option de livraison (.delivery-option) + récap mode de livraison
   (.summary-selected-carrier) : pilule grise comme nos alertes, radius 20. */
body#checkout section.checkout-step .delivery-option,
body#checkout #order-summary-content .summary-selected-carrier {
    background-color: #F2F2F2;
    border-radius: 20px !important;
    border: 0 !important;
    padding: 15px 20px;
    margin-bottom: 0;
}
/* Récap mode de livraison : logo transporteur réduit (max 80px). */
body#checkout #order-summary-content .summary-selected-carrier img.img-fluid {
    max-width: 80px;
    height: auto;
}
/* Section mode de livraison : margin-bottom sur la card pour aérer du
   textarea "Si vous voulez nous laisser un message…" qui suit. */
body#checkout #checkout-delivery-step .delivery-option {
    margin-bottom: 20px;
}
/* Conteneur du nom transporteur : padding natif retiré */
body#checkout .delivery-option .carriere-name-container {
    padding: 0;
}
/* Logo + nom transporteur côte à côte (au lieu d'empilés verticalement).
   Le wrap natif est `.row.carrier-hasLogo` avec `col-xs-3` (img) +
   `col-xs-9` (nom). Bootstrap met `display: block` aux col → on force le
   flex sur la row et l'alignement centré. */
body#checkout .delivery-option .carrier-hasLogo {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
body#checkout .delivery-option .carrier-hasLogo > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
body#checkout .delivery-option .carrier-hasLogo .col-xs-3 img {
    display: block;
    max-width: 60px;
    height: auto;
}
body#checkout .delivery-option .carrier-hasLogo .carriere-name-container {
    flex: 1 1 auto;
    min-width: 0;
}
body#checkout .delivery-option .carrier-hasLogo .carrier-name {
    display: block;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
}
/* Récap produits (`.order-confirmation-table`) : transparent + sans padding,
   border natif retirée. */
body#checkout #order-summary-content .order-confirmation-table {
    background-color: transparent;
    border: 0 !important;
    padding: 0;
}
/* Image produit dans le récap : pilule arrondie radius 20 */
body#checkout #order-summary-content .order-line .image img {
    border-radius: 20px;
}

/* === Boost de spécificité pour le form de modif adresse dans le tunnel ===
   Le theme warehouse a beaucoup de règles `body#checkout section.checkout-step …`
   (spec 0,1,0,2) qui battent nos règles `:is(... #checkout …)` (spec 0,2,0,0).
   On redéclare les mêmes valeurs avec `body#checkout` pour égaliser la spec. */
body#checkout .checkout-step .js-address-form .form-control,
body#checkout .checkout-step .js-address-form select.form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
body#checkout .checkout-step .js-address-form .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
body#checkout .checkout-step .js-address-form .form-group.row {
    align-items: center;
    margin-bottom: 1rem;
}
body#checkout .checkout-step .js-address-form .form-group.row > .col-form-label,
body#checkout .checkout-step .js-address-form .form-group.row > .form-control-comment {
    flex-basis: 200px;
    width: 200px;
    max-width: 200px;
    min-width: 200px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
    text-align: right;
}
body#checkout .checkout-step .js-address-form .form-group.row > .form-control-comment {
    font-weight: 400;
    color: #707070;
    text-align: left;
}
body#checkout .checkout-step .js-address-form .form-group.row > .js-input-column {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}
/* Bloc adresse de livraison : espace au-dessus pour aérer du titre h2. */
#checkout #delivery-address {
    margin-top: 30px;
}
/* Form-group qui contient la case "Utiliser aussi cette adresse pour la
   facturation" : centré horizontalement + texte centré. */
body#checkout .checkout-step .js-address-form .form-group.row:has(> .col-md-9.col-md-offset-3) {
    justify-content: center;
}
body#checkout .checkout-step .js-address-form .form-group.row > .col-md-9.col-md-offset-3 {
    text-align: center;
}
/* Bloc collapse "Connectez-vous !" : pilule gris clair arrondie */
#checkout .checkout-step #personal-information-step-login {
    background-color: #F2F2F2;
    border-radius: 20px;
}

/* Sélecteur "Type de compte" (advanced_b2b_b2c) : aligne le margin-bottom
   sur les `.form-group` natifs (1rem au lieu de 1.5rem). Couvre la page
   inscription, le checkout, et tout autre conteneur où le sélecteur est
   injecté. */
#advb2bc-account-type-selector {
    margin-bottom: 1rem !important;
}
/* Label "Type de compte" (utilise `.form-control-label` au lieu de
   `.col-form-label` natif) : on lui applique le même rendu que les autres
   labels pour aligner avec le reste du form. */
#advb2bc-account-type-selector .form-control-label {
    display: block;
    font-family: 'Raleway', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: #1A282C !important;
    margin: 0 !important;
}
/* Col label : alignée sur les `.col-form-label` ailleurs, texte aligné
   à droite pour matcher le reste du form. Page checkout : 200px, page
   inscription : 220px (les autres labels y font 220). */
#advb2bc-account-type-selector > .col-md-2:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#checkout #advb2bc-account-type-selector > .col-md-2:first-child,
#checkout #advb2bc-account-type-selector > .col-md-2:last-child {
    flex-basis: 200px;
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}
#registration #advb2bc-account-type-selector > .col-md-2:first-child,
#registration #advb2bc-account-type-selector > .col-md-2:last-child {
    flex-basis: 220px;
    width: 220px;
    max-width: 220px;
    min-width: 220px;
}
#advb2bc-account-type-selector .form-control-label {
    text-align: right;
    /* Même padding vertical que les `.col-form-label` natifs pour aligner
       la hauteur du label sur les autres champs du form. */
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
}
/* Col input (select) : flex 1 1 auto comme les `.js-input-column` */
#advb2bc-account-type-selector > .col-md-8 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}
/* Col comment vide (3e) : 200px comme `.form-control-comment` */
#advb2bc-account-type-selector > .col-md-2:last-child {
    flex-basis: 200px;
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

/* Notice reCAPTCHA `.advb2bc-recaptcha-notice` : alignée sur la colonne
   input du form (offset 220px à gauche pour passer la zone du label,
   220px à droite pour matcher la col-comment — même valeur que la page
   inscription). */
.advb2bc-recaptcha-notice,
.advb2bc-b2b-info-message {
    margin-left: 220px;
    margin-right: 220px;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    line-height: 17px;
    color: #707070;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}
.advb2bc-recaptcha-notice .advb2bc-recaptcha-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #1A282C;
    margin-top: 1px;
}
.advb2bc-recaptcha-notice a {
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Masque le `<p>` qui wrap le bouton no-JS `.ps-hidden-by-js`
   (`<button>` déjà `display: none` mais le `<p>` parent prend une cellule
   du grid `.address-selector` et crée un vide en bas). */
#checkout .address-selector > p:has(.ps-hidden-by-js) {
    display: none;
}

/* === Cards adresses (.address-item) === */
#checkout .address-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}
/* Adresse-item en flex 50% - moitié du gap pour rester sur 2 par ligne
   sans débord. Annule aussi le `margin-bottom: .5rem` natif. */
#checkout .address-selector > .address-item {
    flex: 0 0 calc(50% - 7.5px);
    max-width: calc(50% - 7.5px);
    min-width: 0;
    margin-bottom: 0 !important;
}
/* Background bleu clair par défaut + border transparente (mêmes
   dimensions que l'état `.selected` qui ajoute la bordure noire). */
#checkout .address-item {
    background: #DDF0F6 !important;
    border: 1px solid transparent !important;
    border-radius: 20px;
    padding: 18px 20px;
    margin: 0;
    transition: border-color 0.2s ease;
}
#checkout .address-item.selected {
    background-color: #DDF0F6 !important;
    border-color: #1A282C !important;
}
#checkout .address-item header {
    margin-bottom: 10px;
}
#checkout .address-item .radio-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 !important;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A282C;
}
/* Radio custom : pastille avec bord noir + dot center si checked */
#checkout .address-item .custom-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 50%;
    flex-shrink: 0;
}
#checkout .address-item .custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
#checkout .address-item .custom-radio > span {
    display: none;
    width: 10px;
    height: 10px;
    background: #1A282C;
    border-radius: 50%;
}
#checkout .address-item .custom-radio input[type="radio"]:checked + span {
    display: block;
}
/* `<hr>` natifs dans la card adresse : masqués (espacement géré par margins). */
#checkout .address-item hr {
    display: none;
}
/* --- Étape paiement : aligner verticalement le radio avec le libellé,
   et masquer les logos (PayPal / Visa-MC-CB) affichés à droite du texte. --- */
#checkout .payment-options .payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Annuler le margin-top que ps_checkout (payments.css) pose sur le radio
   (.5rem paypal / .25rem carte) qui le décentrait dans le flex. */
#checkout .payment-options .payment-option .custom-radio {
    flex: 0 0 auto;
    margin-top: 0 !important;
}
#checkout .payment-options .payment-option > label {
    margin-bottom: 0;
    max-width: none;
}
/* Masquer les logos / éléments injectés (PayPal marks, Visa-MC-CB…), qu'ils
   soient DANS le label (après le texte) ou injectés par le SDK en FRÈRE direct
   de l'option. On préserve le radio, le label et le form (JS). */
#checkout .payment-options .payment-option > label > *:not(:first-child),
#checkout .payment-options .payment-option > label img,
#checkout .payment-options .payment-option > *:not(.custom-radio):not(label):not(form) {
    display: none !important;
}
/* Adresse postale */
#checkout .address-item .address {
    padding: 0 !important;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
}
/* Footer card : Modifier / Supprimer, centré, marge top pour aérer */
#checkout .address-item .address-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 !important;
    margin-top: 20px;
}
#checkout .address-item .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1A282C !important;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
#checkout .address-item .address-footer a:hover { opacity: 0.7; }

/* Lien "ajouter une nouvelle adresse" */
#checkout .add-address {
    margin: 0 0 20px;
}
#checkout .add-address a {
    display: inline-block;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Majuscule sur la 1re lettre ("ajouter…" → "Ajouter…"). Le `<a>` doit
   être en `inline-block` (et non `inline-flex`) pour que `::first-letter`
   l'atteigne. L'icône `.fa-plus` étant déjà masquée plus haut, on n'a
   pas besoin du flex pour le gap. */
#checkout .add-address a::first-letter {
    text-transform: uppercase;
}
#checkout .add-address .fa-plus { display: none; }

/* Bouton "Continuer" / "Commander" : pill noir standard */
#checkout .checkout-step .btn-primary.continue,
#checkout .checkout-step .btn-primary.continue:hover,
#checkout .checkout-step .btn-primary.continue:focus,
#checkout .checkout-step .btn-primary.continue:visited,
#checkout #payment-confirmation .btn-primary,
#checkout #payment-confirmation .btn-primary:hover,
#checkout #payment-confirmation .btn-primary:focus,
#checkout #payment-confirmation .btn-primary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#checkout .checkout-step .btn-primary.continue,
#checkout #payment-confirmation .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 40px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: auto !important;
    margin: 10px auto 0;
}
/* Bouton "Commander" disabled : grisé */
#checkout #payment-confirmation .btn-primary.disabled,
#checkout #payment-confirmation .btn-primary[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Wrapper du bouton "Commander" : centré comme les "Continuer", alert
   d'erreur AU-DESSUS du bouton (inverse de l'ordre HTML natif). */
#checkout #payment-confirmation .ps-shown-by-js {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#checkout #payment-confirmation .ps-shown-by-js > .alert.alert-danger {
    order: 1;
    width: 100%;
}
#checkout #payment-confirmation .ps-shown-by-js > .btn-primary {
    order: 2;
}
/* Récapitulatif de commande (page paiement) : transparent */
body#checkout #order-summary-content {
    background-color: transparent;
    padding: 0;
}
/* H4 noirs (titres de section) : on retire la border-bottom natif */
body#checkout #order-summary-content h4.black {
    border-bottom: 0;
}
/* H5 (titres de blocs : Adresses, Mode de livraison, etc.) : espace
   au-dessus pour aérer du bloc précédent. */
body#checkout #order-summary-content .h5,
body#checkout #order-summary-content h5.h5 {
    margin-top: 30px;
}
/* Address-block (récap paiement) : repris exactement des `.address-item`
   de l'étape Adresses du tunnel — pilule bleu clair avec radius 20. */
#checkout #order-summary-content .card.address-block {
    background: #DDF0F6 !important;
    border: 1px solid transparent !important;
    border-radius: 20px;
    padding: 18px 20px !important;
    margin: 0;
    height: 100%;
    box-shadow: none;
}
#checkout #order-summary-content .address-block .card-body {
    padding: 0 !important;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
}
#checkout #order-summary-content .address-block .addresshead {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 10px;
}
/* Wrapper du bouton : centré (flex pour centrer le `inline-flex` du btn) */
#checkout .checkout-step .clearfix:has(> .btn-primary.continue),
#checkout .checkout-step form:has(> .btn-primary.continue) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#checkout .checkout-step .btn-primary.continue:disabled,
#checkout .checkout-step .btn-primary.continue[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Alert d'erreur d'adresse (.alert-danger) : même pilule gris clair que
   les alertes du compte (.alert.alert-info:not(.zone-indicator)).
   Étendu à la page panier (#cart). */
#checkout .js-address-error.alert-danger,
#checkout .alert.alert-danger,
#cart .js-address-error.alert-danger,
#cart .alert.alert-danger {
    background-color: #F2F2F2 !important;
    color: #1A282C;
    border: 0 !important;
    border-radius: 20px;
    padding: 12px 20px;
    margin: 10px 0 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
}
/* Liens dans une `.alert-danger` : couleur héritée (texte sombre) +
   underline seulement. */
#checkout .alert-danger a:link:not(.btn),
#checkout .alert-danger a:visited:not(.btn),
#cart .alert-danger a:link:not(.btn),
#cart .alert-danger a:visited:not(.btn) {
    color: inherit !important;
    text-decoration: underline;
}

/* === Résumé panier (col droite) — reprend les patterns de la page panier === */
#checkout .cart-summary.card {
    background: #FEF3E1;
    border: 0;
    border-radius: 20px;
}
#checkout .cart-summary .card-body,
#checkout .cart-summary .card-block {
    padding: 20px 25px;
}
#checkout .cart-summary hr {
    border: 0;
    border-top: 1px solid rgba(26, 40, 44, 0.15);
    margin: 0;
}
#checkout .cart-summary-line {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1A282C;
    margin: 0 0 8px;
}
#checkout .cart-summary-line:last-child { margin-bottom: 0; }
#checkout .cart-summary-line.cart-total {
    font-size: 20px;
    font-weight: 700;
}
/* Bloc "1 article + afficher les détails" */
#checkout .cart-summary-products > div {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #1A282C;
}
#checkout .cart-summary-products a.text-muted {
    color: #1A282C !important;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Liste produits dans le collapse. `!important` pour battre
   `body#checkout #cart-summary-product-list .media-left { max-width: 40px }`
   natif (spec `body#checkout` > `#checkout` seul). */
#checkout #cart-summary-product-list .media-left {
    max-width: 60px !important;
}
/* Icône crayon du lien "Modifier" dans le collapse cart-summary */
#checkout #cart-summary-product-list .step-edit .fa-pencil {
    font-size: 12px;
}
#checkout .cart-summary-product .media-object {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
}
#checkout .cart-summary-product .product-name {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
}

/* === Référence interne / BDC (advanced_b2b_b2c purchase order) === */
#checkout .advb2bc-purchase-order-wrapper {
    padding: 20px 25px 0;
}
#checkout .advb2bc-purchase-order-wrapper .form-group {
    margin: 0;
}
#checkout .advb2bc-purchase-order-wrapper .form-control-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0 !important;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #1A282C;
}
/* Icône info (tooltip) */
#checkout .advb2bc-purchase-order-wrapper .advb2bc-po-tooltip {
    display: inline-flex;
    cursor: help;
}
#checkout .advb2bc-purchase-order-wrapper .advb2bc-po-tooltip .advb2bc-icon {
    width: 14px;
    height: 14px;
    color: #707070;
}
/* Input "Votre référence interne / BDC" : pilule blanche standard */
#checkout .advb2bc-purchase-order-wrapper .advb2bc-po-input-wrapper {
    position: relative;
}
#checkout .advb2bc-purchase-order-wrapper .form-control {
    background: white;
    border: none;
    border-radius: 30px;
    padding: 0 22px;
    height: 42px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#checkout .advb2bc-purchase-order-wrapper .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
/* Statut de validation (à droite de l'input) */
#checkout .advb2bc-purchase-order-wrapper .advb2bc-po-status {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
    pointer-events: none;
}

/* === Code promo (reprend les règles de la page panier) === */
#checkout .block-promo { padding: 20px 25px; }
#checkout .block-promo .cart-voucher,
#checkout .block-promo .cart-voucher-area {
    padding: 0;
    background: transparent;
}
#checkout .block-promo .voucher-icon { display: none; }
#checkout .block-promo form .input-group {
    display: flex;
    gap: 10px;
    background: transparent;
    border: 0;
}
#checkout .block-promo .form-control {
    flex: 1 1 auto;
    background: white;
    border: none;
    border-radius: 30px;
    padding: 0 22px;
    height: 42px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#checkout .block-promo .form-control::placeholder { color: #C6C9CA; opacity: 1; }
#checkout .block-promo .input-group-append { flex: 0 0 auto; margin: 0; }
#checkout .block-promo .input-group-append .btn.btn-secondary,
#checkout .block-promo .input-group-append .btn.btn-secondary:hover,
#checkout .block-promo .input-group-append .btn.btn-secondary:focus,
#checkout .block-promo .input-group-append .btn.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#checkout .block-promo .input-group-append .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

/* ============================================================
   POPUP "Vous devez vous connecter" (wishlist non connecté)
   ============================================================ */

/* Wrapper : centré + padding latéral, idem modal panier */
#iqitwishlist-modal .modal-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px;
    padding-right: 30px;
}

#iqitwishlist-modal .modal-content {
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(26, 40, 44, 0.18);
}

/* Header : fond sombre, titre blanc */
#iqitwishlist-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 25px;
    background-color: #1A282C;
    border: 0;
    border-radius: 0;
}
#iqitwishlist-modal .modal-title {
    margin: 0 auto 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
    text-align: left;
}
#iqitwishlist-modal .modal-header .close {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 0 auto;
    cursor: pointer;
    opacity: 1;
    width: 22px;
    height: 22px;
    font-size: 0;
    line-height: 0;
}
#iqitwishlist-modal .modal-header .close > span {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 0;
    background: url('/img/cms/Icones/icone-croix-menu.svg') center / contain no-repeat;
}
#iqitwishlist-modal .modal-header .close:hover { opacity: 0.7; }

/* Body : padding propre */
#iqitwishlist-modal .modal-body {
    padding: 25px;
}

/* Texte d'intro */
#iqitwishlist-modal .login-form > p {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 20px;
    text-align: center;
}

/* === Form login dans la modal === */
/* Form-group row : label au-dessus de l'input, full width */
#iqitwishlist-modal #login-form-modal .form-group.row {
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 12px;
}
#iqitwishlist-modal #login-form-modal .form-group.row > .col-form-label {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0 0 6px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
    text-align: left;
    white-space: normal;
}
#iqitwishlist-modal #login-form-modal .form-group.row > .js-input-column {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
/* Cache la col vide form-control-comment (3e col) */
#iqitwishlist-modal #login-form-modal .form-group.row > .form-control-comment {
    display: none;
}
/* Input pilule blanche standard */
#iqitwishlist-modal #login-form-modal .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
    width: 100%;
}
#iqitwishlist-modal #login-form-modal .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
/* Input-group password (input + bouton œil) : on positionne le bouton
   en absolute à l'intérieur de la pilule. */
#iqitwishlist-modal #login-form-modal .input-group {
    display: flex;
    position: relative;
    background: transparent;
    border: 0;
}
#iqitwishlist-modal #login-form-modal .input-group > .form-control {
    flex: 1 1 auto;
    padding-right: 50px;
}
#iqitwishlist-modal #login-form-modal .input-group-append {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    margin: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}
#iqitwishlist-modal #login-form-modal .input-group-append .btn-outline-secondary {
    background: transparent;
    border: 0;
    padding: 0 12px;
    color: #1A282C;
    box-shadow: none;
}
/* Mot de passe oublié */
#iqitwishlist-modal #login-form-modal .forgot-password {
    text-align: center;
    margin: 0 0 15px;
}
#iqitwishlist-modal #login-form-modal .forgot-password a {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bouton "Connexion" : pill noir centré */
#iqitwishlist-modal #login-form-modal .form-footer {
    margin-top: 5px;
    text-align: center;
}
#iqitwishlist-modal #login-form-modal #submit-login,
#iqitwishlist-modal #login-form-modal #submit-login:hover,
#iqitwishlist-modal #login-form-modal #submit-login:focus,
#iqitwishlist-modal #login-form-modal #submit-login:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#iqitwishlist-modal #login-form-modal #submit-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Hr natif masqué */
#iqitwishlist-modal .modal-body > hr {
    display: none;
}
/* "Pas de compte ? Créez-en un ici" */
#iqitwishlist-modal .no-account {
    text-align: center;
    margin-top: 20px;
}
#iqitwishlist-modal .no-account a {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   POPUP "Produit ajouté au panier avec succès"
   (modal native PrestaShop affichée après un ajout au panier)
   ============================================================ */

/* Wrapper de la modal : centré horizontalement (margin auto) avec padding
   latéral pour ne jamais coller au bord d'écran (même valeur que les
   pages : 30 desktop, 15 mobile). On override le `var(--bs-modal-margin)`
   natif qui pose une marge asymétrique au responsive. */
.modal-dialog:has(.cart-content-btn) {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px;
    padding-right: 30px;
}
/* Scope précis via `:has(.cart-content-btn)` — unique à cette modal. */
.modal-content:has(.cart-content-btn) {
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(26, 40, 44, 0.18);
}
/* Header : fond sombre, titre blanc */
.modal-content:has(.cart-content-btn) .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 25px;
    background-color: #1A282C;
    border: 0;
    border-radius: 0;
}
.modal-content:has(.cart-content-btn) .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
}
.modal-content:has(.cart-content-btn) .modal-title .fa-check {
    display: none;
}
.modal-content:has(.cart-content-btn) .modal-header .close {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 0 auto;
    cursor: pointer;
    opacity: 1;
    width: 22px;
    height: 22px;
    font-size: 0;
    line-height: 0;
}
/* Remplace le `×` natif par l'icône SVG du site (`icone-croix-menu.svg`). */
.modal-content:has(.cart-content-btn) .modal-header .close > span {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 0;
    background: url('/img/cms/Icones/icone-croix-menu.svg') center / contain no-repeat;
}
.modal-content:has(.cart-content-btn) .modal-header .close:hover { opacity: 0.7; }

/* Body : padding + layout 2 cols */
.modal-content:has(.cart-content-btn) .modal-body {
    padding: 25px;
}
/* Espace entre les 2 cols (gauche : produit, droite : récap) */
.modal-content:has(.cart-content-btn) .divide-right {
    padding-right: 15px;
}

/* === Colonne gauche : produit ajouté === */
.modal-content:has(.cart-content-btn) .product-image.img-fluid {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.modal-content:has(.cart-content-btn) .col-info {
    padding-left: 12px;
}
.modal-content:has(.cart-content-btn) .product-name a {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #1A282C;
    text-decoration: none;
}
.modal-content:has(.cart-content-btn) .product-attributes .product-line-info {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: rgba(33, 37, 41, 0.8);
}
.modal-content:has(.cart-content-btn) .product-attributes .product-line-info .label {
    font-weight: 400;
}
.modal-content:has(.cart-content-btn) .col-info > .text-muted {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
}

/* === Colonne droite : récap panier === */
.modal-content:has(.cart-content-btn) .cart-content {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
}
.modal-content:has(.cart-content-btn) .cart-products-count {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
    margin: 0 0 10px;
}
.modal-content:has(.cart-content-btn) .cart-subtotals > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.modal-content:has(.cart-content-btn) .cart-subtotals strong {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #1A282C;
}
.modal-content:has(.cart-content-btn) .clearfix.mb-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    font-size: 16px;
    font-weight: 700;
}
/* Annule le pseudo `clearfix::after` (table+clear:both) qui ajoute un
   saut de ligne inutile dans la flexbox Total TTC. */
.modal-content:has(.cart-content-btn) .clearfix.mb-2::after,
.modal-content:has(.cart-content-btn) .clearfix.mb-2::before {
    display: none;
}
/* Masque la 3e `<div>` vide sous "Livraison : gratuit" (placeholder
   `<small class="value">` sans contenu). */
.modal-content:has(.cart-content-btn) .cart-subtotals > div > div:has(> small.value) {
    display: none;
}
.modal-content:has(.cart-content-btn) .clearfix.mb-2 strong {
    font-weight: 700;
}

/* === Boutons d'action === */
.modal-content:has(.cart-content-btn) .cart-content-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}
/* Bouton "Commander" : pill noir */
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-primary,
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-primary:hover,
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-primary:focus,
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-primary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
/* Bouton "Continuer mes achats" : pill blanche bordée */
.modal-content:has(.cart-content-btn) .cart-content-btn .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #FFFFFF !important;
    border: 1px solid #1A282C !important;
    color: #1A282C !important;
    border-radius: 30px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

/* ============================================================
   POPUP CGV / mentions (modale `.js-checkout-modal` du checkout :
   ouverte au clic sur "conditions générales de vente").
   ============================================================ */

/* Wrapper centré horizontalement ET verticalement (le dialog n'a pas la
   classe `.modal-dialog-centered` → on reproduit son comportement) + padding
   latéral comme les autres modales. */
.js-checkout-modal .modal-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.js-checkout-modal .modal-content {
    background: #FFFFFF;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(26, 40, 44, 0.18);
}
/* Header : pas de bordure basse, croix alignée à droite. */
.js-checkout-modal .modal-header {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    border-bottom: 0;
    border-radius: 0;
}
.js-checkout-modal .modal-header .close {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 0 auto;
    cursor: pointer;
    opacity: 1;
    width: 22px;
    height: 22px;
    font-size: 0;
    line-height: 0;
}
/* Remplace le `×` natif par l'icône SVG du site (sombre, sur header blanc). */
.js-checkout-modal .modal-header .close > span {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 0;
    background: url('/img/cms/Icones/icone-croix-menu.svg') center / contain no-repeat;
}
.js-checkout-modal .modal-header .close:hover { opacity: 0.7; }

/* Body : padding + scroll interne propre, typographie Raleway. */
.js-checkout-modal .modal-body.modal-terms {
    padding: 0 25px 25px;
    max-height: 70vh;
    overflow-y: auto;
}
.js-checkout-modal .modal-terms .rte-content {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #1A282C;
}
.js-checkout-modal .modal-terms .rte-content h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #1A282C;
    margin: 25px 0 10px;
}
.js-checkout-modal .modal-terms .rte-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
    margin: 18px 0 8px;
}
.js-checkout-modal .modal-terms .rte-content p {
    margin: 0 0 12px;
}
.js-checkout-modal .modal-terms .rte-content a {
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}
.js-checkout-modal .modal-terms .rte-content ul,
.js-checkout-modal .modal-terms .rte-content ol {
    margin: 0 0 12px;
    padding-left: 22px;
}
.js-checkout-modal .modal-terms .rte-content blockquote {
    margin: 0 0 15px;
    padding: 12px 16px;
    background: #FEF3E1;
    border-radius: 12px;
}

/* ============================================================
   PAGE PANIER (#cart / .page-cart)
   Layout 2 cols : liste produits à gauche, résumé/totaux à droite.
   ============================================================ */

#cart #main { padding-top: 130px; }

/* H1 page : aligné sur le H1 global du site (extrabold 800) */
#cart #content-wrapper .page-title {
    color: #1A282C;
    font-weight: 800;
    margin: 0 0 60px;
    padding-bottom: 0;
    text-align: center;
}

/* Wrapper de chaque produit dans le panier (background + border-bottom natifs retirés) */
#cart .cart-overview .cart-item {
    background: transparent;
    border-bottom: 0;
    padding: 20px 0;
    margin-bottom: 15px;
}

/* Espace augmenté entre la col gauche (produits) et la col droite (résumé) */
#cart .cart-grid.row {
    --bs-gutter-x: 60px;
}
/* Annule le margin-bottom natif sur la liste `<ul.cart-items>` */
#cart .cart-overview .cart-items {
    margin-bottom: 0;
}
/* Image produit */
#cart .product-line-grid-body .product-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
/* Col image + lien wrapper : 96px = 80px image + 2× 8px padding hérité
   de `.small-gutters > .col { padding: 0 .5rem }`. */
#cart .product-line-grid-body .col.product-image {
    flex: 0 0 96px;
    width: 96px;
    max-width: 96px;
}
/* Col nom : prend tout le reste de la ligne. Annule le `width: 75%` natif
   de `.col-9` qui peut faire wrap le nom sous l'image quand 96 + 75% > 100%. */
#cart .product-line-grid-body .col.col-9 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}
#cart .product-line-grid-body .product-image > a {
    display: block;
    width: 80px;
    height: 80px;
}
/* Titre produit (scopé à `.cart-overview` pour ne PAS toucher le popup
   panier qui réutilise `.product-line-info`). */
#cart .cart-overview .product-line-info .label {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
    text-decoration: none;
}
/* Sous-info (déclinaison) — reproduit le rendu natif du popup panier
   (.product-attributes.text-muted) : 12px, gris muted hérité de .text-muted. */
#cart .cart-overview .product-line-info-secondary,
#cart .cart-overview .product-line-info-secondary .label,
#cart .cart-overview .product-line-info-secondary .value {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 4px;
}
/* Prix unitaire + prix total */
#cart .cart-overview .product-line-grid .unit-price .value,
#cart .cart-overview .product-line-grid .price .product-price {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A282C;
}
/* Quantité — repris à l'identique du popup panier (#blockcart-content) :
   input crème pilule + boutons +/- en glyphes Raleway. */
#cart .cart-overview .product-line-grid .qty .js-cart-line-product-quantity {
    background-color: #FEF3E1;
    border: 0;
    border-radius: 10px;
    width: 49px !important;
    min-width: 49px;
    max-width: 49px;
    flex: 0 0 49px;
    height: 38px;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    text-align: center;
    box-shadow: none;
    box-sizing: border-box;
}
#cart .cart-overview .product-line-grid .input-group.bootstrap-touchspin {
    gap: 8px;
    width: auto;
}
/* Boutons +/- : on cache les icônes FontAwesome et on injecte + / - en Raleway */
#cart .cart-overview .product-line-grid .bootstrap-touchspin-up .fa-angle-up,
#cart .cart-overview .product-line-grid .bootstrap-touchspin-down .fa-angle-down {
    display: none;
}
#cart .cart-overview .product-line-grid .bootstrap-touchspin-up,
#cart .cart-overview .product-line-grid .bootstrap-touchspin-down {
    background: transparent;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 18px;
    padding: 0;
    border: 0;
}
#cart .cart-overview .product-line-grid .bootstrap-touchspin-up::before { content: '+'; }
#cart .cart-overview .product-line-grid .bootstrap-touchspin-down::before { content: '-'; }
/* Bouton supprimer (poubelle) */
#cart .cart-overview .remove-from-cart {
    color: #1A282C;
    font-size: 18px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
#cart .cart-overview .remove-from-cart:hover { opacity: 0.7; }

/* Bouton "Continuer mes achats" : pill noir standard avec flèche SVG gauche
   (même flèche que le bouton "Retour" blog : fleche-left-slider-product.svg).
   L'icône FA `.fa-angle-left` est cachée et remplacée par un `::before`. */
#cart .cart-grid-body > a.btn-secondary > .fa-angle-left {
    display: none;
}
#cart .cart-grid-body > a.btn-secondary,
#cart .cart-grid-body > a.btn-secondary:hover,
#cart .cart-grid-body > a.btn-secondary:focus,
#cart .cart-grid-body > a.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#cart .cart-grid-body > a.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
#cart .cart-grid-body > a.btn-secondary::before {
    content: "";
    display: inline-block;
    width: 4.53px;
    height: 7.66px;
    background: url("/img/cms/Icones/fleche-left-slider-product.svg") no-repeat center / contain;
    filter: brightness(0) invert(1);
}

/* === Bloc résumé / totaux (col droite) === */
#cart .cart-summary.card {
    background: #FEF3E1;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}
#cart .cart-summary .card-body {
    padding: 20px 25px;
}
#cart .cart-summary hr {
    border: 0;
    border-top: 1px solid rgba(26, 40, 44, 0.15);
    margin: 0;
}
/* Lignes de résumé : label gauche, valeur droite (layout natif PrestaShop) */
#cart .cart-summary-line {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #1A282C;
    margin: 0 0 10px;
}
#cart .cart-summary-line:last-child { margin-bottom: 0; }
#cart .cart-summary-line .label,
#cart .cart-summary-line .value {
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
/* Ligne Total TTC : mise en avant */
#cart .cart-summary-line.cart-total {
    font-size: 20px;
    font-weight: 700;
}
#cart .cart-summary-line.cart-total .label,
#cart .cart-summary-line.cart-total .value {
    font-weight: 700;
}

/* === Code promo === */
#cart .block-promo {
    padding: 20px 25px;
}
#cart .block-promo .cart-voucher,
#cart .block-promo .cart-voucher-area {
    padding: 0;
    background: transparent;
}
/* Icône fa-tag : masquée (on garde un visuel propre) */
#cart .block-promo .voucher-icon {
    display: none;
}
/* Form : input + bouton "Ajouter" en flex, pas d'input-group natif */
#cart .block-promo form .input-group {
    display: flex;
    gap: 10px;
    background: transparent;
    border: 0;
}
/* Input "Code promo" : pilule blanche sans border */
#cart .block-promo .form-control {
    flex: 1 1 auto;
    background: white;
    border: none;
    border-radius: 30px;
    padding: 0 22px;
    height: 42px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#cart .block-promo .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
/* Wrapper du bouton : pas de bordure native input-group-append */
#cart .block-promo .input-group-append {
    flex: 0 0 auto;
    margin: 0;
}
/* Bouton "Ajouter" : pill noir standard */
#cart .block-promo .input-group-append .btn.btn-secondary,
#cart .block-promo .input-group-append .btn.btn-secondary:hover,
#cart .block-promo .input-group-append .btn.btn-secondary:focus,
#cart .block-promo .input-group-append .btn.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#cart .block-promo .input-group-append .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Bouton "Commander" : pill noir standard. Couvre :
   - panier rempli : `<a class="btn btn-primary btn-lg btn-block">Commander</a>`
     dans `.cart-detailed-actions`
   - panier vide : `<button class="btn btn-primary disabled" disabled>...</button>`
     dans `.checkout` (état grisé via `opacity: 0.4`). */
#cart .checkout .btn-primary,
#cart .checkout .btn-primary:hover,
#cart .checkout .btn-primary:focus,
#cart .checkout .btn-primary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#cart .checkout .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: auto;
}
/* Panier rempli (a.btn-block) : prend toute la largeur */
#cart .cart-detailed-actions .btn-primary.btn-block {
    display: flex;
    width: 100%;
    padding: 0 25px;
}
/* Panier vide : bouton disabled grisé, centré dans `.checkout.text-xs-center` */
#cart .checkout.text-xs-center {
    text-align: center;
}
#cart .checkout .btn-primary.disabled,
#cart .checkout .btn-primary[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   PAGE FORMULAIRE DE RÉTRACTATION (#module-advanced_b2b_b2c-withdrawal)
   ============================================================ */

#module-advanced_b2b_b2c-withdrawal .withdrawal-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Alert d'intro "Loi Hamon" : pilule gris clair standard */
#module-advanced_b2b_b2c-withdrawal .withdrawal-info.alert.alert-info {
    background-color: #F2F2F2 !important;
    color: #1A282C;
    border: 0;
    padding: 18px 25px;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-info p { margin: 0; }

/* Cards (.withdrawal-legal-notice, .withdrawal-contact) : pilule blanche
   avec bordure sombre. `!important` sur margin pour battre la classe
   utilitaire `.mb-4 { margin-bottom: 16px !important }`. */
#module-advanced_b2b_b2c-withdrawal .withdrawal-legal-notice.card,
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact.card {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 20px;
    margin: 0 !important;
}
#module-advanced_b2b_b2c-withdrawal .card-body {
    padding: 22px 25px;
}
#module-advanced_b2b_b2c-withdrawal .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
}
#module-advanced_b2b_b2c-withdrawal .card-text {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
}
#module-advanced_b2b_b2c-withdrawal .card-text strong {
    font-weight: 700;
}

/* Alert "Aucune commande éligible" (warning) : pilule crème accentuée */
#module-advanced_b2b_b2c-withdrawal .withdrawal-no-orders.alert.alert-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: #FEF3E1 !important;
    color: #1A282C;
    border: 0;
    padding: 22px 25px;
    margin: 0;
    font-family: 'Raleway', sans-serif;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-no-orders > div {
    flex: 1 1 auto;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-no-orders strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-no-orders p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

/* Icônes SVG natives (.advb2bc-icon) : taille uniforme + couleur sombre */
#module-advanced_b2b_b2c-withdrawal .advb2bc-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #1A282C;
}

/* ===== Form de rétractation ===== */
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-group {
    margin: 0;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-group.withdrawal-message {
    margin-top: 20px;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-label {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 10px;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-label.required::after {
    content: " *";
    color: #d9534f;
}
/* Select + form-control inputs : pilule blanche standard */
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
    width: 100%;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}
/* Textarea : hauteur libre */
#module-advanced_b2b_b2c-withdrawal .withdrawal-form textarea.form-control {
    height: auto;
    min-height: 100px;
    padding: 12px 22px;
    border-radius: 20px;
    line-height: 20px;
}
/* Form-text (info sous champ) */
#module-advanced_b2b_b2c-withdrawal .withdrawal-form .form-text {
    display: block;
    margin: 8px 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
}

/* ===== Zone upload fichier (.withdrawal-upload-zone) ===== */
#module-advanced_b2b_b2c-withdrawal .withdrawal-upload-zone {
    background: #FFFFFF;
    border: 1px dashed #1A282C;
    border-radius: 20px;
    padding: 18px 20px;
}
/* Input file : on garde le rendu natif compact, on annule juste le style
   `.form-control` pilule qui le rend bizarre. */
#module-advanced_b2b_b2c-withdrawal .withdrawal-upload-zone input[type="file"].form-control {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    height: auto;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    cursor: pointer;
}
/* Texte info sous l'input */
#module-advanced_b2b_b2c-withdrawal .withdrawal-upload-zone .form-text {
    display: block;
    margin: 10px 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
}

/* ===== Bloc produits de la commande ===== */
#module-advanced_b2b_b2c-withdrawal .withdrawal-products {
    background-color: #DDF0F6 !important;
    border: 0 !important;
    border-radius: 20px;
    padding: 25px;
    margin: 25px 0 0;
}
#module-advanced_b2b_b2c-withdrawal .products-title {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
    margin: 0 0 12px;
}
#module-advanced_b2b_b2c-withdrawal .products-title #order-reference-display {
    font-weight: 400;
    color: #707070;
}
/* Bloc info "Sélectionnez les produits…" (.products-instructions) */
#module-advanced_b2b_b2c-withdrawal .products-instructions.alert {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #F2F2F2 !important;
    color: #1A282C !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 15px 20px;
    margin: 0 0 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
}
/* Bouton "Voir mes retours" dans la bannière `.existing-return-banner` :
   pill noir standard. */
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary,
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary:hover,
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary:focus,
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 18px;
    margin-top: 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
#module-advanced_b2b_b2c-withdrawal .existing-return-banner .btn.btn-secondary .advb2bc-icon {
    display: none;
}

/* Bannière "Commande en cours de livraison" */
#module-advanced_b2b_b2c-withdrawal .delivery-info-banner.alert {
    background-color: #FFFFFF !important;
    color: #1A282C !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 18px 20px;
    margin: 0 0 15px;
    font-family: 'Raleway', sans-serif;
}
#module-advanced_b2b_b2c-withdrawal .delivery-info-banner .no-delivery-date {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
#module-advanced_b2b_b2c-withdrawal .delivery-info-banner strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
}
#module-advanced_b2b_b2c-withdrawal .delivery-info-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

/* Bouton "Tout sélectionner" : pill noir standard */
#module-advanced_b2b_b2c-withdrawal .products-select-all {
    margin: 0 0 15px;
}
#module-advanced_b2b_b2c-withdrawal .products-select-all #select-all-btn,
#module-advanced_b2b_b2c-withdrawal .products-select-all #select-all-btn:hover,
#module-advanced_b2b_b2c-withdrawal .products-select-all #select-all-btn:focus,
#module-advanced_b2b_b2c-withdrawal .products-select-all #select-all-btn:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-withdrawal .products-select-all #select-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Liste de produits */
#module-advanced_b2b_b2c-withdrawal .products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#module-advanced_b2b_b2c-withdrawal .product-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #FEF3E1;
    border: 0 !important;
    border-radius: 20px;
    padding: 15px 20px;
}
#module-advanced_b2b_b2c-withdrawal .product-item .product-image {
    margin-right: 0;
}
#module-advanced_b2b_b2c-withdrawal .product-item .product-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
#module-advanced_b2b_b2c-withdrawal .product-item .product-name {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #1A282C;
    margin-bottom: 4px;
}
#module-advanced_b2b_b2c-withdrawal .product-item .product-price {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #707070;
}

/* Bouton submit "Envoyer ma demande" : pill noir */
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary,
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary:hover,
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary:focus,
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-submit .btn.btn-primary .advb2bc-icon {
    display: none;
}

/* ===== Card "Télécharger le PDF" ===== */
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download.card {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 20px;
    margin: 0 !important;
}
/* Bouton "Télécharger le PDF pré-rempli" : pill noir */
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary,
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary:hover,
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary:focus,
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    margin-top: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-pdf-download .btn.btn-secondary .advb2bc-icon {
    display: none;
}
/* Petit texte sous le bouton */
#module-advanced_b2b_b2c-withdrawal #pdf-instructions {
    margin-top: 10px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
}

/* Bouton "Contacter le service client" : pill noir standard */
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary,
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary:hover,
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary:focus,
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    margin-top: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
/* Icône SVG dans le bouton : masquée */
#module-advanced_b2b_b2c-withdrawal .withdrawal-contact .btn.btn-secondary .advb2bc-icon {
    display: none;
}

/* ============================================================
   PAGE DÉTAIL DE COMMANDE (#order-detail)
   ============================================================ */

#order-detail .page-order-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Bootstrap "legacy" : `.hidden-xs-down` / `.hidden-sm-down` etc. sont
   définies hors media query dans le theme → elles cachent en permanence
   au lieu d'être responsive. On force ici les tables/blocs desktop à
   redevenir visibles, et on cache les blocs mobiles seulement à partir
   du bon breakpoint (cf. règles 575.98). */
/* Forcer `display: table` sur les vraies `<table>` legacy `.hidden-*-down`. */
#order-detail table.hidden-xs-down,
#order-detail table.hidden-sm-down,
#order-detail .table.hidden-sm-down,
#order-detail .table-bordered.hidden-sm-down,
#order-detail #order-history .hidden-xs-down {
    display: table !important;
}
/* Les `<div>.box.hidden-sm-down` (wrapper du tableau) doivent rester en
   `display: block` pour permettre `overflow-x: auto`. */
#order-detail .box.hidden-sm-down {
    display: block !important;
}
/* Masque les versions mobiles desktop par défaut (équivalent du
   `.hidden-sm-up` / `.hidden-md-up` natif). */
#order-detail .hidden-sm-up,
#order-detail .hidden-md-up,
#order-detail .history-lines,
#order-detail .shipping-lines,
#order-detail .order-items,
#order-detail .order-totals {
    display: none;
}

/* Box générique : pilule blanche avec bord noir (utilisée pour info commande,
   history, adresses, totaux, etc.). */
#order-detail .page-order-detail .box {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 20px;
    padding: 20px 25px;
    margin: 0;
}

/* === Info commande (#order-infos) === */
#order-detail #order-infos > .box {
    background: #F2F2F2;
    border: 0;
}
#order-detail #order-infos > .box > .row {
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}
#order-detail #order-infos > .box > .row > .col {
    padding-left: 0;
    padding-right: 0;
}
#order-detail #order-infos strong {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A282C;
}
/* Bouton "Commander à nouveau" : pill noir standard */
#order-detail #order-infos .btn.btn-primary,
#order-detail #order-infos .btn.btn-primary:hover,
#order-detail #order-infos .btn.btn-primary:focus,
#order-detail #order-infos .btn.btn-primary:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#order-detail #order-infos .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* === Historique d'état (#order-history) — pilule blanche avec bord noir === */
#order-detail #order-history.box {
    background: #FFFFFF;
    border: 1px solid #1A282C;
}
#order-detail #order-history .table.table-striped {
    background: transparent;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#order-detail #order-history .table th,
#order-detail #order-history .table td {
    border: 0;
    padding: 10px 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    background: transparent;
}
#order-detail #order-history .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
#order-detail #order-history .table thead th:first-child { border-radius: 12px 0 0 12px; }
#order-detail #order-history .table thead th:last-child { border-radius: 0 12px 12px 0; }
/* Annule striping Bootstrap 5 */
#order-detail #order-history .table tbody tr,
#order-detail #order-history .table tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#order-detail #order-history .table > tbody > tr > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}
/* Version mobile (.history-lines) */
#order-detail .history-lines .history-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 40, 44, 0.1);
}
#order-detail .history-lines .history-line:last-child { border-bottom: 0; }
/* `.state` peut passer à la ligne si pas de place à côté de la date.
   Le `.label-pill` à l'intérieur peut wrap son texte (annule le
   `white-space: nowrap` global). */
#order-detail .history-lines .history-line .state {
    flex: 0 1 auto;
    min-width: 0;
}
#order-detail .history-lines .history-line .label.label-pill {
    white-space: normal;
    max-width: 100%;
}

/* Pastille d'état générale */
#order-detail .label.label-pill {
    display: inline-block;
    border-radius: 10px;
    padding: 4px 14px;
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

/* === Infos secondaires (#order-infos2) === */
#order-detail #order-infos2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #1A282C;
}
#order-detail #order-infos2 ul li { margin-bottom: 6px; }
#order-detail #order-infos2 ul li:last-child { margin-bottom: 0; }
#order-detail #order-infos2 strong { font-weight: 700; margin-right: 8px; }
#order-detail #order-infos2 a {
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === Adresses (.addresses) === */
#order-detail .addresses.row {
    --bs-gutter-x: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
}
#order-detail .addresses .col {
    flex: 1 1 0;
    width: 50%;
    max-width: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
#order-detail .addresses .col > .box {
    width: 100%;
}
/* Le `<div class="clearfix">` natif devient un 3e flex-item et compresse
   les 2 cards en row → on le masque. */
#order-detail .addresses > .clearfix {
    display: none;
}
#order-detail #delivery-address.box,
#order-detail #invoice-address.box {
    height: 100%;
    margin: 0;
    background: #DDF0F6;
    border: 0;
}
#order-detail .addresses h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 10px;
}
#order-detail .addresses address {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
    font-style: normal;
    margin: 0;
    min-height: 0;
    padding: 0;
}

/* Annule le striping `.table-striped tr:nth-of-type(odd) { background:
   rgba(204,204,204,.15) }` sur toutes les tables de la page (pattern
   bons de réduction). */
#order-detail .table.table-striped tbody tr,
#order-detail .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#order-detail .table.table-striped > tbody > tr > *,
#order-detail .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}

/* === Tableau produits (#order-products) === */
#order-detail #order-products.table {
    background: transparent;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#order-detail #order-products th,
#order-detail #order-products td {
    border: 0;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    background: transparent;
}
/* Nom produit : wrap normal (sur les espaces, pas par caractère). */
#order-detail #order-products tbody .col-10,
#order-detail #order-products tbody .col-10 strong,
#order-detail #order-products tbody .col-10 strong a {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}
/* Scroll horizontal sur la box qui contient le tableau produits. */
#order-detail #order-return-form {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
#order-detail #order-return-form > .box {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
#order-detail #order-return-form > .box.hidden-sm-down {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
#order-detail #order-products {
    min-width: 550px;
}
#order-detail #order-products thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
#order-detail #order-products thead th:first-child { border-radius: 12px 0 0 12px; }
#order-detail #order-products thead th:last-child { border-radius: 0 12px 12px 0; }
#order-detail #order-products tbody tr {
    border-bottom: 1px solid rgba(26, 40, 44, 0.1);
}
#order-detail #order-products tbody tr:last-child { border-bottom: 0; }
/* Cellule produit : col image fixée à 60px, col texte prend le reste,
   évite que l'image rétrécisse au responsive. */
#order-detail #order-products tbody .row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
#order-detail #order-products tbody .col-2 {
    flex: 0 0 60px;
    width: 60px;
    max-width: 60px;
    padding: 0;
}
#order-detail #order-products tbody .col-10 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}
/* Image produit */
#order-detail #order-products img.img-fluid {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    max-width: none;
    flex-shrink: 0;
}
/* Nom produit */
#order-detail #order-products strong a {
    color: #1A282C;
    font-weight: 700;
    text-decoration: none;
}
/* Masque les `<br>` natifs dans la cellule produit + remplace par
   margins propres sur le `<strong>` (titre) — le texte "Référence: …"
   reste lisible en dessous. */
#order-detail #order-products .col-10 br {
    display: none;
}
#order-detail #order-products .col-10 strong {
    display: block;
    margin-bottom: 5px;
}
#order-detail #order-products .col-10 {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #707070;
}
/* Select Quantité retour */
#order-detail #order-products .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 14px;
    height: 36px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    box-shadow: none;
}
/* Totaux (tfoot) */
#order-detail #order-products tfoot tr td {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px;
}
#order-detail #order-products tfoot tr.line-total td {
    font-weight: 700;
    font-size: 16px;
    border-top: 1px solid rgba(26, 40, 44, 0.15);
}

/* Version mobile produits (.order-items / .order-totals) */
#order-detail .order-items .order-item {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(26, 40, 44, 0.1);
}
#order-detail .order-items .order-item:last-child { border-bottom: 0; }
/* Checkbox dans la `.order-item` : flux normal, alignée à gauche. */
body#order-detail .order-items .order-item > .row {
    align-items: center;
    margin: 0 !important;
}
body#order-detail .order-items .order-item .checkbox {
    position: static !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
body#order-detail .order-items .order-item .checkbox input[type="checkbox"] {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
/* Annule le `margin-bottom: 1rem` natif sur les blocs `.desc` / `.qty`
   du `.order-item`. */
#order-detail .order-items .order-item .desc,
#order-detail .order-items .order-item .qty {
    margin-bottom: 0;
}
#order-detail .order-items .desc .name {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
    margin-bottom: 4px;
}
/* Masque le `<br>` natif dans le bloc `.desc` (espace inutile sous la
   référence). */
#order-detail .order-items .order-item .desc > br {
    display: none;
}
#order-detail .order-items .desc .ref,
#order-detail .order-items .qty {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #707070;
}
#order-detail .order-totals .order-total {
    padding: 6px 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
}

/* Form #order-return-form : gap entre le tableau produits et le bloc
   "Retour de marchandise". */
#order-detail #order-return-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* === Bloc "Retour de marchandise" === */
#order-detail #order-return-form .box header h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A282C;
    margin: 0 0 10px;
}
#order-detail #order-return-form .box header p {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 15px;
}
#order-detail #order-return-form textarea.form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 20px;
    padding: 12px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
    box-shadow: none;
    width: 100%;
    min-height: 80px;
}
#order-detail #order-return-form .form-footer { margin-top: 15px; }
/* Bouton "Renvoyer un produit" + "Envoyer" : pill noir standard */
#order-detail .btn.btn-primary.form-control-submit,
#order-detail .btn.btn-primary.form-control-submit:hover,
#order-detail .btn.btn-primary.form-control-submit:focus,
#order-detail .btn.btn-primary.form-control-submit:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#order-detail .btn.btn-primary.form-control-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* === Tableau expéditions === */
#order-detail .table.hidden-sm-down,
#order-detail .table.table-striped.hidden-sm-down {
    background: transparent;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#order-detail .table.hidden-sm-down th,
#order-detail .table.hidden-sm-down td {
    border: 0;
    padding: 10px 12px;
    font-size: 14px;
    vertical-align: middle;
    background: transparent;
}
#order-detail .table.hidden-sm-down thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
#order-detail .table.hidden-sm-down thead th:first-child { border-radius: 12px 0 0 12px; }
#order-detail .table.hidden-sm-down thead th:last-child { border-radius: 0 12px 12px 0; }
/* Version mobile expéditions */
#order-detail .shipping-lines .shipping-line ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #1A282C;
}
#order-detail .shipping-lines li { margin-bottom: 4px; }
#order-detail .shipping-lines strong { margin-right: 8px; }

/* === Bloc message (.order-message-form) === */
#order-detail .order-message-form header strong {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A282C;
}
#order-detail .order-message-form header p {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
    margin: 8px 0 15px;
}
#order-detail .order-message-form .form-group.row {
    align-items: center;
    margin-bottom: 12px;
}
#order-detail .order-message-form .form-control-label {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1A282C;
    margin: 0;
    padding-top: 0 !important;
}
/* Col label : largeur fixe 100px ; la col input prend le reste */
#order-detail .order-message-form .form-group.row > .col-md-3 {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
    padding-right: 10px;
}
#order-detail .order-message-form .form-group.row > .col-md-5,
#order-detail .order-message-form .form-group.row > .col-md-9 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}
#order-detail .order-message-form .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 42px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    box-shadow: none;
    width: 100%;
}
#order-detail .order-message-form textarea.form-control {
    height: auto;
    min-height: 80px;
    padding: 12px 22px;
    border-radius: 20px;
    line-height: 20px;
}

/* ============================================================
   PAGES CMS génériques (mentions légales, CGV, politique de
   confidentialité, etc.) — exclut cms-id-8, 9, 10 qui ont leur design
   custom.
   ============================================================ */

body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #wrapper > .container > nav.breadcrumb {
    display: none;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #main {
    padding-top: 130px;
    padding-bottom: 60px;
}

/* H1 page : pattern global (800 centré, margin-bottom 60) */
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #content-wrapper .page-header .page-title {
    color: #1A282C;
    font-weight: 800;
    margin: 0 0 60px;
    text-align: center;
}

/* Bloc contenu (.rte-content) */
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1A282C;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: #1A282C;
    margin: 40px 0 15px;
    text-align: left !important;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content h2:first-child {
    margin-top: 0;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #1A282C;
    margin: 25px 0 10px;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content p {
    margin: 0 0 15px;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content p:last-child {
    margin-bottom: 0;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content a {
    color: #1A282C;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content strong {
    font-weight: 700;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content em {
    font-style: italic;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content ul,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content ol {
    margin: 0 0 15px;
    padding-left: 25px;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content li {
    margin-bottom: 6px;
}
/* Tableaux dans le contenu RTE : bordures + padding pour lisibilité. */
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    border: 1px solid #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table th,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table td {
    border: 1px solid #1A282C;
    padding: 12px 16px;
    vertical-align: top;
    text-align: left;
}
/* Première ligne (souvent les en-têtes) : fond crème + 700 */
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table tr:first-child td,
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table thead th {
    background: #FEF3E1;
    font-weight: 700;
}
body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content table tr:first-child strong {
    font-weight: 700;
}

/* ============================================================
   PAGE DÉTAIL D'UN RETOUR (#order-return)
   ============================================================ */

/* H1 "Détails du retour" : Raleway 700 + l'h2 vide juste au-dessus est masqué */
#order-return .my-account-page-content > h2:empty {
    display: none;
}
#order-return .my-account-page-content > .h1,
#order-return .my-account-page-content > h1.h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #1A282C;
    margin: 0 0 20px;
}

/* Bloc principal #order-return-infos : pilule blanche avec bord noir */
#order-return #order-return-infos.card {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 20px;
    margin: 0;
}
#order-return #order-return-infos .card-body {
    padding: 25px;
}
#order-return #order-return-infos p {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #1A282C;
    margin: 0 0 10px;
}
#order-return #order-return-infos p:last-of-type { margin-bottom: 15px; }
#order-return #order-return-infos strong {
    font-weight: 700;
}

/* Tableau interne : pilule crème (idem history / discount) */
#order-return #order-return-infos .table.table-striped {
    background: #FEF3E1;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#order-return #order-return-infos .table th,
#order-return #order-return-infos .table td {
    border: 0;
    padding: 14px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    background: transparent;
}
#order-return #order-return-infos .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
/* Annule le striping Bootstrap 5 */
#order-return #order-return-infos .table.table-striped tbody tr,
#order-return #order-return-infos .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#order-return #order-return-infos .table.table-striped > tbody > tr > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}
/* Cellule produit : retire les `<br>` natifs, met le `<strong>` en block,
   et le texte référence en plus petit gris en dessous. */
#order-return #order-return-infos .table tbody td br { display: none; }
#order-return #order-return-infos .table tbody strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: #1A282C;
}

/* ============================================================
   PAGE CARTES SAUVEGARDÉES (#module-payplug-cards / PayPlug) —
   même esthétique que les autres tableaux du compte (crème + en-tête
   foncé + Raleway), + encart pour l'état vide "aucune carte".
   ============================================================ */
#module-payplug-cards .my-account-page-content h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 20px;
}
#module-payplug-cards .my-account-page-content .table.table-striped {
    background: #FEF3E1;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 20px;
    overflow: hidden;
    margin: 0;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#module-payplug-cards .table th,
#module-payplug-cards .table td {
    border: 0;
    padding: 14px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    background: transparent;
}
#module-payplug-cards .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
/* Annule le striping Bootstrap 5 (fond crème uni comme les autres tableaux) */
#module-payplug-cards .table.table-striped tbody tr,
#module-payplug-cards .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#module-payplug-cards .table.table-striped > tbody > tr > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}
/* Lien "Supprimer" */
#module-payplug-cards .table td.delete a {
    color: #1A282C;
    font-weight: 700;
    text-decoration: underline;
}
#module-payplug-cards .table td.delete a:hover { color: #000; }
/* État vide : "Vous n'avez aucune carte enregistrée" */
#module-payplug-cards .my-account-page-content p.warning {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #1A282C;
    background: #FEF3E1;
    border-radius: 20px;
    padding: 20px 24px;
    margin: 0;
}

/* ============================================================
   PAGE RETOURS PRODUITS (#order-follow) — pattern history / discount
   avec wrapper scrollable.
   ============================================================ */

#order-follow .my-account-page-content > h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 20px;
}

#order-follow .follow-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
}
#order-follow .my-account-page-content {
    min-width: 0;
}
#order-follow .my-account-page-content .table.table-striped {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto;
    background: #FEF3E1;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#order-follow .my-account-page-content .table th,
#order-follow .my-account-page-content .table td {
    border: 0;
    padding: 14px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    background: transparent;
    white-space: nowrap;
}
#order-follow .my-account-page-content .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
/* Annule le striping Bootstrap 5 */
#order-follow .my-account-page-content .table.table-striped tbody tr,
#order-follow .my-account-page-content .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#order-follow .my-account-page-content .table.table-striped > tbody > tr > *,
#order-follow .my-account-page-content .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}
/* Liens (références commande / retour / bon de retour) */
#order-follow .my-account-page-content .table a {
    color: #1A282C;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   PAGE HISTORIQUE DES COMMANDES (#history) — repris du pattern bons
   de réduction (#discount) avec wrapper scrollable.
   ============================================================ */

/* Texte d'intro "Vous trouverez ici vos commandes…" */
#history .my-account-page-content > h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A282C;
    margin: 0 0 20px;
}

/* Wrapper `.history-table-scroll` : scroll horizontal limité au tableau */
#history .history-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
}
#history .my-account-page-content {
    min-width: 0;
}
/* Tableau : pilule crème + nowrap sur cellules + min-width pour scroll */
#history .my-account-page-content .table.table-striped {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto;
    background: #FEF3E1;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#history .my-account-page-content .table th,
#history .my-account-page-content .table td {
    border: 0;
    padding: 14px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    background: transparent;
    white-space: nowrap;
}
/* En-tête sombre */
#history .my-account-page-content .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
/* Cellule Référence (colonne gauche) */
#history .my-account-page-content .table tbody th[scope="row"] {
    font-weight: 700;
    color: #1A282C;
}
/* Annule le striping Bootstrap 5 */
#history .my-account-page-content .table.table-striped tbody tr,
#history .my-account-page-content .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#history .my-account-page-content .table.table-striped > tbody > tr > *,
#history .my-account-page-content .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}

/* Pastille d'état (.label.label-pill) : pill arrondie, padding interne */
#history .my-account-page-content .table .label.label-pill {
    display: inline-block;
    border-radius: 30px;
    padding: 4px 14px;
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

/* Liens dans la cellule Action (Détails / Commander à nouveau) */
#history .my-account-page-content .table .order-actions {
    white-space: nowrap;
}
#history .my-account-page-content .table .order-actions a {
    color: #1A282C;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#history .my-account-page-content .table .order-actions-sep {
    margin: 0 4px;
    color: #707070;
}

/* Lien icône PDF (Facture) */
#history .my-account-page-content .table .fa-file-pdf-o {
    font-size: 18px;
    color: #1A282C;
}

/* ============================================================
   PAGE BONS DE RÉDUCTION (#discount)
   ============================================================ */

/* Wrapper `.discount-table-scroll` (override tpl) : container scrollable
   horizontalement dédié au tableau seul.
   - `overflow-x: auto` + `overflow-y: hidden` → preserve les coins arrondis
     (sinon overflow-x auto seul fait passer overflow-y en auto et désactive
     le clipping border-radius).
   - `width: 100%` → ne s'étend pas à la taille de la table. */
/* `.my-account-page-content` est un flex item (col-sm-9 dans `.row` flex).
   Sans `min-width: 0` le contenu (table 900px) force la col à s'étendre
   au-delà de sa largeur théorique, ce qui fait sortir toute la section
   et empêche le scroll de marcher. */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content {
    min-width: 0;
}
#discount .discount-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
}
/* Tableau : pilule crème, sans bordure native, lignes Raleway.
   `display: table` natif ne respecte pas vraiment `width: max-content`
   (le browser shrink la table pour la faire fit dans le parent au lieu de
   prendre la largeur réelle du contenu nowrap). On force donc une
   `min-width` fixe qui garantit le débord et le scroll dès que la col
   droite descend en dessous. */
#discount .my-account-page-content .table.table-striped {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto;
    background: #FEF3E1;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: #1A282C;
}
#discount .my-account-page-content .table.table-striped th,
#discount .my-account-page-content .table.table-striped td {
    white-space: nowrap;
}
#discount .my-account-page-content .table th,
#discount .my-account-page-content .table td {
    border: 0;
    padding: 14px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    background: transparent;
}
/* Annule le striping : la règle Bootstrap historique
   `.table-striped tbody tr:nth-of-type(odd) { background: rgba(204,204,204,.15) }`
   met le fond directement sur le `<tr>` (pas la cellule). On force donc
   `background: transparent !important` sur les TR ET sur les `>*` cellules
   (qui ont aussi `--bs-table-bg-type` dans Bootstrap 5). */
#discount .my-account-page-content .table.table-striped tbody tr,
#discount .my-account-page-content .table.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
#discount .my-account-page-content .table.table-striped > tbody > tr > *,
#discount .my-account-page-content .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: #1A282C;
    background-color: transparent !important;
}
/* En-tête : fond sombre, texte blanc */
#discount .my-account-page-content .table thead th {
    background: #1A282C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}
/* Cellule de gauche (Code) : weight 700 */
#discount .my-account-page-content .table tbody th[scope="row"] {
    font-weight: 700;
    color: #1A282C;
}

/* Bloc mobile `.cart-rules` masqué partout : la table desktop reste
   accessible via le scroll horizontal. On force aussi la table à rester
   visible (annule `hidden-sm-down` natif). */
#discount .cart-rules {
    display: none !important;
}
#discount .my-account-page-content .table.table-striped {
    display: table !important;
}

/* Bloc mobile (`.cart-rules > .cart-rule`) — pilule crème avec liste verticale */
#discount .cart-rules .cart-rule {
    background: #FEF3E1;
    border-radius: 20px;
    padding: 20px 25px;
    margin-bottom: 15px;
}
#discount .cart-rules .cart-rule ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#discount .cart-rules .cart-rule li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #1A282C;
    border-bottom: 1px solid rgba(26, 40, 44, 0.1);
}
#discount .cart-rules .cart-rule li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
#discount .cart-rules .cart-rule li:first-child {
    padding-top: 0;
}
#discount .cart-rules .cart-rule li strong {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #707070;
}

/* ============================================================
   PAGE ADRESSES (#addresses) — liste de cards d'adresses
   ============================================================ */

/* Cols wrappant les cards d'adresse : espace vertical entre lignes */
#addresses .my-account-page-content .row > .col-lg-4.col-md-6.col-sm-6 {
    padding-bottom: 25px;
}

/* Card d'adresse : pilule bleu clair avec footer (boutons "Mettre à jour" + "Supprimer") */
#addresses .address {
    background: #DDF0F6;
    border: 0;
    border-radius: 20px;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
}
/* Annule le padding 1rem natif sur le `.address-body` (vient de
   `.modal-terms, .page-addresses .address .address-body { padding: 1rem }`) */
#addresses .address .address-body {
    padding: 0;
}
#addresses .address .address-body h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #1A282C;
    margin: 0 0 12px;
}
#addresses .address .address-body address {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #1A282C;
    font-style: normal;
    margin: 0;
    min-height: 0;
}
/* Footer : 2 liens "Mettre à jour" + "Supprimer" alignés en bas centrés.
   Annule le padding `.5rem 1rem` natif + border-top — on garde juste
   margin-top 20px. */
#addresses .address .address-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    padding: 0;
    border-top: 0;
}
#addresses .address .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
#addresses .address .address-footer a:hover {
    opacity: 0.7;
}

/* Bouton "Créer une nouvelle adresse" : pill noir standard.
   Annule le `margin: 0 .9375rem` natif (latéral). */
#addresses .addresses-footer {
    margin: 0;
}
#addresses .addresses-footer a,
#addresses .addresses-footer a:hover,
#addresses .addresses-footer a:focus,
#addresses .addresses-footer a:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#addresses .addresses-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    background: #1A282C;
    border: 0;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
#addresses .addresses-footer a:hover {
    transform: scale(0.97);
    opacity: 0.9;
}
#addresses .addresses-footer a > .fa-plus {
    display: none;
}
/* Annule le `margin-top: .5rem` natif sur le `<span>` interne */
#addresses .addresses-footer a span {
    margin-top: 0;
}

/* H2 d'introduction "Vos informations personnelles" : margin-bottom 30.
   Étendu via :is(#my-account, …) pour les pages comme #module-ps_emailalerts-account
   qui n'ont pas la class `.page-customer-account` sur le body. */
.page-customer-account .my-account-page-content > h2,
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content > h2 {
    margin-bottom: 30px;
}

/* Alerte info (page avoirs, etc.) : pilule crème sans border */
.alert-info,
.alert-warning {
    background: #f2f2f2;
    color: #1A282C;
    border-radius: 20px !important;
    border: none;
    padding:20px !important; 
}

/* Alert success "standard" (hors zone-indicator) : même pilule gris clair */
.alert.alert-success:not(.zone-indicator) {
    background-color: #F2F2F2 !important;
    color: #1A282C;
    border: none;
}

/* Alert zone-indicator : carte blanche, radius 20, bordure sombre comme
   les panels (utilisée notamment dans le bloc "Entreprise française"). */
#module-advanced_b2b_b2c-account .alert.zone-indicator {
    background-color: #FFFFFF !important;
    border: 1px solid #1A282C !important;
    border-radius: 20px !important;
    color: #1A282C !important;
}

/* Page RGPD (psgdpr) : annule les paddings 15px natifs Bootstrap sur le
   container interne qui wrap les blocs. */
#module-psgdpr-gdpr .my-account-page-content .container {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   PAGE COMPTE PRO (#module-advanced_b2b_b2c-account)
   Wizard avec panels, alertes, cards de profil, form (select pays,
   nom société) et bouton "Continuer".
   ============================================================ */

/* Annule le padding container Bootstrap natif sur le wrapper interne */
#module-advanced_b2b_b2c-account .my-account-page-content .advb2bc-wrapper > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* Panel principal du wizard = pilule crème + border noire */
#module-advanced_b2b_b2c-account .panel.panel-default {
    background: #FEF3E1;
    border: 1px solid #1A282C;
    border-radius: 30px !important;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: none;
    overflow: hidden;
}
/* Panels à l'intérieur des cards : bleu clair + border transparente */
#module-advanced_b2b_b2c-account .profile-card-selectable .panel.panel-default {
    background-color: #DDF0F6;
    border: 1px solid transparent;
}
/* Header du panel : icône + h3 alignés sur fond foncé */
#module-advanced_b2b_b2c-account .panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 25px 30px 0;
    background-color: #1A282C !important;
    border: 0;
}
#module-advanced_b2b_b2c-account .panel-heading > .fa {
    color: #FFFFFF;
    font-size: 20px;
}
/* Chevron du toggle du panel-heading : remplace l'icône FA `fa-chevron-down`
   par la flèche SVG `fleche-menu.svg` tournée à 90° (pointe vers le bas).
   `filter: brightness(0) invert(1)` convertit le SVG noir en blanc. */
#module-advanced_b2b_b2c-account .panel-heading .pull-right .fa-chevron-down {
    display: none;
}
#module-advanced_b2b_b2c-account .panel-heading .pull-right::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 10px;
    background: url("/img/cms/Icones/fleche-menu.svg") center / contain no-repeat;
    transform: rotate(90deg);
    filter: brightness(0) invert(1);
    margin-left: auto;
}
#module-advanced_b2b_b2c-account .panel-heading h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    color: #FFFFFF;
    margin: 0;
}
/* Body du panel */
#module-advanced_b2b_b2c-account .panel-body {
    padding: 25px 30px 30px;
}

/* Form labels (.control-label) : Raleway 16/700, alignement gauche.
   `!important` pour battre la règle du module
   `.form-group.col-md-12 > .control-label { ... !important }`. */
#module-advanced_b2b_b2c-account .control-label,
#module-advanced_b2b_b2c-account .form-group.col-md-12 > .control-label {
    display: block !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: #1A282C !important;
    margin: 0 0 10px !important;
}
#module-advanced_b2b_b2c-account .control-label .required {
    color: #d9534f;
    margin-left: 2px;
}
#module-advanced_b2b_b2c-account .control-label > .fa {
    color: #1A282C;
}

/* Inputs et selects : pilule blanche (pattern site) */
#module-advanced_b2b_b2c-account .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
}
#module-advanced_b2b_b2c-account .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}

/* Help block sous chaque champ : texte d'info gris */
#module-advanced_b2b_b2c-account .help-block {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    line-height: 17px;
    color: #707070;
}
#module-advanced_b2b_b2c-account .help-block > .fa {
    font-size: 13px;
    color: #707070;
}

/* Espacement entre form-groups */
#module-advanced_b2b_b2c-account .form-group + .form-group {
    margin-top: 15px;
}


/* Card active : background bleu clair `#DDF0F6` + bordure noire `#1A282C`
   (annule le `background: #f5f5f5 !important` natif du module). */
#module-advanced_b2b_b2c-account .profile-card-selectable.active .panel {
    background-color: #DDF0F6 !important;
    border-color: #1A282C !important;
}

/* Premier `.form-group.col-md-6` : le sélecteur `+ .form-group` ne le cible
   pas → on lui pose un margin-top explicite. */
#module-advanced_b2b_b2c-account .form-group.col-md-6:first-of-type {
    margin-top: 15px;
}

/* Retire le `::after` clearfix natif sur la .row tout en haut (Bootstrap legacy
   `.row::after { display: table; clear: both }`) qui crée un saut visible. */
#module-advanced_b2b_b2c-account .my-account-page-content-wrapper > .row::after {
    display: none;
}

/* Textarea : padding interne (top/bottom) car la règle .form-control fige
   height 43px sur les inputs simples. */
#module-advanced_b2b_b2c-account textarea.form-control {
    height: auto;
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 19px;
}

/* Bouton "Enregistrer les modifications" : pill noir standard du site */
#module-advanced_b2b_b2c-account .btn.btn-secondary[type="submit"],
#module-advanced_b2b_b2c-account .btn.btn-secondary[type="submit"]:hover,
#module-advanced_b2b_b2c-account .btn.btn-secondary[type="submit"]:focus,
#module-advanced_b2b_b2c-account .btn.btn-secondary[type="submit"]:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-account .btn.btn-secondary[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    padding: 0 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* Bouton "Modifier" dans le bloc profil entreprise : pill noir standard */
#module-advanced_b2b_b2c-account .profile-edit-btn,
#module-advanced_b2b_b2c-account .profile-edit-btn:hover,
#module-advanced_b2b_b2c-account .profile-edit-btn:focus,
#module-advanced_b2b_b2c-account .profile-edit-btn:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-account .profile-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 18px;
    background: #1A282C !important;
    border: 0 !important;
    border-radius: 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

/* Bouton "Continuer" : pill noir standard */
#module-advanced_b2b_b2c-account .btn-primary.btn-lg,
#module-advanced_b2b_b2c-account .btn-primary.btn-lg:hover,
#module-advanced_b2b_b2c-account .btn-primary.btn-lg:focus,
#module-advanced_b2b_b2c-account .btn-primary.btn-lg:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-advanced_b2b_b2c-account .btn-primary.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C;
    border: 0;
    border-radius: 30px;
    padding: 0 30px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Page Liste d'envies (iqitwishlist) :
   - chaque ligne produit `.iqitwishlist-product` séparée par un `<hr>` natif,
     pas de fond ni border
   - bloc "Partagez votre liste" : input url en pilule blanche + bouton
     "Copier" au standard du site (pill noir 16/700 h42). */
#module-iqitwishlist-view .iqitwishlist-product {
    padding: 18px 0;
}
#module-iqitwishlist-view #iqitwishlist-user-products > div:first-child .iqitwishlist-product,
#module-iqitwishlist-view .iqitwishlist-product:first-child {
    padding-top: 0;
}
#module-iqitwishlist-view .iqitwishlist-product > hr {
    display: none;
}
/* Lien wrapper de l'image : forcé à 80×80 (sinon `<a>` inline natif prend
   plus de place horizontale que l'image). */
#module-iqitwishlist-view .iqitwishlist-product .row > .col-3.col-sm-auto > a {
    display: block;
    width: 80px;
    height: 80px;
}
/* Image produit : radius + taille fixe */
#module-iqitwishlist-view .iqitwishlist-product img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
/* Col nom produit (._name) : prend tout l'espace restant via flex-grow accru.
   Col prix (.col simple sans _name ni col-auto) : juste sa taille naturelle. */
#module-iqitwishlist-view .iqitwishlist-product ._name {
    flex-grow: 4;
    min-width: 0;
}
#module-iqitwishlist-view .iqitwishlist-product .row > .col:not(._name):not(.col-auto) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
/* Nom produit + déclinaison */
#module-iqitwishlist-view .iqitwishlist-product ._name a {
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-decoration: none;
}
#module-iqitwishlist-view .iqitwishlist-product ._name .text-muted {
    color: #6c757d;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 4px;
}
#module-iqitwishlist-view .iqitwishlist-product .product-price {
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
/* Bouton "Ajouter au panier" : repris du pattern .product-miniature (rond 34
   noir avec SVG icone-quick-buy au centre, input qty caché) */
#module-iqitwishlist-view .iqitwishlist-product .product-add-cart form {
    margin: 0;
    display: flex;
    align-items: center;
}
#module-iqitwishlist-view .iqitwishlist-product .input-group-add-cart {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}
#module-iqitwishlist-view .iqitwishlist-product .input-qty,
#module-iqitwishlist-view .iqitwishlist-product input[name="qty"] {
    width: 60px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    text-align: center;
    margin-right: 8px;
}
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart,
#module-iqitwishlist-view .iqitwishlist-product button[type="submit"] {
    background-color: #1A282C;
    background-image: url("/img/cms/Icones/icone-quick-buy.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16.54px 17.61px;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
}
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart:hover,
#module-iqitwishlist-view .iqitwishlist-product button[type="submit"]:hover {
    transform: none;
    opacity: 1;
}
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart .spinner-icon,
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart .fa-circle-o-notch,
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart .bag-icon,
#module-iqitwishlist-view .iqitwishlist-product .add-to-cart i.fa-shopping-bag {
    display: none !important;
}

/* Icône poubelle "supprimer de la wishlist" */
#module-iqitwishlist-view .iqitwishlist-product .js-iqitwishlist-remove {
    color: #1A282C;
    font-size: 18px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
#module-iqitwishlist-view .iqitwishlist-product .js-iqitwishlist-remove:hover {
    opacity: 0.7;
}

/* Bloc partage : titre + input pilule + bouton standard */
#module-iqitwishlist-view #iqitwishlist-share {
    margin-top: 40px;
}
#module-iqitwishlist-view #iqitwishlist-share > h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1A282C;
    margin: 0 0 15px;
}
#module-iqitwishlist-view #iqitwishlist-share .input-group {
    border: 1px solid #1A282C;
    border-radius: 30px;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    max-width: 720px;
}
#module-iqitwishlist-view #iqitwishlist-share .input-group .form-control {
    border: 0;
    background: transparent;
    height: 41px;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1A282C;
    flex: 1 1 auto;
    min-width: 0;
}
#module-iqitwishlist-view #iqitwishlist-clipboard-btn,
#module-iqitwishlist-view #iqitwishlist-clipboard-btn:hover,
#module-iqitwishlist-view #iqitwishlist-clipboard-btn:focus {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-iqitwishlist-view #iqitwishlist-clipboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C;
    border: 0;
    border-radius: 0;
    padding: 0 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}
/* Annule l'effet hover global `.btn:hover { scale + opacity }` sur ce bouton */
#module-iqitwishlist-view #iqitwishlist-clipboard-btn:hover {
    transform: none;
    opacity: 1;
}

/* Page RGPD (psgdpr) : blocs "Access to my data" / "Rectification" en pilule
   crème + boutons CSV/PDF au standard du site (pill noir 16/700 h42). */
#module-psgdpr-gdpr .psgdprinfo17 {
    background: #f2f2f2;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
}
#module-psgdpr-gdpr .psgdprgetdatabtn17,
#module-psgdpr-gdpr .psgdprgetdatabtn17:hover,
#module-psgdpr-gdpr .psgdprgetdatabtn17:focus,
#module-psgdpr-gdpr .psgdprgetdatabtn17:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#module-psgdpr-gdpr .psgdprgetdatabtn17 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    margin-right: 10px;
}
#module-psgdpr-gdpr .psgdprgetdatabtn17:hover {
    transform: scale(0.97);
    opacity: 0.9;
}
/* Exclut explicitement la page d'inscription (qui a aussi `.page-customer-account`
   sur le body) pour ne toucher QUE les pages compte (identity, address, etc.) */
:is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .col-form-label {
    font-size: 16px !important;
    line-height: 20px !important;
}
/* Annule le `padding-top: .5rem` natif PS sur la col radio (champ "Titre" : M./Mme) */
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-valign {
    padding-top: 0;
}

/* Champ "Type de compte" (advb2bc dropdown) : markup différent des autres
   form-group (label dans <div.col-md-2> au lieu d'un <label.col-form-label>).
   `advb2bc-account-type-selector` est un ID, pas une classe.
   Layout 220/auto/220 + style de label Raleway 22/700/26. */
#registration #advb2bc-account-type-selector.form-group.row {
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}
#registration #advb2bc-account-type-selector.form-group.row > .col-md-2 {
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    min-width: 220px;
}
#registration #advb2bc-account-type-selector.form-group.row > .col-md-8 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}
#registration #advb2bc-account-type-selector.form-group.row .form-control-label {
    font-family: 'Raleway', sans-serif;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 26px;
    color: #1A282C;
    text-align: right;
    white-space: nowrap;
    margin: 0;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    display: block;
}

/* Page inscription : quand le module advanced_b2b_b2c cache dynamiquement
   la 3e col (`.form-control-comment[style*="display: none"]`), l'input prend
   toute la place restante → on simule la place de la 3e col en posant
   un padding-right sur le `.js-input-column`. 220px = largeur de la 3e col
   (matche le label gauche). */
#registration .register-form .form-group.row:has(> .form-control-comment[style*="display: none"]) > .js-input-column {
    padding-right: 230px;
}
/* Tunnel de commande : même comportement que registration sur le champ
   Société. Cols label/comment sont à 200px sur le checkout (au lieu de 220
   sur registration) → padding-right ajusté à 210px (200 + 10 buffer). */
#checkout :is(#customer-form, #login-form) .form-group.row:has(> .form-control-comment[style*="display: none"]) > .js-input-column {
    padding-right: 210px;
}

/* Notice reCAPTCHA + message B2B : alignés sur la col input (entre label
   et comment). Page inscription : 220 ; tunnel checkout : 200 (cols
   label/comment plus étroites). */
#registration .advb2bc-recaptcha-notice,
#registration .advb2bc-b2b-info-message {
    margin-left: 220px;
    margin-right: 220px;
}
#checkout .advb2bc-recaptcha-notice,
#checkout .advb2bc-b2b-info-message {
    margin-left: 200px;
    margin-right: 200px;
}
:is(#registration, #checkout) .advb2bc-recaptcha-notice .advb2bc-recaptcha-icon {
    display: none;
}

/* Style du message B2B : pilule crème (override des défauts module) */
:is(#registration, #checkout) .advb2bc-b2b-info-message {
    background: #FEF3E1;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #1A282C;
}
:is(#registration, #checkout) .advb2bc-b2b-info-message::before {
    content: none;
}

/* Paragraphe d'intro "Vous avez déjà un compte ?" centré */
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) > p {
    text-align: center;
    margin-bottom: 60px;
}
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) > p .fa-question-circle-o {
    display: none;
}

/* ============================================================
   PAGE COMPTE (:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) / .my-account-page-content-wrapper)
   Menu sidebar gauche : fond crème, radius 30, items 16/700/18,
   icones SVG 35×35 + gap 20 entre icone et texte.
   ============================================================ */

/* Layout 2 colonnes : menu sidebar 350px fixe + contenu 1 1 auto, gap 40px.
   On annule la mécanique row/col Bootstrap (margins négatives + paddings)
   pour avoir un layout flex propre. */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content-wrapper > .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    margin: 0;
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content-wrapper > .row > .my-account-side-links {
    flex: 0 0 350px;
    width: 350px;
    max-width: 350px;
    padding: 10px 0;
    align-self: flex-start;
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content-wrapper > .row > .my-account-page-content {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

/* Menu sidebar : background crème + radius.
   `border-right: 0` annule la séparation grise native PrestaShop
   (`.my-account-page-content-wrapper .my-account-side-links { border-right }`). */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links {
    background: #FEF3E1;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 30px;
    margin: 0 !important;
    gap: 0;
}

/* Liens : pleine largeur + padding latéral, font Raleway 16/700/18,
   sans bordure ni soulignement. */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-decoration: none;
    border: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links .link-item {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

/* Cache les icones FontAwesome natives (.fa) — remplacées par les SVG via
   ::before sur chaque lien identifiable. */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a .link-item > .fa { display: none; }

/* SVG icones 35×35 injectées avant le texte du lien via ::before sur le
   .link-item. Mapping par id du <a>. */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a .link-item::before {
    content: "";
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    background: center / contain no-repeat;
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#identity-link .link-item::before {
    background-image: url("/img/cms/Icones/icone-information.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > :is(a#address-link, a#addresses-link) .link-item::before {
    background-image: url("/img/cms/Icones/icone-adresses.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#history-link .link-item::before {
    background-image: url("/img/cms/Icones/icone-commandes.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#order-slips-link .link-item::before {
    background-image: url("/img/cms/Icones/icone-avoirs.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#discounts-link .link-item::before {
    background-image: url("/img/cms/Icones/icone-bons-de-reduction.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#returns-link .link-item::before {
    background-image: url("/img/cms/Icones/icone-retour-marchandise.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#advb2bc-withdrawal-link .link-item::before {
    background-image: url("/img/cms/Icones/formulaire-retractation.svg");
}
/* SVG inline natifs des items "Mon espace professionnel" + "Formulaire de
   rétractation" : masqués (l'icône SVG du site est injectée via `::before`). */
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > :is(a#advb2bc-account-link, a#advb2bc-withdrawal-link) .link-item > .advb2bc-icon {
    display: none;
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#identity-link[href*="psgdpr"] .link-item::before {
    background-image: url("/img/cms/Icones/icone-donnes-personnelles.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a[href*="mylogout"] .link-item::before {
    background-image: url("/img/cms/Icones/icone-deconnexion.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#iqitwishlist .link-item::before {
    background-image: url("/img/cms/Icones/liste-envie.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#emailsalerts .link-item::before {
    background-image: url("/img/cms/Icones/alerte.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#advb2bc-account-link .link-item::before {
    background-image: url("/img/cms/Icones/professionnel.svg");
}
:is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a#savedcards-link .link-item::before {
    background-image: url("/img/cms/Icones/cartes-enregistrees.svg");
}
/* Icône FA native (fa-circle-o) du lien "Cartes sauvegardées" : masquée
   fermement pour éviter le flash au chargement avant l'icône SVG ::before.
   Non scopé au :is() des pages compte pour s'appliquer au plus tôt. */
.my-account-side-links a#savedcards-link .fa {
    display: none !important;
}
#authentication .login-form .form-group.row > .js-input-column,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .js-input-column {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Labels : repris exactement du contact `.ets_cfu_input > label .ets_cfu_span`
   — Raleway 22/700/26, aligné droite. `white-space: normal` pour autoriser
   un wrap sur 2 lignes (ex : "Numéro d'identification fiscale" dans 200px). */
#authentication .login-form .col-form-label,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .col-form-label {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700 !important;
    line-height: 26px;
    color: #1A282C;
    text-align: right;
    white-space: normal;
    margin: 0;
    display: block;
}

/* Input-group (mot de passe + bouton œil) : on garde la pilule autour de
   l'ensemble, le bouton œil intégré à droite sans border supplémentaire */
#authentication .login-form .input-group,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .input-group {
    border: 1px solid #1A282C;
    border-radius: 30px;
    background: #FFFFFF;
    overflow: hidden;
}
#authentication .login-form .input-group .form-control,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .input-group .form-control {
    border: 0;
    height: 41px;
}
#authentication .login-form .input-group .btn-outline-secondary,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .input-group .btn-outline-secondary {
    border: 0;
    background: transparent;
    color: #1A282C;
    padding: 0 18px;
}


/* "Mot de passe oublié ?" : centré, Raleway */
#authentication .login-form .forgot-password {
    text-align: center;
    margin: 50px 0 0;
}
#authentication .login-form .forgot-password a {
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    text-decoration: none;
}

/* Bouton "Connexion" / "Enregistrer" : standard du site (pill noir 16/700,
   h42, padding 0 25, hover scale 0.97 + opacity 0.9). */
#authentication .login-form .form-control-submit,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit,
#authentication .login-form .form-control-submit:hover,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit:hover,
#authentication .login-form .form-control-submit:focus,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit:focus,
#authentication .login-form .form-control-submit:visited,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#authentication .login-form .form-control-submit,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
#authentication .login-form .form-control-submit:hover,
:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-control-submit:hover {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Masque le <hr> natif entre le formulaire et le bloc "Pas de compte ?" */
#authentication #content > hr,
#authentication .page-content > hr { display: none; }

/* Lien "Pas de compte ? Créez-en un" : Raleway propre, sans encart natif */
#authentication .no-account {
    text-align: center;
    margin-top: 20px;
}

/* ============================================================
   PAGE MOT DE PASSE OUBLIÉ (#password / .page-password)
   Réutilise le pattern de la page connexion ; ajoute le styling
   du form simple (label + input + bouton) et du lien retour.
   ============================================================ */

/* Paragraphe d'intro */
#password .send-renew-password-link {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    max-width: 640px;
    margin: 0 auto 40px;
}

/* Form : layout column, aligné à gauche, gap vertical */
#password .form-fields .form-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* Label : repris du contact (.ets_cfu_span) — 22/700!important/26, aligné gauche */
#password .form-fields .form-inline > label {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700 !important;
    line-height: 26px;
    color: #1A282C;
    margin: 0;
    text-align: left;
    display: block;
}

/* Input email : look "pilule blanche" comme contact, prend toute la largeur */
#password .form-fields .form-inline > .form-control {
    background: #FFFFFF;
    border: 1px solid #1A282C;
    border-radius: 30px;
    padding: 0 22px;
    height: 43px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #1A282C;
    box-shadow: none;
    outline: none;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
}
#password .form-fields .form-inline > .form-control::placeholder {
    color: #C6C9CA;
    opacity: 1;
}

/* Bouton submit : standard du site (pill noir 16/700, h 42) */
#password .form-fields .form-control-submit,
#password .form-fields .form-control-submit:hover,
#password .form-fields .form-control-submit:focus,
#password .form-fields .form-control-submit:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#password .form-fields .form-control-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: #1A282C;
    border-radius: 30px;
    padding: 0 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
#password .form-fields .form-control-submit:hover {
    transform: scale(0.97);
    opacity: 0.9;
}

/* HR caché entre form et lien retour */
#password #content > hr,
#password .page-content > hr { display: none; }

/* Lien "Retour à la connexion" : flèche SVG (gauche) + texte, centré, Raleway,
   utilise la même fleche-menu.svg que ::after du `.no-account` mais à gauche
   (transform rotate 180 pour pointer à gauche). */
#password #back-to-login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
#password #back-to-login .fa-angle-left { display: none; }
#password #back-to-login::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 10px;
    background: url("/img/cms/Icones/fleche-menu.svg") center / contain no-repeat;
    transform: rotate(180deg);
}
/* Container du lien (= <a id="back-to-login">) centré dans la page */
#password .page-content {
    text-align: center;
}
#authentication .no-account a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1A282C;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
/* Remplace l'icône FontAwesome `fa-angle-right` par le SVG fleche-menu. */
#authentication .no-account a .fa-angle-right { display: none; }
#authentication .no-account a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 10px;
    background: url("/img/cms/Icones/fleche-menu.svg") center / contain no-repeat;
}

/* === Gouttière #wrapper 30px (15px sous 500px) sur la page produit aussi === */

/* ============================================================
   RESPONSIVE — Tous les @media du fichier sont consolidés ici,
   en ordre DÉCROISSANT, un seul bloc par breakpoint.
   Tout nouvel override responsive doit être ajouté ICI.
   Voir .claude/config/design-conventions.md.
   ============================================================ */

@media (max-width: 1700px) {
    /* Page atelier : titre des catégories + titres tech-detail réduits à 50px */
    .page-cms-8 .atelier-cat-item {
        font-size: 50px;
    }
    .page-cms-8 .atelier-tech-detail-title .elementor-heading-title {
        font-size: 50px !important;
        line-height: 60px !important;
    }
}

@media (max-width: 1580px) {
    #footer-container-main .block-iqitlinksmanager .block-title {
        font-size: 20px;
        line-height: 24px;
    }

    #footer-container-main .block-iqitlinksmanager .block-content a {
        font-size: 18px;
        line-height: 22px;
    }
}

@media (max-width: 1500px) {
    .elementor-section.home-section-blog {
        padding-left: calc(30px + var(--lad-sbw, 0px) / 2) !important;
        padding-right: calc(30px + var(--lad-sbw, 0px) / 2) !important;
    }
    /* Page atelier : gap entre les 3 colonnes de .atelier-section-cats réduit */
    .page-cms-8 .atelier-section-cats .elementor-row {
        gap: 50px;
    }
    /* Arrows sliders produits + blog + catégorie page produit : -47.5 → -25.5px
       (moins de place sur les côtés) */
    .home-section-products .elementor-swiper-button-prev,
    .home-blog-cards .elementor-swiper-button-prev,
    .related-blog-cards .elementor-swiper-button-prev,
    #product .category-products .swiper-button-prev { left: -25.5px; }
    .home-section-products .elementor-swiper-button-next,
    .home-blog-cards .elementor-swiper-button-next,
    .related-blog-cards .elementor-swiper-button-next,
    #product .category-products .swiper-button-next { right: -25.5px; }
}

@media (max-width: 1480px) {
    /* Section blog : padding latéral réduit pour respirer moins largement
       sur les écrans entre 1480 et 991px. */
    .related-blog-inner { padding: 0 30px; }
}

@media (max-width: 1470px) {
    /* Page atelier hero col gauche : padding 80px → 30px */
    .page-cms-8 .atelier-hero-col-left > .elementor-element-populated {
        padding: 30px !important;
    }
}

@media (max-width: 1450px) {
    /* Contact : titre email/adresse réduit à 56px / line-height 65px (ratio desktop ≈ 1.16) */
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 56px;
        line-height: 65px;
    }
}

@media (max-width: 1420px) {
    #footer-container-brand > .container,
    #footer-container-main > .container,
    #footer-container-first > .container,
    #footer-copyrights > .container {
        padding-left: 30px;
        padding-right: 30px;
    }


    #footer-container-brand {
        padding: 0 0 50px;
    }

    #footer-container-main {
        padding-bottom: 50px;
    }

    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 40px !important;
    }

    #cbp-hrmenu .cbp-hrsub .menu_row {
        gap: 40px;
    }

    .menu-feature-card__text {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (max-width: 1350px) {
    /* Contact : titre email/adresse 45/55, gap formulaire réduit à 50px */
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 45px;
        line-height: 55px;
    }
    #contact .contact-form-block {
        gap: 50px;
    }
}

@media (max-width: 1320px) {
    #iqitmegamenu-horizontal .cbp-horizontal > ul {
        gap: 25px;
    }

    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 35px !important;
    }

    #cbp-hrmenu .cbp-hrsub .menu_row {
        gap: 30px;
    }

    .menu-feature-card__text {
        font-size: 26px;
        line-height: 31px;
    }
}

@media (max-width: 1300px) {
    /* Contact : marge haut du bloc info réduite à 80px */
    #contact .contact-info-block {
        margin-top: 80px;
    }

    /* Article : produits liés 4 → 3 colonnes, gap 50px → 30px */
    .lad-blog-related .lad-blog-related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    /* Page 404 : gap entre les 2 colonnes réduit */
    .lad-404 { gap: 100px; }

    /* Page produit : réduction des grands espacements (>80px) à 80px */
    #product .product-usps-band { margin-top: 80px; margin-bottom: 80px; }
    #product .product-tabs { margin-top: 80px; }
    #product .product-main-sections { gap: 80px; margin-bottom: 80px; }
    #product .category-products.block.block-section { margin-top: 80px; }
    #product .product-extracontent-section:has(.related-blog-posts) {
        padding: 80px 0;
    }
    /* Gap entre col image/info réduit à 30px */
    #product .product-info-row { gap: 30px; }

    /* Page atelier (cms-8) : tous les padding > 80px sur les sections passent à
       80px, et les padding latéraux 80px passent à 30px. Sélecteurs via classes
       custom plutôt que IDs Elementor pour rester stable. */
    .page-cms-8 .atelier-section-fondements-heading {
        padding-top: 80px !important;
    }
    .page-cms-8 .atelier-section-cards {
        padding-bottom: 80px !important;
    }
    .page-cms-8 .atelier-section-tech {
        padding-top: 80px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .page-cms-8 .atelier-section-tech-detail {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .page-cms-8 .atelier-section-full-image {
        padding-bottom: 80px !important;
    }
    .page-cms-8 .atelier-section-full-image > .elementor-container > .elementor-row > .elementor-col-100 > .elementor-element-populated {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .page-cms-8 .atelier-section-cats {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Grille produits : 3 colonnes + gap réduit à 30px (comme les sliders home) */
    #js-product-list .products.products-grid {
        margin-left: -15px;
        margin-right: -15px;
    }
    #js-product-list .products.products-grid > .js-product-miniature-wrapper {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 30px;
    }

    #footer-container-main > .container > .row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #footer-container-main > .container > .row > .col,
    #footer-container-main > .container > .row > [class*="col-"] {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }

    .section-top-accueil .elementor-row { gap: 70px; }
    .section-top-accueil { padding: 50px 37.5px 50px 37.5px !important; }
    .home-section-title-block { padding-top: 80px !important; }
    .home-section-selection { padding-bottom: 80px !important; }
    .home-section-bestsellers { padding-bottom: 100px !important; }
    .home-section-blog { padding-bottom: 80px !important; }
    .home-section-bloc-creme-wrap { padding-bottom: 100px !important; }
    .home-bloc-creme { padding: 30px !important; }
    .home-bloc-creme-text-col { padding-left: 50px !important; }
    /* Blog : 2 articles visibles au lieu de 3 — géré côté Swiper via le
       breakpoint 1300 ajouté dans custom.js (slidesPerView: 2 en 768→1299). */
    .home-section-blog .elementor-row { gap: 50px; }
    /* Banners : padding latéral 80 → 30 sur les 2 colonnes (top/bottom préservés) */
    .home-section-banners .home-banner-col > .elementor-element-populated {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    /* Carrousels produits (home + slider catégorie page produit) : padding slides
       25 → 15px (gap entre cards 50 → 30px), et marge négative du wrapper -25 → -15px
       en miroir pour garder les cards extrêmes alignées sur le bord de la section. */
    .home-products-carousel .swiper-slide,
    #product .category-products .swiper-slide {
        padding-left: 15px;
        padding-right: 15px;
    }
    .home-products-carousel .swiper-container-wrapper,
    #product .category-products .block-content {
        margin-left: -15px;
        margin-right: -15px;
    }
    /* Titres : home-grand-title (déplacé du 1200 d'origine) + home-banner-col-title */
    .home-grand-title .elementor-heading-title,
    .home-banner-col-title .elementor-heading-title {
        font-size: 46px !important;
        line-height: 1.2 !important;
    }
    /* Banners : hauteur de col 870 → 700px. Le JS (custom.js) recalcule au resize
       --lad-banner-travel et --lad-banner-reserve → l'arrêt à 40px du bouton
       reste exact, et la descente scroll-driven s'adapte automatiquement. */
    .home-section-banners .home-banner-col { min-height: 700px; }
}

@media (max-width: 1200px) {
    /* Pages compte (sauf inscription) : 3e col cachée par défaut (vide donc
       crée juste de l'espace blanc inutile), SAUF celles qui contiennent
       "Optionnel" (sous Date de naissance ET Nouveau mot de passe). Pour
       celles-ci, elles passent en dessous de la col input alignée 200px. */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .form-control-comment {
        display: none;
    }
    /* Sélecteur Type de compte (checkout) : sa 3e col vide `.col-md-2:last-child`
       n'est pas une `.form-control-comment` → on la masque ici aussi pour que le
       select s'étende et s'aligne sur les autres champs (dont le comment est
       masqué). */
    #checkout #advb2bc-account-type-selector.form-group.row > .col-md-2:last-child {
        display: none;
    }
    /* Notices reCAPTCHA / info B2B (checkout) : la 3e col étant masquée, on
       retire le margin-right 200px qui simulait son espace. */
    #checkout .advb2bc-recaptcha-notice,
    #checkout .advb2bc-b2b-info-message {
        margin-right: 0;
    }
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row:is(:has(#field-birthday), :has(#field-new_password), :has(#field-alias), :has(#field-company), :has(#field-vat_number), :has(#field-address2), :has(#field-phone)) {
        flex-wrap: wrap;
    }
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row:is(:has(#field-birthday), :has(#field-new_password), :has(#field-alias), :has(#field-company), :has(#field-vat_number), :has(#field-address2), :has(#field-phone)) > .form-control-comment {
        display: block;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 200px;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    /* Contact : titre email/adresse 35/45 */
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 35px;
        line-height: 45px;
    }
    /* Image gauche du formulaire : 497x646 → 400x520 (ratio conservé) */
    #contact .contact-form-img img {
        width: 400px;
        height: 520px;
    }
}

@media (max-width: 1130px) {
    #iqitmegamenu-horizontal .cbp-tab-title {
        font-size: 16px;
    }

    #desktop-header .header-top {
        padding-bottom: 30px;
    }

    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 30px !important;
    }

    #cbp-hrmenu .cbp-hrsub .menu_row {
        gap: 25px;
    }

    #cbp-hrmenu .cbp-hrsub .cbp-category-title {
        font-size: 16px;
        line-height: 18px;
    }

    .menu-feature-card__text {
        font-size: 22px;
        line-height: 26px;
    }
}

@media (max-width: 1100px) {
    #footer-container-brand .footer-brand-contact {
        padding-left: 50px;
    }
    .page-cms-8 .atelier-cat-item {
        font-size: 40px;
    }
}

@media (max-width: 1080px) {
    /* Contact : colonne label resserrée à 150px et 20px */
    #contact .ets_cfu_input > label .ets_cfu_span {
        flex: 0 0 150px;
        max-width: 150px;
        font-size: 20px;
    }
    /* Image oreiller (533x341 → 470x301, ratio conservé) */
    #contact .contact-info-img img {
        width: 470px;
        height: 301px;
    }
}

@media (max-width: 1050px) {
    #iqitmegamenu-horizontal .cbp-horizontal > ul {
        gap: 18px;
    }

    #footer-container-brand .footer-brand-contact p {
        font-size: 18px;
        line-height: 18px;
    }
}

@media (max-width: 1024px) {
    /* Page connexion : 3e col (hints) cachée à partir de 1024 */
    #authentication .login-form .form-group.row > .form-control-comment,
    #registration #advb2bc-account-type-selector.form-group.row > .col-md-2:last-child {
        display: none;
    }
    /* Notices reCAPTCHA / info B2B (checkout) : le form s'empile à 1024 (label
       au-dessus, full width) → on retire le margin-left 200px qui décalait la
       notice sous la colonne input. */
    #checkout .advb2bc-recaptcha-notice,
    #checkout .advb2bc-b2b-info-message {
        margin-left: 0;
    }
    /* Checkout : sélecteur Type de compte bascule en column (label au-dessus,
       aligné à gauche), comme les autres champs du form qui s'empilent à 1024.
       Sans ça, il restait en ligne jusqu'à 767px → gros décalage. */
    #checkout #advb2bc-account-type-selector.form-group.row {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px !important;
    }
    #checkout #advb2bc-account-type-selector.form-group.row > .col-md-2:first-child {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
    }
    #checkout #advb2bc-account-type-selector.form-group.row .form-control-label {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: left !important;
        white-space: normal;
        margin-bottom: 0;
        display: block;
    }
    #checkout #advb2bc-account-type-selector.form-group.row > .col-md-8 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #checkout #advb2bc-account-type-selector.form-group.row > .col-md-2:last-child {
        display: none;
    }
    /* Champ "Titre" (radio M./Mme) : sa 3e col `.form-control-comment` est
       vide → on la masque pour ne pas créer une ligne fantôme à 1024. */
    :is(#registration, #checkout) .form-group.row:has(> .js-input-column.form-control-valign) > .form-control-comment {
        display: none;
    }
    /* Annule le `padding-right: 230px` desktop (simulait la 3e col) quand
       le form bascule en column à 1024. On remet le padding-right Bootstrap
       natif (`.row > *`) pour aligner l'input sur les autres champs. */
    #registration .register-form .form-group.row:has(> .form-control-comment[style*="display: none"]) > .js-input-column,
    #checkout :is(#customer-form, #login-form) .form-group.row:has(> .form-control-comment[style*="display: none"]) > .js-input-column {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    /* Simule l'espace que prend le `.form-control-comment` (en dessous de
       l'input sur les autres champs) avec un margin-bottom sur le form-group
       — évite que le champ Société soit "collé" au suivant. */
    #registration .register-form .form-group.row:has(> .form-control-comment[style*="display: none"]),
    #checkout :is(#customer-form, #login-form) .form-group.row:has(> .form-control-comment[style*="display: none"]) {
        margin-bottom: 30px;
    }
    /* Pages compte (sauf inscription) : label au-dessus de l'input à 1024.
       Annule les margin négatifs Bootstrap du `.row` en direction column. */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
    }
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .col-form-label {
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
        white-space: normal;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .js-input-column {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* La 3e col (Optionnel) si visible suit le flux column, alignement gauche.
       `!important` pour battre la règle 1200 qui met margin-left: 200px +
       padding gutter Bootstrap via un sélecteur :is/:has avec spec supérieure. */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row > .form-control-comment {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left;
    }
    /* Form-group : margin-bottom 1rem → 10px pour les champs classiques,
       et 0 sur ceux qui contiennent une case à cocher. */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row {
        margin-bottom: 10px;
    }
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row:has(.custom-checkbox) {
        margin-bottom: 0;
    }
    /* Annule le padding-bottom hérité sur la 3e col "Optionnel" (sélecteur
       :is/:has avec spec supérieure → on conserve le même sélecteur). */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-group.row:is(:has(#field-birthday), :has(#field-new_password), :has(#field-alias), :has(#field-company), :has(#field-vat_number), :has(#field-address2), :has(#field-phone)) > .form-control-comment {
        padding-bottom: 0;
    }
    /* Bouton "Enregistrer" : margin-top pour le décoller des cases à cocher */
    :is(body.page-customer-account:not(.page-registration) :is(#customer-form, .address-form form), #checkout :is(#customer-form, #login-form, .js-address-form)) .form-control-submit {
        margin-top: 20px;
    }
    /* Page inscription : 3e col (hints / "Optionnel") passe en dessous de la
       col input à partir de 1024 (plutôt que cachée), alignée via offset
       margin-left = largeur du label (220px).
       Exclut les form-group de cases à cocher : leur 3e col reste cachée
       (elle est vide et provoquerait un débord visuel inutile). */
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row:not(:has(.custom-checkbox)) {
        flex-wrap: wrap;
    }
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row:not(:has(.custom-checkbox)) > .form-control-comment {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 220px;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row:has(.custom-checkbox) > .form-control-comment {
        display: none;
    }
    /* Notice reCAPTCHA + message B2B : plus de marge droite quand la 3e col
       est cachée */
    #registration .advb2bc-recaptcha-notice,
    #registration .advb2bc-b2b-info-message {
        margin-right: 0;
    }

    /* Page atelier — section cards : passe à 2 colonnes (50%) au lieu de 4 (25%).
       Le gap 30px de la row consomme de l'espace : chaque card fait
       calc(50% - 15px) pour que 2 cards + 1 gap = 100%. */
    .page-cms-8 .atelier-section-cards .elementor-row {
        flex-wrap: wrap;
    }
    .page-cms-8 .atelier-section-cards .atelier-card {
        width: calc(50% - 15px);
        max-width: calc(50% - 15px);
        flex: 0 0 calc(50% - 15px);
    }
    /* Section cats : gap liste réduit (50px → 40px) + gap row 40px */
    .page-cms-8 .atelier-cat-list {
        gap: 40px;
    }
    .page-cms-8 .atelier-section-cats .elementor-row {
        gap: 40px;
    }
}

@media (max-width: 991px) {
    /* Grille produits : 2 colonnes (comme les sliders home en 768-991) */
    #js-product-list .products.products-grid > .js-product-miniature-wrapper {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Page détail commande : à partir de 991, on bascule sur la version
       mobile native PrestaShop (`.hidden-md-up` blocs) puisque le JS du
       module déplace les checkboxes dans les spans `_mobile_product_line_*`
       à ce breakpoint. La version desktop (.hidden-sm-down) est cachée. */
    #order-detail .box.hidden-sm-down,
    #order-detail .table.hidden-sm-down {
        display: none !important;
    }
    #order-detail .order-items.hidden-md-up,
    #order-detail .order-totals.hidden-md-up,
    #order-detail .shipping-lines,
    #order-detail .history-lines {
        display: block !important;
    }
    /* Tableau historique d'état (#order-history) : version desktop cachée,
       version `.history-lines` visible */
    #order-detail #order-history .table.hidden-xs-down {
        display: none !important;
    }

    /* Pages compte : layout 2 cols → empilé à partir de 991. Menu en haut
       (flex-row wrap), contenu en bas. */
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content-wrapper > .row {
        flex-direction: column;
    }
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-page-content-wrapper > .row > .my-account-side-links {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links > a {
        width: auto;
        padding: 6px 15px;
    }
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) .my-account-side-links .link-item {
        gap: 15px;
    }

    /* Page atelier hero : les 2 colonnes s'empilent (col gauche puis col droite),
       chacune 100% width. */
    .page-cms-8 .atelier-section-hero .elementor-row {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .page-cms-8 .atelier-hero-col-left,
    .page-cms-8 .atelier-hero-col-right {
        width: 100%;
        max-width: 100%;
    }
    /* Retire le min-height: 540px (qui forçait la col gauche à 540px de haut
       pour aligner avec l'image en mode 2 cols) */
    .page-cms-8 .atelier-hero-col-left .elementor-widget-wrap {
        min-height: 0 !important;
    }
    /* Sous-titre poussé à 80px du titre (au lieu de margin-top:auto desktop
       qui colle au bas de la col 540px) */
    .page-cms-8 .atelier-hero-col-left .atelier-hero-subtitle {
        margin-top: 80px !important;
    }
    /* Section hero : margin-top réduit à 20px */
    .page-cms-8 .atelier-section-hero {
        margin-top: 20px !important;
    }
    /* Annule le max-width: 520px sur le texte hero (laisse prendre toute la
       largeur de la colonne empilée) */
    .page-cms-8 .atelier-hero-text {
        max-width: none;
    }

    /* Fiche produit : empilage image / infos, et sections desc/caracs en colonne */
    #product .product-info-row {
        flex-direction: column;
        gap: 30px;
    }
    #product .col-product-image,
    #product .col-product-info {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    /* Réduction des espacements verticaux/horizontaux : tout ce qui est > 80px
       desktop passe à 80px à ce breakpoint. */
    #product .product-usps-band { margin-top: 80px; margin-bottom: 80px; }
    #product .product-tabs { margin-top: 80px; }
    #product .product-main-sections { gap: 80px; margin-bottom: 80px; }
    #product .category-products.block.block-section { margin-top: 80px; }
    #product .product-extracontent-section:has(.related-blog-posts) {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .related-blog-inner { padding: 0 30px; }
    #product .product-main-sections {
        flex-direction: column;
        gap: 30px;
        margin-top: 50px;
    }
    #product .product-main-sections .product-details-section {
        width: 100%;
    }
    #product #main-product-wrapper {
        margin-top: 50px;
    }
    /* Thumbs sous l'image principale (au lieu d'à gauche) */
    #product .images-container .row.no-gutters {
        flex-direction: column;
        gap: 15px;
    }
    #product .col-left-product-cover {
        order: 1;
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }
    #product .col-left-product-thumbs {
        order: 2;
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }
    /* Thumbs : layout horizontal (row) au lieu de vertical. On neutralise le
       transform: translate3d() inline que Swiper applique en mode vertical (qui
       décalait visuellement les slides) — on n'a pas besoin de scroll Swiper
       sur mobile, les thumbs sont juste affichées en ligne. Et on annule le
       `margin: 0 -.5rem` du thème parent qui décalait le swiper-horizontal
       vers la gauche et coupait la 1ère thumb. */
    #product #product-images-thumbs.swiper-horizontal,
    #product #product-images-thumbs {
        margin: 0 !important;
    }
    #product #product-images-thumbs .swiper-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        transform: none !important;
    }
    #product #product-images-thumbs .swiper-slide {
        width: 102px !important;
        height: 136px !important;
    }
    /* Articles blog : padding vertical réduit + colonnes empilées en mobile */
    #product .product-extracontent-section:has(.related-blog-posts) {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 50px;
    }
    .related-blog-inner {
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
    }
    .related-blog-col-intro {
        flex: 1 1 auto;
        max-width: none;
    }
    .related-blog-col-intro .related-blog-title {
        font-size: 28px;
        line-height: 34px;
    }
    /* Contact : on empile les blocs 2 colonnes, on réduit le grand titre email */
    #contact .contact-info-block,
    #contact .contact-form-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    #contact .contact-info-block {
        margin-top: 30px;
        margin-bottom: 50px;
    }
    #contact .contact-info-text .page-title {
        margin-bottom: 30px;
    }
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 44px;
        line-height: 52px;
    }
    /* Image gauche : 465px, centrée */
    #contact .contact-form-img {
        margin-left: auto;
        margin-right: auto;
    }
    #contact .contact-form-img img {
        width: 465px;
        max-width: 100%;
        height: auto;
    }
    /* Image oreiller : masquée sous 991px (pas la place à côté du grand titre) */
    #contact .contact-info-img {
        display: none;
    }
    /* Formulaire : pleine largeur quand la section passe en colonne */
    #contact .contact-form-wrap {
        width: 100%;
    }

    /* Breadcrumb : plus de padding top sous 991px */
    #wrapper .breadcrumb {
        padding-top: 0;
    }

    #desktop-header .search-widget {
        max-width: none;
    }

    #footer-container-brand .footer-brand-logo img {
        width: 350px;
    }

    #footer::before {
        height: 300px;
    }

    #cbp-hrmenu .cbp-hrsub-inner {
        padding: 25px !important;
    }

    #cbp-hrmenu .cbp-hrsub .menu_row {
        gap: 20px;
    }

    .menu-feature-card__text {
        font-size: 18px;
        line-height: 22px;
    }

    /* ----- Header mobile : icônes uniquement, libellés masqués ----- */

    .col-mobile-menu-push #_mobile_iqitmegamenu-mobile {
        width: 375px;
    }

    /* ----- Mobile menu : header sombre + croix custom -------------- */

    #iqitmegamenu-mobile .mobile-menu__header-wrapper {
        background: #1A282C;
        min-height: 50px;
        align-items: center;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #iqitmegamenu-mobile .mobile-menu__scroller {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* ----- Mobile menu : items principaux (1ère fenêtre) -------- */

    #iqitmegamenu-mobile .mobile-menu__link {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 21px;
    }

    #iqitmegamenu-mobile .mobile-menu__arrow {
        padding-top: 0;
        padding-bottom: 0;
    }

    #iqitmegamenu-mobile .mobile-menu__tab {
        min-height: 35px;
        margin-bottom: 10px;
    }

    /* Flèche des items avec sous-menu */
    #iqitmegamenu-mobile .mobile-menu__arrow .fa-angle-right::before {
        content: "";
    }

    #iqitmegamenu-mobile .mobile-menu__arrow .fa-angle-right {
        display: inline-block;
        width: 7.71px;
        height: 12.59px;
        background: url('/img/cms/Icones/fleche-menu.svg') center / contain no-repeat;
    }

    /* ----- Mobile menu : sous-catégories (2ème fenêtre) --------- */

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column-title {
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 0;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column-categories:not(:last-child) {
        margin-bottom: 20px;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column {
        margin-bottom: 20px;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column:last-child {
        margin-bottom: 10px;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column:has(.menu-feature-card) p {
        margin-bottom: 0;
    }

    /* Pousser les 2 dernières colonnes (cartes images) en bas du panel
       (uniquement quand le panel est actif, sinon il doit rester display:none) */
    #iqitmegamenu-mobile .mobile-menu__submenu--panel.mobile-menu__submenu--active {
        display: flex !important;
        flex-direction: column;
        min-height: 100%;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__row {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column:nth-last-child(2) {
        margin-top: auto;
        padding-top: 50px;
    }

    /* Cartes "best sellers" / "projet à personnaliser" dans le menu mobile */
    #iqitmegamenu-mobile .menu-feature-card {
        height: 110px;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    #iqitmegamenu-mobile .menu-feature-card__text {
        font-size: 18px;
        font-weight: 500;
        line-height: 21px;
    }

    #iqitmegamenu-mobile .mobile-menu__close {
        padding: 0;
        display: flex;
        align-items: center;
    }

    #iqitmegamenu-mobile .mobile-menu__close .fa-times::before {
        content: "";
    }

    #iqitmegamenu-mobile .mobile-menu__close .fa-times {
        display: inline-block;
        width: 27px;
        height: 27px;
        background: url('/img/cms/Icones/icone-croix-menu.svg') center / contain no-repeat;
    }

    #iqitmegamenu-mobile .mobile-menu__back-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    #iqitmegamenu-mobile .mobile-menu__back-btn .fa-angle-left::before {
        content: "";
    }

    #iqitmegamenu-mobile .mobile-menu__back-btn .fa-angle-left {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 !important;
        background: url('/img/cms/Icones/fleche-retour-menu.svg') center / contain no-repeat;
    }

    #iqitmegamenu-mobile .mobile-menu__header--active {
        display: flex;
        align-items: center;
    }

    #iqitmegamenu-mobile .mobile-menu__title {
        font-size: 12px;
        font-weight: 600;
        line-height: 14px;
        color: #FFFFFF;
    }

    #mobile-header-sticky > .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    #mobile-header .m-nav-btn {
        padding: 0;
    }

    #mobile-header .row-mobile-header {
        gap: 20px;
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }

    #mobile-header .m-nav-btn > span {
        display: none !important;
    }

    /* Remplace les glyphes FontAwesome par les SVG dédiés */
    #mobile-header .col-mobile-btn-menu .m-nav-btn .fa-bars::before,
    #mobile-header .col-mobile-btn-search .m-nav-btn .fa-search::before,
    #mobile-header .col-mobile-btn-account .m-nav-btn .fa-user::before,
    #mobile-header .col-mobile-btn-cart .m-nav-btn .fa-shopping-bag::before {
        content: "";
    }

    #mobile-header .col-mobile-btn-menu .m-nav-btn .fa-bars,
    #mobile-header .col-mobile-btn-search .m-nav-btn .fa-search,
    #mobile-header .col-mobile-btn-account .m-nav-btn .fa-user,
    #mobile-header .col-mobile-btn-cart .m-nav-btn .fa-shopping-bag {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }

    #mobile-header .col-mobile-btn-menu .m-nav-btn .fa-bars {
        background-image: url('/img/cms/Icones/icone-menu-responsive.svg');
    }

    #mobile-header .col-mobile-btn-search .m-nav-btn .fa-search {
        background-image: url('/img/cms/Icones/icone-search-responsive.svg');
    }

    #mobile-header .col-mobile-btn-account .m-nav-btn .fa-user {
        background-image: url('/img/cms/Icones/icone-compte-responsive.svg');
    }

    #mobile-header .col-mobile-btn-cart .m-nav-btn .fa-shopping-bag {
        background-image: url('/img/cms/Icones/icone-panier-responsive.svg');
    }

    /* Badge compteur panier (réutilise le style desktop) */
    #mobile-header .col-mobile-btn-cart .cart-products-count-btn {
        position: absolute;
        top: -7px;
        right: -7px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 999px;
        background: white;
        color: black;
        font-size: 12px;
        font-weight: 900;
        font-family: inherit;
        line-height: 18px;
        text-align: center;
        display: inline-block;
    }

    .page-cms-8 .atelier-section-tech-detail > .elementor-container > .elementor-row {
        padding-bottom: 60px;
    }

    .page-cms-8 .atelier-section-hero .elementor-row {
        flex-direction: column;
    }
    .page-cms-8 .atelier-hero-col-right .elementor-image img {
        height: 320px;
        min-height: 320px;
    }
    .page-cms-9 .atelier-av-dark-col-left .elementor-image {
        margin-top: -60px;
    }

    .home-section-banners .elementor-row { flex-direction: column; }
    .home-section-banners .elementor-col-50 { width: 100% !important; }
    .home-banner-card { min-height: 380px; }
    .home-banner-content { min-height: 380px; padding: 50px 25px; }
    .home-banner-title { font-size: 34px; }

    .home-bloc-creme .elementor-row { flex-direction: column; gap: 30px; }
    .home-bloc-creme .elementor-col-33,
    .home-bloc-creme .elementor-col-66 { width: 100% !important; }
    /* img-col en full largeur (override le 480px du desktop) */
    .home-bloc-creme-img-col {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* text-col : on enlève le padding-left (était 50px à 1300, 80px au desktop) */
    .home-bloc-creme-text-col { padding-left: 0 !important; }
    /* Titres : home-grand-title + home-banner-col-title → 46 → 36px à 991 */
    .home-grand-title .elementor-heading-title,
    .home-banner-col-title .elementor-heading-title {
        font-size: 36px !important;
    }
    /* Le parent flex (.elementor-image) doit aussi être en 100% width,
       sinon il shrink à la taille naturelle de l'img et width:100% sur l'img n'a pas d'effet. */
    .home-bloc-creme-img-col .elementor-image { width: 100%; }
    .home-bloc-creme-img-col .elementor-image img {
        width: 100% !important;
        height: 480px !important;
        object-fit: cover;
        border-radius: 20px 20px 0 0;
    }

    .home-section-blog .elementor-row { flex-direction: column; }
    .home-section-blog .elementor-col-33,
    .home-section-blog .elementor-col-66 { width: 100% !important; }
    /* Annule la contrainte 350px max + le padding-top du desktop sur la col intro */
    .home-blog-col-intro {
        flex: 1 1 auto;
        max-width: 100%;
        padding-top: 0;
    }

    .section-top-accueil { padding-top: 0 !important; }
    .section-top-accueil .elementor-row {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
    }
    .section-top-accueil .column-left-top-accueil { flex: 0 1 auto; }
    .section-top-accueil .column-right-top-accueil { flex: 1; }
    .section-top-accueil .column-right-top-accueil .elementor-image img { width: 600px; }

    /* Hero blog : marges verticales réduites en mobile/tablette */
    .lad-blog-hero { margin: 50px 0 70px; }
    /* Listing blog : 3 colonnes → 2 colonnes */
    .lad-blog-listing .simpleblog__listing .row {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Single article : margin-top réduit en tablette + header/cover plus serrés */
    .lad-blog-single { margin-top: 50px; }
    .lad-blog-single-cover { margin-bottom: 30px; }
    .lad-blog-single-header { margin-bottom: 30px; }
    /* Produits liés : 3 → 2 colonnes */
    .lad-blog-related .lad-blog-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 404 : passe en 1 colonne, images au-dessus (largeurs proportionnelles),
       puis texte aligné à gauche. */
    .lad-404 {
        flex-direction: column;
        gap: 40px;
        margin: 30px 0 0;
    }
    .lad-404-col-images {
        width: 100%;
        gap: 20px;
    }
    .lad-404-img:nth-child(1) { width: 80%; }
    .lad-404-img:nth-child(2) { width: 100%; }
    .lad-404-col-text { text-align: left; }
    .lad-404-title { margin-right: auto; }
    .lad-404-intro {
        max-width: none;
        text-align: left;
    }
    /* Section pourquoi : empilée en tablette/mobile, les 2 cols pleine largeur */
    .page-cms-9 .atelier-av-section-pourquoi .elementor-row {
        flex-direction: column;
    }
    .page-cms-9 .atelier-av-pourquoi-col-left,
    .page-cms-9 .atelier-av-pourquoi-col-right {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 100%;
    }
    /* Section dark : repasse en 50/50 avec gap fixe 50px, plus de min-width */
    .page-cms-9 .atelier-av-section-dark .elementor-row {
        gap: 50px;
    }
    /* Compte pro : champs en 2 colonnes (col-md-6) passent en pleine largeur */
    #module-advanced_b2b_b2c-account .panel-body > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Liste d'envies : image + nom sur ligne 1, prix + qty + remove sur ligne 2.
       `._name` prend au moins 50% et grow → le total image + nom > 100%
       sans wrap, et tout ce qui suit (prix + add-to-cart + remove) wrap
       automatiquement et reste côte-à-côte sur la ligne 2. */
    #module-iqitwishlist-view .iqitwishlist-product .row {
        flex-wrap: wrap;
        row-gap: 15px;
    }
    #module-iqitwishlist-view .iqitwishlist-product ._name {
        flex: 1 0 calc(100% - 104px) !important;
        max-width: none !important;
        min-width: 0;
    }
    /* Page connexion / mot de passe / inscription : padding-top main réduit
       en tablette + h1 margin-bottom 40 + forgot-password margin-top 40
       (sauf #registration qui garde son margin-bottom 20px desktop). */
    #authentication #main,
    #password #main,
    #registration #main,
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #main { padding-top: 80px; }
    /* Page panier : padding-top + h1 réduits + gap entre cols stackées */
    #cart #main { padding-top: 80px; }
    #cart #content-wrapper .page-title { margin-bottom: 40px; }
    #cart .cart-grid.row { --bs-gutter-y: 30px; }
    /* Page commande / checkout : padding-top + h1 réduits */
    #checkout #main { padding-top: 80px; }
    #checkout #content-wrapper .page-title { margin-bottom: 40px; }
    /* Page confirmation : padding-top réduit + 2 cols stackées */
    #order-confirmation #content-wrapper { padding-top: 80px; }
    /* Pages CMS génériques : padding-top + h1 margin-bottom réduits */
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #main { padding-top: 80px; }
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #content-wrapper .page-header .page-title { margin-bottom: 40px; }
    #order-confirmation #content-hook_order_confirmation > .row > .col-md-7,
    #order-confirmation #content-hook_order_confirmation > .row > .col-md-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #order-confirmation #content-hook_order_confirmation > .row { --bs-gutter-y: 30px; }
    /* Force les 2 cols du checkout (étapes col-md-8 / résumé col-md-4) à
       passer en pleine largeur à partir de 991 (au lieu d'attendre le
       breakpoint md natif à 768). */
    #checkout #main > .row > .col-md-8,
    #checkout #main > .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Case "Utiliser aussi cette adresse pour la facturation" : passe en
       pleine largeur (annule l'offset col-md-3) */
    body#checkout .checkout-step .js-address-form .form-group.row > .col-md-9.col-md-offset-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }
    #authentication #content-wrapper .page-header .page-title,
    #password #content-wrapper .page-header .page-title,
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #content-wrapper .page-header .page-title {
        margin-bottom: 40px;
    }
    #authentication .login-form .forgot-password { margin-top: 40px; }
    /* Section "Solutions adaptées" : gap 90 → 40 pour éviter d'écraser le contenu */
    .section-solutions-adaptees .elementor-row {
        gap: 40px;
    }
    /* Section "Fabricant à vos côtés" : 2 cols empilées pleine largeur à partir
       de 991 (pattern display: block sur la row pour éviter le stretch flex).
       Bouton CTA centré. */
    .elementor-row:has(> .column-fabricant-left) {
        display: block !important;
    }
    .column-fabricant-left,
    .column-fabricant-right {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }
    .column-fabricant-left { margin-bottom: 40px; }
    .column-fabricant-left .atelier-av-dark-cta .elementor-button-wrapper {
        text-align: center;
    }
    .page-cms-9 .atelier-av-dark-col-left,
    .page-cms-9 .atelier-av-dark-col-right {
        flex: 1 1 0;
        width: auto !important;
        max-width: none;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .page-cms-8 .atelier-cat-item { font-size: 32px; }
}

@media (max-width: 870px) {
    /* Section pourquoi : padding-bottom desktop 340 → 280 */
    .page-cms-9 .atelier-av-section-pourquoi { padding-bottom: 280px !important; }
}

@media (max-width: 780px) {
    /* Section pourquoi : padding-bottom 280 → 200 */
    .page-cms-9 .atelier-av-section-pourquoi { padding-bottom: 200px !important; }
}

@media (max-width: 768px) {
    /* Annule la règle native `.btn { width: 100% }` à 768 sur la page compte
       pro UNIQUEMENT. Bloc 768 (et non 767) pour couvrir le pixel 768 exact
       où la règle native se déclenche. */
    #module-advanced_b2b_b2c-account .btn {
        width: auto !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    /* H1 global : 25px extrabold, line-height 30px.
       Les titres de bannière (font posée sur le span, sélecteur plus spécifique)
       ne sont pas impactés. */
    h1 {
        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 30px !important;
    }
    /* Étapes du checkout (h1.step-title) : on garde le rendu desktop
       (18/700/22) en ignorant la règle globale `h1` ci-dessus. */
    #checkout .checkout-step h1.step-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
    }
    /* Cards adresses du tunnel : 1 par ligne en mobile (annule le
       `flex: 0 0 49%` natif). */
    #checkout .address-selector > .address-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Annule le `margin: 12px 0 0 0` natif sur le wrapper purchase order */
    #js-checkout-summary .advb2bc-purchase-order-wrapper.advb2bc-po-position-bottom,
    .card-block .advb2bc-purchase-order-wrapper.advb2bc-po-position-bottom,
    .cart-summary .advb2bc-purchase-order-wrapper.advb2bc-po-position-bottom {
        margin-top: 0 !important;
    }
    /* Récap paiement : à partir de 767 les 2 address-block s'empilent →
       on remet un gap vertical entre eux. */
    #checkout #order-summary-content .row:has(> .col-md-6 .address-block) {
        --bs-gutter-y: 15px;
    }
    /* Page formulaire de rétractation : `.withdrawal-no-orders` bascule en
       column avec icône en haut centrée + texte centré (au lieu de l'icône
       en haut à gauche + texte à droite qui paraît déséquilibré). */
    #module-advanced_b2b_b2c-withdrawal .withdrawal-no-orders.alert.alert-warning {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* Sélecteur Type de compte (#registration + #checkout) : bascule en
       column avec label au-dessus aligné à gauche, comme les autres
       `.form-group.row` du form. */
    :is(#registration, #checkout) #advb2bc-account-type-selector.form-group.row {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px !important;
    }
    :is(#registration, #checkout) #advb2bc-account-type-selector.form-group.row > .col-md-2:first-child {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
    }
    :is(#registration, #checkout) #advb2bc-account-type-selector.form-group.row .form-control-label {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: left !important;
        white-space: normal;
        font-size: 18px !important;
        margin-bottom: 0;
        display: block;
    }
    :is(#registration, #checkout) #advb2bc-account-type-selector.form-group.row > .col-md-8 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* H2 global : 20px semibold 24px, alignés au centre. Certains h2 ont leur
       texte dans un <span> enfant qui porte son propre style — on cible l'h2
       ET le span direct. On exclut .product-title (h2 dans les miniatures
       produits) qui garde son style spécifique (16px / 500). */
    h2:not(.product-title):not(.product-title *) {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        text-align: center !important;
    }
    h2:not(.product-title) > span {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        text-align: center !important;
    }
    /* Widgets Elementor heading qui contiennent un h2 (PAS un h1) : on force
       l'alignement center sur le h2 / son span. Spécificité augmentée avec
       `.elementor-element.elementor-widget-heading` pour battre la règle
       générée par le setting `align: "left"` du widget.
       En plus, on rend le bloc h2 lui-même centré : width fit-content + margin
       auto, pour que la 1ère ligne ne paraisse pas alignée à gauche quand le
       texte ne fait qu'une ligne ou un bloc plus étroit que le parent. */
    .elementor-element.elementor-widget-heading h2.elementor-heading-title,
    .elementor-element.elementor-widget-heading h2.elementor-heading-title > span {
        text-align: center !important;
    }
    .elementor-element.elementor-widget-heading h2.elementor-heading-title {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Annule max-width: 200px sur .home-blog-title qui empêchait le centrage
       (le wrapper forçait le H2 à wrap dans 200px → texte aligné à gauche) */
    .home-blog-title {
        max-width: none !important;
    }
    /* Tous les blocs de 3 dots décoratifs : centrés. Spécificité augmentée pour
       battre l'inline style="text-align:left" et les règles widget Elementor. */
    .elementor-element.elementor-widget-html .home-dots,
    .elementor-widget-container .home-dots,
    .home-dots,
    #product .home-dots,
    .related-blog-col-intro .home-dots,
    #product .category-products .home-dots-center {
        text-align: center !important;
    }
    /* Restaure le style des h2 .product-title dans les miniatures produits */
    .product-miniature .product-title,
    .product-miniature .product-title a,
    .product-miniature h2.product-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }
    /* Annule le margin-top: 2rem du thème parent sur .col-left-product-thumbs
       (les thumbs sont déjà sous le cover via flex column + gap 15px du
       breakpoint 991). Force aussi width/height des thumbs à 102×136 pour
       éviter le débordement/coupure des images. */
    #product .col-left-product-thumbs {
        margin-top: 0 !important;
    }
    /* Annule margin-bottom: 1rem du thème parent sur .product-cover en mobile */
    #product .images-container-d-leftd .product-cover,
    #product .product-cover {
        margin-bottom: 0 !important;
    }
    #product #product-images-thumbs .swiper-slide {
        width: 102px !important;
        height: 136px !important;
        flex: 0 0 102px !important;
        max-width: 102px !important;
    }
    #product #product-images-thumbs .thumb-container,
    #product #product-images-thumbs .thumb-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Contact : h1 25/30 extrabold (le span garde sa taille → on l'écrase aussi) */
    #contact .contact-info-text .page-title,
    #contact .contact-info-text .page-title span {
        font-size: 25px;
        line-height: 30px;
    }

    /* Fiche produit : h1 25/30, variants empilés (label au-dessus), grille 1 col en bas */
    #product .col-product-info .product_header_container .page-title,
    #product .col-product-info .product_header_container .page-title span {
        font-size: 25px;
        line-height: 30px;
    }
    #product .product-variants-item .form-control-label {
        flex: none;
        max-width: none;
        text-align: left;
    }
    /* Contact : labels au-dessus des champs (plus de colonne label) */
    #contact .ets_cfu_input > label {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    #contact .ets_cfu_input > label .ets_cfu_span {
        flex: none;
        width: auto;
        max-width: none;
        text-align: left;
        white-space: normal;
        font-size: 18px;
    }
    /* Wrap du champ : 100% width quand on est en colonne */
    #contact .ets_cfu_input > label > .ets_cfu_form-control-wrap {
        width: 100%;
    }
    /* Titre email/adresse fluide : 6vw / 7vw (ratio desktop ≈ 1.16) */
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 6vw;
        line-height: 7vw;
    }
    /* Neutralise le margin-top: 15px que le module pose sur le bouton submit en mobile */
    .ets_cfu_input_submit.ets_cfu_input {
        margin-top: 0;
    }
    /* Marge bas du bloc info resserrée sur mobile */
    #contact .contact-info-block {
        margin-bottom: 30px;
    }
    /* Espacement vertical entre champs réduit sur mobile */
    #contact .ets_cfu_input {
        margin-bottom: 15px;
    }
    #contact .ets_cfu_input_html > label,
    #contact .ets_cfu_input_acceptance > label {
        padding-left: 0;
    }
    /* Titres de bannière : la police est sur le span (35px) → on l'écrase aussi
       pour suivre le h1 global (catégorie + best-sales/promos/new/recherche). */
    .category-image #js-product-list-header .h1.page-title,
    .category-image #js-product-list-header .h1.page-title span,
    #best-sales #js-product-list-header span,
    #prices-drop #js-product-list-header span,
    #new-products #js-product-list-header span,
    #module-iqitsearch-searchiqit #js-product-list-header span {
        font-size: 25px;
        font-weight: 800;
        line-height: 30px;
    }

    /* Grille produits : 1 colonne (comme les sliders home sous 768), marge bas 20px */
    #js-product-list .products.products-grid > .js-product-miniature-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }

    /* Bannière catégorie : titre rapproché du bord gauche */
    .category-image #js-product-list-header {
        left: 60px;
    }
    /* Bannières best-sales / promos / new / recherche : padding gauche réduit
       pour suivre la bannière catégorie (left 60px). */
    #best-sales #js-product-list-header,
    #prices-drop #js-product-list-header,
    #new-products #js-product-list-header,
    #module-iqitsearch-searchiqit #js-product-list-header {
        padding-left: 60px;
    }

    #footer::before {
        height: 250px;
    }

    #footer-container-main > .container > .row > .col,
    #footer-container-main > .container > .row > [class*="col-"] {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    #footer-container-brand > .container > .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    #footer-container-brand .footer-brand-logo {
        align-self: flex-start;
        text-align: left;
    }

    #footer-container-brand .footer-brand-contact {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    #footer-copyrights .footer-legal-links {
        gap: 10px;
    }

    #footer-copyrights .footer-legal-links li {
        padding-right: 10px;
    }

    .page-cms-8 .atelier-section-tech-detail > .elementor-container > .elementor-row {
        padding-bottom: 50px;
    }

    /* Sections tech : annule le max-width 570px sur les cols droite */
    .atelier-tech-col-right,
    .atelier-tech-detail-col-right {
        max-width: none;
    }
    .page-cms-8 .atelier-hero-title .elementor-heading-title {
        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 30px !important;
    }
    .page-cms-8 .atelier-tech-detail-title .elementor-heading-title {
        font-size: 30px !important;
        line-height: 30px !important;
        margin-bottom: 20px;
    }

    /* Section cats : gap row 20px + wrap */
    .page-cms-8 .atelier-section-cats .elementor-row {
        gap: 20px;
        flex-wrap: wrap;
    }
    /* Image pleine largeur + images des 2 colonnes catégories : 300px de haut + crop.
       !important pour battre le height: auto !important du desktop sur cat-col-img. */
    .page-cms-8 .atelier-full-image .elementor-image img,
    .page-cms-8 .atelier-cat-col-img .elementor-image img {
        height: 300px !important;
        object-fit: cover;
    }

    .page-cms-9 .atelier-av-confort-title .elementor-heading-title,
    .page-cms-9 .atelier-av-engagements-title .elementor-heading-title {
        font-size: 30px !important;
        line-height: 35px !important;
    }
    /* Exclut confort-title, engagements-title et home-grand-title des règles
       globales h2 à 767 :
       - `h2:not(.product-title) > span { 20/600/24/center }` (span)
       - `.elementor-element.elementor-widget-heading h2 (+ > span) { text-align: center }` (h2 ET span)
       Les spans héritent font-size/weight/line-height du h2 parent (cf. règle
       suivante). Text-align : confort-title left, engagements-title center,
       home-grand-title right (cf. règle dédiée plus bas). */
    .page-cms-9 .atelier-av-confort-title h2.elementor-heading-title,
    .page-cms-9 .atelier-av-confort-title h2.elementor-heading-title > span {
        text-align: left !important;
    }
    .page-cms-9 .atelier-av-engagements-title h2.elementor-heading-title,
    .page-cms-9 .atelier-av-engagements-title h2.elementor-heading-title > span {
        text-align: center !important;
    }
    .page-cms-9 .atelier-av-confort-title h2.elementor-heading-title > span,
    .page-cms-9 .atelier-av-engagements-title h2.elementor-heading-title > span {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
    /* titre-qualite-francais : même traitement que confort-title (30/35 +
       exclusion des règles globales h2), mais text-align: right. Spec montée
       à `.elementor-element.titre-qualite-francais` (0,3,2) pour battre les
       règles globales `.elementor-element.elementor-widget-heading h2 { center }`
       et `h2:not(.product-title):not(.product-title *) { 20/600/24/center }`. */
    .elementor-element.titre-qualite-francais h2.elementor-heading-title {
        font-size: 30px !important;
        line-height: 35px !important;
    }
    .elementor-element.titre-qualite-francais h2.elementor-heading-title,
    .elementor-element.titre-qualite-francais h2.elementor-heading-title > span {
        text-align: right !important;
    }
    .elementor-element.titre-qualite-francais h2.elementor-heading-title > span {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
    /* Section "Qualité française" : hauteur réduite en mobile */
    .section-qualite-francais { height: 450px; }
    /* Section "Solutions adaptées" : 3 cols empilées en blocs (cf. pattern
       section dark, display: block sur la row pour éviter le stretch flex). */
    .section-solutions-adaptees .elementor-row {
        display: block !important;
    }
    .section-solutions-adaptees .elementor-row > .elementor-column {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 40px;
    }
    .section-solutions-adaptees .elementor-row > .elementor-column:last-child {
        margin-bottom: 0;
    }
    /* Liste d'icones : gap réduit 90 → 30 en mobile + label 22 → 20 */
    .lad-icon-list { gap: 30px; }
    .lad-icon-item-label {
        font-size: 20px;
        line-height: 24px;
    }
    /* Compte pro : description sous chaque card de profil — hauteur min pour
       éviter que les cards aient des hauteurs différentes selon le texte */
    #module-advanced_b2b_b2c-account .profile-cards > .profile-card-selectable .text-muted {
        min-height: 30px;
    }
    /* Liste d'envies : annule le wrap forcé du bloc 991, tout repasse sur
       une seule ligne (annule `flex: 1 0 calc(100% - 104px)`). */
    #module-iqitwishlist-view .iqitwishlist-product .row {
        flex-wrap: nowrap;
        row-gap: 0;
    }
    #module-iqitwishlist-view .iqitwishlist-product ._name {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0;
    }
    /* Page connexion / mot de passe / inscription : padding-top main +
       h1 margin-bottom + forgot-password encore réduits en smartphone
       (sauf #registration qui garde son margin-bottom 20px desktop). */
    #authentication #main,
    #password #main,
    #registration #main,
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #main { padding-top: 50px; }
    /* Page panier : padding-top + h1 encore réduits en smartphone */
    #cart #main { padding-top: 50px; }
    #cart #content-wrapper .page-title { margin-bottom: 30px; }
    /* Page commande / checkout : padding-top + h1 encore réduits */
    #checkout #main { padding-top: 50px; }
    #checkout #content-wrapper .page-title { margin-bottom: 30px; }
    /* Page confirmation : padding-top encore réduit */
    #order-confirmation #content-wrapper { padding-top: 50px; }
    /* Pages CMS génériques : padding-top + h1 + h2 encore réduits */
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #main { padding-top: 50px; }
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #content-wrapper .page-header .page-title { margin-bottom: 30px; }
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content h2 {
        font-size: 18px !important;
        line-height: 24px !important;
        margin-top: 30px !important;
    }
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) .rte-content {
        font-size: 14px;
        line-height: 22px;
    }
    #authentication #content-wrapper .page-header .page-title,
    #password #content-wrapper .page-header .page-title,
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #content-wrapper .page-header .page-title {
        margin-bottom: 30px;
    }
    #authentication .login-form .forgot-password { margin-top: 30px; }
    /* Page connexion / inscription : label au-dessus de l'input, alignement gauche.
       En direction column les margin négatives -12px du `.row` Bootstrap ne sont
       plus compensées par les paddings des cols → on les neutralise pour éviter
       le débord horizontal. */
    #authentication .login-form .form-group.row,
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row,
    #registration #advb2bc-account-type-selector.form-group.row {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
    }
    /* "Optionnel" / hints : alignés à gauche en mobile (le natif PS les centre) */
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .form-control-comment {
        text-align: left;
    }
    /* Paragraphe d'intro "Vous avez déjà un compte ?" : margin bottom réduit */
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) > p {
        margin-bottom: 30px;
    }
    /* Annule les padding-left/right `calc(var(--bs-gutter-x) * .5)` natifs
       Bootstrap sur tous les enfants des form-group.row (utiles uniquement
       quand on est en row direction). */
    #authentication .login-form .form-group.row > *,
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > *,
    #registration #advb2bc-account-type-selector.form-group.row > * {
        padding-left: 0;
        padding-right: 0;
    }
    #authentication .login-form .form-group.row > .col-form-label,
    body#authentication .login-form .form-group.row > .col-form-label,
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .col-form-label,
    body:is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .col-form-label {
        flex: none;
        width: 100%;
        max-width: 100%;
        text-align: left !important;
        white-space: normal;
        font-size: 18px;
        margin-bottom: 0;
        display: block;
    }
    /* Label page mot de passe : même traitement 22 → 18 en mobile */
    #password .form-fields .form-inline > label {
        font-size: 18px;
    }
    /* Notice reCAPTCHA + message B2B : pleine largeur en mobile */
    #registration .advb2bc-recaptcha-notice,
    #registration .advb2bc-b2b-info-message {
        margin-left: 0;
        margin-right: 0;
    }
    /* Form-group : margin-bottom 1rem → 10px en mobile pour les champs
       classiques, et 0 sur ceux qui contiennent une case à cocher (la spec
       :has() bat la règle plus haut grâce à la classe interne ajoutée). */
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row {
        margin-bottom: 10px;
    }
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row:has(.custom-checkbox) {
        margin-bottom: 0;
    }
    /* Champ "Type de compte" : empilé en mobile comme les autres */
    #registration #advb2bc-account-type-selector.form-group.row {
        flex-direction: column;
        align-items: stretch;
    }
    #registration #advb2bc-account-type-selector.form-group.row > .col-md-2,
    #registration #advb2bc-account-type-selector.form-group.row > .col-md-8 {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #registration #advb2bc-account-type-selector.form-group.row .form-control-label {
        text-align: left;
        white-space: normal;
        font-size: 18px;
    }
    #authentication .login-form .form-group.row > .js-input-column,
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .js-input-column {
        width: 100%;
    }
    /* En mobile : on cache toutes les 3e cols (qui sont vides pour la plupart
       et créent juste un espace blanc) SAUF celle du champ Date de naissance
       qui contient le mot "Optionnel". Pour celle-ci on garde l'affichage et
       on annule l'offset 220px hérité du bloc 1024. */
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row > .form-control-comment {
        display: none;
    }
    :is(#registration .register-form, .page-customer-account :is(#customer-form, .address-form form), #checkout #customer-form, #checkout #login-form) .form-group.row:has(#field-birthday) > .form-control-comment {
        display: block;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* Bouton "Parcourir nos oreillers" (section solutions) centré en mobile */
    .section-solutions-adaptees .atelier-av-dark-cta .elementor-button-wrapper {
        text-align: center;
    }
    /* H2 d'intro pages compte : margin-bottom réduit en mobile */
    .page-customer-account .my-account-page-content > h2 {
        margin-bottom: 10px;
    }
    /* home-grand-title : valeurs explicites (matchent celles du h2 à 767),
       et on force `text-align: right` — spec montée à `.elementor-element.home-grand-title`
       (2 classes + h2 + 1 classe = 0,3,2) pour battre la règle globale
       `.elementor-element.elementor-widget-heading h2.elementor-heading-title { center }`. */
    .elementor-element.home-grand-title h2.elementor-heading-title,
    .elementor-element.home-grand-title h2.elementor-heading-title > span {
        text-align: right !important;
    }
    .elementor-element.home-grand-title h2.elementor-heading-title > span {
        font-size: 30px !important;
        font-weight: 400 !important;
        line-height: 35px !important;
    }
    /* Section hero : empilée à partir de 767, les 2 cols pleine largeur.
       Le margin-left -30px desktop de la col-right est annulé pour éviter
       le chevauchement vertical. (Commune cms-9 + cms-10) */
    :is(.page-cms-9, .page-cms-10) .atelier-av-section-hero .elementor-row {
        flex-direction: column;
    }
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left,
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-right {
        width: 100% !important;
        margin-left: 0;
    }
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-image img {
        height: 300px;
        min-height: 0;
        border-radius: 30px 30px 0 0 !important;
    }
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-right > .elementor-column-wrap {
        border-radius: 0 0 30px 30px !important;
    }
    /* En empilé, on annule la chaîne full-height de la col gauche (sert au
       desktop pour faire occuper l'image toute la hauteur de la section ;
       en mobile c'est l'image elle-même qui est à 300px). */
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left > .elementor-element-populated,
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-widget-wrap,
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .atelier-av-hero-img,
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .atelier-av-hero-img .elementor-widget-container,
    :is(.page-cms-9, .page-cms-10) .atelier-av-hero-col-left .elementor-image {
        height: auto;
    }
    /* Section dark : empilée à 767. On passe la row en display: block (au
       lieu de flex column) : aucune logique flex ne peut alors étirer la
       col-left verticalement à la hauteur de la col-right. */
    .page-cms-9 .atelier-av-section-dark .elementor-row {
        display: block !important;
    }
    /* Annule le padding-bottom 200px hérité du bloc 780 ; juste 30px en mobile. */
    .page-cms-9 .atelier-av-section-pourquoi {
        padding-bottom: 30px !important;
    }
    /* Section "Nos engagements" : 3 cards empilées en blocs. On passe la row
       en display: block (au lieu de flex column) pour éviter que les cards
       s'étirent à la hauteur de la plus grande (cf. section dark). */
    .page-cms-9 .atelier-av-section-cards .elementor-row {
        display: block !important;
    }
    .page-cms-9 .atelier-av-section-cards .atelier-av-card {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .page-cms-9 .atelier-av-section-cards .atelier-av-card:last-child {
        margin-bottom: 0;
    }
    .page-cms-9 .atelier-av-dark-col-left,
    .page-cms-9 .atelier-av-dark-col-right {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
        min-width: 0;
    }
    .page-cms-9 .atelier-av-dark-col-left .elementor-image img {
        height: 300px;
        min-height: 0;
        max-width: 100%;
    }
    /* Annule TOUTE la chaîne flex/justify-end/height-100% du desktop côté
       col-left (du wrapper de col jusqu'à l'image). En empilé, on veut que
       chaque wrapper ait juste la hauteur de son contenu. */
    .page-cms-9 .atelier-av-dark-col-left,
    .page-cms-9 .atelier-av-dark-col-left > .elementor-element-populated,
    .page-cms-9 .atelier-av-dark-col-left .elementor-widget-wrap,
    .page-cms-9 .atelier-av-dark-col-left .atelier-av-dark-img,
    .page-cms-9 .atelier-av-dark-col-left .atelier-av-dark-img > .elementor-widget-container,
    .page-cms-9 .atelier-av-dark-col-left .elementor-image {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
    .page-cms-9 .atelier-av-dark-col-right {
        display: block !important;
        align-items: stretch !important;
    }
    /* Annule le débord -150px de l'image desktop : en empilé il pousse la
       col-right en dehors de la section. */
    .page-cms-9 .atelier-av-dark-col-left .elementor-image {
        margin-top: 0;
    }
    .page-cms-9 .atelier-av-stat {
        grid-template-columns: 120px 1fr;
        gap: 30px;
        padding: 30px 0;
    }
    .page-cms-9 .atelier-av-stat-num { font-size: 48px; }

    .home-grand-title .elementor-heading-title { font-size: 30px !important; }

    .home-usp-item { font-size: 13px; padding: 0 22px; }
    .home-banner-title { font-size: 28px; }
    .home-banner-subtitle { font-size: 13px; }
    .home-bloc-creme { border-radius: 20px; }
    .home-bloc-creme-img-col .elementor-image img { height: 300px !important; }
    /* Footer : gradient resserré (stop crème à 5% au lieu de 20%) */
    #footer {
        background: linear-gradient(to bottom, rgba(219, 239, 246, 0.03) 0%, rgba(219, 239, 246, 0.65) 5%, rgba(184, 217, 227, 1) 100%);
        color: #1A282C;
    }
    /* Listing blog : 2 colonnes → 1 colonne */
    .lad-blog-listing .simpleblog__listing .row {
        grid-template-columns: 1fr;
    }
    /* Produits liés : 2 → 1 colonne */
    .lad-blog-related .lad-blog-related-grid {
        grid-template-columns: 1fr;
    }
    /* Single article : image de couverture moins haute en smartphone */
    .lad-blog-single-cover { height: 300px; }
    /* Bouton Retour : position rapprochée du coin */
    .lad-blog-back-btn { top: 15px; left: 15px; }
    /* Single article : margin-bottom réduit en smartphone */
    .lad-blog-single { margin-bottom: 70px; }
    /* Titres dans le corps : margin-top resserré */
    .lad-blog-single-body h2,
    .lad-blog-single-body h3 { margin-top: 30px; }
    /* Tableaux : scroll horizontal au lieu de déborder ou casser le layout */
    .lad-blog-single-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    #footer-copyrights .footer-legal-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    /* Popup recherche mobile : on remonte un peu moins (header plus court) */
    #search-widget-mobile {
        margin-top: -15px;
    }
    /* Confirmation de commande : dt et dd passent en 1 col (l'un au-dessus
       de l'autre) au lieu de 2 cols. */
    #order-confirmation #content-hook_payment_return dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    /* Page détail commande : adresses empilées à partir de 600. */
    #order-detail .addresses.row {
        flex-wrap: wrap;
    }
    #order-detail .addresses .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* `.order-message-form` : label au-dessus du champ à 600. */
    #order-detail .order-message-form .form-group.row {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }
    #order-detail .order-message-form .form-group.row > .col-md-3 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 6px;
    }
    #order-detail .order-message-form .form-group.row > .col-md-5,
    #order-detail .order-message-form .form-group.row > .col-md-9 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #order-confirmation #content-hook_payment_return dl dd {
        margin-bottom: 10px !important;
    }
    /* Liste d'envies : repasse en 2 lignes comme au 991 (image+nom ligne 1,
       prix+qty+remove ligne 2). Annule l'override 767 qui remet sur 1 ligne. */
    #module-iqitwishlist-view .iqitwishlist-product .row {
        flex-wrap: wrap;
        row-gap: 15px;
    }
    #module-iqitwishlist-view .iqitwishlist-product ._name {
        flex: 1 0 calc(100% - 104px) !important;
        max-width: none !important;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    /* Annule le `margin-top: .5rem` natif sur le bouton "Modifier" des
       étapes du checkout (qui décolle le `.step-edit` sur mobile). */
    body#checkout section.checkout-step.-reachable.-complete .step-title .step-edit,
    body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
        margin-top: 0;
    }
    /* Annule le `margin-top: 2rem` natif sur `#order-items` (récap paiement) */
    body#checkout #order-items {
        margin-top: 0;
    }
    /* Annule le border-top + padding-top + margin-top natifs sur `#order-details`
       (page confirmation) à ≤ 575.98. */
    body#order-confirmation #order-details {
        border-top: 0;
        padding-top: 25px;
        margin-top: 0;
    }
    /* Liste d'envies : la col image bascule en `col-3` (25%) sous 576 →
       on la force à 104px (largeur de la col Bootstrap natif à 991) pour
       garder le nom collé à côté, et `._name` prend le reste. */
    #module-iqitwishlist-view .iqitwishlist-product .row > .col-3.col-sm-auto {
        flex: 0 0 104px;
        width: 104px;
        max-width: 104px;
    }
    #module-iqitwishlist-view .iqitwishlist-product ._name {
        flex: 1 0 calc(100% - 104px) !important;
    }
    /* Compte pro : le chevron .pull-right du panel-heading passe en absolute
       top-right pour ne pas se chevaucher avec le titre wrappé en mobile. */
    #module-advanced_b2b_b2c-account .panel-heading {
        position: relative;
    }
    #module-advanced_b2b_b2c-account .panel-heading .pull-right {
        position: absolute;
        top: 20px;
        right: 20px;
        margin-left: 0;
        width: auto;
    }
}

@media (max-width: 450px) {
    /* Panier : à ≤ 450, les deux cols du `.product-line-grid` (gauche
       image+nom, droite prix+qty+remove) sont empilées (col-12). On ajoute
       un row-gap 10px entre elles. */
    #cart .cart-overview .product-line-grid.row {
        row-gap: 10px;
    }
}

@media (max-width: 500px) {
    /* Étapes du checkout : padding interne réduit à 15 sur smartphone. */
    #checkout .checkout-step .content {
        padding: 15px !important;
    }
    /* Modal "Produit ajouté au panier" + wishlist non connecté + CGV checkout :
       padding latéral réduit en mobile. */
    .modal-dialog:has(.cart-content-btn),
    #iqitwishlist-modal .modal-dialog,
    .js-checkout-modal .modal-dialog {
        padding-left: 15px;
        padding-right: 15px;
    }
    /* Pages refonte : gouttière latérale #wrapper 30px → 15px (convention smartphone) */
    #category #wrapper,
    #best-sales #wrapper,
    #prices-drop #wrapper,
    #new-products #wrapper,
    #module-iqitsearch-searchiqit #wrapper,
    #contact #wrapper,
    #product #wrapper,
    #module-ph_simpleblog-list #wrapper,
    #module-ph_simpleblog-category #wrapper,
    #module-ph_simpleblog-single #wrapper,
    #pagenotfound #wrapper,
    body.cms-id-9 #wrapper,
    body.cms-id-10 #wrapper,
    #authentication #wrapper,
    #password #wrapper,
    #registration #wrapper,
    :is(#my-account, #identity, #address, #history, #order-slip, #module-psgdpr-gdpr, #module-ps_emailalerts-account, #module-payplug-cards, #module-iqitwishlist-view, #module-advanced_b2b_b2c-account, #addresses, #discount, #order-follow, #module-advanced_b2b_b2c-withdrawal, #order-detail, #order-return) #wrapper,
    #cart #wrapper,
    #checkout #wrapper,
    #order-confirmation #wrapper,
    body#cms:not(.cms-id-8):not(.cms-id-9):not(.cms-id-10) #wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Section dark (.elementor-section-stretched) : 100vw → gouttière 15px
       horizontale pour matcher la convention mobile. */
    .page-cms-9 .atelier-av-section-dark {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* Stats pourquoi : grid 2 cols → 1 col (num au-dessus du body), textes centrés */
    .page-cms-9 .atelier-av-stat {
        grid-template-columns: 1fr;
    }
    .page-cms-9 .atelier-av-stat-body,
    .page-cms-9 .atelier-av-stat-title,
    .page-cms-9 .atelier-av-stat-desc {
        text-align: center;
    }
    /* Grille de stats lad-stats-grid : chiffre réduit 66/77 → 50/55,
       row-gap 90 → 30 */
    .lad-stats-grid { row-gap: 30px; }
    .lad-stat-num {
        font-size: 50px;
        line-height: 55px;
    }
    /* Liste d'icones : label 20 → 18, gap icone/label 35 → 20 */
    .lad-icon-item-label {
        font-size: 18px;
        line-height: 22px;
    }
    .lad-icon-item { gap: 20px; }

    /* Hero blog : marges encore plus serrées en smartphone */
    .lad-blog-hero { margin: 30px 0 50px; }
    /* Single article : margin-top + margin-bottom encore réduits en smartphone */
    .lad-blog-single { margin-top: 30px; margin-bottom: 50px; }

    /* Input recherche mobile : marges latérales 30px → 15px */
    #search-widget-mobile form {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* Chips de filtres : gap réduit à 10px, marge bas 20px */
    #search_filters.dropdown-search-filters {
        gap: 10px;
        margin-bottom: 20px !important;
    }

    /* Bannière catégorie : marge bas 20px, hauteur réduite à 200px */
    .category-image {
        margin-bottom: 20px;
        height: 200px;
    }
    /* Titre dans la bannière : rapproché des bords */
    .category-image #js-product-list-header {
        left: 30px;
        bottom: 60px;
    }
    /* Bannières best-sales / promos / new / recherche : titre rapproché des
       bords + hauteur / marge réduites comme la bannière catégorie. */
    #best-sales #js-product-list-header,
    #prices-drop #js-product-list-header,
    #new-products #js-product-list-header,
    #module-iqitsearch-searchiqit #js-product-list-header {
        height: 200px;
        margin-bottom: 20px;
        padding-left: 30px;
        padding-bottom: 60px;
    }

    /* Breadcrumb : padding bas 20px */
    #wrapper .breadcrumb {
        padding-bottom: 20px;
    }

    #mobile-header-sticky > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #header .header-nav {
        padding-left: 15px;
        padding-right: 15px;
    }

    #header .header-nav .center-nav,
    #header .header-nav .center-nav p {
        font-size: 14px;
        line-height: 17px;
    }

    #footer-container-brand > .container,
    #footer-container-main > .container,
    #footer-container-first > .container,
    #footer-copyrights > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #footer-copyrights {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #footer-container-main {
        padding-bottom: 30px;
    }

    #footer-container-main > .container > .row > .col,
    #footer-container-main > .container > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #footer-container-brand {
        padding: 0 0 30px;
    }

    #footer::before {
        height: 200px;
    }

    #mobile-header .row-mobile-header {
        gap: 10px;
    }

    #mobile-header .col-mobile-btn-menu .m-nav-btn .fa-bars,
    #mobile-header .col-mobile-btn-search .m-nav-btn .fa-search,
    #mobile-header .col-mobile-btn-account .m-nav-btn .fa-user,
    #mobile-header .col-mobile-btn-cart .m-nav-btn .fa-shopping-bag,
    #desktop-header .search-widget .search-btn,
    #search-widget-mobile .search-btn,
    #search-widget-mobile .search-btn .fa-search {
        width: 35px;
        height: 35px;
    }

    /* Sections home stretched+boxed : 15px latéral + sbw/2 de compensation
       scrollbar = ~22.5px (cf. règle desktop à 30px+sbw/2). On override seulement
       padding-left/right pour préserver le top/bottom de chaque section.
       Placé en fin de fichier pour passer devant le 1500/1300 (notamment pour
       .home-section-blog dont l'override est dans le 1500 plus haut). */
    .section-top-accueil,
    .home-section-title-block,
    .home-section-selection,
    .home-section-bestsellers,
    .home-section-bloc-creme-wrap,
    .home-section-grand-title {
        padding-left: calc(15px + var(--lad-sbw, 0px) / 2) !important;
        padding-right: calc(15px + var(--lad-sbw, 0px) / 2) !important;
    }
    .elementor-section.home-section-blog {
        padding-left: calc(15px + var(--lad-sbw, 0px) / 2) !important;
        padding-right: calc(15px + var(--lad-sbw, 0px) / 2) !important;
    }
    /* Section blog page produit : padding latéral 30 → 15 */
    .related-blog-inner { padding: 0 15px; }
    #product #main-product-wrapper {
        margin-top: 20px;
    }
    /* Page produit : tout ce qui est à 80px (depuis 991/1300) passe à 50px */
    #product .product-usps-band { margin-top: 50px; margin-bottom: 50px; }
    #product .product-tabs { margin-top: 50px; }
    #product .product-main-sections { gap: 30px; margin-bottom: 50px; }
    #product .category-products.block.block-section { margin-top: 50px; }
    #product .product-extracontent-section:has(.related-blog-posts) {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #product .product-description-section .rte-content h4 {
        font-size: 18px;
        line-height: 22px;
        margin-top: 20px;
    }
    #product .product-description-section .rte-content h3 {
        margin-bottom: 20px;
    }
    /* Page atelier — tous les paddings sup à 50px (depuis 1300px ou desktop)
       passent à 50px */
    .page-cms-8 .atelier-section-fondements-heading {
        padding-top: 50px !important;
    }
    .page-cms-8 .atelier-section-cards {
        padding-bottom: 50px !important;
    }
    .page-cms-8 .atelier-section-tech {
        padding-top: 50px !important;
    }
    .page-cms-8 .atelier-section-tech-detail {
        padding-top: 50px !important;
    }
    .page-cms-8 .atelier-section-full-image {
        padding-bottom: 50px !important;
    }
    /* Page atelier — tous les paddings latéraux 30px passent à 22.5px (incluant
       la compensation scrollbar sbw/2) */
    .page-cms-8 .atelier-section-fondements-heading,
    .page-cms-8 .atelier-section-cards,
    .page-cms-8 .atelier-section-tech,
    .page-cms-8 .atelier-section-tech-detail,
    .page-cms-8 .atelier-section-cats {
        padding-left: 22.5px !important;
        padding-right: 22.5px !important;
    }
    .page-cms-8 .atelier-section-full-image > .elementor-container > .elementor-row > .elementor-col-100 > .elementor-element-populated {
        padding-left: 22.5px !important;
        padding-right: 22.5px !important;
    }
    .page-cms-8 .atelier-hero-col-left > .elementor-element-populated {
        padding-left: 22.5px !important;
        padding-right: 22.5px !important;
    }
    /* Section cards : gap 15px à 500px, et cards en 1 colonne pleine largeur */
    .page-cms-8 .atelier-section-cards .elementor-row {
        gap: 15px;
    }
    .page-cms-8 .atelier-section-cards .atelier-card {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    /* Section fondements heading : padding-bottom réduit à 20px */
    .page-cms-8 .atelier-section-fondements-heading {
        padding-bottom: 20px !important;
    }
    /* Sections cats : gap liste 30px (le gap row + wrap est géré au bloc 767) */
    .page-cms-8 .atelier-cat-list {
        gap: 30px;
    }
    /* Sous-titre hero : margin-top réduit à 50px (au lieu de 80px à 991) */
    .page-cms-8 .atelier-hero-col-left .atelier-hero-subtitle {
        margin-top: 50px !important;
    }
    #product .product-details-section #product-details .data-sheet .name,
    #product .product-details-section #product-details .data-sheet .value {
        padding: 15px;
    }
    #product #product-images-thumbs .swiper-slide {
        width: 85px !important;
        height: 115px !important;
        flex: 0 0 85px !important;
        max-width: 85px !important;
    }
    .home-section-blog .simpleblog-posts .post-item,
    .home-section-blog .simpleblog-posts .simpleblog__listing__post__wrapper.post-item,
    .related-blog-cards .simpleblog-posts .post-item,
    .related-blog-cards .simpleblog-posts .simpleblog__listing__post__wrapper.post-item {
        min-height: 300px;
    }
    /* Margin bottom des dots décoratifs réduit à 20px (au lieu de 35px desktop) */
    #product .product-description-section > .home-dots,
    #product .product-details-section > .home-dots,
    #product .category-products .home-dots-center,
    .related-blog-col-intro .home-dots {
        margin: 0 0 20px 0;
    }
    #product .product-perso-link,
    #product .product-perso-link a {
        font-size: 18px;
        line-height: 22px;
    }
    #product .product-perso-link {
        margin: 20px 0;
    }
    #product .product-variants-item .form-control-label {
        font-size: 18px;
        line-height: 22px;
    }
    #product .product-variants-item .custom-select2,
    #product .product-variants > .product-variants-item .custom-select2 {
        width: 140px;
        max-width: 140px;
    }
    /* Paddings top/bottom des sections : 80/100 → 50px à 500px */
    .home-section-title-block { padding-top: 50px !important; }
    .home-section-selection,
    .home-section-bestsellers,
    .home-section-blog,
    .home-section-bloc-creme-wrap {
        padding-bottom: 50px !important;
    }
    .section-top-accueil { padding-bottom: 30px !important; }
    /* Arrows sliders produits + blog + catégorie page produit : -25.5 → 10px sous 500px */
    .home-section-products .elementor-swiper-button-prev,
    .home-blog-cards .elementor-swiper-button-prev,
    .related-blog-cards .elementor-swiper-button-prev,
    #product .category-products .swiper-button-prev { left: 10px; }
    .home-section-products .elementor-swiper-button-next,
    .home-blog-cards .elementor-swiper-button-next,
    .related-blog-cards .elementor-swiper-button-next,
    #product .category-products .swiper-button-next { right: 10px; }
    .home-section-blog .elementor-row { gap: 20px; }
    .home-bloc-creme { padding: 20px !important; }
    /* Banners : min-height 700 → 500px. Le JS recalcule au resize
       --lad-banner-travel / --lad-banner-reserve → la descente s'adapte
       (clamp à 0 si le texte+bouton+40 dépasse la nouvelle hauteur). */
    .home-section-banners .home-banner-col { min-height: 500px; }
    /* Padding top/bottom des 2 colonnes banners : 80 → 30px */
    .home-section-banners .home-banner-col > .elementor-element-populated {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    /* Titres banners : margin-bottom du widget-container 30 → 20px (les 2 titres ont .home-banner-col-title) */
    .home-banner-col-title .elementor-widget-container { margin-bottom: 20px !important; }
}

@media (max-width: 400px) {
    /* Contact : titre email/adresse 7vw / 8vw (ratio ≈ 1.16) */
    #contact .contact-info-email,
    #contact .contact-info-address {
        font-size: 7vw;
        line-height: 8vw;
    }
    /* Option de livraison : radio passe au-dessus du contenu (col-sm-1 +
       col-sm-11 en flex column), le label en-dessous prend full width. */
    body#checkout .delivery-option.row {
        flex-direction: column;
    }
    body#checkout section.checkout-step .delivery-option > .col-sm-1,
    body#checkout section.checkout-step .delivery-option > .col-sm-11,
    body#checkout section.checkout-step .delivery-option > .delivery-option-2 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body#checkout .delivery-option > .col-sm-1 {
        margin-bottom: 10px;
        text-align: center;
    }
    /* Le radio natif a `.float-left` → on override pour le centrer. */
    body#checkout .delivery-option > .col-sm-1 .custom-radio {
        float: none !important;
        display: inline-block;
    }

    /* Grille de stats : 2 cols → 1 col en très petit smartphone +
       marges chiffre / divider réduites 30 → 20 */
    .lad-stats-grid {
        grid-template-columns: 1fr;
    }
    .lad-stat-num { margin-bottom: 20px; }
    .lad-stats-grid hr.lad-stat-divider {
        margin-bottom: 20px !important;
    }

    #mobile-header .col-mobile-btn-menu .m-nav-btn .fa-bars,
    #mobile-header .col-mobile-btn-search .m-nav-btn .fa-search,
    #mobile-header .col-mobile-btn-account .m-nav-btn .fa-user,
    #mobile-header .col-mobile-btn-cart .m-nav-btn .fa-shopping-bag,
    #desktop-header .search-widget .search-btn,
    #search-widget-mobile .search-btn,
    #search-widget-mobile .search-btn .fa-search {
        width: 30px;
        height: 30px;
    }

    #footer-container-main .block-iqitlinksmanager .block-title {
        font-size: 18px;
        line-height: 22px;
    }

    #footer-container-main .block-iqitlinksmanager .block-content a {
        font-size: 16px;
        line-height: 20px;
    }

    .ps-shoppingcart.dropdown #blockcart-content {
        padding: 20px;
        border-radius: 20px;
    }
}

@media (max-width: 375px) {
    .col-mobile-menu-push #_mobile_iqitmegamenu-mobile {
        width: 100%;
    }
}

/* Annule le focus accent (cyan) appliqué globalement par le thème parent
   (theme.css : `.form-control:focus { border-color: var(--ps-accent);
   box-shadow: 0 0 0 2px rgba(47,181,210,.15) }`). On neutralise le ring et
   on garde une bordure sombre cohérente avec le design system. */
.form-control:focus {
    border-color: #1A282C !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* ============================================================
   ANIMATION D'ENTRÉE DES TITRES H1 (.page-title)
   Effet "nuage" : fondu depuis le bas, montée avec léger
   dépassement vers le haut, puis redescente douce jusqu'à la
   position finale.
   ============================================================ */
@keyframes titleFloatIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }
    50% {
        opacity: 1;
        transform: translateY(-8px);
        filter: blur(1px);
    }
    /* Descente progressive par paliers décroissants : l'atterrissage est
       amorti au lieu de revenir d'un coup à 0. Le flou se dissipe tôt. */
    65% {
        transform: translateY(-5px);
        filter: blur(0);
    }
    72% {
        transform: translateY(-4px);
    }
    88% {
        transform: translateY(-1.5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
h1 {
    animation: titleFloatIn 1.1s ease-out both;
    will-change: opacity, transform, filter;
}
/* Pages best-sales / promos / new / recherche : le h1 `#js-product-list-header`
   EST la bannière (image de fond, 252px) → animer le h1 ferait bouger toute la
   bannière. On désactive l'anim sur le h1 et on l'applique au span du titre. */
#best-sales #js-product-list-header,
#prices-drop #js-product-list-header,
#new-products #js-product-list-header,
#module-iqitsearch-searchiqit #js-product-list-header {
    animation: none;
}
#best-sales #js-product-list-header span,
#prices-drop #js-product-list-header span,
#new-products #js-product-list-header span,
#module-iqitsearch-searchiqit #js-product-list-header span {
    display: inline-block;
    animation: titleFloatIn 1.1s ease-out both;
    will-change: opacity, transform, filter;
}
/* Accessibilité : pas d'animation si l'utilisateur a demandé à les
   réduire (réglage système). */
@media (prefers-reduced-motion: reduce) {
    h1,
    #best-sales #js-product-list-header span,
    #prices-drop #js-product-list-header span,
    #new-products #js-product-list-header span,
    #module-iqitsearch-searchiqit #js-product-list-header span {
        animation: none;
    }
}

/* ============================================================
   REVEAL AU SCROLL (fondu d'opacité à l'entrée dans le viewport)
   Le tableau des caractéristiques (`.data-sheet`) démarre transparent DÈS
   le premier rendu (masquage en CSS direct = pas de flash), puis le JS
   ajoute `.lad-reveal--visible` quand il entre à l'écran.
   Fallback no-JS via `@media (scripting: none)` : visible si JS désactivé.
   ============================================================ */
#product-details-wrapper .section-content {
    opacity: 0;
    transition: opacity 0.9s ease;
}
#product-details-wrapper .section-content.lad-reveal--visible {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    #product-details-wrapper .section-content {
        opacity: 1;
        transition: none;
    }
}
@media (scripting: none) {
    #product-details-wrapper .section-content {
        opacity: 1;
    }
}