/* Fichier généré par le module climdesign.
   Ne pas modifier en FTP : le contenu est écrasé à chaque enregistrement
   depuis le back-office. Généré le 2026-08-12 13:17:28 */

/* =============================================================
   CLIM-SPLIT — SYSTÈME DE DESIGN GLOBAL
   Thème Warehouse (iQIT) · PrestaShop 8.2 · v1.14

   OÙ COLLER CE FICHIER
   Module climdesign > Configurer > champ éditeur (colle tout le
   fichier, Enregistrer) — ou transfert FTP dans
   modules/climdesign/views/css/global.css si tu es en mode Fichier.

   JOURNAL
   v1.14 (12/08/2026) — adaptation à l'interface mobile. Barre du
                         bas (menu/recherche/compte/panier) mise en
                         forme sur les vraies classes déjà vues dans
                         le code source (#mobile-header-sticky,
                         .m-nav-btn, #mobile-cart-toogle) — les
                         quatre onglets restent uniformes, comme une
                         vraie barre d'onglets, plutôt que de rendre
                         le panier seul vert et détonner dans la
                         rangée. La recherche mobile et le menu
                         hamburger (v1.7) héritent déjà du système
                         via des classes partagées avec le desktop,
                         rien à refaire dessus. Gouttière entre
                         produits resserrée sur mobile (pensée à
                         l'origine pour 4-5 colonnes desktop, trop
                         large en 2 colonnes).
   v1.13 — centrage des titres de bloc déplacé dans la règle
           générale : ne s'appliquait qu'au pied de page, pas à
           « MONO-SPLIT » en colonne latérale.
   v1.12 — sous-catégories en colonne latérale (.block-categories,
           confirmé par le code source) : hiérarchie premier niveau/
           niveaux imbriqués, survol, icônes recolorées.
   v1.11 — titres des blocs du pied de page centrés ; icônes de
           « Nous suivre » centrées dans leur cadre.
   v1.10 — débordement sur les blocs du pied de page : point commun,
           la classe .block-toggle. Corrigé avec overflow:hidden.
   v1.9 — le rond vert foncé « 1 » des captures précédentes était la
          page courante de la pagination, pas le compteur du panier.
   v1.8 — barre de méga-menu et compteur du panier sur la couleur
          exacte fournie (#66C59F) ; texte en vert foncé plutôt que
          blanc, cette teinte ne passant pas 4,5:1 avec du blanc.
   v1.7 — corrections basées sur le code source réel de la page
          d'accueil : #_desktop_cart et #_desktop_user_info
          n'existaient nulle part ; menu hamburger mobile réécrit
          sur les vraies classes .mobile-menu__*.
   v1.6 — bouton panier et fond du méga-menu passés en !important.
   v1.5 — passe de fond : tous les sélecteurs préfixés par « body ».
          Compteur du panier en cercle net. Padding des blocs modéré.
   v1.4 — barre de méga-menu en vert plus vif ; padding renforcé.
   v1.3 — barre de méga-menu en bleu-vert soutenu, texte blanc.
   v1.2 — barre de méga-menu en blanc ; bouton panier en vert.
   v1.1 — méga-menu moins anguleux ; typographie éclaircie ;
          espacements accentués.
   v1.0 — version initiale.

   MÉTHODE DE DÉPLOIEMENT
   Chaque section est indépendante et numérotée. Colle le fichier
   entier d'un coup si tu remplaces une version précédente ; pour
   une première pose, avance section par section en vérifiant le
   site entre chaque.

   SI UNE RÈGLE NE S'APPLIQUE PAS
   Le thème gagne en spécificité. Préfixe la règle par « body »
   (ex. « body .btn-primary { … } ») avant d'envisager !important.
   ============================================================= */


/* =============================================================
   01 · JETONS — la seule section à modifier au quotidien
   Change une valeur ici, tout le site suit.
   ============================================================= */

:root {
	/* Verts de marque */
	--cs-green-900: #06342B;
	--cs-green-800: #085041;
	--cs-green-600: #1D9E75;
	--cs-green-500: #27B487;
	--cs-turquoise: #6DEAE0;
	--cs-mint-50:   #F0FAF7;

	/* Neutres — texte, éclairci en v1.1 (contraste vérifié, voir journal) */
	--cs-ink:       #3A4A45;  /* texte courant · était #1C2B27 · 9.4:1 sur blanc */
	--cs-ink-soft:  #56655F;  /* texte secondaire · était #3D4C48 · 6.1:1 sur blanc */
	--cs-muted:     #6A7A76;  /* déjà à la limite du seuil AA, inchangé volontairement */
	--cs-line:      #E6ECE9;
	--cs-surface:   #FFFFFF;
	--cs-canvas:    #FBFDFC;

	/* États */
	--cs-danger:    #C0392B;
	--cs-warn:      #B7791F;

	/* Rôles — les composants ne référencent que ces variables */
	--cs-primary:      var(--cs-green-800);
	--cs-primary-hov:  var(--cs-green-600);
	--cs-accent:       var(--cs-turquoise);
	--cs-on-primary:   #FFFFFF;
	--cs-on-accent:    var(--cs-green-900);
	--cs-heading:      #0E7A61;  /* nouveau en v1.1 · plus clair que green-800, 5.3:1 sur blanc */
	--cs-nav-accent:   #66C59F;  /* v1.8 · couleur exacte fournie par Clim-Split, tirée du logo.
	                                Avec du texte blanc : 2,09:1 — trois fois sous le seuil AA
	                                de 4,5:1, illisible. Avec le vert le plus sombre déjà dans la
	                                palette (--cs-green-900, #06342B) : 6,55:1. Le texte du
	                                méga-menu et le compteur du panier passent donc en vert foncé
	                                plutôt qu'en blanc — c'est ce qui permet d'utiliser cette
	                                teinte exacte sans aucun compromis sur elle-même. */

	/* Rayons */
	--cs-r-pill: 999px;
	--cs-r-xl:   26px;  /* nouveau en v1.1 · grands panneaux (méga-menu) */
	--cs-r-lg:   18px;
	--cs-r-md:   12px;
	--cs-r-sm:   8px;

	/* Ombres */
	--cs-sh-1: 0 1px 3px rgba(6,52,43,.06);
	--cs-sh-2: 0 6px 20px rgba(6,52,43,.09);
	--cs-sh-3: 0 24px 60px rgba(6,52,43,.16);

	/* Mouvement */
	--cs-t:  .18s cubic-bezier(.2,.8,.3,1);
	--cs-t2: .28s cubic-bezier(.2,.8,.3,1);

	/* Typographie */
	--cs-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--cs-tight: -.4px;
}


/* =============================================================
   02 · BASE & TYPOGRAPHIE
   ============================================================= */

body {
	font-family: var(--cs-font);
	color: var(--cs-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4, body h5,
body .h1, body .h2, body .h3, body .h4, body .h5 {
	font-family: var(--cs-font);
	color: var(--cs-heading);
	font-weight: 700;
	letter-spacing: var(--cs-tight);
	line-height: 1.25;
	margin: 0 0 .6em;
}

body #main .page-header h1,
body #main .page-title,
body h1.page-heading {
	font-size: 30px;
	margin-bottom: 8px;
}

body a { color: var(--cs-green-600); transition: color var(--cs-t); }
body a:hover, body a:focus { color: var(--cs-green-800); }

body hr { border-color: var(--cs-line); }

body ::selection { background: var(--cs-turquoise); color: var(--cs-green-900); }

/* Respiration autour du texte courant — nouveau en v1.1.
   Scopé au contenu éditorial (CMS, description produit, blog) pour ne
   pas gonfler les textes compacts d'UI (aide de formulaire, badges…). */
body .rte p,
body .product-description p,
body #main .page-content p,
body .cms-content p {
	line-height: 1.75;
	margin-bottom: 1.15em;
}


/* =============================================================
   03 · BOUTONS PILULE — la signature visuelle du site
   ============================================================= */

body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-tertiary,
body .btn-outline-primary,
body input[type="submit"].btn {
	border-radius: var(--cs-r-pill);
	font-weight: 700;
	letter-spacing: .1px;
	border-width: 1px;
	padding: 11px 26px;
	transition: background-color var(--cs-t), color var(--cs-t),
	            border-color var(--cs-t), transform var(--cs-t),
	            box-shadow var(--cs-t);
	text-transform: none;
}

body .btn:hover  { transform: translateY(-1px); }
body .btn:active { transform: translateY(0); }

body .btn-primary,
body .btn-primary:not(:disabled):not(.disabled) {
	background-color: var(--cs-primary);
	border-color: var(--cs-primary);
	color: var(--cs-on-primary);
	box-shadow: var(--cs-sh-1);
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--cs-primary-hov);
	border-color: var(--cs-primary-hov);
	color: var(--cs-on-primary);
	box-shadow: var(--cs-sh-2);
}

body .btn-secondary,
body .btn-outline-primary {
	background-color: transparent;
	border-color: var(--cs-primary);
	color: var(--cs-primary);
}
body .btn-secondary:hover,
body .btn-outline-primary:hover {
	background-color: var(--cs-primary);
	border-color: var(--cs-primary);
	color: var(--cs-on-primary);
}

/* Ajouter au panier — le bouton le plus important du site */
body .add-to-cart,
body .btn.add-to-cart {
	background-color: var(--cs-primary);
	border-color: var(--cs-primary);
	color: var(--cs-on-primary);
	padding: 14px 30px;
	font-size: 15px;
}
body .add-to-cart:hover:not([disabled]) {
	background-color: var(--cs-primary-hov);
	border-color: var(--cs-primary-hov);
}
body .add-to-cart[disabled] { opacity: .5; }

body .btn-sm { padding: 7px 18px; font-size: 13px; }
body .btn-lg { padding: 15px 34px; font-size: 16px; }

/* Le stepper de quantité reste rectangulaire : il encadre un champ */
body .btn-touchspin,
body .bootstrap-touchspin .btn { border-radius: var(--cs-r-sm); }


/* =============================================================
   04 · FORMULAIRES
   ============================================================= */

body .form-control,
body .custom-select,
body select.form-control,
body textarea.form-control {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-sm);
	color: var(--cs-ink);
	box-shadow: none;
	transition: border-color var(--cs-t), box-shadow var(--cs-t);
}

body .form-control:focus,
body .custom-select:focus {
	border-color: var(--cs-green-600);
	box-shadow: 0 0 0 3px rgba(29,158,117,.15);
	outline: none;
}

body .form-control::placeholder { color: var(--cs-muted); opacity: 1; }

body .form-control-label,
body label { color: var(--cs-ink-soft); font-weight: 600; }

body .input-group .input-group-btn > .btn { border-radius: 0 var(--cs-r-sm) var(--cs-r-sm) 0; }

/* Recherche d'en-tête : pilule */
body #search_widget form input[type="text"],
body .search-widget form input[type="text"] { border-radius: var(--cs-r-pill); padding-left: 18px; }


/* =============================================================
   05 · CARTES, BLOCS & SURFACES
   ============================================================= */

body .card,
body .block,
body .cart-summary,
body .js-cart-summary {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-lg);
	background: var(--cs-surface);
	box-shadow: var(--cs-sh-1);
}

/* Débordement sur Informations / Nous contacter / Nous suivre — v1.10.
   Point commun des trois : la classe .block-toggle, le mécanisme
   d'accordéon du thème (confirmé par sa propre documentation, utilisé
   à l'identique en colonne latérale et en pied de page). Le thème
   positionne vraisemblablement une icône d'ouverture/fermeture de
   façon absolue, calée pour un cadre à coins droits. Nos coins
   arrondis, sans overflow:hidden pour la contenir, la laissent
   dépasser de la courbe — quel que soit le contenu du bloc. */
body .block-toggle {
	overflow: hidden;
}

body .card-header,
body .card-block,
body .card-body { border-radius: inherit; border-color: var(--cs-line); }

/* Respiration intérieure — v1.1, renforcée en v1.4, modérée en v1.5.
   26/24px (v1.4) donnait du vide disproportionné sur les petits blocs à
   contenu compact (icônes de « Nous suivre »), même si c'était pertinent
   sur les blocs à liste de texte. 22/20px reste nettement plus aéré que
   l'origine sans créer ce vide. */
body .card-block,
body .block-content,
body #footer .block-content,
body .footer-container .block-content {
	padding: 22px 20px !important;
}

/* Titres de blocs (colonnes latérales et pied de page).
   v1.13 — le centrage n'était appliqué qu'au pied de page (v1.11) ;
   « MONO-SPLIT » en colonne latérale utilise cette règle générale,
   qui ne centrait pas encore. Déplacé ici pour couvrir tous les
   titres de bloc du site d'un coup, plutôt que de rajouter un
   contexte à chaque fois qu'un nouveau bloc apparaît. */
body .block-title,
body .block .block-title span {
	color: var(--cs-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-align: center;
}

body .block-content { color: var(--cs-ink-soft); }

/* Surfaces menthe : encarts d'information, réassurance */
body .cs-surface-mint { background: var(--cs-mint-50); border-radius: var(--cs-r-lg); }


/* =============================================================
   06 · FICHES PRODUIT EN LISTE
   ============================================================= */

body .product-miniature .thumbnail-container,
body .js-product-miniature .thumbnail-container {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-r-lg);
	overflow: hidden;
	background: var(--cs-surface);
	box-shadow: var(--cs-sh-1);
	transition: box-shadow var(--cs-t2), transform var(--cs-t2), border-color var(--cs-t2);
}

body .product-miniature .thumbnail-container:hover,
body .js-product-miniature .thumbnail-container:hover {
	box-shadow: var(--cs-sh-2);
	transform: translateY(-3px);
	border-color: rgba(29,158,117,.35);
}

body .product-miniature .product-title a,
body .js-product-miniature .product-title a {
	color: var(--cs-ink);
	font-weight: 600;
	letter-spacing: -.1px;
}
body .product-miniature .product-title a:hover { color: var(--cs-green-600); }

body .product-price-and-shipping .price,
body .product-miniature .price {
	color: var(--cs-heading);
	font-weight: 700;
}

body .product-price-and-shipping .regular-price,
body .regular-price { color: var(--cs-muted); font-weight: 400; }

/* Étiquettes produit : pilules */
body .product-flags .product-flag,
body .product-flag {
	border-radius: var(--cs-r-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 5px 13px;
	background: var(--cs-green-800);
	color: #fff;
	box-shadow: var(--cs-sh-1);
}
body .product-flags .product-flag.discount,
body .product-flag.on-sale { background: var(--cs-turquoise); color: var(--cs-green-900); }
body .product-flags .product-flag.new { background: var(--cs-green-600); }

/* Espace entre les tuiles — nouveau en v1.1.
   La variable Bootstrap 5 ne fait rien si le thème ne l'utilise pas
   (no-op sûr) ; la marge sur la tuile agit dans tous les cas. */
body .products.row,
body #js-product-list .products {
	--bs-gutter-x: 2rem;
	--bs-gutter-y: 2rem;
}
body .product-miniature,
body .js-product-miniature {
	margin-bottom: 30px;
}


/* =============================================================
   07 · PAGE PRODUIT
   ============================================================= */

body .product-prices .current-price span,
body .product-price .current-price,
body .product-prices .price {
	color: var(--cs-heading);
	font-weight: 700;
	letter-spacing: var(--cs-tight);
}

body .product-cover,
body .product-images-large img,
body .js-qv-product-cover { border-radius: var(--cs-r-lg); }

body .product-images .thumb-container img,
body .product-thumbs img { border-radius: var(--cs-r-md); }

body .product-information .product-description { color: var(--cs-ink-soft); line-height: 1.7; }

body .nav-tabs { border-bottom: 1px solid var(--cs-line); }
body .nav-tabs .nav-link {
	color: var(--cs-muted);
	font-weight: 600;
	border: 0;
	border-bottom: 2px solid transparent;
	transition: color var(--cs-t), border-color var(--cs-t);
}
body .nav-tabs .nav-link:hover { color: var(--cs-ink); }
body .nav-tabs .nav-link.active {
	color: var(--cs-heading);
	background: transparent;
	border-bottom-color: var(--cs-green-600);
}


/* =============================================================
   08 · EN-TÊTE & NAVIGATION
   ⚠ Sélecteurs les plus susceptibles de varier selon ta version
     de Warehouse. Inspecte l'en-tête avec l'inspecteur si une
     règle ne prend pas.
   ============================================================= */

body #header { background: var(--cs-surface); box-shadow: var(--cs-sh-1); }

body #header .header-top { border-bottom: 1px solid var(--cs-line); }

/* En-tête collant translucide */
body #header.fixed,
body .iqit-sticky-header,
body .sticky-desktop.fixed {
	background: rgba(255,255,255,.86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: var(--cs-sh-2);
	border-bottom: 1px solid rgba(230,236,233,.8);
}

/* Barre de méga-menu : bleu-vert soutenu, texte blanc.
   v1.3 — dérivé de la même teinte que le turquoise du logo. v1.6 —
   !important ajouté par prudence : impossible de confirmer par capture
   d'écran si la teinte affichée est bien celle-ci ou une version restée
   en cache/pas encore redéployée, et le bouton panier vient de montrer
   qu'un body-préfixe seul peut encore perdre face à une règle du thème
   à deux ID. Autant trancher tout de suite plutôt qu'attendre une
   nouvelle capture pour le savoir. */
body #iqitmegamenu-horizontal,
body .cbp-hrmenu {
	background: var(--cs-nav-accent) !important;
}

/* Barre de menu : items du premier niveau en vert foncé — le blanc de
   la v1.3 ne passait plus avec cette teinte plus claire (v1.8). Pilule
   au survol en glacis sombre plutôt que blanc translucide, puisque le
   fond est désormais clair. */
body #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a,
body .cbp-hrmenu > ul > li > a {
	color: var(--cs-green-900);
	font-weight: 600;
	letter-spacing: .1px;
	border-radius: var(--cs-r-pill);
	padding: 8px 14px;
	transition: color var(--cs-t), background-color var(--cs-t);
}
body #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a:hover,
body .cbp-hrmenu > ul > li > a:hover {
	color: var(--cs-green-900);
	background: rgba(6,52,43,.12);
}

/* ---------- 08bis · Méga-menu : moins anguleux (v1.1) ----------
   Le panneau se détache légèrement de la barre (margin-top) pour
   que l'arrondi des quatre coins se lise comme une carte flottante
   plutôt que comme un artefact contre la barre de menu.
   Pas de overflow:hidden ici : certaines entrées ont un troisième
   niveau qui doit pouvoir déborder du panneau. */
body .cbp-hrsub-inner {
	border-radius: var(--cs-r-xl);
	margin-top: 10px;
	padding: 22px 26px;
	box-shadow: var(--cs-sh-3);
	border: 1px solid var(--cs-line);
}

/* Bannières catégorie insérées dans le méga-menu */
body .cbp-hrsub-inner img {
	border-radius: var(--cs-r-md);
}

/* Liens à tous les niveaux imbriqués : pilule douce au survol
   plutôt que surbrillance carrée bord à bord */
body .cbp-hrsub-inner a {
	border-radius: var(--cs-r-sm);
	transition: background-color var(--cs-t), color var(--cs-t);
}
body .cbp-hrsub-inner a:hover {
	background: var(--cs-mint-50);
	color: var(--cs-green-800);
}

/* Panier et compte : pilule arrondie pour les deux.
   v1.7 — #_desktop_cart et #_desktop_user_info n'existent nulle part sur
   ce site : ce n'était jamais un problème de spécificité malgré deux
   tentatives avec !important, mais un mauvais sélecteur depuis le début.
   D'après le code source réel de la page : le bouton panier est un lien
   avec l'id #cart-toogle (classe .header-cart-btn), et le bloc compte a
   l'id #user_info — sans classe .header-btn dessus du tout. */
body #cart-toogle,
body #user_info a {
	border-radius: var(--cs-r-pill);
	transition: background-color var(--cs-t), color var(--cs-t), border-color var(--cs-t);
}
body #user_info a:hover { background: var(--cs-mint-50); }

/* Bouton panier : vert plein au lieu du noir du thème — plus visible
   et cohérent avec l'identité du site. v1.2, sélecteur corrigé en v1.7. */
body #cart-toogle {
	background: var(--cs-primary);
	border: 1px solid var(--cs-primary);
	color: #fff;
	padding: 8px 16px;
}
body #cart-toogle:hover {
	background: var(--cs-primary-hov);
	border-color: var(--cs-primary-hov);
	color: #fff;
}
body #cart-toogle * {
	color: inherit;
}

/* Compteur du panier — dimensions explicites en v1.5 : sans elles, le badge
   suit la forme par défaut du thème (souvent plus large/épaisse qu'un
   cercle net pour un seul chiffre). */
body .cart-products-count,
body .cart-products-count-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--cs-nav-accent);
	color: var(--cs-green-900);
	border-radius: var(--cs-r-pill);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
}


/* =============================================================
   08ter · BARRE MOBILE (menu, recherche, compte, panier)
   Nouveau en v1.14. Sélecteurs confirmés par le code source déjà
   reçu (page d'accueil et page catégorie) : #mobile-header-sticky,
   .m-nav-btn, #mobile-cart-toogle — pas de suppositions ici.

   Choix délibéré : les quatre onglets restent uniformes, comme une
   vraie barre d'onglets. Le panier ne devient pas un bouton vert à
   part — ça casserait la cohérence de la rangée. Le badge du
   compteur (.cart-products-count, déjà coloré, partagé avec le
   desktop) suffit à le distinguer sans déséquilibrer les trois
   autres onglets.
   ============================================================= */

body #mobile-header .mobile-main-bar {
	background: var(--cs-surface);
	border-bottom: 1px solid var(--cs-line);
}

body #mobile-header-sticky {
	background: var(--cs-surface);
	border-top: 1px solid var(--cs-line);
	box-shadow: 0 -4px 16px rgba(6,52,43,.07);
}

body .m-nav-btn {
	color: var(--cs-ink-soft);
	transition: color var(--cs-t);
}
body .m-nav-btn:hover,
body .m-nav-btn:active {
	color: var(--cs-green-800);
}
body .m-nav-btn i {
	font-size: 19px;
}
body .m-nav-btn span {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1px;
}

/* Recherche mobile : même pilule que la recherche desktop, via la
   classe .search-widget déjà ciblée en section 04 — rien à ajouter. */


/* =============================================================
   09 · FIL D'ARIANE, PAGINATION, ALERTES
   ============================================================= */

body .breadcrumb { background: transparent; padding-left: 0; }
body .breadcrumb li a { color: var(--cs-muted); font-size: 13px; }
body .breadcrumb li a:hover { color: var(--cs-green-600); }
body .breadcrumb li:last-child span { color: var(--cs-ink-soft); font-size: 13px; }

body .pagination .page-list { background: transparent; }
body .pagination a, body .pagination .current a {
	border-radius: var(--cs-r-pill);
	min-width: 38px;
	text-align: center;
	transition: background-color var(--cs-t), color var(--cs-t);
}
body .pagination .current a {
	background: var(--cs-nav-accent);
	color: var(--cs-green-900);
}
body .pagination a:hover { background: var(--cs-mint-50); }

body .alert { border: 0; border-left: 4px solid; border-radius: 0 var(--cs-r-md) var(--cs-r-md) 0; }
body .alert-success { background: var(--cs-mint-50); border-left-color: var(--cs-green-600); color: var(--cs-green-900); }
body .alert-info    { background: var(--cs-mint-50); border-left-color: var(--cs-green-800); color: var(--cs-green-900); }
body .alert-warning { background: #FFF8E9; border-left-color: var(--cs-warn); color: #6B4A0B; }
body .alert-danger  { background: #FDF0EE; border-left-color: var(--cs-danger); color: #7A241A; }


/* =============================================================
   10 · PIED DE PAGE
   ============================================================= */

body #footer,
body .footer-container { background: var(--cs-canvas); border-top: 1px solid var(--cs-line); }

body #footer .block-title,
body #footer h5 { color: var(--cs-heading); text-align: center; }

body #footer a, body .block-links a { color: var(--cs-ink-soft); }
body #footer a:hover, body .block-links a:hover { color: var(--cs-green-600); }

body .block_newsletter input[type="email"] { border-radius: var(--cs-r-pill); padding-left: 18px; }
body .block_newsletter .btn { border-radius: var(--cs-r-pill); }

/* Léger espace au-dessus de « Nous suivre » — v1.8. Le vrai problème
   de débordement était ailleurs (voir v1.10, .block-toggle), mais
   cette marge reste une respiration utile. */
body .block-social-links {
	margin-top: 20px;
	position: relative;
	z-index: 1;
}

/* Icônes centrées dans le cadre plutôt que collées à gauche — v1.11. */
body .block-social-links .social-links {
	text-align: center;
	justify-content: center;
}


/* =============================================================
   10bis · ARBORESCENCE DE CATÉGORIES (colonne latérale, pages
   catégorie desktop)
   v1.12 — deux tentatives précédentes visaient le mauvais élément :
   ni .category-tree/.block-categories devinés en v1.4, ni les
   classes .mobile-menu__* du menu hamburger (v1.7, qui restent
   correctes pour CE menu-là, juste pas pour celui-ci). Le vrai
   widget, confirmé par le code source réel de la page Mono-Split :
   .block-categories, avec des listes .category-sub-menu et des
   liens imbriqués en .category-sub-link à partir du 2e niveau.
   ============================================================= */

/* Le titre du bloc est un lien ici (contrairement aux autres blocs) :
   il doit garder la couleur de titre, pas la couleur de lien standard. */
body .block-categories .block-title a {
	color: inherit;
}

body .category-sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .category-sub-menu > li {
	border-bottom: 1px solid var(--cs-line);
}
body .category-sub-menu .category-sub-menu > li {
	border-bottom: 1px solid var(--cs-mint-50);
}

body .category-top-menu a {
	display: inline-block;
	padding: 10px 4px;
	color: var(--cs-ink);
	font-weight: 500;
	border-radius: var(--cs-r-sm);
	transition: background-color var(--cs-t), color var(--cs-t);
}
body .category-top-menu a:hover {
	background: var(--cs-mint-50);
	color: var(--cs-green-800);
}

/* Premier niveau (Monosplit GREE, Monosplit DAIKIN…) : plus affirmé
   que les niveaux imbriqués, pour donner une hiérarchie à l'œil. */
body .category-top-menu > .category-sub-menu > li > a {
	font-weight: 700;
	color: var(--cs-heading);
}

body .category-top-menu .collapse-icons {
	color: var(--cs-muted);
}


/* =============================================================
   11 · PANIER & COMMANDE
   Touche légère et volontaire : le tunnel est ce qui fait le
   chiffre d'affaires, on n'y modifie que couleurs et rayons.
   ============================================================= */

body #checkout .card,
body #cart .card { border-radius: var(--cs-r-lg); border-color: var(--cs-line); }

body .cart-summary .cart-total,
body .cart-detailed-totals .cart-total { color: var(--cs-heading); font-weight: 700; }

body #checkout .step-title,
body .checkout-step .step-title { color: var(--cs-heading); font-weight: 700; }

body .checkout-step.-current .step-title { color: var(--cs-heading); }

body .delivery-option,
body .payment-option { border-radius: var(--cs-r-md); transition: background-color var(--cs-t); }
body .delivery-option:hover { background: var(--cs-mint-50); }


/* =============================================================
   12 · ACCESSIBILITÉ & MOUVEMENT
   ============================================================= */

body a:focus-visible,
body button:focus-visible,
body .btn:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
	outline: 2px solid var(--cs-green-600);
	outline-offset: 3px;
	border-radius: var(--cs-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	body .btn:hover,
	body .product-miniature .thumbnail-container:hover,
	body .js-product-miniature .thumbnail-container:hover { transform: none; }
	body * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* =============================================================
   13 · MÉGA-MENU MOBILE (liste accordéon)
   v1.4 — sélecteurs devinés (.category-tree, #subcategories…),
   aucun n'existait sur ce site : ce n'était ni un problème de
   spécificité ni de contenu manquant, juste un mauvais nom de
   classe depuis le début. v1.7 — remplacés par les vrais, trouvés
   dans le code source réel de la page : le menu mobile est le même
   composant iqitmegamenu que la barre du haut, rendu différemment
   sur petit écran (#iqitmegamenu-mobile, classes .mobile-menu__*).
   ============================================================= */

body #iqitmegamenu-mobile .mobile-menu__tab {
	border-bottom: 1px solid var(--cs-line);
}

body #iqitmegamenu-mobile .mobile-menu__link {
	padding: 12px 6px;
	color: var(--cs-ink);
	font-weight: 500;
	border-radius: var(--cs-r-sm);
	transition: background-color var(--cs-t), color var(--cs-t);
}
body #iqitmegamenu-mobile .mobile-menu__link:hover,
body #iqitmegamenu-mobile .mobile-menu__link:active {
	background: var(--cs-mint-50);
	color: var(--cs-green-800);
}

/* Entrées qui déplient un sous-niveau : plus affirmées que les liens
   terminaux, pour donner une hiérarchie à l'œil. */
body #iqitmegamenu-mobile .js-mobile-menu__link-accordion--has-submenu {
	font-weight: 700;
	color: var(--cs-heading);
}

/* Chevrons d'ouverture/fermeture : hors du lien dans le HTML (élément
   frère, pas enfant), donc ne peuvent pas hériter de sa couleur —
   à recolorer séparément. */
body #iqitmegamenu-mobile .mobile-menu__arrow {
	color: var(--cs-muted);
}


/* =============================================================
   14 · MOBILE
   ============================================================= */

@media (max-width: 767px) {
	body #main .page-header h1,
	body #main .page-title { font-size: 23px; }

	body .btn { padding: 11px 22px; }
	body .add-to-cart, body .btn.add-to-cart { width: 100%; text-align: center; }

	body .product-miniature .thumbnail-container { border-radius: var(--cs-r-md); }
	body .product-miniature .thumbnail-container:hover { transform: none; box-shadow: var(--cs-sh-1); }

	body .card-block,
	body .block-content,
	body #footer .block-content { padding: 20px 18px !important; }

	body .cbp-hrsub-inner { padding: 18px 16px; margin-top: 6px; }

	/* La gouttière de la section 06 (2rem) est pensée pour une grille
	   desktop à 4-5 colonnes ; resserrée ici pour les 2 colonnes du
	   mobile. */
	body .products.row,
	body #js-product-list .products {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1.25rem;
	}
	body .product-miniature,
	body .js-product-miniature {
		margin-bottom: 20px;
	}

	body .mobile-buttons-bar .m-nav-btn { padding: 8px 4px; }
}

/* ============================ FIN ============================ */