/* LIFE fixes agreges (audit UI 2026-07) - 1784396212 */

/* ===== system ===== */
/* ============================================================
   SYSTÈME VISUEL GLOBAL — fixes/system.css
   Zone : cohérence structurelle transverse (largeur, rayons, rythme)
   N'édite AUCUN template. CSS only. Sélecteurs sur-spécifiés pour
   gagner sur life-all.css sans dépendre de l'ordre de chargement.
   Dark cohérent (palette héritée de :root life-all).
   ------------------------------------------------------------
   Tokens de design (source unique) :
     --maxw   : largeur de contenu unique .............. 1320px
     --r-md   : rayon des cartes de contenu ............ 14px
     --r-lg   : rayon des grands panneaux .............. 18px
     --sp-*   : échelle d'espacement (multiples de 4)
   ============================================================ */

:root{
  --maxw:1320px;
  --r-md:14px;   /* cartes de contenu : specs, facettes, tables, tuiles */
  --r-lg:18px;   /* grands panneaux : hero cover, bannières CTA, simulateur */
  /* échelle d'espacement (multiples de 4) */
  --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
  --gap-section:64px;
}

/* ------------------------------------------------------------
   1) LARGEUR DE CONTENU UNIQUE — tout sur 1320px
   L'accueil était rentré à 1300px (token mort --maxw:1240),
   désaligné du header/footer/méga déjà à 1320. On réaligne.
   ------------------------------------------------------------ */
html body .life-home{--maxw:1320px}
html body .life-home .wrap{max-width:1320px}
/* garde-fous : les conteneurs structurants restent tous à 1320 */
html body .container,
html body #header .container,
html body .header-top .container,
html body .footer-container,
html body #footer .container,
html body .mega-in,
html body .lh-util-in,
html body .lh-mainbar{max-width:1320px}

/* ------------------------------------------------------------
   2) RAYONS STANDARDISÉS — 2 tokens
   Grands panneaux -> --r-lg (18px) ; cartes de contenu -> --r-md (14px).
   On ne touche PAS aux petits éléments (boutons, chips, pastilles,
   badges, swatches, pilules 999px) : ils gardent leur rayon propre.
   ------------------------------------------------------------ */

/* -- Grands panneaux : 18px -- */
html body .lh-banner{border-radius:var(--r-lg)}
html body .lh-sol{border-radius:var(--r-lg)}
html body .lh-split .media{border-radius:var(--r-lg)}
/* .lh-sim est déjà à 18px — inclus pour verrouiller la valeur */
html body .lh-sim{border-radius:var(--r-lg)}
/* cover produit : source à 20px avec !important -> aligner à 18px */
html body #product .product-cover{border-radius:var(--r-lg) !important}
html body #product .product-cover img,
html body #product .js-qv-product-cover{border-radius:var(--r-lg)}

/* -- Cartes de contenu : 14px -- */
html body .lh-simsteps li{border-radius:var(--r-md)}     /* était 13px */
html body .lh-catseo table{border-radius:var(--r-md)}    /* était 12px */
html body #product .lh-buyspecs .lh-spec{border-radius:var(--r-md)} /* était 12px */
html body .lh-pfeat .fc{border-radius:var(--r-md)}       /* était 16px */
html body .mega .mfeat{border-radius:var(--r-md)}        /* était 16px */
html body #product .thumb{border-radius:var(--r-md) !important}     /* était 12px !important */
/* menus/dropdowns déroulants : mêmes cartes -> 14px (source !important) */
html body .ui-autocomplete.searchbar-autocomplete{border-radius:var(--r-md) !important} /* était 16px */
html body .language-selector .dropdown-menu{border-radius:var(--r-md) !important}       /* était 12px */

/* ------------------------------------------------------------
   3) ESPACEMENT — suppression des paddings asymétriques
   Harmonisation douce : on ne réduit que les valeurs déséquilibrées
   vers leur voisine symétrique (aucun risque de reflow/overflow).
   ------------------------------------------------------------ */
/* .lh-wc : 28px 26px -> 28px symétrique */
html body .lh-wc{padding:var(--sp-7)}
/* .lh-banner : 48px 44px -> 44px, aligné sur le padding du simulateur (44px) */
html body .lh-banner{padding:44px}

/* ===== type ===== */
/* ============================================================
   LIFE — fixes/type.css  ·  ZONE TYPOGRAPHIE (CSS only)
   Échelle de titres unique, poids normalisés (pile système),
   tabular-nums homogène sur tous les prix/chiffres, socle CMS.
   Fichier disjoint : ne touche qu'aux propriétés typographiques.
   Sélecteurs sur-spécifiés + !important pour gagner la cascade.
   ============================================================ */

/* ---------- 1. Tokens d'échelle typographique ---------- */
:root{
  /* Titres — 3 crans H1 (générique / hero / produit gérés à part) */
  --ty-h1: clamp(30px, 4.4vw, 52px);
  --ty-h2: clamp(22px, 3vw, 30px);
  --ty-h3: 19px;
  --ty-h4: 16px;
  /* Tracking titres homogène */
  --ty-track-h1: -.03em;
  --ty-track-h2: -.03em;
  --ty-track-h3: -.02em;
  /* Corps */
  --ty-text: 15px;
  --ty-lead: 16.5px;
  --ty-lh-body: 1.65;
  --ty-lh-lead: 1.55;
  --ty-lh-tight: 1.3;
  /* Sur-lignes / micro-labels — 2 tokens seulement */
  --ty-eyebrow: 11.5px;
  --ty-eyebrow-track: .18em;
  --ty-label-micro: 10px;
  --ty-label-micro-track: .12em;
  /* Poids rendables par la pile système (Helvetica Neue : 400/500/700) */
  --ty-w-body: 400;
  --ty-w-med: 500;
  --ty-w-semi: 600;
  --ty-w-bold: 700;
  --ty-w-black: 800;
}

/* ---------- 2. Poids : neutraliser les fractionnaires 450/750 ---------- */
/* La pile système ne rend pas 450/750 → arrondis nets, hiérarchie préservée. */
html body h1, html body h2, html body h3, html body h4,
html body .h1, html body .h2, html body .h3, html body .h4{
  font-weight: var(--ty-w-bold);
  letter-spacing: -.02em;
}
html body .page-header h1, html body .h1,
html body h1, html body h2, html body .h2{
  font-weight: var(--ty-w-black);
}
/* Newsletter titre : 750 → 800 */
html body .block_newsletter h4,
html body .block_newsletter .h3,
html body .block_newsletter p.h3{
  font-weight: var(--ty-w-black) !important;
}

/* ---------- 3. H1 : échelle unique + fix pages génériques (22px→scale) ---------- */
/* Pages génériques (contact, connexion, compte, CMS) qui retombaient à 22px. */
html body .page-header h1,
html body #content .page-header h1,
html body .page-header .h1,
html body #main .page-header h1{
  font-size: var(--ty-h1);
  line-height: 1.06;
  letter-spacing: var(--ty-track-h1);
  font-weight: var(--ty-w-black);
  color: var(--fg);
}
/* Tracking H1 homogène sur les variantes vitrines (tailles conservées). */
html body .lh-hero h1,
html body .lh-cathero .lh-h1,
html body #product #main h1,
html body #product h1.h1{
  letter-spacing: var(--ty-track-h1);
}

/* ---------- 4. H2 : bannir les tailles fixes, tout en fluide ---------- */
/* « Accessoires » produit figé à 24px → clamp aligné sur les autres H2. */
html body #product .product-accessories h2,
html body #product .product-accessories .products-section-title{
  font-size: var(--ty-h2);
  letter-spacing: var(--ty-track-h2);
  line-height: 1.15;
  font-weight: var(--ty-w-black);
}

/* ---------- 5. H3 : ramener 5 tailles (16.5/18/19/20) à un seul cran ---------- */
html body .lh-eco h3,
html body .lh-wc h3,
html body .lh-sol h3,
html body .lh-pfeat .fc h3,
html body .lh-catseo h3{
  font-size: var(--ty-h3);
  line-height: var(--ty-lh-tight);
  letter-spacing: var(--ty-track-h3);
  font-weight: var(--ty-w-bold);
}

/* ---------- 6. Sur-lignes (eyebrows) : 8 valeurs → 1 token ---------- */
html body .life-home .eyebrow,
html body .lh-psec .eyebrow,
html body #product .eyebrow,
html body .eyebrow{
  font-size: var(--ty-eyebrow);
  letter-spacing: var(--ty-eyebrow-track);
  text-transform: uppercase;
  font-weight: var(--ty-w-bold);
  line-height: 1.2;
}
/* Micro-labels de specs (clé) : 9.5/10px + tracking hétérogène → 1 token. */
html body .lh-pc .lh-spec .k,
html body #product .lh-buyspecs .lh-spec .k,
html body .lh-spec .k{
  font-size: var(--ty-label-micro);
  letter-spacing: var(--ty-label-micro-track);
  text-transform: uppercase;
  font-weight: var(--ty-w-bold);
}

/* ---------- 7. tabular-nums : homogène sur TOUS les prix / chiffres / specs ---------- */
html body .price,
html body .product-price,
html body .current-price,
html body .current-price span,
html body .current-price-value,
html body .regular-price,
html body [itemprop="price"],
html body .lh-hero .buy .price b,
html body .lh-pc .now,
html body .lh-pc .was,
html body .lh-pc .lh-spec .v,
html body .lh-spec .v,
html body #product .lh-buyspecs .lh-spec .v,
html body #product .lh-fullspecs .v,
html body #product .current-price .price,
html body #product .current-price [itemprop="price"],
html body .lh-catseo table td,
html body #product .data-sheet dd.value,
html body .cart-total .value,
html body .num,
html body .life-home .num{
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1;
}

/* ---------- 8. Socle corps long-format (lecture) ---------- */
/* Contenus lus en continu : CMS, SEO catégorie, onglets & description produit. */
html body #product .tab-pane,
html body #product .product-description-short,
html body .lh-catseo.rte-content{
  font-size: var(--ty-text);
  line-height: var(--ty-lh-body);
}
/* Chapô / lead : un seul cran. */
html body .lh-hero .sub,
html body .lh-catlead{
  font-size: var(--ty-lead);
  line-height: var(--ty-lh-lead);
}

/* ---------- 9. Socle typo CMS générique (page-cms) ---------- */
/* {$cms.content nofilter} retombait sur les défauts PrestaShop clairs.
   Ici : typographie + mesure de ligne uniquement (couleurs gérées ailleurs). */
html body #content.page-cms,
html body .page-cms{
  font-size: var(--ty-text);
  line-height: var(--ty-lh-body);
}
html body .page-cms h1,
html body .page-cms .page-heading{
  font-size: var(--ty-h1);
  line-height: 1.08;
  letter-spacing: var(--ty-track-h1);
  font-weight: var(--ty-w-black);
  margin: 0 0 18px;
}
html body .page-cms h2{
  font-size: var(--ty-h2);
  line-height: 1.2;
  letter-spacing: var(--ty-track-h2);
  font-weight: var(--ty-w-black);
  margin: 34px 0 12px;
}
html body .page-cms h3,
html body .page-cms .page-subheading{
  font-size: var(--ty-h3);
  line-height: var(--ty-lh-tight);
  letter-spacing: var(--ty-track-h3);
  font-weight: var(--ty-w-bold);
  margin: 26px 0 10px;
}
html body .page-cms h4{
  font-size: var(--ty-h4);
  line-height: 1.35;
  font-weight: var(--ty-w-bold);
  margin: 22px 0 8px;
}
html body .page-cms p,
html body .page-cms li{
  font-size: var(--ty-text);
  line-height: var(--ty-lh-body);
  max-width: 76ch;
}
html body .page-cms ul,
html body .page-cms ol{
  line-height: var(--ty-lh-body);
  max-width: 78ch;
}
html body .page-cms strong,
html body .page-cms b{
  font-weight: var(--ty-w-bold);
}
/* Défensif : balises vides du HTML CMS legacy → pas de trous d'espacement. */
html body .page-cms :is(p, h2, h3, h4):empty{
  display: none;
}

/* ---------- 10. Antialiasing homogène ---------- */
html body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== color ===== */
/* =============================================================
   ZONE : COULEURS & CONTRASTE  (fixes/color.css)
   Objectif : éradiquer tout off-brand hérité du thème classic
   PrestaShop (cyan #24b9d7, gris illisibles #6c868e/#7a7a7a/#555,
   vert-sur-vert du récap panier) et remettre la charte LIFE :
   fond noir, texte clair, vert #00E676 réservé au fonctionnel.
   Sélecteurs sur-spécifiés pour battre theme.css sans !important
   quand possible, avec !important sur les valeurs en dur tenaces.
   Un seul fichier, périmètre disjoint des autres agents.
   ============================================================= */

/* ---------------------------------------------------------------
   1) LIENS CYAN (#24b9d7) hérités du reset classic « a{color} »
   On ne touche PAS aux liens déjà stylés par le thème (composants
   .lh-*, header, footer, menu) : on cible uniquement les zones de
   contenu natif PrestaShop où le cyan fuit.
   --------------------------------------------------------------- */
html body #blockcart-modal a,
html body #blockcart-modal .product-name,
html body #blockcart-modal .product-name a,
html body #notifications a,
html body .notification a,
html body .js-cart a.product-name,
html body .rte a,
html body .rte-content a,
html body .product-description a,
html body #product-description-short a,
html body .cms-block a,
html body .page-cms a,
html body .block-categories a,
html body .cart-summary a,
html body .cart-detailed-totals a,
html body .cart-item .product-line-info a,
html body .page-customer-account a:not(.btn):not(.lh-btn),
html body .page-my-account a:not(.btn):not(.lh-btn),
html body #history a:not(.btn),
html body .addresses a:not(.btn),
html body #address a:not(.btn),
html body .order-confirmation a:not(.btn) {
  color: var(--fg);
}
html body #blockcart-modal a:hover,
html body #blockcart-modal .product-name a:hover,
html body #notifications a:hover,
html body .notification a:hover,
html body .rte a:hover,
html body .rte-content a:hover,
html body .product-description a:hover,
html body #product-description-short a:hover,
html body .cms-block a:hover,
html body .page-cms a:hover,
html body .block-categories a:hover,
html body .cart-summary a:hover,
html body .cart-detailed-totals a:hover,
html body .cart-item .product-line-info a:hover,
html body .page-customer-account a:not(.btn):not(.lh-btn):hover,
html body .page-my-account a:not(.btn):not(.lh-btn):hover,
html body #history a:not(.btn):hover,
html body .addresses a:not(.btn):hover,
html body #address a:not(.btn):hover,
html body .order-confirmation a:not(.btn):hover {
  color: var(--acc);
}

/* Liens éditoriaux dans le corps de texte (RTE/CMS) : discrets,
   soulignés, accent au survol — jamais cyan. */
html body .rte a,
html body .rte-content a,
html body .page-cms a,
html body .product-description a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-2);
}
html body .rte a:hover,
html body .rte-content a:hover,
html body .page-cms a:hover,
html body .product-description a:hover {
  text-decoration-color: var(--acc);
}

/* ---------------------------------------------------------------
   2) BOUTON « CHOISIR UN FICHIER » cyan/blanc -> dark + accent vert
   Couvre : bouton natif du champ file (WebKit/Firefox), le widget
   .custom-file du thème classic (fond #f6f6f6, texte #7a7a7a).
   --------------------------------------------------------------- */
html body input[type="file"] {
  color: var(--fg-dim);
}
html body input[type="file"]::-webkit-file-upload-button,
html body input[type="file"]::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 16px;
  margin-right: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
html body input[type="file"]::-webkit-file-upload-button:hover,
html body input[type="file"]::file-selector-button:hover {
  border-color: var(--acc);
  color: var(--acc);
}

/* Widget .custom-file du thème classic (fonds clairs en dur) */
html body .custom-file,
html body .custom-file-control,
html body .custom-file-control::before {
  background: var(--panel-2) !important;
  color: var(--fg-dim) !important;
  border-color: var(--line-2) !important;
}
html body .custom-file button,
html body .custom-file .btn {
  background: var(--panel-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 8px !important;
  text-transform: none !important;
}
html body .custom-file button:hover,
html body .custom-file .btn:hover {
  border-color: var(--acc) !important;
  color: var(--acc) !important;
}
/* Libellé du nom de fichier choisi */
html body .custom-file-control::after,
html body .file-name {
  color: var(--fg-dim) !important;
}

/* ---------------------------------------------------------------
   3) BANDEAU « Il y a X article(s) » vert-sur-vert -> lisible
   Le sélecteur classic .cart-products-count (badge vert du header)
   déborde sur le <p> du récap modal : ici on le neutralise en
   simple intitulé lisible, sans pastille verte.
   Le badge compteur du header (span dans le blockcart) reste vert.
   --------------------------------------------------------------- */
html body #blockcart-modal .cart-content p.cart-products-count,
html body .cart-content p.cart-products-count {
  background: transparent !important;
  color: var(--fg) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  display: block !important;
}
/* Libellés / valeurs du récap modal : hiérarchie lisible */
html body #blockcart-modal .cart-content p,
html body #blockcart-modal .cart-content .label {
  color: var(--fg-dim) !important;
}
html body #blockcart-modal .cart-content .value,
html body #blockcart-modal .cart-content .product-total .value {
  color: var(--fg) !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------------
   4) GRIS TROP SOMBRES (illisibles) -> éclaircir vers la charte
   theme.css sème #6c868e / #7a7a7a / #555 / #676C67 en dur sur des
   textes secondaires -> contraste sous WCAG AA sur fond noir.
   --------------------------------------------------------------- */
html body .cart-products-count,
html body .product-quantity,
html body .product-price + span,
html body small.text-muted,
html body .text-muted,
html body .cart-summary .label,
html body .cart-detailed-totals .label {
  color: var(--fg-dim) !important;
}
/* Placeholder de recherche / champs natifs classic (gris #ccc/#999) */
html body input::placeholder,
html body textarea::placeholder,
html body .form-control::placeholder {
  color: var(--fg-mute) !important;
  opacity: 1;
}

/* ---------------------------------------------------------------
   5) VERT NÉON HORS FONCTIONNEL : liens survolés natifs cyan->vert
   déjà couverts ; ici on s'assure que les états focus des liens de
   contenu utilisent l'accent (fonctionnel), pas le cyan résiduel.
   --------------------------------------------------------------- */
html body #notifications a:focus,
html body .rte a:focus,
html body .rte-content a:focus,
html body .product-description a:focus,
html body #blockcart-modal a:focus {
  color: var(--acc);
  outline: none;
}

/* ===== forms ===== */
/* ============================================================
   FIXES — ZONE : BOUTONS & CHAMPS NATIFS
   Skinne en dark les contrôles PrestaShop/Bootstrap non stylés :
   toggle mot de passe (« Afficher »), input file (filestyle),
   selects natifs, boutons secondaires/désactivés.
   + états hover / focus-visible / active cohérents, cibles >= 44px.
   Sélecteurs sur-spécifiés (html body …) pour gagner sur le thème.
   Palette : bg #0B0C0B / panel #161816 / panel-2 #1B1E1B
             fg #EEF1EE / dim #A7ADA7 / mute #8B918B / acc #00E676
   ============================================================ */

/* ---------------------------------------------------------------
   0) FOCUS CLAVIER GLOBAL (WCAG 2.4.7) — anneau vert cohérent.
      Ne s'affiche qu'au clavier (:focus-visible), jamais à la souris.
--------------------------------------------------------------- */
html body a:focus-visible,
html body button:focus-visible,
html body .btn:focus-visible,
html body .lh-btn:focus-visible,
html body [role="button"]:focus-visible,
html body label.btn:focus-visible,
html body summary:focus-visible {
  outline: 2px solid var(--acc, #00E676) !important;
  outline-offset: 2px !important;
  border-radius: 10px;
}

/* ---------------------------------------------------------------
   1) FOCUS DES CHAMPS — uniforme sur tout le site (remplace le
      focus bleu Bootstrap qui persiste hors tunnel).
--------------------------------------------------------------- */
html body .form-control:focus,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
html body select:focus,
html body select.form-control:focus,
html body select.form-control-select:focus,
html body textarea:focus,
html body .input-group input:focus {
  border-color: var(--acc, #00E676) !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .16) !important;
  outline: none !important;
}

/* Placeholder dark cohérent (au cas où un champ échappe à life-all) */
html body input::placeholder,
html body textarea::placeholder { color: var(--fg-mute, #8B918B); opacity: 1; }

/* Neutralise l'autofill blanc/bleu WebKit (fond clair illisible) */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg, #EEF1EE) !important;
  caret-color: var(--fg, #EEF1EE);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2, #1B1E1B) inset !important;
  box-shadow: 0 0 0 1000px var(--panel-2, #1B1E1B) inset !important;
  border-color: var(--line-2, rgba(255,255,255,.16)) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------------------------------------------------------------
   2) SELECTS NATIFS — chevron clair custom (la flèche PS sombre
      disparaît sur fond noir), fond dark, hauteur tactile.
--------------------------------------------------------------- */
html body select,
html body select.form-control,
html body select.form-control-select,
html body .custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--panel-2, #1B1E1B) !important;
  color: var(--fg, #EEF1EE) !important;
  border: 1px solid var(--line-2, rgba(255,255,255,.16)) !important;
  border-radius: 10px !important;
  /* chevron A7ADA7 en data-URI, aucune requête externe */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A7ADA7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  padding-right: 38px !important;
  min-height: 44px;
  cursor: pointer;
}
html body select:hover,
html body select.form-control:hover,
html body select.form-control-select:hover { border-color: var(--fg-mute, #8B918B) !important; }

/* Les options héritent du dark (Chrome/Firefox rendent la liste OS,
   mais on force ce qu'on peut) */
html body select option,
html body select optgroup {
  background: var(--panel, #161816);
  color: var(--fg, #EEF1EE);
}
/* IE/Edge : masque la flèche native doublée */
html body select::-ms-expand { display: none; }

/* ---------------------------------------------------------------
   3) INPUT FILE — bootstrap-filestyle (« Choisir un fichier »).
      Le champ texte disabled + le bouton label passent en dark.
--------------------------------------------------------------- */
html body .bootstrap-filestyle.input-group,
html body .input-group.bootstrap-filestyle { border-radius: 10px; }

/* le champ texte (nom de fichier) — disabled mais doit rester lisible */
html body .bootstrap-filestyle input.form-control,
html body input.filestyle {
  background: var(--panel-2, #1B1E1B) !important;
  color: var(--fg-dim, #A7ADA7) !important;
  border: 1px solid var(--line-2, rgba(255,255,255,.16)) !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  min-height: 44px;
  -webkit-text-fill-color: var(--fg-dim, #A7ADA7); /* garde lisible en disabled */
  opacity: 1 !important;
}

/* le bouton label déclencheur */
html body .group-span-filestyle .btn,
html body .group-span-filestyle label.btn,
html body .group-span-filestyle .btn-default,
html body label.btn-file,
html body .filestyle + .group-span-filestyle .btn {
  background: var(--panel, #161816) !important;
  color: var(--fg, #EEF1EE) !important;
  border: 1px solid var(--line-2, rgba(255,255,255,.16)) !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 600 !important;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease;
}
html body .group-span-filestyle .btn:hover,
html body .group-span-filestyle label.btn:hover {
  background: var(--panel-2, #1B1E1B) !important;
  border-color: var(--fg-mute, #8B918B) !important;
  color: var(--fg, #EEF1EE) !important;
}
html body .group-span-filestyle .buttonText { color: inherit !important; }

/* Fallback : input file NATIF (si le JS filestyle n'a pas tourné)
   — stylise le bouton système ::file-selector-button */
html body input[type="file"]:not(.filestyle) {
  color: var(--fg-dim, #A7ADA7);
  font-size: 14px;
}
html body input[type="file"]:not(.filestyle)::-webkit-file-upload-button,
html body input[type="file"]:not(.filestyle)::file-selector-button {
  background: var(--panel, #161816);
  color: var(--fg, #EEF1EE);
  border: 1px solid var(--line-2, rgba(255,255,255,.16));
  border-radius: 10px;
  padding: 10px 16px;
  margin-right: 12px;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
html body input[type="file"]:not(.filestyle)::-webkit-file-upload-button:hover,
html body input[type="file"]:not(.filestyle)::file-selector-button:hover {
  background: var(--panel-2, #1B1E1B);
  border-color: var(--fg-mute, #8B918B);
}

/* ---------------------------------------------------------------
   4) TOGGLE MOT DE PASSE (« Afficher » / « Masquer ») —
      button[data-action=show-password] dans .input-group-btn.
      Dark, jointif au champ, cible tactile pleine hauteur.
--------------------------------------------------------------- */
html body .input-group .input-group-btn > button.btn,
html body .input-group-btn button[data-action="show-password"],
html body button[data-action="show-password"],
html body .show-password button {
  background: var(--panel, #161816) !important;
  color: var(--fg-dim, #A7ADA7) !important;
  border: 1px solid var(--line-2, rgba(255,255,255,.16)) !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  min-height: 44px;
  padding: 0 16px !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
html body .input-group .input-group-btn > button.btn:hover,
html body button[data-action="show-password"]:hover {
  background: var(--panel-2, #1B1E1B) !important;
  color: var(--acc, #00E676) !important;
  border-color: var(--fg-mute, #8B918B) !important;
}
/* le champ mot de passe reste jointif à gauche du bouton */
html body .input-group .form-control.js-visible-password {
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
}
/* pas de doublon de bordure au focus du groupe */
html body .input-group.js-parent-focus:focus-within .form-control { border-color: var(--acc, #00E676) !important; }

/* ---------------------------------------------------------------
   5) BOUTONS SECONDAIRES / NATIFS non skinnés (btn-default,
      outline-secondary, .btn nu) — ghost dark unifié.
--------------------------------------------------------------- */
html body .btn.btn-default,
html body .btn-outline-secondary,
html body .btn-outline-dark,
html body .btn-light,
html body .btn-default:not(.group-span-filestyle .btn) {
  background: transparent !important;
  color: var(--fg, #EEF1EE) !important;
  border: 1px solid var(--line-2, rgba(255,255,255,.16)) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
html body .btn.btn-default:hover,
html body .btn-outline-secondary:hover,
html body .btn-outline-dark:hover,
html body .btn-light:hover {
  background: var(--panel-2, #1B1E1B) !important;
  border-color: var(--fg, #EEF1EE) !important;
  color: var(--fg, #EEF1EE) !important;
}

/* ---------------------------------------------------------------
   6) ÉTAT :active (retour tactile) sur tous les boutons.
--------------------------------------------------------------- */
html body .btn:active,
html body .lh-btn:active,
html body button[data-action="show-password"]:active,
html body .group-span-filestyle .btn:active,
html body input[type="submit"]:active,
html body input[type="button"]:active {
  transform: translateY(1px);
  filter: brightness(.95);
}

/* ---------------------------------------------------------------
   7) ÉTAT :disabled — un bouton inactif ne doit pas paraître
      cliquable (ex. « Payer » désactivé qui reste vert plein).
--------------------------------------------------------------- */
html body .btn:disabled,
html body .btn.disabled,
html body button:disabled,
html body input[type="submit"]:disabled,
html body .btn-primary:disabled,
html body .btn-primary.disabled {
  background: var(--panel-2, #1B1E1B) !important;
  border-color: var(--line, rgba(255,255,255,.09)) !important;
  color: var(--fg-mute, #8B918B) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html body input:disabled:not(.filestyle):not(.form-control),
html body textarea:disabled,
html body select:disabled {
  background: var(--bg-2, #111311) !important;
  color: var(--fg-mute, #8B918B) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------
   8) CIBLES TACTILES >= 44px sur mobile pour les contrôles natifs.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  html body .btn,
  html body input[type="submit"],
  html body input[type="button"],
  html body button[data-action="show-password"],
  html body .group-span-filestyle .btn,
  html body select,
  html body .form-control:not(textarea) {
    min-height: 44px;
  }
  /* évite que le texte du bouton file dépasse en 2 lignes serrées */
  html body .bootstrap-filestyle { flex-wrap: nowrap; }
}

/* ===== media ===== */
/* ============================================================
   LIFE — fixes ZONE : IMAGES / MEDIA
   Fichier dédié agent MEDIA. Ne touche qu'aux images, vignettes,
   galeries, visuels mega-menu et aux boutons de partage.
   Dark cohérent (#0A0A0A / panels sombres / accent #00E676 fonctionnel).
   Sélecteurs sur-spécifiés pour l'emporter sur le thème natif.
   ============================================================ */

/* ------------------------------------------------------------
   1) AUCUN FOND BLANC DERRIÈRE UNE IMAGE (thème sombre)
   Les <img> produit sont des packshots détourés : le fond doit être
   TRANSPARENT, jamais #fff. On neutralise tous les fonds clairs hérités.
   ------------------------------------------------------------ */
html body .lh-pc .ph img,
html body .product-miniature img,
html body .product-miniature .thumbnail-container img,
html body .mega .mfeat img,
html body #product .product-cover img,
html body #product .js-qv-product-cover,
html body #product .thumb,
html body #product .thumbnails img,
html body #product .product-images img,
html body .lh-media img,
html body .lh-split .media img{
  background:transparent !important;
}

/* Vignettes d'autocomplétion recherche : carré blanc -> tuile sombre.
   (override direct de life-all.css:634 background:#fff) */
html body .ui-autocomplete.searchbar-autocomplete img{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:9px;
  object-fit:contain;
}

/* ------------------------------------------------------------
   2) COHÉRENCE RATIOS / TAILLES DES VIGNETTES
   Toutes les vignettes de packshot : ratio carré stable, contain,
   centrées. Empêche la distorsion et le CLS quand un visuel n'est
   pas exactement 800×800.
   ------------------------------------------------------------ */

/* Carte produit (grille home + catégorie + recherche) : zone image égale */
html body .lh-pc .ph{
  aspect-ratio:auto !important;    /* garde la hauteur fixe existante (210px) */
  height:210px !important;         /* conteneur fixe = l'image ne peut pas déborder sur le titre */
  overflow:hidden !important;
  display:grid !important;
  place-items:center !important;
}
html body .lh-pc .ph img,
html body .product-miniature .thumbnail-container img{
  width:auto !important;
  height:auto !important;
  max-width:96% !important;
  max-height:190px !important;
  object-fit:contain !important;
  object-position:center;
  margin:0 auto;
}

/* Visuel produit du mega-menu : même gabarit sur les 4 colonnes */
html body .mega .mfeat img{
  width:100% !important;
  height:132px !important;
  object-fit:contain !important;
  object-position:center;
  border-radius:10px;
}

/* Vignettes galerie fiche produit : carré strict, jamais déformé */
html body #product .thumb{
  width:80px !important;
  height:80px !important;
  object-fit:contain !important;
  object-position:center;
}

/* Cover produit : ratio carré premium, image centrée sans débordement */
html body #product .product-cover img,
html body #product .js-qv-product-cover{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  object-fit:contain !important;
  object-position:center;
}

/* ------------------------------------------------------------
   3) PLACEHOLDER « SANS PHOTO » (no_picture)
   Le no_picture natif PrestaShop est une image CLAIRE : on l'atténue
   pour qu'elle ne fasse pas une tache blanche sur les cartes sombres.
   ------------------------------------------------------------ */
html body .lh-pc .ph img[src*="no_picture"],
html body .product-miniature img[src*="no_picture"],
html body #product .product-cover img[src*="no_picture"]{
  opacity:.28 !important;
  filter:grayscale(1) brightness(1.4);
}

/* ------------------------------------------------------------
   4) BOUTONS « PARTAGER » (réseaux sociaux)
   Sprite classic absent en dark -> cercles vides. On les reconstruit
   proprement en boutons circulaires sombres avec glyphe SVG masqué,
   muted au repos, accent au survol. Cohérent avec le reste du thème.
   ------------------------------------------------------------ */
html body #product .social-sharing ul{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
html body #product .social-sharing li{
  width:38px;
  height:38px;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  background:var(--panel) !important;
  border:1px solid var(--line-2) !important;
  display:grid;
  place-items:center;
  transition:border-color .15s,background .15s;
}
html body #product .social-sharing li:hover{
  border-color:var(--acc) !important;
  background:var(--panel-2) !important;
}
/* Le lien remplit le cercle ; le texte reste masqué (.text-hide natif) */
html body #product .social-sharing li a{
  display:block;
  width:18px;
  height:18px;
  padding:0 !important;
  background-color:var(--fg-mute);   /* couleur du glyphe (via mask) */
  border:0 !important;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  transition:background-color .15s;
  /* glyphe « partage » générique par défaut (réseaux non listés) */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8a3 3 0 10-2.8-4L9 7.2a3 3 0 100 3.6l6.2 3.2A3 3 0 1018 16a3 3 0 00-2.1.9L9.9 13.7a3 3 0 000-3.4L15.9 7A3 3 0 0018 8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8a3 3 0 10-2.8-4L9 7.2a3 3 0 100 3.6l6.2 3.2A3 3 0 1018 16a3 3 0 00-2.1.9L9.9 13.7a3 3 0 000-3.4L15.9 7A3 3 0 0018 8z'/%3E%3C/svg%3E");
}
html body #product .social-sharing li:hover a{
  background-color:var(--acc);
}
/* Facebook */
html body #product .social-sharing li.facebook a{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 21v-7h2.4l.4-2.8h-2.8V9.4c0-.8.2-1.4 1.4-1.4h1.5V5.6c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2H8v2.8h2.5V21z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 21v-7h2.4l.4-2.8h-2.8V9.4c0-.8.2-1.4 1.4-1.4h1.5V5.6c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2H8v2.8h2.5V21z'/%3E%3C/svg%3E");
}
/* X / Twitter */
html body #product .social-sharing li.twitter a{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.5 3h3l-6.6 7.5L21.6 21h-5.4l-4.2-5.5L7 21H4l7.1-8.1L2.9 3h5.5l3.8 5.1zM16.4 19.2h1.7L7.7 4.7H5.9z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.5 3h3l-6.6 7.5L21.6 21h-5.4l-4.2-5.5L7 21H4l7.1-8.1L2.9 3h5.5l3.8 5.1zM16.4 19.2h1.7L7.7 4.7H5.9z'/%3E%3C/svg%3E");
}
/* Pinterest */
html body #product .social-sharing li.pinterest a{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 00-3.3 17.4c-.1-.8-.1-1.9.1-2.7l1-4.5s-.3-.5-.3-1.3c0-1.3.7-2.2 1.6-2.2.8 0 1.1.6 1.1 1.3 0 .8-.5 2-.8 3.1-.2 1 .5 1.7 1.4 1.7 1.7 0 2.9-2.2 2.9-4.7 0-1.9-1.3-3.4-3.7-3.4a4.2 4.2 0 00-4.4 4.2c0 .8.3 1.4.6 1.8.1.1.1.3.1.4l-.2.8c0 .2-.2.3-.4.2-1.2-.5-1.7-1.8-1.7-3.2 0-2.4 2-5.2 6-5.2 3.2 0 5.3 2.3 5.3 4.7 0 3.2-1.8 5.6-4.5 5.6-.9 0-1.7-.5-2-1l-.5 2.1c-.2.7-.6 1.5-1 2A9 9 0 1012 3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a9 9 0 00-3.3 17.4c-.1-.8-.1-1.9.1-2.7l1-4.5s-.3-.5-.3-1.3c0-1.3.7-2.2 1.6-2.2.8 0 1.1.6 1.1 1.3 0 .8-.5 2-.8 3.1-.2 1 .5 1.7 1.4 1.7 1.7 0 2.9-2.2 2.9-4.7 0-1.9-1.3-3.4-3.7-3.4a4.2 4.2 0 00-4.4 4.2c0 .8.3 1.4.6 1.8.1.1.1.3.1.4l-.2.8c0 .2-.2.3-.4.2-1.2-.5-1.7-1.8-1.7-3.2 0-2.4 2-5.2 6-5.2 3.2 0 5.3 2.3 5.3 4.7 0 3.2-1.8 5.6-4.5 5.6-.9 0-1.7-.5-2-1l-.5 2.1c-.2.7-.6 1.5-1 2A9 9 0 1012 3z'/%3E%3C/svg%3E");
}

/* Libellé « Partager » aligné avec les cercles */
html body #product .social-sharing{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
html body #product .social-sharing>span:first-child,
html body #product .social-sharing .label{
  color:var(--fg-dim) !important;
  font-size:12.5px;
  font-weight:600;
}

/* ===== states ===== */
/* =====================================================================
   ZONE: ÉTATS VIDES / LISTINGS / ALERTES NATIVES  ->  states.css
   Passe en dark tous les composants PrestaShop natifs restés en FOND BLANC :
   - page catégorie / "Meilleures ventes" vide (.page-not-found dans #products)
   - recherche sans résultat / 404 (.page-not-found)
   - panier vide (body.cart-empty, .no-items, lien "Continuer mes achats")
   - messages natifs .alert-info / -success / -warning / -danger
   Sélecteurs sur-spécifiés (html body ...) pour battre theme.css.
   Tokens: --panel #161816 / --panel-2 #1B1E1B / --fg #EEF1EE /
           --fg-dim #A7ADA7 / --line / --acc #00E676 / --radius 12px
   ===================================================================== */

/* ------------------------------------------------------------------
   1) BLOC "ÉTAT VIDE"  (.page-not-found)
   theme.css: .page-not-found{...color:#7a7a7a;background:#fff}
   Usages: listing vide (#products .page-not-found), recherche vide, 404.
   ------------------------------------------------------------------ */
html body .page-not-found,
html body #products .page-not-found,
html body #content.page-not-found,
html body #js-product-list .page-not-found {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--fg-dim) !important;
  max-width: 640px;
  margin: 24px auto !important;
  padding: 40px 28px !important;
  text-align: center;
  overflow: visible;
  box-shadow: none !important;
}

html body .page-not-found h1,
html body .page-not-found h2,
html body .page-not-found h3,
html body .page-not-found h4,
html body #products .page-not-found h4,
html body #js-product-list .page-not-found h4 {
  color: var(--fg) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: .01em;
  margin: 0 0 .5rem !important;
}

html body .page-not-found p,
html body #products .page-not-found p,
html body #js-product-list .page-not-found p {
  color: var(--fg-dim) !important;
  font-size: .95rem !important;
  line-height: 1.6;
  margin: 0 auto !important;
  max-width: 46ch;
}

/* champ de recherche embarqué dans l'état vide -> dark */
html body .page-not-found .search-widget input,
html body #products .page-not-found .search-widget input {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg) !important;
  border-radius: 8px !important;
}
html body .page-not-found .search-widget input::placeholder {
  color: var(--fg-mute) !important;
}
html body .page-not-found .search-widget button {
  color: var(--fg-dim) !important;
}

/* ------------------------------------------------------------------
   2) PANIER VIDE  (body.cart-empty)
   Les .card sont déjà passées en --panel par life-all.css ; on durcit
   ici les éléments internes + le lien "Continuer mes achats" (cyan natif).
   ------------------------------------------------------------------ */
html body.cart-empty .cart-container,
html body.cart-empty .cart-container .card-block,
html body.cart-empty .cart-summary,
html body.cart-empty .no-items {
  background: transparent !important;
  color: var(--fg) !important;
}
html body.cart-empty .cart-container .card-block > h1,
html body.cart-empty .cart-container h1 {
  color: var(--fg) !important;
}
html body.cart-empty .no-items {
  display: block !important;
  color: var(--fg-dim) !important;
  font-size: 1rem;
  padding: 8px 0 4px !important;
}

/* lien "Continuer mes achats" (a.label) : theme.css -> #232323 / hover cyan #24b9d7 */
html body.cart-empty a.label,
html body.page-cart a.label,
html body .cart-grid a.label {
  color: var(--fg-dim) !important;
  font-weight: 600 !important;
}
html body.cart-empty a.label:hover,
html body.page-cart a.label:hover,
html body .cart-grid a.label:hover {
  color: var(--acc) !important;
}
html body.cart-empty a.label .material-icons,
html body .cart-grid a.label .material-icons {
  color: inherit !important;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   3) ALERTES / MESSAGES NATIFS PrestaShop
   theme.css sert des fonds clairs (info #d9edf7, success #dff0d8,
   warning rgba(255,154,82,.3) texte #232323, danger #f2dede).
   -> variantes dark tintées, texte clair, icônes lisibles.
   NB: on ne force PAS `display` (le tooltip JS .alert-danger reste piloté
   par son propre display:none).
   ------------------------------------------------------------------ */
html body .alert,
html body #notifications .alert,
html body #content .alert,
html body #main .alert {
  border-radius: var(--radius) !important;
  border-style: solid !important;
  border-width: 1px !important;
  color: var(--fg) !important;
  box-shadow: none !important;
}

/* Info -> panneau neutre (le vert est réservé au fonctionnel) */
html body .alert-info,
html body #notifications .alert-info,
html body #content .alert-info {
  background-color: var(--panel-2) !important;
  border-color: var(--line-2) !important;
  color: var(--fg) !important;
}
html body .alert-info a,
html body .alert-info .alert-link {
  color: var(--acc) !important;
}

/* Success -> tint vert de marque (positif = fonctionnel) */
html body .alert-success,
html body #notifications .alert-success,
html body #content .alert-success {
  background-color: rgba(0, 230, 118, .09) !important;
  border-color: rgba(0, 230, 118, .38) !important;
  color: var(--fg) !important;
}
html body .alert-success .alert-link,
html body .alert-success a {
  color: var(--acc) !important;
}
html body .alert-success hr { border-top-color: rgba(0, 230, 118, .25) !important; }

/* Warning -> tint ambre lisible sur dark */
html body .alert-warning,
html body #notifications .alert-warning,
html body #content .alert-warning {
  background-color: rgba(255, 176, 32, .12) !important;
  border-color: rgba(255, 176, 32, .42) !important;
  color: var(--fg) !important;
}
html body .alert-warning .alert-text { color: var(--fg) !important; }
html body .alert-warning .material-icons { color: #ffb020 !important; }
html body .alert-warning .alert-link,
html body .alert-warning a { color: #ffb020 !important; }
html body .alert-warning hr { border-top-color: rgba(255, 176, 32, .3) !important; }

/* Danger -> tint rouge lisible ; on préserve le texte blanc du tooltip */
html body .alert-danger,
html body #notifications .alert-danger,
html body #content .alert-danger {
  background-color: rgba(255, 86, 86, .12) !important;
  border-color: rgba(255, 86, 86, .45) !important;
  color: var(--fg) !important;
}
html body .alert-danger .alert-link,
html body .alert-danger a { color: #ff7b7b !important; }
html body .alert-danger hr { border-top-color: rgba(255, 86, 86, .32) !important; }

/* Icône générique d'alerte : garder lisible */
html body .alert .material-icons { vertical-align: middle; }

/* ------------------------------------------------------------------
   4) MESSAGE "AUCUN PRODUIT" / listings comprimés & états divers
   ------------------------------------------------------------------ */
/* wrapper de listing vide : pas de fond blanc résiduel */
html body #js-product-list,
html body #js-product-list-top,
html body #js-product-list-bottom {
  background: transparent !important;
}

/* bloc "products-selection" / total quand liste vide */
html body #products .page-not-found .search-widget form {
  margin-top: 12px;
}

/* pagination / "aucune page" et libellés secondaires restent lisibles */
html body #js-product-list .page-not-found .search-widget {
  display: inline-block;
  float: none;
}

/* ===== home ===== */
/* ============================================================
   ACCUEIL — fixes/home.css
   Zone : page d'accueil (.life-home) uniquement.
   Édite index.tpl + ce fichier. Disjoint de system.css
   (qui possède déjà --maxw, rayons des cartes, padding/rayon
   des bannières .lh-banner) : on N'Y TOUCHE PAS ici.
   Rôle propre à l'accueil : rythme vertical inter-sections +
   harmonisation des gouttières de grilles de cartes.
   Sélecteurs sur-spécifiés (html body .life-home …) pour gagner
   sur life-all.css sans dépendre de l'ordre de chargement.
   Dark cohérent (palette héritée de :root life-all).
   ============================================================ */

/* ------------------------------------------------------------
   1) RYTHME VERTICAL INTER-SECTIONS — un seul écart
   life-all impose .life-home section{padding:76px 0}. L'accueil
   met padding-top:0 en inline sur chaque section qui suit, pour
   n'obtenir qu'un seul écart (le padding-bottom de la précédente).
   On aligne cet écart sur le token cross-page --gap-section (64px,
   défini par system.css) afin que home, catégorie et produit
   respirent identiquement. Le padding-top:0 inline reste prioritaire.
   NB : l'oubli de padding-top:0 sur la section « Ce qu'il y a à
   l'intérieur » (double écart) est corrigé dans index.tpl.
   ------------------------------------------------------------ */
html body .life-home section{padding:var(--gap-section,64px) 0}
@media(max-width:600px){
  html body .life-home section{padding:40px 0}
}

/* ------------------------------------------------------------
   2) GOUTTIÈRES DE GRILLES DE CARTES — valeur unique
   Les grilles de cartes de contenu de l'accueil avaient des
   gouttières disparates (écosystème 16, « intérieur » 16,
   solutions 20). On les unifie sur --sp-5 (20px, token system),
   pour un maillage régulier d'une grille à l'autre.
   Scopé .life-home : ne touche pas la grille produit partagée
   avec la page catégorie (gérée ailleurs).
   ------------------------------------------------------------ */
html body .life-home .lh-eco{gap:var(--sp-5,20px)}
html body .life-home .lh-why{gap:var(--sp-5,20px)}
html body .life-home .lh-solutions{gap:var(--sp-5,20px)}

/* ===== listing ===== */
/* ============================================================================
   LIFE — Fixes ZONE CATÉGORIES / LISTING
   Périmètre : hero catégorie, toolbar tri, grille produits, facettes,
   filtres actifs, bloc SEO bas, état "aucun produit".
   Toutes les règles sont sur-spécifiées (html body #id .classe) pour gagner
   sur life-all.css sans le modifier. Dark cohérent, accent #00E676 fonctionnel.
   Tokens réutilisés : --acc --acc-ink --line --line-2 --panel --panel-2
                       --fg --fg-dim --fg-mute
   ============================================================================ */

/* ---------------------------------------------------------------------------
   A. Colonne facettes VIDE → listing pleine largeur (audit §6 · high)
   Quand la catégorie n'a aucune facette configurée, #left-column ne contient
   qu'un #search_filters_wrapper vide : desktop = 25 % de vide + listing
   comprimé à 75 % + H1/toolbar désaxés. On masque la colonne vide et on
   étend le contenu. Si des facettes existent (#search_filters présent), la
   mise en page 2 colonnes est préservée telle quelle.
   --------------------------------------------------------------------------- */
html body #wrapper #left-column:not(:has(#search_filters)) {
  display: none !important;
}
@media (min-width: 992px) {
  html body #wrapper #left-column:not(:has(#search_filters)) + #content-wrapper,
  html body #wrapper #left-column:not(:has(#search_filters)) + #content-wrapper.left-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   B. Barre de tri : neutraliser les classes Bootstrap col-* résiduelles
   (audit §6 · medium). Le template a été nettoyé, mais on verrouille au cas où
   un cache Smarty sert encore l'ancien markup. La toolbar est un flex : les
   col-* forçaient le dropdown à ~75 % + padding parasite → bord droit désaligné.
   --------------------------------------------------------------------------- */
html body .lh-toolbar [class*="col-"],
html body .lh-toolbar-right [class*="col-"] {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body .lh-toolbar .lh-toolbar-right {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html body .lh-toolbar .sort-by {
  color: var(--fg-mute);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* dropdown tri : largeur au contenu, aligné à droite de la grille */
html body .lh-toolbar .products-sort-order {
  position: relative;
  width: auto;
  margin: 0;
}
html body .lh-toolbar .products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
html body .lh-toolbar .products-sort-order .select-title .material-icons {
  margin-left: 2px;
}

/* ---------------------------------------------------------------------------
   C. Grille produits : gaps/breakpoints alignés sur l'accueil (audit §6)
   life-all.css:190-193 impose gap 16 + reflow 1100 alors que la home (.lh-grid)
   est en gap 18 + reflow 900. Mêmes cartes → même respiration. On mirror la home.
   --------------------------------------------------------------------------- */
html body #content-wrapper .products.lh-grid {
  gap: 18px !important;
  margin: 0;
}
@media (min-width: 901px) {
  html body #content-wrapper .products.lh-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 900px) {
  html body #content-wrapper .products.lh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 560px) {
  html body #content-wrapper .products.lh-grid,
  html body .products.lh-grid,
  html body .lh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Zone image plus compacte en 2 colonnes mobile (évite tout débordement) */
  html body .lh-pc .ph {
    height: 140px !important;
  }
  html body .lh-pc .ph img {
    max-height: 112px !important;
    max-width: 90% !important;
  }
}

/* ---------------------------------------------------------------------------
   D. Hero catégorie : gouttière latérale mobile cohérente (audit §6 · high)
   life-all.css:841 ajoute 16px de gouttière à .lh-toolbar/.products.lh-grid/
   .lh-catseo/.lh-catlinks mais oublie .lh-cathero → le H1 et son filet
   border-bottom débordent de 16px vers la gauche vs le reste de la page.
   On aligne le hero (et donc le bloc réassurance .lh-trust qu'il contient).
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html body #js-product-list-header .lh-cathero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* le filet du hero et celui du bloc SEO doivent partager le même registre :
   même couleur de ligne, épaisseur, pleine largeur du contenu */
html body #js-product-list-header .lh-cathero {
  border-bottom-color: var(--line);
}

/* ---------------------------------------------------------------------------
   E. État "aucun produit" : composant PrestaShop natif à passer en dark
   (fond blanc par défaut). Rendu uniquement DANS le listing (#js-product-list),
   pas la vraie page 404 (qui est directement sous #content-wrapper).
   --------------------------------------------------------------------------- */
html body #js-product-list #content.page-not-found,
html body #js-product-list .page-not-found {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 52px 32px !important;
  margin: 8px 0 0 !important;
  text-align: center;
  max-width: none;
  color: var(--fg-dim) !important;
}
html body #js-product-list .page-not-found h4 {
  color: var(--fg) !important;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 10px !important;
}
html body #js-product-list .page-not-found p {
  color: var(--fg-dim) !important;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto !important;
  max-width: 52ch;
}
html body #js-product-list .page-not-found a {
  color: var(--acc) !important;
}

/* ---------------------------------------------------------------------------
   F. Filtres actifs (desktop) : puces dark cohérentes avec .lh-trust
   Déjà stylé en base ; on verrouille la lisibilité de la croix de retrait et
   l'alignement pour éviter tout fond natif résiduel.
   --------------------------------------------------------------------------- */
html body #js-active-search-filters.active_filters li,
html body #js-active-search-filters .filter-block {
  background: var(--panel) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg-dim) !important;
}
html body #js-active-search-filters li a .material-icons.close,
html body #js-active-search-filters .js-search-link .material-icons {
  color: var(--fg-mute);
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  transition: color .15s;
}
html body #js-active-search-filters li a:hover .material-icons {
  color: var(--acc);
}

/* ---------------------------------------------------------------------------
   G. Bloc SEO / maillage bas de page : garde-fou dark
   (déjà stylé finement dans life-all — on borne juste les débordements et on
   confirme l'alignement des filets avec le hero : même --line, même gouttière).
   --------------------------------------------------------------------------- */
html body #js-product-list-footer .lh-catseo,
html body #js-product-list-footer .lh-catlinks {
  border-top-color: var(--line);
}
html body #js-product-list-footer .lh-catseo table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== product ===== */
/* =============================================================================
   LIFE — FIXES FICHE PRODUIT  (zone: product.css)
   Portée exclusive: page produit (body#product / #product).
   Objectif: dark cohérent, vert néon (#00E676) = FONCTIONNEL uniquement.
   Sélecteurs sur-spécifiés (html body #product ...) pour battre life-all.css
   et surtout le CSS clair du module productcomments (chargé après).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Token manquant --acc-dim : pastille d'icône des atouts (.lh-pfeat .fc .ic)
      life-all.css:327 fait background:var(--acc-dim) -> token inexistant ->
      pastille transparente, glyphe vert flottant. On rétablit la teinte USP.
   --------------------------------------------------------------------------- */
html body #product .lh-pfeat .fc .ic{
  background:rgba(0,230,118,.10) !important;
  color:var(--acc) !important;
}

/* -----------------------------------------------------------------------------
   1. Cohérence des cartes marque (.lh-pfeat / .lh-banner) + cartes stats
      Même registre de bordure/rayon/fond pour tous les panneaux de la fiche.
   --------------------------------------------------------------------------- */
html body #product .lh-pfeat .fc,
html body #product .lh-psec .lh-banner{
  border:1px solid var(--line) !important;
  background:var(--panel) !important;
  border-radius:16px !important;
}

/* Cartes stats du panneau d'achat (Tension / Capacité / Poids) : bordure et
   rayon alignés sur le reste des cartes, fond panel opaque (jamais blanc). */
html body #product .lh-buyspecs .lh-spec{
  border:1px solid var(--line) !important;
  background:var(--panel) !important;
  border-radius:12px !important;
}
html body #product .lh-buyspecs .lh-spec .k{color:var(--fg-mute) !important;}
html body #product .lh-buyspecs .lh-spec .v{color:var(--fg) !important;}
html body #product .lh-buyspecs .lh-spec.na .v{color:var(--fg-mute) !important;}

/* Fiche technique complète (onglet Détails) : même bordure/rayon que data-sheet. */
html body #product .lh-fullspecs{
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:transparent !important;
}
html body #product .lh-fullspecs .lh-fsrow{border-bottom:1px solid var(--line) !important;}
html body #product .lh-fullspecs .lh-fsrow:last-child{border-bottom:0 !important;}
html body #product .lh-fullspecs .k{background:var(--panel) !important;color:var(--fg-dim) !important;}
html body #product .lh-fullspecs .v{background:transparent !important;color:var(--fg) !important;}

/* -----------------------------------------------------------------------------
   2. Boîtes blanches résiduelles : onglets + data-sheet + panneaux
      Blindage contre tout fond clair hérité d'un CSS module tardif.
   --------------------------------------------------------------------------- */
html body #product .tabs,
html body #product .nav-tabs,
html body #product .tab-content,
html body #product .tab-pane,
html body #product .product-features,
html body #product .product-fullwidth{
  background:transparent !important;
}
html body #product .nav-tabs{border-bottom:1px solid var(--line) !important;}
html body #product .nav-tabs .nav-link{
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  color:var(--fg-mute) !important;
}
html body #product .nav-tabs .nav-link.active{
  color:var(--fg) !important;
  border-bottom-color:var(--acc) !important;
}
html body #product .data-sheet{
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:transparent !important;
  overflow:hidden;
}
html body #product .data-sheet dt,
html body #product .data-sheet dd{border-bottom:1px solid var(--line) !important;}
html body #product .data-sheet dt.name{background:var(--panel) !important;color:var(--fg-dim) !important;}
html body #product .data-sheet dd.value{background:transparent !important;color:var(--fg) !important;}

/* -----------------------------------------------------------------------------
   3. Prix (nombre héro) : le markup réel est span.current-price-value ;
      life-all.css:259 ciblait .price / [itemprop=price] (absents) -> prix rendu
      petit. On rétablit la taille héro.
   --------------------------------------------------------------------------- */
html body #product .current-price .current-price-value{
  font-size:32px !important;
  font-weight:800 !important;
  color:var(--fg) !important;
  line-height:1.05;
}
/* Description courte : la classe .product-description-short peut manquer sur
   certains rendus -> on cible aussi l'id préfixé. */
html body #product [id^="product-description-short"]{
  color:var(--fg-dim) !important;
  font-size:15px;
  line-height:1.62;
  margin:16px 0 0;
}
html body #product [id^="product-description-short"] b,
html body #product [id^="product-description-short"] strong{color:var(--fg) !important;}

/* -----------------------------------------------------------------------------
   4. Bandeau simulateur (#lh-simbanner, injecté par JS entre titre et prix)
      Styles inline en dur (border .14 / fond .03 / marge 26/22) -> on ramène
      sur les tokens et on resserre la marge pour rapprocher le prix du titre.
   --------------------------------------------------------------------------- */
html body #product #lh-simbanner{
  margin:14px 0 18px !important;
  border:1px solid var(--line) !important;
  background:var(--panel) !important;
  border-radius:12px !important;
}

/* -----------------------------------------------------------------------------
   5. Boutons "Partager" vides
      life-all.css:356 met background:var(--panel) (raccourci) -> écrase
      background-image -> ronds vides. On restitue des icônes de marque
      autoportées (data-URI, aucun asset externe) sur pastilles dark.
   --------------------------------------------------------------------------- */
html body #product .social-sharing{align-items:center;gap:8px;margin-top:16px;}
html body #product .social-sharing > span:first-child,
html body #product .social-sharing .label{
  color:var(--fg-dim) !important;font-size:12.5px;font-weight:600;
}
html body #product .social-sharing ul{display:flex;gap:8px;align-items:center;margin:0;padding:0;list-style:none;}
html body #product .social-sharing li{
  width:40px;height:40px;margin:0;border-radius:50% !important;
  background-color:var(--panel) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:19px 19px !important;
  border:1px solid var(--line-2) !important;
  transition:border-color .18s ease, transform .18s ease, background-color .18s ease;
}
html body #product .social-sharing li a{opacity:0;} /* label masqué, la pastille porte l'icône */
html body #product .social-sharing li:hover{
  border-color:var(--acc) !important;
  background-color:var(--panel-2) !important;
  transform:translateY(-1px);
}
/* Icônes de marque monochromes (fill --fg-dim ~ #C7CCC7) en data-URI */
html body #product .social-sharing li.facebook{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C7CCC7'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H17V3.6c-.3-.04-1.3-.13-2.47-.13-2.45 0-4.13 1.5-4.13 4.25v2.17H7.7V13h2.7v8z'/%3E%3C/svg%3E") !important;
}
html body #product .social-sharing li.twitter{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C7CCC7'%3E%3Cpath d='M17.53 3h3.02l-6.6 7.54L21.75 21h-6.08l-4.76-6.23L5.46 21H2.44l7.06-8.07L2.25 3h6.24l4.3 5.69zm-1.06 16.2h1.67L7.6 4.71H5.8z'/%3E%3C/svg%3E") !important;
}
html body #product .social-sharing li.pinterest{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C7CCC7'%3E%3Cpath d='M12 2C6.48 2 4 5.66 4 8.98c0 1.95.74 3.68 2.32 4.33.26.11.49 0 .57-.28.05-.19.18-.72.24-.93.08-.28.05-.38-.16-.62-.45-.53-.74-1.22-.74-2.19 0-2.82 2.11-5.35 5.5-5.35 3 0 4.65 1.83 4.65 4.28 0 3.22-1.42 5.94-3.54 5.94-1.17 0-2.04-.97-1.76-2.15.33-1.42.98-2.95.98-3.97 0-.92-.49-1.68-1.51-1.68-1.2 0-2.16 1.24-2.16 2.9 0 1.06.36 1.77.36 1.77l-1.44 6.09c-.43 1.81-.06 4.02-.03 4.25.02.13.19.16.26.06.11-.14 1.5-1.86 1.97-3.58.13-.48.77-3.01.77-3.01.38.73 1.49 1.36 2.68 1.36 3.53 0 5.93-3.22 5.93-7.53C20 5.75 16.86 2 12 2z'/%3E%3C/svg%3E") !important;
}

/* -----------------------------------------------------------------------------
   6. Avis (module productcomments) — CSS clair d'origine -> dark cohérent.
      Boîtes, textes, boutons et modale d'avis passés en dark.
   --------------------------------------------------------------------------- */
html body #product #product-comments-list-header,
html body #product .comments-nb,
html body #product #product-comments-list,
html body #product .product-comments h2,
html body #product .product-comments .h2{color:var(--fg) !important;}
html body #product .comments-nb .material-icons{color:var(--acc) !important;}

html body #product #empty-product-comment,
html body #product .product-comment-list-item{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  color:var(--fg-dim) !important;
}
html body #product .product-comment-list-item .comment-author,
html body #product .product-comment-list-item .comment-date{color:var(--fg-mute) !important;}
html body #product .product-comment-list-item .comment-content,
html body #product .product-comment-list-item p{color:var(--fg-dim) !important;}
html body #product .product-comment-list-item .h4,
html body #product .product-comment-list-item h4{color:var(--fg) !important;}

/* Étoiles : rempli = accent (fonctionnel), vide = ligne */
html body #product .star-content .star,
html body #product .grade-stars,
html body #product .star{color:var(--acc) !important;}

/* Boutons du module (avis) */
html body #product .btn-comment,
html body #product .btn-comment-huge{
  background:var(--acc) !important;
  color:var(--acc-ink,#062012) !important;
  border:1px solid var(--acc) !important;
  border-radius:10px !important;
  font-weight:700 !important;
}
html body #product .btn-comment-inverse{
  background:transparent !important;
  color:var(--fg) !important;
  border:1px solid var(--line-2) !important;
  border-radius:10px !important;
  font-weight:700 !important;
}
html body #product .btn-comment-inverse:hover{border-color:var(--acc) !important;color:var(--acc) !important;}

/* Modale "Donnez votre avis" (scopée à l'id du module, ne touche pas les autres modales) */
html body #post-product-comment-modal .modal-content,
html body #post-product-comment-modal .modal-header,
html body #post-product-comment-modal .modal-body{
  background:var(--bg) !important;
  color:var(--fg) !important;
  border-color:var(--line) !important;
}
html body #post-product-comment-modal .modal-header{border-bottom:1px solid var(--line) !important;}
html body #post-product-comment-modal .modal-content .h2,
html body #post-product-comment-modal .modal-content h2,
html body #post-product-comment-modal label{color:var(--fg) !important;}
html body #post-product-comment-modal .close,
html body #post-product-comment-modal .close span{color:var(--fg-mute) !important;opacity:1 !important;text-shadow:none !important;}
html body #post-product-comment-modal input,
html body #post-product-comment-modal textarea{
  background:var(--panel) !important;
  border:1px solid var(--line-2) !important;
  color:var(--fg) !important;
  border-radius:10px !important;
}
html body #post-product-comment-modal input:focus,
html body #post-product-comment-modal textarea:focus{border-color:var(--acc) !important;outline:none !important;}

/* ===== checkout ===== */
/* ==========================================================================
   LIFE — Fixes ZONE PANIER + TUNNEL (checkout)
   Fichier dédié (disjoint). Sélecteurs sur-spécifiés pour battre theme.css
   (cyan/blancs/verts hérités PrestaShop) sans toucher head.tpl / life-all.css.
   Tokens : --panel #161816 / --panel-2 #1B1E1B / --line .09 / --line-2 .16
            --fg #EEF1EE / --fg-dim #9AA09A / --acc #00E676 / --acc-ink #04140b
   Portée : page panier (.cart-grid) + tunnel (body#checkout).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) BOÎTES BLANCHES → panneaux sombres cohérents
   theme.css pose .checkout-step{background:#fff} et les .card natives claires.
   -------------------------------------------------------------------------- */
html body#checkout section.checkout-step,
html body .cart-grid .card,
html body .cart-grid .card.cart-container,
html body .cart-grid .card.cart-summary,
html body#checkout #js-checkout-summary.card,
html body#checkout .cart-grid-right .card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  color: var(--fg) !important;
  overflow: hidden;                 /* clippe le rayon + coupe tout débord */
}

/* étape courante : liseré accent discret pour la hiérarchie */
html body#checkout section.checkout-step.-current {
  border-color: var(--line-2) !important;
}

/* le conteneur des étapes ne doit pas réintroduire un fond clair */
html body#checkout #checkout-process,
html body#checkout .cart-grid-body,
html body#checkout .cart-grid-right {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   2) PADDING / RYTHME du tunnel (stock = .625rem serré + .content 2.313rem)
   -------------------------------------------------------------------------- */
html body#checkout section.checkout-step {
  padding: 24px !important;
  margin-bottom: 16px !important;
}
html body#checkout section.checkout-step .content {
  padding: 16px 0 0 !important;
}
html body .cart-grid .card .card-block {
  padding: 24px !important;
}

/* --------------------------------------------------------------------------
   3) BADGE D'ÉTAPE : vieux vert #00c062 → néon LIFE, texte encre
   -------------------------------------------------------------------------- */
html body#checkout section.checkout-step .step-number,
html body#checkout section.checkout-step.-current .step-number,
html body#checkout section.checkout-step.-reachable.-current .step-number {
  background-color: var(--acc) !important;
  color: var(--acc-ink) !important;
  border: 0 !important;
}

/* titre d'étape : bordure #ddd → --line, texte clair */
html body#checkout section.checkout-step .step-title,
html body#checkout section.checkout-step.-current + .checkout-step .step-title {
  color: var(--fg) !important;
  border-color: var(--line) !important;
}
html body#checkout section.checkout-step .step-title .done {
  color: var(--acc) !important;
}
html body#checkout section.checkout-step .step-edit,
html body#checkout section.checkout-step.-reachable.-complete h1 .step-edit,
html body#checkout section.checkout-step small {
  color: var(--fg-dim) !important;
}
/* lien "Ajouter une adresse" était en #232323 (invisible sur sombre) */
html body#checkout section.checkout-step .add-address a {
  color: var(--acc) !important;
}

/* --------------------------------------------------------------------------
   4) BOUTONS : stock = cyan #24b9d7 ; + <a.btn-primary> devient vert-sur-vert
   (a{color:var(--acc)} global) → BANDE VERTE VIDE. On force le texte encre.
   -------------------------------------------------------------------------- */
html body#checkout .btn-primary,
html body#checkout a.btn-primary,
html body#checkout button.btn-primary,
html body .cart-grid .btn-primary,
html body .cart-grid a.btn-primary,
html body .cart-grid button.btn-primary {
  background-color: var(--acc) !important;
  border-color: var(--acc) !important;
  color: var(--acc-ink) !important;
  text-decoration: none !important;
  border-radius: 10px !important;
}
html body#checkout .btn-primary span,
html body#checkout a.btn-primary span,
html body .cart-grid .btn-primary span,
html body .cart-grid a.btn-primary span {
  color: var(--acc-ink) !important;
}
html body#checkout .btn-primary:hover,
html body#checkout a.btn-primary:hover,
html body .cart-grid .btn-primary:hover,
html body .cart-grid a.btn-primary:hover {
  background-color: var(--acc-hover) !important;
  border-color: var(--acc-hover) !important;
  color: var(--acc-ink) !important;
}
html body#checkout .btn-primary:focus,
html body .cart-grid .btn-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .28) !important;
}

/* boutons désactivés (Proceed to checkout / Place order) : plus de cyan plein */
html body#checkout .btn-primary.disabled,
html body#checkout .btn-primary:disabled,
html body .cart-grid .btn-primary.disabled,
html body .cart-grid .btn-primary:disabled {
  background-color: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg-mute) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* boutons secondaires / natifs non stylés dans le tunnel */
html body#checkout .btn-secondary,
html body .cart-grid .btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
}
html body#checkout .btn-secondary:hover,
html body .cart-grid .btn-secondary:hover {
  border-color: var(--fg) !important;
  color: var(--fg) !important;
}

/* --------------------------------------------------------------------------
   5) RÉCAP : prix qui DÉBORDE à droite (float-xs-right) → flex label/valeur
   -------------------------------------------------------------------------- */
html body#checkout .cart-summary-line,
html body .cart-grid .cart-summary-line {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
html body#checkout .cart-summary-line .label,
html body .cart-grid .cart-summary-line .label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg) !important;
}
html body#checkout .cart-summary-line .value,
html body .cart-grid .cart-summary-line .value,
html body#checkout .cart-summary-line .float-xs-right,
html body .cart-grid .cart-summary-line .float-xs-right {
  float: none !important;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  color: var(--fg) !important;
}

/* récap tunnel (media) : image + nom + prix ; le prix flottait à droite */
html body#checkout #js-checkout-summary .media-body,
html body#checkout .cart-summary-products .media-body {
  overflow: hidden;
}
html body#checkout #js-checkout-summary .media-body .product-price,
html body#checkout .cart-summary-products .product-price.float-xs-right {
  float: none !important;
  display: inline-block;
  white-space: nowrap;
  color: var(--fg) !important;
}

/* lignes produit du panier détaillé : garder le prix sur une ligne, sans fuite */
html body .cart-grid .product-line-grid {
  margin-left: 0;
  margin-right: 0;
}
html body .cart-grid .product-line-grid .product-price,
html body .cart-grid .product-line-grid .product-price strong {
  white-space: nowrap;
  overflow-wrap: normal;
}
html body .cart-grid .product-line-grid .product-line-info .label {
  overflow-wrap: anywhere;
}

/* conteneur des sous-totaux : bordures #ddd → --line, respiration */
html body#checkout .cart-summary-subtotals-container,
html body .cart-grid .cart-summary-subtotals-container {
  padding: 16px 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body#checkout .cart-summary-subtotals-container .cart-summary-line .label,
html body .cart-grid .cart-summary-subtotals-container .cart-summary-line .label {
  color: var(--fg-dim) !important;
  font-weight: 400 !important;
}
html body#checkout .cart-summary-subtotals-container .cart-summary-line .value,
html body .cart-grid .cart-summary-subtotals-container .cart-summary-line .value {
  color: var(--fg) !important;
  font-weight: 600 !important;
}

/* TOTAL TTC : ré-affirmer la hiérarchie que le *{color} inline aplatit */
html body#checkout .cart-summary-line.cart-total,
html body .cart-grid .cart-summary-line.cart-total {
  background-color: transparent !important;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2) !important;
}
html body#checkout .cart-summary-line.cart-total .label,
html body .cart-grid .cart-summary-line.cart-total .label {
  color: var(--fg) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
html body#checkout .cart-summary-line.cart-total .value,
html body .cart-grid .cart-summary-line.cart-total .value {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  font-variant-numeric: tabular-nums;
}

/* séparateurs du panier */
html body .cart-grid hr.separator,
html body .cart-grid .separator {
  border-color: var(--line) !important;
  background: var(--line) !important;
}

/* --------------------------------------------------------------------------
   6) CODE PROMO : input + bouton regroupés (input-group), fond sombre, focus vert
   -------------------------------------------------------------------------- */
html body#checkout .cart-voucher .promo-code form,
html body .cart-grid .cart-voucher .promo-code form {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
}
html body#checkout .cart-voucher .promo-input,
html body .cart-grid .cart-voucher .promo-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  background: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  color: var(--fg) !important;
}
html body#checkout .cart-voucher .promo-input::placeholder,
html body .cart-grid .cart-voucher .promo-input::placeholder {
  color: var(--fg-mute) !important;
}
html body#checkout .cart-voucher .promo-input:focus,
html body .cart-grid .cart-voucher .promo-input:focus {
  outline: none !important;
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .22) !important;
}
html body#checkout .cart-voucher .promo-code form .btn-primary,
html body .cart-grid .cart-voucher .promo-code form .btn-primary {
  flex: 0 0 auto;
  width: auto !important;
  height: 48px;
  margin: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  white-space: nowrap;
}
/* liens repliables du promo (Have a promo code? / Close) : vert lisible */
html body#checkout .cart-voucher .promo-code-button,
html body#checkout .cart-voucher a.collapse-button,
html body .cart-grid .cart-voucher .promo-code-button,
html body .cart-grid .cart-voucher a.collapse-button {
  color: var(--acc) !important;
}
/* voucher ajouté : ligne lisible */
html body#checkout .cart-voucher .promo-name .cart-summary-line .label,
html body .cart-grid .cart-voucher .promo-name .cart-summary-line .label {
  color: var(--fg) !important;
}

/* --------------------------------------------------------------------------
   7) ÉTAPE PAIEMENT : options / infos additionnelles restées claires
   -------------------------------------------------------------------------- */
html body#checkout .payment-options .payment-option,
html body#checkout .js-additional-information,
html body#checkout .additional-information,
html body#checkout .js-payment-option-form {
  background: transparent !important;
  color: var(--fg) !important;
}
html body#checkout .payment-options .payment-option {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px;
}
html body#checkout .payment-options label,
html body#checkout #conditions-to-approve label,
html body#checkout .condition-label label {
  color: var(--fg) !important;
}

/* --------------------------------------------------------------------------
   8) CHAMPS DE FORMULAIRE natifs (adresse / login tunnel) : cohérence sombre
   -------------------------------------------------------------------------- */
html body#checkout .checkout-step .form-control,
html body#checkout .checkout-step input[type="text"],
html body#checkout .checkout-step input[type="email"],
html body#checkout .checkout-step input[type="tel"],
html body#checkout .checkout-step input[type="password"],
html body#checkout .checkout-step select,
html body#checkout .checkout-step textarea {
  background: var(--panel-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
}
html body#checkout .checkout-step .form-control:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .18) !important;
  outline: none !important;
}
html body#checkout .checkout-step .form-control-label,
html body#checkout .checkout-step label {
  color: var(--fg-dim) !important;
}

/* --------------------------------------------------------------------------
   9) BLOC RÉASSURANCE en bas de colonne — scoped tunnel/panier UNIQUEMENT
   (padding + inversion des icônes sur pastilles blanches). Disjoint du
   storefront via le préfixe .cart-grid-right.
   -------------------------------------------------------------------------- */
html body .cart-grid-right .block-reassurance {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin-top: 16px;
}
html body .cart-grid-right .block-reassurance ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .cart-grid-right .block-reassurance li {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
html body .cart-grid-right .block-reassurance li:last-child {
  border-bottom: 0 !important;
}
html body .cart-grid-right .block-reassurance .block-reassurance-item,
html body .cart-grid-right .block-reassurance li > span,
html body .cart-grid-right .block-reassurance p {
  color: var(--fg) !important;
  background: transparent !important;
}
html body .cart-grid-right .block-reassurance img,
html body .cart-grid-right .block-reassurance .block-reassurance-item span img {
  background: transparent !important;
  filter: brightness(0) invert(1) !important;   /* icônes sombres → claires */
  opacity: .92;
}

/* --------------------------------------------------------------------------
   10) GARDE-FOU : aucune fuite horizontale sur mobile
   -------------------------------------------------------------------------- */
html body#checkout #content,
html body .cart-grid,
html body .cart-grid .cart-grid-body,
html body .cart-grid .cart-grid-right {
  max-width: 100%;
}
html body#checkout .cart-summary-line,
html body .cart-grid .cart-summary-line,
html body#checkout .product-line-grid,
html body .cart-grid .product-line-grid {
  overflow: hidden;
}

/* ===== customer ===== */
/* =====================================================================
   LIFE — Fixes ZONE : COMPTE CLIENT + AUTH
   Périmètre : login / inscription / mon-compte / identité / adresses /
   historique / mot de passe.
   Objectif : un seul système de cartes/champs/bordures sur fond dark.
   Tokens (life-all.css) : --panel #161816  --panel-2 #1B1E1B
   --bg-2 #111311  --line rgba(255,255,255,.09)  --line-2 rgba(255,255,255,.16)
   --fg #EEF1EE  --fg-dim #A7ADA7  --fg-mute #8B918B
   --acc #00E676  --acc-ink #04140b
   Sélecteurs sur-spécifiés + !important pour battre theme.css (blanc hérité).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) CHAMPS DE FORMULAIRE — dark cohérent (login/inscription/identité)
   theme.css laisse les inputs en fond blanc Bootstrap → illisibles.
   --------------------------------------------------------------------- */
html body.page-customer-account :is(
  input[type="text"],input[type="email"],input[type="password"],
  input[type="tel"],input[type="number"],input[type="date"],
  input[type="url"],input[type="search"],select,textarea,.form-control
){
  background:var(--bg-2,#111311)!important;
  border:1px solid var(--line-2,rgba(255,255,255,.16))!important;
  color:var(--fg,#EEF1EE)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  padding:12px 14px!important;
  height:auto!important;
}
html body.page-customer-account :is(input,textarea,select)::placeholder{
  color:var(--fg-mute,#8B918B)!important;
}
/* Select natif : chevron maison + espace à droite */
html body.page-customer-account select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B918B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;
  background-size:14px 14px!important;
}
/* Autofill Chrome : casser le fond blanc/jaune imposé */
html body.page-customer-account input:-webkit-autofill,
html body.page-customer-account input:-webkit-autofill:hover,
html body.page-customer-account input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg,#EEF1EE)!important;
  -webkit-box-shadow:0 0 0 1000px var(--bg-2,#111311) inset!important;
  caret-color:var(--fg,#EEF1EE)!important;
}
/* Champs en erreur */
html body.page-customer-account .form-group.has-error .form-control,
html body.page-customer-account .has-danger .form-control{
  border-color:rgba(255,90,90,.55)!important;
}

/* ---------------------------------------------------------------------
   2) CARTES AUTH — login & inscription (#content.page-content.card)
   life-all.css:123 force padding:0 sur .card.card-block → contenu collé.
   On rétablit le padding, on borne la largeur, on centre.
   --------------------------------------------------------------------- */
html body.page-customer-account #content.page-content.card.card-block{
  padding:30px 28px!important;
  max-width:640px!important;
  margin-left:auto!important;margin-right:auto!important;
}
/* Submit large sur les cartes auth */
html body.page-customer-account #content.card .form-footer{
  margin-top:6px!important;text-align:left!important;
}
html body.page-customer-account #content.card .form-footer .btn-primary{
  width:100%!important;padding:14px 20px!important;font-size:15px!important;
}

/* Titre de page (l'échelle générique 22px paraît chétive dans la carte) */
html body.page-customer-account #main .page-header h1,
html body.page-customer-account #content .page-title,
html body.page-customer-account h1{
  font-size:26px!important;letter-spacing:-.01em;color:var(--fg,#EEF1EE)!important;
}

/* Séparateur (login : <hr/> entre form et "pas de compte") */
html body.page-customer-account #content hr{
  border:0!important;border-top:1px solid var(--line,rgba(255,255,255,.09))!important;
  margin:22px 0!important;
}

/* Lien "mot de passe oublié" */
html body.page-customer-account .forgot-password a{
  color:var(--fg-dim,#A7ADA7)!important;font-size:13.5px;text-decoration:none;
}
html body.page-customer-account .forgot-password a:hover{color:var(--acc,#00E676)!important}

/* ---------------------------------------------------------------------
   3) BLOC « Pas de compte ? Créez-en un » → CTA encadré cohérent
   + inscription « Vous avez déjà un compte ? Connectez-vous »
   --------------------------------------------------------------------- */
html body.page-customer-account #content .no-account{
  margin-top:24px!important;
  padding:22px 24px!important;
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:14px!important;
  text-align:center!important;
  font-size:14px!important;color:var(--fg-dim,#A7ADA7)!important;
}
html body.page-customer-account #content .no-account a{
  display:inline-flex!important;align-items:center;justify-content:center;
  margin-top:12px!important;padding:12px 24px!important;
  border:1px solid var(--acc,#00E676)!important;border-radius:10px!important;
  color:var(--acc,#00E676)!important;font-weight:700!important;
  text-decoration:none!important;
  transition:background .18s ease,color .18s ease;
}
html body.page-customer-account #content .no-account a:hover{
  background:var(--acc,#00E676)!important;color:var(--acc-ink,#04140b)!important;
}
/* Inscription : phrase de renvoi vers la connexion */
html body.page-customer-account .register-form>p{
  color:var(--fg-dim,#A7ADA7)!important;margin-bottom:20px!important;font-size:14px;
}
html body.page-customer-account .register-form>p a{
  color:var(--acc,#00E676)!important;font-weight:600!important;
}

/* ---------------------------------------------------------------------
   4) TABLEAU DE BORD « Mon compte » — tuiles blanches → cartes dark
   theme.css .link-item{background:#fff}, icône #232323, hover cyan #24b9d7.
   --------------------------------------------------------------------- */
html body.page-my-account #content .links{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:14px!important;margin:0!important;
}
html body.page-my-account #content .links>a{
  display:block!important;width:auto!important;max-width:none!important;flex:none!important;
  margin:0!important;padding:0!important;
  text-transform:none!important;color:var(--fg,#EEF1EE)!important;text-align:left!important;
}
html body.page-my-account #content .links a .link-item{
  display:flex!important;flex-direction:column;align-items:flex-start;gap:14px;
  height:100%!important;min-height:126px;
  padding:22px 20px!important;
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:14px!important;
  color:var(--fg,#EEF1EE)!important;
  font-size:14px!important;font-weight:600!important;line-height:1.35;
  text-align:left!important;text-transform:none!important;
  box-shadow:none!important;
  transition:border-color .18s ease,background .18s ease;
}
html body.page-my-account #content .links a:hover .link-item{
  border-color:var(--acc,#00E676)!important;
  background:var(--panel-2,#1B1E1B)!important;
}
html body.page-my-account #content .links a i,
html body.page-my-account #content .links a:hover i,
html body.page-my-account #content .links a .link-item i{
  display:block!important;width:auto!important;height:auto!important;
  padding:0!important;margin:0!important;
  font-size:26px!important;color:var(--acc,#00E676)!important;
}

/* Pied de « Mon compte » (Se déconnecter) + liens de navigation compte */
html body.page-customer-account .page-footer{
  display:flex!important;flex-wrap:wrap;gap:18px;
  margin-top:24px!important;padding-top:18px!important;
  border-top:1px solid var(--line,rgba(255,255,255,.09))!important;
}
html body.page-customer-account .page-footer .text-sm-center{width:100%}
html body.page-customer-account .page-footer a,
html body.page-customer-account .account-link{
  display:inline-flex!important;align-items:center;gap:8px;
  color:var(--fg-dim,#A7ADA7)!important;font-size:14px;text-decoration:none;
}
html body.page-customer-account .page-footer a:hover,
html body.page-customer-account .account-link:hover{color:var(--acc,#00E676)!important}

/* ---------------------------------------------------------------------
   5) PAGES FONCTIONNELLES MONO-COLONNE (identité, mot de passe, historique)
   → panneau identique aux cartes auth (fin de la « bordure ici, pas là »).
   --------------------------------------------------------------------- */
html body:is(#identity,.page-identity,#password,.page-password,#guest-tracking,.page-guest-tracking) #content.page-content{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:16px!important;
  padding:30px 28px!important;
  max-width:640px!important;margin-left:auto!important;margin-right:auto!important;
}
html body:is(#history,.page-history) #content.page-content{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:16px!important;
  padding:26px 24px!important;
  max-width:1000px!important;margin-left:auto!important;margin-right:auto!important;
}
html body:is(#identity,.page-identity) #content .form-footer .btn-primary,
html body:is(#password,.page-password) #content .form-footer .btn-primary{
  padding:13px 26px!important;
}

/* ---------------------------------------------------------------------
   6) HISTORIQUE DES COMMANDES — table + cartes mobiles dark, liens charte
   --------------------------------------------------------------------- */
html body:is(#history,.page-history) #content h6{
  color:var(--fg-dim,#A7ADA7)!important;font-size:14px;margin-bottom:20px;
}
html body:is(#history,.page-history) .table{
  background:transparent!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:12px!important;overflow:hidden;margin-bottom:0;
}
html body:is(#history,.page-history) .table thead th{
  background:var(--panel-2,#1B1E1B)!important;
  border-color:var(--line,rgba(255,255,255,.09))!important;
  color:var(--fg,#EEF1EE)!important;font-weight:700!important;
  text-transform:uppercase;font-size:12px;letter-spacing:.04em;
}
html body:is(#history,.page-history) .table td,
html body:is(#history,.page-history) .table th{
  border-color:var(--line,rgba(255,255,255,.09))!important;vertical-align:middle;
}
html body:is(#history,.page-history) .table-striped tbody tr:nth-of-type(odd){
  background:rgba(255,255,255,.02)!important;
}
html body:is(#history,.page-history) .orders .order{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:12px!important;padding:16px 18px!important;margin-bottom:12px;
}
html body:is(#history,.page-history) .order-actions a,
html body:is(#history,.page-history) .view-order-details-link,
html body:is(#history,.page-history) .reorder-link{
  color:var(--acc,#00E676)!important;font-weight:600!important;text-decoration:none;
}
/* Le prix total ne doit pas déborder à droite */
html body:is(#history,.page-history) .table td.text-xs-right,
html body:is(#history,.page-history) .orders .order .total{
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------------------------------------------------------------------
   7) ADRESSES — cartes .address (déjà stylées par life-all) : normaliser
   les filets (theme.css #7a7a7a) et les liens hérités clairs.
   --------------------------------------------------------------------- */
html body.page-addresses .address{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:14px!important;overflow:hidden;margin-bottom:14px;
}
html body.page-addresses .address .address-body{
  padding:20px 20px 14px!important;color:var(--fg,#EEF1EE)!important;
}
html body.page-addresses .address .address-body h4{
  color:var(--fg,#EEF1EE)!important;font-size:16px;margin-bottom:8px;
}
html body.page-addresses .address .address-body address{
  color:var(--fg-dim,#A7ADA7)!important;line-height:1.55;font-style:normal;margin:0;
}
html body.page-addresses .address .address-footer{
  padding:12px 20px!important;
  border-top:1px solid var(--line,rgba(255,255,255,.09))!important;
  background:transparent!important;
  display:flex!important;gap:20px;
}
html body.page-addresses .address .address-footer a,
html body.page-addresses .address .address-footer a i,
html body.page-addresses .address .address-footer a span{
  color:var(--fg-dim,#A7ADA7)!important;text-decoration:none;
}
html body.page-addresses .address .address-footer a:hover,
html body.page-addresses .address .address-footer a:hover i,
html body.page-addresses .address .address-footer a:hover span{
  color:var(--acc,#00E676)!important;
}
/* Bouton « Créer une adresse » (footer liste) → carte ghost cohérente */
html body.page-addresses .addresses-footer{margin-top:6px!important}
html body.page-addresses .addresses-footer a{
  display:inline-flex!important;align-items:center;gap:8px;
  padding:12px 20px!important;
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:12px!important;
  color:var(--fg,#EEF1EE)!important;font-weight:600!important;text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
html body.page-addresses .addresses-footer a:hover{
  border-color:var(--acc,#00E676)!important;color:var(--acc,#00E676)!important;
}
html body.page-addresses .addresses-footer a i,
html body.page-addresses .addresses-footer a:hover i{color:var(--acc,#00E676)!important}

/* ---------------------------------------------------------------------
   8) ALERTES (« Aucune adresse », « Aucune commande ») dark cohérent
   --------------------------------------------------------------------- */
html body.page-customer-account #content .alert-info{
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:12px!important;color:var(--fg,#EEF1EE)!important;
}
html body.page-customer-account #content .alert-info a{
  color:var(--acc,#00E676)!important;font-weight:600;
}

/* ===== cms ===== */
/* ==========================================================================
   FIXES — ZONE CMS (mise en page des pages éditoriales)
   Périmètre : templates/cms/** uniquement.
   Objectif  : largeur lisible + typo cohérente dark + pas de justification.
   Sélecteurs sur-spécifiés (html body#cms …) pour gagner sans !important.
   NB : la page CMS 8 = simulateur (#lh-sim, body.cms-id-8) est EXCLUE du
        gabarit éditorial pour ne pas brider/reboxer son bloc plein-largeur.
   ========================================================================== */

/* ---- Titre de page (page-header, hors #content) : échelle unifiée -------- */
html body#cms .page-header{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  padding:8px 0 4px;
}
html body#cms .page-header h1{
  font-size:clamp(28px,4.4vw,40px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--fg);
  margin:0;
}

/* ---- Colonne éditoriale lisible (RTE des pages CMS) ---------------------- */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte{
  max-width:820px;
  margin:0 auto;
  padding:8px 0 12px;
  color:var(--fg-dim);
  font-size:16px;
  line-height:1.72;
  text-align:left;
}

/* Titres internes : socle typo + filets éditoriaux (pas de carte) */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte h2{
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--fg);
  margin:2.2em 0 .6em;
  padding-top:1.1em;
  border-top:1px solid var(--line);
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte h2:first-child{
  margin-top:.2em;
  padding-top:0;
  border-top:0;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte h3{
  font-size:clamp(18px,2.3vw,22px);
  line-height:1.25;
  font-weight:700;
  color:var(--fg);
  margin:1.8em 0 .5em;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte h4,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte h5{
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  color:var(--fg);
  margin:1.4em 0 .4em;
}

html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte p,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte li{
  color:var(--fg-dim);
  font-size:16px;
  line-height:1.72;
  text-align:left;
  max-width:74ch;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte p{margin:0 0 .85em}

html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte ul,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte ol{
  margin:0 0 1em;
  padding-left:1.25em;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte li{margin:.25em 0}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte li::marker{color:var(--fg-mute)}

html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte strong,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte b{color:var(--fg);font-weight:700}

/* Liens éditoriaux : accent fonctionnel, souligné (neutralise le cyan/off-brand
   et les classes tailwind fuitées decorated-link/cursor-pointer du contenu) */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte a,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte a.decorated-link{
  color:var(--acc);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte a:hover{color:var(--acc-hover)}

/* Neutralise toute justification agressive héritée du contenu collé */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte .text-justify,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte [style*="justify"]{text-align:left !important}

/* Media & tableaux : ne débordent pas de la colonne */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte table{
  width:100%;
  border-collapse:collapse;
  margin:1em 0;
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte th,
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte td{
  border:1px solid var(--line);
  padding:8px 12px;
  text-align:left;
  color:var(--fg-dim);
}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte th{color:var(--fg);font-weight:700}

/* Purge des nœuds vides collés depuis un traitement de texte (h*/p/li vides,
   et <p><strong></strong></p>) : évite les grands blancs verticaux */
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte :is(h1,h2,h3,h4,h5,p,li):empty{display:none}
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte p:has(> strong:only-child:empty),
html body#cms:not(.cms-id-8) .page-content.page-cms .cms-rte p:has(> b:only-child:empty){display:none}

/* Blocs auxiliaires (impression / info litige) alignés sur la colonne */
html body#cms .page-content.page-cms .cms-aux{
  max-width:820px;
  margin:1.5em auto 0;
}

/* ---- EXCLUSION du simulateur (CMS 8) : rendre le wrapper transparent ----- */
html body#cms.cms-id-8 .page-content.page-cms .cms-rte{
  max-width:none;
  margin:0;
  padding:0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}
html body#cms.cms-id-8 .page-header{max-width:none}

/* ==========================================================================
   CMS — pages de listes natives (catégorie CMS, plan du site) : lisibilité
   ========================================================================== */
html body#cms .page-content.page-cms-category,
html body#cms .page-content.sitemap,
html body#cms #content.page-content .cms-category,
html body#cms .page-content > ul,
html body#cms .page-content > p{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  color:var(--fg-dim);
}
html body#cms .page-content ul li a{color:var(--acc)}
html body#cms .page-content ul li a:hover{color:var(--acc-hover)}

/* ==========================================================================
   CMS — nos magasins (stores.tpl) : cartes dark, pas de justification
   ========================================================================== */
html body#cms .page-content.page-stores{max-width:1000px;margin:0 auto}
html body#cms .page-content.page-stores .store-item.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg-dim);
  padding:20px;
  margin-bottom:16px;
}
html body#cms .page-content.page-stores .store-item .card-title,
html body#cms .page-content.page-stores .store-item address,
html body#cms .page-content.page-stores .store-item th,
html body#cms .page-content.page-stores .store-item td{color:var(--fg-dim)}
html body#cms .page-content.page-stores .store-item .card-title{color:var(--fg)}
html body#cms .page-content.page-stores .store-item .text-justify{text-align:left}
html body#cms .page-content.page-stores .store-item a{color:var(--acc)}

/* ===== contact ===== */
/* ============================================================
   FIXES — ZONE CONTACT  (page #contact : formulaire + infos)
   Charte LIFE : fond #0B0C0B, panneau #161816, texte #EEF1EE,
   muted #A7ADA7 / #8B918B, accent FONCTIONNEL vert #00E676.
   Objectif : supprimer les fonds blancs natifs PrestaShop,
   corriger le bouton "Choisir un fichier" cyan, harmoniser
   champs / labels / bloc INFORMATIONS. Sélecteurs sur-spécifiés
   (html body#contact ...) pour gagner sur le natif.
   ============================================================ */

/* ---------- 1. Titre de page (H1 sans échelle -> lisible) ---------- */
html body#contact .page-header{
  border:0!important;
  padding:14px 0 6px!important;
  margin:0 0 10px!important;
  background:transparent!important;
}
html body#contact .page-header h1{
  font-size:clamp(26px,5vw,40px)!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  color:var(--fg,#EEF1EE)!important;
  text-transform:none!important;
  margin:0!important;
}

/* ---------- 2. Carte de contenu : jamais de fond blanc ---------- */
html body#contact #content.page-content,
html body#contact #content-wrapper .card,
html body#contact .page-content.card,
html body#contact .contact-form{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:var(--radius,12px)!important;
  color:var(--fg,#EEF1EE)!important;
  box-shadow:none!important;
}
html body#contact #content.page-content{
  padding:clamp(18px,4vw,32px)!important;
}
html body#contact .contact-form{
  border:0!important;
  background:transparent!important;
  padding:0!important;
}

/* ---------- 3. Titre "Contactez-nous" dans le formulaire ---------- */
html body#contact .contact-form h3{
  font-size:clamp(18px,3vw,22px)!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  color:var(--fg,#EEF1EE)!important;
  margin:0 0 18px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid var(--line,rgba(255,255,255,.09))!important;
  text-transform:none!important;
}

/* ---------- 4. Lignes / structure : pas de débordement horizontal ---------- */
html body#contact .contact-form .form-group.row{
  margin-left:0!important;
  margin-right:0!important;
  align-items:center;
}
html body#contact .contact-form .form-group{
  margin-bottom:18px!important;
}

/* ---------- 5. Labels ---------- */
html body#contact .contact-form .form-control-label,
html body#contact .contact-form label{
  color:var(--fg-dim,#A7ADA7)!important;
  font-weight:600!important;
  font-size:13px!important;
  letter-spacing:.01em!important;
  padding-top:10px!important;
  margin-bottom:4px!important;
}

/* commentaire "optionnel" */
html body#contact .contact-form .form-control-comment{
  color:var(--fg-mute,#8B918B)!important;
  font-size:12px!important;
  font-style:italic;
  padding-top:12px!important;
}

/* ---------- 6. Champs texte / email / textarea / select ---------- */
html body#contact .contact-form .form-control,
html body#contact .contact-form input[type=text],
html body#contact .contact-form input[type=email],
html body#contact .contact-form textarea,
html body#contact .contact-form select,
html body#contact .contact-form .form-control-select{
  background:var(--panel-2,#1B1E1B)!important;
  border:1px solid var(--line-2,rgba(255,255,255,.16))!important;
  color:var(--fg,#EEF1EE)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  width:100%!important;
  max-width:100%!important;
  min-height:46px!important;
  padding:11px 14px!important;
  font-size:15px!important;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s ease,background-color .18s ease;
}
html body#contact .contact-form textarea.form-control,
html body#contact .contact-form textarea{
  min-height:120px!important;
  line-height:1.5!important;
  resize:vertical;
}
html body#contact .contact-form .form-control::placeholder,
html body#contact .contact-form textarea::placeholder{
  color:var(--fg-mute,#8B918B)!important;
  opacity:1;
}
html body#contact .contact-form .form-control:focus,
html body#contact .contact-form select:focus,
html body#contact .contact-form textarea:focus{
  border-color:var(--acc,#00E676)!important;
  background:var(--panel,#161816)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(0,230,118,.14)!important;
}

/* select : flèche custom (le natif ressort blanc sur fond noir) */
html body#contact .contact-form select,
html body#contact .contact-form .form-control-select{
  padding-right:42px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B918B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:calc(100% - 15px) center!important;
  background-size:15px 15px!important;
  cursor:pointer;
}
/* options du menu déroulant en dark (supporté desktop) */
html body#contact .contact-form select option{
  background:var(--panel,#161816)!important;
  color:var(--fg,#EEF1EE)!important;
}

/* ---------- 7. Bouton "Choisir un fichier" (filestyle) : off-brand cyan -> charte ---------- */
/* le plugin filestyle génère un input texte + un label.btn ;
   fallback : input[type=file] natif si le JS ne tourne pas */
html body#contact .contact-form .bootstrap-filestyle,
html body#contact .contact-form .group-span-filestyle{
  display:inline-flex!important;
  align-items:stretch;
}
html body#contact .contact-form .bootstrap-filestyle input[type=text],
html body#contact .contact-form .bootstrap-filestyle .form-control[disabled]{
  background:var(--panel-2,#1B1E1B)!important;
  border:1px solid var(--line-2,rgba(255,255,255,.16))!important;
  border-right:0!important;
  color:var(--fg-dim,#A7ADA7)!important;
  border-radius:10px 0 0 10px!important;
}
html body#contact .contact-form .group-span-filestyle .btn,
html body#contact .contact-form .bootstrap-filestyle .btn,
html body#contact .contact-form label.btn,
html body#contact .contact-form .btn-default{
  background:transparent!important;
  background-image:none!important;
  border:1px solid var(--acc,#00E676)!important;
  color:var(--acc,#00E676)!important;
  border-radius:10px!important;
  min-height:46px!important;
  padding:11px 18px!important;
  font-weight:700!important;
  font-size:14px!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
html body#contact .contact-form .group-span-filestyle .btn:hover,
html body#contact .contact-form .bootstrap-filestyle .btn:hover,
html body#contact .contact-form label.btn:hover{
  background:var(--acc,#00E676)!important;
  color:var(--acc-ink,#04140b)!important;
}
html body#contact .contact-form .icon-span-filestyle{
  color:inherit!important;
}
/* fallback input file natif */
html body#contact .contact-form input[type=file]{
  color:var(--fg-dim,#A7ADA7)!important;
  font-size:14px!important;
}
html body#contact .contact-form input[type=file]::-webkit-file-upload-button,
html body#contact .contact-form input[type=file]::file-selector-button{
  background:transparent!important;
  border:1px solid var(--acc,#00E676)!important;
  color:var(--acc,#00E676)!important;
  border-radius:10px!important;
  padding:9px 16px!important;
  margin-right:12px!important;
  font-weight:700!important;
  cursor:pointer;
  -webkit-appearance:none;
}

/* ---------- 8. Bouton d'envoi ---------- */
html body#contact .contact-form .form-footer{
  margin-top:8px!important;
  padding-top:18px!important;
  border-top:1px solid var(--line,rgba(255,255,255,.09))!important;
}
html body#contact .contact-form .form-footer .btn-primary,
html body#contact .contact-form input[type=submit].btn-primary{
  background:var(--acc,#00E676)!important;
  border:1px solid var(--acc,#00E676)!important;
  color:var(--acc-ink,#04140b)!important;
  border-radius:10px!important;
  min-height:50px!important;
  padding:13px 34px!important;
  font-weight:800!important;
  font-size:15px!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background-color .18s ease;
}
html body#contact .contact-form .form-footer .btn-primary:hover,
html body#contact .contact-form input[type=submit].btn-primary:hover{
  background:var(--acc-hover,#1aef86)!important;
  border-color:var(--acc-hover,#1aef86)!important;
}

/* ---------- 9. Notifications / alertes (fond blanc natif -> dark) ---------- */
html body#contact .contact-form .alert{
  border-radius:10px!important;
  padding:14px 16px!important;
  margin:0 0 20px!important;
  border:1px solid var(--line-2,rgba(255,255,255,.16))!important;
}
html body#contact .contact-form .alert ul{
  margin:0!important;padding-left:18px!important;
}
html body#contact .contact-form .alert-success{
  background:rgba(0,230,118,.10)!important;
  border-color:rgba(0,230,118,.45)!important;
  color:#8AF0BE!important;
}
html body#contact .contact-form .alert-danger{
  background:rgba(255,86,86,.10)!important;
  border-color:rgba(255,86,86,.45)!important;
  color:#FF9B9B!important;
}

/* ---------- 10. Bloc INFORMATIONS (colonne gauche, ps_contactinfo) ---------- */
html body#contact #left-column{
  padding-top:0!important;
}
html body#contact .contact-rich{
  background:var(--panel,#161816)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
  border-radius:var(--radius,12px)!important;
  padding:clamp(18px,3vw,26px)!important;
  color:var(--fg-dim,#A7ADA7)!important;
}
html body#contact .contact-rich h4{
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--fg-mute,#8B918B)!important;
  margin:0 0 18px!important;
}
html body#contact .contact-rich .block{
  display:flex!important;
  align-items:flex-start;
  gap:14px!important;
  margin:0!important;
  background:transparent!important;
}
html body#contact .contact-rich .block .icon{
  flex:none!important;
  width:40px!important;height:40px!important;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:10px!important;
  background:var(--panel-2,#1B1E1B)!important;
  border:1px solid var(--line,rgba(255,255,255,.09))!important;
}
html body#contact .contact-rich .block .icon .material-icons,
html body#contact .contact-rich .block .icon i{
  color:var(--acc,#00E676)!important;
  font-size:20px!important;
}
html body#contact .contact-rich .block .data{
  color:var(--fg,#EEF1EE)!important;
  font-size:14px!important;
  line-height:1.5!important;
  padding-top:2px;
}
html body#contact .contact-rich .block .data.email{
  color:var(--fg-dim,#A7ADA7)!important;
}
html body#contact .contact-rich .block .data.email a,
html body#contact .contact-rich a{
  color:var(--acc,#00E676)!important;
  font-weight:600!important;
  text-decoration:none!important;
  word-break:break-word;
}
html body#contact .contact-rich .block .data.email a:hover,
html body#contact .contact-rich a:hover{
  color:var(--acc-hover,#1aef86)!important;
  text-decoration:underline!important;
}
html body#contact .contact-rich hr{
  border:0!important;
  border-top:1px solid var(--line,rgba(255,255,255,.09))!important;
  margin:16px 0!important;
}

/* ---------- 11. Mobile : bouton pleine largeur, espacements ---------- */
@media (max-width:767px){
  html body#contact .contact-form .form-footer{
    text-align:center!important;
  }
  html body#contact .contact-form .form-footer .btn-primary,
  html body#contact .contact-form input[type=submit].btn-primary{
    width:100%!important;
    display:block!important;
  }
  html body#contact .contact-form .form-group.row{
    margin-bottom:16px!important;
  }
  html body#contact .contact-rich{
    margin-bottom:20px!important;
  }
}

/* ===== cartmod ===== */
/* ============================================================
   FIXES — ZONE : MODULES PANIER + RÉASSURANCE
   Périmètre : blockreassurance (Made in France / 4x / Leasing)
               + ps_shoppingcart (modal « Produit ajouté au panier »).
   Corrige : bloc réassurance sans padding + icônes sombres/badges
   blancs + textes forcés en noir (#000 inline) illisibles ;
   modal d'ajout panier en fond BLANC natif Bootstrap -> dark
   cohérent, prix en --fg (jamais vert-sur-vert), pas de débordement.
   Sélecteurs sur-spécifiés (html body …) pour gagner sur le thème
   et sur les styles inline injectés par le module.
   Palette : bg #0B0C0B / panel #161816 / panel-2 #1B1E1B
             fg #EEF1EE / dim #A7ADA7 / mute #8B918B / acc #00E676
   ============================================================ */

/* ===========================================================
   1) BLOC RÉASSURANCE — padding + icônes inversées + texte clair
   ----------------------------------------------------------- */

/* 1.a — Padding horizontal (le module natif colle au bord).
   S'applique à toutes les variantes de rendu du module. */
html body .blockreassurance,
html body .blockreassurance_product,
html body .container-blockreassurance,
html body #block-reassurance {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* 1.b — Icônes : PNG/SVG sombres sur badge clair -> blanc net sur le
   fond dark, PARTOUT (pas seulement checkout/compte). Reprend le
   filtre canonique du thème et l'étend à la fiche produit / home. */
html body .blockreassurance img,
html body .blockreassurance svg,
html body .blockreassurance_product img,
html body .blockreassurance_product svg,
html body #block-reassurance img,
html body #block-reassurance svg,
html body [class*="reassurance"] .block-icon img,
html body [class*="reassurance"] .item-product img {
  filter: brightness(0) invert(1) !important;
}

/* 1.c — Neutralise tout fond de badge blanc éventuel derrière l'icône. */
html body .blockreassurance .block-icon,
html body .blockreassurance_product .item-product,
html body #block-reassurance .block-reassurance-item {
  background: transparent !important;
  box-shadow: none !important;
}

/* 1.d — Textes : le module injecte parfois color:#000 en inline
   (titre + description) -> illisible sur dark. On force la palette. */
html body .blockreassurance .block-title,
html body .blockreassurance_product .block-title,
html body #block-reassurance .block-reassurance-item .h6,
html body #block-reassurance span {
  color: var(--fg) !important;
  font-weight: 700;
}
html body .blockreassurance p,
html body .blockreassurance_product p,
html body #block-reassurance p {
  color: var(--fg-dim) !important;
}

/* ===========================================================
   2) MODAL « Produit ajouté au panier » — dark cohérent
   (ps_shoppingcart/modal.tpl : Bootstrap natif = fond blanc)
   ----------------------------------------------------------- */

html body #blockcart-modal .modal-content {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
}

/* En-tête + titre + coche de succès */
html body #blockcart-modal .modal-header {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
html body #blockcart-modal .modal-title,
html body #blockcart-modal .modal-title .material-icons {
  color: var(--fg) !important;
}
/* La coche « produit ajouté » : accent fonctionnel (vert = succès) */
html body #blockcart-modal .modal-title > i.material-icons {
  color: var(--acc) !important;
}

/* Bouton fermer (croix) — visible sur dark */
html body #blockcart-modal .close,
html body #blockcart-modal .close span,
html body #blockcart-modal .close .material-icons {
  color: var(--fg-dim) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html body #blockcart-modal .close:hover,
html body #blockcart-modal .close:hover .material-icons {
  color: var(--fg) !important;
}

/* Corps + séparateur vertical */
html body #blockcart-modal .modal-body {
  color: var(--fg) !important;
}
html body #blockcart-modal .divide-right {
  border-right-color: var(--line) !important;
}

/* Nom produit + attributs + quantité */
html body #blockcart-modal .product-name,
html body #blockcart-modal .product-name a {
  color: var(--fg) !important;
}
html body #blockcart-modal .modal-body span,
html body #blockcart-modal .product-quantity,
html body #blockcart-modal .cart-products-count {
  color: var(--fg-dim) !important;
}
html body #blockcart-modal .modal-body strong,
html body #blockcart-modal .product-quantity strong {
  color: var(--fg) !important;
}

/* Prix & totaux : TOUJOURS --fg (jamais vert-sur-vert, jamais cyan) */
html body #blockcart-modal .product-price,
html body #blockcart-modal .cart-content .value,
html body #blockcart-modal .subtotal.value,
html body #blockcart-modal .product-total .value {
  color: var(--fg) !important;
  font-variant-numeric: tabular-nums;
}
html body #blockcart-modal .product-total .label,
html body #blockcart-modal .product-total .value {
  font-weight: 800;
}
html body #blockcart-modal .product-tax {
  color: var(--fg-mute) !important;
}

/* Lignes de récap : label à gauche / valeur à droite -> pas de
   débordement du prix hors du cadre sur petits écrans. */
html body #blockcart-modal .cart-content > p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
html body #blockcart-modal .cart-content > p .value,
html body #blockcart-modal .cart-content > p .subtotal {
  text-align: right;
  white-space: nowrap;
}

/* Boutons du modal — scoping strict (n'empiète pas sur forms.css).
   « Continuer mes achats » = secondaire dark ; « Commander » = accent. */
html body #blockcart-modal .cart-content-btn .btn-secondary {
  background: var(--panel-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line-2) !important;
}
html body #blockcart-modal .cart-content-btn .btn-secondary:hover {
  border-color: var(--fg) !important;
  background: var(--panel-2) !important;
}
html body #blockcart-modal .cart-content-btn .btn-primary {
  background: var(--acc) !important;
  color: var(--acc-ink) !important;
  border: 1px solid var(--acc) !important;
}
html body #blockcart-modal .cart-content-btn .btn-primary:hover {
  background: var(--acc-hover) !important;
  border-color: var(--acc-hover) !important;
}
html body #blockcart-modal .cart-content-btn .btn-primary .material-icons {
  color: var(--acc-ink) !important;
}
html body #blockcart-modal .cart-content-btn .btn:active {
  transform: translateY(1px);
}

/* Hook additionnel (prix unitaire / contenu injecté) — hérite du clair */
html body #blockcart-modal .cart-content [class*="price"] {
  color: var(--fg) !important;
}

/* ===== footer ===== */
/* =========================================================================
   FOOTER — fixes zone FOOTER (agent dédié)
   Thème life (dark). Sélecteurs sur-spécifiés pour gagner sur life-all.css.
   Variables: --bg #0B0C0B / --bg-2 #111311 / --panel #161816 /
   --line rgba(255,255,255,.09) / --line-2 .16 /
   --fg #EEF1EE / --fg-dim #A7ADA7 / --fg-mute #8B918B / --acc #00E676
   ========================================================================= */

/* ----- 1. Aucun fond blanc résiduel : tout le pied de page en dark -------- */
html body #footer,
html body #footer .footer-container,
html body #footer .footer-container .container,
html body #footer .block_newsletter,
html body #footer .block-social,
html body #footer .links,
html body #footer .block-contact,
html body #footer #block_myaccount_infos,
html body #footer .collapse,
html body #footer ul.collapse {
  background-color: transparent !important;
}
html body #footer {
  background-color: var(--bg-2) !important;
  border-top: 1px solid var(--line);
}

/* ----- 2. Gouttière alignée sur le header (24px) -------------------------- */
html body #footer .footer-container > .container,
html body #footer > .container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 767px) {
  html body #footer .footer-container > .container,
  html body #footer > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ----- 3. Newsletter : pleine largeur + séparateurs pleine largeur -------- */
/* La colonne réseaux sociaux (ps_socialfollow) n'est pas configurée : masquée
   pour éviter un vide mort à droite, et la newsletter reprend toute la largeur. */
html body #footer .block-social {
  display: none !important;
}
html body #footer .block_newsletter.col-lg-8,
html body #footer .block_newsletter[class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* bandeau newsletter : fond légèrement contrasté + traits nets pleine largeur */
html body #footer .block_newsletter {
  background-color: var(--bg) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 40px 0 !important;
  margin: 0 !important;
}
html body #footer .block_newsletter #block-newsletter-label,
html body #footer .block_newsletter p {
  color: var(--fg) !important;
}
html body #footer .block_newsletter input[type="email"],
html body #footer .block_newsletter input[type="text"] {
  background-color: var(--panel) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg) !important;
  border-radius: 8px !important;
}
html body #footer .block_newsletter input::placeholder {
  color: var(--fg-mute) !important;
}
html body #footer .block_newsletter .btn,
html body #footer .block_newsletter input[type="submit"],
html body #footer .block_newsletter button {
  background-color: var(--acc) !important;
  border: 1px solid var(--acc) !important;
  color: var(--acc-ink) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* ----- 4. Titres de colonnes : micro-label uniforme (h3 ET h4) ----------- */
/* Le bloc « Informations » (ps_contactinfo) émet .h4 .block-contact-title :
   on l'aligne sur le même micro-label que les autres colonnes (.h3). */
html body #footer .footer-container .h3,
html body #footer .footer-container .title .h3,
html body #footer #block_myaccount_infos .h3,
html body #footer .block-contact .h4,
html body #footer .block-contact-title,
html body #footer .footer-container .title span.h3 {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--fg-dim) !important;
  font-weight: 700 !important;
  margin: 0 0 13px !important;
}
html body #footer .footer-container .myaccount-title a,
html body #footer .footer-container .myaccount-title a:hover {
  color: var(--fg-dim) !important;
}

/* ----- 5. Liens des colonnes : lisibles, hover clair --------------------- */
html body #footer .links a,
html body #footer li a,
html body #footer #block_myaccount_infos a,
html body #footer .account-list a,
html body #footer .block-contact a {
  color: var(--fg-mute) !important;
  font-size: 13.5px !important;
  padding: 5px 0 !important;
  display: inline-block;
  text-decoration: none !important;
  transition: color .15s ease;
}
html body #footer .links a:hover,
html body #footer li a:hover,
html body #footer #block_myaccount_infos a:hover,
html body #footer .account-list a:hover,
html body #footer .block-contact a:hover {
  color: var(--fg) !important;
}
html body #footer .links li,
html body #footer .account-list li {
  border: 0 !important;
  list-style: none !important;
}
html body #footer .block-contact {
  color: var(--fg-mute) !important;
  font-size: 13.5px !important;
}
html body #footer .block-contact .material-icons {
  color: var(--fg-mute) !important;
  vertical-align: middle;
}

/* ----- 6. Accordéon mobile : icône unifiée (chevron) pour TOUTES colonnes - */
/* Les colonnes utilisent tantôt +/- (add/remove) tantôt des chevrons.
   On masque le glyphe natif et on dessine un chevron cohérent, qui pivote
   quand la section est ouverte (:has sur le .collapse.show frère). */
@media (max-width: 767px) {
  html body #footer .title.clearfix {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    cursor: pointer;
  }
  html body #footer .title .navbar-toggler.collapse-icons .material-icons {
    display: none !important;
  }
  html body #footer .title .navbar-toggler.collapse-icons {
    position: relative;
    display: inline-block !important;
    width: 16px;
    height: 16px;
  }
  html body #footer .title .navbar-toggler.collapse-icons::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--fg-dim);
    border-bottom: 2px solid var(--fg-dim);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  html body #footer .title:has(~ .collapse.show) .navbar-toggler.collapse-icons::after,
  html body #footer .title[aria-expanded="true"] .navbar-toggler.collapse-icons::after {
    transform: rotate(-135deg);
  }
}

/* ----- 7. Bande de crédit : dark, discrète, jamais sur fond blanc -------- */
html body #footer .footer-container .container > .row:last-child {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
html body #footer .footer__copyright,
html body #footer .footer-container p.text-sm-center {
  background-color: transparent !important;
  color: var(--fg-mute) !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  margin: 0 !important;
}
html body #footer .footer__copyright a,
html body #footer .footer-container p.text-sm-center a {
  color: var(--fg-mute) !important;
  text-decoration: none !important;
}
html body #footer .footer__copyright a:hover {
  color: var(--fg) !important;
}

/* ----- 8. Débordement Bootstrap .row (-15px) neutralisé ------------------- */
html body #footer .row,
html body #footer .block_newsletter .row,
html body #footer .footer-container .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}