/* =============================================================
   Framedis — Thème enfant
   A1 · Design tokens + reset typographique DM Sans
   ============================================================= */

/* B-SEO Lot 5 : DM Sans déplacée en <link rel="stylesheet" media="print" onload=...>
   dans head.tpl (block head_charset) pour ne plus bloquer le rendu. La font fallback
   stack -apple-system/Segoe UI/Roboto/etc s'affiche immédiatement, puis DM Sans
   "swap" en place via font-display: swap dès qu'elle est chargée. */

:root {
  /* ——— Couleurs · primaires ——— */
  --fr-green-deep:   #2A4A1E;  /* Forêt — header, CTAs principaux */
  --fr-green-mid:    #4E7C3A;  /* Fougère — liens, icônes */
  --fr-green-light:  #EAF2E3;  /* Menthe pâle — badges BIO */
  --fr-green-pale:   #D4E8C2;  /* Chlorophylle — hover, highlights */
  --fr-amber:        #C07C2A;  /* Ambre — badges promo/bestseller (brun-doré) */
  --fr-amber-dark:   #A0641E;  /* Ambre hover */
  --fr-amber-light:  #FDF6ED;  /* Miel pâle — fond bestseller */
  --fr-orange:       #DE7D12;  /* Orange vif — lien « Promotions » dans la nav */
  --fr-orange-dark:  #B86109;  /* Orange vif hover */

  /* ——— Couleurs · neutres ——— */
  --fr-cream:        #F6F2EA;  /* Crème — fond chaud */
  --fr-page-bg:      #FAFAF5;  /* Lin blanc — fond de page général */
  --fr-white:        #FFFFFF;
  --fr-border:       #E4DDD0;  /* Bord doux */

  /* ——— Texte ——— */
  --fr-text-primary: #1A2E12;  /* Humus — texte principal */
  --fr-text-mid:     #4A4238;  /* Texte standard */
  --fr-text-muted:   #7A6A4A;  /* Écorce — descriptions, captions */
  --fr-text-dim:     #B0A896;  /* Labels discrets */

  /* ——— États ——— */
  --fr-success: #4E7C3A;
  --fr-warning: #C07C2A;
  --fr-danger:  #B54536;
  --fr-info:    #2456B4;

  /* ——— Typographie ——— */
  --fr-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* échelle (voir framedis_identite_finale.html, panel Typo) */
  --fr-text-display:  52px;  /* 600 — héros */
  --fr-text-h1:       38px;  /* 600 — titre de page */
  --fr-text-h2:       28px;  /* 600 — section */
  --fr-text-h3:       22px;  /* 600 — catégorie, carte */
  --fr-text-h4:       17px;  /* 600 — nom produit, sous-titre */
  --fr-text-body-l:   16px;  /* 400 — corps principal */
  --fr-text-body:     14px;  /* 400 — corps standard */
  --fr-text-caption:  12px;  /* 400 — mention légale */
  --fr-text-label:    11px;  /* 600 uppercase — badge, label */
  --fr-text-micro:    10px;  /* 600 uppercase — eyebrow */

  /* line-heights */
  --fr-lh-tight:  1.12;
  --fr-lh-snug:   1.3;
  --fr-lh-normal: 1.6;
  --fr-lh-loose:  1.75;

  /* letter-spacing */
  --fr-ls-tighter: -1.5px;
  --fr-ls-tight:   -0.5px;
  --fr-ls-snug:    -0.2px;
  --fr-ls-normal:  0;
  --fr-ls-wide:    0.1em;
  --fr-ls-wider:   0.14em;

  /* ——— Espacement ——— */
  --fr-radius-sm:   8px;
  --fr-radius-md:  12px;
  --fr-radius-lg:  16px;
  --fr-radius-xl:  20px;
  --fr-radius-pill: 100px;

  /* ——— Ombres ——— */
  --fr-shadow-sm: 0 2px 8px rgba(42, 74, 30, 0.06);
  --fr-shadow-md: 0 8px 24px rgba(42, 74, 30, 0.1);
  --fr-shadow-lg: 0 16px 40px rgba(42, 74, 30, 0.14);

  /* ——— Transitions ——— */
  --fr-transition: all 0.2s ease;
}

/* =============================================================
   Reset typographique global
   ============================================================= */

body {
  font-family: var(--fr-font-sans);
  font-size: var(--fr-text-body);
  line-height: var(--fr-lh-normal);
  color: var(--fr-text-primary);
  background-color: var(--fr-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   FOCUS POLICY — règle globale
   Pas d'outline noir au clic souris (UX), outline ambre au focus
   clavier (accessibilité). Couvre TOUS les liens, boutons, et
   éléments avec role="button" ou tabindex sur tout le site.
   Les form inputs (input, select, textarea) gardent leur focus
   natif pour la clarté.
   ============================================================= */
a:focus,
button:focus,
[role="button"]:focus,
[tabindex]:not([tabindex="-1"]):focus,
summary:focus,
.btn:focus { outline: none; box-shadow: none; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--fr-amber, #C07C2A);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Assure la propagation à tous les composants qui pourraient
   redéfinir leur font (forms, boutons, utilitaires Bootstrap) */
body, input, textarea, select, button,
.form-control, .btn, .navbar, .nav-link,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fr-font-sans);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--fr-text-primary);
  letter-spacing: var(--fr-ls-snug);
  line-height: var(--fr-lh-snug);
}

h1, .h1 { font-size: var(--fr-text-h1); letter-spacing: var(--fr-ls-tight); line-height: var(--fr-lh-tight); }
h2, .h2 { font-size: var(--fr-text-h2); }
h3, .h3 { font-size: var(--fr-text-h3); }
h4, .h4 { font-size: var(--fr-text-h4); }

p { line-height: var(--fr-lh-loose); }

a {
  color: var(--fr-green-mid);
  transition: var(--fr-transition);
}
a:hover,
a:focus {
  color: var(--fr-green-deep);
}

small, .small { font-size: var(--fr-text-caption); }

/* =============================================================
   A2 · Composants globaux
   ============================================================= */

/* ——— Boutons — override Bootstrap — pill + palette Framedis ——— */
.btn {
  border-radius: var(--fr-radius-pill);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  font-size: var(--fr-text-body);
  border: 1.5px solid transparent;
  transition: var(--fr-transition);
  line-height: 1.25;
}
.btn-lg {
  padding: 13px 30px;
  font-size: var(--fr-text-body);
}
.btn-sm {
  padding: 7px 16px;
  font-size: var(--fr-text-caption);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--fr-green-deep);
  border-color: var(--fr-green-deep);
  color: var(--fr-cream);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--fr-text-primary);
  border-color: var(--fr-text-primary);
  color: var(--fr-cream);
  transform: translateY(-1px);
  box-shadow: var(--fr-shadow-sm);
}

.btn-secondary,
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--fr-green-deep);
  color: var(--fr-green-deep);
}
.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: var(--fr-green-light);
  border-color: var(--fr-green-deep);
  color: var(--fr-green-deep);
}

/* Variantes Framedis ajoutées */
.btn-amber {
  background-color: var(--fr-amber);
  border-color: var(--fr-amber);
  color: var(--fr-white);
}
.btn-amber:hover {
  background-color: var(--fr-amber-dark);
  border-color: var(--fr-amber-dark);
  color: var(--fr-white);
  transform: translateY(-1px);
}

.btn-ghost {
  background-color: var(--fr-cream);
  border-color: var(--fr-border);
  color: var(--fr-text-mid);
}
.btn-ghost:hover {
  background-color: var(--fr-border);
  color: var(--fr-text-primary);
}

/* ——— Formulaires ——— */
.form-control,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
textarea.form-control,
select.form-control {
  border: 1.5px solid var(--fr-border);
  border-radius: var(--fr-radius-md);
  padding: 12px 16px;
  font-family: var(--fr-font-sans);
  font-size: var(--fr-text-body);
  color: var(--fr-text-primary);
  background-color: var(--fr-white);
  transition: border-color 0.2s;
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--fr-green-deep);
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.08);
  outline: none;
}
.form-control::placeholder { color: var(--fr-text-dim); }

.form-control-label,
label {
  font-weight: 500;
  color: var(--fr-text-mid);
  font-size: var(--fr-text-body);
}

/* ——— Cartes génériques ——— */
.card {
  background-color: var(--fr-white);
  border: 0.5px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  box-shadow: none;
}
.card-header {
  background-color: transparent;
  border-bottom: 0.5px solid var(--fr-border);
  padding: 16px 20px;
}
.card-body { padding: 20px; }

/* ——— Product miniature (cartes produits) ——— */
.product-miniature {
  margin-bottom: 24px;
}
.product-miniature .thumbnail-container {
  background-color: var(--fr-white);
  border: 0.5px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  transition: var(--fr-transition);
  height: auto;
  padding: 0;
  position: relative;
}
.product-miniature .thumbnail-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--fr-shadow-md);
  border-color: var(--fr-green-pale);
}
.product-miniature .thumbnail-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--fr-green-light), var(--fr-green-pale));
}
.product-miniature .product-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.product-miniature .thumbnail-container:hover .product-thumbnail img {
  transform: scale(1.03);
}

.product-miniature .product-description {
  padding: 16px;
  background-color: var(--fr-white);
}
.product-miniature .product-title {
  font-size: var(--fr-text-h4);
  font-weight: 600;
  color: var(--fr-text-primary);
  line-height: 1.3;
  letter-spacing: var(--fr-ls-snug);
  margin-bottom: 8px;
}
.product-miniature .product-title a {
  color: inherit;
  text-decoration: none;
}
.product-miniature .product-title a:hover {
  color: var(--fr-green-deep);
}

.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Bouton "Ajouter au panier" sur les cartes produits ──
   Visible sur toutes les pages où PS rend la miniature (home bestsellers,
   listes catégorie, recherche, related products, etc.). Le bouton est en
   bas-droite, le bloc prix prend l'espace restant à gauche. */
.product-miniature .product-price-and-shipping.fr-with-add {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}
.product-miniature .fr-price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Le form contient le bouton + les hidden inputs. On le neutralise
   visuellement pour qu'il ait la même taille que le bouton. */
.fr-pcard-add-form {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: inline-flex;
}
.fr-pcard-add {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--fr-amber, #C07C2A);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fr-pcard-add:hover {
  background: #A0641E;
  transform: translateY(-1px) scale(1.05);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(192, 124, 42, 0.35);
}
.fr-pcard-add:active { transform: translateY(0) scale(1); }
.fr-pcard-add svg { display: block; pointer-events: none; }
.fr-pcard-add .fr-pcard-add-icon-success { display: none; }
.fr-pcard-add[disabled] { cursor: wait; opacity: 0.7; }

/* Variante lien (produit avec déclinaisons → renvoie sur la fiche) */
.fr-pcard-add-link {
  background: var(--fr-green-deep, #2A4A1E);
}
.fr-pcard-add-link:hover { background: var(--fr-text-primary, #1A2E12); }

/* État loading : icône + remplacée par un spinner CSS */
.fr-pcard-add.fr-pcard-add-loading svg { opacity: 0.4; }
.fr-pcard-add.fr-pcard-add-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fr-pcard-spin 0.7s linear infinite;
}
@keyframes fr-pcard-spin { to { transform: rotate(360deg); } }

/* État succès : check vert pendant 1.5s */
.fr-pcard-add.fr-pcard-add-success {
  background: var(--fr-green-deep, #2A4A1E);
  animation: fr-pcard-pop 0.4s ease-out;
}
.fr-pcard-add.fr-pcard-add-success .fr-pcard-add-icon-default { display: none; }
.fr-pcard-add.fr-pcard-add-success .fr-pcard-add-icon-success { display: block; }
@keyframes fr-pcard-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* État erreur : rouge bref */
.fr-pcard-add.fr-pcard-add-error {
  background: #C0392B;
  animation: fr-pcard-shake 0.4s ease;
}
@keyframes fr-pcard-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   CARD PRODUIT v2 — refonte structure (PC + mobile)
   ═══════════════════════════════════════════════════════════════════
   Layout : image haut + vignette top-left + stars top-right
            puis body : eyebrow catégorie + nom + prix + qty/cart row */

/* Vignette top-left (cascade : discount % > BIO > 3+1 offert) */
.fr-pcard-flag-tl {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  pointer-events: none;
}
.fr-pcard-flag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26, 46, 18, 0.18);
}
.fr-pcard-flag-discount {
  background-color: var(--fr-amber, #C07C2A);
  color: var(--fr-white, #fff);
}
.fr-pcard-flag-bio {
  background-color: var(--fr-green-mid, #4E7C3A);
  color: var(--fr-cream, #F6F2EA);
}
.fr-pcard-flag-offer {
  background-color: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
}
.fr-pcard-flag-plus {
  display: inline-block;
  margin: 0 1px;
  font-weight: 700;
  color: var(--fr-amber, #C07C2A);
}

/* Stars top-right (productcomments hook) */
.fr-pcard-stars-tr {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  padding: 4px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(26, 46, 18, 0.15);
}
.fr-pcard-stars-tr:empty,
.fr-pcard-stars-tr .hook-reviews:empty,
.fr-pcard-stars-tr:has(.hook-reviews:empty) {
  display: none;
}
/* Cache les stars-tr s'il n'y a pas d'avis (productcomments rend une div vide
   ou avec 0 étoiles → on cache si pas d'enfant utile). */
.fr-pcard-stars-tr:not(:has(.star_on, .star)) {
  display: none;
}

/* Body de la card — text-align: left pour battre le centrage par défaut
   du parent Classic theme sur .product-description. */
.product-miniature .fr-pcard-body,
.fr-pcard-body {
  padding: 12px 14px 14px !important;
  text-align: left !important;
}
/* Form ajout panier : doit prendre toute la largeur du body pour que
   le qty selector intérieur (flex:1 1 auto) puisse réellement grandir.
   L'ancienne règle .fr-pcard-add-form { display: inline-flex } est
   spécifique à l'ancien layout (form contenait juste le bouton) ; on
   surcharge ici car maintenant le form contient toute la row d'actions. */
.product-miniature .fr-pcard-body .fr-pcard-add-form {
  display: block !important;
  width: 100%;
}

/* Eyebrow catégorie (au-dessus du nom) */
.fr-pcard-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fr-green-mid, #4E7C3A);
  margin-bottom: 5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nom du produit — aligné à gauche (override centrage natif Classic) */
.fr-pcard-name,
.product-miniature .fr-pcard-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fr-text-primary);
  text-align: left !important;
}
.fr-pcard-name a,
.fr-pcard-name a:hover,
.fr-pcard-name a:focus {
  color: inherit !important;
  text-decoration: none;
}

/* Prix row (sans le bouton add — il est descendu dans .fr-pcard-actions).
   text-align: left + justify-content: flex-start pour battre le centrage
   par défaut Classic sur .product-price-and-shipping. */
.product-miniature .product-price-and-shipping.fr-pcard-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left !important;
}
.fr-pcard-price-old {
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
  color: var(--fr-text-muted);
}
.fr-pcard-price-now {
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  line-height: 1;
}

/* Actions row : qty selector + cart button */
.fr-pcard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.fr-pcard-qty {
  display: inline-flex;
  align-items: center;
  background: var(--fr-cream, #F6F2EA);
  border: 1px solid var(--fr-border);
  border-radius: 100px;
  padding: 0 4px;
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  justify-content: space-between;
}
.fr-pcard-qty-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.fr-pcard-qty-btn:hover { background: var(--fr-green-light, #EAF2E3); }
.fr-pcard-qty-btn:active { transform: scale(0.92); }
.fr-pcard-qty-display {
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary);
  min-width: 18px;
  text-align: center;
  line-height: 1;
  padding: 0 4px;
  user-select: none;
}

/* Cart button (override de .fr-pcard-add pour la nouvelle structure) */
.fr-pcard-add.fr-pcard-cart-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  border-radius: 12px;
}
.fr-pcard-add.fr-pcard-cart-btn:hover {
  background: var(--fr-text-primary, #1A2E12);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26, 46, 18, 0.25);
}
.fr-pcard-add.fr-pcard-cart-btn.fr-pcard-add-success {
  background: var(--fr-green-mid, #4E7C3A);
}

/* Bouton "Plus d'informations" sous la row qty/cart — full width, vert deep.
   Soit accordéon <details> (panel posologie + bienfaits expand), soit lien
   <a> classique vers la fiche produit si pas de données saisies en BO. */
.fr-pcard-details {
  width: 100%;
  margin-top: 10px;
}
.fr-pcard-info-btn,
.fr-pcard-details summary.fr-pcard-info-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  height: 36px;
  margin-top: 10px;
  padding: 0 14px;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
}
.fr-pcard-details summary.fr-pcard-info-btn { margin-top: 0; }
.fr-pcard-details summary.fr-pcard-info-btn::-webkit-details-marker { display: none; }
.fr-pcard-details summary.fr-pcard-info-btn::marker { display: none; content: ''; }
/* L'effet "soulèvement" (translateY -1px + box-shadow) cause une légère
   vibration visuelle sur iOS Safari : après tap, le bouton reste en
   focus → translateY appliqué → si l'utilisateur scroll/relâche, le
   transition se rejoue. Solution : ne l'appliquer que sur les pointeurs
   FINS (= souris desktop). Sur touchscreen, on garde uniquement le
   background change pour le retour visuel. */
.fr-pcard-info-btn:hover,
.fr-pcard-info-btn:focus,
.fr-pcard-details summary.fr-pcard-info-btn:hover,
.fr-pcard-details summary.fr-pcard-info-btn:focus {
  background: var(--fr-text-primary, #1A2E12);
  color: var(--fr-cream, #F6F2EA) !important;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .fr-pcard-info-btn:hover,
  .fr-pcard-info-btn:focus,
  .fr-pcard-details summary.fr-pcard-info-btn:hover,
  .fr-pcard-details summary.fr-pcard-info-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 46, 18, 0.25);
  }
}
/* Empêche le wrap sur iOS Safari (qui rend le texte légèrement plus large
   que Chrome Android) → "Plus d'informations" reste sur une seule ligne
   même sur viewport narrow. */
.fr-pcard-info-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-pcard-info-btn svg,
.fr-pcard-info-chevron { display: block; flex: 0 0 auto; transition: transform 0.2s ease; }
.fr-pcard-details[open] .fr-pcard-info-chevron { transform: rotate(180deg); }

/* Overlay "Plus d'informations" — slide-up depuis le bas, INSIDE
   .thumbnail-container (qui a déjà le border-radius + overflow:hidden
   existants du theme). Le blur cible uniquement .thumbnail-top + body
   (pas le container) pour que l'overlay reste net et clippé aux coins
   arrondis du container. */
.product-miniature.fr-pcard .thumbnail-top,
.product-miniature.fr-pcard .product-description.fr-pcard-body {
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.product-miniature.fr-pcard.is-info-open .thumbnail-top,
.product-miniature.fr-pcard.is-info-open .product-description.fr-pcard-body {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
/* iOS Safari rasterise filter: blur via CPU à chaque frame → vibration
   visible pendant la transition. Sur touch devices (mobile/tablet), on
   bypass le blur et on dim juste l'opacité (purement GPU, fluide).
   On désactive aussi les transitions complexes (transform + opacity)
   sur touch → l'overlay apparaît instantanément, plus de risque de shake
   pendant l'animation. */
@media (hover: none) and (pointer: coarse) {
  .product-miniature.fr-pcard .thumbnail-top,
  .product-miniature.fr-pcard .product-description.fr-pcard-body {
    transition: opacity 0.18s ease !important;
  }
  .product-miniature.fr-pcard.is-info-open .thumbnail-top,
  .product-miniature.fr-pcard.is-info-open .product-description.fr-pcard-body {
    filter: none;
    opacity: 0.3;
  }
  .fr-pcard-info-overlay {
    transition: opacity 0.18s ease, visibility 0s linear 0.18s !important;
    -webkit-transform: none !important;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
  }
  .product-miniature.fr-pcard.is-info-open .fr-pcard-info-overlay {
    -webkit-transform: none !important;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s ease, visibility 0s linear 0s !important;
  }
}
.fr-pcard-info-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Pas de top/height fixé : le panel s'auto-size à la hauteur de son
     contenu (posologie + bienfaits), pas d'espace vide en dessous.
     Capé à 90% de la card pour garder un peu d'image floutée visible
     au-dessus si le contenu est très long ; overflow-y:auto = scroll. */
  max-height: 90%;
  background: var(--fr-white, #fff);
  border-radius: 18px 18px 0 0;
  padding: 16px 18px 18px;
  box-shadow: none;
  border-top: 1px solid var(--fr-border);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  overflow-y: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  /* Force GPU compositing pour éviter rerendering CPU pendant la transition
     (cause de vibration sur iOS Safari). */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.product-miniature.fr-pcard.is-info-open .fr-pcard-info-overlay {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.fr-pcard-info-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: var(--fr-cream, #F6F2EA);
  border: 1px solid var(--fr-border);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-text-mid);
  padding: 0;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fr-pcard-info-overlay-close:hover {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep);
  transform: scale(1.05);
}
.fr-pcard-info-overlay-close svg { display: block; }
.fr-pcard-info-overlay-content {
  padding-top: 6px;
  padding-right: 36px;     /* respiration pour ne pas chevaucher la close-btn */
}
.fr-pcard-info-section {
  margin-bottom: 14px;
  /* Stagger fade-in : sections invisibles tant que .is-info-open absent,
     fade décalé quand l'overlay arrive. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.fr-pcard-info-section:last-child { margin-bottom: 0; }
.product-miniature.fr-pcard.is-info-open .fr-pcard-info-section {
  opacity: 1;
  transform: translateY(0);
}
.product-miniature.fr-pcard.is-info-open .fr-pcard-info-section:nth-child(1) { transition-delay: 0.22s; }
.product-miniature.fr-pcard.is-info-open .fr-pcard-info-section:nth-child(2) { transition-delay: 0.34s; }
.fr-pcard-info-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-green-mid, #4E7C3A);
  margin-bottom: 5px;
  line-height: 1.2;
}
.fr-pcard-info-value {
  font-size: 12.5px;
  color: var(--fr-text-primary);
  line-height: 1.5;
}
.fr-pcard-info-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fr-pcard-info-benefits li {
  font-size: 12.5px;
  color: var(--fr-text-primary);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}
.fr-pcard-info-benefits li:last-child { margin-bottom: 0; }
.fr-pcard-info-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fr-green-mid, #4E7C3A);
  font-weight: 700;
}

/* CTA "Choisir" pour produits avec déclinaisons (full width) */
.fr-pcard-cta-variants {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fr-pcard-cta-variants:hover,
.fr-pcard-cta-variants:focus {
  background: var(--fr-text-primary, #1A2E12);
  color: var(--fr-cream, #F6F2EA);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26, 46, 18, 0.25);
}
.fr-pcard-cta-variants svg { display: block; flex: 0 0 auto; }

/* Cache les .product-flags natives PS sur les miniatures (on a notre vignette) */
.product-miniature .product-flags { display: none !important; }

/* Mode GRILLE sur mobile narrow (≤575px = breakpoint Bootstrap xs) :
   force 2 colonnes au lieu de la 1 colonne du col-xs-12 par défaut.
   Owner feedback : les cards en mode grille étaient trop grosses (image
   prenait quasi tout le viewport). En mode liste, on garde 1 colonne
   (l'override .fr-list-view a flex 1 1 100% qui prend le dessus via
   spécificité et !important). */
@media (max-width: 575px) {
  #js-product-list:not(.fr-list-view) .products > .js-product,
  #js-product-list:not(.fr-list-view) .products > .product,
  #js-product-list:not(.fr-list-view) .products > .col-xs-12 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* Resserre la gouttière entre les 2 cards de la rangée */
  #js-product-list:not(.fr-list-view) .products {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  /* Exception : quand il n'y a qu'1 seul produit dans la grille (cas
     fréquent sur /recherche?s=motspécifique), la card prend 100% au lieu
     de 50% pour ne pas paraître perdue au milieu du viewport. */
  #js-product-list:not(.fr-list-view) .products > .js-product:only-child,
  #js-product-list:not(.fr-list-view) .products > .product:only-child,
  #js-product-list:not(.fr-list-view) .products > .col-xs-12:only-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* (Règle déplacée plus bas dans le fichier — voir section "Mode LISTE
   mobile/tablette : image réduite" après les règles de base list-view
   qui imposent 240px avec !important.) */

/* Mobile : ajustements compacts */
@media (max-width: 600px) {
  .fr-pcard-body { padding: 10px 12px 12px !important; }
  .fr-pcard-eyebrow { font-size: 9.5px; }
  .fr-pcard-name { font-size: 13px; margin-bottom: 6px; }
  .fr-pcard-price-now { font-size: 16px; }
  .fr-pcard-price-old { font-size: 11px; }
  .fr-pcard-qty { height: 34px; padding: 0 2px; }
  .fr-pcard-qty-btn { width: 26px; height: 26px; font-size: 16px; }
  .fr-pcard-qty-display { font-size: 13px; }
  .fr-pcard-add.fr-pcard-cart-btn { width: 34px; height: 34px; border-radius: 10px; }
  .fr-pcard-cta-variants { height: 34px; font-size: 12.5px; border-radius: 10px; }
  .fr-pcard-info-btn,
  .fr-pcard-details summary.fr-pcard-info-btn {
    min-height: 34px; height: 34px; font-size: 11.5px; border-radius: 10px; margin-top: 8px; padding: 0 12px;
  }
  .fr-pcard-details { margin-top: 8px; }
  .fr-pcard-details summary.fr-pcard-info-btn { margin-top: 0; }
  .fr-pcard-info-btn svg,
  .fr-pcard-info-chevron { width: 12px; height: 12px; }
  .fr-pcard-info-panel { padding: 10px 12px; border-radius: 10px; }
  .fr-pcard-info-label { font-size: 10px; }
  .fr-pcard-info-value,
  .fr-pcard-info-benefits li { font-size: 11.5px; }
  .fr-pcard-flag { padding: 4px 8px; font-size: 9.5px; }
  .fr-pcard-stars-tr { font-size: 10px; padding: 3px 6px; }
}

/* ── Toast flash (notification flottante "Produit ajouté") ── */
.fr-flash {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  padding: 14px 24px;
  border-radius: 12px;
  font-family: var(--fr-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.3, 0.5, 1);
  max-width: calc(100vw - 40px);
  text-align: center;
}
.fr-flash.fr-flash-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.fr-flash.fr-flash-error {
  background: #C0392B;
  color: #fff;
}
.product-miniature .price {
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-green-deep);
}
.product-miniature .regular-price {
  font-size: var(--fr-text-caption);
  color: var(--fr-text-dim);
  text-decoration: line-through;
  font-weight: 400;
}
.product-miniature .discount-percentage,
.product-miniature .discount-amount {
  display: inline-flex;
  align-items: center;
  background-color: var(--fr-amber-light);
  color: var(--fr-amber);
  font-size: var(--fr-text-label);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--fr-radius-pill);
  letter-spacing: 0.02em;
}

/* Highlights au survol (quick view / variants) — couleur Forêt Profonde,
   override de la couleur lien bleue par défaut du thème Classic. */
.product-miniature .highlighted-informations {
  background-color: rgba(246, 242, 234, 0.96);
  border-top: 0.5px solid var(--fr-border);
}
.product-miniature .highlighted-informations a,
.product-miniature .highlighted-informations a:visited,
.product-miniature .quick-view,
.product-miniature .quick-view:visited,
.product-miniature .quick-view .material-icons,
.product-miniature .quick-view i {
  color: var(--fr-green-deep) !important;
  font-weight: 500;
}
.product-miniature .highlighted-informations a:hover,
.product-miniature .highlighted-informations a:focus,
.product-miniature .quick-view:hover,
.product-miniature .quick-view:focus,
.product-miniature .quick-view:hover .material-icons,
.product-miniature .quick-view:focus .material-icons,
.product-miniature .quick-view:hover i,
.product-miniature .quick-view:focus i {
  color: var(--fr-text-primary) !important;
}

/* ——— Product flags (New, -X%, Promo, Pack, Online only) ——— */
.product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2;
}
.product-flag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--fr-radius-pill);
  font-size: var(--fr-text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  background-color: var(--fr-cream);
  color: var(--fr-text-muted);
  border: 0.5px solid var(--fr-border);
}
.product-flag.new {
  background-color: #E8F0FC;
  color: var(--fr-info);
  border-color: transparent;
}
.product-flag.discount,
.product-flag.on-sale,
.product-flag.discount-percentage,
.product-flag.discount-amount {
  background-color: var(--fr-amber-light);
  color: var(--fr-amber);
  border-color: transparent;
}
.product-flag.online-only {
  background-color: var(--fr-green-light);
  color: var(--fr-green-deep);
  border-color: transparent;
}
.product-flag.pack {
  background-color: #F4EDFB;
  color: #6E3AAA;
  border-color: transparent;
}
.product-flag.out_of_stock {
  background-color: #FDECEC;
  color: var(--fr-danger);
  border-color: transparent;
}
.product-flag.bio {
  background-color: var(--fr-green-mid, #4E7C3A);
  color: var(--fr-cream, #F6F2EA);
  border-color: transparent;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ——— Badges Framedis (classes custom utilisées dans nos templates) ——— */
.fr-bdg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--fr-radius-pill);
  font-size: var(--fr-text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.fr-bdg-bio   { background: var(--fr-green-light); color: var(--fr-green-deep); }
.fr-bdg-promo { background: var(--fr-amber-light); color: var(--fr-amber); }
.fr-bdg-new   { background: #E8F0FC; color: var(--fr-info); }
.fr-bdg-best  { background: #F4EDFB; color: #6E3AAA; }
.fr-bdg-fr    { background: var(--fr-cream); color: var(--fr-text-muted); border: 0.5px solid var(--fr-border); }
.fr-bdg-cond  { background: var(--fr-green-light); color: var(--fr-green-mid); }

/* ——— Breadcrumb (cream-bg full-width via pseudo-element) ────────
   PS rend la breadcrumb dans <nav class="breadcrumb"><ol><li>…</li></ol></nav>
   à l'intérieur du .container Bootstrap. On garde l'élément dans le flux
   normal (pas de marge négative → pas de scrollbar horizontale) et on étend
   juste la couleur de fond cream au-delà du container via un ::before absolu. */
.breadcrumb {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: none !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--fr-text-mid);
  border-radius: 0;
}
.breadcrumb::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-cream, #F6F2EA);
  border-bottom: 1px solid var(--fr-border);
  pointer-events: none;
}
.breadcrumb ol {
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

/* Notifications PS : <aside id="notifications"> reste dans le DOM même
   sans contenu et peut créer un mini-bandeau visible entre la reass bar
   et la breadcrumb. On le force à display:none quand vide. */
#notifications:has(.notifications-container:empty),
.notifications-container:empty {
  display: none !important;
}
/* Fallback navigateurs sans :has() : on garde un height auto + 0 padding
   pour que l'élément vide n'occupe aucun espace */
#notifications { padding: 0 !important; margin: 0 !important; }
.notifications-container { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }

/* #wrapper : pas de padding-top sur les pages catégorie (la breadcrumb
   gère elle-même son espacement). Le home avait déjà sa propre règle. */
body.category #wrapper,
body[id^="category"] #wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.category #wrapper > .container,
body[id^="category"] #wrapper > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Idem pour toutes les pages "compte client" (connexion, inscription,
   historique, identité, adresses, mon-compte, etc.) — body.page-customer-account
   est posé par PS sur l'ensemble de ces pages. Sans ça, #wrapper hérite d'un
   padding-top par défaut qui crée une bande blanche entre la reassurance bar
   et la zone cream du breadcrumb.
   On double avec des sélecteurs body[id=...] (PS9 met page_name comme id) et
   les classes spécifiques par page car page-customer-account n'est pas
   systématiquement appliquée sur toutes les pages du compte selon les versions. */
body.page-customer-account #wrapper,
body.page-cms #wrapper,
body.page-contact #wrapper,
body#my-account #wrapper,
body#addresses #wrapper,
body#address #wrapper,
body#identity #wrapper,
body#history #wrapper,
body#order-detail #wrapper,
body#order-follow #wrapper,
body#order-slip #wrapper,
body#discount #wrapper,
body#authentication #wrapper,
body#registration #wrapper,
body#password #wrapper,
body.page-my-account #wrapper,
body.page-addresses #wrapper,
body.page-address #wrapper,
body.page-identity #wrapper,
body.page-history #wrapper,
body.page-order-detail #wrapper,
body.page-discount #wrapper,
body.page-authentication #wrapper,
body.page-registration #wrapper,
body.page-password #wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-customer-account #wrapper > .container,
body.page-cms #wrapper > .container,
body.page-contact #wrapper > .container,
body#my-account #wrapper > .container,
body#addresses #wrapper > .container,
body#address #wrapper > .container,
body#identity #wrapper > .container,
body#history #wrapper > .container,
body#order-detail #wrapper > .container,
body#order-follow #wrapper > .container,
body#order-slip #wrapper > .container,
body#discount #wrapper > .container,
body#authentication #wrapper > .container,
body#registration #wrapper > .container,
body#password #wrapper > .container,
body.page-my-account #wrapper > .container,
body.page-addresses #wrapper > .container,
body.page-address #wrapper > .container,
body.page-identity #wrapper > .container,
body.page-history #wrapper > .container,
body.page-order-detail #wrapper > .container,
body.page-discount #wrapper > .container,
body.page-authentication #wrapper > .container,
body.page-registration #wrapper > .container,
body.page-password #wrapper > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Aération du titre H1 "Créez votre compte" / "Connectez-vous" qui sinon
   colle le bloc tabs juste en-dessous. Idem pour CMS et Contact qui ont
   aussi un <header class="page-header"><h1> systématique. */
body.page-customer-account .page-header,
body.page-cms .page-header,
body.page-contact .page-header {
  margin-top: 28px;
  margin-bottom: 24px;
}
body.page-customer-account .page-header h1,
body.page-cms .page-header h1,
body.page-contact .page-header h1 {
  margin: 0;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before {
  content: '›';
  color: var(--fr-text-mid);
  opacity: 0.4;
  padding: 0 10px;
  font-size: 14px;
}
.breadcrumb a {
  color: var(--fr-text-mid);
  text-decoration: none;
  transition: color 0.15s ease;
}
.breadcrumb a:hover {
  color: var(--fr-green-deep);
  text-decoration: none;
}
.breadcrumb li:last-child > span {
  color: var(--fr-text-primary);
  font-weight: 500;
}
/* Plus de séparateur Bootstrap par défaut (.breadcrumb-item::before) */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: none; }

/* La breadcrumb reste masquée sur la home (notre layout home n'en a pas
   besoin — on est sur "Accueil" justement). Cf. règle existante body#index */

/* ——— Pagination — Forêt Profonde (match mockup framedis_page_categorie_v2)
   PS9 markup réel : <nav class="pagination">
                       <div.col-md-4>Affichage 1-12 de 13...</div>
                       <div.col-md-6.offset-md-2><ul.page-list><li...>
   On override le layout Bootstrap col-* pour positionner summary à gauche
   et la liste de boutons à droite. Chaque page = pill 38×38 avec border. */
/* Strip TOUT background/border/padding sur les wrappers internes possibles
   de la pagination (Bootstrap col-* + nav + ul + li). Sinon PS Classic ou
   Bootstrap appliquent un white card par défaut. */
nav.pagination,
#js-product-list-bottom,
#js-product-list-bottom > nav.pagination,
.products-bottom,
nav.pagination > [class*="col-"],
nav.pagination .page-list,
ul.page-list > li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
nav.pagination,
#js-product-list-bottom,
.products-bottom {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 8px !important;
  padding: 0 !important;
}
nav.pagination {
  width: 100%;
}
/* Réinitialise les éventuels paddings col-md-* */
nav.pagination > [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
}
nav.pagination > [class*="col-"] {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--fr-text-mid);
}
/* IMPORTANT : tous les sélecteurs sont scopés sur ul.page-list (le <ul>
   de pagination natif PS). PS9 ajoute aussi `page-list` au <body> quand
   php_self == 'list' (cas de notre module framedisavis) — sans le scope
   ul, les règles ci-dessous polluaient tous les <li><a> du body, footer
   inclus. Bug fix B4 avis — 2026-05-11. */
ul.page-list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.page-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.page-list li a,
ul.page-list li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--fr-border);
  border-radius: 10px;
  background: var(--fr-white, #fff);
  font-size: 14px;
  font-weight: 500;
  color: var(--fr-text-mid);
  text-decoration: none !important;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  line-height: 1;
  font-family: inherit;
}
ul.page-list li a:hover {
  border-color: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-green-deep, #2A4A1E);
  background: var(--fr-green-light, #EAF2E3);
}
ul.page-list li.current a,
ul.page-list li.current > span,
ul.page-list li.current a:hover {
  background: #EAF2E3 !important;
  border-color: #2A4A1E !important;
  color: #2A4A1E !important;
  font-weight: 700;
  cursor: default;
}
ul.page-list li a.disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* Spacer "..." */
ul.page-list li .spacer {
  border: 0;
  background: transparent;
  color: var(--fr-text-mid);
  min-width: 24px;
  padding: 0 4px;
}
/* Flèches précédent/suivant — un peu plus larges pour le label texte */
ul.page-list li a.previous,
ul.page-list li a.next {
  padding: 0 14px;
  gap: 4px;
  font-size: 13px;
}
ul.page-list li a.previous .material-icons,
ul.page-list li a.next .material-icons {
  font-size: 18px;
  line-height: 1;
}
/* Mobile : tout centré sous la summary */
@media (max-width: 900px) {
  nav.pagination {
    flex-direction: column;
    gap: 12px;
  }
}

/* ——— Alertes / notifications ——— */
.alert {
  border-radius: var(--fr-radius-md);
  border: 0.5px solid transparent;
  padding: 14px 18px;
  font-size: var(--fr-text-body);
}
.alert-success { background: var(--fr-green-light); color: var(--fr-green-deep); }
.alert-warning { background: var(--fr-amber-light); color: var(--fr-amber); }
.alert-danger  { background: #FDECEC; color: var(--fr-danger); }
.alert-info    { background: #E8F0FC; color: var(--fr-info); }

/* =============================================================
   A3 · Topbar + Header + Navigation + Réassurance
   ============================================================= */

/* ——— Topbar (bande vert forêt au-dessus du header) ——— */
.fr-topbar {
  background-color: var(--fr-green-deep);
  color: rgba(246, 242, 234, 0.85);
  font-size: var(--fr-text-caption);
  padding: 8px 0;
  letter-spacing: 0.02em;
}
.fr-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Le 2e groupe (duplicate marquee) est masqué en desktop. */
.fr-topbar-marquee-group {
  display: contents;
}
.fr-topbar-marquee-group[aria-hidden="true"] {
  display: none;
}
.fr-topbar-item {
  white-space: nowrap;
  color: inherit;        /* override iOS Safari auto-link tel: noir */
}
.fr-topbar-item sup {
  font-size: 0.7em;
  top: -0.4em;
  color: rgba(246, 242, 234, 0.6);
}
.fr-topbar-sep {
  color: rgba(246, 242, 234, 0.35);
  user-select: none;
}
/* iOS Safari "linkifie" automatiquement les n° de téléphone — l'<a>
   créé hérite de la couleur lien par défaut (noir/bleu). On force la
   couleur du topbar pour ces auto-links. */
.fr-topbar a,
.fr-topbar a:link,
.fr-topbar a:visited,
.fr-topbar a:active,
.fr-topbar a:hover {
  color: inherit !important;
  text-decoration: none !important;
}
.fr-topbar-note {
  font-size: 10px;
  color: rgba(246, 242, 234, 0.55);
  font-style: italic;
  letter-spacing: 0.03em;
  margin-left: 4px;
}

/* ——— Logo provisoire (SVG inline dans le template, voir header.tpl) ——— */
.fr-logo-wrap {
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: 0;
  font-size: 0;
}
.fr-logo-fallback {
  display: inline-flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  line-height: 0;
}
.fr-logo-fallback:hover { text-decoration: none; }
.fr-logo-fallback svg,
.fr-logo-fallback img { display: block; height: 72px; width: auto; }

/* ==============================================================
   NOUVEAU HEADER — Logo | Menu | Actions sur une seule ligne
   (l'ancien block header-nav a été supprimé du template)
   ============================================================== */

/* Le header : largeur maxi 1600px, centré dans la page.
   Élargi par rapport à la version 1400px d'origine pour que les 8 catégories
   du menu (dont "DÉFENSES NATURELLES" et "HUILES ESSENTIELLES" qui sont longues)
   s'affichent sans collage avec le logo gauche ni les icônes droite.
   Padding latéral réduit à 16px pour pousser logo et icônes vers les bords. */
.header-top,
.header-top > .container,
.header-top .container {
  max-width: 1600px !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fr-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 6px 0;
  overflow: visible;
  flex-wrap: nowrap;
  width: 100%;
}

.fr-header-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.fr-header-center {
  flex: 1 1 auto;
  min-width: 0;      /* autorise le menu à rétrécir si trop long */
  display: flex;
  align-items: center;
  justify-content: center;  /* menu centré dans l'espace disponible */
  gap: 12px;
  overflow: visible;
}

.fr-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--fr-white);  /* couvre tout débordement du menu */
  position: relative;
  z-index: 2;
  padding-left: 8px;
}

.fr-header-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
}
/* Logo mobile centré (le desktop logo .fr-header-logo est masqué via @media). */
.fr-header-mobile-logo {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-decoration: none;
}
.fr-header-mobile-logo img {
  display: block;
  height: 50px;
  width: auto;
  max-width: 200px;
}
.fr-header-mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Barre de recherche mobile : wrapper transparent (pas de fond crème),
   le pill blanc est posé directement sur le fond de la page. */
.fr-header-mobile-search-bar {
  width: 100%;
  padding: 10px 16px 12px;
  background-color: transparent;
  border: 0;
  box-sizing: border-box;
}
.fr-header-mobile-search {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 42px;
  background: var(--fr-white, #fff);
  border: 1px solid var(--fr-border);
  border-radius: 100px;
  padding: 0 4px;
  margin: 0;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fr-header-mobile-search:focus-within {
  border-color: var(--fr-green-deep, #2A4A1E);
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.08);
}
.fr-header-mobile-search-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--fr-green-deep, #2A4A1E);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.fr-header-mobile-search-btn:hover { background-color: var(--fr-green-light, #EAF2E3); }
.fr-header-mobile-search-btn svg { display: block; }
.fr-header-mobile-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  /* font-size: 16px obligatoire sur mobile — en dessous, iOS Safari
     auto-zoom au focus de l'input et décale tout le viewport. */
  font-size: 16px;
  color: var(--fr-text-primary);
  outline: none;
  padding: 0 6px;
  box-sizing: border-box;
}
.fr-header-mobile-search-input::placeholder {
  color: var(--fr-text-muted);
  opacity: 1;
}
.fr-header-mobile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fr-green-light);
  color: var(--fr-green-deep);
  cursor: pointer;
  border: 0;
  padding: 0;
  flex: 0 0 auto;
  transition: var(--fr-transition);
  text-decoration: none;
}
.fr-header-mobile-icon:hover { background-color: var(--fr-green-pale); }
.fr-header-mobile-icon i.material-icons {
  color: var(--fr-green-deep);
  font-size: 20px;
  line-height: 1;
}
.fr-header-mobile-spacer { flex: 1 1 auto; }

/* — Cart link mobile : pill rond + badge orange superposé en haut-droite — */
.fr-header-mobile-cart-link {
  position: relative;
  overflow: visible;
}
.fr-header-mobile-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background-color: var(--fr-amber);
  color: var(--fr-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--fr-white);
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
}

/* ——— Menu principal dans le nouveau header ——— */
.fr-header-center #_desktop_top_menu,
.fr-header-center .menu {
  display: flex;
  align-items: center;
}
.fr-header-center #top-menu,
.fr-header-center .top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;    /* menu sur une seule ligne */
}
.fr-header-center #top-menu > li {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
}
.fr-header-center #top-menu > li > a {
  color: var(--fr-text-primary);
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  border-radius: 8px;
  background: transparent;
  transition: var(--fr-transition);
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: nowrap;
  text-transform: uppercase;  /* style identité */
}
.fr-header-center #top-menu > li > a:hover,
.fr-header-center #top-menu > li.current > a {
  color: var(--fr-green-deep) !important;
  background-color: var(--fr-green-light) !important;
}

/* ——— Item "Promotions" en orange vif (classe ajoutée par framedis.js) ——— */
.fr-header-center #top-menu > li.fr-menu-promo > a {
  color: var(--fr-orange) !important;
  font-weight: 700;
}
.fr-header-center #top-menu > li.fr-menu-promo > a:hover {
  color: var(--fr-orange-dark) !important;
  background-color: var(--fr-amber-light, #FBEBD4) !important;
}

/* ——— Sous-menu (popover Classic) — style inspiré du mockup v7 ——— */
.fr-header-center .popover.sub-menu,
.fr-header-center #top-menu > li > .sub-menu {
  background-color: var(--fr-white);
  border: 0.5px solid var(--fr-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(42, 74, 30, 0.12);
  padding: 12px;
  min-width: 240px;
  margin-top: 8px;
}

/* Force le sous-menu à s'aligner sur le bord gauche du <li> parent.
   Le thème classic PS pose `.top-menu .sub-menu { margin-left: 0.9375rem }`
   qui décale le dropdown de 15px vers la droite. On le neutralise + on
   force la position absolute exacte sous l'item survolé.
   Préfixe body + !important pour battre les règles classic héritées. */
body .fr-header-center #top-menu > li {
  position: relative !important;
}
body .fr-header-center .top-menu .sub-menu,
body .fr-header-center #top-menu > li > .sub-menu,
body .fr-header-center #top-menu > li > .sub-menu.popover,
body .fr-header-center #top-menu > li > .popover.sub-menu,
body .fr-header-center #top-menu > li > .sub-menu[data-popper-placement],
body .fr-header-center #top-menu > li > .sub-menu.collapse.in,
body .fr-header-center #top-menu > li > .sub-menu.collapse.show {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  inset: 100% auto auto 0 !important;
  transform: none !important;
  margin: 8px 0 0 0 !important;
  padding: 12px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 240px !important;
  will-change: auto !important;
}

/* Force le <ul> interne à empiler verticalement (Classic peut hériter du flex) */
.fr-header-center .sub-menu .top-menu,
.fr-header-center .popover.sub-menu ul {
  display: block !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  width: 100%;
}
.fr-header-center .sub-menu li {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.fr-header-center .sub-menu a,
.fr-header-center .sub-menu a.dropdown-item,
.fr-header-center .sub-menu a.dropdown-submenu {
  display: block !important;
  width: 100%;
  color: var(--fr-text-mid) !important;
  background: transparent !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
}
.fr-header-center .sub-menu a:hover,
.fr-header-center .sub-menu a:focus {
  background-color: var(--fr-green-light) !important;
  color: var(--fr-green-deep) !important;
  padding-left: 16px !important;
  text-decoration: none !important;
}

/* Pas d'outline noir au clic souris sur tous les éléments interactifs du
   header (logo, menu principal, sous-menu, icônes recherche/compte/panier,
   topbar). Outline ambre uniquement au focus clavier (Tab) pour rester
   accessible. */
.fr-logo-fallback:focus,
.fr-header-center #top-menu > li > a:focus,
.fr-header-center .sub-menu a:focus,
.fr-search-trigger:focus,
.fr-header-actions .user-info a:focus,
.fr-header-actions #_desktop_user_info a:focus,
.fr-header-actions .blockcart:focus,
.fr-header-actions .cart-preview:focus,
.fr-header-mobile-icon:focus,
.fr-topbar a:focus { outline: none; }
.fr-logo-fallback:focus-visible,
.fr-header-center #top-menu > li > a:focus-visible,
.fr-header-center .sub-menu a:focus-visible,
.fr-search-trigger:focus-visible,
.fr-header-actions .user-info a:focus-visible,
.fr-header-actions #_desktop_user_info a:focus-visible,
.fr-header-actions .blockcart:focus-visible,
.fr-header-actions .cart-preview:focus-visible,
.fr-header-mobile-icon:focus-visible,
.fr-topbar a:focus-visible {
  outline: 2px solid var(--fr-amber, #C07C2A);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ——— Bouton loupe (trigger de la modal de recherche) ——— */
.fr-search-trigger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--fr-green-light);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-green-deep);
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  transition: var(--fr-transition);
}
.fr-search-trigger:hover,
.fr-search-trigger:focus {
  background-color: var(--fr-green-pale);
  outline: none;
}
.fr-search-trigger svg { display: block; }

/* ——— Modal de recherche ——— */
.fr-search-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 46, 18, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 120px 20px 20px;
  animation: fr-overlay-in 0.18s ease-out;
}
body.fr-search-open .fr-search-overlay {
  display: flex;
}
body.fr-search-open {
  overflow: hidden;   /* bloque le scroll sous la modal */
}
@keyframes fr-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fr-search-overlay-inner {
  position: relative;
  width: 100%;
  max-width: 640px;
  background-color: var(--fr-white);
  border-radius: var(--fr-radius-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--fr-shadow-lg);
  animation: fr-overlay-pop 0.22s ease-out;
}
@keyframes fr-overlay-pop {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fr-search-overlay-title {
  font-size: var(--fr-text-h4);
  font-weight: 600;
  color: var(--fr-text-primary);
  margin-bottom: 14px;
}
.fr-search-overlay-hint {
  font-size: var(--fr-text-caption);
  color: var(--fr-text-muted);
  margin-top: 10px;
}
.fr-search-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--fr-cream);
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--fr-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--fr-transition);
}
.fr-search-close:hover {
  background-color: var(--fr-border);
  color: var(--fr-text-primary);
}

/* Le widget ps_searchbar est rendu 2 fois dans la page :
   - via le hook `displayTop` (auto), positionné collé au menu = doublon
   - via {widget name='ps_searchbar'} dans .fr-search-overlay = le bon
   On masque toutes les instances ps_searchbar EN DEHORS de l'overlay.
   `display: revert` sur celui de l'overlay pour réactiver. */
#search_widget {
  display: none !important;
}
.fr-search-overlay-inner #search_widget {
  display: block !important;
}

/* Input de recherche DANS la modal (plein cadre) */
.fr-search-overlay-inner #search_widget {
  position: relative;
  width: 100%;
}
.fr-search-overlay-inner #search_widget form {
  position: relative;
  margin: 0;
  width: 100%;
  display: block;
}
.fr-search-overlay-inner #search_widget input[type="text"],
.fr-search-overlay-inner #search_widget input[type="search"] {
  width: 100%;
  height: 52px;
  background-color: var(--fr-cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A1E' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 20px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--fr-radius-md);
  padding: 0 20px 0 52px;
  font-size: 16px;
  color: var(--fr-text-primary);
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
  box-sizing: border-box;
}
.fr-search-overlay-inner #search_widget input[type="text"]:focus {
  border-color: var(--fr-green-deep);
  background-color: var(--fr-white);
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.1);
}
.fr-search-overlay-inner #search_widget input::placeholder {
  color: var(--fr-text-dim);
}
.fr-search-overlay-inner #search_widget button,
.fr-search-overlay-inner #search_widget form button,
.fr-search-overlay-inner #search_widget form label,
.fr-search-overlay-inner #search_widget form .material-icons {
  display: none !important;
}

/* ——— Ancien search inline (pas utilisé dans le header — conservé pour
       usage dans d'autres pages PS qui rendraient displayTop) ——— */
.fr-header-row #search_widget,
.fr-header-row .search-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  flex: 0 0 auto;
}
.fr-header-row #search_widget form,
.fr-header-row .search-widget form {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
}
.fr-header-row #search_widget input[type="text"],
.fr-header-row .search-widget input[type="text"] {
  width: 40px;
  padding: 8px 8px 8px 38px;
  background-color: var(--fr-green-light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A1E' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--fr-radius-pill);
  font-size: var(--fr-text-body);
  color: var(--fr-text-primary);
  transition: width 0.25s ease, background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  height: 40px;
  box-sizing: border-box;
}
.fr-header-row #search_widget input[type="text"]:focus,
.fr-header-row .search-widget input[type="text"]:focus,
.fr-header-row #search_widget input[type="text"]:not(:placeholder-shown),
.fr-header-row .search-widget input[type="text"]:not(:placeholder-shown) {
  width: 240px;
  background-color: var(--fr-white);
  border-color: var(--fr-green-deep);
  cursor: text;
  outline: none;
}
.fr-header-row #search_widget input[type="text"]::placeholder,
.fr-header-row .search-widget input[type="text"]::placeholder {
  color: transparent;
}
.fr-header-row #search_widget input[type="text"]:focus::placeholder,
.fr-header-row .search-widget input[type="text"]:focus::placeholder {
  color: var(--fr-text-dim);
}
/* Supprime tout ce qui n'est pas l'input dans la form de recherche
   (label, bouton submit, icône material du bouton, etc.) — la loupe
   est déjà dessinée en background SVG sur l'input lui-même. */
.fr-header-row #search_widget form button,
.fr-header-row .search-widget form button,
.fr-header-row #search_widget form [type="submit"],
.fr-header-row .search-widget form [type="submit"],
.fr-header-row #search_widget form label,
.fr-header-row .search-widget form label,
.fr-header-row #search_widget form .material-icons,
.fr-header-row .search-widget form .material-icons,
.fr-header-row #search_widget form i.material-icons,
.fr-header-row .search-widget form i.material-icons {
  display: none !important;
}
/* Placeholder transparent universel (pour les navigateurs qui ignorent ::placeholder) */
.fr-header-row input[type="text"][name="s"],
.fr-header-row input[type="search"][name="s"] {
  color-scheme: normal;
}

/* ——— Compte (icône seule, texte masqué) ———
   Trick font-size:0 : tue TOUT texte (nœuds texte ET spans) sans
   avoir à deviner la structure DOM exacte. On réactive la taille
   sur l'icône uniquement. */
.fr-header-actions .user-info,
.fr-header-actions #_desktop_user_info {
  margin: 0 !important;
  padding: 0 !important;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
}
.fr-header-actions .user-info a,
.fr-header-actions #_desktop_user_info a {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: var(--fr-green-light) !important;
  color: var(--fr-green-deep) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  transition: var(--fr-transition);
  font-size: 0 !important;
  overflow: visible;
}
.fr-header-actions .user-info a:hover,
.fr-header-actions #_desktop_user_info a:hover {
  background-color: var(--fr-green-pale) !important;
  color: var(--fr-green-deep) !important;
}
.fr-header-actions .user-info a .material-icons,
.fr-header-actions .user-info a i,
.fr-header-actions #_desktop_user_info a .material-icons,
.fr-header-actions #_desktop_user_info a i {
  color: var(--fr-green-deep) !important;
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* État connecté : ps_customersignin rend 2 <a> (logout + account). Sans
   override, les 2 prennent la pastille verte → cercle "déconnexion" en
   doublon + cercle "compte" vide (son icône est .hidden-md-up et le
   nom client est tué par font-size:0). On masque le lien logout dans
   la pastille (toujours accessible depuis la page Mon compte) et on
   force l'icône silhouette du lien compte à apparaître sur desktop. */
.fr-header-actions .user-info a.logout,
.fr-header-actions #_desktop_user_info a.logout {
  display: none !important;
}
.fr-header-actions .user-info a.account .material-icons,
.fr-header-actions #_desktop_user_info a.account .material-icons {
  display: inline-flex !important;
}

/* ——— Panier —
   NB : ps_shoppingcart.tpl de Classic ne met PAS de <a> wrapper quand
   le panier est vide (products_count = 0). On cible donc .blockcart
   lui-même comme conteneur cliquable/stylé, et on gère le cas <a>
   en réinitialisant ses dimensions à 100% du parent. */
.fr-header-actions #_desktop_cart {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  background: transparent !important;
  flex: 0 0 auto;
}
.fr-header-actions .blockcart,
.fr-header-actions .blockcart.active,
.fr-header-actions .blockcart.inactive,
.fr-header-actions .cart-preview,
.fr-header-actions .cart-preview.active,
.fr-header-actions .cart-preview.inactive {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--fr-green-light) !important;
  color: var(--fr-green-deep) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  overflow: visible !important;
  font-size: 0 !important;       /* tue tout texte (spans "Panier", nœuds texte, etc.) */
  line-height: 0 !important;
  transition: var(--fr-transition);
  cursor: pointer;
}
.fr-header-actions .blockcart:hover,
.fr-header-actions .cart-preview:hover {
  background-color: var(--fr-green-pale) !important;
}
.fr-header-actions .blockcart .header {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  position: relative;
}
.fr-header-actions .blockcart a,
.fr-header-actions .cart-preview a {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--fr-green-deep) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  transition: var(--fr-transition);
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}
.fr-header-actions .blockcart i.material-icons,
.fr-header-actions .cart-preview i.material-icons,
.fr-header-actions .blockcart .material-icons,
.fr-header-actions .cart-preview .material-icons,
.fr-header-actions .blockcart i.shopping-cart,
.fr-header-actions .cart-preview i.shopping-cart {
  color: var(--fr-green-deep) !important;
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}
/* Badge compteur : positionné en haut-droite de l'icône */
.fr-header-actions .cart-products-count,
.fr-header-actions .blockcart .cart-products-count,
.fr-header-actions .cart-preview .cart-products-count {
  position: absolute !important;
  top: -4px !important;
  right: -6px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  background-color: var(--fr-amber) !important;
  color: var(--fr-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  border: 2px solid var(--fr-white) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap;
}

/* ——— Masquer la langue/devise dans le header (utilisateur n'en veut pas ici) ——— */
.fr-header-actions .language-selector,
.fr-header-actions .currency-selector {
  display: none;
}

/* ——— Responsive ———
   Breakpoint header : on coupe à 1325px (au lieu du 768px par défaut)
   pour que les iPads (portrait/landscape) ET les laptops étroits (sous
   1325) reçoivent le rendu mobile (burger + logo centré + actions). À
   partir de 1325px (PC + grands laptops) → menu desktop full avec
   respiration. Owner a calibré ce seuil le 2026-05-18 — en-dessous le
   menu PC était tassé (tous les liens collés). */

/* Classes utilitaires header — show/hide selon breakpoint 1325px.
   Posées par header.tpl en remplacement des classes Bootstrap
   hidden-md-up/hidden-sm-down qui coupaient à 768px. */
@media (max-width: 1324px) {
  .fr-header-desktop-show { display: none !important; }
}
@media (min-width: 1325px) {
  .fr-header-mobile-show { display: none !important; }
}

@media (max-width: 1324px) {
  .fr-header-center { display: none; }
  .fr-header-actions { display: none; }
  /* Le logo desktop principal est masqué sur mobile/tablette — le logo
     mobile centré (.fr-header-mobile-logo) prend le relais. */
  .fr-header-logo,
  #_desktop_logo { display: none !important; }
  .fr-header-row { gap: 0; padding: 0; }
  /* Sur mobile : on supprime le padding du .header-top ET de .container
     parent (sinon double padding 16+16=32px qui empêche les icônes
     d'aller au bord). La barre de recherche en dessous remet 16px
     en interne pour garder un peu de respiration autour du pill blanc. */
  .header-top,
  .header-top > .container,
  .header-top .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Le menu mobile natif Classic (#mobile_top_menu_wrapper) est ouvert
     par le JS Classic au clic du burger, EN PARALLÈLE de notre popup
     custom. On le force masqué pour éviter le doublon visuel. */
  #mobile_top_menu_wrapper,
  #_mobile_top_menu,
  #_mobile_currency_selector,
  #_mobile_language_selector,
  #_mobile_contact_link {
    display: none !important;
  }

  /* === Mobile menu overlay (burger) ===
     Popup centrée avec marges (les bords du site restent visibles autour
     pour rappeler à l'utilisateur qu'il est toujours sur le site). */
  .fr-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
  }
  .fr-mobile-menu.is-open {
    pointer-events: auto;
    visibility: visible;
  }
  .fr-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 46, 18, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
    cursor: pointer;
  }
  .fr-mobile-menu.is-open .fr-mobile-menu-backdrop {
    opacity: 1;
  }
  .fr-mobile-menu-panel {
    position: absolute;
    /* marges fixes : le site reste visible 50px en haut/bas, 14px sur les côtés */
    top: 50px;
    bottom: 50px;
    left: 14px;
    right: 14px;
    background: var(--fr-white, #fff);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94) translateY(16px);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
  }
  .fr-mobile-menu.is-open .fr-mobile-menu-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  .fr-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--fr-border);
    flex-shrink: 0;
  }
  .fr-mobile-menu-logo img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
  }
  .fr-mobile-menu-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--fr-cream, #F6F2EA);
    color: var(--fr-text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fr-mobile-menu-close:hover {
    background: var(--fr-green-light, #EAF2E3);
    color: var(--fr-green-deep, #2A4A1E);
  }
  .fr-mobile-menu-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .fr-mobile-menu-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-green-mid, #4E7C3A);
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .fr-mobile-menu-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
  }
  .fr-mobile-menu-list li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .fr-mobile-menu-list li:last-child { border-bottom: 0; }
  .fr-mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0;
  }
  /* Couleurs liens forcées explicitement (override le bleu lien par défaut) */
  .fr-mobile-menu-link,
  .fr-mobile-menu-link:link,
  .fr-mobile-menu-link:visited {
    flex: 1 1 auto;
    display: block;
    padding: 13px 4px;
    color: var(--fr-text-primary) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, padding 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fr-mobile-menu-link:hover,
  .fr-mobile-menu-link:active,
  .fr-mobile-menu-link:focus {
    color: var(--fr-green-deep, #2A4A1E) !important;
    padding-left: 8px;
  }
  /* Item promotion en orange — override prioritaire */
  .fr-mobile-menu-list li.is-promo .fr-mobile-menu-link,
  .fr-mobile-menu-list li.is-promo .fr-mobile-menu-link:link,
  .fr-mobile-menu-list li.is-promo .fr-mobile-menu-link:visited {
    color: var(--fr-orange, #DE7D12) !important;
    font-weight: 600;
  }
  .fr-mobile-menu-list li.is-promo .fr-mobile-menu-link:hover {
    color: var(--fr-amber, #C07C2A) !important;
  }
  /* Bouton toggle (chevron) pour ouvrir les sous-catégories */
  .fr-mobile-menu-toggle {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--fr-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 6px;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
  }
  .fr-mobile-menu-toggle:hover { background: var(--fr-green-light, #EAF2E3); color: var(--fr-green-deep, #2A4A1E); }
  /* Variante statique (catégorie sans sous-catégories) — même dimensions
     qu'un bouton toggle pour alignement vertical avec les autres lignes. */
  .fr-mobile-menu-toggle.is-static {
    pointer-events: none;
    cursor: default;
  }
  .fr-mobile-menu-toggle.is-static:hover { background: transparent; color: var(--fr-text-muted); }
  .fr-mobile-menu-chevron { transition: transform 0.25s ease; display: block; }
  .fr-mobile-menu-list li.is-open .fr-mobile-menu-chevron { transform: rotate(90deg); }
  /* Sous-liste : repliée par défaut, animation height au toggle */
  .fr-mobile-menu-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .fr-mobile-menu-list li.is-open .fr-mobile-menu-sublist {
    max-height: 500px;
  }
  .fr-mobile-menu-sublist li {
    border-bottom: 0;
  }
  .fr-mobile-menu-sublist a,
  .fr-mobile-menu-sublist a:link,
  .fr-mobile-menu-sublist a:visited {
    display: block;
    padding: 9px 4px 9px 18px;
    color: var(--fr-text-mid) !important;
    font-size: 13.5px;
    text-decoration: none;
    transition: color 0.15s ease, padding 0.15s ease;
    border-left: 2px solid transparent;
    margin-left: 4px;
  }
  .fr-mobile-menu-sublist a:hover,
  .fr-mobile-menu-sublist a:active,
  .fr-mobile-menu-sublist a:focus {
    color: var(--fr-green-deep, #2A4A1E) !important;
    border-left-color: var(--fr-green-mid, #4E7C3A);
    padding-left: 22px;
  }
  /* Padding-bottom de la sous-liste ouverte pour l'aération visuelle */
  .fr-mobile-menu-list li.is-open .fr-mobile-menu-sublist {
    padding: 4px 0 10px;
  }
  .fr-mobile-menu-footer {
    flex-shrink: 0;
    padding: 12px 20px 18px;
    background: var(--fr-cream, #F6F2EA);
    border-top: 1px solid var(--fr-border);
  }
  .fr-mobile-menu-actions {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .fr-mobile-menu-actions a,
  .fr-mobile-menu-actions a:link,
  .fr-mobile-menu-actions a:visited {
    display: block;
    padding: 10px 4px;
    color: var(--fr-text-primary) !important;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .fr-mobile-menu-actions a:hover,
  .fr-mobile-menu-actions a:active,
  .fr-mobile-menu-actions a:focus {
    color: var(--fr-green-deep, #2A4A1E) !important;
  }

  /* Sticky header mobile : quand l'utilisateur a scrollé au-delà de la
     topbar, le JS (setupMobileStickyHeader) ajoute .is-mobile-header-pinned
     sur le body. Le row burger/logo/cart/user devient fixed, la topbar et
     la search bar (en flow normal) scrollent avec la page.
     iOS Safari : backdrop-filter sur un élément fixed à côté d'éléments
     sticky cause un shake pendant le momentum scroll (compositing complexe
     de 2 layers GPU). On utilise donc un fond opaque solide à la place. */
  body.is-mobile-header-pinned .fr-header-row {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 12px rgba(42, 74, 30, 0.08);
  }
  /* Compense la sortie du flow du row (padding-top sur body = hauteur du row)
     pour éviter le jump de contenu quand le row se pin. Hauteur réelle
     rendue = 67px. */
  body.is-mobile-header-pinned {
    padding-top: 67px;
  }
}
@media (min-width: 1325px) {
  .fr-header-mobile { display: none !important; }
}

/* ─── Override tablette portrait : panel burger compact ─────────────
   Sur iPad Pro 12.9" portrait (1024), le panel pleine page laisse un
   grand vide entre les 8 catégories (nav ~400px) et le footer "Mon
   compte". On contraint largeur (440px ancré à gauche, sous le burger)
   + hauteur (auto, max-height calc(100vh - 100px)) pour un drawer compact.
   Scope strict : tablette portrait uniquement (901-1024 + orientation
   portrait). iPad std portrait (768) et Pro 11 portrait (834) sont
   désormais en MOBILE (≤900) donc gardent le panel pleine page. */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
  .fr-mobile-menu-panel {
    left: 14px;
    right: auto;
    width: min(440px, calc(100% - 28px));
    top: 60px;
    bottom: auto;
    max-height: calc(100vh - 100px);
  }
}

/* ——— Header nav — reset des overrides Classic qui font déborder
       les blocs panier/compte hors du bandeau ——— */
.header-nav {
  background-color: var(--fr-cream);
  border-bottom: 0.5px solid var(--fr-border);
  max-height: none !important;
  min-height: 0;
  padding: 8px 0;
  margin-bottom: 0;
  font-size: var(--fr-text-caption);
  color: var(--fr-text-muted);
  overflow: visible;
}
.header-nav .right-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: nowrap;
}
.header-nav a {
  color: var(--fr-text-mid);
  text-decoration: none;
}
.header-nav a:hover {
  color: var(--fr-green-deep);
}

/* — Blockcart (panier) : reset height/padding/background/margin forcés — */
.header-nav .blockcart,
.header-nav .blockcart.active,
.header-nav .blockcart.inactive,
.header-nav .cart-preview,
.header-nav .cart-preview.active,
.header-nav .cart-preview.inactive {
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--fr-text-mid);
  text-align: left;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  border-radius: var(--fr-radius-pill);
  transition: var(--fr-transition);
}
.header-nav .blockcart:hover,
.header-nav .cart-preview:hover,
.header-nav .cart-preview.active:hover {
  background: var(--fr-green-light) !important;
}
.header-nav .blockcart .header {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-nav .blockcart a,
.header-nav .cart-preview a {
  color: var(--fr-text-mid) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  width: auto !important;
}
.header-nav .blockcart a:hover,
.header-nav .cart-preview.active a:hover {
  color: var(--fr-green-deep) !important;
}
.header-nav .cart-preview .shopping-cart,
.header-nav .cart-preview i,
.header-nav .cart-preview.active .shopping-cart,
.header-nav .cart-preview.active i {
  color: var(--fr-green-deep) !important;
  font-size: 20px;
  vertical-align: middle;
}

/* — User-info (compte) : même reset — */
.header-nav .user-info,
#header .header-nav .user-info,
.header-nav .language-selector,
.header-nav .currency-selector {
  margin: 0 !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--fr-radius-pill);
  transition: var(--fr-transition);
}
.header-nav .user-info:hover {
  background: var(--fr-green-light);
}
.header-nav .user-info a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  width: auto !important;
  color: var(--fr-text-mid) !important;
  line-height: 1.4;
}
.header-nav .user-info a:hover {
  color: var(--fr-green-deep) !important;
}
.header-nav .user-info .material-icons {
  color: var(--fr-green-deep);
  font-size: 20px;
  vertical-align: middle;
}

/* — #_desktop_contact_link (téléphone à gauche dans displayNav1) — */
.header-nav #_desktop_contact_link,
.header-nav #_desktop_contact_link #contact-link {
  margin: 0 !important;
  padding: 4px 0 !important;
  color: var(--fr-text-muted);
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}

/* ——— Header top (logo + searchbar + menu) ——— */
.header-top {
  background-color: var(--fr-white);
  padding: 12px 0;
  border-bottom: 0.5px solid var(--fr-border);
}
.header-top .container { position: relative; }

/* Overflow visible sur la chaîne de parents — nécessaire pour :
   1) position:sticky du #header (sinon un overflow:hidden parent casse sticky)
   2) full-bleed margin: calc(50% - 50vw) sur .fr-family-page et autres
      sections qui débordent du container Bootstrap (sinon le hero famille
      est clippé à la largeur du container et laisse une bande blanche
      à gauche).
   Doit rester actif dès 769px (tablette + PC), même si le sticky #header
   ci-dessous n'est lui activé qu'à partir de 1325px. */
@media (min-width: 901px) {
  html, body, main, #main, #wrapper, #page, .l-wrapper {
    overflow: visible !important;
  }
}

/* Sticky desktop uniquement : tout le <header> (topbar + banner + header-top)
   reste figé en haut quand on scrolle. On applique le sticky au <header> lui-même,
   pas à .header-top, sinon sticky s'arrête dès que le <header> parent quitte le
   viewport.
   Désactivé en mobile ET tablette (<1325px) : sur ces tailles, le rendu
   header utilise burger + barre de recherche pleine largeur EN-DESSOUS.
   Faire #header sticky collerait aussi la barre de recherche en haut (UX
   trop encombrante). À la place, le JS setupMobileStickyHeader pin
   uniquement le row burger/logo/actions via .is-mobile-header-pinned ;
   la barre de recherche scrolle alors normalement avec la page. */
@media (min-width: 1325px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 500;
    background-color: var(--fr-white);
  }
  .header-top {
    box-shadow: 0 2px 12px rgba(42, 74, 30, 0.06);
  }
}
#_desktop_logo img,
#_desktop_logo svg { max-height: 56px; width: auto; }

/* ——— Recherche (ps_searchbar) ——— */
#search_widget,
.search-widget {
  max-width: 100%;
}
#search_widget form,
.search-widget form {
  position: relative;
}
#search_widget input[type="text"],
.search-widget input[type="text"] {
  background-color: var(--fr-cream);
  border: 1.5px solid transparent;
  border-radius: var(--fr-radius-pill);
  padding: 10px 44px 10px 18px;
  font-size: var(--fr-text-body);
  color: var(--fr-text-primary);
  width: 100%;
  transition: var(--fr-transition);
}
#search_widget input[type="text"]:focus,
.search-widget input[type="text"]:focus {
  background-color: var(--fr-white);
  border-color: var(--fr-green-deep);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.08);
}
#search_widget button[type="submit"],
.search-widget button[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  background: transparent;
  border: none;
  color: var(--fr-green-deep);
}

/* ——— Menu principal (ps_mainmenu) ——— */
.top-menu,
.top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-menu[data-depth="0"] > li {
  position: relative;
  margin: 0;
}
.top-menu a.top-menu-link,
.top-menu a[data-depth="0"] {
  color: var(--fr-text-mid);
  font-size: var(--fr-text-body);
  font-weight: 500;
  padding: 8px 14px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: var(--fr-transition);
  text-decoration: none;
  letter-spacing: 0;
}
.top-menu a.top-menu-link:hover,
.top-menu a[data-depth="0"]:hover,
.top-menu li:hover > a {
  color: var(--fr-green-deep);
  border-bottom-color: var(--fr-green-deep);
  background-color: transparent;
}

/* Sous-menus dropdown */
.top-menu .sub-menu {
  background-color: var(--fr-white);
  border: 0.5px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  box-shadow: var(--fr-shadow-md);
  padding: 14px 0;
  min-width: 220px;
}
.top-menu .sub-menu a {
  color: var(--fr-text-mid);
  padding: 8px 20px;
  font-size: var(--fr-text-body);
}
.top-menu .sub-menu a:hover {
  background-color: var(--fr-green-light);
  color: var(--fr-green-deep);
}

/* ——— Panier & compte dans le header (icônes rondes) ——— */
.header-nav .blockcart,
.header-nav .user-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fr-text-caption);
}
.header-nav .blockcart .cart-products-count {
  background-color: var(--fr-amber);
  color: var(--fr-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--fr-radius-pill);
  margin-left: 4px;
}
.header-nav .blockcart.active,
.header-nav .blockcart.inactive {
  background-color: transparent;
  color: var(--fr-text-mid);
}

/* ——— Bandeau de réassurance (module PS blockreassurance) ───────
   On utilise notre propre partial _partials/reassurance-bar.tpl rendu
   par le layout. Le module PS natif blockreassurance était utilisé en
   A3 puis remplacé en B1 par notre partial — on masque toutes ses sorties
   pour éviter qu'il s'affiche en doublon, peu importe le hook (Wrapper-
   Top, ContentWrapperTop, NavFullWidth, FooterBefore, etc.). */
#block-reassurance,
.block_reassurance,
.block-reassurance,
[id^="block-reassurance"],
body > #block-reassurance {
  display: none !important;
}

/* ——— Responsive : topbar marquee infini en mobile ——— */
@media (max-width: 900px) {
  .fr-topbar {
    font-size: 11px;
    padding: 6px 0;
    overflow: hidden;
  }
  .fr-topbar > .container {
    padding: 0;
    max-width: none;
  }
  /* Le track passe en flex inline qui s'étend hors écran, le 2e groupe
     duplicate est rendu (display:contents → flex enfants) pour permettre
     le loop sans coupure. Animation translateX 0 → -50% (le 2e groupe
     occupe la 2e moitié, donc -50% revient au début visuellement). */
  .fr-topbar-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 14px;
    animation: fr-topbar-marquee 28s linear infinite;
  }
  .fr-topbar-marquee-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .fr-topbar-marquee-group[aria-hidden="true"] {
    display: inline-flex;     /* visible en mobile pour le loop */
  }
  .fr-topbar-sep { display: inline; }    /* ré-active les séparateurs en marquee */
}
@keyframes fr-topbar-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

  #block-reassurance ul {
    grid-template-columns: 1fr 1fr;
  }
  #block-reassurance .block-reassurance-item {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════
   B1 — HOMEPAGE (itération 1 : Hero + Besoins)
   ═══════════════════════════════════════════════════════════ */

/* ── Visibilité par device (classes posées par framedissettings) ─────
   Les templates ajoutent .fr-hide-pc / .fr-hide-tablet / .fr-hide-mobile
   sur les <section> en fonction des toggles configurés dans l'admin
   (BO → Modules → Framedis Paramètres → onglet "Affichage").
   Breakpoints alignés sur le reste du CSS B1. */
@media (min-width: 901px) {
  .fr-hide-pc { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .fr-hide-tablet { display: none !important; }
}
@media (max-width: 600px) {
  .fr-hide-mobile { display: none !important; }
}

/* La page-home de Classic a des paddings/container qu'on neutralise pour
   laisser nos sections full-width (cream/blanc/vert) s'étaler correctement. */
#content.page-home {
  padding: 0 !important;
  max-width: none !important;
}

/* ── FULL-BLEED via pseudo-élément ::before ───────────────────────────
   Au lieu de faire sortir .fr-hero / .fr-besoins de leur container (ce qui
   provoquait une scrollbar horizontale), on garde les sections dans leur flux
   naturel et on étend UNIQUEMENT le fond de couleur au-delà du container via
   un pseudo-élément absolu. Le texte et les éléments internes restent centrés
   par le container Bootstrap ; seul le fond "déborde" visuellement. */
.fr-hero,
.fr-besoins {
  position: relative;
  isolation: isolate;              /* nouveau stacking context */
  margin-left: 0;
  margin-right: 0;
}
.fr-hero { background: transparent; }     /* le gradient passe sur ::before */
.fr-besoins { background: transparent; }  /* le blanc passe sur ::before */

.fr-hero::before,
.fr-besoins::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;                     /* derrière tous les enfants */
  pointer-events: none;
}
.fr-hero::before {
  background: linear-gradient(135deg, #1A2E12 0%, #2A4A1E 50%, #3D6830 100%);
}
.fr-besoins::before {
  background: var(--fr-white, #fff);
}
.fr-besoins { border-bottom: 0 !important; }

/* Empêche tout débordement horizontal au cas où le pseudo-élément dépasserait
   (par ex. sur Windows où 100vw inclut la largeur de la scrollbar). Appliqué
   sur #wrapper uniquement pour ne pas casser position:sticky du header. */
#wrapper { overflow-x: clip !important; }

/* Masque la breadcrumb vide sur la home (elle créerait un espace au-dessus
   du hero) */
body#index .breadcrumb,
body.page-index .breadcrumb,
#wrapper > .container > .breadcrumb:empty { display: none; }

/* Colle le Hero directement sous le header (plus de whitespace) sur la home */
body#index #wrapper,
body.page-index #wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#index #wrapper > .container,
body.page-index #wrapper > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#index #wrapper .row,
body.page-index #wrapper .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#index #content-wrapper,
body.page-index #content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#index #content.page-home,
body.page-index #content.page-home {
  margin: 0 !important;
}
body#index main,
body.page-index main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Classic ajoute un <footer class="page-footer"> vide à la fin du content,
   entre la newsletter et le <footer id="footer">. Il a un padding qui crée
   la bande cream résiduelle. On le masque sur la home. */
body#index .page-footer,
body.page-index .page-footer {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* <section id="main"> de page.tpl peut aussi avoir du padding-bottom */
body#index #main,
body.page-index #main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Le <section id="wrapper"> global aussi */
body#index #wrapper,
body.page-index #wrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Les notifications PS sont souvent vides mais rendues : les masquer si vides */
body#index #notifications:empty,
body.page-index #notifications:empty,
body#index .notifications-container:empty,
body.page-index .notifications-container:empty { display: none !important; }

/* ─── Section-header réutilisable (eyebrow + title + "voir tout") ─── */
.fr-sec-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4E7C3A;
  margin-bottom: 8px;
}
.fr-sec-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--fr-text-primary);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.fr-sec-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.fr-sec-more {
  font-size: 13px;
  font-weight: 500;
  color: #4E7C3A;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.fr-sec-more:hover {
  color: var(--fr-green-deep);
  text-decoration: none;
}

/* ══════════ 03 — HERO ══════════ */
.fr-hero {
  /* fond déplacé sur ::before (plus haut dans ce fichier) pour s'étendre
     au-delà du container Bootstrap ; overflow retiré pour ne pas clipper
     le pseudo-élément qui doit déborder jusqu'aux bords du viewport */
  min-height: 580px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  color: var(--fr-cream, #F6F2EA);
}
.fr-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 8 Q34 16 30 24 Q26 16 30 8Z' fill='%23F6F2EA' opacity='.035'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}
.fr-hero-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fr-hero-deco-right {
  right: 48px;
  bottom: 0;
  opacity: 0.07;
}
.fr-hero-deco-left {
  left: 16px;
  top: 32px;
  opacity: 0.04;
}

.fr-hero-left {
  padding: 72px 48px 72px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.fr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(246, 242, 234, 0.10);
  border: 1px solid rgba(246, 242, 234, 0.18);
  color: rgba(246, 242, 234, 0.75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  width: fit-content;
}
.fr-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  line-height: 1.06;
  letter-spacing: -1.8px;
  margin: 0 0 8px;
}
.fr-hero-slogan {
  font-size: 20px;
  font-weight: 300;
  color: rgba(246, 242, 234, 0.6);
  letter-spacing: 0.04em;
  font-style: italic;
  margin-bottom: 18px;
}
.fr-hero-sub {
  font-size: 15px;
  color: rgba(246, 242, 234, 0.6);
  line-height: 1.75;
  margin: 0 0 34px;
  max-width: 420px;
}
.fr-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}
.fr-cta-main {
  background: var(--fr-amber, #C07C2A);
  color: #fff;
}
.fr-cta-main:hover {
  background: #A0641E;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.fr-cta-sec {
  background: transparent;
  color: rgba(246, 242, 234, 0.85);
  border-color: rgba(246, 242, 234, 0.28);
  padding: 14px 28px;
}
.fr-cta-sec:hover {
  border-color: rgba(246, 242, 234, 0.55);
  color: var(--fr-cream, #F6F2EA);
  text-decoration: none;
}

/* Hero trust — 4 petites stats sous les CTA */
.fr-hero-trust {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(246, 242, 234, 0.1);
  flex-wrap: wrap;
}
.fr-trust-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -0.5px;
}
.fr-trust-lbl {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.48);
  margin-top: 2px;
}

/* Hero right — 4 mini cartes produit illustrées */
.fr-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 48px 40px 48px 24px;
}
.fr-hero-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 380px;
}
.fr-hp-card {
  background: rgba(246, 242, 234, 0.10);
  border: 1px solid rgba(246, 242, 234, 0.15);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.fr-hp-card:hover {
  background: rgba(246, 242, 234, 0.16);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.fr-hp-thumb {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.fr-hp-thumb-photo {
  background: rgba(246, 242, 234, 0.06);
}
.fr-hp-thumb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fr-hp-body { padding: 12px 14px; }
.fr-hp-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.45);
  margin-bottom: 3px;
}
.fr-hp-cat-amber { color: var(--fr-amber, #C07C2A); }
.fr-hp-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  line-height: 1.25;
}
.fr-hp-qty {
  font-size: 10px;
  color: rgba(246, 242, 234, 0.45);
  margin-top: 2px;
}
.fr-hp-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-amber, #C07C2A);
  margin-top: 6px;
}

/* ══════════ 04 — BESOINS ══════════ */
.fr-besoins {
  /* fond + bordure déplacés sur ::before (plus haut) pour déborder du container */
  padding: 60px 40px;
}
.fr-besoins-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.fr-besoins-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.fr-besoin-chip {
  background: #FAF7F0;
  border: 1.5px solid var(--fr-border);
  border-radius: 14px;
  padding: 18px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.fr-besoin-chip:hover {
  border-color: #4E7C3A;
  background: #EAF2E3;
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.fr-bc-icon {
  font-size: 26px;
  margin-bottom: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  color: var(--fr-green-deep, #2A4A1E);
  transition: color 0.2s ease;
}
.fr-bc-icon-svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
}
.fr-besoin-chip:hover .fr-bc-icon {
  color: var(--fr-green-mid, #4E7C3A);
}
.fr-bc-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fr-text-primary);
  line-height: 1.3;
}

/* ——— Responsive homepage ——— */
@media (max-width: 900px) {
  .fr-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fr-hero-left {
    padding: 48px 24px 32px;
  }
  .fr-hero-right {
    padding: 0 24px 40px;
  }
  .fr-hero-deco-right,
  .fr-hero-deco-left { display: none; }
  .fr-hero-title { font-size: 40px; letter-spacing: -1px; }
  .fr-hero-trust { gap: 20px; }

  .fr-besoins { padding: 48px 20px; }
  .fr-besoins-grid { grid-template-columns: repeat(4, 1fr); }
  .fr-sec-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fr-sec-title { font-size: 24px; }
}
@media (max-width: 600px) {
  .fr-hero-title { font-size: 34px; }
  .fr-hero-products { max-width: none; }
  .fr-besoins-grid { grid-template-columns: repeat(2, 1fr); }
  /* Eyebrow hero "PLUS DE 26 ANS..." sur 1 seule ligne sur mobile,
     prenant quasiment toute la largeur disponible. */
  .fr-hero-eyebrow {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 8px 14px;
  }
  /* Réduit le padding latéral du hero-left sur mobile pour donner +
     d'espace à l'eyebrow. */
  .fr-hero-left { padding: 48px 16px 32px !important; }
  /* Centre les 2 CTAs hero ("Découvrir nos produits" + "Par besoin de
     santé") sur mobile — sur PC ils restent alignés à gauche. */
  .fr-hero-ctas { justify-content: center; }
}

/* ══════════ 05 — BESTSELLERS ══════════ */
.fr-bestsellers {
  position: relative;
  isolation: isolate;
  padding: 64px 40px;
}
.fr-bestsellers::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-white, #fff);
  pointer-events: none;
}
.fr-bestsellers-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Le widget ps_featuredproducts rend .featured-products > h2 + .row + lien.
   On masque h2 (notre .fr-sec-header fait le job) et le lien "all products"
   de bas de section : on laisse Bootstrap (.row + col-xs-12 col-sm-6 col-lg-4
   col-xl-3 sur .product-miniature) gérer la grille de 4 colonnes. */
.fr-bestsellers .featured-products > h2,
.fr-bestsellers .featured-products > .products-section-title,
.fr-bestsellers .featured-products > .all-product-link { display: none !important; }
.fr-bestsellers .featured-products .product-miniature { margin-bottom: 20px; }

/* ══════════ 07 — UNIVERS ══════════ */
.fr-univers {
  position: relative;
  isolation: isolate;
  padding: 80px 40px;
}
.fr-univers::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background-color: var(--fr-cream, #F6F2EA);
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 Q44 20 40 30 Q36 20 40 10Z' fill='%232A4A1E' opacity='.04'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
}
.fr-univers-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.fr-univers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fr-ucard {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fr-ucard:hover,
.fr-ucard:focus {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(42, 74, 30, 0.10);
  text-decoration: none;
  color: inherit;
}
.fr-ucard-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Card avec photo réelle (cf. univers-complements.jpg / univers-huiles.jpg
   sur la home) — l'image remplit toute la zone, object-fit cover. */
.fr-ucard-img-photo {
  background: var(--fr-page-bg, #FAF7F0);
}
.fr-ucard-img-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.fr-ucard:hover .fr-ucard-img-photo img,
.fr-ucard:focus .fr-ucard-img-photo img {
  transform: scale(1.04);
}
.fr-ucard-bdg {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(246, 242, 234, 0.16);
  color: var(--fr-cream, #F6F2EA);
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fr-ucard-body {
  padding: 24px;
}
.fr-ucard-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.fr-ucard-sub {
  font-size: 12px;
  color: var(--fr-text-mid);
  line-height: 1.5;
  margin-bottom: 14px;
}
.fr-ucard-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-green-deep);
  letter-spacing: 0.01em;
}
.fr-ucard:hover .fr-ucard-link { color: var(--fr-amber, #C07C2A); }

/* ══════════ 03B — RÉASSURANCE (entre Hero et Besoins) ══════════ */
.fr-reass {
  position: relative;
  isolation: isolate;
}
.fr-reass::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-white, #fff);
  border-bottom: 2px solid var(--fr-green-light, #EAF2E3);
  pointer-events: none;
}
.fr-reass-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Le wrapper marquee-group est transparent en desktop (display: contents
   → ses enfants .fr-reass-item deviennent enfants directs du grid). Le
   2e groupe (duplicate pour le marquee mobile) est masqué en desktop. */
.fr-reass-marquee-group { display: contents; }
.fr-reass-marquee-group[aria-hidden="true"] { display: none; }
.fr-reass-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  border-right: 1px solid var(--fr-border);
}
.fr-reass-item:last-child { border-right: 0; }
.fr-reass-icon { flex-shrink: 0; opacity: 0.8; color: var(--fr-green-deep); }
.fr-reass-icon svg { display: block; }
.fr-reass-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-text-primary);
  line-height: 1.3;
}
.fr-reass-sub {
  font-size: 12px;
  color: var(--fr-text-mid);
  margin-top: 3px;
  line-height: 1.4;
}

/* ══════════ 05B — BANDE STATISTIQUES (vert foncé) ══════════ */
.fr-stats {
  position: relative;
  isolation: isolate;
  padding: 40px;
}
.fr-stats::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background-color: var(--fr-green-deep, #2A4A1E);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 8 Q34 16 30 24 Q26 16 30 8Z' fill='%23F6F2EA' opacity='.04'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}
.fr-stats-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.fr-stat {
  text-align: center;
  padding: 8px 16px;
  border-right: 1px solid rgba(246, 242, 234, 0.10);
}
.fr-stat:last-child { border-right: 0; }
.fr-stat-val {
  font-size: 44px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -2px;
  line-height: 1;
}
.fr-stat-val-amber { color: var(--fr-amber, #C07C2A); }
.fr-stat-unit {
  font-size: 20px;
  font-weight: 300;
  opacity: 0.55;
  letter-spacing: 0;
  margin-left: 2px;
}
.fr-stat-unit-soft {
  color: rgba(246, 242, 234, 0.45);
  opacity: 1;
}
.fr-stat-lbl {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.45);
  margin-top: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ══════════ 06 — BANDEAU PROMO (orange, admin-éditable) ══════════ */
.fr-promo {
  position: relative;
  isolation: isolate;
  padding: 48px 40px;
}
.fr-promo::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: linear-gradient(135deg, var(--fr-amber, #C07C2A) 0%, #9E5818 100%);
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23fff' opacity='.06' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--fr-amber, #C07C2A) 0%, #9E5818 100%);
  background-size: 80px 80px, auto;
  pointer-events: none;
}
/* Filigrane "FRAMEDIS" en arrière-plan du bandeau */
.fr-promo-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-20%, -50%);
  font-family: var(--fr-font-sans);
  font-size: 160px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.055);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -6px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 80%;
  user-select: none;
  z-index: 0;
}
.fr-promo-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.fr-promo-copy { min-width: 0; }
.fr-promo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.fr-promo-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 10px;
}
.fr-promo-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.fr-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--fr-amber, #C07C2A);
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fr-promo-cta:hover,
.fr-promo-cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: var(--fr-amber, #C07C2A);
}

/* Responsive des 3 nouveaux blocs */
@media (max-width: 900px) {
  .fr-reass-inner { grid-template-columns: repeat(2, 1fr); }
  .fr-reass-item:nth-child(2n) { border-right: 0; }
  .fr-reass-item:nth-child(-n+2) { border-bottom: 1px solid var(--fr-border); }

  .fr-stats { padding: 28px 20px; }
  .fr-stats-inner { grid-template-columns: repeat(3, 1fr); gap: 16px 0; }
  .fr-stat:nth-child(3n) { border-right: 0; }
  .fr-stat-val { font-size: 36px; }

  .fr-promo { padding: 36px 20px; }
  .fr-promo-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fr-promo-title { font-size: 28px; }
  .fr-promo-watermark { font-size: 100px; }
}
@media (max-width: 600px) {
  .fr-reass-inner { grid-template-columns: 1fr; }
  .fr-reass-item { border-right: 0 !important; border-bottom: 1px solid var(--fr-border); }
  .fr-reass-item:last-child { border-bottom: 0; }

  /* Stats bande verte : règle 5-on-1-line définie plus bas (section M3.5),
     elle override ce qui était ici. */

  /* Bandeau promo : sur mobile le bouton "Profiter de l'offre" est centré
     horizontalement (au lieu d'hériter du align-items: flex-start posé
     sur .fr-promo-inner dans le breakpoint 900px). Les textes au-dessus
     restent alignés à gauche — seule la CTA reçoit align-self: center. */
  .fr-promo-cta { align-self: center; }
}

/* === Double rendu reass sur la home (PC vs mobile) ===
   La home rend la reass à 2 endroits différents :
   - .fr-reass-home-pc-only : depuis layout-both-columns (sous le menu) →
     visible UNIQUEMENT sur PC/tablet
   - .fr-reass-home-mobile-only : depuis index.tpl (sous le hero) → visible
     UNIQUEMENT sur mobile
   Breakpoint mobile = ≤768px (cohérent avec le marquee mobile + sticky header). */
@media (max-width: 900px) {
  .fr-reass.fr-reass-home-pc-only { display: none !important; }
}
@media (min-width: 901px) {
  .fr-reass.fr-reass-home-mobile-only { display: none !important; }
}

/* === Marquee mobile pour la barre réassurance ===
   Sur mobile (≤768px), les 4 items défilent en boucle horizontale style
   topbar. Chaque item est en colonne (icône top + 2 lignes texte below).
   Le 2e groupe (duplicate) permet le loop sans coupure visible. */
@media (max-width: 900px) {
  /* Sur la home la reass est rendue dans index.tpl APRÈS hero, donc à
     l'intérieur de #content (constraint par le container parent). On
     étend bord à bord via margin-left/right négatif viewport — sinon le
     bg blanc et le marquee sont clippés à la largeur du container. */
  .fr-reass {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding: 0;
    overflow: hidden;          /* clipping du marquee */
  }
  .fr-reass-inner {
    display: flex !important;
    flex-wrap: nowrap;
    grid-template-columns: none !important;
    width: max-content;
    max-width: none;
    gap: 0;
    padding: 14px 0;
    margin: 0;
    animation: fr-reass-marquee 28s linear infinite;
  }
  .fr-reass-marquee-group {
    display: inline-flex !important;
    flex-shrink: 0;
    gap: 4px;
    padding: 0 2px;
  }
  .fr-reass-marquee-group[aria-hidden="true"] {
    display: inline-flex !important;
  }
  .fr-reass-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px;
    flex-shrink: 0;
    padding: 4px 4px;
    border: 0 !important;
    gap: 6px;
  }
  .fr-reass-icon { margin: 0; }
  .fr-reass-icon svg { width: 32px; height: 32px; }
  .fr-reass-title {
    font-size: 12px;
    line-height: 1.25;
  }
  .fr-reass-sub {
    font-size: 10.5px;
    line-height: 1.35;
    margin-top: 2px;
  }
}
@keyframes fr-reass-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════ 08 — VALEURS / NOS ENGAGEMENTS ══════════ */
.fr-valeurs {
  position: relative;
  isolation: isolate;
  padding: 64px 40px;
}
.fr-valeurs::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-white, #fff);
  border-top: 1px solid var(--fr-border);
  border-bottom: 1px solid var(--fr-border);
  pointer-events: none;
}
.fr-valeurs-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.fr-valeurs-head {
  text-align: center;
  margin-bottom: 40px;
}
.fr-valeurs-head .fr-sec-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}
.fr-valeurs-head .fr-sec-title {
  text-align: center;
}
.fr-valeurs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.fr-val-item {
  text-align: center;
  padding: 8px;
}
.fr-val-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}
.fr-val-icon-svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
}
.fr-val-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin-bottom: 8px;
}
.fr-val-desc {
  font-size: 13px;
  color: var(--fr-text-mid);
  line-height: 1.75;
}

/* ══════════ 09 — AVIS CLIENTS ══════════ */
.fr-avis {
  position: relative;
  isolation: isolate;
  padding: 64px 40px;
}
.fr-avis::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-page-bg, #FAF7F0);
  pointer-events: none;
}
.fr-avis-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.fr-avis-quotemark {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 130px;
  line-height: 1;
  color: var(--fr-green-light, #EAF2E3);
  font-family: Georgia, serif;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.8;
}
.fr-avis-top {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.fr-avis-score-num {
  font-size: 52px;
  font-weight: 700;
  color: var(--fr-text-primary);
  letter-spacing: -2px;
  line-height: 1;
}
.fr-avis-stars-big {
  font-size: 22px;
  color: var(--fr-amber, #C07C2A);
  margin: 6px 0;
  letter-spacing: 2px;
}
.fr-avis-count {
  font-size: 13px;
  color: var(--fr-text-mid);
}
.fr-avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.fr-avis-card {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 16px;
  padding: 22px;
}
.fr-avis-stars {
  font-size: 13px;
  color: var(--fr-amber, #C07C2A);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.fr-avis-txt {
  font-size: 13px;
  color: var(--fr-text-mid);
  line-height: 1.7;
  margin-bottom: 14px;
  font-style: italic;
}
.fr-avis-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-avis-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fr-green-light, #EAF2E3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fr-green-deep);
  flex-shrink: 0;
}
.fr-avis-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-primary);
}
.fr-avis-date {
  font-size: 11px;
  color: var(--fr-text-mid);
}
.fr-avis-prod {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4E7C3A;
  margin-top: 2px;
}

/* ══════════ 09B — AVIS V2 (carousel auto-scroll, module framedisavis) ══════════
   Remplace l'ancien bloc .fr-avis statique. Les cartes sont dupliquées dans le
   DOM pour créer une boucle infinie sans saut : l'animation fait translateX
   de 0 à -50% (la largeur d'une série), repart à 0 ; comme les deux séries
   sont identiques visuellement, le cycle est imperceptible. */
.fr-avis-v2 {
  position: relative;
  isolation: isolate;
  padding: 64px 0;
}
.fr-avis-v2::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-page-bg, #FAF7F0);
  pointer-events: none;
}
.fr-avis-v2-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 0 40px;
}
.fr-avis-v2-quotemark {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 130px;
  line-height: 1;
  color: var(--fr-green-light, #EAF2E3);
  font-family: Georgia, serif;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.8;
}
.fr-avis-v2-top {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.fr-avis-v2-score {
  font-size: 52px;
  font-weight: 700;
  color: var(--fr-text-primary);
  letter-spacing: -2px;
  line-height: 1;
}
.fr-avis-v2-stars {
  font-size: 22px;
  color: var(--fr-amber, #C07C2A);
  margin: 6px 0;
  letter-spacing: 2px;
}
.fr-avis-v2-count {
  font-size: 13px;
  color: var(--fr-text-mid);
}

/* Carousel : overflow hidden + mask pour fade des bords */
.fr-avis-v2-carousel {
  overflow: hidden;
  padding: 4px 0;
  /* Dégradé transparent sur les bords pour un effet "fade in/out" des cartes */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.fr-avis-v2-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: fr-avis-scroll 80s linear infinite;
  will-change: transform;
}
.fr-avis-v2-carousel:hover .fr-avis-v2-track,
.fr-avis-v2-track:focus-within {
  animation-play-state: paused;
}
@keyframes fr-avis-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect des prefs système : on coupe l'animation si l'utilisateur
   a activé "réduire les animations" dans son OS */
@media (prefers-reduced-motion: reduce) {
  .fr-avis-v2-track { animation: none; }
}

.fr-avis-v2-card {
  flex: 0 0 340px;
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.fr-avis-v2-card-stars {
  font-size: 13px;
  color: var(--fr-amber, #C07C2A);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.fr-avis-v2-card-text {
  font-size: 13px;
  color: var(--fr-text-mid);
  line-height: 1.7;
  margin-bottom: 14px;
  font-style: italic;
  flex: 1 1 auto;
}
.fr-avis-v2-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-avis-v2-card-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fr-green-light, #EAF2E3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fr-green-deep);
  flex-shrink: 0;
}
.fr-avis-v2-card-meta { min-width: 0; }
.fr-avis-v2-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-primary);
}
.fr-avis-v2-card-date {
  font-size: 11px;
  color: var(--fr-text-mid);
}
.fr-avis-v2-card-prod {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4E7C3A;
  margin-top: 2px;
  text-decoration: none;
}
a.fr-avis-v2-card-prod:hover {
  color: var(--fr-green-deep);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .fr-avis-v2 { padding: 48px 0; }
  .fr-avis-v2-inner { padding: 0 20px; }
  .fr-avis-v2-score { font-size: 44px; }
  .fr-avis-v2-card { flex-basis: 280px; padding: 18px; }
}
@media (max-width: 600px) {
  .fr-avis-v2-card { flex-basis: 260px; }
}

/* ══════════ 10 — NEWSLETTER ══════════ */
.fr-newsletter {
  position: relative;
  isolation: isolate;
  padding: 64px 40px;
  /* Pas d'overflow:hidden ici — il clipperait le ::before full-bleed.
     Les décors SVG sont contenus par #wrapper{overflow-x:clip} global. */
}
.fr-newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--fr-green-deep, #2A4A1E);
  pointer-events: none;
}
.fr-nl-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fr-nl-deco-left {
  left: calc(50% - 50vw - 20px);
  bottom: -20px;
  opacity: 0.055;
}
.fr-nl-deco-right {
  right: calc(50% - 50vw - 20px);
  top: -20px;
  opacity: 0.04;
}
.fr-nl-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.fr-nl-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.45);
  margin-bottom: 12px;
}
.fr-nl-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.fr-nl-sub {
  font-size: 14px;
  color: rgba(246, 242, 234, 0.6);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Styling du widget ps_emailsubscription — on override son .tpl dans
   themes/framedis-theme-enfant/modules/ps_emailsubscription/views/templates/hook/
   pour avoir un markup propre. Les classes ciblées ci-dessous (.fr-nl-row,
   .fr-nl-input, .fr-nl-btn, .fr-nl-msg) viennent de notre override. */
.fr-nl-form-wrap {
  margin-bottom: 12px;
}
/* Classic impose un fond blanc (#fff) sur .block_newsletter qui est le
   parent direct de notre input. Même si l'input a background 10% crème,
   le parent blanc apparaît à travers → le rendu final paraît blanc.
   On force le parent à transparent + on nettoie les paddings/marges PS. */
.fr-nl-form-wrap .block_newsletter,
body .fr-nl-form-wrap .block_newsletter,
body .fr-newsletter .block_newsletter {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: none !important;
  box-shadow: none !important;
  color: inherit !important;
  /* Classic theme pose border-bottom: 1px solid #f6f6f6 sur .block_newsletter
     → barre quasi-blanche visible sous le bouton sur fond vert deep mobile. */
  border: 0 !important;
}
.fr-nl-form-wrap form {
  margin: 0;
}
.fr-nl-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
/* Input newsletter — sélecteurs très spécifiques + !important pour gagner
   toute bataille de priorité. On cible en plus :
     - .form-control de Classic qui impose souvent background:#fff
     - L'autofill Chrome/Edge qui injecte un fond jaune/blanc via :
       :-webkit-autofill (seule parade : -webkit-box-shadow inset +
       -webkit-text-fill-color) */
body .fr-newsletter .fr-nl-input,
body .fr-newsletter input[type="email"],
body .fr-newsletter input[name="email"],
body .fr-newsletter .form-control,
body .fr-nl-form-wrap .fr-nl-input,
body .fr-nl-form-wrap input[type="email"],
body .fr-nl-form-wrap input[name="email"],
body .fr-nl-form-wrap .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  background-color: rgba(246, 242, 234, 0.10) !important;
  background-image: none !important;
  border: 1.5px solid rgba(246, 242, 234, 0.22) !important;
  border-radius: 12px !important;
  padding: 13px 18px !important;
  font-family: var(--fr-font-sans) !important;
  font-size: 14px !important;
  color: var(--fr-cream, #F6F2EA) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  min-height: 48px !important;
  height: auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Override mobile : la règle newsletter ci-dessus a une spécificité (0,0,3,1)
   qui bat le fix iOS-zoom global (0,0,1,1). On la surcharge ici avec la même
   spécificité (et !important) pour passer à 16px sur mobile et neutraliser
   l'auto-zoom Safari au focus. Scope strict ≤768px : PC reste à 14px. */
@media (max-width: 900px) {
  body .fr-newsletter .fr-nl-input,
  body .fr-newsletter input[type="email"],
  body .fr-newsletter input[name="email"],
  body .fr-newsletter .form-control,
  body .fr-nl-form-wrap .fr-nl-input,
  body .fr-nl-form-wrap input[type="email"],
  body .fr-nl-form-wrap input[name="email"],
  body .fr-nl-form-wrap .form-control {
    font-size: 16px !important;
  }
}

body .fr-newsletter .fr-nl-input::placeholder,
body .fr-newsletter input[type="email"]::placeholder,
body .fr-newsletter input[name="email"]::placeholder,
body .fr-nl-form-wrap .fr-nl-input::placeholder,
body .fr-nl-form-wrap input[type="email"]::placeholder,
body .fr-nl-form-wrap input[name="email"]::placeholder {
  color: rgba(246, 242, 234, 0.45) !important;
  opacity: 1 !important;
}

body .fr-newsletter .fr-nl-input:focus,
body .fr-newsletter input[type="email"]:focus,
body .fr-newsletter input[name="email"]:focus,
body .fr-nl-form-wrap .fr-nl-input:focus,
body .fr-nl-form-wrap input[type="email"]:focus,
body .fr-nl-form-wrap input[name="email"]:focus {
  border-color: rgba(246, 242, 234, 0.5) !important;
  background-color: rgba(246, 242, 234, 0.14) !important;
  color: var(--fr-cream, #F6F2EA) !important;
}

/* Autofill Chrome/Edge : le seul moyen d'écraser le fond jaune/blanc imposé
   par le navigateur est -webkit-box-shadow inset de la couleur voulue.
   Comme derrière l'input il y a déjà du vert foncé (fond de .fr-newsletter),
   on utilise une teinte vert foncé compatible — effet visuel = même rendu
   que l'état non-autofill. */
body .fr-newsletter .fr-nl-input:-webkit-autofill,
body .fr-newsletter .fr-nl-input:-webkit-autofill:hover,
body .fr-newsletter .fr-nl-input:-webkit-autofill:focus,
body .fr-newsletter input[type="email"]:-webkit-autofill,
body .fr-nl-form-wrap input[type="email"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #304F23 inset !important;
  -webkit-text-fill-color: var(--fr-cream, #F6F2EA) !important;
  caret-color: var(--fr-cream, #F6F2EA) !important;
  border: 1.5px solid rgba(246, 242, 234, 0.22) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* Le bouton d'inscription newsletter : on cible à la fois le .fr-nl-btn
   (si l'override de template ps_emailsubscription est actif) ET les classes
   .btn-primary / input[type="submit"] qui apparaissent sur le markup
   Classic par défaut. !important utilisé car .btn-primary (ligne 155) a
   une couleur verte héritée qu'il faut écraser spécifiquement ici. */
.fr-nl-btn,
.fr-newsletter input[type="submit"],
.fr-newsletter button[type="submit"],
.fr-newsletter .btn-primary,
.fr-nl-form-wrap input[type="submit"],
.fr-nl-form-wrap button[type="submit"],
.fr-nl-form-wrap .btn-primary {
  flex: 0 0 auto !important;
  background-color: var(--fr-amber, #C07C2A) !important;
  background-image: none !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-family: var(--fr-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
}
.fr-nl-btn:hover,
.fr-newsletter input[type="submit"]:hover,
.fr-newsletter button[type="submit"]:hover,
.fr-newsletter .btn-primary:hover,
.fr-newsletter .btn-primary:focus,
.fr-newsletter .btn-primary:not(:disabled):not(.disabled):hover,
.fr-newsletter .btn-primary:not(:disabled):not(.disabled):active,
.fr-nl-form-wrap input[type="submit"]:hover,
.fr-nl-form-wrap button[type="submit"]:hover,
.fr-nl-form-wrap .btn-primary:hover {
  background-color: #A0641E !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.fr-nl-msg {
  margin: 12px 0 0;
  font-size: 13px;
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--fr-cream, #F6F2EA);
  background: rgba(246, 242, 234, 0.08);
  border: 1px solid rgba(246, 242, 234, 0.12);
}
.fr-nl-msg-error {
  background: rgba(233, 84, 61, 0.12);
  border-color: rgba(233, 84, 61, 0.3);
  color: #FFD6CD;
}

@media (max-width: 600px) {
  .fr-nl-row { flex-direction: column; }
  .fr-nl-btn { width: 100%; }
}

.fr-nl-legal {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.28);
  margin-top: 12px;
  line-height: 1.5;
}

/* ——— Responsive Valeurs + Avis + Newsletter ——— */
@media (max-width: 900px) {
  .fr-valeurs { padding: 48px 20px; }
  .fr-valeurs-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .fr-avis { padding: 48px 20px; }
  .fr-avis-grid { grid-template-columns: 1fr; }
  .fr-avis-score-num { font-size: 44px; }

  .fr-newsletter { padding: 48px 20px; }
  .fr-nl-title { font-size: 26px; }
}
@media (max-width: 600px) {
  /* Section Valeurs en SNAP CAROUSEL horizontal sur mobile (owner request).
     Une carte par "écran", auto-advance toutes les 4s avec snap discret
     (pas de défilement continu), pause sur touch utilisateur, dots
     indicateurs synchros. Logique d'auto-advance dans framedis.js
     (setupValeursMobileCarousel). */
  .fr-valeurs-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Edge-to-edge mobile : étend la zone scrollable d'un bord à l'autre
       du viewport (le container parent a un padding 20px qu'on neutralise). */
    margin-left: -20px;
    margin-right: -20px;
    padding: 0;
  }
  .fr-valeurs-grid::-webkit-scrollbar { display: none; }
  .fr-val-item {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 20px 32px;
    box-sizing: border-box;
  }
  /* Dots indicateurs sous le carousel (mobile only) */
  .fr-valeurs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
  }
  .fr-valeurs-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(42, 74, 30, 0.22);
    cursor: pointer;
    transition: width 0.32s ease, background-color 0.32s ease, border-radius 0.32s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fr-valeurs-dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--fr-green-deep, #2A4A1E);
  }

  .fr-nl-form-wrap form,
  .fr-nl-form-wrap .input-wrapper {
    flex-direction: column;
  }
  .fr-nl-form-wrap button[type="submit"] { width: 100%; }
}
/* Dots indicateurs : masqués hors mobile (PC + tablet) */
@media (min-width: 601px) {
  .fr-valeurs-dots { display: none !important; }
}

/* ——— Responsive Bestsellers + Univers ——— */
@media (max-width: 900px) {
  .fr-bestsellers { padding: 48px 20px; }
  .fr-bestsellers .featured-products .row {
    grid-template-columns: repeat(2, 1fr);
  }
  .fr-univers { padding: 56px 20px; }
  .fr-univers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 900px) {
  /* Carousel "Nos incontournables" — scroll-snap horizontal mobile,
     1 card pleine + peek de la suivante + flèche indicatrice swipe.
     Approche CSS Grid horizontal (grid-auto-flow: column) — la plus
     fiable pour neutraliser Bootstrap row/col, car la dimension des
     enfants est imposée par grid-auto-columns au niveau du parent. */
  .fr-bestsellers-grid {
    position: relative;
    margin: 0 -20px;            /* déborde du padding parent .fr-bestsellers */
  }
  .fr-bestsellers .featured-products {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .fr-bestsellers .featured-products .row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 240px !important;
    grid-template-columns: none !important;
    grid-template-rows: auto !important;
    gap: 14px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    padding: 14px 0 !important;
    padding-right: calc(50vw - 120px) !important;
    scroll-padding-left: calc(50vw - 120px);
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr-bestsellers .featured-products .row::-webkit-scrollbar { display: none; }
  .fr-bestsellers .featured-products .row > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
    display: block !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start;
    transform: scale(0.88);
    transform-origin: center center;
    opacity: 0.65;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .fr-bestsellers .featured-products .row > *.is-active {
    transform: scale(1);
    opacity: 1;
  }
  .fr-bestsellers .featured-products .product-miniature {
    margin-bottom: 0;
    width: 100%;
  }

  /* Flèches de navigation mobile — visibilité togglée par JS en fonction
     de scrollLeft (prev cachée à scroll 0, next cachée à scroll max). */
  .fr-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: rgba(26, 46, 18, 0.92);
    border: none;
    border-radius: 50%;
    color: var(--fr-cream, #F6F2EA);
    cursor: pointer;
    pointer-events: auto;
    z-index: 4;
    box-shadow: 0 4px 14px rgba(26, 46, 18, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .fr-carousel-nav.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  .fr-carousel-nav-prev { left: 12px; }
  .fr-carousel-nav-next { right: 12px; }
  .fr-carousel-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
@media (min-width: 901px) {
  .fr-carousel-nav { display: none !important; }
}
@media (max-width: 600px) {
  .fr-univers-grid { grid-template-columns: 1fr; }
}

/* ── M3 — Ajustements mobile homepage (375×667) ── */
@media (max-width: 600px) {
  /* M3.4 — Card Besoin "Stress & Relaxation" tronqué : forcer le wrap + padding plus large */
  .fr-besoins-grid { gap: 10px; }
  .fr-besoin-chip {
    padding: 18px 8px;
    overflow: visible;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .fr-bc-name {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-overflow: clip;
    line-height: 1.25;
    font-size: 11.5px;
  }

  /* M3.6 — Stats hero : 4 items sur 1 seule ligne sur mobile, centrés
     visuellement comme un groupe par rapport à la barre de séparation
     du dessus (justify-content: space-around → padding équilibré aux
     extrémités, items pas collés aux bords). */
  .fr-hero-trust {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 26px;
    padding-top: 20px;
  }
  .fr-hero-trust .fr-trust-item {
    flex: 0 1 auto;
    text-align: center;
    min-width: 0;
  }
  .fr-trust-val {
    font-size: 16px;
    letter-spacing: -0.3px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .fr-trust-lbl {
    font-size: 9px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-top: 3px;
  }

  /* M3.5 — Stats bande verte : 5 chiffres sur 1 SEULE ligne sur mobile
     (owner request). Réduit drastiquement les font-sizes + padding pour
     que tout tienne sur viewport ~360-414px. Padding vertical de la
     section serré pour que la hauteur du bandeau reste proportionnée
     à la taille des chiffres (sinon ça paraît "trop gros pour rien"). */
  .fr-stats { padding: 12px 6px; }
  .fr-stats-inner {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .fr-stat {
    padding: 2px 2px;
    border-right: 1px solid rgba(246, 242, 234, 0.10);
    min-width: 0;
  }
  .fr-stat:nth-child(5) { border-right: 0; }
  .fr-stat-val {
    font-size: 19px;
    letter-spacing: -0.5px;
    line-height: 1;
  }
  .fr-stat-unit { font-size: 10px; margin-left: 1px; }
  .fr-stat-lbl {
    font-size: 8px;
    margin-top: 3px;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  /* M3.7 — Mini-cards hero "Dès 55 €" : meilleur contraste sur fond hero */
  .fr-hp-card {
    background: rgba(246, 242, 234, 0.12);
    border-color: rgba(246, 242, 234, 0.22);
  }
  .fr-hp-thumb { aspect-ratio: 1 / 1; }
  .fr-hp-body { padding: 10px 12px 12px; }
  .fr-hp-name { font-size: 12px; }
  .fr-hp-price { font-size: 14px; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   A4 — FOOTER (restyle style "Forêt Profonde" v7)
   ═══════════════════════════════════════════════════════════ */

/* Conteneur racine : on neutralise <footer id="footer"> lui-même (Classic
   y met souvent background:#f6f6f6 + padding) ET le .footer-container
   interne. Sinon un bande cream apparaît entre notre section newsletter
   et notre .fr-footer vert foncé. */
#footer,
#footer.js-footer {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
#footer .footer-container,
.footer-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
#footer .footer-container > .container,
.footer-container > .container {
  max-width: none !important;
  padding: 0 !important;
}
/* <main> ne doit pas ajouter de marge entre wrapper et footer */
main { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Masque la ligne copyright PrestaShop par défaut si elle subsiste */
#footer .footer-container .row:last-child p.text-sm-center {
  display: none;
}

/* Zone displayFooterBefore (blockreassurance, etc.) :
   fond clair, au-dessus du footer sombre */
.fr-footer-before {
  background-color: var(--fr-cream, #F6F2EA);
  padding: 12px 0;
}
.fr-footer-before > .container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.fr-footer-before:empty { display: none; }

/* Footer principal — fond vert très sombre (proche --t1 du mockup) */
.fr-footer {
  background-color: #1A2E12;   /* vert forêt ultra-sombre */
  color: rgba(246, 242, 234, 0.6);
  padding: 48px 40px 28px;
  font-family: inherit;
}
.fr-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Grille 5 colonnes : brand 2fr, 4 colonnes 1fr chacune
   (Brand · Produits · Notre maison · Informations · Mon compte) */
.fr-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* Colonne 1 — Brand */
.fr-footer-brand { min-width: 0; }
.fr-footer-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 12px;
}
.fr-footer-logo svg,
.fr-footer-logo img { display: block; height: auto; max-width: 220px; width: 100%; }
.fr-footer-brand-sub {
  font-size: 12px;
  color: rgba(246, 242, 234, 0.4);
  margin: 12px 0 0;
  line-height: 1.75;
  max-width: 240px;
}
.fr-footer-addr {
  font-size: 12px;
  color: rgba(246, 242, 234, 0.4);
  margin-top: 16px;
  line-height: 1.8;
}
.fr-footer-addr strong {
  color: rgba(246, 242, 234, 0.65);
  font-weight: 600;
}

/* Bloc contact (téléphone + horaires + email) sous l'adresse */
.fr-footer-contact {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fr-footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.fr-footer-contact-strong {
  color: rgba(246, 242, 234, 0.85);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.fr-footer-contact-strong:hover { color: #FFFFFF; text-decoration: none; }
.fr-footer-contact-sub {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.4);
  letter-spacing: 0.2px;
}

/* Colonnes 2-4 — titres + liens */
.fr-footer-col { min-width: 0; }
.fr-footer-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.4);
  margin-bottom: 16px;
}
.fr-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
}
.fr-footer-links li { margin: 0; }
.fr-footer-links a {
  font-size: 13px;
  color: rgba(246, 242, 234, 0.6);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.fr-footer-links a:hover,
.fr-footer-links a:focus {
  color: var(--fr-cream, #F6F2EA);
  text-decoration: none;
}
/* Pas d'outline noir au clic souris sur les liens et icônes sociales du footer ;
   outline ambre uniquement au focus clavier (accessibilité). */
.fr-footer-links a:focus,
.fr-footer-social-item:focus { outline: none; }
.fr-footer-links a:focus-visible,
.fr-footer-social-item:focus-visible {
  outline: 2px solid var(--fr-amber, #C07C2A);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Lien "Promotions" en ambré pour rappeler le menu */
.fr-footer-links a.fr-footer-link-promo {
  color: var(--fr-orange, #DE7D12);
  font-weight: 600;
}
.fr-footer-links a.fr-footer-link-promo:hover {
  color: var(--fr-amber, #C07C2A);
}

/* Bloc réseaux sociaux dans la colonne 4 */
.fr-footer-social-wrap { margin-top: 20px; }
.fr-footer-social {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fr-footer-social-item {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(246, 242, 234, 0.08);
  border: 1px solid rgba(246, 242, 234, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: rgba(246, 242, 234, 0.5);
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fr-footer-social-item--sm { font-size: 11px; }
.fr-footer-social-item svg { display: block; }
.fr-footer-social-item:hover {
  background: rgba(246, 242, 234, 0.15);
  color: var(--fr-cream, #F6F2EA);
  text-decoration: none;
}

/* Bas de footer : copyright + pills de paiement */
.fr-footer-bottom {
  border-top: 1px solid rgba(246, 242, 234, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fr-footer-copy {
  font-size: 12px;
  color: rgba(246, 242, 234, 0.28);
  line-height: 1.6;
  max-width: 600px;
}
.fr-footer-pay {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fr-footer-pay-logos {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fr-footer-pay-label {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.28);
  margin-right: 4px;
}
.fr-footer-pay-pill {
  background: rgba(246, 242, 234, 0.07);
  border: 1px solid rgba(246, 242, 234, 0.1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(246, 242, 234, 0.45);
  letter-spacing: 0.04em;
}

/* Logos de paiement : pills blanches pour faire ressortir les marques */
.fr-footer-pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 4px 6px;
  height: 24px;
  box-sizing: border-box;
  transition: transform 0.15s ease;
}
.fr-footer-pay-logo svg,
.fr-footer-pay-logo img { display: block; height: 16px; width: auto; }
.fr-footer-pay-logo:hover { transform: translateY(-1px); }

/* Zone displayFooterAfter (modules résiduels) */
.fr-footer-after {
  background-color: #1A2E12;
  color: rgba(246, 242, 234, 0.5);
}
.fr-footer-after > .container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.fr-footer-after:empty { display: none; }

/* ——— Responsive footer ——— */
@media (max-width: 1100px) {
  /* 5 cols deviennent trop etroites — on bascule en 4 cols en faisant wrap
     l'une des deux colonnes CMS sur la ligne suivante, toujours coherent. */
  .fr-footer-top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 900px) {
  .fr-footer { padding: 36px 20px 24px; }
  .fr-footer-top {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 24px;
  }
  .fr-footer-bottom {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .fr-footer { padding: 32px 16px 20px; }
  .fr-footer-brand-sub { max-width: 100%; }
  .fr-footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
  .fr-footer-copy { font-size: 11px; }
  /* "Paiement sécurisé :" sur sa ligne, les 6 logos sur 1 ligne en dessous */
  .fr-footer-pay {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .fr-footer-pay-label { margin-right: 0; }
  .fr-footer-pay-logos {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }
  .fr-footer-pay-logo {
    height: 22px;
    padding: 3px 5px;
    flex: 0 1 auto;
  }
  .fr-footer-pay-logo img { height: 13px; }
}

/* ── Footer accordéons mobile (<details>/<summary>) ── */
/* Reset markers natifs */
.fr-footer details.fr-footer-col {
  display: block;
  min-width: 0;
}
.fr-footer summary.fr-footer-title {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* le titre garde son styling .fr-footer-title (couleur, transform, etc.) */
}
.fr-footer summary.fr-footer-title::-webkit-details-marker { display: none; }
.fr-footer summary.fr-footer-title::marker { display: none; content: ''; }
.fr-footer-chevron {
  display: none;
  color: rgba(246, 242, 234, 0.55);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

/* Desktop (>900px) : <details> agit comme <div>, contenu toujours visible */
@media (min-width: 901px) {
  .fr-footer details.fr-footer-col[open],
  .fr-footer details.fr-footer-col {
    /* on force le contenu à rester affiché peu importe l'attribut [open] */
  }
  .fr-footer details.fr-footer-col > .fr-footer-links,
  .fr-footer details.fr-footer-col > .fr-footer-social-wrap {
    display: flex !important;
  }
  .fr-footer details.fr-footer-col > .fr-footer-links {
    flex-direction: column;
  }
  .fr-footer details.fr-footer-col > .fr-footer-social-wrap {
    display: block !important;
  }
  .fr-footer summary.fr-footer-title {
    cursor: default;
    pointer-events: none;
  }
}

/* Mobile (≤900px) : accordéon natif, chevron visible, summary cliquable.
   Pas de bordures séparatrices — propres et aérées. */
@media (max-width: 900px) {
  .fr-footer summary.fr-footer-title {
    cursor: pointer;
    padding: 14px 0;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .fr-footer-chevron { display: inline-block; }
  .fr-footer details[open] .fr-footer-chevron { transform: rotate(180deg); }
  .fr-footer details.fr-footer-col > .fr-footer-links {
    padding: 4px 0 14px;
  }
  .fr-footer details.fr-footer-col > .fr-footer-social-wrap {
    padding: 4px 0 14px;
    margin-top: 0;
  }
  .fr-footer-brand {
    padding-bottom: 8px;
    margin-bottom: 0;
  }
  /* Logo Framedis centré horizontalement dans la colonne brand sur mobile */
  .fr-footer-logo {
    display: block;
    width: 100%;
    text-align: center;
  }
  .fr-footer-logo img,
  .fr-footer-logo svg { margin: 0 auto; }
  /* Contact : phone/email rapprochés, taille réduite à 11px (= taille
     standard footer), bold + blanc cassé conservés pour ressortir. */
  .fr-footer-contact { gap: 14px; }
  .fr-footer-contact-item:nth-child(3) { margin-top: -6px; }  /* email rapproché du téléphone */
  .fr-footer-contact-strong { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   B2 — PAGE FAMILLE
   Layout dédié pour les 7 catégories top-level (id_parent=2).
   Sticky tabs sous le header sticky existant + hero coloré
   (couleur paramétrée par famille via framedissettings) +
   grille des sous-catégories + strip produits highlight.
   ═══════════════════════════════════════════════════════════ */

/* Full-bleed page famille.
   Toute la chaîne Bootstrap parent (container max-width 540/720/960/1140 +
   row margin -15 + col-* padding 15) doit être neutralisée pour que la
   page famille touche les bords du viewport. Le sélecteur `body:has()`
   peut ne pas matcher selon le browser ; on cible donc via la classe
   `category-id-parent-2` que PS pose automatiquement sur body pour
   toutes les 7 familles top-level (parent = home id 2). */

/* 1) Cassage du container Bootstrap parent : max-width et padding remis
      à 100% / 0 pour que la zone famille s'étende au viewport entier. */
body.category-id-parent-2 #wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.category-id-parent-2 #wrapper > .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Content-wrapper à 100% (le layout PS Classic réserve une left-column
      col-md-4 pour les filtres ; les familles n'affichent pas de filtres). */
body.category-id-parent-2 #left-column,
body.category-id-parent-2 #right-column {
  display: none !important;
}
body.category-id-parent-2 #content-wrapper,
body.category-id-parent-2 .js-content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) La page famille n'a plus besoin de marge négative car toute la chaîne
      parent est déjà à 100% du viewport. On annule les marges héritées. */
.fr-family-page {
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
}

/* ── Tabs familles sticky ──
   Position sticky sous le #header sticky. Top hardcodé à 144px = hauteur
   réelle du header (mesurée via document.getElementById('header').offsetHeight).
   Rendues dans le layout (block category_header), donc à l'intérieur de
   .container : on étend en pleine largeur via marges négatives. */
.fr-family-tabs-wrap {
  position: sticky;
  top: 144px;
  z-index: 400;
  background: var(--fr-white, #fff);
  border-bottom: 1px solid var(--fr-border);
  box-shadow: 0 2px 12px rgba(42, 74, 30, 0.06);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* iOS Safari : position: sticky vibre quand combinée à margins négatifs
   (calc(50% - 50vw)) + box-shadow + nearby fixed element. Sur touch
   devices, on garde sticky mais sans marges négatives (utilise un
   ::before pour étendre le fond bord-à-bord) + sans box-shadow + sans
   GPU hints (qui empirent parfois). */
@media (hover: none) and (pointer: coarse) {
  .fr-family-tabs-wrap {
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
    /* Reset les GPU hints du base style — sur iOS ils causent plus de
       jitter qu'ils n'en évitent quand combinés avec d'autres layers. */
    -webkit-transform: none;
    transform: none;
    will-change: auto;
    contain: none;
  }
  /* Pseudo-element pour étendre le fond blanc bord-à-bord viewport,
     sans toucher au positionnement sticky de l'élément lui-même. */
  .fr-family-tabs-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -1px;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--fr-white, #fff);
    border-bottom: 1px solid var(--fr-border);
    z-index: -1;
    pointer-events: none;
  }
}

/* ── Hero compact sous-catégorie (B3.1) ──
   Affiché juste sous les family-tabs sur les pages sous-cat. Couleur héritée
   de la famille parente pour cohérence. Full-bleed via marges négatives. */
.fr-subcat-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 24px;
  padding: 36px 40px 28px;
  background: linear-gradient(135deg,
    var(--family-color, #2A4A1E) 0%,
    color-mix(in srgb, var(--family-color, #2A4A1E) 70%, #1A2E12) 100%);
  color: var(--fr-cream, #F6F2EA);
  overflow: hidden;
}
.fr-subcat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 8 Q34 16 30 24 Q26 16 30 8Z' fill='%23F6F2EA' opacity='.04'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}
.fr-subcat-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.fr-subcat-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.55);
  margin-bottom: 4px;
  display: none;  /* l'eyebrow doublonne le titre, on le cache pour l'instant */
}
.fr-subcat-hero-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 0 0 10px;
}
.fr-subcat-hero-desc {
  font-size: 14px;
  color: rgba(246, 242, 234, 0.7);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 16px;
}
.fr-subcat-hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(246, 242, 234, 0.12);
}
.fr-shs-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -0.3px;
}
.fr-shs-lbl {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.5);
  margin-top: 2px;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .fr-subcat-hero { background: var(--family-color, #2A4A1E); }
}
@media (max-width: 900px) {
  .fr-subcat-hero { padding: 28px 20px 22px; }
  .fr-subcat-hero-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   B3.2 — Filtres latéraux : override ps_facetedsearch (mockups 9/10/11)
   Templates overridés dans :
     themes/framedis-theme-enfant/modules/ps_facetedsearch/views/templates/
   Classes Framedis : .fr-facet, .fr-facet-header, .fr-facet-list,
   .fr-fopt (option), .fr-fopt-dot (puce), .fr-fopt-check (checkbox).
   ═══════════════════════════════════════════════════════════════════════ */

#search_filters_wrapper { margin-top: 0; }
#search_filters.fr-filters {
  background: transparent;
  font-family: inherit;
}

/* Sticky sidebar */
@media (min-width: 901px) {
  #left-column {
    position: sticky;
    top: 224px;
    align-self: flex-start;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  #left-column::-webkit-scrollbar { width: 6px; }
  #left-column::-webkit-scrollbar-thumb {
    background: rgba(42, 74, 30, 0.15);
    border-radius: 100px;
  }
}

/* On masque le titre PS "Filter By" et le bouton clear par défaut au top */
#search_filters > p.text-uppercase,
#search_filters > .h6.hidden-sm-down,
#search_filters #_desktop_search_filters_clear_all { display: none !important; }

/* ── Bloc filtre ── */
.fr-facet {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border, #E8E2D2);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 12px;
  list-style: none;
}

/* Header (titre + chevron) */
.fr-facet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.fr-facet-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-text-mid, #6B6358);
  line-height: 1;
}
.fr-facet-chevron {
  font-size: 11px;
  color: var(--fr-text-mid, #6B6358);
  opacity: 0.5;
  transition: transform 0.2s ease;
  line-height: 1;
}
.fr-facet-header[aria-expanded="false"] .fr-facet-chevron {
  transform: rotate(-90deg);
}

/* Liste des options */
.fr-facet-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: block;
}
.fr-facet-list.collapse:not(.in):not(.show) { display: none; }
.fr-fopt {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Lien d'option (commun à puce et checkbox) */
.fr-fopt-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 7px 0 !important;
  font-size: 13px;
  font-weight: 400;
  color: var(--fr-text-primary, #2A2620);
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.15s ease;
  border: 0 !important;
  margin: 0 !important;
  width: 100%;
  background: transparent;
}
.fr-fopt-link:hover { color: var(--fr-green-deep, #2A4A1E); }
.fr-fopt-label {
  flex: 1 1 auto;
  min-width: 0;
  /* wrap multi-ligne au lieu de truncate (sinon "200 capsules huileuses"
     devient "200 capsules huile…"). On garde un line-height confortable
     pour la lisibilité 2 lignes. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  color: inherit;
  text-decoration: none !important;
}

/* Compteur (texte simple à droite, sauf catégories qui ont une pill) */
.fr-fopt-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--fr-text-mid, #6B6358);
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
}

/* ───────── PUCES (catégories) ───────── */
.fr-facet-category .fr-fopt-link { gap: 12px; }
.fr-fopt-dot-mark {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42, 74, 30, 0.22);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.fr-fopt-dot:hover .fr-fopt-dot-mark {
  background: rgba(42, 74, 30, 0.45);
}
.fr-fopt-dot.fr-fopt-active .fr-fopt-dot-mark {
  background: var(--fr-green-deep, #2A4A1E);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.10);
}
.fr-fopt-dot.fr-fopt-active .fr-fopt-label {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
}

/* Pill compteur pour catégories (fond crème) */
.fr-facet-category .fr-fopt-count {
  background: var(--fr-page-bg, #FAF7F0);
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 11px;
  min-width: 28px;
  text-align: center;
  padding-left: 10px;
}
.fr-facet-category .fr-fopt-active .fr-fopt-count {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
}

/* ───────── CHECKBOXES (carrées custom) ─────────
   Spécificité boostée avec #search_filters pour battre Classic. */
#search_filters .fr-fopt-cbox {
  position: relative !important;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
#search_filters .fr-fopt-cbox input,
#search_filters .fr-fopt-cbox input[type="checkbox"],
#search_filters .fr-fopt-cbox input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
}
#search_filters .fr-fopt-cbox-mark {
  position: absolute !important;
  inset: 0 !important;
  border: 1.5px solid #C5BDA8 !important;
  border-radius: 3px !important;
  background: #fff !important;
  transition: all 0.15s ease;
  display: block !important;
}
#search_filters .fr-fopt-cbox-mark::after {
  content: '' !important;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
#search_filters .fr-fopt-check:hover .fr-fopt-cbox-mark {
  border-color: var(--fr-green-deep, #2A4A1E) !important;
}
#search_filters .fr-fopt-cbox input:checked + .fr-fopt-cbox-mark {
  background: var(--fr-green-deep, #2A4A1E) !important;
  border-color: var(--fr-green-deep, #2A4A1E) !important;
}
#search_filters .fr-fopt-cbox input:checked + .fr-fopt-cbox-mark::after {
  transform: rotate(45deg) scale(1);
}

.fr-fopt-radio .fr-fopt-cbox-mark { border-radius: 50%; }
.fr-fopt-radio input:checked + .fr-fopt-cbox-mark::after {
  left: 4px; top: 4px;
  width: 6px; height: 6px;
  border: 0;
  background: #fff;
  border-radius: 50%;
  transform: scale(1);
}

.fr-fopt-check.fr-fopt-active .fr-fopt-label {
  color: var(--fr-text-primary, #2A2620);
  font-weight: 500;
}

/* Pastille couleur (pour facet de couleur produit) */
.fr-fopt-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background-size: cover;
  flex-shrink: 0;
}

/* ───────── SLIDER (prix) ───────── */
.fr-facet-slider { padding: 0; }
.fr-facet-slider .fr-fslider-range,
.fr-facet-slider .ui-slider,
.fr-facet-slider .ui-slider.ui-widget-content,
#search_filters_wrapper .fr-facet-slider .ui-slider {
  position: relative !important;
  height: 5px !important;
  background: rgba(42, 74, 30, 0.18) !important;
  border: 0 !important;
  border-radius: 100px !important;
  margin: 24px 8px 12px !important;
}
.fr-facet-slider .ui-slider-range,
.fr-facet-slider .ui-slider.ui-widget-content .ui-slider-range,
#search_filters_wrapper .fr-facet-slider .ui-slider-range {
  background: var(--fr-green-deep, #2A4A1E) !important;
  background-color: var(--fr-green-deep, #2A4A1E) !important;
  border: 0 !important;
  border-radius: 100px !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
}
.fr-facet-slider .ui-slider-handle,
.fr-facet-slider .ui-slider.ui-widget-content .ui-slider-handle,
#search_filters_wrapper .fr-facet-slider .ui-slider-handle {
  background: var(--fr-green-deep, #2A4A1E) !important;
  background-color: var(--fr-green-deep, #2A4A1E) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(42, 74, 30, 0.25) !important;
  width: 18px !important;
  height: 18px !important;
  top: -7px !important;
  border-radius: 50% !important;
  cursor: grab;
  outline: none;
  margin-left: -9px !important;
}
.fr-facet-slider .ui-slider-handle:focus {
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.20);
}
.fr-fslider-label,
.fr-facet-slider .faceted-slider-range,
.fr-facet-slider .ui-slider-pips {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fr-text-mid, #6B6358);
  margin: 0 4px 4px;
  padding: 0;
}
.fr-fslider-label {
  text-align: center;
  display: block;
  margin: 12px 0 0;
  font-weight: 600;
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 13px;
}

/* ───────── DROPDOWN ───────── */
.fr-fdrop { position: relative; }
.fr-fdrop-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--fr-page-bg, #FAF7F0);
  border: 1px solid var(--fr-border, #E8E2D2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fr-text-primary, #2A2620);
  cursor: pointer;
  text-decoration: none !important;
  width: 100%;
}
.fr-fdrop-toggle:hover { border-color: var(--fr-green-deep, #2A4A1E); }
.fr-fdrop-caret { font-size: 10px; opacity: 0.5; }
.fr-fdrop-menu {
  border-radius: 12px;
  border: 0.5px solid var(--fr-border, #E8E2D2);
  box-shadow: 0 12px 32px rgba(42, 74, 30, 0.10);
  padding: 6px;
  min-width: 100%;
}
.fr-fdrop-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fr-text-mid, #6B6358);
  border-radius: 8px;
  text-decoration: none !important;
}
.fr-fdrop-item:hover {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
}

/* ───────── Bouton "Réinitialiser les filtres" ───────── */
.fr-facet-clearall { margin-top: 6px; }
.fr-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--fr-white, #fff);
  border: 1px solid var(--fr-border, #E8E2D2);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fr-text-primary, #2A2620);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.fr-clear-btn:hover {
  background: var(--fr-page-bg, #FAF7F0);
  border-color: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-clear-btn-x {
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  margin-top: -2px;
}

/* ── Fallback : sécurité pour anciens nœuds .facet sans nos classes ── */
#search_filters .facet:not(.fr-facet) .facet-title .material-icons,
#search_filters .navbar-toggler { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Chips de filtres actifs (active-filters.tpl override)
   ═══════════════════════════════════════════════════════════════════════ */
.fr-active-filters {
  margin: 0 0 18px;
  padding: 0;
}
.fr-active-filters.is-empty { display: none; }
.fr-active-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fr-green-light, #EAF2E3);
  border: 1px solid var(--fr-green-pale, #C8DFB5);
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 8px 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  list-style: none;
}
.fr-chip-key {
  font-weight: 400;
  opacity: 0.75;
}
.fr-chip-val { font-weight: 600; }
.fr-chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(42, 74, 30, 0.10);
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  margin-left: 2px;
  transition: background 0.15s ease;
}
.fr-chip-close:hover {
  background: var(--fr-green-deep, #2A4A1E);
  color: #fff;
}

/* ── Mobile : drawer pour les filtres ── */
@media (max-width: 900px) {
  #left-column { position: static; }
  #search_filters_wrapper {
    /* On masque par défaut, on l'ouvrira via un bouton (B3.3) */
  }
}

/* ══════ Drawer filtres MOBILE+TABLETTE — Bottom sheet style (≤1324px) ══════
   Le drawer ouvert devient une "bottom sheet" qui slide-up depuis le bas
   du viewport, avec un backdrop semi-transparent qui dim la page derrière.
   Header en haut (titre "Filtres" + ✕ close), facets scrollables au milieu,
   bottom bar sticky avec OK + Effacer. Logique JS dans setupFilterDrawerSheet().
   Scope élargi à 1324 (cohérent avec breakpoint header burger 1325) pour
   que toute la zone "non-PC" reçoive le pattern bottom-sheet.
*/
@media (max-width: 1324px) {
  /* Wrapper = bottom sheet. Pas display: none (sinon transition impossible),
     mais translateY(100%) + visibility hidden quand fermée. Le sheet
     auto-size son contenu jusqu'à 88vh max — la partie restante du
     viewport laisse voir le backdrop dimmé (page derrière). z-index
     10600 pour passer DEVANT la roulette framedisroulette (z-index 10000). */
  #search_filters_wrapper,
  #search_filters_wrapper.hidden-sm-down {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 88vh;
    z-index: 10600;
    background: var(--fr-white, #fff);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(26, 46, 18, 0.18);
    margin: 0 !important;
    padding: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0.34s;
    will-change: transform;
    overflow: hidden;
  }
  #search_filters_wrapper.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0s;
  }

  /* Header sticky-top du sheet */
  .fr-filter-sheet-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    background: var(--fr-white, #fff);
    border-bottom: 1px solid var(--fr-border);
  }
  .fr-filter-sheet-close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--fr-text-mid);
    cursor: pointer;
    padding: 0;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .fr-filter-sheet-close:hover,
  .fr-filter-sheet-close:focus {
    background: var(--fr-cream, #F6F2EA);
    color: var(--fr-text-primary);
  }
  .fr-filter-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fr-text-primary);
    flex: 1;
    text-align: center;
  }
  /* Spacer 36px = même largeur que le bouton close → titre vraiment centré */
  .fr-filter-sheet-spacer {
    flex: 0 0 36px;
  }

  /* Body scrollable : facets — padding latéral généreux (24px) pour aérer
     les titres et chips du bord gauche/droit du drawer (owner request).
     !important pour battre l'éventuel reset/margin négatif Classic. */
  #search_filters_wrapper.is-open #search_filters,
  #search_filters_wrapper #search_filters {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 24px 16px !important;
    margin: 0 !important;
  }
  /* Aussi : reset les éventuelles marges négatives Classic sur le wrapper */
  #search_filters_wrapper,
  #search_filters_wrapper.hidden-sm-down {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Titres facets dans le drawer mobile : palette Forêt Profonde (vert deep)
     au lieu du gris discret par défaut → plus présents et cohérents avec
     le reste de l'UI mobile. */
  #search_filters_wrapper .fr-facet-title {
    color: var(--fr-green-deep, #2A4A1E);
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  /* Accordéons TOUJOURS OUVERTS dans le drawer mobile (owner request).
     Le chevron est masqué (plus utile), et le header non-cliquable. */
  #search_filters_wrapper .fr-facet-chevron {
    display: none;
  }
  #search_filters_wrapper .fr-facet-header {
    cursor: default;
    pointer-events: none;
  }
  #search_filters_wrapper .fr-facet-list.collapse:not(.in):not(.show) {
    display: flex !important;
  }

  /* Strip le card styling des sections facets sur mobile (border + bg +
     padding du parent .fr-facet) → liste épurée, juste titre + chips. */
  #search_filters_wrapper .fr-facet {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
  }
  #search_filters_wrapper .fr-facet:last-child {
    margin-bottom: 0 !important;
  }

  /* ── CHIPS / PILLS pour les filtres (au lieu de checkbox + label) ──
     Tous les filtres dans le drawer mobile sont rendus comme des pills
     cliquables : background cream + border léger, fond vert deep + texte
     cream quand activé. Le compteur reste comme petit nombre subtle.
     justify-content: flex-start + gap: 8px → chips packés à gauche, pas
     de space-between qui créerait des trous entre eux. */
  #search_filters_wrapper .fr-facet-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  /* Slider prix : on annule le flex chip layout — le slider a son propre
     markup (jQuery UI track + handles + label) qui doit être en bloc. */
  #search_filters_wrapper .fr-facet-list.fr-facet-slider,
  #search_filters_wrapper .fr-facet-list.faceted-slider {
    display: block !important;
    margin: 14px 4px 4px;
    padding: 0;
  }
  #search_filters_wrapper .fr-facet-list.fr-facet-slider > li {
    width: 100%;
    display: block;
  }
  #search_filters_wrapper .fr-fopt {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #search_filters_wrapper .fr-fopt-link,
  #search_filters_wrapper .fr-fopt-check .fr-fopt-link,
  #search_filters_wrapper .fr-fopt-dot .fr-fopt-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 9px 14px !important;
    border-radius: 100px !important;
    border: 1px solid var(--fr-border, #E8E2D2) !important;
    background: var(--fr-cream, #F6F2EA) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    cursor: pointer;
    color: var(--fr-text-primary, #2A2620) !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  #search_filters_wrapper .fr-fopt-link:hover {
    border-color: var(--fr-green-deep, #2A4A1E) !important;
    background: var(--fr-white, #fff);
  }
  /* État activé : pill remplie vert deep + texte cream */
  #search_filters_wrapper .fr-fopt-active > .fr-fopt-link,
  #search_filters_wrapper .fr-fopt.fr-fopt-active .fr-fopt-link {
    background: var(--fr-green-deep, #2A4A1E) !important;
    border-color: var(--fr-green-deep, #2A4A1E) !important;
    color: var(--fr-cream, #F6F2EA) !important;
  }
  /* Masque la checkbox custom (carrée) — la pill elle-même indique l'état */
  #search_filters_wrapper .fr-fopt-cbox,
  #search_filters_wrapper .fr-fopt-cbox-mark,
  #search_filters_wrapper .fr-fopt-color {
    display: none !important;
  }
  /* Label interne reste simple, hérite la couleur du parent pill */
  #search_filters_wrapper .fr-fopt-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    color: inherit;
    overflow: visible;
    padding: 0;
  }
  /* Compteur : petit nombre subtle après le label */
  #search_filters_wrapper .fr-fopt-count {
    margin-left: 2px;
    padding-left: 0;
    font-size: 11px;
    line-height: 1;
    color: currentColor;
    opacity: 0.6;
    background: transparent !important;
    border: 0 !important;
  }
  /* Puces catégorie (dot vert pour Bien-être / Digestion etc.) : on garde
     le markup chip cohérent, juste un dot couleur à gauche. */
  #search_filters_wrapper .fr-fopt-dot-mark {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fr-green-deep, #2A4A1E);
    flex-shrink: 0;
    opacity: 0.55;
  }
  #search_filters_wrapper .fr-fopt-active .fr-fopt-dot-mark {
    background: var(--fr-cream, #F6F2EA);
    opacity: 1;
  }

  /* Backdrop semi-transparent vert deep + blur. z-index 10500 pour passer
     DEVANT la roulette (z=10000) mais sous le sheet (z=10600). */
  .fr-filter-sheet-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 46, 18, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 10500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s ease, visibility 0s linear 0.34s;
  }
  .fr-filter-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.34s ease, visibility 0s linear 0s;
  }

  /* Body scroll lock iOS-friendly : position fixed + top:-scrollY */
  body.fr-filter-sheet-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
}

/* ── Drawer filtres — Bottom bar OK + Effacer (≤1324px) ──────────────
   Étape A : OK déplacé en bas (sticky au bord inférieur du viewport
   pendant le scroll du drawer) + Effacer à côté (cloné dynamiquement
   depuis .fr-clear-btn via setupFilterControlsMobile dans framedis.js).
   Restyle complet en palette Forêt Profonde pour matcher le reste. */
@media (max-width: 1324px) {
  #search_filter_controls.fr-filter-bottom-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0;                            /* reset margin-top, le sheet gère */
    background: var(--fr-white, #fff);
    border-top: 1px solid var(--fr-border);
    flex: 0 0 auto;                       /* dans le flex column du sheet */
  }
  .fr-filter-clear-slot {
    flex: 1 1 0;
    display: flex;
  }
  .fr-filter-clear-slot:empty { display: none; }
  /* OK : pill vert deep, full-width quand seul, flex 1 quand Effacer présent */
  #search_filter_controls.fr-filter-bottom-bar .ok.fr-filter-ok-btn {
    flex: 1 1 0;
    background: var(--fr-green-deep, #2A4A1E) !important;
    background-color: var(--fr-green-deep, #2A4A1E) !important;
    color: var(--fr-cream, #F6F2EA) !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    min-height: 44px;
    margin: 0 !important;
    text-align: center !important;
    box-shadow: none !important;
  }
  #search_filter_controls.fr-filter-bottom-bar .ok.fr-filter-ok-btn:hover,
  #search_filter_controls.fr-filter-bottom-bar .ok.fr-filter-ok-btn:focus,
  #search_filter_controls.fr-filter-bottom-bar .ok.fr-filter-ok-btn:active {
    background: #1f3815 !important;
    background-color: #1f3815 !important;
    color: var(--fr-cream, #F6F2EA) !important;
  }
  #search_filter_controls.fr-filter-bottom-bar .fr-filter-ok-check {
    font-size: 15px;
    font-weight: 700;
  }
  #search_filter_controls.fr-filter-bottom-bar .ok .material-icons { display: none; }

  /* Effacer cloné dans le slot — pill cream pour contraster avec OK vert deep */
  .fr-filter-clear-slot .fr-clear-btn {
    flex: 1 1 0;
    width: 100%;
    background: var(--fr-cream, #F6F2EA);
    color: var(--fr-text-mid);
    border: 1.5px solid var(--fr-border);
    border-radius: 100px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    min-height: 44px;
    cursor: pointer;
    margin: 0;
  }
  .fr-filter-clear-slot .fr-clear-btn:hover,
  .fr-filter-clear-slot .fr-clear-btn:focus {
    border-color: var(--fr-green-deep, #2A4A1E);
    color: var(--fr-text-primary);
  }
  .fr-filter-clear-slot .fr-clear-btn-x {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
  }
}

/* ── ps_categorytree masqué sur les pages catégorie ──
   Doublon des family-tabs sticky en haut de page + filtre "Sous-catégories"
   du facetedsearch. On le masque sur tout left-column pour un layout clean.
   Si on veut le réactiver un jour : retirer ces règles ou les conditionner
   à un body class spécifique. */
#left-column .block_categories,
#left-column .block-categories,
#left-column #category-tree-link-block,
#left-column .category-top-menu,
#left-column [data-module-name*="categorytree"],
#left-column [data-module*="categorytree"],
#left-column #category {
  display: none !important;
}

/* (legacy - gardé au cas où on veuille réactiver le category tree) */
#left-column .block_categories--legacy,
#left-column .block-categories--legacy {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
#left-column .block_categories .h6,
#left-column .block_categories h6,
#left-column .block_categories .title_block {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-text-mid);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
#left-column .category-top-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
#left-column .category-top-menu li,
#left-column .category-sub-menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}
#left-column .category-top-menu a,
#left-column .category-sub-menu a {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--fr-text-mid);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
  border: 0;
}
#left-column .category-top-menu a:hover,
#left-column .category-sub-menu a:hover {
  color: var(--fr-green-deep);
  padding-left: 4px;
  text-decoration: none;
}
#left-column .category-top-menu li.current > a,
#left-column .category-sub-menu li.current > a {
  color: var(--fr-green-deep);
  font-weight: 600;
}
#left-column .category-top-menu .navbar-toggler,
#left-column .arrows {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.4;
  margin-left: 8px;
  float: right;
}
#left-column .category-sub-menu {
  margin: 4px 0 4px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--fr-border);
}

/* ── Header de la liste produits (page sous-catégorie) ──
   On masque le H1 par défaut PS ("CATÉGORIE: Nutrition") puisque notre
   hero compact affiche déjà le nom. On garde le tri et le compteur. */
#products .h1.product-list-title,
#js-product-list-header,
#main h1.h2,
#main #js-product-list-header {
  display: none !important;
}

/* ── B3 — Toolbar compact en haut de liste (Forêt Profonde) ──────────────
   override de .products-selection / #js-product-list-top : pas de card, pas
   de border, juste une barre horizontale "13 produits" / dropdown / toggle. */
.products-selection,
#js-product-list-top.fr-toolbar,
#js-product-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.fr-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fr-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-results-count {
  font-size: 14px;
  color: var(--fr-text-mid);
}
.fr-results-count strong {
  color: var(--fr-text-primary);
  font-weight: 700;
}

/* Sort dropdown — pill compact (plus de wrapper card) */
.products-sort-order {
  position: relative;
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.fr-sort-btn,
.products-sort-order .select-title,
.sort-by-row .select-title {
  background: var(--fr-white, #fff);
  border: 1.5px solid var(--fr-border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fr-text-mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
  line-height: 1.2;
}
.fr-sort-btn:hover,
.products-sort-order .select-title:hover {
  border-color: var(--fr-green-deep);
  color: var(--fr-text-primary);
  text-decoration: none;
}
.fr-sort-btn svg {
  flex-shrink: 0;
  opacity: 0.55;
}
.products-sort-order .dropdown-menu {
  border-radius: 12px;
  border: 0.5px solid var(--fr-border);
  box-shadow: 0 12px 32px rgba(42, 74, 30, 0.10);
  padding: 6px;
  min-width: 220px;
}
.products-sort-order .dropdown-menu a {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fr-text-mid);
  border-radius: 8px;
  display: block;
}
.products-sort-order .dropdown-menu a:hover,
.products-sort-order .dropdown-menu a.current {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep);
  text-decoration: none;
}

/* View toggle — 2 boutons grille / liste */
.fr-view-btns {
  display: inline-flex;
  border: 1.5px solid var(--fr-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fr-white, #fff);
}
.fr-view-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fr-text-mid);
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.fr-view-btn + .fr-view-btn {
  border-left: 1px solid var(--fr-border);
}
.fr-view-btn:hover { color: var(--fr-text-primary); }
.fr-view-btn.is-active {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep);
}

/* Bouton "Filtrer" (caché en PC ≥1325, visible en mobile + tablette ≤1324) */
.fr-mobile-filter-btn {
  display: none;
}
@media (max-width: 1324px) {
  .fr-mobile-filter-btn { display: inline-flex; }
}

/* ── B3 — Toolbar compact en MOBILE (≤600px) ───────────────────────
   Réduit les gaps + font-sizes + tailles boutons pour que tout tienne
   sur une ligne sur viewport 360-414px (avant ça wrappait sur 2 lignes ou
   les boutons étaient sur-dimensionnés). Le label "Filtrer" est aussi
   restylé pour matcher le pill compact de Forêt Profonde (au lieu du
   btn-secondary Bootstrap par défaut, trop épais visuellement). */
@media (max-width: 600px) {
  .products-selection,
  #js-product-list-top.fr-toolbar,
  #js-product-list-top {
    gap: 8px;
    margin: 14px 0 14px;
  }
  .fr-toolbar-left { gap: 6px; }
  .fr-toolbar-right { gap: 6px; }
  .fr-results-count { font-size: 12px; }

  /* Hauteur commune 34px pour TOUS les éléments à droite (sort / view / filter)
     → top parfaitement aligné dans le toolbar (sinon les view btns paraissaient
     décalés vers le bas car le container .fr-view-btns ajoutait 3px de border
     à la hauteur de chaque btn). box-sizing: border-box → la hauteur comprend
     le border, pas d'addition. */
  .fr-sort-btn,
  .products-sort-order .select-title {
    font-size: 11.5px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 8px;
    line-height: 1.2;
    height: 34px;
    box-sizing: border-box;
  }
  .fr-sort-btn svg { width: 8px; height: 5px; }

  /* Toggle grille/liste : visuel compact (height container 34, svg 12×12,
     même hauteur que sort + filter) MAIS plus large horizontalement (52px par btn)
     pour offrir un target touch confortable (owner request : "plus gros sur la largeur"). */
  .fr-view-btns {
    border-radius: 8px;
    height: 34px;
    box-sizing: border-box;
  }
  .fr-view-btn {
    width: 52px;
    height: 100%;
    padding: 0;
  }
  .fr-view-btn svg { width: 12px; height: 12px; }

  .fr-mobile-filter-btn {
    padding: 0 12px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--fr-border) !important;
    background: var(--fr-white, #fff) !important;
    color: var(--fr-text-mid) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    height: 34px !important;
    box-sizing: border-box !important;
    /* Centrage horizontal + vertical du texte (override Bootstrap btn qui
       peut laisser text-align: left ou padding asymétrique). */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .fr-mobile-filter-btn:hover,
  .fr-mobile-filter-btn:focus,
  .fr-mobile-filter-btn:active {
    border-color: var(--fr-green-deep) !important;
    color: var(--fr-text-primary) !important;
    background: var(--fr-white, #fff) !important;
  }
}

/* ── B3 — Mode liste (toggle .fr-list-view sur #js-product-list) ─────────
   En mode liste, chaque card produit prend toute la largeur, et bascule
   en horizontal : image fixée 240×180 à gauche, contenu centré verticalement
   à droite (titre + sous-titre + prix + bouton +). Match mockup catégorie v2. */
#js-product-list.fr-list-view .products {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}
#js-product-list.fr-list-view .products > .js-product,
#js-product-list.fr-list-view .products > .product,
#js-product-list.fr-list-view .products > [class*="col-"] {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#js-product-list.fr-list-view .product-miniature {
  width: 100%;
  margin: 0;
}
/* Flexbox horizontal — plus prévisible que grid face aux .product-flags
   et autres enfants `position: absolute` ajoutés par les hooks PS. */
#js-product-list.fr-list-view .product-miniature {
  display: block !important;
  width: 100% !important;
}
#js-product-list.fr-list-view .product-miniature .thumbnail-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 180px !important;
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 18px;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}
#js-product-list.fr-list-view .product-miniature .thumbnail-top {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  min-width: 240px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 180px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
#js-product-list.fr-list-view .product-miniature .thumbnail-top a.thumbnail,
#js-product-list.fr-list-view .product-miniature .thumbnail-top a.product-thumbnail,
#js-product-list.fr-list-view .product-miniature .thumbnail-top .thumbnail.product-thumbnail {
  display: block !important;
  width: 240px !important;
  height: 100% !important;
  max-width: 240px !important;
  max-height: none !important;
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
#js-product-list.fr-list-view .product-miniature .thumbnail-top picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 240px !important;
  max-height: none !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 0 !important;
}
#js-product-list.fr-list-view .product-miniature .thumbnail-top img {
  width: 240px !important;
  height: 100% !important;
  max-width: 240px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
/* product-flags (NEUF / sale) sont en position absolue par le thème,
   on s'assure qu'ils restent dans le coin de l'image, pas dans la card globale. */
#js-product-list.fr-list-view .product-miniature .product-flags {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Quick-view overlay : caché en mode liste pour pas perturber l'image */
#js-product-list.fr-list-view .product-miniature .highlighted-informations {
  display: none;
}
/* Product description : flex column, fill remaining space (flex:1),
   contenu centré verticalement, prix + bouton "+" en bas avec space-between.
   `min-width: 0` est crucial pour que le texte wrap au lieu de pousser
   la card en largeur (sinon long sous-titres = card cassée). */
#js-product-list.fr-list-view .product-miniature .product-description {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column;
  justify-content: center;
  padding: 18px 24px 18px 28px;
  text-align: left;
  gap: 6px;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
  overflow: hidden;
}
#js-product-list.fr-list-view .product-miniature .product-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 2px;
  text-align: left;
}
#js-product-list.fr-list-view .product-miniature .product-title a {
  color: var(--fr-text-primary);
}
/* Sous-titre — masqué par défaut (mode grille), visible en mode liste */
.fr-list-subtitle,
.fr-list-reviews {
  display: none;
}
#js-product-list.fr-list-view .product-miniature .fr-list-subtitle {
  display: block;
  font-size: 13px;
  color: var(--fr-text-mid);
  line-height: 1.45;
  margin: 0 0 2px;
  /* clamp à 2 lignes pour pas exploser la card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#js-product-list.fr-list-view .product-miniature .fr-list-cond {
  font-weight: 600;
  color: var(--fr-text-primary);
}
/* Stars + nombre d'avis (productcomments hook) — visible uniquement en mode liste */
#js-product-list.fr-list-view .product-miniature .fr-list-reviews {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
}
#js-product-list.fr-list-view .product-miniature .fr-list-reviews .hook-reviews,
#js-product-list.fr-list-view .product-miniature .fr-list-reviews .comments_note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fr-text-mid);
}
#js-product-list.fr-list-view .product-miniature .fr-list-reviews .grade-stars {
  color: #E0A03C;  /* doré (étoiles) */
}
/* Si pas d'avis : afficher quand même le wrapper vide est inutile, on cache */
#js-product-list.fr-list-view .product-miniature .fr-list-reviews:empty {
  display: none;
}

/* Overlay étoiles top-right de l'image masqué partout (desktop + mobile) —
   visuellement moche sur fond vert deep des placeholders Framedis, et le
   rendu AJAX productcomments produit des fragments mal alignés (3 étoiles
   + chiffre tronqué) qui parasitent la card. En mode liste, .fr-list-reviews
   prend le relais dans le body texte. Sur fiche produit, la section avis
   complète reste accessible. Owner feedback 2026-05-11. */
.product-miniature .fr-pcard-stars-tr {
  display: none !important;
}

/* ── Padding-left sur le content-wrapper en page catégorie ──────────────
   Évite que les cards / la toolbar collent au bord droit de la sidebar.
   Plusieurs sélecteurs en fallback car PS9 classic peut nommer le body de
   différentes manières (body.category, body#category, body[id^="category-"]…).
   Exception `:not(.category-id-parent-2)` : les 7 familles top-level
   utilisent un layout full-bleed (.fr-family-page) qui doit toucher
   les bords du viewport, donc pas de padding-left.
   Scope ≥1325 : aligné sur le breakpoint header burger. En tablette
   (≤1324) on bascule en bottom-sheet, donc pas besoin du padding qui
   compensait la sidebar. */
@media (min-width: 1325px) {
  body.category:not(.category-id-parent-2) #content-wrapper,
  body[class*="category"]:not(.category-id-parent-2) #content-wrapper,
  body[id*="category"]:not(.category-id-parent-2) #content-wrapper,
  body.page-category:not(.category-id-parent-2) #content-wrapper {
    padding-left: 40px !important;
  }
}
#js-product-list.fr-list-view .product-miniature .product-price-and-shipping.fr-with-add {
  margin-top: auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
}
#js-product-list.fr-list-view .product-miniature .fr-price-block {
  font-size: 20px;
  font-weight: 700;
  color: var(--fr-text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
#js-product-list.fr-list-view .product-miniature .fr-price-block .regular-price {
  font-size: 14px;
  font-weight: 400;
}
#js-product-list.fr-list-view .product-miniature .fr-pcard-add,
#js-product-list.fr-list-view .product-miniature .fr-pcard-add-form {
  flex-shrink: 0;
}
/* Product flags (NEUF / -19% / etc.) — restent en haut-gauche de l'image */
#js-product-list.fr-list-view .product-miniature .product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
/* Product reviews (étoiles) — afficher inline sous le titre si présentes */
#js-product-list.fr-list-view .product-miniature .product-reviews,
#js-product-list.fr-list-view .product-miniature .comments_note {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--fr-text-mid);
}

/* ── Mode LISTE — Image réduite + padding latéral sur mobile/tablette ──
   Les règles de base list-view (plus haut dans ce fichier) imposent
   240px avec !important. Override ici (cascade : plus bas = gagne).
   Owner request : image 110px était trop étroite, on remonte à 140px
   pour rester équilibré. Padding latéral ajouté sur chaque card pour
   qu'elles ne touchent plus les bords du viewport.
   Scope ≤1324 : aligné sur le breakpoint header burger (mobile+tablette). */
@media (max-width: 1324px) {
  #js-product-list.fr-list-view .product-miniature .thumbnail-container {
    min-height: 150px !important;
  }
  #js-product-list.fr-list-view .product-miniature .thumbnail-top,
  #js-product-list.fr-list-view .product-miniature .thumbnail-top a.thumbnail,
  #js-product-list.fr-list-view .product-miniature .thumbnail-top a.product-thumbnail,
  #js-product-list.fr-list-view .product-miniature .thumbnail-top .thumbnail.product-thumbnail,
  #js-product-list.fr-list-view .product-miniature .thumbnail-top picture,
  #js-product-list.fr-list-view .product-miniature .thumbnail-top img {
    flex: 0 0 185px !important;
    width: 185px !important;
    max-width: 185px !important;
    min-width: 185px !important;
    min-height: 140px !important;
  }
  /* Padding latéral sur les cards en mode liste pour qu'elles ne collent
     pas aux bords du viewport (override le padding 0 de fr-list-view). */
  #js-product-list.fr-list-view .products > .js-product,
  #js-product-list.fr-list-view .products > .product,
  #js-product-list.fr-list-view .products > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Hauteur globale card réduite : qty selector + cart btn plus petits,
     "Plus d'informations" rapproché → permet d'augmenter l'image et de
     compacter la card globalement (owner request). */
  #js-product-list.fr-list-view .product-miniature .fr-pcard-qty {
    height: 30px !important;
    padding: 0 2px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-qty-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-qty-display {
    font-size: 13px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-add.fr-pcard-cart-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-add.fr-pcard-cart-btn svg {
    width: 14px;
    height: 14px;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-info-btn,
  #js-product-list.fr-list-view .product-miniature .fr-pcard-details summary.fr-pcard-info-btn {
    min-height: 30px !important;
    height: 30px !important;
    margin-top: 4px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-details {
    margin-top: 4px !important;
  }
  #js-product-list.fr-list-view .product-miniature .fr-pcard-details summary.fr-pcard-info-btn {
    margin-top: 0 !important;
  }
}

.fr-family-tabs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;          /* retour à la ligne si trop de tabs */
  justify-content: center;  /* tabs centrées sur la ligne */
  row-gap: 8px;
}

.fr-ftab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text-mid);
  cursor: pointer;
  border-radius: 100px;
  border: 1.5px solid var(--fr-border);
  background: var(--fr-white, #fff);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.fr-ftab:hover {
  color: var(--fr-text-primary);
  border-color: #B0A896;
  background: var(--fr-page-bg);
  text-decoration: none;
}
.fr-ftab-active {
  color: #fff !important;
  border-color: transparent !important;
  text-decoration: none;
}
.fr-ftab-active:hover {
  color: #fff !important;
  text-decoration: none;
  filter: brightness(1.05);
}
.fr-ftab-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fr-ftab-active .fr-ftab-dot {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* ── Hero famille ── */
.fr-family-hero {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg,
    var(--family-color, #2A4A1E) 0%,
    color-mix(in srgb, var(--family-color, #2A4A1E) 70%, #1A2E12) 55%,
    color-mix(in srgb, var(--family-color, #2A4A1E) 80%, #3D6830) 100%);
  color: var(--fr-cream, #F6F2EA);
}
.fr-family-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 8 Q34 16 30 24 Q26 16 30 8Z' fill='%23F6F2EA' opacity='.04'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}
.fr-family-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.fr-family-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.55);
  margin-bottom: 10px;
}
.fr-family-hero-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin: 0 0 12px;
}
.fr-family-hero-desc {
  font-size: 15px;
  color: rgba(246, 242, 234, 0.7);
  line-height: 1.72;
  max-width: 540px;
}
.fr-family-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(246, 242, 234, 0.12);
}
.fr-fhs-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-cream, #F6F2EA);
  letter-spacing: -0.4px;
}
.fr-fhs-lbl {
  font-size: 11px;
  color: rgba(246, 242, 234, 0.5);
  margin-top: 2px;
}
.fr-family-hero-visual {
  flex-shrink: 0;
}

/* ── Grille des sous-catégories ── */
.fr-family-subcats {
  background: var(--fr-page-bg, #FAF7F0);
  padding: 56px 40px 64px;
}
.fr-family-subcats-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.fr-family-subcats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.fr-family-subcats-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-text-primary);
  letter-spacing: -0.3px;
  margin: 0;
}
.fr-family-subcats-count {
  font-size: 13px;
  color: var(--fr-text-mid);
}

.fr-family-subcats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fr-sc-card {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.fr-sc-card:hover,
.fr-sc-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(42, 74, 30, 0.10);
  border-color: var(--fr-green-pale);
  text-decoration: none;
  color: inherit;
}
.fr-sc-card-img {
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fr-sc-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-sc-card-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fr-sc-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.fr-sc-card-desc {
  font-size: 12px;
  color: var(--fr-text-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 14px;
}
.fr-sc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fr-sc-card-link {
  font-size: 13px;
  font-weight: 600;
  color: #4E7C3A;
  transition: color 0.15s ease;
}
.fr-sc-card:hover .fr-sc-card-link {
  color: var(--fr-green-deep);
}

/* Badges sur les cartes sous-catégorie (B2 étape 4) */
.fr-sc-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fr-text-primary);
  border: 0.5px solid var(--fr-border);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* "X produits" — coin haut-droite de l'image */
.fr-sc-badge-count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
/* "dès X,XX €" — dans le footer à droite, à côté du lien */
.fr-sc-badge-price {
  margin-left: auto;
  background: var(--fr-cream, #F6F2EA);
  color: var(--fr-green-deep);
  border-color: var(--fr-green-pale);
}
/* Footer en flex space-between pour aligner lien et badge prix */
.fr-sc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Strip "produits highlight" ── */
.fr-family-featured {
  background: var(--fr-cream, #F6F2EA);
  border-top: 1px solid var(--fr-border);
  padding: 48px 40px 56px;
}
.fr-family-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.fr-family-featured-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 24px;
  letter-spacing: -0.2px;
}
.fr-family-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fr-family-featured-grid .product-miniature {
  margin-bottom: 0;
}
.fr-family-featured-more {
  margin-top: 28px;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .fr-family-tabs-wrap { top: 80px; }
  .fr-family-tabs { padding: 12px 20px; gap: 6px; }
  .fr-ftab { padding: 8px 16px; font-size: 12px; }
}
/* Family-tabs sur mobile + tablette : 1 SEULE ligne scrollable horizontalement
   (au lieu de wrap sur 2-4 lignes). Owner request : "même ligne et
   défiler". Pas d'auto-advance — simple swipe utilisateur, snap optionnel
   pour faire snap sur chaque tab. Padding latéral 16px pour ne pas
   coller au bord (visuellement on voit qu'il y a plus à droite).
   Scope étendu à 1324px pour couvrir tablette portrait/landscape +
   laptops étroits (cohérent avec le breakpoint header burger 1325). */
@media (max-width: 1324px) {
  .fr-family-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-left: 16px;
    padding-right: 16px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
  }
  .fr-family-tabs::-webkit-scrollbar { display: none; }
  .fr-ftab {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}
@media (max-width: 900px) {
  .fr-family-hero-inner {
    padding: 40px 24px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fr-family-hero-title { font-size: 34px; }
  .fr-family-hero-visual { display: none; }
  .fr-family-subcats { padding: 40px 20px 48px; }
  .fr-family-subcats-grid { grid-template-columns: repeat(2, 1fr); }
  .fr-family-featured { padding: 36px 20px 44px; }
  .fr-family-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Sticky tabs : top = hauteur réelle du header pinned (67px) pour que
     les 2 blocs soient parfaitement collés sans gap ni overlap. */
  .fr-family-tabs-wrap { top: 67px; }
  .fr-family-subcats-grid { grid-template-columns: 1fr; }
  .fr-family-hero-title { font-size: 28px; }
  .fr-family-hero-stats { gap: 18px; }
  /* Note : .fr-family-featured-grid n'est PLUS forcée en 1 colonne ici —
     elle est transformée en snap carousel horizontal par le bloc 768px
     plus bas (owner request : carousel sur toutes les pages catégorie). */
}

/* Section "Quelques produits de cette gamme" sur mobile (≤768px) :
   pattern IDENTIQUE au carousel "Nos incontournables" home — CSS Grid
   horizontal (grid-auto-flow: column + grid-auto-columns: 240px), dezoom
   0.88 sur cards non-actives + opacity 0.65, flèches prev/next absolutes
   avec visibilité dynamique (toggle .is-visible par le JS selon scrollLeft).
   Owner request : "même carrousel que sur la page d'accueil". */
@media (max-width: 900px) {
  .fr-family-featured-carousel {
    position: relative;
    margin: 0 -20px;             /* déborde du padding 20px latéral de la section */
  }
  .fr-family-featured-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 270px !important;          /* cards +12.5% vs home 240px (owner request) */
    grid-template-rows: auto !important;
    gap: 14px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    padding: 14px 0 !important;
    /* Padding latéral = (50vw - moitié_card) pour que la 1ère ET la dernière
       card soient centrées dans le viewport (au lieu de coller au bord).
       Card = 270px → moitié = 135px → padding = calc(50vw - 135px). */
    padding-left: calc(50vw - 135px) !important;
    padding-right: calc(50vw - 135px) !important;
    scroll-padding-left: calc(50vw - 135px);
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr-family-featured-grid::-webkit-scrollbar { display: none; }
  .fr-family-featured-grid > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0 !important;
    scroll-snap-align: start;
    transform: scale(0.88);
    transform-origin: center center;
    opacity: 0.65;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .fr-family-featured-grid > *.is-active {
    transform: scale(1);
    opacity: 1;
  }
  .fr-family-featured-grid .product-miniature {
    margin-bottom: 0;
    width: 100%;
  }
}

/* Fallback si le navigateur ne supporte pas color-mix (Safari < 16.2,
   Firefox < 113). On force un dégradé monochromatique simple. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .fr-family-hero {
    background: var(--family-color, #2A4A1E);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   B4 — Fiche produit Framedis (mockup framedis_fiche_produit_v2.html)
   Override de catalog/product.tpl + product-variants + product-add-to-cart
   ═══════════════════════════════════════════════════════════════════════ */

/* Fond cream étendu sur toute la largeur du viewport sur fiche produit.
   .fr-product-page est dans .container Bootstrap (max-width ~1140px), donc
   un simple `background` ne déborde pas. On applique le bg sur #wrapper qui
   couvre tout. Le breadcrumb conserve sa propre cream (cf .breadcrumb::before)
   qui s'étend déjà full-width via pseudo-élément. */
body#product #wrapper { background: var(--fr-page-bg, #FAF7F0) !important; }
body#product { background: var(--fr-page-bg, #FAF7F0); }
.fr-product-page { background: transparent; }

/* Container principal — 2 colonnes (galerie | infos) */
.fr-product-zone {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* ───────── GALERIE ───────── */
.fr-pgallery { position: relative; }
.fr-pgallery-main {
  position: relative;
  background: linear-gradient(145deg, var(--fr-green-light, #EAF2E3), var(--fr-green-pale, #C8DFB5));
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.fr-pgallery-img,
.fr-pgallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
  border-radius: inherit;
  padding: 12px;
}
.fr-pgallery-placeholder { opacity: 0.5; }
.fr-pgallery-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}
.fr-pbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-pbadge-online-only,
.fr-pbadge-on-sale,
.fr-pbadge-discount,
.fr-pbadge-discount-percentage,
.fr-pbadge-discount-amount {
  background: #FDF6ED;
  color: #C07C2A;
}
.fr-pbadge-new { background: #F4EDFB; color: #6E3AAA; }
.fr-pbadge-pack { background: #E0F2F7; color: #2A6F8E; }

.fr-pgallery-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fr-pthumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--fr-green-light, #EAF2E3);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
  text-decoration: none;
}
.fr-pthumb:hover { border-color: var(--fr-green-mid, #4E7C3A); }
.fr-pthumb-active,
.fr-pthumb.selected { border-color: var(--fr-green-deep, #2A4A1E); }
.fr-pthumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Mention "Photos non contractuelles" — sous la galerie, cliquable vers
   la clause CGV. Discret (italique, gris doux), souligne au hover. */
.fr-pgallery-disclaimer {
  margin: 14px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--fr-text-mid, #7A6A4A);
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.fr-pgallery-disclaimer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fr-pgallery-disclaimer a:hover,
.fr-pgallery-disclaimer a:focus-visible {
  color: var(--fr-green-deep, #2A4A1E);
  border-bottom-color: var(--fr-green-deep, #2A4A1E);
  outline: none;
}
.fr-pgallery-disclaimer span[aria-hidden] {
  color: var(--fr-green-mid, #4E7C3A);
  font-weight: 700;
  margin-right: 2px;
}

/* ───────── INFO PRODUIT (colonne droite) ───────── */
.fr-pinfo { font-family: inherit; }

.fr-pinfo-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fr-green-mid, #4E7C3A);
  margin-bottom: 8px;
}
.fr-pinfo-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.fr-pinfo-subtitle {
  font-size: 14px;
  color: var(--fr-text-mid, #7A6A4A);
  font-style: italic;
  margin-bottom: 16px;
}

/* Rating */
.fr-pinfo-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fr-pstars {
  color: #C07C2A;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
}
.fr-prating-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
}
.fr-prating-sep { color: var(--fr-border, #E4DDD0); }
.fr-prating-count {
  font-size: 13px;
  color: var(--fr-text-mid, #7A6A4A);
  text-decoration: underline;
}
.fr-prating-count:hover {
  color: var(--fr-green-deep, #2A4A1E);
  text-decoration: underline;
}
.fr-prating-verified {
  font-size: 12px;
  color: var(--fr-green-mid, #4E7C3A);
  font-weight: 600;
}

/* ───────── PRIX (override .product-prices) ───────── */
.fr-pinfo-pricezone .product-prices {
  margin: 0 0 20px;
}
.fr-pinfo-pricezone .product-discount {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
}
.fr-pinfo-pricezone .regular-price {
  font-size: 15px;
  color: #C0B09A;
  text-decoration: line-through;
  font-weight: 500;
}
.fr-pinfo-pricezone .product-price,
.fr-pinfo-pricezone .h5 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: inherit;
}
.fr-pinfo-pricezone .current-price {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.fr-pinfo-pricezone .current-price-value,
.fr-pinfo-pricezone .current-price > span:first-child {
  font-size: 36px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  letter-spacing: -1px;
  line-height: 1;
}
.fr-pinfo-pricezone .discount,
.fr-pinfo-pricezone .discount-percentage,
.fr-pinfo-pricezone .discount-amount {
  background: #FDF6ED;
  color: #C07C2A;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fr-pinfo-pricezone .product-unit-price {
  font-size: 13px;
  color: var(--fr-text-mid, #7A6A4A);
  margin: 4px 0 0;
}
.fr-pinfo-pricezone .tax-shipping-delivery-label,
.fr-pinfo-pricezone .product-without-taxes {
  font-size: 12px;
  color: var(--fr-text-mid, #7A6A4A);
  margin: 6px 0 0;
}

/* ───────── VARIANTES (chips pills) ───────── */
.fr-pvariants { margin: 0 0 20px; }
.fr-pvariant-row {
  margin-bottom: 18px;
  border: 0;
  padding: 0;
}
.fr-pvariant-row:last-child { margin-bottom: 0; }
.fr-pvariant-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-mid, #7A6A4A);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.fr-pvariant-selected {
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin-left: 4px;
}
.fr-pvariant-chips,
.fr-pvariant-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-pvariant-chip-li,
.fr-pvariant-color-li { list-style: none; margin: 0; padding: 0; }

.fr-pvariant-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  font-size: 13px;
  font-weight: 500;
  color: var(--fr-text-mid, #4A4238);
  cursor: pointer;
  background: var(--fr-white, #fff);
  transition: all 0.2s ease;
  min-height: 38px;
  margin: 0;
}
.fr-pvariant-chip:hover {
  border-color: var(--fr-green-mid, #4E7C3A);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-pvariant-chip-active {
  border-color: var(--fr-green-deep, #2A4A1E);
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 600;
}
.fr-pvariant-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fr-pvariant-chip-name { line-height: 1.2; }

/* Pastilles couleur */
.fr-pvariant-color-lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 100px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  cursor: pointer;
  background: var(--fr-white, #fff);
  transition: border-color 0.2s ease;
  margin: 0;
}
.fr-pvariant-color-lbl:hover { border-color: var(--fr-green-mid, #4E7C3A); }
.fr-pvariant-color-active { border-color: var(--fr-green-deep, #2A4A1E); }
.fr-pvariant-color-lbl input { position: absolute; opacity: 0; pointer-events: none; }
.fr-pvariant-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: cover;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.fr-pvariant-color-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--fr-text-primary, #1A2E12);
}

/* ───────── ADD TO CART (qty + bouton) ───────── */
.fr-pa2c { margin: 0 0 16px; }
.fr-pa2c-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.fr-pqty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  overflow: hidden;
  background: var(--fr-white, #fff);
  height: 50px;
}
.fr-pqty-btn {
  width: 40px;
  height: 100%;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--fr-text-mid, #4A4238);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  font-family: inherit;
  padding: 0;
}
.fr-pqty-btn:hover {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-pqty-input,
input.fr-pqty-input[type="number"] {
  width: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  border: 0;
  border-left: 1px solid var(--fr-border, #E4DDD0);
  border-right: 1px solid var(--fr-border, #E4DDD0);
  height: 100%;
  padding: 0;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  font-family: inherit;
}
.fr-pqty-input::-webkit-outer-spin-button,
.fr-pqty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fr-pa2c-cta-wrap { flex: 1; }
.fr-pa2c-cta,
button.fr-pa2c-cta {
  flex: 1;
  width: 100%;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  padding: 0 28px;
  height: 50px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.fr-pa2c-cta:hover,
button.fr-pa2c-cta:hover {
  background: var(--fr-text-primary, #1A2E12);
  transform: translateY(-1px);
  color: var(--fr-cream, #F6F2EA);
}
.fr-pa2c-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Override PS Classic .btn-primary:disabled:hover/focus qui réapplique
   le cyan #24b9d7 quand le bouton est temporairement disabled pendant
   l'ajout au panier (état loading). Couvre tous les états cyan PS
   Classic résiduels sur le CTA add-to-cart. */
.fr-pa2c-cta,
.fr-pa2c-cta:hover,
.fr-pa2c-cta:focus,
.fr-pa2c-cta:focus-visible,
.fr-pa2c-cta:active,
.fr-pa2c-cta:disabled,
.fr-pa2c-cta:disabled:hover,
.fr-pa2c-cta:disabled:focus,
.fr-pa2c-cta.disabled,
.fr-pa2c-cta.disabled:hover,
.fr-pa2c-cta.disabled:focus,
button.fr-pa2c-cta,
button.fr-pa2c-cta:hover,
button.fr-pa2c-cta:focus,
button.fr-pa2c-cta:focus-visible,
button.fr-pa2c-cta:active,
button.fr-pa2c-cta:disabled,
button.fr-pa2c-cta:disabled:hover,
button.fr-pa2c-cta:disabled:focus,
button.fr-pa2c-cta.disabled,
button.fr-pa2c-cta.disabled:hover,
button.fr-pa2c-cta.disabled:focus {
  background-color: var(--fr-green-deep, #2A4A1E) !important;
  border-color: transparent !important;
  color: var(--fr-cream, #F6F2EA) !important;
  outline: none !important;
}
.fr-pa2c-cta:hover,
.fr-pa2c-cta:focus,
button.fr-pa2c-cta:hover,
button.fr-pa2c-cta:focus {
  background-color: var(--fr-text-primary, #1A2E12) !important;
}
.fr-pa2c-cta:focus-visible,
button.fr-pa2c-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.18) !important;
}
.fr-pa2c-cta-icon { flex-shrink: 0; }

/* ───────── OPTIONS "QUANTITÉ" (cards radio "1 produit" vs "Offre 3+1")
   Style Spotminders : 2 cartes empilées, radio rond à gauche, prix à droite.
   Carte sélectionnée (via :has + :checked) → bordure vert deep 2px + box-shadow
   + fond crème pâle. Bouton "Ajouter au panier" pleine largeur dessous.
   Le module framedispromo314 applique automatiquement le 4ᵉ offert dès qty ≥ 4. */
.fr-pa2c--3p1 { display: flex; flex-direction: column; gap: 14px; }
.fr-3p1-block { display: flex; flex-direction: column; gap: 12px; }
.fr-3p1-options { display: flex; flex-direction: column; gap: 10px; }

.fr-3p1-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  user-select: none;
  min-height: 64px;
}
/* Card "1 produit" (mono-ligne) reste centrée verticalement — dot et prix
   alignés au milieu pour un look propre quand pas de sub-text. */
.fr-3p1-opt--basic { align-items: center; }
.fr-3p1-opt:hover {
  border-color: var(--fr-green-mid, #4E7C3A);
}
.fr-3p1-opt:has(.fr-3p1-radio:checked) {
  border-color: var(--fr-green-deep, #2A4A1E);
  border-width: 2px;
  padding: 13.5px 15.5px; /* compense le border 2px pour pas faire jumper */
  background: #F6FAF1;
  box-shadow: 0 4px 16px rgba(42, 74, 30, 0.10);
}

/* Radio (input) accessible mais visuellement caché */
.fr-3p1-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Dot custom (rond extérieur + dot intérieur quand :checked) */
.fr-3p1-dot {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #C9C0AE;
  background: #fff;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.fr-3p1-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--fr-green-deep, #2A4A1E);
  transform: scale(0);
  transition: transform 0.18s ease;
}
.fr-3p1-opt:has(.fr-3p1-radio:checked) .fr-3p1-dot {
  border-color: var(--fr-green-deep, #2A4A1E);
}
.fr-3p1-opt:has(.fr-3p1-radio:checked) .fr-3p1-dot::after {
  transform: scale(1);
}
.fr-3p1-radio:focus-visible + .fr-3p1-dot {
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.22);
}

/* Body (titre + sub) */
.fr-3p1-opt-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.fr-3p1-opt-title {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--fr-green-deep, #2A4A1E);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: left;
}
.fr-3p1-icon {
  font-size: 17px;
  line-height: 1;
}
.fr-3p1-opt-sub {
  width: 100%;
  font-size: 12.5px;
  color: var(--fr-text-mid, #7A6A4A);
  line-height: 1.4;
  text-align: left;
}

/* Prix (à droite) — centré verticalement dans la card même quand le sub-text
   rend le body multi-ligne (sinon le prix collerait visuellement au titre). */
.fr-3p1-opt-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: center;
  gap: 2px;
  text-align: right;
  line-height: 1.15;
}
.fr-3p1-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  font-variant-numeric: tabular-nums;
}
.fr-3p1-price-old {
  font-size: 14px;
  font-weight: 500;
  color: var(--fr-text-muted, #7A6A4A);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  /* Barre dans la même teinte que le texte, mais translucide : on lit
     le prix au travers, on perçoit la barre. */
  text-decoration-color: rgba(122, 106, 74, 0.45);
  text-underline-offset: 1px;
  font-variant-numeric: tabular-nums;
}

/* Badge "Meilleure offre" (haut-droit de la carte 3+1) */
.fr-3p1-badge-pill {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 3px 9px;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(42, 74, 30, 0.18);
}

/* Footer : compteur multiplicateur à gauche + bouton CTA à droite */
.fr-3p1-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.fr-3p1-footer .fr-pqty--3p1 {
  flex-shrink: 0;
}
.fr-3p1-footer .fr-pa2c-cta-wrap--full {
  flex: 1 1 200px;
  min-width: 0;
}
.fr-pa2c-cta-wrap--full .fr-pa2c-cta {
  width: 100%;
  justify-content: center;
}


/* Mobile ≤900px : cards compactes + footer reste en row (compteur + bouton sur 1 ligne, comme PC/tablette) */
@media (max-width: 900px) {
  .fr-3p1-opt {
    padding: 12px 14px;
    gap: 12px;
    min-height: 60px;
  }
  .fr-3p1-opt:has(.fr-3p1-radio:checked) {
    padding: 11.5px 13.5px;
  }
  .fr-3p1-opt-title { font-size: 14px; }
  .fr-3p1-opt-sub { font-size: 11.5px; }
  .fr-3p1-price { font-size: 15px; }
  .fr-3p1-price-old { font-size: 13.5px; text-decoration-thickness: 1.5px; }
  .fr-3p1-badge-pill { font-size: 10px; padding: 2.5px 8px; right: 12px; top: -8px; }
  .fr-3p1-dot { flex-basis: 20px; width: 20px; height: 20px; }

  /* Footer compact pour tenir compteur + bouton sur 1 row même sur petit viewport */
  .fr-3p1-footer { gap: 8px; }
  .fr-3p1-footer .fr-pqty--3p1 { height: 46px; }
  .fr-3p1-footer .fr-pqty--3p1 .fr-pqty-btn { width: 34px; font-size: 18px; }
  .fr-3p1-footer .fr-pqty--3p1 .fr-pqty-input,
  .fr-3p1-footer .fr-pqty--3p1 input.fr-pqty-input[type="number"] { width: 34px; font-size: 15px; }
  .fr-3p1-footer .fr-pa2c-cta-wrap--full { flex: 1 1 160px; }
  .fr-3p1-footer .fr-pa2c-cta-wrap--full .fr-pa2c-cta {
    padding: 0 12px;
    height: 46px;
    font-size: 14px;
    gap: 8px;
  }
  .fr-3p1-footer .fr-pa2c-cta-icon { width: 16px; height: 16px; }
}

.fr-pwish {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  background: var(--fr-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--fr-text-mid, #7A6A4A);
  flex-shrink: 0;
  font-family: inherit;
}
.fr-pwish:hover {
  border-color: #C07C2A;
  background: #FDF6ED;
  color: #C07C2A;
}

/* Availability message */
.fr-pavail-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fr-text-mid, #7A6A4A);
}
.fr-pavail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fr-green-mid, #4E7C3A);
}
.fr-pavail-available .fr-pavail-dot { background: #E0A040; }
.fr-pavail-oos .fr-pavail-dot { background: #C04040; }
.fr-pavail-oos { color: #C04040; }
.fr-pminqty {
  font-size: 12px;
  color: var(--fr-text-mid, #7A6A4A);
  margin: 8px 0 0;
}

/* ───────── CHIPS OFFRES ───────── */
.fr-poffers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
}
.fr-poffer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fr-green-light, #EAF2E3);
  border: 1px solid var(--fr-green-pale, #C8DFB5);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--fr-text-mid, #4A4238);
  white-space: nowrap;
  overflow: hidden;
}
.fr-poffer-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-poffer-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.fr-poffer-text strong {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 600;
  margin-right: 1px;
}

/* ───────── MINI RÉASSURANCE ───────── */
.fr-preass {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--fr-border, #E4DDD0);
}
.fr-preass-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fr-text-mid, #7A6A4A);
}
.fr-preass-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-green-mid, #4E7C3A);
  flex-shrink: 0;
}

/* ───────── ONGLETS ───────── */
.fr-ptabs-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 0;
}
.fr-ptabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--fr-border, #E4DDD0);
  margin: 0;
  flex-wrap: wrap;
}
.fr-ptab-btn {
  padding: 14px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--fr-text-mid, #7A6A4A);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.fr-ptab-btn:hover { color: var(--fr-text-primary, #1A2E12); }
.fr-ptab-btn.active {
  color: var(--fr-green-deep, #2A4A1E);
  border-bottom-color: var(--fr-green-deep, #2A4A1E);
  font-weight: 600;
}
.fr-ptab-count { opacity: 0.6; font-weight: 400; }
.fr-ptabs-content {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 36px;
}
.fr-ptab-panel { display: none; }
.fr-ptab-panel.active { display: block; }
.fr-ptab-empty {
  font-size: 13px;
  color: var(--fr-text-mid, #7A6A4A);
  font-style: italic;
  padding: 12px 16px;
  background: var(--fr-cream, #F6F2EA);
  border-radius: 8px;
  border-left: 3px solid var(--fr-amber, #C07C2A);
  margin: 0;
}
.fr-ptab-empty strong { color: var(--fr-text-primary, #1A2E12); font-style: normal; }
.fr-product-rte {
  font-size: 14px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.7;
}
.fr-product-rte h2,
.fr-product-rte h3 {
  color: var(--fr-text-primary, #1A2E12);
  font-weight: 700;
  margin: 24px 0 12px;
}
.fr-product-rte p { margin: 0 0 14px; }
.fr-product-rte ul { padding-left: 20px; margin: 0 0 14px; }

/* ─────────────────────────────────────────────────────────────────
   B4.2 — CONTENU STRUCTURÉ DES ONGLETS (Bienfaits / Composition / Conseils)
   ───────────────────────────────────────────────────────────────── */

/* ═══════ Onglet 1 — Bienfaits ═══════ */

.fr-bienfait-intro {
  font-size: 14px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.75;
  margin-bottom: 28px;
}
.fr-bienfait-intro p { margin: 0 0 12px; }
.fr-bienfait-intro p:last-child { margin-bottom: 0; }

.fr-bienfait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.fr-bienfait-card {
  background: var(--fr-green-light, #EAF2E3);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
}
.fr-bienfait-icon {
  width: 32px;
  height: 32px;
  color: var(--fr-green-deep, #2A4A1E);
  margin-bottom: 18px;
}
.fr-bienfait-icon svg { width: 100%; height: 100%; display: block; }
.fr-bienfait-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.fr-bienfait-text {
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.65;
  margin: 0;
}

.fr-plante-info {
  background: var(--fr-cream, #F6F2EA);
  border-radius: 12px;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
}
.fr-plante-cell { }
.fr-plante-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-mid, #7A6A4A);
  margin-bottom: 4px;
}
.fr-plante-value {
  font-size: 14px;
  color: var(--fr-text-primary, #1A2E12);
  font-weight: 500;
}

/* ═══════ Onglet 2 — Composition ═══════ */

.fr-ingred-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 13.5px;
}
.fr-ingred-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-mid, #7A6A4A);
  padding: 0 12px 14px;
  border-bottom: 1px solid var(--fr-border, #E4DDD0);
}
.fr-ingred-table tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--fr-border, #E4DDD0);
  vertical-align: top;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.55;
}
.fr-ingred-table tbody tr:last-child td { border-bottom: none; }
.fr-ingred-name {
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
}
.fr-ingred-latin {
  font-style: italic;
  font-size: 12.5px;
  color: var(--fr-text-mid, #7A6A4A);
  margin-top: 2px;
}
.fr-ingred-qty {
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
}
.fr-ingred-role {
  color: var(--fr-text-mid, #4A4238);
}

.fr-disclaimer {
  background: var(--fr-cream, #F6F2EA);
  border-left: 3px solid var(--fr-green-deep, #2A4A1E);
  border-radius: 8px;
  padding: 18px 22px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fr-text-mid, #4A4238);
}
.fr-disclaimer p { margin: 0 0 8px; }
.fr-disclaimer p:last-child { margin-bottom: 0; }
.fr-disclaimer strong { color: var(--fr-text-primary, #1A2E12); font-weight: 600; }

/* ═══════ Onglet 3 — Conseils ═══════ */

.fr-conseil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
.fr-conseil-card {
  border-radius: 12px;
  padding: 22px 24px 20px;
}
.fr-conseil-green {
  background: var(--fr-green-light, #EAF2E3);
}
.fr-conseil-amber {
  background: #FBEFD9;
}
.fr-conseil-icon {
  width: 28px;
  height: 28px;
  color: var(--fr-green-deep, #2A4A1E);
  margin-bottom: 14px;
}
.fr-conseil-amber .fr-conseil-icon { color: #C07C2A; }
.fr-conseil-icon svg { width: 100%; height: 100%; display: block; }
.fr-conseil-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0 0 10px;
}
.fr-conseil-body {
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.65;
}
.fr-conseil-body p { margin: 0 0 10px; }
.fr-conseil-body p:last-child { margin-bottom: 0; }
.fr-conseil-body strong { color: var(--fr-text-primary, #1A2E12); font-weight: 600; }
.fr-conseil-empty { color: var(--fr-text-mid, #7A6A4A); }

.fr-highlight-bar {
  background: var(--fr-green-deep, #2A4A1E);
  border-radius: 12px;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  color: #fff;
}
.fr-highlight-bar:has(.fr-hl-col:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.fr-hl-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fr-hl-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.fr-hl-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.fr-hl-phyto {
  font-size: 16px;
  line-height: 1.3;
}
.fr-hl-sub {
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.45;
  margin-top: 2px;
}

/* ═══════ Responsive ═══════ */
@media (max-width: 900px) {
  .fr-bienfait-grid { grid-template-columns: 1fr; }
  .fr-conseil-grid { grid-template-columns: 1fr; }
  .fr-plante-info { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .fr-highlight-bar { grid-template-columns: 1fr; gap: 20px; padding: 22px 24px; }
  .fr-ingred-table { font-size: 12.5px; }
  .fr-ingred-table thead th, .fr-ingred-table tbody td { padding-left: 8px; padding-right: 8px; }
}

/* ─────────────────────────────────────────────────────────────────
   B4.3 — SECTION AVIS RICHE (override productcomments)
   ───────────────────────────────────────────────────────────────── */

/* Le hook displayFooterProduct peut wrapper le tpl override dans un parent
   flex/grid (Classic theme, ou un autre module présent sur le hook). On force
   défensivement la section à occuper toute la largeur sur sa propre ligne. */
body#product .fr-reviews-section {
  display: block !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  grid-column: 1 / -1 !important;
  clear: both;
  float: none;
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 40px;
  font-family: inherit;
  box-sizing: border-box;
}

body#product .fr-reviews-header {
  margin-bottom: 24px;
}
body#product .fr-reviews-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-green-deep, #2A4A1E);
  margin-bottom: 8px;
}
body#product .fr-reviews-title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* ═══ Stats card (note moyenne + distribution) ═══ */
body#product .fr-reviews-stats {
  background: var(--fr-cream, #F6F2EA);
  border-radius: 16px;
  padding: 36px 44px;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 28px;
}
body#product .fr-reviews-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body#product .fr-reviews-avg {
  font-size: 64px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1;
  letter-spacing: -0.02em;
}
body#product .fr-reviews-stars-row {
  display: flex;
  gap: 2px;
  font-size: 18px;
  color: #C07C2A;
}
body#product .fr-rstar { color: #D6CFBE; }
body#product .fr-rstar.on { color: #C07C2A; }
body#product .fr-rstar.half {
  background: linear-gradient(90deg, #C07C2A 50%, #D6CFBE 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body#product .fr-reviews-total {
  font-size: 12.5px;
  color: var(--fr-text-mid, #7A6A4A);
}

body#product .fr-reviews-dist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#product .fr-dist-row {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--fr-text-mid, #7A6A4A);
}
body#product .fr-dist-label {
  font-weight: 600;
  color: var(--fr-text-mid, #7A6A4A);
}
body#product .fr-dist-track {
  height: 8px;
  border-radius: 4px;
  background: #EBE3D2;
  overflow: hidden;
}
body#product .fr-dist-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
body#product .fr-dist-fill-5 { background: #C07C2A; }
body#product .fr-dist-fill-4 { background: var(--fr-green-deep, #2A4A1E); }
body#product .fr-dist-fill-3,
body#product .fr-dist-fill-2,
body#product .fr-dist-fill-1 { background: #BFB7A4; }
body#product .fr-dist-count {
  text-align: right;
  font-weight: 500;
  color: var(--fr-text-mid, #4A4238);
}

/* ═══ Grille de cartes ═══ */
body#product .fr-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
/* Cache les cartes au-delà de 3 par défaut ; .fr-reviews-expanded les révèle */
body#product .fr-reviews-grid:not(.fr-reviews-expanded) > .fr-review-card:nth-child(n+4) {
  display: none;
}

body#product .fr-review-card {
  background: #fff;
  border: 1px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body#product .fr-review-stars {
  font-size: 13px;
  color: #C07C2A;
  letter-spacing: 1px;
  /* Le plugin grade-stars de PS génère du contenu dans cet élément.
     On garde la couleur orange et la taille adaptée au card. */
}
body#product .fr-review-stars .grade-star,
body#product .fr-review-stars > span { color: #D6CFBE; }
body#product .fr-review-stars .grade-on,
body#product .fr-review-stars > span.grade-on { color: #C07C2A; }

body#product .fr-review-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0;
  line-height: 1.3;
}
body#product .fr-review-body {
  font-size: 13px;
  font-style: italic;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
body#product .fr-review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--fr-border, #E4DDD0);
  padding-top: 14px;
  margin-top: 4px;
}
body#product .fr-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0;
}
/* L'initiale est posée par JS (MutationObserver dans product-comments-list.tpl),
   parce que productcomments.js ne supporte pas 2× @CUSTOMER_NAME@ dans le prototype
   (replace non-global). Le span est rempli avec une seule lettre directement. */
body#product .fr-review-avatar-text {
  font-size: 14px;
  line-height: 1;
}
body#product .fr-review-meta-text { display: flex; flex-direction: column; gap: 2px; }
body#product .fr-review-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
}
body#product .fr-review-sub {
  font-size: 11.5px;
  color: var(--fr-text-mid, #7A6A4A);
}
/* Cache les boutons utilité/abuse natifs (fonction conservée, hors design) */
body#product .fr-review-card .fr-review-buttons { display: none !important; }

/* ═══ Actions (Voir tous + Donnez votre avis) ═══ */
body#product .fr-reviews-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  align-items: stretch;
  justify-content: center;
}
body#product .fr-reviews-toggle {
  flex: 1 1 100%;
  background: #fff;
  border: 1px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
body#product .fr-reviews-toggle:hover {
  background: var(--fr-cream, #F6F2EA);
  border-color: var(--fr-green-deep, #2A4A1E);
}
body#product .fr-reviews-post {
  background: var(--fr-green-deep, #2A4A1E);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
}
body#product .fr-reviews-post:hover { background: #1f3815; }

/* ═══ Cache l'ancien header productcomments si présent + bouton "Read user reviews" doublon ═══ */
body#product .product-comments-additional-info,
body#product #product-comments-list-pagination,
body#product .product-comment-list-item.row .col-sm-3 { /* défensif si vieux markup persiste */
  /* nothing : on laisse la pagination si on l'utilise plus tard */
}

/* ═══ Responsive ═══ */
@media (max-width: 900px) {
  body#product .fr-reviews-stats { grid-template-columns: 1fr; gap: 30px; padding: 26px 22px; }
  body#product .fr-reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  body#product .fr-reviews-section { padding: 0 20px; margin-top: 40px; }
  body#product .fr-reviews-grid:not(.fr-reviews-expanded) > .fr-review-card:nth-child(n+3) {
    display: none;
  }
}

/* ───────── PRODUITS SIMILAIRES ───────── */
.fr-psimilar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 52px 40px 0;
}
.fr-psimilar-header { margin-bottom: 24px; }
.fr-psimilar-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-green-mid, #4E7C3A);
  margin-bottom: 8px;
}
.fr-psimilar-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: -0.4px;
  margin: 0;
  line-height: 1.2;
}
.fr-psimilar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Espace de respiration quand un produit n'a pas de "Produits similaires
   & complémentaires" — évite que le bouton "Donnez votre avis" colle au
   footer vert. */
.fr-product-no-accessories-spacer { height: 64px; }
@media (max-width: 900px) {
  .fr-product-no-accessories-spacer { height: 40px; }
}

/* ───────── Hide PS native zones we don't want ───────── */
.fr-product-page .scroll-box-arrows,
.fr-product-page .product-flags-list,
.fr-product-page .page-content > .product-flags { display: none !important; }
.fr-product-page .has-discount.product-price { color: inherit; }

/* Hide partage / share buttons (issue 9) */
.fr-product-page .social-sharing,
.fr-product-page .product-share,
.fr-product-page .ps_share_buttons,
.fr-product-page .ps_socialfollow,
.fr-product-page .share-buttons,
.fr-product-page #product-share,
.fr-product-page .product-additional-info,
.fr-product-page .js-product-additional-info { display: none !important; }

/* ───── Wishlist / Favoris désactivé sur TOUT le site ─────
   On supprime l'hook côté template (product-add-to-cart.tpl) et on masque
   visuellement tout ce que les modules wishlist (ps_wishlist, blockwishlist,
   ps_emailalerts wishlist) injectent ailleurs : miniatures produit, header,
   compte client, modals, etc. Le module reste installé en BO mais invisible. */
.wishlist,
.wishlist-add,
.wishlist-button,
.wishlist-button-product,
.wishlist-toolbar,
.btn-wishlist,
.product-wishlist,
.js-wishlist-button-add,
.js-wishlist-toolbar,
.js-wishlist-modal,
.ps-wishlist,
.ps_wishlist,
.fr-pwish,
[data-button-action="wishlist"],
[class*="wishlist"],
[id*="wishlist"],
a[href*="/wishlist"],
a[href*="module/blockwishlist"],
a[href*="module/ps_wishlist"],
a[href*="favoris"],
li.wishlist-list,
.wishlists-list { display: none !important; }
/* Aussi retirer du compte client (My account) */
#main .page-my-account a[href*="wishlist"],
.account-list a[href*="wishlist"] { display: none !important; }

/* Bouton panier — force le centrage flex + retire l'uppercase Bootstrap +
   neutralise le padding-top que PS Classic ajoute via `.add-to-cart`
   (`padding-top:.625rem` qui décalait verticalement le contenu). */
.fr-product-page .fr-pa2c-cta,
.fr-product-page button.fr-pa2c-cta,
.fr-product-page button.fr-pa2c-cta.add-to-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  gap: 8px !important;
  padding: 0 28px !important;
  height: 50px !important;
  line-height: 1 !important;
}
.fr-product-page .fr-pa2c-cta-label {
  text-align: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}
.fr-product-page .fr-pa2c-cta-icon {
  flex-shrink: 0 !important;
  display: block !important;
}

/* Quantité — masque les flèches natives ET les flèches de bootstrap-touchspin
   que PS attache automatiquement à #quantity_wanted via product.js. */
.fr-product-page input.fr-pqty-input,
.fr-product-page input.fr-pqty-input[type="number"],
.fr-product-page input#quantity_wanted {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.fr-product-page input.fr-pqty-input::-webkit-outer-spin-button,
.fr-product-page input.fr-pqty-input::-webkit-inner-spin-button,
.fr-product-page input[type="number"]::-webkit-outer-spin-button,
.fr-product-page input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
/* Bootstrap-touchspin — wrappers et boutons up/down injectés par JS */
.fr-product-page .bootstrap-touchspin .input-group-btn-vertical,
.fr-product-page .input-group-btn-vertical,
.fr-product-page .bootstrap-touchspin-up,
.fr-product-page .bootstrap-touchspin-down,
.fr-product-page span.bootstrap-touchspin > .input-group-btn,
.fr-product-page .qty .bootstrap-touchspin .input-group-btn { display: none !important; }
/* Au cas où touchspin a wrappé l'input dans un span : on neutralise le wrapper */
.fr-product-page .bootstrap-touchspin {
  display: contents !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Réduit l'espace entre la barre réassurance et le breadcrumb (issue 1).
   Sur les pages produit, le breadcrumb-wrap a parfois un padding-top
   qui crée un bandeau cream visible. */
/* ─ Fix v2 — body id="product" pas .product ─ */
/* ───── Espace breadcrumb / réassurance (shotgun) ─────
   Multiples sources possibles : padding du wrapper Bootstrap, hook
   displayWrapperTop d'un module, notifications PS vide, marges du
   .container. On les neutralise toutes sur la fiche produit. */
body#product .breadcrumb,
body#product .breadcrumb-wrap,
body#product nav.breadcrumb {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}
body#product #wrapper,
body#product #wrapper > .container,
body#product #content-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
body#product #wrapper > .container { padding-bottom: 0 !important; }
body#product main > section:first-child { padding-top: 0; margin-top: 0; }
body#product .fr-reass { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Notifications PS : on coupe net (vide ou pas, pas d'espace sur produit) */
body#product #notifications,
body#product .notifications-container { display: none !important; }
/* Hook displayWrapperTop : si un module rend du vide, on le neutralise */
body#product #wrapper > #notifications + *:empty,
body#product #wrapper > div:empty:not(.container) { display: none !important; }
/* La pseudo-bg cream du breadcrumb collait pile au-dessous de la réassurance,
   mais le ::before démarre top:0 par rapport au breadcrumb. Si gap restant
   vient d'un margin-top sur .container on l'a déjà neutralisé. */

/* ───── Scrollbar horizontale (shotgun) ─────
   On force overflow-x:clip à tous les niveaux + max-width 100% en garde-fou.
   `clip` n'établit pas de contexte de scroll → sticky du header OK. */
html, body { overflow-x: clip !important; max-width: 100% !important; }
main, #wrapper, footer#footer { overflow-x: clip !important; }
/* Aucun élément ne doit dépasser viewport hors décors contrôlés */
body#product .fr-product-page,
body#product .fr-product-zone,
body#product .fr-ptabs-section,
body#product .fr-psimilar { max-width: 100%; }

/* Rating empty state (0 avis) */
.fr-pstars-empty {
  color: rgba(192, 124, 42, 0.4);
  letter-spacing: 1px;
}

/* Prix v2 — layout 2 lignes mockup (issue 6) */
.fr-prices { margin: 0 0 22px; }
.fr-prices-main-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.fr-prices-main-row .product-price,
.fr-prices-main-row .fr-prices-current { margin: 0; padding: 0; display: inline-block; }
.fr-prices-main-row .current-price-value,
.fr-prices-main-row .current-price > span:first-child {
  font-size: 36px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  letter-spacing: -1px;
  line-height: 1;
}
.fr-prices-variant {
  font-size: 13px;
  color: var(--fr-text-mid, #7A6A4A);
  font-weight: 400;
}
.fr-prices-extra-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.fr-prices-was,
.fr-prices-extra-row .regular-price {
  font-size: 15px;
  color: #C0B09A;
  text-decoration: line-through;
  font-weight: 500;
}
.fr-prices-saving {
  background: #FDF6ED;
  color: #C07C2A;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fr-prices-unit,
.fr-prices-extra-row .product-unit-price {
  font-size: 12px;
  color: var(--fr-text-mid, #7A6A4A);
  font-weight: 400;
  margin: 0;
}
.fr-prices-tax-label,
.fr-prices-shipping {
  font-size: 11px;
  color: var(--fr-text-mid, #7A6A4A);
  margin: 6px 0 0;
}
.fr-prices-shipping:empty { display: none; }

/* ───────── Responsive ───────── */
@media (max-width: 900px) {
  .fr-product-zone {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 20px 0;
  }
  .fr-pinfo-title { font-size: 28px; }
  .fr-pinfo-pricezone .current-price-value,
  .fr-pinfo-pricezone .current-price > span:first-child { font-size: 30px; }
  .fr-ptabs-section { padding: 32px 20px 0; }
  .fr-ptabs-content { padding: 24px 20px; }
  .fr-psimilar { padding: 36px 20px 0; }
  .fr-psimilar-grid { grid-template-columns: repeat(2, 1fr); }
  .fr-pgallery-thumbs { gap: 8px; }
  .fr-pthumb { width: 60px; height: 60px; }
}
@media (max-width: 600px) {
  .fr-pinfo-title { font-size: 24px; }
  .fr-pa2c-row { gap: 8px; }
  .fr-pwish { width: 44px; height: 44px; }
  .fr-pqty { height: 44px; }
  .fr-pa2c-cta { height: 44px; font-size: 14px; padding: 0 18px; }
  /* C — 4 bullet points en 2×2 sur mobile (au lieu de 4 lignes verticales)
     → réduit la hauteur de cette section de moitié. align-items: flex-start
     + margin-top léger sur le dot pour que la première ligne de texte soit
     alignée entre les 2 items d'une rangée (sinon items wrappés à 2 lignes
     décalaient le texte des items à 1 ligne). */
  .fr-preass { grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; padding-top: 14px !important; }
  .fr-preass-item {
    font-size: 11.5px !important;
    align-items: flex-start !important;
    line-height: 1.35 !important;
  }
  .fr-preass-item .fr-preass-dot {
    margin-top: 5px !important;
  }
  .fr-psimilar-grid { grid-template-columns: 1fr; }
}

/* === Mobile fiche produit : Tabs → Accordion (≤768px) ===
   Sur mobile, le JS inline du product.tpl ajoute la classe .is-accordion-mode
   sur .fr-ptabs-section et déplace chaque panel juste après son bouton.
   Le CSS ci-dessous transforme l'apparence horizontale (tabs) en verticale
   (accordion). Tout fermé par défaut, multi-open au clic. */
@media (max-width: 900px) {
  .fr-ptabs-section.is-accordion-mode {
    padding: 24px 0 0 !important;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptabs-nav {
    display: block !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    border-bottom: 0 !important;
    gap: 0;
    margin: 0;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-btn {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    padding: 16px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fr-border, #E4DDD0) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--fr-white, #fff) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--fr-text-primary) !important;
    white-space: normal !important;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-btn::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--fr-green-deep, #2A4A1E);
    border-bottom: 1.5px solid var(--fr-green-deep, #2A4A1E);
    transform: rotate(45deg);
    transition: transform 0.28s ease;
    margin-right: 4px;
    margin-top: -3px;
    flex-shrink: 0;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-btn.active::after {
    transform: rotate(-135deg);
    margin-top: 3px;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-btn.active {
    color: var(--fr-green-deep, #2A4A1E) !important;
    border-bottom-color: var(--fr-green-deep, #2A4A1E) !important;
    background: var(--fr-cream, #F6F2EA) !important;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-panel {
    display: none;
    background: var(--fr-white, #fff);
    padding: 18px 20px 20px !important;
    border-bottom: 1px solid var(--fr-border, #E4DDD0) !important;
    margin: 0;
    border-radius: 0;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptab-panel.active {
    display: block;
  }
  /* La wrapper .fr-ptabs-content est vide quand les panels sont déplacés
     vers .fr-ptabs-nav → on cache son styling. */
  .fr-ptabs-section.is-accordion-mode .fr-ptabs-content {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .fr-ptabs-section.is-accordion-mode .fr-ptabs-content:empty {
    display: none;
  }
}

/* === Mobile fiche produit : compactage hauteur (owner request) === */
@media (max-width: 900px) {
  /* Empêche l'overflow horizontal de la fiche produit sur mobile —
     certains éléments (probablement une .row Bootstrap avec margin
     négatif ou un banner avec white-space:nowrap) débordent à droite.
     overflow-x: hidden sur html + body + zone produit pour clipper.
     ⚠️ overflow-x: hidden sur body crée un scroll container sur body
     (le scroll de la page se fait sur body, pas sur le viewport) →
     window.scrollY ne suit plus. Le JS setupMobileStickyHeader utilise
     un helper getScrollY() qui lit aussi document.body.scrollTop pour
     compenser. */
  html,
  body#product,
  body#product #wrapper,
  body#product #content-wrapper,
  body#product main,
  body#product .fr-product-zone,
  body#product .fr-pgallery,
  body#product .fr-pinfo {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  /* A — Cadre vert pâle autour de l'image (le "contenant" .fr-pgallery-main
     avec gradient bg + border-radius) : prenait ~450px de haut sur mobile
     en raison de aspect-ratio: 1/1. Cap à 280px de haut. L'image dedans
     remplit toute la surface (object-fit: cover + padding 0) au lieu de
     laisser des bandes de gradient visibles (object-fit: contain par défaut). */
  body#product .fr-pgallery-main {
    aspect-ratio: auto !important;
    height: 280px !important;
    max-height: 280px !important;
  }
  body#product .fr-pgallery-img,
  body#product .fr-pgallery-main img {
    object-fit: cover !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
  }
  /* B — Masque la reass bar (4 cards) sur la fiche produit mobile :
     doublon avec le topbar marquee (mêmes infos qui défilent en haut). */
  body#product .fr-reass {
    display: none !important;
  }
}

/* =============================================================
   B4.4 — STICKY ADD-TO-CART BAR
   Toujours visible en bas de la fiche produit (pleine largeur).
   Synchro prix + variante via MutationObserver sur .js-product-container
   (fire APRÈS que PS a fini son AJAX variante).
   ============================================================= */
.fr-sticky-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  /* Fond crème très transparent + flou prononcé : laisse percevoir le contenu
     derrière pour réduire au maximum l'effet de "vision restreinte". */
  background: rgba(246, 242, 234, 0.65);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgba(228, 221, 208, 0.5);
  box-shadow: 0 -6px 20px rgba(26, 46, 18, 0.05);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  visibility: hidden;
}
.fr-sticky-cart.fr-sticky-cart-visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  .fr-sticky-cart {
    background: rgba(246, 242, 234, 0.92);
  }
}
.fr-sticky-cart-inner {
  width: 100%;
  margin: 0;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Spacer DOM-flow à la hauteur exacte de la barre (~73px) + 12px de respiration.
   Le body padding-bottom ne s'applique pas correctement (override classic),
   donc on s'appuie uniquement sur le ::after qui force un vrai bloc dans le DOM. */
html body#product,
body#product {
  padding-bottom: 0 !important;
}
/* sticky bar bottom spacer */
body#product::after {
  content: '';
  display: block !important;
  width: 100%;
  height: 75px !important;
  clear: both;
}
.fr-sticky-cart-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.fr-sticky-cart-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--fr-cream, #F6F2EA);
  border: 1px solid var(--fr-border, #E4DDD0);
  display: block;
}
.fr-sticky-cart-thumb-empty {
  background-color: var(--fr-green-deep, #2A4A1E);
  border: 0;
}
.fr-sticky-cart-text { min-width: 0; }
.fr-sticky-cart-name {
  font-family: var(--fr-font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-sticky-cart-cat {
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-sticky-cart-buy {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.fr-sticky-cart-price {
  font-family: var(--fr-font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--fr-text-primary, #1A2E12);
  white-space: nowrap;
}
.fr-sticky-cart-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  border: 0;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  font-family: var(--fr-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.fr-sticky-cart-cta:hover {
  background: #1A2E12;
  transform: translateY(-1px);
}
.fr-sticky-cart-cta:active { transform: translateY(0); }
.fr-sticky-cart-cta svg { flex-shrink: 0; }

@media (max-width: 900px) {
  .fr-sticky-cart-inner { padding: 10px 14px; gap: 12px; }
  .fr-sticky-cart-thumb { width: 40px; height: 40px; }
  .fr-sticky-cart-name { font-size: 13px; }
  .fr-sticky-cart-cat { font-size: 11px; }
  .fr-sticky-cart-price { font-size: 16px; }
  .fr-sticky-cart-cta { height: 42px; padding: 0 18px; font-size: 13px; }
  .fr-sticky-cart-cta-label { display: none; }
  .fr-sticky-cart-buy { gap: 12px; }
  body#product { padding-bottom: 0 !important; }
  body#product::after { height: 55px !important; margin-bottom: 0; }
}
@media (max-width: 480px) {
  .fr-sticky-cart-cat { display: none; }
}

/* =============================================================
   B5 — PAGE PANIER (Pass 1 : layout + items + summary)
   ============================================================= */
/* Fond pleine largeur : on cible le body de la page panier (PS9 met
   id="cart" sur le body). Sans ça, le bg de .fr-cart-page ne couvre que
   la section, pas les marges du wrapper parent. */
body#cart {
  background: var(--fr-page-bg, #FAFAF5);
}
body#cart #wrapper,
body#cart .page-wrapper {
  background: transparent;
}
.fr-cart-page {
  background: transparent;
  padding: 32px 0 80px;
}

/* ── Tunnel steps (B5.3) — Panier · Livraison · Paiement · Confirmation ── */
.fr-tunnel-steps {
  margin: 0 0 28px;
  padding: 0 16px;
}
.fr-tunnel-steps-inner {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 760px;
}
.fr-tunnel-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.fr-tunnel-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--fr-border, #E4DDD0);
  color: var(--fr-text-muted, #7A6A4A);
  background: #FFFFFF;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.fr-tunnel-step-active .fr-tunnel-step-num {
  background: var(--fr-green-deep, #2A4A1E);
  border-color: var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
}
.fr-tunnel-step-done .fr-tunnel-step-num {
  background: var(--fr-green-mid, #4E7C3A);
  border-color: var(--fr-green-mid, #4E7C3A);
  color: #FFFFFF;
}
.fr-tunnel-step-num svg {
  display: block;
}
.fr-tunnel-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fr-text-muted, #7A6A4A);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.fr-tunnel-step-active .fr-tunnel-step-label {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
}
.fr-tunnel-step-done .fr-tunnel-step-label {
  color: var(--fr-green-mid, #4E7C3A);
}
.fr-tunnel-step-sep {
  flex: 1 1 auto;
  height: 2px;
  background: var(--fr-border, #E4DDD0);
  margin: 0 14px;
  list-style: none;
  min-width: 24px;
  border-radius: 1px;
  transition: background-color 0.3s;
}
.fr-tunnel-step-sep-done {
  background: var(--fr-green-mid, #4E7C3A);
}
@media (max-width: 600px) {
  .fr-tunnel-steps { margin-bottom: 20px; padding: 0 8px; }
  .fr-tunnel-step { gap: 7px; }
  .fr-tunnel-step-num { width: 26px; height: 26px; font-size: 11px; }
  .fr-tunnel-step-label { font-size: 12px; }
  .fr-tunnel-step-sep { margin: 0 6px; min-width: 10px; }
  /* Compactage mobile : on cache les labels des steps non-actifs (juste
     la pastille num/check) pour libérer la largeur. Seul le step actif
     garde son label visible (auto-récupéré via aria-current). */
  .fr-tunnel-step:not(.fr-tunnel-step-active) .fr-tunnel-step-label {
    display: none;
  }
}

/* Désactivation défensive des flèches que TouchSpin (PS Classic) ou
   le navigateur pourraient quand même injecter sur l'input qty cart. */
.fr-ci-qty .bootstrap-touchspin .input-group-btn-vertical,
.fr-ci-qty .bootstrap-touchspin-up,
.fr-ci-qty .bootstrap-touchspin-down,
.fr-ci-qty .bootstrap-touchspin .input-group-btn {
  display: none !important;
}
.fr-ci-qty .bootstrap-touchspin {
  display: contents !important;
}
.fr-ci-qty-input::-webkit-outer-spin-button,
.fr-ci-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.fr-ci-qty-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
.fr-cart-zone {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

/* ── LEFT: cart main ── */
.fr-cart-main { min-width: 0; }
.fr-cart-card {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 16px;
  padding: 24px 28px 8px;
  margin-bottom: 18px;
}
.fr-cart-title {
  font-family: var(--fr-font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: -0.3px;
  margin: 0 0 18px;
  line-height: 1.2;
}
.fr-cart-count {
  font-size: 14px;
  font-weight: 400;
  color: var(--fr-text-muted, #7A6A4A);
  margin-left: 6px;
}
.fr-cart-continue {
  display: inline-block;
  font-size: 13px;
  color: var(--fr-text-muted, #7A6A4A);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.15s;
}
.fr-cart-continue:hover {
  color: var(--fr-green-deep, #2A4A1E);
}

/* ── Progress bar "Livraison offerte dès 55 €" ── */
.fr-shipprogress {
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 0 0 18px;
  transition: background-color 0.3s, border-color 0.3s;
}
.fr-shipprogress.fr-shipprogress-on {
  background: var(--fr-green-light, #EAF2E3);
  border-color: var(--fr-green-pale, #D4E8C2);
}
.fr-shipprogress-text {
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.fr-shipprogress-text strong {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
}
.fr-shipprogress.fr-shipprogress-on .fr-shipprogress-text {
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-shipprogress-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.fr-shipprogress-bar {
  background: rgba(122, 106, 74, 0.12);
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}
.fr-shipprogress.fr-shipprogress-on .fr-shipprogress-bar {
  background: rgba(42, 74, 30, 0.12);
}
.fr-shipprogress-fill {
  background: linear-gradient(90deg, var(--fr-green-mid, #4E7C3A), var(--fr-green-deep, #2A4A1E));
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Bloc incentive 3+1 (offre 3 achetés = 4ᵉ offert) ── */
.fr-offerblock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.fr-offerblock.fr-offerblock-on {
  background: var(--fr-green-light, #EAF2E3);
  border-color: var(--fr-green-pale, #D4E8C2);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-offerblock-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}
.fr-offerblock-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
}
.fr-offerblock-line strong {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
}

/* ── Cart overview (liste items) ── */
.fr-cart-overview { padding-bottom: 16px; }
.fr-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fr-cart-item {
  list-style: none;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  padding-top: 14px;
}
.fr-cart-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ── Item card layout ── */
.fr-ci-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
}
.fr-ci-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fr-cream, #F6F2EA);
  flex-shrink: 0;
  display: block;
  border: 0.5px solid var(--fr-border, #E4DDD0);
}
.fr-ci-thumb picture,
.fr-ci-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.fr-ci-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fr-ci-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-green-mid, #4E7C3A);
}
.fr-ci-name {
  font-family: var(--fr-font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--fr-text-primary, #1A2E12);
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.15s;
}
.fr-ci-name:hover {
  color: var(--fr-green-deep, #2A4A1E);
  text-decoration: none;
}
.fr-ci-attrs {
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
  margin-top: 2px;
}
.fr-ci-attr-label { font-weight: 400; }
.fr-ci-attr-value { font-weight: 600; color: var(--fr-text-mid, #4A4238); }
.fr-ci-attr-sep { color: var(--fr-text-dim, #B0A896); }
.fr-ci-unit-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-green-deep, #2A4A1E);
  margin-top: 4px;
}
.fr-ci-unit-price-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--fr-text-muted, #7A6A4A);
  margin-left: 4px;
}
.fr-ci-unit {
  font-size: 11px;
  color: var(--fr-text-dim, #B0A896);
  margin-top: 2px;
}
.fr-ci-gift-badge {
  display: inline-block;
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  margin-top: 4px;
  width: fit-content;
}

/* ── Actions right ── */
.fr-ci-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.fr-ci-price-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-ci-price-old {
  font-size: 11px;
  color: #C0B09A;
  text-decoration: line-through;
}
.fr-ci-price {
  font-family: var(--fr-font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--fr-green-deep, #2A4A1E);
  white-space: nowrap;
}
.fr-ci-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 9px;
  overflow: hidden;
  background: var(--fr-white, #fff);
}
.fr-ci-qty-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--fr-cream, #F6F2EA);
  font-weight: 600;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
}
.fr-ci-qty-btn {
  width: 30px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--fr-text-mid, #4A4238);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
  font-family: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.fr-ci-qty-btn:focus,
.fr-ci-qty-btn:active {
  outline: none;
  box-shadow: none;
}
.fr-ci-qty-btn:focus-visible {
  outline: 2px solid var(--fr-green-mid, #4E7C3A);
  outline-offset: -2px;
  border-radius: 4px;
}
.fr-ci-qty-btn:hover {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-ci-qty-input {
  width: 40px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--fr-border, #E4DDD0);
  border-right: 1px solid var(--fr-border, #E4DDD0);
  text-align: center;
  font-family: var(--fr-font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--fr-text-primary, #1A2E12);
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.fr-ci-qty-input::-webkit-outer-spin-button,
.fr-ci-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fr-ci-remove {
  font-size: 11px;
  color: var(--fr-text-muted, #7A6A4A);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--fr-font-sans);
  transition: color 0.15s;
}
.fr-ci-remove:hover {
  color: var(--fr-danger, #B54536);
  text-decoration: underline;
}

/* ── Empty cart state (refined in Pass 3) ── */
.fr-cart-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--fr-text-muted, #7A6A4A);
}
.fr-cart-empty p {
  margin-bottom: 18px;
  font-size: 14px;
}

/* ── RIGHT: summary card ── */
.fr-cart-side { min-width: 0; }
.fr-cart-summary {
  background: var(--fr-white, #fff);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 16px;
  padding: 22px;
  position: sticky;
  top: 184px; /* header(144) + safety */
}
.fr-csum-title {
  font-family: var(--fr-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
  text-transform: uppercase;
}
/* Header "X articles" sans valeur, au-dessus des lignes du récap */
.fr-csum-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fr-text-muted, #7A6A4A);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.fr-csum-lines { display: flex; flex-direction: column; gap: 0; }
.fr-csum-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
  padding: 9px 0;
}
.fr-csum-line .fr-csum-l {
  color: var(--fr-text-muted, #7A6A4A);
  flex: 0 1 auto;
}
.fr-csum-line .fr-csum-v {
  color: var(--fr-text-primary, #1A2E12);
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  margin-left: auto;
}
.fr-csum-line.fr-csum-discount .fr-csum-v {
  color: var(--fr-green-mid, #4E7C3A);
  font-weight: 600;
}
/* Séparateur en haut de certaines lignes */
.fr-csum-line.fr-csum-line-sep {
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  margin-top: 4px;
  padding-top: 12px;
}
.fr-csum-sub {
  font-size: 11px;
  color: var(--fr-text-dim, #B0A896);
  margin-top: 2px;
  width: 100%;
}

/* Bloc info livraison offerte retiré — réintroduit en Pass 2 sous forme
   de progress bar. */

/* Cart summary totals (Total ligne) */
.fr-cart-summary .cart-summary-totals {
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  padding-top: 12px;
  margin-top: 14px;
}
.fr-cart-summary .cart-summary-totals .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--fr-text-muted, #7A6A4A);
  gap: 12px;
}
.fr-cart-summary .cart-summary-totals .cart-summary-line .label {
  color: inherit;
  flex: 0 1 auto;
}
.fr-cart-summary .cart-summary-totals .cart-summary-line .value {
  color: inherit;
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
}
.fr-cart-summary .cart-summary-totals .cart-summary-line.cart-total {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}
.fr-cart-summary .cart-summary-totals .cart-summary-line.cart-total .value {
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 20px;
}

/* Hook displayShoppingCart : on n'expose pas le contenu PS natif dans
   le summary (placeholders en anglais via ps_customeradvisor). */
.fr-cart-summary > .ps-shoppingcart,
.fr-cart-summary > .block_customer_reassurance,
.fr-cart-summary > .block-reassurance,
.fr-cart-summary > .reassurance,
.fr-cart-summary [class*="customeradvisor"] {
  display: none;
}

/* ── Mini-liste produits dans le summary ── */
.fr-csum-items {
  list-style: none;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Sur la page panier mobile, le résumé descend sous les items (layout 1 col
   à partir de 980px). La mini-liste produits du résumé devient donc
   redondante avec la liste d'items juste au-dessus → on la masque pour
   gagner ~200px de scroll inutile.
   Sur le tunnel checkout (body#checkout), la mini-liste reste visible car
   elle est le seul aperçu détaillé des produits commandés. */
@media (max-width: 980px) {
  body#cart .fr-csum-items {
    display: none;
  }
}
.fr-csum-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}
.fr-csum-item-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  flex-shrink: 0;
}
.fr-csum-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-csum-item-info {
  min-width: 0;
}
.fr-csum-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-csum-item-meta {
  font-size: 11px;
  color: var(--fr-text-muted, #7A6A4A);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-csum-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  white-space: nowrap;
}

/* ── Voucher block Forêt Profonde ── */
.fr-cart-voucher {
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  padding-top: 14px;
  margin-top: 14px;
}
.fr-vch-applied {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fr-vch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fr-green-light, #EAF2E3);
  border: 0.5px solid var(--fr-green-pale, #D4E8C2);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
}
.fr-vch-icon { flex-shrink: 0; font-size: 13px; }
.fr-vch-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fr-vch-name {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-vch-amount {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
  flex-shrink: 0;
}
.fr-vch-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 46, 18, 0.08);
  color: var(--fr-text-muted, #7A6A4A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s;
}
.fr-vch-remove:hover {
  background: var(--fr-danger, #B54536);
  color: #fff;
  text-decoration: none;
}
.fr-vch-toggle {
  font-size: 12px;
}
.fr-vch-toggle-summary {
  cursor: pointer;
  color: var(--fr-green-mid, #4E7C3A);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
  padding: 4px 0;
  outline: none;
}
.fr-vch-toggle-summary::-webkit-details-marker { display: none; }
.fr-vch-toggle-summary:hover { color: var(--fr-green-deep, #2A4A1E); }

/* ───── G — Toggle voucher plus visible sur mobile (page panier uniquement) ─────
   Restyle en pill discret outlined vert mid : auto-width centré, icône 🎟️
   à gauche et chevron à droite (rotation 180° quand ouvert). Scope strict :
   body#cart + mobile, le rendu PC est inchangé. */
@media (max-width: 900px) {
  body#cart .fr-vch-toggle { text-align: center; }
  body#cart .fr-vch-toggle-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    margin: 4px 0 0;
    border: 1px solid var(--fr-green-mid, #4E7C3A);
    border-radius: 999px;
    background: transparent;
    color: var(--fr-green-deep, #2A4A1E);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  }
  body#cart .fr-vch-toggle-summary::before {
    content: '🎟️';
    font-size: 12px;
    line-height: 1;
  }
  body#cart .fr-vch-toggle-summary::after {
    content: '▾';
    font-size: 10px;
    line-height: 1;
    transition: transform 0.22s ease;
  }
  body#cart .fr-vch-toggle[open] .fr-vch-toggle-summary::after {
    transform: rotate(180deg);
  }
  body#cart .fr-vch-toggle-summary:hover,
  body#cart .fr-vch-toggle-summary:focus {
    background: var(--fr-green-light, #EAF2E3);
    border-color: var(--fr-green-deep, #2A4A1E);
    color: var(--fr-green-deep, #2A4A1E);
    text-decoration: none;
  }
}
.fr-vch-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fr-vch-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 9px;
  font-family: var(--fr-font-sans);
  font-size: 13px;
  color: var(--fr-text-primary, #1A2E12);
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s;
}
.fr-vch-input::placeholder {
  color: #C0B09A;
  text-transform: none;
}
.fr-vch-input:focus { border-color: var(--fr-green-deep, #2A4A1E); }
.fr-vch-submit {
  padding: 9px 18px;
  background: var(--fr-cream, #F6F2EA);
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 9px;
  font-family: var(--fr-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text-mid, #4A4238);
  cursor: pointer;
  transition: all 0.2s;
}
.fr-vch-submit:hover {
  background: var(--fr-green-light, #EAF2E3);
  border-color: var(--fr-green-mid, #4E7C3A);
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-vch-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: #FDECEA;
  border: 0.5px solid #F5C2BC;
  border-radius: 8px;
  color: var(--fr-danger, #B54536);
  font-size: 12px;
}

/* ── Réassurance dots (sous le CTA Commander) ── */
.fr-cart-reass {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fr-cart-reass-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
}
.fr-cart-reass-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-green-mid, #4E7C3A);
  flex-shrink: 0;
}

/* CTA Passer à la livraison */
.fr-cart-actions { margin-top: 18px; }
.fr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 24px;
  background: var(--fr-green-deep, #2A4A1E);
  color: var(--fr-cream, #F6F2EA);
  border: 0;
  border-radius: 11px;
  font-family: var(--fr-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.fr-btn-primary:hover {
  background: var(--fr-text-primary, #1A2E12);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--fr-cream, #F6F2EA);
}
.fr-btn-checkout::after { content: ""; }
.fr-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.fr-cart-warn {
  background: var(--fr-amber-light, #FDF6ED);
  border: 0.5px solid #EDD5AA;
  color: var(--fr-amber-dark, #A0641E);
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* ── Bandeau "Retiré du panier · Annuler" — in-place dans la liste ──
   Le bandeau remplace le contenu de la <li> du produit supprimé,
   à l'emplacement exact où était la ligne. Visuellement plus clair
   que le banner fixe au-dessus de la page. */
.fr-cart-item.fr-cart-item-removed {
  border-top-color: var(--fr-border, #E4DDD0);
  padding-top: 14px;
}
.fr-cart-item.fr-cart-item-removed:first-child {
  padding-top: 0;
  border-top: 0;
}
.fr-removed-notice {
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  animation: frRemovedFadeIn 0.25s ease;
}
@keyframes frRemovedFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fr-removed-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.fr-removed-text {
  flex: 1;
  line-height: 1.4;
}
.fr-removed-text strong {
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
}
.fr-removed-undo {
  background: var(--fr-green-light, #EAF2E3);
  border: 0.5px solid var(--fr-green-pale, #D4E8C2);
  color: var(--fr-green-deep, #2A4A1E);
  padding: 8px 18px;
  border-radius: 8px;
  font-family: var(--fr-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.fr-removed-undo:hover {
  background: var(--fr-green-pale, #D4E8C2);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .fr-cart-zone {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .fr-cart-summary {
    position: static;
    top: auto;
  }
}
@media (max-width: 640px) {
  .fr-cart-page { padding: 18px 0 60px; }
  .fr-cart-zone { padding: 0 14px; }
  .fr-cart-card { padding: 18px 18px 4px; }
  .fr-cart-title { font-size: 18px; }
  .fr-ci-row {
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
  }
  .fr-ci-thumb { width: 64px; height: 64px; }
  .fr-ci-name { font-size: 13px; }
  .fr-ci-price { font-size: 15px; }
  .fr-ci-qty-btn { width: 26px; height: 28px; font-size: 14px; }
  .fr-ci-qty-input { width: 34px; height: 28px; font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   STICKY CTA BOTTOM BAR — panier mobile (H)
   Visible en permanence en bas du viewport pour éviter au client de
   scroller jusqu'au résumé pour valider. Désactivée sur desktop
   (display: none ≥ 769px) car le CTA "Commander" du résumé reste sticky
   dans la sidebar droite. */
.fr-cart-sticky-bar {
  display: none;
}
@media (max-width: 900px) {
  body#cart {
    /* Compense la hauteur du sticky bar pour ne pas masquer le contenu
       en bas (réassurance + carousel best-sellers). 74px = hauteur barre
       (12px padding × 2 + bouton 46px + buffer 4px). */
    padding-bottom: 74px;
  }
  .fr-cart-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-top: 0.5px solid var(--fr-border, #E4DDD0);
    box-shadow: 0 -4px 16px rgba(42, 74, 30, 0.08);
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease,
                visibility 0s linear 0s;
  }
  /* Auto-hide quand le CTA "Commander" natif du résumé est dans le
     viewport (IntersectionObserver pose .is-hidden-by-cta). */
  .fr-cart-sticky-bar.is-hidden-by-cta {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease,
                visibility 0s linear 0.28s;
    pointer-events: none;
  }
  .fr-cart-sticky-total {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex: 0 0 auto;
  }
  .fr-cart-sticky-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-text-muted, #7A6A4A);
    margin-bottom: 3px;
  }
  .fr-cart-sticky-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--fr-green-deep, #2A4A1E);
    letter-spacing: -0.01em;
  }
  .fr-cart-sticky-cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--fr-green-deep, #2A4A1E);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background-color 0.2s, transform 0.1s;
  }
  .fr-cart-sticky-cta:hover,
  .fr-cart-sticky-cta:focus {
    background: var(--fr-green-mid, #4E7C3A);
    color: #FFFFFF;
    text-decoration: none;
  }
  .fr-cart-sticky-cta:active {
    transform: scale(0.98);
  }
}

/* ── B5.9 — Carousel best-sellers (full-width sous le panier) ── */
.fr-cart-bestsellers {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--fr-cream, #F6F2EA);
  padding: 56px 0 64px;
  margin-top: 48px;
}
.fr-cart-bestsellers-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.fr-cart-bestsellers-title {
  font-family: var(--fr-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.fr-cart-best-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 46, 18, 0.25) rgba(26, 46, 18, 0.05);
}
.fr-cart-best-carousel::-webkit-scrollbar { height: 6px; }
.fr-cart-best-carousel::-webkit-scrollbar-track {
  background: rgba(26, 46, 18, 0.05);
  border-radius: 3px;
}
.fr-cart-best-carousel::-webkit-scrollbar-thumb {
  background: rgba(26, 46, 18, 0.25);
  border-radius: 3px;
}
.fr-cart-best-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.fr-cart-best-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 46, 18, 0.08);
  border-color: var(--fr-green-pale, #D4E8C2);
}
.fr-cart-best-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.fr-cart-best-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fr-page-bg, #FBF7F0);
  display: grid;
  place-items: center;
}
.fr-cart-best-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-cart-best-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fr-cart-best-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  margin-top: auto;
}
.fr-cart-best-form {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fr-cart-best-decl {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--fr-text-primary, #1A2E12);
  background: #FFFFFF;
  border: 1px solid var(--fr-border, #E4DDD0);
  border-radius: 9px;
  padding: 8px 30px 8px 11px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%232A4A1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fr-cart-best-decl:hover {
  border-color: var(--fr-green-pale, #D4E8C2);
}
.fr-cart-best-decl:focus {
  outline: none;
  border-color: var(--fr-green-mid, #4E7C3A);
  box-shadow: 0 0 0 2px rgba(78, 124, 58, 0.15);
}
.fr-cart-best-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  background: var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
.fr-cart-best-btn:hover {
  background: var(--fr-green-mid, #4E7C3A);
}
.fr-cart-best-btn:active {
  transform: translateY(1px);
}
.fr-cart-best-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.fr-cart-best-btn span[aria-hidden] {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 640px) {
  .fr-cart-bestsellers { padding: 36px 0 42px; margin-top: 32px; }
  .fr-cart-bestsellers-inner { padding: 0 14px; }
  .fr-cart-bestsellers-title { font-size: 19px; margin-bottom: 20px; }
  .fr-cart-best-card { flex-basis: 170px; padding: 10px; gap: 8px; }
  .fr-cart-best-name { font-size: 13px; }
  .fr-cart-best-price { font-size: 14px; }
}

/* =============================================================
   B6 — TUNNEL CHECKOUT (Pass 1 : squelette + steps + header/footer)
   ============================================================= */

/* ── Mini-header tunnel (logo + paiement sécurisé) ── */
.fr-checkout-header {
  background: #FFFFFF;
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
  padding: 16px 0;
}
.fr-checkout-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fr-checkout-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.fr-checkout-logo svg,
.fr-checkout-logo img {
  display: block;
  max-height: 48px;
  width: auto;
}
.fr-checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-green-mid, #4E7C3A);
  letter-spacing: 0.01em;
}

/* ── Page checkout : fond cream pleine largeur (comme la page panier) ── */
body#checkout {
  background: var(--fr-page-bg, #FAFAF5);
}
body#checkout #wrapper,
body#checkout .page-wrapper {
  background: transparent;
}
.fr-checkout-page {
  background: transparent;
  padding: 32px 0 80px;
}
.fr-checkout-zone {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
}
.fr-checkout-main { min-width: 0; }
.fr-checkout-side {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* Adapte la carte récap droite au style Forêt Profonde, en attendant
   la Pass 3 qui réécrira cart-summary.tpl complet. */
.fr-checkout-side .cart-summary,
.fr-checkout-side .card,
.fr-checkout-side .card-block {
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(26, 46, 18, 0.04);
  padding: 22px 22px 18px;
  margin-bottom: 18px;
}
.fr-checkout-side .card .card-block {
  padding: 0;
  border: none;
  box-shadow: none;
  margin: 0;
}

/* ── Panels d'accordion PS (style minimal Pass 1, refait en Pass 2) ── */
.fr-checkout-main .checkout-step,
.fr-checkout-main .js-checkout-step {
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(26, 46, 18, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fr-checkout-main .checkout-step.-current,
.fr-checkout-main .checkout-step.-current.-reachable {
  border-color: var(--fr-green-pale, #D4E8C2);
}
.fr-checkout-main .checkout-step .step-title,
.fr-checkout-main .checkout-step h2 {
  font-family: var(--fr-font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.fr-checkout-main .checkout-step.-current .step-title,
.fr-checkout-main .checkout-step.-current h2 {
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-checkout-main .checkout-step .content {
  margin-top: 16px;
}
/* Bouton "modifier" sur step-title : poussé tout à droite via margin-left:auto
   en flex. !important parce que PS Classic théme.css pose
   `body#checkout section.checkout-step.-reachable.-complete h1 .step-edit
   { float: none; margin-left: 1.25rem }` avec une spécificité supérieure. */
.fr-checkout-main .checkout-step .step-edit {
  font-size: 13px;
  color: var(--fr-green-mid, #4E7C3A);
  text-decoration: none;
  font-weight: 500;
  margin-left: auto !important;
  float: none !important;
}
.fr-checkout-main .checkout-step .step-edit:hover {
  text-decoration: underline;
}
.fr-checkout-main .checkout-step .step-number {
  display: none; /* PS9 ajoute parfois un n° qu'on cache car notre frise gère ça */
}

/* Boutons "Continuer" PS9 (.continue, .btn-primary inside checkout-step)
   Spécificité maximale + !important pour neutraliser :
    - `.btn-primary` Bootstrap (display:inline-block, padding asymétrique)
    - `text-transform: uppercase` du theme classic (padding-right "trailing"
      qu'on compense en supprimant le letter-spacing). */
body#checkout .fr-checkout-main .checkout-step .continue,
body#checkout .fr-checkout-main .checkout-step button[name="confirm-addresses"],
body#checkout .fr-checkout-main .checkout-step button[name="confirmDeliveryOption"],
body#checkout .fr-checkout-main .checkout-step button.btn-primary[type="submit"] {
  background: var(--fr-green-deep, #2A4A1E) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  min-width: 170px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body#checkout .fr-checkout-main .checkout-step .continue:hover,
body#checkout .fr-checkout-main .checkout-step button[name="confirm-addresses"]:hover,
body#checkout .fr-checkout-main .checkout-step button[name="confirmDeliveryOption"]:hover,
body#checkout .fr-checkout-main .checkout-step button.btn-primary[type="submit"]:hover {
  background: var(--fr-green-mid, #4E7C3A) !important;
}

/* ───── Tunnel checkout MOBILE — overrides mobile only ─────
   B — CTA "Continuer" full-width sur mobile (au lieu de inline-flex
       avec min-width 170 calé à droite via float-xs-right Bootstrap).
   A — Bouton "MONTRER/MASQUER" password restylé en pill discret
       cohérent Forêt Profonde (transparent + uppercase 11px gris,
       hover cream + vert deep). Le PC reste avec le style PS Classic
       par défaut (gris foncé) jusqu'à validation explicite.
   D — Toggle "Lire plus" sur les `<p>` longs après les `.custom-checkbox`
       (RGPD + newsletter, jusqu'à 8 lignes). Masque le texte par défaut
       sur mobile et l'expand via classe `.is-readmore-open` sur le
       `.form-group` parent (JS inline dans personal-information.tpl). */
@media (max-width: 900px) {
  /* B — Continue button full-width */
  body#checkout .fr-checkout-main .checkout-step .continue,
  body#checkout .fr-checkout-main .checkout-step button[name="confirm-addresses"],
  body#checkout .fr-checkout-main .checkout-step button[name="confirmDeliveryOption"],
  body#checkout .fr-checkout-main .checkout-step button.btn-primary[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  /* Wrapper du bouton (PS9 utilise .clearfix + .form-footer parfois) */
  body#checkout .fr-checkout-main .checkout-step .clearfix,
  body#checkout .fr-checkout-main .checkout-step .form-footer {
    display: block;
  }

  /* A — Show/hide password button restyling */
  body#checkout .form-group .input-group {
    position: relative;
  }
  body#checkout .form-group .input-group-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    z-index: 2;
  }
  body#checkout .form-group .input-group-btn .btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--fr-text-muted, #7A6A4A) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    cursor: pointer;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  body#checkout .form-group .input-group-btn .btn:hover,
  body#checkout .form-group .input-group-btn .btn:focus {
    background: var(--fr-cream, #F6F2EA) !important;
    color: var(--fr-green-deep, #2A4A1E) !important;
  }
  /* Padding right additionnel pour ne pas que le texte du password
     passe sous le bouton "MONTRER" */
  body#checkout .form-group .input-group input[type="password"],
  body#checkout .form-group .input-group input[type="text"] {
    padding-right: 78px !important;
  }

  /* D — Texte long explicatif après une checkbox (RGPD, newsletter) masqué
     par défaut. Le JS (personal-information.tpl) injecte un bouton "Lire
     plus ▾" après la .custom-checkbox, qui toggle .is-readmore-open sur
     le .form-group parent. */
  /* Compactage des espaces verticaux entre les checkboxes RGPD/newsletter
     sur mobile (~24px par défaut → 10px). La classe .fr-cb-group est posée
     par le JS (personal-information.tpl).
     Sources d'espace neutralisées :
       - margin-bottom 1rem Bootstrap sur .form-group
       - <label.col-md-3.form-control-label> vide à gauche (sert à
         l'offset desktop uniquement, masqué en mobile pour gagner sa
         hauteur native + margin-bottom)
     On NE TOUCHE PAS aux paddings horizontaux des .col-* car ils gèrent
     le placement de l'icône custom-checkbox à gauche. */
  body#checkout .form-group.fr-cb-group {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  body#checkout .form-group.fr-cb-group > label.form-control-label,
  body#checkout .form-group.fr-cb-group > label.col-md-3 {
    display: none !important;
    margin: 0 !important;
  }
  /* div.col-md-3.form-control-comment à droite : vide mais a padding 8px
     top → 8px de gap fantôme en mobile (passe en full-width). Masqué. */
  body#checkout .form-group.fr-cb-group > .form-control-comment {
    display: none !important;
  }
  body#checkout .form-group.fr-cb-group > .col-md-6,
  body#checkout .form-group.fr-cb-group > .col-md-9,
  body#checkout .form-group.fr-cb-group > .js-input-column {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body#checkout .form-group.fr-cb-group .custom-checkbox {
    margin: 0 !important;
  }
  /* Le <br> dans le <label> de .custom-checkbox crée un saut de ligne
     fantôme même quand l'<em> qui suit est masqué → ~25px d'espace
     vertical inutile. On le neutralise tant que le texte long n'est
     pas développé. */
  body#checkout .form-group.fr-cb-group:not(.is-readmore-open) .custom-checkbox br {
    display: none;
  }
  /* Réduit l'écart entre le bouton "Lire plus" et la checkbox suivante */
  body#checkout .fr-readmore-toggle {
    margin: 2px 0 0 !important;
  }
  body#checkout .form-group .fr-checkbox-longtext {
    display: none;
  }
  body#checkout .form-group.is-readmore-open .fr-checkbox-longtext {
    display: block;
    margin-top: 6px;
  }
  body#checkout .fr-readmore-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 6px 0 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--fr-green-deep, #2A4A1E);
    cursor: pointer;
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  body#checkout .fr-readmore-toggle:hover,
  body#checkout .fr-readmore-toggle:focus {
    color: var(--fr-green-mid, #4E7C3A);
  }
  body#checkout .fr-readmore-chevron {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    transition: transform 0.22s ease;
  }
  body#checkout .fr-readmore-toggle.is-open .fr-readmore-chevron {
    transform: rotate(180deg);
  }

  /* E — Sticky CTA tunnel checkout (mobile only)
     Pattern identique au cart sticky bar : fixed bottom + frosted glass
     blanc + bouton plein largeur. État `data-state="disabled"` (form
     incomplet) → fond gris pâle + cursor not-allowed + non-cliquable.
     Auto-hide via classe `.is-hidden-by-cta` quand le bouton natif est
     visible (slide-down + fade). */
  body#checkout {
    padding-bottom: 74px;
  }
  body#checkout .fr-checkout-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-top: 0.5px solid var(--fr-border, #E4DDD0);
    box-shadow: 0 -4px 16px rgba(42, 74, 30, 0.08);
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease,
                visibility 0s linear 0s;
  }
  body#checkout .fr-checkout-sticky-bar.is-hidden-by-cta {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.22s ease,
                visibility 0s linear 0.28s;
    pointer-events: none;
  }
  body#checkout .fr-checkout-sticky-cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--fr-green-deep, #2A4A1E);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
  }
  body#checkout .fr-checkout-sticky-cta:hover,
  body#checkout .fr-checkout-sticky-cta:focus {
    background: var(--fr-green-mid, #4E7C3A);
    color: #FFFFFF;
  }
  body#checkout .fr-checkout-sticky-cta:active {
    transform: scale(0.98);
  }
  body#checkout .fr-checkout-sticky-bar[data-state="disabled"] .fr-checkout-sticky-cta {
    background: var(--fr-text-dim, #C0B09A) !important;
    color: var(--fr-cream, #F6F2EA) !important;
    cursor: not-allowed;
    opacity: 0.85;
    pointer-events: none;
  }
  body#checkout .fr-checkout-sticky-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
  }

  /* Fix alignement vertical du titre de step + pastille n° sur mobile —
     PS Classic theme.css peut imposer align-items: flex-start avec une
     spécificité élevée (`body#checkout section.checkout-step .step-title`).
     On force center + reset des marges parasites sur .step-number. */
  body#checkout .fr-checkout-main .checkout-step .step-title,
  body#checkout .fr-checkout-main .checkout-step h1.step-title,
  body#checkout .fr-checkout-main .checkout-step h2.step-title {
    align-items: center !important;
    line-height: 1.25 !important;
  }
  body#checkout .fr-checkout-main .checkout-step .step-number {
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  /* Icône `done` (✓) PS Classic : masquée tant que le step n'est pas
     complet (sinon elle occupe une hauteur invisible qui décale tout). */
  body#checkout .fr-checkout-main .checkout-step:not(.-complete) .step-title .material-icons.done,
  body#checkout .fr-checkout-main .checkout-step:not(.-complete) .step-title i.material-icons.rtl-no-flip {
    display: none !important;
  }

  /* F — Onglets "Commander en tant qu'invité" / "Connexion" stylés en pills
     Forêt Profonde sur mobile (au lieu de 2 textes + séparateur "|").
     Pill actif : vert deep + texte cream. Pill inactif : outlined gris,
     hover → border vert mid + texte vert deep. */
  body#checkout .nav.nav-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 16px !important;
    width: 100%;
  }
  body#checkout .nav.nav-inline > .nav-item {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
  }
  /* Séparateur "|" masqué sur mobile (les pills ont leur propre espacement) */
  body#checkout .nav.nav-inline .nav-separator {
    display: none !important;
  }
  body#checkout .nav.nav-inline > .nav-item:has(.nav-separator) {
    display: none !important;
    flex: 0 !important;
  }
  body#checkout .nav.nav-inline .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--fr-border, #E4DDD0) !important;
    background: transparent !important;
    color: var(--fr-text-muted, #7A6A4A) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s !important;
  }
  body#checkout .nav.nav-inline .nav-link.active {
    background: var(--fr-green-deep, #2A4A1E) !important;
    border-color: var(--fr-green-deep, #2A4A1E) !important;
    color: #FFFFFF !important;
  }
  body#checkout .nav.nav-inline .nav-link:hover:not(.active),
  body#checkout .nav.nav-inline .nav-link:focus:not(.active) {
    border-color: var(--fr-green-mid, #4E7C3A) !important;
    color: var(--fr-green-deep, #2A4A1E) !important;
  }

  /* Compactage de l'espacement vertical entre les form-groups des steps
     du tunnel sur mobile (Prénom/Nom/Adresse/... actuellement ~22px de
     gap, on cumule plusieurs sources pour descendre à ~12px) :
       - margin-bottom du .form-group (Bootstrap 1rem) → 10px
       - .form-control-comment vide à droite (8px fantôme en mobile,
         passe en pleine largeur sous l'input) → masqué
       - margin-bottom du <label> form-control-label (Bootstrap 0.5rem) → 4px
       - padding-top du .col-md-6.js-input-column (Bootstrap) → 0
     On exclut les form-groups checkbox (.fr-cb-group) qui ont déjà leur
     propre margin-bottom à 6px. */
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) {
    margin-bottom: 6px !important;
    margin-top: 0 !important;
  }
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > label.form-control-label,
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > label.col-form-label {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
  }
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > .form-control-comment {
    display: none !important;
  }
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > .col-md-6,
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > .js-input-column,
  body#checkout .fr-checkout-main .form-group:not(.fr-cb-group) > .col-md-9 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* C — Compactage des cards steps fermées sur mobile.
     Les steps non actifs (.checkout-step:not(.-current)) sont des cards
     en attente — pas besoin d'autant de padding et d'un gros titre que
     pour le step ouvert. On réduit padding 20→12 et font-size titre
     17→14. Le step actif (-current) garde son sizing normal. */
  body#checkout .fr-checkout-main .checkout-step:not(.-current) {
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
  }
  body#checkout .fr-checkout-main .checkout-step:not(.-current) .step-title,
  body#checkout .fr-checkout-main .checkout-step:not(.-current) h1.step-title,
  body#checkout .fr-checkout-main .checkout-step:not(.-current) h2.step-title {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body#checkout .fr-checkout-main .checkout-step:not(.-current) .step-number {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
}
/* Sticky bar caché sur PC (display: none par défaut au-dessus de 768) */
body#checkout .fr-checkout-sticky-bar {
  display: none;
}
@media (max-width: 900px) {
  body#checkout .fr-checkout-sticky-bar { display: flex; }
}

/* ── Bloc actions identité client connecté (step personal-information) ──
   "✏ Modifier mes informations · Se déconnecter" — owner B6 voulait que
   la modification soit explicite et pas seulement via le firstname/lastname
   clickable noyé dans la phrase "Connecté en tant que ...". */
.fr-checkout-identity-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 6px;
  font-size: 14px;
}
.fr-checkout-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--fr-cream, #F4EFE3);
  color: var(--fr-green-deep, #2A4A1E) !important;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.fr-checkout-edit-link:hover,
.fr-checkout-edit-link:focus {
  background: #ECE4D2;
  border-color: var(--fr-green-pale, #D4E8C2);
  text-decoration: none;
}
.fr-checkout-edit-link svg {
  flex-shrink: 0;
}
.fr-checkout-identity-sep {
  color: var(--fr-text-dim, #B0A896);
  font-weight: 400;
  user-select: none;
}
.fr-checkout-logout-link {
  font-size: 13px;
  color: var(--fr-text-mid, #6B6358) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fr-checkout-logout-link:hover {
  color: var(--fr-green-deep, #2A4A1E) !important;
}
.fr-checkout-logout-warn {
  margin: 6px 0 14px;
  color: var(--fr-text-muted, #7A6A4A);
  font-size: 12px;
  font-style: italic;
}

/* ── Field caché visuellement mais soumis (GDPR consent display=off) ── */
.fr-form-hidden {
  display: none !important;
}

/* ── Input readonly (ex: pays verrouillé sur France) ──
   Visuellement désactivé : fond grisé, curseur not-allowed, pas de focus ring. */
.fr-form-readonly {
  background: var(--fr-cream, #F4EFE3) !important;
  color: var(--fr-text-mid, #6B6358) !important;
  cursor: not-allowed !important;
  user-select: none;
  pointer-events: none;
}
.fr-form-readonly:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--fr-border, #E4DDD0) !important;
}

/* ── Astérisque required (vert deep) sur les labels de form ── */
.fr-form-required {
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 700;
  margin-left: 3px;
  font-size: 1em;
  line-height: 1;
  vertical-align: baseline;
}
/* Cache le marqueur "required" PS natif (généralement un point ou icône
   à côté du label) — on a notre astérisque vert à la place. */
.fr-checkout-page label.required::before,
.fr-checkout-page label.required::after {
  content: none;
}

/* ── Liens du tunnel (toggle invité/connexion, etc) en vert forêt ──
   Spécificité élevée + !important parce que Bootstrap/PS ciblent
   `.nav-tabs .nav-link.active` avec leurs propres couleurs. */
body#checkout a,
body#checkout .nav-link,
body#checkout .nav-tabs .nav-link {
  color: var(--fr-green-deep, #2A4A1E) !important;
  transition: color 0.2s;
}
body#checkout a:hover,
body#checkout a:focus,
body#checkout a:active,
body#checkout .nav-link:hover,
body#checkout .nav-link:focus,
body#checkout .nav-link.active,
body#checkout .nav-tabs .nav-link:hover,
body#checkout .nav-tabs .nav-link.active {
  color: var(--fr-green-mid, #4E7C3A) !important;
  text-decoration: none;
}
body#checkout .nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--fr-green-mid, #4E7C3A);
}

/* ── Overrides cyan PS Classic résiduels en checkout ─────────────────
   1) Ring cyan #24b9d7 autour de l'input password en login checkout :
      PS Classic pose .input-group.focus { outline: .1875rem solid #24b9d7 }
      et .form-control:focus { outline: .1875rem solid #24b9d7 }. On
      désactive l'outline cyan et on remet le focus vert forêt déjà défini
      globalement. Cover .input-group:focus-within + .input-group.focus +
      la classe JS .js-child-focus posée par PS Classic au focus child.
   2) Encadré cyan 3px autour de l'adresse sélectionnée : PS Classic
      pose border: #24b9d7 3px solid sur .address-item.selected (spec
      0,1,3,2). On override en vert forêt avec !important. */
body#checkout .input-group:focus-within,
body#checkout .input-group.focus,
body#checkout .input-group.js-child-focus {
  outline: none !important;
  box-shadow: none !important;
}
body#checkout .form-control:focus,
body#checkout .form-select:focus {
  outline: none !important;
  border-color: var(--fr-green-deep, #2A4A1E) !important;
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.08) !important;
}
body#checkout section.checkout-step .address-item.selected {
  border: 3px solid var(--fr-green-deep, #2A4A1E) !important;
  background: var(--fr-cream, #F6F2EA) !important;
}

/* ── Sticky du récap droit côté checkout : top adapté au mini-header ── */
.fr-checkout-side .fr-cart-summary {
  position: sticky;
  top: 24px; /* mini-header tunnel = ~70px, on laisse 24px de marge */
}

/* ── Compact : moins d'air sous le titre du step et au-dessus du toggle ──
   On ratisse large : tout sélecteur PS qui pourrait porter cet espace est
   ramené à un padding-top:0 forcé.
   Le séparateur (border-bottom) est restreint au step COURANT uniquement,
   sinon il apparaît orphelin sur les steps fermés où il n'y a pas de
   contenu en dessous (cf retour owner B6 sur "Adresses" au repos). */
/* Reset border-bottom hérité de PS classic theme.css (qui utilise un
   sélecteur `body#checkout section.checkout-step .step-title` avec
   spécificité 0,1,2,2 → on doit aussi monter avec body#checkout +
   !important pour garantir qu'on l'emporte). */
body#checkout .fr-checkout-page .checkout-step h1,
body#checkout .fr-checkout-page .checkout-step h2,
body#checkout .fr-checkout-page .checkout-step h3,
body#checkout .fr-checkout-page .checkout-step .step-title {
  padding: 0 0 14px !important;
  margin: 0 0 14px !important;
  border-bottom: none !important;
  border-top: none !important;
}
body#checkout .fr-checkout-page .checkout-step.-current h1,
body#checkout .fr-checkout-page .checkout-step.-current h2,
body#checkout .fr-checkout-page .checkout-step.-current h3,
body#checkout .fr-checkout-page .checkout-step.-current .step-title {
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0) !important;
}
/* Step fermé : ramène marge basse à 0 puisqu'il n'y a pas de séparateur
   ni de contenu en dessous (le panel est replié). */
body#checkout .fr-checkout-page .checkout-step:not(.-current) h1,
body#checkout .fr-checkout-page .checkout-step:not(.-current) h2,
body#checkout .fr-checkout-page .checkout-step:not(.-current) h3,
body#checkout .fr-checkout-page .checkout-step:not(.-current) .step-title {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
}
/* PS classic pose aussi un border-top sur le step-title quand un step
   est juste après le step courant (`.-current+.checkout-step .step-title`).
   On le neutralise pour garder un look uniformément clean. */
body#checkout .fr-checkout-page .checkout-step.-current + .checkout-step .step-title,
body#checkout .fr-checkout-page .checkout-step.-current + .checkout-step h1 {
  border-top: none !important;
  padding-top: 0 !important;
}
.fr-checkout-page .checkout-step .content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.fr-checkout-page .checkout-step .content > *:first-child,
.fr-checkout-page .checkout-step form > *:first-child,
.fr-checkout-page .checkout-step .step-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.fr-checkout-page .checkout-step .nav-tabs,
.fr-checkout-page .checkout-step ul.nav,
.fr-checkout-page .checkout-step .nav {
  margin-top: 0 !important;
  margin-bottom: 18px;
  padding-top: 0 !important;
  border-bottom: none !important;
}
.fr-checkout-page .checkout-step .nav-tabs .nav-item,
.fr-checkout-page .checkout-step ul.nav .nav-item {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.fr-checkout-page .checkout-step .nav-tabs .nav-link,
.fr-checkout-page .checkout-step ul.nav .nav-link {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 0;
}

/* ── Boutons radio M/Mme en vert forêt (override Bootstrap/PS bleu) ──
   Couvre toutes les pages compte qui ont un radio civilité/titre :
   checkout, identité, adresse (création/édition), inscription. */
.fr-checkout-page .custom-radio,
body#checkout .custom-radio,
body#identity .custom-radio,
body#address .custom-radio,
body#registration .custom-radio,
body.page-identity .custom-radio,
body.page-address .custom-radio,
body.page-registration .custom-radio {
  border-color: var(--fr-border, #E4DDD0);
}
.fr-checkout-page .custom-radio input[type="radio"]:checked + span,
body#checkout .custom-radio input[type="radio"]:checked + span,
body#identity .custom-radio input[type="radio"]:checked + span,
body#address .custom-radio input[type="radio"]:checked + span,
body#registration .custom-radio input[type="radio"]:checked + span,
body.page-identity .custom-radio input[type="radio"]:checked + span,
body.page-address .custom-radio input[type="radio"]:checked + span,
body.page-registration .custom-radio input[type="radio"]:checked + span {
  background-color: var(--fr-green-deep, #2A4A1E) !important;
}
.fr-checkout-page .custom-radio:hover,
body#checkout .custom-radio:hover,
body#identity .custom-radio:hover,
body#address .custom-radio:hover,
body#registration .custom-radio:hover,
body.page-identity .custom-radio:hover,
body.page-address .custom-radio:hover,
body.page-registration .custom-radio:hover {
  border-color: var(--fr-green-mid, #4E7C3A);
}
/* Fallback pour les radios natifs sans wrapper .custom-radio */
.fr-checkout-page input[type="radio"],
body#checkout input[type="radio"],
body#identity input[type="radio"],
body#address input[type="radio"],
body#registration input[type="radio"],
body.page-identity input[type="radio"],
body.page-address input[type="radio"],
body.page-registration input[type="radio"] {
  accent-color: var(--fr-green-deep, #2A4A1E);
}

/* ── Lien "← Retour au panier" sous la frise tunnel ── */
.fr-checkout-back {
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 24px;
}
.fr-checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fr-green-deep, #2A4A1E);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
}
.fr-checkout-back-link:hover {
  color: var(--fr-green-mid, #4E7C3A);
}
@media (max-width: 640px) {
  .fr-checkout-back { padding: 0 14px; margin-bottom: 14px; }
  .fr-checkout-back-link { font-size: 13px; }
}

/* ── Mini-footer tunnel ── */
.fr-checkout-footer {
  background: #FFFFFF;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  padding: 18px 0;
  margin-top: 40px;
}
.fr-checkout-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.fr-checkout-footer-tos {
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
}
.fr-checkout-footer-copy {
  font-size: 11px;
  color: var(--fr-text-dim, #B0A896);
}

/* ── Page confirmation ── */
.fr-orderconf-card {
  max-width: 1100px;
  margin: 0 auto 18px;
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(26, 46, 18, 0.04);
}
.fr-orderconf-block {
  padding: 28px 32px;
}
.fr-orderconf-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.fr-orderconf-check { flex-shrink: 0; }
.fr-orderconf-title {
  font-family: var(--fr-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  margin: 0;
  letter-spacing: -0.01em;
}
.fr-orderconf-lead {
  font-size: 14px;
  color: var(--fr-text-mid, #4A4238);
  margin: 0 0 8px;
  line-height: 1.55;
}
.fr-orderconf-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
}
.fr-orderconf-details-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-orderconf-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.5;
}

/* ─── Order-confirmation : gap reass / breadcrumb (shotgun) ────
   Sur la page order-confirmation (body#order-confirmation), il y a une
   bande cream parasite entre la barre réassurance et le breadcrumb +
   tunnel-steps. Même symptôme que sur fiche produit (cf. body#product
   plus haut) : padding/margin parasites sur wrapper + container + un
   hook displayWrapperTop éventuellement vide. */
body#order-confirmation .breadcrumb,
body#order-confirmation .breadcrumb-wrap,
body#order-confirmation nav.breadcrumb,
body.page-order-confirmation .breadcrumb {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}
body#order-confirmation #wrapper,
body#order-confirmation #wrapper > .container,
body#order-confirmation #content-wrapper,
body.page-order-confirmation #wrapper,
body.page-order-confirmation #wrapper > .container,
body.page-order-confirmation #content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body#order-confirmation main > section:first-child,
body.page-order-confirmation main > section:first-child {
  padding-top: 0;
  margin-top: 0;
}
body#order-confirmation .fr-reass,
body.page-order-confirmation .fr-reass {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body#order-confirmation #notifications,
body#order-confirmation .notifications-container,
body.page-order-confirmation #notifications,
body.page-order-confirmation .notifications-container { display: none !important; }
body#order-confirmation #wrapper > #notifications + *:empty,
body#order-confirmation #wrapper > div:empty:not(.container),
body.page-order-confirmation #wrapper > div:empty:not(.container) { display: none !important; }

/* Breathing room entre la zone cream du breadcrumb et la frise tunnel-steps
   (sinon la frise des 4 step-circles touche le bas de la cream → effet
   "collé"). Scope strict order-confirmation : sur cart/checkout, la frise
   est dans son propre header mini-tunnel et n'a pas ce problème. */
body#order-confirmation .fr-tunnel-steps,
body.page-order-confirmation .fr-tunnel-steps {
  margin-top: 24px;
}

/* ─── Order-confirmation : "Produits populaires" en carousel ────
   Reprend le pattern .fr-bestsellers de l'index (cards horizontales
   scroll-snap + flèches nav + dezoom non-active). On masque le H2
   "Produits populaires" injecté par le widget pour avoir un seul
   titre cohérent (notre wrapper expose un éventuel header propre). */
.fr-orderconf-popular {
  max-width: 1100px;
  margin: 22px auto 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.fr-orderconf-popular-grid {
  position: relative;
}
.fr-orderconf-popular .featured-products {
  margin: 0;
  padding: 0;
}
.fr-orderconf-popular .featured-products > h2,
.fr-orderconf-popular .featured-products > .products-section-title {
  font-family: var(--fr-font-sans, 'DM Sans', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: -0.005em;
  text-transform: none;
  text-align: center;
  margin: 0 0 18px;
}
.fr-orderconf-popular .featured-products > .all-product-link { display: none !important; }
.fr-orderconf-popular .featured-products .product-miniature {
  margin-bottom: 20px;
}

/* Mobile carousel scroll-snap — pattern identique à .fr-bestsellers */
@media (max-width: 900px) {
  .fr-orderconf-popular {
    margin: 22px 0 0;
  }
  .fr-orderconf-popular-grid {
    margin: 0 -14px;            /* déborde du padding parent */
  }
  .fr-orderconf-popular .featured-products > h2,
  .fr-orderconf-popular .featured-products > .products-section-title {
    font-size: 18px;
    margin: 0 14px 14px;
  }
  .fr-orderconf-popular .featured-products {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .fr-orderconf-popular .featured-products .row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 240px !important;
    grid-template-columns: none !important;
    grid-template-rows: auto !important;
    gap: 14px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    padding: 14px 0 !important;
    padding-right: calc(50vw - 120px) !important;
    scroll-padding-left: calc(50vw - 120px);
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fr-orderconf-popular .featured-products .row::-webkit-scrollbar { display: none; }
  .fr-orderconf-popular .featured-products .row > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
    display: block !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start;
    transform: scale(0.88);
    transform-origin: center center;
    opacity: 0.65;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .fr-orderconf-popular .featured-products .row > *.is-active {
    transform: scale(1);
    opacity: 1;
  }
  .fr-orderconf-popular .featured-products .product-miniature {
    margin-bottom: 0;
    width: 100%;
  }
}

/* ─── Order-confirmation : tableau articles + totaux ──────────
   Override de _partials/order-confirmation-table.tpl pour avoir un
   layout grid clean (thumb / name+meta / total) au lieu du Bootstrap
   col-* qui rend cramé sur mobile. */
.fr-orderconf-table {
  margin: 0;
}
.fr-orderconf-table-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-orderconf-items {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fr-orderconf-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
}
.fr-orderconf-item:last-child {
  border-bottom: 0;
}
.fr-orderconf-item-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
.fr-orderconf-item-thumb img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--fr-cream, #F6F2EA);
  display: block;
}
.fr-orderconf-item-info {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fr-orderconf-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.35;
}
.fr-orderconf-item-name a {
  color: inherit;
  text-decoration: none;
}
.fr-orderconf-item-name a:hover {
  color: var(--fr-green-deep, #2A4A1E);
}
.fr-orderconf-item-meta {
  font-size: 12.5px;
  color: var(--fr-text-muted, #7A6A4A);
}
.fr-orderconf-item-custom {
  font-size: 12px;
  color: var(--fr-green-mid, #4E7C3A);
  text-decoration: underline;
}
.fr-orderconf-item-total {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Table totaux */
.fr-orderconf-totals {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--fr-border, #E4DDD0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fr-orderconf-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
  color: var(--fr-text-mid, #4A4238);
}
.fr-orderconf-total-label {
  flex: 1;
}
.fr-orderconf-total-value {
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  white-space: nowrap;
}
.fr-orderconf-total-row.is-discount .fr-orderconf-total-value {
  color: var(--fr-green-mid, #4E7C3A);
}
.fr-orderconf-total-row.is-grand {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  font-size: 16px;
}
.fr-orderconf-total-row.is-grand .fr-orderconf-total-label {
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-orderconf-total-row.is-grand .fr-orderconf-total-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--fr-green-deep, #2A4A1E);
  letter-spacing: -0.01em;
}
.fr-orderconf-total-row.is-tax-detail {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
  font-style: italic;
}
.fr-orderconf-total-row.is-tax-detail .fr-orderconf-total-value {
  font-weight: 400;
  font-size: 12px;
  color: var(--fr-text-muted, #7A6A4A);
}

/* Mobile : items un peu plus compacts, thumb plus petite */
@media (max-width: 640px) {
  .fr-orderconf-item {
    grid-template-columns: 64px 1fr auto;
    gap: 4px 12px;
    padding: 12px 0;
  }
  .fr-orderconf-item-thumb img {
    width: 64px;
    height: 64px;
  }
  .fr-orderconf-item-name {
    font-size: 13.5px;
  }
  .fr-orderconf-item-total {
    font-size: 14px;
  }
  .fr-orderconf-total-row.is-grand .fr-orderconf-total-value {
    font-size: 17px;
  }
}

/* ──────────────────────────────────────────────────────────
   B6 — étape "Mode de livraison" (carrier selection)
   Cards radio Forêt Profonde, picker extraContent inline.
   ────────────────────────────────────────────────────────── */
body#checkout .fr-ship-zone {
  display: block;
}

/* Cards transporteurs */
body#checkout .fr-ship-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

/* Reset : neutralise le markup Bootstrap row/col hérité du parent */
body#checkout .fr-ship-options .row,
body#checkout .fr-ship-options [class*="col-"] {
  display: revert;
  margin: 0;
  padding: 0;
  flex: initial;
  max-width: none;
}

body#checkout .fr-ship-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Padding latéral généreux (24px) pour décoller la radio du bord gauche
     et le prix/"Gratuit" du bord droit (cohérent avec mobile ligne 12244).
     !important obligatoire en desktop pour battre PS Classic theme.css
     `body#checkout section.checkout-step .delivery-options .delivery-option
     { padding: .9375rem 0 }` (spécificité 0,1,4,1 > notre 0,1,1,1) qui
     supprimerait le padding horizontal et collerait radio/logo/prix aux
     bords latéraux internes de la card. Mobile a déjà !important via le
     @media 768 ligne 12273. */
  padding: 18px 24px !important;
  margin: 0;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
body#checkout .fr-ship-opt:hover {
  border-color: var(--fr-green-mid, #4E7C3A);
}
body#checkout .fr-ship-opt.is-selected,
body#checkout .fr-ship-opt:has(input[type="radio"]:checked) {
  border-color: var(--fr-green-deep, #2A4A1E);
  background: var(--fr-cream, #F6F2EA);
  box-shadow: 0 2px 8px rgba(42, 74, 30, 0.08);
}

body#checkout .fr-ship-opt-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--fr-green-deep, #2A4A1E);
  cursor: pointer;
}

body#checkout .fr-ship-opt-logo {
  flex-shrink: 0;
  max-width: 62px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

body#checkout .fr-ship-opt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body#checkout .fr-ship-opt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
}
body#checkout .fr-ship-opt-delay {
  font-size: 12.5px;
  color: var(--fr-text-muted, #7A6A4A);
  line-height: 1.4;
}

body#checkout .fr-ship-opt-price {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Zone extraContent (picker Pickup Colissimo / widget MR) sous la card sélectionnée */
body#checkout .fr-ship-extra {
  margin: -2px 0 0 32px;
  padding: 14px 16px;
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 10px;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
}
body#checkout .fr-ship-extra:empty {
  display: none !important;
}
/* :empty ne match pas si le div contient juste du whitespace ou un
   commentaire — pour les carriers sans extraContent (ex. Colissimo
   Domicile sans signature), on masque le wrapper s'il n'a aucun
   enfant tag. */
body#checkout .fr-ship-extra:not(:has(*)) {
  display: none !important;
}

/* Bloc options secondaires (message + recyclable + gift) */
body#checkout .fr-ship-options-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
}

/* <details> message livraison */
body#checkout .fr-ship-message {
  margin: 0;
}
body#checkout .fr-ship-message-toggle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fr-green-deep, #2A4A1E);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
body#checkout .fr-ship-message-toggle::-webkit-details-marker { display: none; }
body#checkout .fr-ship-message-toggle::before {
  content: "+";
  display: inline-block;
  width: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  transition: transform 0.15s ease;
}
body#checkout .fr-ship-message[open] > .fr-ship-message-toggle::before {
  content: "−";
}
body#checkout .fr-ship-message-hint {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--fr-text-muted, #7A6A4A);
}
body#checkout .fr-ship-message-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fr-text-mid, #4A4238);
  text-align: left;
}
/* PS Classic theme.css pose `.label,label { text-align: right }` qui décale
   tous les labels Forêt Profonde à droite (cf. summary + checkboxes dans
   .fr-ship-options-extras). On force le retour à gauche sur tout le bloc. */
body#checkout .fr-ship-options-extras,
body#checkout .fr-ship-options-extras label,
body#checkout .fr-ship-options-extras .fr-ship-message-toggle,
body#checkout .fr-ship-options-extras .fr-ship-checkbox,
body#checkout .fr-ship-options-extras .fr-ship-checkbox-label {
  text-align: left;
}
body#checkout .fr-ship-message-area {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--fr-border, #E4DDD0);
  border-radius: 8px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--fr-text-primary, #1A2E12);
  resize: vertical;
  transition: border-color 0.15s ease;
}
body#checkout .fr-ship-message-area:focus {
  outline: none;
  border-color: var(--fr-green-mid, #4E7C3A);
}

/* Checkboxes (recyclable + gift) — réutilise la palette */
body#checkout .fr-ship-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  color: var(--fr-text-mid, #4A4238);
  cursor: pointer;
  user-select: none;
}
body#checkout .fr-ship-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body#checkout .fr-ship-checkbox-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 4px;
  background: #FFFFFF;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body#checkout .fr-ship-checkbox-mark .material-icons {
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body#checkout .fr-ship-checkbox input[type="checkbox"]:checked + .fr-ship-checkbox-mark {
  background: var(--fr-green-deep, #2A4A1E);
  border-color: var(--fr-green-deep, #2A4A1E);
}
body#checkout .fr-ship-checkbox input[type="checkbox"]:checked + .fr-ship-checkbox-mark .material-icons {
  opacity: 1;
}

body#checkout .fr-ship-gift {
  margin: 8px 0 0;
}

/* État vide (aucun transporteur) */
body#checkout .fr-ship-empty {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: #FCEBE3;
  border: 1px solid #E8B4A0;
  border-radius: 10px;
  font-size: 13.5px;
  color: #8A2F12;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   B6 — étape "Paiement" (payment options)
   Cards radio Forêt Profonde, form module injecté inline,
   conditions GDPR custom, bouton "Confirmer la commande".
   ────────────────────────────────────────────────────────── */
body#checkout .fr-pay-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

/* Notice (transaction updated, free order) */
body#checkout .fr-pay-notice {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
body#checkout .fr-pay-notice--info {
  background: var(--fr-cream, #F6F2EA);
  border: 1px solid var(--fr-border, #E4DDD0);
  color: var(--fr-text-mid, #4A4238);
}
body#checkout .fr-pay-notice--free {
  background: var(--fr-green-light, #EAF2E3);
  border: 1px solid var(--fr-green-pale, #D4E8C2);
  color: var(--fr-green-deep, #2A4A1E);
}

/* Card méthode de paiement */
body#checkout .fr-pay-method {
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body#checkout .fr-pay-method:hover {
  border-color: var(--fr-green-mid, #4E7C3A);
}
body#checkout .fr-pay-method.is-selected,
body#checkout .fr-pay-method:has(input[name="payment-option"]:checked) {
  border-color: var(--fr-green-deep, #2A4A1E);
  box-shadow: 0 2px 8px rgba(42, 74, 30, 0.08);
}

/* Header clickable (radio + label + logos)
   !important sur display: flex parce que PS Classic pose
   `body#checkout section.checkout-step .payment-options label
   { display: table-cell }` avec spécificité (0,1,3,2) qui écrase
   notre (0,1,1,1) et casse le layout flex. */
body#checkout .fr-pay-method-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 400;
  text-align: left;
}
body#checkout .fr-pay-method.is-selected .fr-pay-method-header,
body#checkout .fr-pay-method:has(input[name="payment-option"]:checked) .fr-pay-method-header {
  background: var(--fr-cream, #F6F2EA);
}

/* Wrapper PS .custom-radio — neutralisé visuellement (pas de border, pas
   de fond), on garde l'input radio natif visible avec accent-color vert.
   PS Classic pose `.custom-radio { width: 18px; height: 18px; border: ...;
   background: #fff }` et `.custom-radio input[type=radio] { opacity: 0 }`
   pour faire un radio custom — on neutralise tout pour afficher le natif. */
body#checkout .fr-pay-radio-wrap {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  position: static;
}
body#checkout .fr-pay-radio-wrap > span:not(.fr-pay-radio) {
  display: none !important;
}
body#checkout .fr-pay-radio {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  opacity: 1 !important;
  accent-color: var(--fr-green-deep, #2A4A1E);
  cursor: pointer;
}

/* Fallback non-JS (caché si JS dispo via .ps-hidden-by-js) */
body#checkout .fr-pay-nojs-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
body#checkout .fr-pay-nojs-btn {
  padding: 4px 10px;
  border: 1px solid var(--fr-green-deep, #2A4A1E);
  border-radius: 6px;
  background: transparent;
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
body#checkout .fr-pay-nojs-selected {
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-green-deep, #2A4A1E);
}

/* Label méthode (nom + sub futur) */
body#checkout .fr-pay-method-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body#checkout .fr-pay-method-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
}

/* Logos (PayPal, Stripe…) */
body#checkout .fr-pay-method-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body#checkout .fr-pay-method-logo {
  max-width: 80px;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Body : form du module / additional info — affiché si méthode sélectionnée */
body#checkout .fr-pay-method-body,
body#checkout .fr-pay-method-extra {
  padding: 14px 18px 16px;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
  background: #FFFFFF;
  font-size: 13.5px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.55;
  text-align: left;
}
body#checkout .fr-pay-method-body p,
body#checkout .fr-pay-method-extra p {
  text-align: left;
}

/* PS Classic ajoute `body#checkout .additional-information { margin-left:
   2.875rem }` (~46px) sur le wrapper extraContent — ça décale tout le contenu
   à droite et donne l'effet d'un texte "centré". Reset à 0 pour qu'il colle
   au padding 14×18 de la card. */
body#checkout .fr-pay-method-extra,
body#checkout .fr-pay-method-extra.additional-information {
  margin-left: 0 !important;
}

/* Module ps_checkpayment : <dl class="definition-list"> + <dt>/<dd> stylés
   par PS Classic en flex 45% + background #f6f6f6. Restyle Forêt Profonde :
   grid 2 cols (label cream / valeur blanche) + bordure card + coins
   arrondis. */
body#checkout .fr-pay-method-extra dl {
  display: grid !important;
  grid-template-columns: 42% 1fr;
  gap: 0;
  flex-wrap: initial !important;
  margin: 12px 0 0;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 10px;
  overflow: hidden;
}
body#checkout .fr-pay-method-extra dl dt,
body#checkout .fr-pay-method-extra dl dd {
  flex: initial !important;
  background: transparent !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fr-text-mid, #4A4238);
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
}
body#checkout .fr-pay-method-extra dl dt {
  background: var(--fr-cream, #F6F2EA) !important;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  border-right: 0.5px solid var(--fr-border, #E4DDD0);
}
/* Dernière paire (dt + dd) : pas de bordure inférieure. */
body#checkout .fr-pay-method-extra dl dt:nth-last-of-type(1),
body#checkout .fr-pay-method-extra dl dd:nth-last-of-type(1) {
  border-bottom: 0;
}
body#checkout .fr-pay-method-body.ps-hidden,
body#checkout .fr-pay-method-extra.ps-hidden {
  display: none;
}
body#checkout .fr-pay-method-body:empty,
body#checkout .fr-pay-method-body > .fr-pay-method-form-fallback:only-child {
  display: none;
}

/* Reset typographique des forms injectées par les modules de paiement */
body#checkout .fr-pay-method-body p {
  margin: 0 0 10px;
}
body#checkout .fr-pay-method-body p:last-child {
  margin-bottom: 0;
}
body#checkout .fr-pay-method-body a {
  color: var(--fr-green-deep, #2A4A1E);
  text-decoration: underline;
}
body#checkout .fr-pay-method-body a:hover {
  color: var(--fr-green-mid, #4E7C3A);
}

/* État vide */
body#checkout .fr-pay-empty {
  margin: 0;
  padding: 16px 18px;
  background: #FCEBE3;
  border: 1px solid #E8B4A0;
  border-radius: 10px;
  font-size: 13.5px;
  color: #8A2F12;
  line-height: 1.5;
}

/* Conditions à approuver (CGV + GDPR) */
body#checkout .fr-pay-conditions-intro {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--fr-text-muted, #7A6A4A);
}
body#checkout .fr-pay-conditions {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
}
body#checkout .fr-pay-conditions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body#checkout .fr-pay-conditions-item {
  margin: 0;
  padding: 0;
}
body#checkout .fr-pay-conditions-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}
body#checkout .fr-pay-conditions-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body#checkout .fr-pay-conditions-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--fr-border, #E4DDD0);
  border-radius: 4px;
  background: #FFFFFF;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body#checkout .fr-pay-conditions-mark .material-icons {
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body#checkout .fr-pay-conditions-input:checked + .fr-pay-conditions-mark {
  background: var(--fr-green-deep, #2A4A1E);
  border-color: var(--fr-green-deep, #2A4A1E);
}
body#checkout .fr-pay-conditions-input:checked + .fr-pay-conditions-mark .material-icons {
  opacity: 1;
}
body#checkout .fr-pay-conditions-label {
  flex: 1;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
  line-height: 1.5;
  text-align: left;
}
body#checkout .fr-pay-conditions-label a {
  color: var(--fr-green-deep, #2A4A1E);
  text-decoration: underline;
}

/* PS Classic theme.css pose `.label,label { text-align: right }` qui décale
   tous les <label> du step paiement à droite (CGV, header méthode, etc.).
   Force left-alignment sur l'ensemble du bloc Paiement. */
body#checkout .fr-pay-zone,
body#checkout .fr-pay-zone label,
body#checkout .fr-pay-method-header,
body#checkout .fr-pay-method-name,
body#checkout .fr-pay-conditions,
body#checkout .fr-pay-conditions label,
body#checkout .fr-pay-conditions-row,
body#checkout .fr-pay-conditions-intro {
  text-align: left;
}

/* Final summary (récap final si activé) */
body#checkout .fr-pay-final-summary {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--fr-cream, #F6F2EA);
  border: 0.5px solid var(--fr-border, #E4DDD0);
  border-radius: 12px;
}

/* Confirmation block + bouton submit */
body#checkout .fr-pay-confirm {
  margin: 22px 0 0;
}
body#checkout .fr-pay-confirm-shown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
body#checkout .fr-pay-submit {
  width: 100%;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  padding: 14px 28px !important;
  text-transform: uppercase;
}
body#checkout .fr-pay-submit.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Alert "veuillez choisir un moyen + accepter les conditions" */
body#checkout .fr-pay-alert {
  margin: 0;
  padding: 12px 14px;
  background: #FCEBE3;
  border: 1px solid #E8B4A0;
  border-radius: 10px;
  font-size: 12.5px;
  color: #8A2F12;
  line-height: 1.5;
}
body#checkout .fr-pay-alert a {
  color: #8A2F12;
  text-decoration: underline;
  font-weight: 600;
}

body#checkout .fr-pay-nojs-confirm {
  display: inline-block;
  padding: 10px 18px;
  background: var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* ── Responsive tunnel ── */
@media (max-width: 980px) {
  .fr-checkout-zone {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .fr-checkout-side {
    position: static;
    top: auto;
  }
  .fr-orderconf-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 640px) {
  .fr-checkout-page { padding: 18px 0 60px; }
  .fr-checkout-zone { padding: 0 14px; }
  .fr-checkout-header-inner { padding: 0 14px; gap: 12px; }
  .fr-checkout-secure { font-size: 12px; }
  .fr-checkout-secure svg { width: 12px; height: 12px; }
  .fr-checkout-logo svg,
  .fr-checkout-logo img { width: auto; max-height: 36px; }
  .fr-checkout-main .checkout-step { padding: 16px 18px; }
  .fr-orderconf-block { padding: 20px 18px; }
  .fr-orderconf-title { font-size: 19px; }

  body#checkout .fr-pay-method-header { padding: 12px 14px; gap: 10px; }
  body#checkout .fr-pay-method-name { font-size: 13.5px; }
  body#checkout .fr-pay-method-body,
  body#checkout .fr-pay-method-extra { padding: 12px 14px 14px; }
  body#checkout .fr-pay-method-logo { max-width: 60px; max-height: 22px; }
  body#checkout .fr-pay-conditions { padding: 12px 14px; }
  body#checkout .fr-pay-submit { font-size: 14px !important; padding: 13px 22px !important; }
}

/* Cards transporteur (.fr-ship-opt) — padding/gap mobile générique
   sur ≤ 768px (le @media 640 ci-dessus ne couvre pas la tranche
   641-768). Sur ≤ 640 c'est cumulé/identique.
   Padding horizontal élargi (18×24) pour que "Gratuit" décolle du
   bord droit et radio+texte décolle du bord gauche sur mobile.
   !important sécurise contre `.delivery-options .delivery-option
   { padding: .9375rem 0 }` de PS Classic (selectivité 0,0,2,0 vs nous
   0,1,1,1 — on devrait gagner, mais !important rule out l'ordre). */
@media (max-width: 900px) {
  body#checkout .fr-ship-opt { padding: 18px 24px !important; gap: 14px !important; }
  body#checkout .fr-ship-opt-name { font-size: 13.5px; }
  body#checkout .fr-ship-opt-delay { font-size: 12px; }
  body#checkout .fr-ship-opt-price { font-size: 14px; }
  body#checkout .fr-ship-opt-logo { max-width: 44px; max-height: 24px; }
  body#checkout .fr-ship-extra { margin-left: 0 !important; padding: 16px 18px !important; }
  body#checkout .fr-ship-options-extras { padding: 18px 20px !important; }
}

/* ──────────────────────────────────────────────────────────
   B7 — Popup "Produit ajouté au panier" (#blockcart-modal)
   Re-style le modal PS classic en cohérence Forêt Profonde.
   ────────────────────────────────────────────────────────── */
#blockcart-modal {
  font-family: var(--fr-font-sans, 'DM Sans', sans-serif);
}
#blockcart-modal .modal-dialog {
  max-width: 920px;
  margin: 8vh auto 5vh;
}
#blockcart-modal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(26, 46, 18, 0.14);
  overflow: hidden;
  background: #FFFFFF;
}

/* Header : ✓ "Produit ajouté…" + close */
#blockcart-modal .modal-header {
  position: relative;
  padding: 20px 28px;
  border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
#blockcart-modal .modal-header .close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  margin: 0;
  padding: 6px;
  opacity: 1;
  text-shadow: none;
  border: none;
  background: transparent;
  color: var(--fr-text-muted, #7A6A4A);
  transition: color 0.15s ease;
  cursor: pointer;
}
#blockcart-modal .modal-header .close:hover,
#blockcart-modal .modal-header .close:focus {
  color: var(--fr-green-deep, #2A4A1E);
  outline: none;
}
#blockcart-modal .modal-header .close .material-icons {
  font-size: 22px;
}
#blockcart-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  letter-spacing: 0;
  text-align: center;
}
#blockcart-modal .modal-title .material-icons {
  font-size: 22px;
  color: var(--fr-success, #4E7C3A);
}

/* Body : grille 2 colonnes (produit / récap) */
#blockcart-modal .modal-body {
  padding: 30px 32px 32px;
  background: #FFFFFF;
}
#blockcart-modal .modal-body > .row {
  margin-left: 0;
  margin-right: 0;
}
#blockcart-modal .modal-body > .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}
#blockcart-modal .divide-right {
  border-right: 0.5px solid var(--fr-border, #E4DDD0);
  padding-right: 24px;
}

/* Colonne produit */
#blockcart-modal .product-image {
  width: 100%;
  height: auto;
  max-width: 180px;
  border-radius: 10px;
  background: var(--fr-cream, #F6F2EA);
  display: block;
}
#blockcart-modal .product-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
  line-height: 1.3;
}
#blockcart-modal .product-name a {
  color: inherit;
  text-decoration: none;
}
#blockcart-modal .product-name a:hover {
  color: var(--fr-green-deep, #2A4A1E);
}
#blockcart-modal .product-price {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  letter-spacing: -0.005em;
}
#blockcart-modal .product-quantity,
#blockcart-modal [class*="col-md-6"] > span {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fr-text-mid, #4A4238);
}
#blockcart-modal .product-quantity strong,
#blockcart-modal [class*="col-md-6"] > span strong {
  color: var(--fr-text-primary, #1A2E12);
  font-weight: 700;
}

/* Colonne récap commande */
#blockcart-modal .cart-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}
#blockcart-modal .cart-products-count,
#blockcart-modal .cart-content p.cart-products-count {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  color: var(--fr-green-deep, #2A4A1E) !important;
  font-weight: 500 !important;
}
#blockcart-modal .cart-content > p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 6px 0;
  font-size: 14px;
  color: var(--fr-text-mid, #4A4238);
}
#blockcart-modal .cart-content > p .label,
#blockcart-modal .cart-content > p > span:first-child {
  font-weight: 500;
}
#blockcart-modal .cart-content > p .value,
#blockcart-modal .cart-content > p > span:last-child {
  font-weight: 600;
  color: var(--fr-text-primary, #1A2E12);
  white-space: nowrap;
}

/* Ligne Total TTC : fond cream cohérent (remplace le gris bootstrap) */
#blockcart-modal .product-total {
  margin: 4px 0 0 !important;
  padding: 12px 14px !important;
  background: var(--fr-cream, #F6F2EA);
  border-radius: 10px;
  font-size: 15px !important;
}
#blockcart-modal .product-total .label,
#blockcart-modal .product-total > span:first-child {
  font-weight: 700;
  color: var(--fr-text-primary, #1A2E12);
}
#blockcart-modal .product-total .value,
#blockcart-modal .product-total > span:last-child {
  font-weight: 700;
  color: var(--fr-green-deep, #2A4A1E);
  font-size: 16px;
}

/* Ligne "Taxes incluses" du modal masquée (info redondante avec Total TTC) */
#blockcart-modal .product-tax {
  display: none !important;
}

/* Boutons CONTINUER MES ACHATS / COMMANDER */
#blockcart-modal .cart-content-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--fr-border, #E4DDD0);
}
#blockcart-modal .cart-content-btn .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border-width: 1.5px;
}
#blockcart-modal .cart-content-btn .btn-secondary {
  background: #FFFFFF;
  border: 1.5px solid var(--fr-green-deep, #2A4A1E);
  color: var(--fr-green-deep, #2A4A1E);
}
#blockcart-modal .cart-content-btn .btn-secondary:hover,
#blockcart-modal .cart-content-btn .btn-secondary:focus {
  background: var(--fr-cream, #F6F2EA);
  color: var(--fr-green-deep, #2A4A1E);
  border-color: var(--fr-green-deep, #2A4A1E);
}
#blockcart-modal .cart-content-btn .btn-primary {
  background: var(--fr-green-deep, #2A4A1E);
  border: 1.5px solid var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
}
#blockcart-modal .cart-content-btn .btn-primary:hover,
#blockcart-modal .cart-content-btn .btn-primary:focus {
  background: var(--fr-green-mid, #4E7C3A);
  border-color: var(--fr-green-mid, #4E7C3A);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(42, 74, 30, 0.2);
}
#blockcart-modal .cart-content-btn .btn .material-icons {
  font-size: 18px;
}

/* Backdrop : voile crème opaque cohérent (pas gris) */
.modal-backdrop.show {
  background: rgba(26, 46, 18, 0.55);
}

/* Responsive : sur mobile, colonnes en stack */
@media (max-width: 900px) {
  #blockcart-modal .modal-dialog {
    margin: 4vh 12px;
    max-width: none;
  }
  #blockcart-modal .modal-body {
    padding: 22px 18px 24px;
  }
  #blockcart-modal .divide-right {
    border-right: none;
    border-bottom: 0.5px solid var(--fr-border, #E4DDD0);
    padding: 0 0 18px;
    margin-bottom: 18px;
  }
  #blockcart-modal .cart-content {
    padding-left: 0;
  }
  #blockcart-modal .product-image {
    max-width: 120px;
    margin: 0 auto 12px;
  }
  #blockcart-modal .modal-body > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  #blockcart-modal .cart-content-btn {
    justify-content: stretch;
  }
  #blockcart-modal .cart-content-btn .btn {
    flex: 1 1 auto;
  }
}

/* ============================================================
   B-CONTACT — Page Contactez-nous (Forêt Profonde)
   Hero + 2 cols (sidebar 3 cards + form) + FAQ accordion
   ============================================================ */

/* Annule la card blanche par défaut de page.tpl pour qu'on gère
   nous-mêmes le fond et la mise en forme */
body.page-contact #content.page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.page-contact .breadcrumb { background: var(--fr-cream, #F6F2EA); }

/* Force le contenu à prendre toute la largeur — le layout-left-column
   réserve une colonne gauche que l'override du block "left_column" vide,
   mais le wrapper col-... existe toujours et bouffe la largeur. */
body.page-contact #left-column { display: none !important; }
body.page-contact #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-contact #wrapper > .container,
body.page-contact #wrapper > .container > .row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-contact #main { width: 100%; max-width: 100%; }

.fr-contact-page {
  --fr-green-deep: #2A4A1E;
  --fr-green: #3F6B2E;
  --fr-green-light: #E5EDD9;
  --fr-cream: #F6F2EA;
  --fr-cream-2: #EDE5D2;
  --fr-bg-page: #FFFFFF;   /* blanc, comme les autres pages — la breadcrumb cream au-dessus assure la séparation visuelle */
  --fr-ink: #1F2614;
  --fr-mute: #6B7560;
  --fr-line: #E0DAC9;
  background: var(--fr-bg-page);
  margin: 0;
  padding: 0;
  width: 100%;
}
/* Plus aucun espace entre la FAQ (dernier element de .fr-contact-page)
   et le footer du site. Tue les paddings/margins natifs PS9 sur la page-contact. */
body.page-contact .page-footer,
body.page-contact #main > footer {
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}
body.page-contact #main { margin: 0 !important; padding: 0 !important; }
body.page-contact #content-wrapper { margin-bottom: 0 !important; }
.fr-contact-faq { margin-bottom: 0 !important; }

/* —— Hero —— */
.fr-contact-hero {
  padding: 56px 0 40px;
  text-align: center;
}
.fr-contact-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.fr-contact-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--fr-green-deep);
  background: var(--fr-green-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 18px;
}
.fr-contact-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.fr-contact-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fr-mute);
  margin: 0;
}

/* —— Layout 2 cols —— */
.fr-contact-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: start;
}

/* —— Sidebar cards —— */
.fr-contact-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fr-contact-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
  border: 1px solid var(--fr-line);
}
.fr-contact-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-contact-card-body { flex: 1 1 auto; min-width: 0; }
.fr-contact-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-mute);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 6px;
}
.fr-contact-card-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-ink);
  margin: 0;
  font-weight: 500;
}
.fr-contact-card-link {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--fr-green-deep);
  text-decoration: none;
  margin-bottom: 4px;
  word-break: break-word;
}
.fr-contact-card-link:hover {
  color: var(--fr-green);
  text-decoration: none;
}
.fr-contact-card-meta {
  font-size: 13px;
  color: var(--fr-mute);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* —— Bloc social —— */
.fr-contact-card--social { background: var(--fr-cream-2); border-color: var(--fr-cream-2); }
.fr-contact-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.fr-contact-social-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.fr-contact-social-item:hover {
  background: var(--fr-green);
  transform: translateY(-1px);
  text-decoration: none;
  color: #FFFFFF;
}

/* —— Formulaire (override contactform.tpl) —— */
.fr-contact-form-wrap { min-width: 0; }
.fr-contact-form {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 36px 36px 32px;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
  border: 1px solid var(--fr-line);
}
.fr-contact-form form { margin: 0; }

/* Notifications PS9 (succès / erreur) */
.fr-contact-alert {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.fr-contact-alert ul { list-style: none; margin: 0; padding: 0; }
.fr-contact-alert--ok { background: var(--fr-green-light); color: var(--fr-green-deep); border: 1px solid #C8D9B7; }
.fr-contact-alert--error { background: #FCE8E6; color: #8B2A1F; border: 1px solid #F2C9C3; }

.fr-contact-field { margin-bottom: 18px; }
.fr-contact-field--gdpr { margin-top: 8px; }
.fr-contact-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-ink);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.fr-contact-required { color: var(--fr-green); font-weight: 700; }
.fr-contact-optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--fr-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Inputs / selects / textarea */
.fr-contact-input {
  width: 100%;
  border: 1px solid var(--fr-line);
  background: #FFFFFF;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--fr-ink);
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.fr-contact-input:focus {
  outline: none;
  border-color: var(--fr-green-deep);
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.1);
}
.fr-contact-input::placeholder { color: #B4B0A4; }
.fr-contact-textarea {
  resize: vertical;
  min-height: 120px;
}
.fr-contact-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  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='%232A4A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* File upload — pill créme */
.fr-contact-file { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fr-contact-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fr-contact-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fr-cream-2);
  color: var(--fr-green-deep);
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin: 0;
}
.fr-contact-file-btn:hover { background: var(--fr-green-light); }
.fr-contact-file-input:focus + .fr-contact-file-btn {
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.15);
}
.fr-contact-file-text { letter-spacing: 0.5px; }
.fr-contact-file-name {
  font-size: 13px;
  color: var(--fr-mute);
  font-style: italic;
}

/* Bouton ENVOYER */
.fr-contact-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
.fr-contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}
.fr-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.fr-contact-btn:hover {
  background: #1F3815;
  transform: translateY(-1px);
}
.fr-contact-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(42, 74, 30, 0.2); }
.fr-contact-btn svg { transition: transform 0.2s ease; }
.fr-contact-btn:hover svg { transform: translateX(2px); }

/* —— FAQ accordéon —— */
.fr-contact-faq {
  margin-top: 64px;
  padding: 56px 16px;
  background: #FFFFFF;
  border-top: 1px solid var(--fr-line);
  border-bottom: 1px solid var(--fr-line);
}
.fr-contact-faq-inner { max-width: 880px; margin: 0 auto; }
.fr-contact-faq-head { text-align: center; margin-bottom: 36px; }
.fr-contact-faq-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.fr-contact-faq-sub {
  font-size: 15px;
  color: var(--fr-mute);
  margin: 0;
  line-height: 1.6;
}
.fr-contact-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fr-contact-faq-item {
  border: 1px solid var(--fr-line);
  border-radius: 12px;
  background: var(--fr-cream);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fr-contact-faq-item[open] {
  border-color: var(--fr-green-deep);
  background: #FFFFFF;
}
.fr-contact-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fr-ink);
  user-select: none;
}
.fr-contact-faq-q::-webkit-details-marker { display: none; }
.fr-contact-faq-q::marker { display: none; }
.fr-contact-faq-chevron {
  flex: 0 0 18px;
  color: var(--fr-green-deep);
  transition: transform 0.2s ease;
}
.fr-contact-faq-item[open] .fr-contact-faq-chevron {
  transform: rotate(180deg);
}
.fr-contact-faq-a {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fr-mute);
}

/* —— Responsive —— Scope ≤1324 aligné sur breakpoint header burger. */
@media (max-width: 1324px) {
  .fr-contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fr-contact-form { padding: 28px 24px; }
}
@media (max-width: 600px) {
  .fr-contact-hero { padding: 36px 0 28px; }
  .fr-contact-form { padding: 24px 18px; }
  .fr-contact-faq { padding: 40px 12px; }
  .fr-contact-faq-q { padding: 14px 18px; font-size: 15px; }
  .fr-contact-faq-a { padding: 0 18px 18px; font-size: 14px; }
  .fr-contact-card { padding: 16px 18px; }
  .fr-contact-submit { justify-content: stretch; }
  .fr-contact-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   B-ACCOUNT — Page Mon compte (Forêt Profonde)
   Hero personnalisé + grille de cards + bandeau aide + signout
   ============================================================ */

/* Force full-width comme la page contact (le layout PS9 réserve une col gauche).
   On applique cette règle à toutes les pages compte client overridées en
   "Forêt Profonde" — ajoute simplement le sélecteur ici quand on en refonte
   une nouvelle. */
body#my-account #left-column,
body.page-my-account #left-column,
body#addresses #left-column,
body.page-addresses #left-column,
body#address #left-column,
body.page-address #left-column,
body#identity #left-column,
body.page-identity #left-column,
body#history #left-column,
body.page-history #left-column,
body#order-detail #left-column,
body.page-order-detail #left-column,
body#discount #left-column,
body.page-discount #left-column { display: none !important; }
body#my-account #content-wrapper,
body.page-my-account #content-wrapper,
body#addresses #content-wrapper,
body.page-addresses #content-wrapper,
body#address #content-wrapper,
body.page-address #content-wrapper,
body#identity #content-wrapper,
body.page-identity #content-wrapper,
body#history #content-wrapper,
body.page-history #content-wrapper,
body#order-detail #content-wrapper,
body.page-order-detail #content-wrapper,
body#discount #content-wrapper,
body.page-discount #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#my-account #wrapper > .container,
body#my-account #wrapper > .container > .row,
body.page-my-account #wrapper > .container,
body.page-my-account #wrapper > .container > .row,
body#addresses #wrapper > .container,
body#addresses #wrapper > .container > .row,
body.page-addresses #wrapper > .container,
body.page-addresses #wrapper > .container > .row,
body#address #wrapper > .container,
body#address #wrapper > .container > .row,
body.page-address #wrapper > .container,
body.page-address #wrapper > .container > .row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#my-account .page-content,
body.page-my-account .page-content,
body#addresses .page-content,
body.page-addresses .page-content,
body#address .page-content,
body.page-address .page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body#my-account .page-footer,
body.page-my-account .page-footer,
body#addresses .page-footer,
body.page-addresses .page-footer,
body#address .page-footer,
body.page-address .page-footer { margin: 0 !important; padding: 0 !important; }
body#my-account #main, body.page-my-account #main,
body#addresses #main, body.page-addresses #main,
body#address #main, body.page-address #main { margin: 0 !important; padding: 0 !important; }

.fr-account-page {
  --fr-green-deep: #2A4A1E;
  --fr-green: #3F6B2E;
  --fr-green-light: #E5EDD9;
  --fr-cream: #F6F2EA;
  --fr-cream-2: #EDE5D2;
  --fr-ink: #1F2614;
  --fr-mute: #6B7560;
  --fr-line: #E0DAC9;
  background: transparent; /* hérite du gris naturel du body — uniforme avec la zone footer (Retour/Accueil) */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* —— Hero —— */
.fr-account-hero {
  padding: 56px 0 40px;
  text-align: center;
}
.fr-account-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.fr-account-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--fr-green-deep);
  background: var(--fr-green-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 18px;
}
.fr-account-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.fr-account-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fr-mute);
  margin: 0;
}

/* —— Content wrapper —— */
.fr-account-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* —— Grille de cards —— */
.fr-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.fr-account-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  position: relative;
}
.fr-account-card:hover {
  border-color: var(--fr-green-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(42, 74, 30, 0.1);
  text-decoration: none;
  color: inherit;
}
.fr-account-card-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.fr-account-card:hover .fr-account-card-icon {
  background: var(--fr-green-deep);
  color: #FFFFFF;
}
.fr-account-card-body { flex: 1 1 auto; min-width: 0; }
.fr-account-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.fr-account-card-text {
  font-size: 13px;
  color: var(--fr-mute);
  line-height: 1.5;
  margin: 0;
}
.fr-account-card-arrow {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fr-account-card:hover .fr-account-card-arrow {
  background: var(--fr-green-deep);
  color: #FFFFFF;
  transform: translateX(2px);
}

/* —— Bandeau "Besoin d'aide" —— */
.fr-account-help {
  background: var(--fr-cream);
  border-top: 1px solid var(--fr-line);
  padding: 48px 16px;
}
.fr-account-help-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.fr-account-help-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fr-account-help-text { min-width: 0; }
.fr-account-help-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.fr-account-help-sub {
  font-size: 14px;
  color: var(--fr-mute);
  line-height: 1.6;
  margin: 0 0 14px;
}
.fr-account-help-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.fr-account-help-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fr-green-deep);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
.fr-account-help-channel:hover { color: var(--fr-green); text-decoration: none; }
.fr-account-help-hours {
  font-style: normal;
  color: var(--fr-mute);
  font-weight: 500;
  font-size: 13px;
}
.fr-account-help-hours-line {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--fr-mute);
  line-height: 1.5;
}
.fr-account-help-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.fr-account-help-cta:hover {
  background: #1F3815;
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}
.fr-account-help-cta svg { transition: transform 0.2s ease; }
.fr-account-help-cta:hover svg { transform: translateX(2px); }

/* —— Bouton Sign out (page_footer) —— */
.fr-account-signout {
  text-align: center;
  padding: 18px 16px 18px;
}
.fr-account-signout-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fr-mute);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.fr-account-signout-link:hover {
  color: var(--fr-green-deep);
  background: var(--fr-cream);
  text-decoration: none;
}

/* —— Responsive —— */
@media (max-width: 900px) {
  .fr-account-hero { padding: 36px 0 28px; }
  /* Padding latéral généreux pour éviter que cards/forms collent aux bords
     du téléphone — couvre les 8 pages compte (my-account, addresses, address,
     identity, history, order-slip, discount, gdpr) qui utilisent toutes ces
     classes communes. Sélecteur `body#X .page-content.fr-account-content`
     obligatoire pour battre la règle `body#X .page-content { padding:0 !important }`
     posée plus haut (spec 0,1,2,1) — on monte à 0,1,3,1 via les 2 classes
     sur le même élément. */
  .fr-account-hero-inner { padding: 0 20px !important; }
  body#my-account .page-content.fr-account-content,
  body.page-my-account .page-content.fr-account-content,
  body#addresses .page-content.fr-account-content,
  body.page-addresses .page-content.fr-account-content,
  body#address .page-content.fr-account-content,
  body.page-address .page-content.fr-account-content,
  body#identity .page-content.fr-account-content,
  body.page-identity .page-content.fr-account-content,
  body#history .page-content.fr-account-content,
  body.page-history .page-content.fr-account-content,
  body#order-slip .page-content.fr-account-content,
  body.page-order-slip .page-content.fr-account-content,
  body#discount .page-content.fr-account-content,
  body.page-discount .page-content.fr-account-content,
  body#module-psgdpr-gdpr .page-content.fr-account-content {
    padding: 0 20px 40px !important;
  }
  .fr-account-help-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }
  .fr-account-help-icon { margin: 0 auto; }
  .fr-account-help-channels { justify-content: center; }
  .fr-account-help-cta { justify-self: center; }
}
@media (max-width: 480px) {
  .fr-account-card { padding: 18px 18px; gap: 14px; }
  .fr-account-card-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .fr-account-card-title { font-size: 15px; }
  .fr-account-card-arrow { display: none; }
}

/* ============================================================
   B-ADDRESSES — Page /adresses (sous-section B-Account)
   ============================================================ */

/* Reuse du wrapping fullwidth de B-Account (deja applique via les selecteurs
   body#addresses / body.page-addresses dans la section "page customer-account") */

.fr-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.fr-address-card {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.fr-address-card:hover {
  border-color: var(--fr-green-deep);
  box-shadow: 0 8px 24px rgba(42, 74, 30, 0.08);
}
.fr-address-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fr-address-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-address-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0;
  letter-spacing: -0.2px;
  flex: 1 1 auto;
  min-width: 0;
}
.fr-address-card-body {
  font-size: 14px;
  color: var(--fr-ink);
  line-height: 1.7;
  margin: 0;
  font-style: normal;
  flex: 1 1 auto;
}
.fr-address-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--fr-line);
  margin-top: auto;
}
.fr-address-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.fr-address-action--edit {
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  border-color: var(--fr-green-light);
}
.fr-address-action--edit:hover {
  background: var(--fr-green-deep);
  color: #FFFFFF;
  text-decoration: none;
}
.fr-address-action--delete {
  background: transparent;
  color: var(--fr-mute);
  border-color: var(--fr-line);
}
.fr-address-action--delete:hover {
  color: #8B2A1F;
  border-color: #F2C9C3;
  background: #FCE8E6;
  text-decoration: none;
}

/* Card "Ajouter une nouvelle adresse" — CTA dashed */
.fr-address-card--add {
  background: var(--fr-cream);
  border: 2px dashed var(--fr-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 32px 22px;
  min-height: 200px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.fr-address-card--add:hover {
  border-color: var(--fr-green-deep);
  background: var(--fr-green-light);
  text-decoration: none;
  transform: translateY(-2px);
}
.fr-address-card-add-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(42, 74, 30, 0.08);
}
.fr-address-card-add-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-ink);
  margin-bottom: 4px;
}
.fr-address-card-add-sub {
  display: block;
  font-size: 12px;
  color: var(--fr-mute);
  line-height: 1.5;
}

/* Footer nav (Retour / Accueil) */
.fr-addresses-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 32px 16px 48px;
  border-top: 1px solid var(--fr-line);
  margin-top: 24px;
}
.fr-addresses-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fr-mute);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.fr-addresses-nav-link:hover {
  color: var(--fr-green-deep);
  background: var(--fr-cream);
  text-decoration: none;
}

@media (max-width: 480px) {
  .fr-address-card { padding: 18px 18px; }
  .fr-address-card--add { min-height: 160px; padding: 24px 18px; }
  .fr-addresses-nav { gap: 12px; flex-direction: column; align-items: center; }
}

/* ============================================================
   B-ADDRESS-FORM — Page /adresse (création + édition)
   Reflow du form-fields.tpl (Bootstrap row labels-left) en stacked
   labels-au-dessus + styling Forêt Profonde, scopé body#address.
   ============================================================ */

body#address .fr-address-form-wrap {
  max-width: 760px;
  margin: 0 auto;
}
body#address .fr-address-form {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  padding: 36px 36px 28px;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
}
body#address .fr-address-form form { margin: 0; }

/* Stacked layout pour chaque form-group rendu par form-fields.tpl */
body#address .form-group.row {
  display: block !important;
  margin: 0 0 18px !important;
  flex-direction: column;
}
body#address .form-group.row > label,
body#address .form-group.row > .col-md-3,
body#address .form-group.row > .col-md-6,
body#address .form-group.row > .js-input-column {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#address .form-group.row label.form-control-label {
  display: block !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fr-ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.2px;
}
/* Asterisque PS natif (::before/::after) caché — on a le notre via fr-form-required */
body#address .form-group.row label.required::before,
body#address .form-group.row label.required::after {
  content: none !important;
}
body#address .fr-form-required {
  color: var(--fr-green) !important;
  font-weight: 700;
  margin-left: 4px;
}

/* Inputs / selects / textareas */
body#address .form-group.row .form-control,
body#address .form-group.row input[type="text"],
body#address .form-group.row input[type="email"],
body#address .form-group.row input[type="tel"],
body#address .form-group.row input[type="number"],
body#address .form-group.row input[type="password"],
body#address .form-group.row select,
body#address .form-group.row textarea {
  width: 100% !important;
  border: 1px solid var(--fr-line) !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: var(--fr-ink) !important;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  height: auto !important;
}
body#address .form-group.row .form-control:focus,
body#address .form-group.row input:focus,
body#address .form-group.row select:focus,
body#address .form-group.row textarea:focus {
  outline: none !important;
  border-color: var(--fr-green-deep) !important;
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.1) !important;
}
body#address .form-group.row .form-control::placeholder { color: #B4B0A4; }

/* Champ readonly Pays France (override form-fields.tpl B6 — déjà en place) */
body#address .fr-form-readonly,
body#address input.fr-form-readonly {
  background: var(--fr-cream-2) !important;
  color: var(--fr-mute) !important;
  border-color: var(--fr-cream-2) !important;
  cursor: not-allowed;
}

/* Cache la colonne "(Optional)" parasite à droite des Bootstrap form-group */
body#address .form-group.row > .col-md-3:last-child,
body#address .form-group.row .form-control-comment {
  display: none !important;
}

/* Cache les fields filtrés du B6 form-fields override (alias en hidden) */
body#address .fr-form-hidden { display: none !important; }

/* Cache le helper text "Seules les lettres et le point sont autorisés"
   qui peut sortir comme commentaire sous certains champs */
body#address .form-group.row .form-control-comment + .form-control-comment { display: none; }

/* Bouton ENREGISTRER */
.fr-address-form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.fr-address-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 14px 36px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  font-family: inherit;
}
.fr-address-submit:hover {
  background: #1F3815;
  transform: translateY(-1px);
}
.fr-address-submit:focus { outline: none; box-shadow: 0 0 0 4px rgba(42, 74, 30, 0.2); }
.fr-address-submit svg { transition: transform 0.2s ease; }
.fr-address-submit:hover svg { transform: scale(1.1); }

@media (max-width: 600px) {
  body#address .fr-address-form { padding: 24px 18px; }
  .fr-address-form-footer { justify-content: stretch; }
  .fr-address-submit { width: 100%; justify-content: center; }
}

/* ============================================================
   B-IDENTITY — Page /identite (Mes coordonnées)
   Reuse des regles body#address en alias body#identity (form-fields.tpl
   rendu identique des 2 cotes -- on duplique juste le scope).
   ============================================================ */

/* Layout fullwidth */
body#identity #left-column { display: none !important; }
body#identity #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#identity #wrapper > .container,
body#identity #wrapper > .container > .row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#identity .page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body#identity .page-footer { margin: 0 !important; padding: 0 !important; }
body#identity #main { margin: 0 !important; padding: 0 !important; }

/* Form card */
body#identity .fr-address-form-wrap {
  max-width: 760px;
  margin: 0 auto;
}
body#identity .fr-address-form {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  padding: 36px 36px 28px;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
}
body#identity .fr-address-form form { margin: 0; }

/* Stacked form */
body#identity .form-group.row {
  display: block !important;
  margin: 0 0 18px !important;
}
body#identity .form-group.row > label,
body#identity .form-group.row > .col-md-3,
body#identity .form-group.row > .col-md-6,
body#identity .form-group.row > .js-input-column {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#identity .form-group.row label.form-control-label {
  display: block !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fr-ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.2px;
}
body#identity .form-group.row label.required::before,
body#identity .form-group.row label.required::after { content: none !important; }

body#identity .form-group.row .form-control,
body#identity .form-group.row input[type="text"],
body#identity .form-group.row input[type="email"],
body#identity .form-group.row input[type="tel"],
body#identity .form-group.row input[type="number"],
body#identity .form-group.row input[type="password"],
body#identity .form-group.row select,
body#identity .form-group.row textarea {
  width: 100% !important;
  border: 1px solid var(--fr-line) !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: var(--fr-ink) !important;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  height: auto !important;
}
body#identity .form-group.row .form-control:focus,
body#identity .form-group.row input:focus,
body#identity .form-group.row select:focus,
body#identity .form-group.row textarea:focus {
  outline: none !important;
  border-color: var(--fr-green-deep) !important;
  box-shadow: 0 0 0 3px rgba(42, 74, 30, 0.1) !important;
}
body#identity .form-group.row .form-control::placeholder { color: #B4B0A4; }

/* Champs cachés (alias B6) + colonne Optional + commentaires natifs */
body#identity .fr-form-hidden { display: none !important; }
body#identity .form-group.row > .col-md-3:last-child { display: none !important; }
body#identity .form-group.row .form-control-comment { display: none !important; }

/* Bouton "Show password" PS9 sur le champ password — restyle pill discret */
body#identity .field-password-policy .input-group {
  position: relative;
}
body#identity .field-password-policy .input-group-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
body#identity .field-password-policy .input-group-btn .btn {
  background: transparent;
  border: 0;
  color: var(--fr-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
body#identity .field-password-policy .input-group-btn .btn:hover {
  background: var(--fr-cream);
  color: var(--fr-green-deep);
}
body#identity .field-password-policy input[type="password"],
body#identity .field-password-policy input[type="text"] {
  padding-right: 80px !important;
}

@media (max-width: 600px) {
  body#identity .fr-address-form { padding: 24px 18px; }
}

/* ============================================================
   B-ACCOUNT-LIST — Pages liste compte (history, order-slip, discount, gdpr)
   Layout fullwidth + table stylee + empty state + GDPR cards
   ============================================================ */

/* Layout fullwidth (mirror des regles body#address) */
body#history #left-column,
body#order-slip #left-column,
body#discount #left-column,
body#module-psgdpr-gdpr #left-column { display: none !important; }
body#history #content-wrapper,
body#order-slip #content-wrapper,
body#discount #content-wrapper,
body#module-psgdpr-gdpr #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#history #wrapper > .container,
body#history #wrapper > .container > .row,
body#order-slip #wrapper > .container,
body#order-slip #wrapper > .container > .row,
body#discount #wrapper > .container,
body#discount #wrapper > .container > .row,
body#module-psgdpr-gdpr #wrapper > .container,
body#module-psgdpr-gdpr #wrapper > .container > .row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#history .page-content,
body#order-slip .page-content,
body#discount .page-content,
body#module-psgdpr-gdpr .page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body#history .page-footer,
body#order-slip .page-footer,
body#discount .page-footer,
body#module-psgdpr-gdpr .page-footer { margin: 0 !important; padding: 0 !important; }
body#history #main, body#order-slip #main,
body#discount #main, body#module-psgdpr-gdpr #main { margin: 0 !important; padding: 0 !important; }

/* Gap fix entre tabs et reassurance bar */
body#history #wrapper, body#order-slip #wrapper,
body#discount #wrapper, body#module-psgdpr-gdpr #wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body#history #wrapper > .container,
body#order-slip #wrapper > .container,
body#discount #wrapper > .container,
body#module-psgdpr-gdpr #wrapper > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* —— Table desktop —— */
.fr-account-table-wrap {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
}
.fr-account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--fr-ink);
  margin: 0;
}
.fr-account-table thead th {
  background: var(--fr-cream);
  color: var(--fr-mute);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--fr-line);
  white-space: nowrap;
}
.fr-account-table tbody td,
.fr-account-table tbody th {
  padding: 16px 18px;
  border-bottom: 1px solid var(--fr-line);
  vertical-align: middle;
  font-weight: 500;
}
.fr-account-table tbody tr:last-child td,
.fr-account-table tbody tr:last-child th { border-bottom: 0; }
.fr-account-table tbody tr:hover { background: var(--fr-cream); }
.fr-account-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--fr-green-deep);
}
.fr-account-table-amount { font-weight: 700; color: var(--fr-ink); }
.fr-account-table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.fr-account-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Si le bg-color natif PS est trop clair → fallback dark text */
.fr-account-status-pill.bright { color: var(--fr-ink); }
.fr-account-status-pill.dark { color: #FFFFFF; }

.fr-account-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  background: var(--fr-cream-2);
  color: var(--fr-green-deep);
  border: 1px solid var(--fr-cream-2);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.fr-account-action-btn:hover {
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  text-decoration: none;
}
.fr-account-action-btn--primary {
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border-color: var(--fr-green-deep);
}
.fr-account-action-btn--primary:hover {
  background: #1F3815;
  color: #FFFFFF;
}

.fr-account-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--fr-green-deep);
  transition: background 0.15s ease;
}
.fr-account-icon-link:hover { background: var(--fr-green-light); text-decoration: none; }

.fr-account-link {
  color: var(--fr-green-deep);
  font-weight: 600;
  text-decoration: none;
}
.fr-account-link:hover { color: var(--fr-green); text-decoration: underline; }

.fr-account-code {
  display: inline-block;
  padding: 4px 10px;
  background: var(--fr-cream);
  border: 1px dashed var(--fr-line);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-green-deep);
  letter-spacing: 0.5px;
}

/* —— Vue mobile (cards empilees) —— */
.fr-account-mobile-list { display: flex; flex-direction: column; gap: 12px; }
.fr-account-mobile-item {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fr-account-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fr-account-mobile-ref {
  font-weight: 700;
  color: var(--fr-green-deep);
  text-decoration: none;
}
.fr-account-mobile-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--fr-mute);
  gap: 10px;
}
.fr-account-mobile-meta strong { color: var(--fr-ink); font-weight: 700; }
.fr-account-mobile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* —— Empty state —— */
.fr-account-empty {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.04);
}
.fr-account-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--fr-cream);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.fr-account-empty-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fr-mute);
  margin: 0 auto 22px;
  max-width: 480px;
}
.fr-account-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.fr-account-empty-cta:hover {
  background: #1F3815;
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}
.fr-account-empty-cta svg { transition: transform 0.2s ease; }
.fr-account-empty-cta:hover svg { transform: translateX(2px); }

/* —— Page GDPR : 2 cards larges —— */
.fr-gdpr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.fr-gdpr-card {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 16px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(42, 74, 30, 0.06);
}
.fr-gdpr-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-gdpr-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.fr-gdpr-card-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fr-mute);
  margin: 0 0 16px;
}
.fr-gdpr-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fr-gdpr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}
.fr-gdpr-btn:hover { background: #1F3815; color: #FFFFFF; text-decoration: none; }
.fr-gdpr-btn--ghost {
  background: transparent;
  color: var(--fr-green-deep);
  border: 1px solid var(--fr-line);
}
.fr-gdpr-btn--ghost:hover {
  background: var(--fr-cream);
  color: var(--fr-green-deep);
  border-color: var(--fr-green-deep);
}

@media (max-width: 600px) {
  .fr-gdpr-card { grid-template-columns: 1fr; padding: 22px 20px; gap: 14px; }
  .fr-gdpr-card-icon { width: 48px; height: 48px; }
  .fr-gdpr-card-title { font-size: 17px; }
  .fr-account-empty { padding: 40px 22px; }
  .fr-account-table-wrap { background: transparent; border: 0; box-shadow: none; }
}

/* ============================================================
   B-CMS — Pages d'information (Forêt Profonde)
   Couvre toutes les pages CMS (qui-sommes-nous, vertus-des-plantes,
   avis-clients, CGV, retours, mentions, confidentialité…) via un
   seul template themes/.../templates/cms/page.tpl.
   Body PS9 : body#cms (page_name = "cms" pour toutes ces pages).
   ============================================================ */

.fr-cms-page {
  --fr-ink: #1F2614;
  --fr-mute: #6B7560;
  --fr-line: #E0DAC9;
  background: transparent;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* —— Layout fullwidth (mirror B-Account) —— */
body#cms #left-column { display: none !important; }
body#cms #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#cms #wrapper > .container,
body#cms #wrapper > .container > .row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#cms #wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body#cms #wrapper > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body#cms .page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body#cms #main { margin: 0 !important; padding: 0 !important; }
body#cms .page-footer { margin: 0 !important; padding: 0 !important; }

/* —— Hero —— */
.fr-cms-hero {
  padding: 56px 0 40px;
  text-align: center;
}
.fr-cms-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.fr-cms-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--fr-green-deep);
  background: var(--fr-green-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 18px;
}
.fr-cms-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.fr-cms-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fr-mute);
  margin: 0;
}

/* —— Section content wrap —— */
.fr-cms-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* —— Article content card —— */
.fr-cms-content {
  background: #FFFFFF;
  border: 1px solid var(--fr-line);
  border-radius: 20px;
  padding: 48px 56px;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: 0 6px 26px rgba(42, 74, 30, 0.06);
  color: var(--fr-ink);
  font-size: 16px;
  line-height: 1.75;
}
.fr-cms-content > *:first-child { margin-top: 0; }
.fr-cms-content > *:last-child { margin-bottom: 0; }

/* Typographie article */
.fr-cms-content h1 {
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  color: var(--fr-ink);
  margin: 36px 0 14px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.fr-cms-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--fr-green-deep);
  margin: 36px 0 14px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.fr-cms-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 28px 0 10px;
  line-height: 1.3;
}
.fr-cms-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 22px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.fr-cms-content p {
  margin: 0 0 18px;
  color: var(--fr-ink);
}
.fr-cms-content p + p { margin-top: 0; }
.fr-cms-content strong, .fr-cms-content b { color: var(--fr-ink); font-weight: 700; }
.fr-cms-content em, .fr-cms-content i { color: var(--fr-mute); }
.fr-cms-content a {
  color: var(--fr-green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.fr-cms-content a:hover {
  color: var(--fr-green-mid);
  text-decoration-thickness: 2px;
}

/* Listes */
.fr-cms-content ul,
.fr-cms-content ol {
  margin: 0 0 22px;
  padding-left: 26px;
}
.fr-cms-content li {
  margin: 0 0 8px;
  padding-left: 4px;
}
.fr-cms-content ul li::marker { color: var(--fr-green-deep); }
.fr-cms-content ol li::marker { color: var(--fr-green-deep); font-weight: 700; }
.fr-cms-content ul ul,
.fr-cms-content ol ol,
.fr-cms-content ul ol,
.fr-cms-content ol ul { margin: 6px 0 6px; }

/* Blockquote (mise en exergue) */
.fr-cms-content blockquote {
  margin: 28px 0;
  padding: 22px 28px;
  background: var(--fr-cream);
  border-left: 4px solid var(--fr-green-deep);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--fr-ink);
  font-size: 17px;
  line-height: 1.7;
}
.fr-cms-content blockquote p:last-child { margin-bottom: 0; }
.fr-cms-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--fr-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Tables (CGV, mentions, etc.) */
.fr-cms-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--fr-line);
}
.fr-cms-content thead th {
  background: var(--fr-cream);
  color: var(--fr-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--fr-line);
}
.fr-cms-content tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--fr-line);
  color: var(--fr-ink);
}
.fr-cms-content tbody tr:last-child td { border-bottom: 0; }
.fr-cms-content tbody tr:hover td { background: rgba(246, 242, 234, 0.5); }

/* Hr — séparateur discret */
.fr-cms-content hr {
  border: 0;
  height: 1px;
  background: var(--fr-line);
  margin: 36px 0;
}

/* Images & figures */
.fr-cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 22px auto;
}
.fr-cms-content figure {
  margin: 28px 0;
  text-align: center;
}
.fr-cms-content figure img { margin: 0 auto; }
.fr-cms-content figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--fr-mute);
  font-style: italic;
}

/* Code (rare mais possible — mentions techniques) */
.fr-cms-content code {
  background: var(--fr-cream);
  border: 1px solid var(--fr-line);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--fr-green-deep);
}
.fr-cms-content pre {
  background: var(--fr-cream);
  border: 1px solid var(--fr-line);
  border-radius: 10px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 22px 0;
}
.fr-cms-content pre code { background: transparent; border: 0; padding: 0; }

/* —— Footer nav (Retour / Accueil) —— */
.fr-cms-nav {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 16px 56px;
}
.fr-cms-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--fr-mute);
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.fr-cms-nav-link:hover {
  background: var(--fr-cream);
  color: var(--fr-green-deep);
  border-color: var(--fr-green-deep);
  text-decoration: none;
}

/* CTA pill reutilisable dans le contenu CMS (ex: page Cookies) */
.fr-cms-content a.fr-cms-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  margin: 8px 0;
  background: var(--fr-green-deep);
  color: #FFFFFF !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.fr-cms-content a.fr-cms-cta-pill:hover {
  background: #1F3815;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* —— Responsive —— */
@media (max-width: 900px) {
  .fr-cms-hero { padding: 40px 0 28px; }
  .fr-cms-content {
    padding: 32px 22px;
    border-radius: 16px;
  }
  .fr-cms-content h1 { font-size: 24px; }
  .fr-cms-content h2 { font-size: 20px; }
  .fr-cms-content h3 { font-size: 17px; }
  .fr-cms-content blockquote { padding: 18px 20px; font-size: 16px; }
  /* Padding latéral généreux pour éviter que la card CMS colle aux bords
     du téléphone. Mêmes 20px que les pages compte. Sélecteur `body#cms
     .page-content.fr-cms-section` (spec 0,1,3,1) pour battre la règle
     `body#cms .page-content { padding: 0 !important }` posée plus haut. */
  .fr-cms-hero-inner { padding: 0 20px !important; }
  body#cms .page-content.fr-cms-section {
    padding: 0 20px 40px !important;
  }
  .fr-cms-nav { padding: 18px 20px 40px; }
}

/* ============================================================
   B-SEARCH — Page de résultats /recherche?s=...
   Mirror du fix layout B-Account / B-CMS pour éliminer la bande crème
   parasite entre la reassurance bar et le contenu.
   ============================================================ */
body#search #left-column { display: none !important; }
body#search #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body#search #wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
body#search #wrapper > .container,
body#search #wrapper > .container > .row {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
body#search .breadcrumb {
  background: transparent !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
body#search .page-content,
body#search #main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body#search .page-footer { margin: 0 !important; padding: 0 !important; }

/* —— Hero recherche —— */
.fr-search-hero {
  padding: 48px 0 28px;
  text-align: center;
}
.fr-search-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
}
.fr-search-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--fr-green-deep);
  background: var(--fr-green-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 16px;
}
.fr-search-title {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.4px;
}
.fr-search-title em {
  font-style: normal;
  color: var(--fr-green-deep);
  border-bottom: 3px solid var(--fr-amber);
  padding-bottom: 2px;
}
.fr-search-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-text-muted);
  margin: 0;
}

/* —— Restyle "produits-top" (compteur + dropdown tri) ——
   Force-flush du fond/bordure/padding qui creent la grosse card visuelle
   par defaut, en ciblant tous les wrappers possibles de PS9. */
body#search #js-product-list-top,
body#search .products-selection,
body#search .products-selection > .row,
body#search .products-selection > .row > [class*="col-"],
body#search .products-selection .col-md-9,
body#search .products-selection .col-md-3 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body#search .products-selection {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  max-width: 1280px;
  margin: 8px auto 36px !important;
  padding: 0 15px !important;
  border: 0 !important;
  text-align: left !important;
}
/* Triple defense : padding-bottom sur le wrapper top + margin-top sur le list,
   au cas ou le margin-bottom de products-selection serait avale par un parent */
body#search #js-product-list-top {
  padding-bottom: 28px !important;
  margin-bottom: 0 !important;
}
body#search #js-product-list {
  margin-top: 8px !important;
  padding-top: 0 !important;
}
body#search #products {
  display: block !important;
}
/* Casse la structure Bootstrap row/col-md-9/col-md-3 qui poussait le tri a droite */
body#search .products-selection > .row {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body#search .products-selection > .row > [class*="col-"],
body#search .products-selection .col-md-9,
body#search .products-selection .col-md-3,
body#search .products-selection .col-sm-9,
body#search .products-selection .col-sm-3 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* La col-md-9 est vide (total-products + section-title caches) → on la supprime */
body#search .products-selection .col-md-9:empty,
body#search .products-selection .col-sm-9:empty {
  display: none !important;
}
body#search .products-selection .col-md-9 .total-products,
body#search .products-selection .col-md-9 .products-section-title {
  display: none !important;
}
/* Annule le text-sm-right qui alignait le dropdown a droite */
body#search .products-selection .text-sm-right {
  text-align: left !important;
}

/* Cache le compteur "Il y a X produit(s)." (redondant avec le sub du hero) */
body#search .products-selection .total-products,
body#search .total-products {
  display: none !important;
}

/* Cache aussi le "Sort by" titre mobile et le filter button hidden-sm-down */
body#search .products-section-title {
  display: none !important;
}

/* Dropdown de tri : pill cream discret aligne a droite, taille auto contenue */
body#search .products-sort-order,
body#search .products-sort-order.dropdown {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  flex: 0 0 auto !important;
  margin-left: 18px !important;   /* espace entre "Trier par :" et le bouton */
}
body#search .sort-by-row {
  gap: 18px !important;            /* espace si un .sort-by-row wrappe les 2 */
}
body#search .sort-by {
  margin-right: 4px;
}
body#search .products-sort-order .select-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: auto !important;
  min-width: 140px;
  max-width: 200px;
  background: var(--fr-cream) !important;
  border: 1px solid var(--fr-border) !important;
  border-radius: 999px !important;
  padding: 7px 12px 7px 14px !important;
  color: var(--fr-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
body#search .products-sort-order .select-title:hover {
  background: #EAE3D2 !important;
  border-color: var(--fr-green-deep) !important;
}
body#search .products-sort-order .select-title i.material-icons {
  font-size: 18px;
  color: var(--fr-text-muted);
}
body#search .products-sort-order .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--fr-border);
  box-shadow: 0 6px 22px rgba(42, 74, 30, 0.12);
  padding: 6px;
}
body#search .products-sort-order .select-list {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fr-text-primary);
}
body#search .products-sort-order .select-list:hover {
  background: var(--fr-cream);
  color: var(--fr-green-deep);
}

/* —— Empty state (zero resultat) —— */
.fr-search-empty {
  padding: 0 16px 64px;
  display: flex;
  justify-content: center;
}
.fr-search-empty-card {
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 26px rgba(42, 74, 30, 0.06);
}
.fr-search-empty-icon {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--fr-cream);
  color: var(--fr-green-deep);
  margin: 0 auto 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-search-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}
.fr-search-empty-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fr-text-muted);
  margin: 0 0 26px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.fr-search-empty-text strong {
  color: var(--fr-text-primary);
  font-weight: 700;
}
.fr-search-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}
.fr-search-empty-cta:hover {
  background: #1F3815;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 600px) {
  .fr-search-hero { padding: 32px 0 20px; }
  .fr-search-empty-card { padding: 36px 22px; border-radius: 16px; }
  .fr-search-empty-icon { width: 64px; height: 64px; margin-bottom: 16px; }
  .fr-search-empty-title { font-size: 19px; }
}

/* ============================================================
   B-AVIS-LIST — Page front /module/framedisavis/list
   Liste paginée de tous les avis approuvés (productcomments)
   ============================================================ */

/* Layout fullwidth (pages module front utilisent body#module-framedisavis-list).
   On force toute la chaîne wrapper > container > row > col > main à 100% width
   pour que `.fr-avis-list-section { max-width: 1200px; margin: 0 auto }` puisse
   réellement centrer. Bootstrap impose sinon des width fixes via
   .container/.row/.col qui empêchent les enfants de se centrer. */
body[id^="module-framedisavis"] #left-column,
body.module-framedisavis-list #left-column { display: none !important; }

body[id^="module-framedisavis"] #wrapper,
body.module-framedisavis-list #wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 0 !important;
  margin: 0 !important;
}
body[id^="module-framedisavis"] #wrapper > .container,
body.module-framedisavis-list #wrapper > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[id^="module-framedisavis"] #wrapper .row,
body.module-framedisavis-list #wrapper .row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body[id^="module-framedisavis"] #content-wrapper,
body.module-framedisavis-list #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
body[id^="module-framedisavis"] .page-content,
body[id^="module-framedisavis"] #main,
body.module-framedisavis-list .page-content,
body.module-framedisavis-list #main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* —— Hero —— */
.fr-avis-list-hero {
  padding: 56px 0 36px;
  text-align: center;
}
.fr-avis-list-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.fr-avis-list-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--fr-green-deep);
  background: var(--fr-green-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 18px;
}
.fr-avis-list-title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 14px;
  letter-spacing: -0.4px;
}
.fr-avis-list-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fr-text-muted);
  margin: 0 0 28px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* —— Summary card (note moyenne + total) —— */
.fr-avis-list-summary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(42, 74, 30, 0.06);
}
.fr-avis-list-score {
  font-size: 36px;
  font-weight: 700;
  color: var(--fr-green-deep);
  line-height: 1;
  letter-spacing: -1px;
}
.fr-avis-list-score-max {
  font-size: 18px;
  color: var(--fr-text-muted);
  font-weight: 500;
  margin-left: 2px;
}
.fr-avis-list-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 22px;
  line-height: 1;
}
.fr-avis-list-count {
  font-size: 13px;
  color: var(--fr-text-muted);
  text-align: left;
  line-height: 1.5;
}
.fr-avis-list-count strong {
  color: var(--fr-text-primary);
  font-weight: 700;
}

/* Stars (réutilisable) */
.fr-star {
  color: #E4DDD0;
  font-size: 1em;
}
.fr-star-on {
  color: var(--fr-amber);
}

/* —— Filtres pills (Tous · 5★ · 4★…) —— */
.fr-avis-list-filters {
  padding: 0 16px 24px;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fr-avis-list-filters-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.fr-avis-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text-primary);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.fr-avis-pill:hover {
  background: var(--fr-cream);
  border-color: var(--fr-green-deep);
  color: var(--fr-green-deep);
  text-decoration: none;
}
/* Pas d'outline noir au clic souris ; outline ambre uniquement au focus clavier. */
.fr-avis-pill:focus { outline: none; }
.fr-avis-pill:focus-visible {
  outline: 2px solid var(--fr-amber, #C07C2A);
  outline-offset: 2px;
}
.fr-avis-pill-active {
  background: var(--fr-green-deep) !important;
  border-color: var(--fr-green-deep) !important;
  color: #FFFFFF !important;
}
.fr-avis-pill-active:hover { background: #1F3815 !important; color: #FFFFFF !important; }
.fr-avis-pill-active .fr-star-on { color: #FFCB6B; }
.fr-avis-pill-count {
  color: var(--fr-text-muted);
  font-weight: 500;
  font-size: 12px;
}
.fr-avis-pill-active .fr-avis-pill-count { color: rgba(255, 255, 255, 0.78); }

/* —— Grille avis —— */
.fr-avis-list-section {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px 56px;
}
.fr-avis-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.fr-avis-list-card {
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 4px 14px rgba(42, 74, 30, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fr-avis-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(42, 74, 30, 0.08);
}
.fr-avis-list-card-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.fr-avis-list-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fr-green-light);
  color: var(--fr-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.fr-avis-list-card-meta { min-width: 0; }
.fr-avis-list-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-avis-list-card-date {
  font-size: 12px;
  color: var(--fr-text-muted);
}
.fr-avis-list-card-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
  line-height: 1;
}
.fr-avis-list-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 8px;
  line-height: 1.35;
}
.fr-avis-list-card-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fr-text-mid);
  margin: 0;
  flex-grow: 1;
}
.fr-avis-list-card-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fr-border);
  font-size: 13px;
  color: var(--fr-green-deep);
  text-decoration: none;
  font-weight: 500;
}
.fr-avis-list-card-product strong {
  font-weight: 700;
  margin-left: 2px;
}
.fr-avis-list-card-product:hover {
  color: var(--fr-green-mid);
  text-decoration: none;
}
/* Pas d'outline noir au clic souris ; un outline ambre s'affiche
   uniquement en navigation clavier (Tab) pour rester accessible. */
.fr-avis-list-card-product:focus { outline: none; }
.fr-avis-list-card-product:focus-visible {
  outline: 2px solid var(--fr-amber, #C07C2A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* —— Pagination —— */
.fr-avis-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.fr-avis-page-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 999px;
  color: var(--fr-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.fr-avis-page-link:hover {
  background: var(--fr-cream);
  border-color: var(--fr-green-deep);
  color: var(--fr-green-deep);
  text-decoration: none;
}
.fr-avis-page-link-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.fr-avis-page-info {
  font-size: 13px;
  color: var(--fr-text-muted);
}
.fr-avis-page-info strong {
  color: var(--fr-text-primary);
  font-weight: 700;
}

/* —— Empty state —— */
.fr-avis-empty {
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 18px;
  padding: 48px 32px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.fr-avis-empty-icon {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--fr-cream);
  color: var(--fr-green-deep);
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-avis-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fr-text-primary);
  margin: 0 0 10px;
}
.fr-avis-empty-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fr-text-muted);
  margin: 0;
}
.fr-avis-empty-text a {
  color: var(--fr-green-deep);
  text-decoration: underline;
  font-weight: 600;
}

/* —— Product filter dropdown (B4 avis 2026-05-11) —— */
.fr-avis-list-prodfilter {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px 8px;
}
.fr-avis-list-prodfilter-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 14px;
  padding: 14px 20px;
}
.fr-avis-prodfilter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fr-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
/* Dropdown custom (remplace le <select> natif pour pouvoir styler hover).
   Structure : .fr-prodfilter > button.fr-prodfilter-trigger + ul.fr-prodfilter-list */
.fr-prodfilter {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.fr-prodfilter-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--fr-border);
  border-radius: 10px;
  background: #FAF7F0;
  font-family: inherit;
  font-size: 14px;
  color: var(--fr-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}
.fr-prodfilter-trigger:hover {
  border-color: var(--fr-green-deep, #2A4A1E);
}
.fr-prodfilter-trigger:focus-visible {
  outline: 2px solid var(--fr-green-deep);
  outline-offset: 2px;
}
.fr-prodfilter-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-prodfilter-chevron {
  flex: 0 0 auto;
  color: var(--fr-text-mid);
  transition: transform 0.18s ease;
}
.fr-prodfilter-open .fr-prodfilter-chevron {
  transform: rotate(180deg);
}
.fr-prodfilter-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(42, 74, 30, 0.12);
  max-height: 320px;
  overflow-y: auto;
}
.fr-prodfilter-option {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fr-text-primary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  outline: none;
}
.fr-prodfilter-option:hover,
.fr-prodfilter-option:focus {
  background: var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
}
.fr-prodfilter-option-selected {
  background: var(--fr-green-light, #EAF2E3);
  color: var(--fr-green-deep, #2A4A1E);
  font-weight: 600;
}
.fr-prodfilter-option-selected:hover,
.fr-prodfilter-option-selected:focus {
  background: var(--fr-green-deep, #2A4A1E);
  color: #FFFFFF;
}

/* —— Hero contextuel : lien retour + lien fiche produit —— */
.fr-avis-list-back {
  display: inline-block;
  margin-top: 8px;
  color: var(--fr-green-deep);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.fr-avis-list-back:hover {
  text-decoration: underline;
}
.fr-avis-list-prodlink {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;
  background: var(--fr-green-deep);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  transition: background .15s ease;
}
.fr-avis-list-prodlink:hover {
  background: var(--fr-green-fall);
  color: #FFFFFF;
}


/* —— Mobile —— */
@media (max-width: 640px) {
  .fr-avis-list-hero { padding: 36px 0 24px; }
  .fr-avis-list-summary {
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px;
    text-align: center;
  }
  .fr-avis-list-count { text-align: center; }
  .fr-avis-list-grid { grid-template-columns: 1fr; gap: 16px; }
  .fr-avis-list-card { padding: 18px; border-radius: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────
   B-SEO Lot 9 — section "À propos de [catégorie]" en bas de page
   Bloc texte SEO long-form (h2 + paragraphes), sobre, fond crème.
   Le wrap est rendu par le block `wrapper_full_width_bottom` du layout
   (hors .container Bootstrap) → pleine largeur native, fond crème
   visible jusqu'aux bords du viewport sans astuce CSS.
   ───────────────────────────────────────────────────────────────────── */
.fr-cat-seo-wrap {
  background: #F6F2EA;
  margin: 0;
  padding: 64px 16px 96px;
}
.fr-cat-seo-text {
  margin: 0 auto;
  max-width: 980px;
  padding: 32px 36px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E5DFCC;
  box-shadow: 0 2px 8px rgba(31, 60, 35, 0.04);
}
.fr-cat-seo-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fr-green-deep);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.fr-cat-seo-body {
  font-size: 1rem;
  line-height: 1.65;
  color: #3a3a3a;
}
.fr-cat-seo-body p { margin: 0 0 12px; }
.fr-cat-seo-body p:last-child { margin-bottom: 0; }
.fr-cat-seo-body strong { color: var(--fr-green-deep); font-weight: 600; }
.fr-cat-seo-body a {
  color: var(--fr-green-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fr-cat-seo-body a:hover { color: var(--fr-green-deep); }

@media (max-width: 720px) {
  .fr-cat-seo-wrap { padding: 48px 0 72px; }
  .fr-cat-seo-text { margin: 0 16px; padding: 22px 22px; border-radius: 14px; }
  .fr-cat-seo-title { font-size: 1.25rem; }
  .fr-cat-seo-body { font-size: 0.95rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Égalisation hauteur des cards produit en grille
   Quand un titre passe sur 2 lignes (ex. "Huile Essentielle D'Eucalyptus
   Globulus BIO"), le bouton "Plus d'informations" se retrouvait plus bas
   que les voisines. On force chaque card à occuper toute la hauteur de
   sa col Bootstrap, on passe le body en flex-column, et le bouton
   "Plus d'informations" est collé en bas via margin-top: auto. Le titre
   reçoit une min-height pour que les rangées prix/qty/+ soient alignées
   horizontalement même quand certains titres ne tiennent que sur 1 ligne.
   ───────────────────────────────────────────────────────────────────── */
.products .js-product,
.featured-products .js-product {
  display: flex;
}
.products .product-miniature,
.featured-products .product-miniature {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.products .product-miniature .thumbnail-container,
.featured-products .product-miniature .thumbnail-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.products .product-miniature .thumbnail-top,
.featured-products .product-miniature .thumbnail-top {
  flex: 0 0 auto;
}
.products .product-miniature .fr-pcard-body,
.featured-products .product-miniature .fr-pcard-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.products .product-miniature .fr-pcard-name,
.featured-products .product-miniature .fr-pcard-name {
  min-height: calc(2 * var(--fr-text-h4) * 1.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Espace flex résiduel : on le pose AVANT le groupe d'actions (qty+cart),
   pas avant le bouton "Plus d'informations". Sinon qty se retrouve collé
   au bouton (juste 10px de gap visuel). En poussant le form en bas, le
   couple qty/cart + Plus d'infos reste groupé avec un gap propre. */
.products .product-miniature .fr-pcard-add-form,
.products .product-miniature .fr-pcard-cta-variants,
.featured-products .product-miniature .fr-pcard-add-form,
.featured-products .product-miniature .fr-pcard-cta-variants {
  margin-top: auto;
}
/* Gap explicite entre la row qty/cart et le bouton "Plus d'informations" :
   le 10px par défaut était trop serré (qty et bouton paraissaient collés). */
.products .product-miniature .fr-pcard-info-btn,
.featured-products .product-miniature .fr-pcard-info-btn {
  margin-top: 14px;
}

/* Mode liste (toggle .fr-list-view) : reset, on ne veut PAS l'égalisation
   des hauteurs en mode liste car chaque card prend la pleine largeur et
   le layout est horizontal (image à gauche, contenu à droite). */
#js-product-list.fr-list-view .product-miniature .fr-pcard-name {
  min-height: 0;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ─────────────────────────────────────────────────────────────────────
   FIX iOS Safari auto-zoom au focus des champs de formulaire (mobile)
   iOS Safari zoome dès qu'un input/textarea/select a font-size < 16px
   au moment du focus → décale le viewport et masque les côtés du site.
   Forcer 16px sur tous les champs saisissables sur mobile résout ça
   sans toucher au pinch-zoom utilisateur (accessibilité préservée).
   Scope strict ≤768px : ne modifie pas le rendu PC validé.
   !important : indispensable pour battre PS Classic .form-control (14px)
   et les règles plus spécifiques du thème enfant.
   Exclusions : .fr-ci-qty-input et .js-cart-line-product-quantity (mini
   qty cart 12-13px, manipulé via boutons +/- — pas un champ de saisie). */
@media (max-width: 900px) {
  input[type="text"]:not(.fr-ci-qty-input):not(.js-cart-line-product-quantity),
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"]:not(.fr-ci-qty-input):not(.js-cart-line-product-quantity),
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input:not([type]):not(.fr-ci-qty-input):not(.js-cart-line-product-quantity),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Panier mobile — Remonter la roulette flottante au-dessus de la sticky
   bar "Commander". La roulette (`.fr-wheel-floating` du module
   framedisroulette) est en `position: fixed; bottom: 16px`, la sticky bar
   panier (`.fr-cart-sticky-bar`) en `bottom: 0` haute ~74px → conflit
   visuel (roulette superpose le bouton COMMANDER).
   Pattern symétrique à `body#product.fr-sticky-cart-on` sur la fiche
   produit : la class `fr-cart-sticky-on` est toggleée par cart.tpl quand
   la sticky bar est visible. !important pour battre la règle bottom 16px
   de wheel.css au cas où l'ordre de chargement le placerait après. */
@media (max-width: 900px) {
  body.fr-cart-sticky-on .fr-wheel-floating {
    bottom: 80px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   B-AUTHENTICATION mobile — Bouton CONNEXION pleine largeur + centré
   PS Classic rend <footer class="form-footer text-sm-center clearfix">
   avec un <button id="submit-login"> dedans. text-sm-center centre à
   partir de 576px (Bootstrap sm), mais en dessous le bouton est aligné
   à gauche par défaut (inline-block). Sur mobile on passe en pleine
   largeur, cohérent avec `.fr-address-submit` sur /adresse + /identite. */
@media (max-width: 900px) {
  body#authentication #login-form .form-footer,
  body.page-authentication #login-form .form-footer {
    text-align: center;
  }
  body#authentication #submit-login,
  body.page-authentication #submit-login {
    display: block;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   B-AUTHENTICATION — Focus state du champ mot de passe + restyle bouton "MONTRER"
   Pages /connexion, /inscription, /recuperation-de-compte
   ───────────────────────────────────────────────────────────────────
   PS Classic enrobe l'input password dans <div class="input-group js-parent-focus">
   avec un <span class="input-group-btn"><button> "MONTRER". Au focus, PS/Chrome
   peut afficher un ring cyan natif autour de tout le .input-group (outline browser
   ou .js-child-focus PS), qui jure avec la charte Forêt Profonde.
   On neutralise ce ring et on garde le focus état vert déjà défini sur
   .form-control:focus (ligne 257). On en profite pour restyler le bouton
   MONTRER en pill transparent discret, cohérent avec /identite et /checkout. */
body#authentication .input-group,
body.page-authentication .input-group,
body#registration .input-group,
body.page-registration .input-group,
body#password .input-group,
body.page-password .input-group {
  position: relative;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Page /recuperation-mot-de-passe : le bouton "Envoyer un lien de
   réinitialisation" est rendu juste après le wrapper input par PS Classic,
   sans espacement → visuellement collé. On ajoute un margin-left pour
   créer un gap propre entre le champ email et le bouton submit. */
body#password .forgotten-password .form-control-submit,
body.page-password .forgotten-password .form-control-submit {
  margin-left: 12px !important;
}

/* Label "Adresse e-mail" : le tiret dans "e-mail" est un break-character
   légitime → le navigateur wrap parfois sur 2 lignes ("Adresse e-" / "mail")
   quand la col du label est étroite. Forcer nowrap pour garder le label
   sur 1 ligne. */
body#password .forgotten-password label,
body.page-password .forgotten-password label {
  white-space: nowrap !important;
}
/* L'input prend toute la largeur restante (flex-grow), le bouton garde
   sa taille auto. Sans ces overrides, Bootstrap natif applique
   display:table sur .input-group qui crée un gap entre input et bouton
   (border-spacing implicite + width:1% sur input-group-btn) */
body#authentication .input-group > .form-control,
body.page-authentication .input-group > .form-control,
body#registration .input-group > .form-control,
body.page-registration .input-group > .form-control,
body#password .input-group > .form-control,
body.page-password .input-group > .form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  display: block !important;
  min-width: 0 !important;
}
body#authentication .input-group > .input-group-btn,
body.page-authentication .input-group > .input-group-btn,
body#registration .input-group > .input-group-btn,
body.page-registration .input-group > .input-group-btn,
body#password .input-group > .input-group-btn,
body.page-password .input-group > .input-group-btn {
  flex: 0 0 auto !important;
  display: flex !important;
  width: auto !important;
  align-items: stretch !important;
}
body#authentication .input-group:focus-within,
body.page-authentication .input-group:focus-within,
body#authentication .input-group.js-child-focus,
body.page-authentication .input-group.js-child-focus,
body#registration .input-group:focus-within,
body.page-registration .input-group:focus-within,
body#registration .input-group.js-child-focus,
body.page-registration .input-group.js-child-focus,
body#password .input-group:focus-within,
body.page-password .input-group:focus-within,
body#password .input-group.js-child-focus,
body.page-password .input-group.js-child-focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Restyle SEULEMENT le bouton MONTRER (visuel) sans toucher au layout.
   Le bouton reste dans son layout natif Bootstrap (table-cell à droite de
   l'input dans le même .input-group). Pourquoi pas position:absolute :
   le .input-group est en `display:table` (Bootstrap base) et un enfant en
   `position:absolute` devient instable au focus (le table-layout recalcule
   et masque visuellement le span — observé sur la page connexion).
   On garde donc le `<span class="input-group-btn">` comme table-cell, on
   restyle juste son bouton enfant (.btn) en pill transparent discret. */
body#authentication .input-group .input-group-btn .btn,
body.page-authentication .input-group .input-group-btn .btn,
body#registration .input-group .input-group-btn .btn,
body.page-registration .input-group .input-group-btn .btn,
body#password .input-group .input-group-btn .btn,
body.page-password .input-group .input-group-btn .btn {
  background: var(--fr-cream, #F6F2EA) !important;
  border: 1.5px solid var(--fr-border, #E5DFD0) !important;
  border-left: 0 !important;
  color: var(--fr-text-mid, #5A4F38) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 0 22px !important;
  min-width: 96px !important;
  text-align: center !important;
  justify-content: center !important;
  cursor: pointer;
  border-radius: 0 var(--fr-radius-md, 12px) var(--fr-radius-md, 12px) 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body#authentication .input-group .input-group-btn .btn:hover,
body.page-authentication .input-group .input-group-btn .btn:hover,
body#authentication .input-group .input-group-btn .btn:focus,
body.page-authentication .input-group .input-group-btn .btn:focus,
body#registration .input-group .input-group-btn .btn:hover,
body.page-registration .input-group .input-group-btn .btn:hover,
body#registration .input-group .input-group-btn .btn:focus,
body.page-registration .input-group .input-group-btn .btn:focus,
body#password .input-group .input-group-btn .btn:hover,
body.page-password .input-group .input-group-btn .btn:hover,
body#password .input-group .input-group-btn .btn:focus,
body.page-password .input-group .input-group-btn .btn:focus {
  background: var(--fr-green-light, #EAF2E3) !important;
  color: var(--fr-green-deep, #2A4A1E) !important;
  border-color: var(--fr-green-deep, #2A4A1E) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* L'input password doit avoir les coins arrondis seulement à GAUCHE pour
   coller proprement au bouton MONTRER (qui a les coins arrondis à droite) */
body#authentication .input-group input[type="password"],
body.page-authentication .input-group input[type="password"],
body#authentication .input-group input[type="text"].js-visible-password,
body.page-authentication .input-group input[type="text"].js-visible-password,
body#registration .input-group input[type="password"],
body.page-registration .input-group input[type="password"],
body#registration .input-group input[type="text"].js-visible-password,
body.page-registration .input-group input[type="text"].js-visible-password,
body#password .input-group input[type="password"],
body.page-password .input-group input[type="password"],
body#password .input-group input[type="text"].js-visible-password,
body.page-password .input-group input[type="text"].js-visible-password {
  border-radius: var(--fr-radius-md, 8px) 0 0 var(--fr-radius-md, 8px) !important;
  border-right: 0 !important;
}

/* =============================================================
   FICHE PRODUIT — BOUTON LOUPE + LIGHTBOX ZOOM
   Bouton circulaire en overlay sur l'image cover : clic OU clic
   direct sur l'image ouvre une modal plein écran avec navigation
   entre toutes les images du produit. Couleurs Forêt Profonde.
   ============================================================= */

/* ───── Bouton loupe + cursor zoom-in sur image cover ───── */
.fr-pgallery-img.js-fr-zoom-trigger,
.fr-pgallery-main .js-qv-product-cover.js-fr-zoom-trigger {
  cursor: zoom-in;
}
.fr-pgallery-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(42, 74, 30, 0.12);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  color: var(--fr-green-deep, #2A4A1E);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(26, 46, 18, 0.14);
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  z-index: 3;
  padding: 0;
  line-height: 0;
}
.fr-pgallery-zoom:hover,
.fr-pgallery-zoom:focus-visible {
  background: var(--fr-green-deep, #2A4A1E);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(26, 46, 18, 0.24);
  outline: none;
}
.fr-pgallery-zoom:active {
  transform: scale(0.98);
}

/* ───── Lightbox modal plein écran ───── */
.fr-pzoom {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(15, 28, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  padding: 60px 80px;
}
.fr-pzoom.fr-pzoom-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.24s ease, visibility 0s linear 0s;
}
body.fr-pzoom-locked {
  overflow: hidden;
}

.fr-pzoom-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  user-select: none;
}
.fr-pzoom-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: fr-pzoom-fade 0.2s ease;
}
@keyframes fr-pzoom-fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Contrôles glassmorphic (close + nav prev/next) */
.fr-pzoom-close,
.fr-pzoom-nav {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  padding: 0;
  line-height: 0;
  z-index: 2;
}
.fr-pzoom-close:hover,
.fr-pzoom-close:focus-visible,
.fr-pzoom-nav:hover,
.fr-pzoom-nav:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
  outline: none;
}
.fr-pzoom-nav:disabled {
  opacity: 0;
  pointer-events: none;
}
.fr-pzoom-close {
  top: 20px;
  right: 24px;
}
.fr-pzoom-prev {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}
.fr-pzoom-next {
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
.fr-pzoom-prev:hover,
.fr-pzoom-prev:focus-visible {
  transform: translateY(-50%) scale(1.06);
}
.fr-pzoom-next:hover,
.fr-pzoom-next:focus-visible {
  transform: translateY(-50%) scale(1.06);
}

/* Counter X / Y — pill discret en bas centre */
.fr-pzoom-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.fr-pzoom.fr-pzoom-single .fr-pzoom-counter,
.fr-pzoom.fr-pzoom-single .fr-pzoom-nav {
  display: none;
}

/* ───── Mobile ≤768px ───── */
@media (max-width: 900px) {
  .fr-pgallery-zoom {
    width: 38px;
    height: 38px;
    bottom: 10px;
    right: 10px;
  }
  .fr-pgallery-zoom svg {
    width: 17px;
    height: 17px;
  }
  .fr-pzoom {
    padding: 56px 16px 72px;
  }
  .fr-pzoom-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }
  .fr-pzoom-prev {
    left: 8px;
    width: 40px;
    height: 40px;
  }
  .fr-pzoom-next {
    right: 8px;
    width: 40px;
    height: 40px;
  }
  .fr-pzoom-counter {
    bottom: 16px;
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   B-TABLET PORTRAIT — overrides ciblés iPad portrait (901-1024 portrait)
   ═══════════════════════════════════════════════════════════════════
   Cette section accumule les overrides spécifiques au tablette en
   orientation portrait (iPad Pro 12.9" 1024px portrait uniquement avec
   le nouveau seuil mobile ≤900). Le scope `(orientation: portrait)` +
   min-width 901 garantit qu'aucune règle ici n'affecte le mobile (≤900,
   inclut désormais iPad std 768 + iPad Pro 11 834 portrait), le tablette
   landscape, ni le desktop. */

@media (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
  /* Hero trust (4 stats : Références / Expertise / Avis / Livraison) ───
     Sur iPad Pro 12.9" portrait (1024), le hero reste en 2 colonnes
     50/50 (@media 900 ne s'applique pas) et hero-left ne fait que ~404px
     utiles. Les 4 trust items wrappent alors sur 2 lignes. On force
     une seule ligne avec fontes légèrement réduites. */
  .fr-hero-trust {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .fr-hero-trust .fr-trust-item {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }
  .fr-trust-val {
    font-size: 17px;
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
  .fr-trust-lbl {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 3px;
    white-space: nowrap;
  }

  /* Footer — 5 colonnes (Brand + Produits + Notre maison + Informations +
     Mon compte) sur 1 ligne. Sans override, @media (max-width: 1100px)
     plus haut bascule en 4 cols (la 5e wrap dessous).
     Pour des écarts VISUELS uniformes, on passe en grid auto + space-
     between : chaque col prend la largeur de son contenu (pas de vide
     parasite à droite des cols à items courts comme "Mes commandes"),
     et le navigateur distribue l'espace restant en gaps strictement
     égaux entre chaque paire de colonnes. */
  .fr-footer-top {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    gap: 0;
  }
}

/* Sticky tabs sur tablette + mobile : top = hauteur réelle du header
   pinned (67px = .fr-header-row détaché par JS). Sans cet override,
   le `top: 144px` du desktop laissait un grand espace (~77px) entre le
   header pinned et le bloc des 7 catégories sur iPad Pro 12.9" portrait.
   Cover toutes les tailles ≤1324 (mobile + tablette + laptops étroits). */
@media (max-width: 1324px) {
  .fr-family-tabs-wrap {
    top: 67px !important;
  }
}

/* Padding latéral 20px sur les 8 pages compte en tablette (769-1324).
   Mobile (≤768) est déjà géré dans le bloc @media (max-width: 900px) plus
   haut. Sans cet override, les cards/forms collent aux bords. Même
   approche : sélecteur `body#X .page-content.fr-account-content` (spec
   0,1,3,1) pour battre `body#X .page-content { padding: 0 !important }`. */
@media (min-width: 901px) and (max-width: 1324px) {
  .fr-account-hero-inner { padding: 0 20px !important; }
  body#my-account .page-content.fr-account-content,
  body.page-my-account .page-content.fr-account-content,
  body#addresses .page-content.fr-account-content,
  body.page-addresses .page-content.fr-account-content,
  body#address .page-content.fr-account-content,
  body.page-address .page-content.fr-account-content,
  body#identity .page-content.fr-account-content,
  body.page-identity .page-content.fr-account-content,
  body#history .page-content.fr-account-content,
  body.page-history .page-content.fr-account-content,
  body#order-detail .page-content.fr-account-content,
  body.page-order-detail .page-content.fr-account-content,
  body#order-slip .page-content.fr-account-content,
  body.page-order-slip .page-content.fr-account-content,
  body#discount .page-content.fr-account-content,
  body.page-discount .page-content.fr-account-content,
  body#module-psgdpr-gdpr .page-content.fr-account-content {
    padding: 0 20px 40px !important;
  }

  /* Table historique des commandes (page /historique-commandes) :
     7 colonnes + actions ne tiennent pas dans la largeur tablette.
     Le wrap a overflow:hidden (pour le border-radius) qui CLIPPE les
     boutons "Détails" / "Commander à nouveau" à droite. Override en
     overflow-x: auto avec min-width sur la table pour permettre un
     scroll horizontal smooth (l'utilisateur swipe pour voir les boutons). */
  .fr-account-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .fr-account-table {
    min-width: 760px;
  }
}