@charset "UTF-8";
/* ==========================================================================
   PORCELAINE GIRARD — girard-restyle.css  (v3, direction « LOFT »)
   Restylage de porcelaine-girard.com par CSS seul (PrestaShop 1.7.7.2,
   thème Classic modifié + Creative Elements). Aucune modification de HTML.
   Charte : CHARTE.md. Installation et retour arrière : INSTALL.md.

   Direction : celle des campagnes LOFT et ISAURE. Quasi monochrome (blanc,
   gris chaud, encre), photos posées sur un gris très clair sans cadre,
   Cormorant Garamond 400 en casse normale, Jost en surtitres espacés,
   boutons noirs pleins, liens « … → » soulignés d'un filet fin, beaucoup d'air.

   Principes techniques
   - Fichier autonome : tous les réglages passent par les variables --gr-*.
   - Les feuilles Creative Elements (CE) sont chargées APRÈS le thème et ciblent
     chaque élément en « .elementor-XXXX .elementor-element.elementor-element-id »
     (spécificité 0,4,0, voire 0,4,1), et certaines sont chargées dans le
     <body>, donc après ce fichier. Les règles CE ci-dessous sont préfixées
     par « :root body #wrapper », « #footer » ou « #header » (ou :is(#wrapper,
     #footer)) : un identifiant les fait passer devant, sans !important.
   - !important : seulement contre un attribut style du HTML ou un
     !important du thème (signalé en commentaire à chaque fois).
   - On ne masque, ne déplace ni ne désactive aucun champ de formulaire.
   - Aucune transition sur les sections CE : CE mesure leur position pour
     les étirer en pleine largeur ; une transition fausse ce calcul.

   Sommaire
   00. Polices                      08. Panier
   01. Variables (tokens)           09. Tunnel de commande
   02. Base                         10. Pied de page
   03. En-tête et menu              11. Sections Creative Elements (accueil, CMS)
   04. Boutons et liens             12. Fenêtres modales
   05. Cartes produit               13. Mobile (≤ 767 px)
   06. Listes                       14. Animations
   07. Fiche produit                15. Mouvements réduits
                                    16. Blocs de girard-enhance.js
   ========================================================================== */


/* ==========================================================================
   00. POLICES — Cormorant Garamond (titres, chiffres) et Jost (texte, surtitres),
   comme les campagnes LOFT et ISAURE. Raleway (déjà chargée) sert de repli.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap");


/* ==========================================================================
   01. VARIABLES
   ========================================================================== */
:root {
  /* Neutres (la palette) */
  --gr-blanc: #ffffff;
  --gr-brume: #f4f3f1;          /* plateau des photos, fonds de section */
  --gr-brume-fonce: #eceae6;    /* survol discret sur fond brume */
  --gr-encre: #1a1a1a;          /* titres, boutons, pied de page */
  --gr-corps: #4a4946;          /* texte courant */
  --gr-gris: #8b8985;           /* chiffres décoratifs, texte sur fond encre */
  --gr-gris-texte: #75736e;     /* petits textes et surtitres : 4,7:1 sur blanc */
  --gr-gris-clair: #b9b6b0;     /* numéros éditoriaux 01, 02… */
  --gr-filet: #e6e4e0;          /* filets de séparation */
  --gr-filet-fort: #cdcac4;     /* soulignés des champs et des liens */

  /* Accents de marque : rares (survol des liens de texte) */
  --gr-petrole: #2c4a52;
  --gr-or: #d1b280;

  /* États */
  --gr-succes: #2f6b4f;
  --gr-erreur: #a23b2a;

  /* Typographie */
  --gr-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --gr-texte: "Jost", "Raleway", "Helvetica Neue", Arial, sans-serif;
  --gr-espace-surtitre: 0.25em;
  --gr-espace-bouton: 0.18em;

  /* Espacements */
  --gr-e1: 4px;
  --gr-e2: 8px;
  --gr-e3: 12px;
  --gr-e4: 16px;
  --gr-e5: 24px;
  --gr-e6: 32px;
  --gr-e7: 48px;
  --gr-e8: 64px;
  --gr-e9: 96px;
  --gr-section: 128px;          /* respiration entre deux sections */

  /* Formes : tout est droit, sans ombre */
  --gr-filet-fin: 1px solid var(--gr-filet);

  /* Mouvement (zone 14) */
  --gr-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --gr-d-court: 300ms;
  --gr-d-moyen: 500ms;
  --gr-d-long: 700ms;
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
body {
  font-family: var(--gr-texte);
  font-weight: 300;
  color: var(--gr-corps);
  background-color: var(--gr-blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#wrapper {
  background-color: var(--gr-blanc);
  box-shadow: none; /* Classic : ombre intérieure grise sous l'en-tête */
  padding-top: 0;
}

/* Titres de contenu (les .h1 « techniques » du thème, comme la référence, sont exclus) */
#wrapper h1:not(.product-reference),
#wrapper h2:not(.product-title):not(.h3) {
  font-family: var(--gr-titre);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  color: var(--gr-encre);
  text-transform: none;
}

#wrapper strong,
#wrapper b {
  font-weight: 500;
  color: var(--gr-encre);
}

a {
  color: var(--gr-encre);
}

a:hover,
a:focus {
  color: var(--gr-petrole);
  text-decoration: none;
}

::selection {
  background: var(--gr-brume-fonce);
  color: var(--gr-encre);
}

/* Focus clavier : filet encre, net et discret */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--gr-encre);
  outline-offset: 4px;
}

/* Fil d'Ariane : surtitre */
#wrapper .breadcrumb {
  background: transparent;
  padding: var(--gr-e6) 0 var(--gr-e4);
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

#wrapper .breadcrumb li,
#wrapper .breadcrumb li a {
  color: var(--gr-gris-texte);
}

#wrapper .breadcrumb li a:hover {
  color: var(--gr-encre);
}

#wrapper .breadcrumb li::after {
  content: "·";
  color: var(--gr-gris-clair);
  margin: 0 0.9em;
}

#wrapper .breadcrumb li:last-child span {
  color: var(--gr-encre);
}


/* ==========================================================================
   03. EN-TÊTE ET MENU — blanc, très léger
   ========================================================================== */

/* Bandeau du haut (section CE) : discret, gris très clair */
:root body #header #topbannierehome.elementor-element {
  background-color: var(--gr-brume);
}

:root body #header #banniere-header.elementor-element,
:root body #header #banniere-header .elementor-text-editor {
  color: var(--gr-corps);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
}

#header #banniere-header p {
  margin: 9px 0;
}

#header #banniere-btn-saisie-rapide {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gr-encre);
  padding: 0 0 1px;
  margin: 0 0.3em;
  color: var(--gr-encre);
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  cursor: pointer;
}

/* Barre logo / recherche / compte */
#header {
  background: var(--gr-blanc);
  color: var(--gr-encre);
  box-shadow: none; /* le thème pose une ombre grise sous l'en-tête */
}

#header .header-nav {
  border-bottom: 0;
  max-height: none;
  margin-bottom: 0;
  padding: var(--gr-e5) 0 var(--gr-e3);
}

#header .header-nav .row > .hidden-sm-down {
  display: flex;
  align-items: center;
}

#header .header-nav #_desktop_logo h1 {
  margin: 0;
}

/* Recherche réduite à un champ souligné */
#header #search_widget form {
  position: relative;
}

/* Champ de recherche encadré, loupe à gauche (modèle validé) */
#header #search_widget form input[type="text"] {
  height: 48px;
  padding: 0 16px 0 48px;
  border: 1px solid var(--gr-encre);
  border-radius: 0;
  background: var(--gr-blanc);
  box-shadow: none;
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--gr-encre);
}

#header #search_widget form input[type="text"]::placeholder {
  color: var(--gr-gris-texte);
}

#header #search_widget form input[type="text"]:focus {
  outline: none;
  border-color: var(--gr-encre);
  box-shadow: inset 0 0 0 1px var(--gr-encre); /* focus net : filet doublé */
  background: var(--gr-blanc);
}

#header #search_widget form button[type="submit"] {
  top: 50%;
  bottom: auto;
  left: 12px;
  right: auto;
  transform: translateY(-50%);
  background: none;
  border: 0;
}

/* Loupe : le thème la masque (.header-nav i.material-icons.search) ; on la rend visible */
#header .header-nav #search_widget form button[type="submit"] i.material-icons.search {
  display: inline-block;
  color: var(--gr-encre);
  font-size: 22px;
  line-height: 1;
}

/* « Saisie rapide » : lien en capitales espacées, souligné */
#header button#btn-saisie-rapide {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gr-encre);
  border-radius: 0;
  box-shadow: none;
  color: var(--gr-encre);
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

#header button#btn-saisie-rapide:hover {
  background: transparent;
  color: var(--gr-petrole);
  border-bottom-color: var(--gr-petrole);
}

#header .header-nav .right-nav {
  align-items: center;
  gap: var(--gr-e6);
}

/* Compte et panier */
#header .header-nav .user-info {
  margin: 0;
}

#header .header-nav .user-info a,
#header .header-nav .blockcart a {
  color: var(--gr-encre);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

#header .header-nav .user-info .material-icons,
#header .header-nav .blockcart .material-icons {
  color: var(--gr-encre);
  font-size: 20px;
}

#header .header-nav .blockcart {
  background: transparent;
  height: auto;
  padding: 0;
}

#header .header-nav .cart-preview.active {
  background: transparent;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active .material-icons {
  color: var(--gr-encre);
}

/* Menu principal : petites capitales espacées, sans séparateurs */
#header .header-top {
  padding: 0;
  border-bottom: var(--gr-filet-fin);
}

#header #top-menu {
  margin-bottom: 0;
}

#header .header-top a[data-depth="0"] {
  padding: var(--gr-e4) var(--gr-e2) var(--gr-e5);
  color: var(--gr-encre);
  font-family: var(--gr-texte);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
}

/* Écrans moyens : les largeurs des entrées sont fixées en % par le thème,
   on resserre l'interlettrage pour que « Personnalisation » tienne */
@media (max-width: 1399px) {
  #header .header-top a[data-depth="0"] {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding-left: var(--gr-e1);
    padding-right: var(--gr-e1);
  }
}

/* Survol : filet d'encre qui se dessine sous l'entrée */
#header .header-top a[data-depth="0"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 20px;
  height: 1px;
  background: var(--gr-encre);
  transform: translateX(-50%) scaleX(0);
}

#header .header-top a[data-depth="0"]:hover,
#header .header-top #lnk-accueil a[data-depth="0"]:hover {
  background-color: transparent;
  color: var(--gr-encre);
}

#header .header-top a[data-depth="0"]:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Sous-menus : blancs, filet fin, sans ombre */
#header .header-top .popover.sub-menu,
#header .header-top .top-menu .sub-menu {
  border: var(--gr-filet-fin);
  border-radius: 0;
  box-shadow: none;
  padding: var(--gr-e4) 0;
}

#header .header-top .top-menu a.dropdown-submenu {
  color: var(--gr-encre);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.top-menu .sub-menu ul[data-depth="1"] > li:hover a.dropdown-item.dropdown-submenu[data-depth="1"] {
  background-color: var(--gr-brume);
  color: var(--gr-encre) !important; /* contre un !important du thème */
}

#header .header-top .top-menu a:not([data-depth="0"]) {
  font-size: 13px;
  font-weight: 300;
  color: var(--gr-corps);
}

#header .header-top .top-menu a:not([data-depth="0"]):hover {
  color: var(--gr-encre);
}

#header .header-top .top-menu[data-depth="2"] a.dropdown-item:hover {
  border-left: 1px solid var(--gr-encre);
}

/* En-tête compact au défilement (classe ajoutée par le site) */
#header.header_omg_im_scrolled {
  box-shadow: 0 1px 0 var(--gr-filet);
}


/* ==========================================================================
   04. BOUTONS ET LIENS
   ========================================================================== */

/* Le site injecte « .btn:hover { transform: scale(1.1) } » (fenêtre de
   bienvenue) et des rayons de 5 px : on neutralise pour tous les boutons. */
:root body .btn {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--gr-texte);
  font-weight: 500;
  letter-spacing: var(--gr-espace-bouton);
  text-transform: uppercase;
}

:root body .btn:hover {
  transform: none;
}

/* Principal : noir plein, rectangulaire, petits caractères espacés */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--gr-encre);
  border: 1px solid var(--gr-encre);
  color: var(--gr-blanc);
  font-size: 11px;
  padding: 1.35em 2.4em;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #000000;
  border-color: #000000;
  color: var(--gr-blanc);
}

/* Secondaire : filet d'encre, fond transparent */
.btn-secondary,
.btn-tertiary {
  background-color: transparent;
  border: 1px solid var(--gr-encre);
  color: var(--gr-encre);
  font-size: 11px;
  padding: 1.35em 2.4em;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
  background-color: var(--gr-encre);
  border-color: var(--gr-encre);
  color: var(--gr-blanc);
}

/* Boutons Creative Elements : noirs pleins */
:root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-call-to-action .elementor-button,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-email-subscription .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.35em 2.4em;
  background-color: var(--gr-encre);
  border: 1px solid var(--gr-encre);
  border-radius: 0;
  box-shadow: none;
  color: var(--gr-blanc);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--gr-espace-bouton);
  text-transform: uppercase;
  white-space: normal;
}

:root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button:hover,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-email-subscription .elementor-button:hover {
  background-color: #000000;
  border-color: #000000;
  color: var(--gr-blanc);
}

:root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button .elementor-button-text,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-call-to-action .elementor-button .elementor-button-text {
  color: inherit;
}

/* Lien éditorial « … → » : texte encre, filet fin dessous
   (le « Consulter » des cartes catégories) */
:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button {
  position: relative;
  display: inline-block;
  min-height: 0;
  padding: 0 0 5px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  color: var(--gr-encre);
  font-family: var(--gr-texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}


/* ==========================================================================
   05. CARTES PRODUIT — sans cadre ni ombre, photo sur plateau gris très clair
   ========================================================================== */

/* 05a. Miniatures du thème (listes, « Dans la même gamme », produits liés) */
#products .product-miniature .thumbnail-container,
.featured-products .product-miniature .thumbnail-container,
.product-accessories .product-miniature .thumbnail-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.product-miniature .thumbnail-container .product-thumbnail {
  display: block;
  overflow: hidden;
  background: var(--gr-brume);
}

/* Les packshots sont sur fond blanc : en « multiply », le blanc prend la
   couleur du plateau et la pièce semble posée dessus */
.product-miniature .thumbnail-container .product-thumbnail img {
  mix-blend-mode: multiply;
}

.product-miniature .product-description {
  background: var(--gr-blanc); /* cache « Aperçu rapide » au repos (Classic) */
  box-shadow: none;
  text-align: left;
  padding: var(--gr-e4) 0 0;
}

/* Nom : Cormorant en casse normale (les noms sont saisis en capitales dans
   la boutique : on les passe en minuscules avec une capitale initiale) */
:root body .product-miniature h2.product-title,
:root body .product-miniature .product-title a {
  font-family: var(--gr-titre);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--gr-encre);
  text-align: left;
}

:root body .product-miniature h2.product-title::first-letter {
  text-transform: uppercase;
}

/* Lien « Voir la pièce → » généré sous le nom (il fait partie du lien) */
:root body .product-miniature .product-title a::after {
  content: "Voir la pièce \2192";
  display: table;
  margin-top: var(--gr-e3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gr-filet-fort);
  font-family: var(--gr-texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gr-encre);
}

/* Référence : petits chiffres espacés */
:root body .product-miniature .product-price-and-shipping {
  justify-content: flex-start;
}

:root body .product-miniature .product-reference.h1,
:root body .product-miniature .product-reference.h1 label,
:root body .product-miniature .product-reference.h1 span {
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Prix (client connecté) : petits chiffres élégants */
.product-miniature .price {
  font-family: var(--gr-titre);
  font-size: 20px;
  font-weight: 500;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

.product-miniature .highlighted-informations {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.product-miniature .highlighted-informations .quick-view {
  color: var(--gr-encre);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

/* Étiquettes : texte encre sur fond blanc, sans couleur */
.product-flags li.product-flag,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage {
  background-color: var(--gr-blanc);
  color: var(--gr-encre);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--gr-texte);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
}

/* Quantité + ajout au panier (module vzqac) */
.vzqac .vzqac-qty {
  border-color: var(--gr-filet-fort);
  border-radius: 0;
}

.vzqac .vzqac-btn {
  background: transparent;
  color: var(--gr-encre);
  min-width: 32px;
}

.vzqac .vzqac-btn:hover {
  background: var(--gr-brume);
}

:root body .product-miniature [data-button-action="add-to-cart"] {
  border-radius: 0 !important; /* contre un !important du thème */
  background: var(--gr-encre);
  border-color: var(--gr-encre);
}

/* 05b. Miniatures Creative Elements (carrousel « Les produits du moment ») */
:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature {
  background: transparent;
  text-align: left;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-image {
  background: var(--gr-brume);
  overflow: hidden;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-image img {
  width: 100%;
  height: auto;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-content {
  padding: var(--gr-e4) 0 0;
  text-align: left;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-title {
  font-family: var(--gr-titre);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--gr-encre);
  text-align: left;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-title::first-letter {
  text-transform: uppercase;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-title::after {
  content: "Voir la pièce \2192";
  display: table;
  margin-top: var(--gr-e3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gr-filet-fort);
  font-family: var(--gr-texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-quick-view {
  background: rgba(255, 255, 255, 0.92);
  color: var(--gr-encre);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

/* Carrousel : marges entre cartes, points et flèches en encre fine */
:root body :is(#wrapper, #footer) .elementor .elementor-slick-slider .slick-slide-inner {
  padding: 0 var(--gr-e4);
}

:root body :is(#wrapper, #footer) .elementor .elementor-slick-slider .slick-dots li button::before {
  color: var(--gr-encre);
  font-size: 6px;
}

:root body :is(#wrapper, #footer) .elementor .elementor-slick-slider .slick-prev::before,
:root body :is(#wrapper, #footer) .elementor .elementor-slick-slider .slick-next::before {
  color: var(--gr-encre);
}


/* 05c. Cartes en mode connecté (listes, recherche, même gamme), revu le 29/10
   après le retour de Léo en production (référence et prix collés, disponibilité
   centrée, hauteurs inégales). Ordre : référence seule sur sa ligne → prix en
   dessous → ligne quantité + panier poussée en bas de carte → disponibilité en
   petit, à gauche. Les règles ne dépendent plus du conteneur de la liste
   (#products, .featured-products…) : préfixe « :root body:not(#gr-aucun) »,
   plus fort que les règles du thème en #products (police Noto, hauteur 25 px,
   affichage flex sur tous les span). */

/* Carte à hauteur égale dans sa rangée : la cellule, l'article, le cadre et la
   zone de texte s'étirent en colonne */
:root body:not(#gr-aucun) .products > * {
  display: flex;
  flex-direction: column;
}

:root body:not(#gr-aucun) .products .product-miniature {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

:root body:not(#gr-aucun) .products .product-miniature .thumbnail-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

:root body:not(#gr-aucun) .product-miniature #product-description-logged {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  height: auto !important; /* contre un !important du thème (190 px) */
  text-align: left;
}

/* Bloc d'achat en grille : 1re ligne la référence, 2e le prix (et l'ancien prix
   barré, la remise), 3e la ligne d'achat, calée en bas (rangée extensible).
   Le thème impose display:flex !important sur ce bloc. */
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping {
  display: grid !important; /* contre un !important du thème */
  flex: 1 1 auto;
  grid-template-columns: repeat(3, auto) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: baseline;
  justify-content: stretch;
  gap: var(--gr-e2) 0;
  width: 100%;
  margin-top: var(--gr-e3);
  font-weight: 400;
  text-align: left;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > * {
  grid-row: 2;
  order: 0;
  height: auto;
  margin: 0 var(--gr-e2) 0 0;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :is(.product-reference, .vzqac, form, div:not(.product-reference)) {
  grid-column: 1 / -1;
  margin-right: 0;
}

/* Référence : petite capitale discrète, seule sur sa ligne */
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .product-reference {
  display: block;
  grid-row: 1;
  margin: 0;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping .product-reference :is(label, span) {
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping .product-reference span {
  padding-left: 0.3em;
}

/* Prix : Cormorant lisible, « HT » plus petit (balise <small> posée par
   girard-enhance.js ; sans le script, le prix reste entier et lisible) */
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :not(.product-reference, .vzqac, form, div, .regular-price, .discount-product, #product-availability) {
  display: block;
  font-family: var(--gr-titre);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping .price small {
  margin-left: 0.15em;
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: inherit;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .regular-price {
  display: block;
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 400;
  color: var(--gr-gris-texte);
  text-decoration: line-through;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .discount-product {
  display: block;
  justify-self: start;
  padding: 1px 6px;
  border: 1px solid var(--gr-encre);
  background: transparent;
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  color: var(--gr-encre);
}

/* Ligne quantité + panier : en bas de carte, alignée d'une carte à l'autre */
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :is(.vzqac, form) {
  display: flex;
  flex: none;
  grid-row: 3;
  align-self: end;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gr-e2);
  width: 100% !important; /* le thème fixe déjà 100 % en !important */
  margin: var(--gr-e2) 0 0;
}

:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-qty {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  background: var(--gr-blanc);
}

:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 38px;
  padding: 0;
  background: transparent;
  font-family: var(--gr-texte);
  font-size: 16px;
  font-weight: 400;
  color: var(--gr-encre);
}

:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-btn:hover {
  background: var(--gr-brume);
}

:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-input {
  width: 34px;
  height: 38px;
  font-family: var(--gr-texte);
  font-size: 15px;
  font-weight: 500;
  color: var(--gr-encre);
  -moz-appearance: textfield;
  appearance: textfield;
}

:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-input::-webkit-inner-spin-button,
:root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:root body:not(#gr-aucun) .product-miniature [data-button-action="add-to-cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0 !important; /* contre un !important du thème */
  border: 1px solid var(--gr-encre);
  border-radius: 0 !important; /* contre un !important du thème */
  background: var(--gr-encre);
  color: var(--gr-blanc);
}

:root body:not(#gr-aucun) .product-miniature [data-button-action="add-to-cart"]:hover {
  background: #000000;
}

/* Prix d'abord, puis l'ancien prix barré et la remise (ordre du balisage inversé) */
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > * {
  white-space: nowrap;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .price {
  grid-column: 1;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .regular-price {
  grid-column: 2;
}

:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .discount-product {
  grid-column: 3;
}

/* Mobile (cartes de 160 px) : ancien prix et remise sous le prix, sélecteur
   plus compact pour tenir avec le bouton sur une ligne */
@media (max-width: 575px) {
  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping {
    grid-template-rows: auto auto auto 1fr;
  }

  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .price {
    grid-column: 1 / -1;
    font-size: 22px;
  }

  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :is(.regular-price, .discount-product) {
    grid-row: 3;
  }

  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .regular-price {
    grid-column: 1;
  }

  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > .discount-product {
    grid-column: 2;
  }

  :root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :is(.vzqac, form) {
    grid-row: 4;
    gap: 6px;
  }

  :root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-btn {
    width: 26px;
  }

  :root body:not(#gr-aucun) .product-miniature .vzqac .vzqac-input {
    width: 28px;
  }

  :root body:not(#gr-aucun) .product-miniature [data-button-action="add-to-cart"] {
    width: 40px;
  }
}

/* Disponibilité : 11 px, à gauche, sous la ligne d'achat (qu'elle soit hors du
   bloc d'achat, comme dans le thème, ou dedans) */
:root body:not(#gr-aucun) .product-miniature :is(#product-availability, .product-availability) {
  display: block;
  grid-column: 1 / -1;
  grid-row: -1; /* après la dernière rangée, si elle est dans le bloc d'achat */
  align-self: flex-start;
  margin: var(--gr-e2) 0 0;
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--gr-succes);
  text-align: left;
}

:root body:not(#gr-aucun) .product-miniature :is(#product-availability, .product-availability) .material-icons {
  margin-right: 0.2em;
  font-size: 13px;
  line-height: 1;
  vertical-align: -2px;
  color: inherit;
}

:root body:not(#gr-aucun) .product-miniature :is(#product-availability, .product-availability):has(.product-last-items, .product-unavailable) {
  color: var(--gr-accent, #9a4a28);
}

/* ==========================================================================
   06. LISTES (catégories, sous-catégories, recherche)
   Même langage que l'accueil : en-tête éditorial sans encadré, liste de
   collections en texte fin, grille aérée, cartes sans cadre, tri et
   pagination en texte. Les formulaires (tri, filtres) gardent leur
   fonctionnement : on ne change que leur apparence.
   ========================================================================== */

/* 06a. En-tête de catégorie : plus d'encadré gris, titre en Cormorant */
:is(#js-product-list-header, #product-list-header) .block-category {
  min-height: 0;
  margin: 0 auto;
  max-width: 1140px;
  padding: var(--gr-e8) 15px var(--gr-e5);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

#wrapper :is(#js-product-list-header, #product-list-header) .block-category h1 {
  margin: 0 0 var(--gr-e4);
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  text-align: left;
}

:is(#js-product-list-header, #product-list-header) #underline-title-category {
  display: none; /* filet doré décoratif */
}

:is(#js-product-list-header, #product-list-header) .block-category .block-category-inner {
  justify-content: flex-start;
}

:is(#js-product-list-header, #product-list-header) .block-category-inner #category-description,
:is(#js-product-list-header, #product-list-header) .block-category-inner #category-description p,
#product-list-header .block-category-inner #category-description p {
  max-width: 62ch;
  padding-top: 0;
  font-family: var(--gr-texte);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gr-corps);
  text-align: left;
}

/* Le thème Girard centre l'en-tête sur fond #F4F7FA (body#category
   .block-category.card.card-block) : on reprend la main avec un identifiant */
body#category :is(#js-product-list-header, #product-list-header) .block-category.card.card-block,
body#search :is(#js-product-list-header, #product-list-header) .block-category.card.card-block {
  display: block;
  padding: var(--gr-e8) 15px var(--gr-e5) !important; /* contre un !important du thème */
  background-color: transparent;
  box-shadow: none;
  text-align: left;
}

body#category :is(#js-product-list-header, #product-list-header) .block-category.card.card-block > h1 {
  padding-bottom: 0;
  color: var(--gr-encre);
}

body#category :is(#js-product-list-header, #product-list-header) .block-category.card.card-block #underline-title-category {
  display: none;
}

/* En-tête de la recherche (ajouté par girard-enhance.js, le thème n'en a pas) */
body#search .gr-entete-recherche {
  padding: var(--gr-e6) 0 var(--gr-e5);
}

body#search #wrapper .gr-entete-recherche h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 300;
}

/* Titre de la page de recherche */
body#search #wrapper :is(#js-product-list-header, #product-list-header) h1,
body#search #wrapper .products-selection h1 {
  font-size: 44px;
  font-weight: 300;
}

/* 06b. Colonne de gauche : liste des collections en texte, sans boîtes */
body#category #left-column .block-categories,
body#search #left-column .block-categories {
  padding: 0;
  margin-bottom: var(--gr-e7);
  background: transparent;
  box-shadow: none;
}

body#category #left-column .block-categories .category-top-menu > li:first-child > a,
body#category #left-column .block-categories #current-categorypage-categorytreemod a {
  display: block;
  margin-bottom: var(--gr-e4);
  padding: 0 0 var(--gr-e3);
  background: transparent;
  border-bottom: 1px solid var(--gr-encre);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-encre);
}

body#category #left-column .block-categories ul.category-top-menu {
  border: 0;
}

body#category #left-column .block-categories .category-sub-menu li {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

body#category #left-column .block-categories .category-sub-menu li a {
  display: block;
  min-height: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gr-corps);
}

body#category #left-column .block-categories .category-sub-menu li a:hover,
body#category #left-column .block-categories .category-sub-menu li a:focus {
  background: transparent;
  color: var(--gr-encre);
}

/* Filtres à facettes (s'ils sont activés un jour) : même sobriété */
#search_filters {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#search_filters p.text-uppercase.h6.hidden-sm-down {
  background: transparent;
  color: var(--gr-encre);
  padding-left: 0;
  border-bottom: 1px solid var(--gr-encre);
  font-size: 11px;
  letter-spacing: var(--gr-espace-surtitre);
}

#search_filters p.h6.facet-title.hidden-sm-down {
  border: 0;
  border-bottom: var(--gr-filet-fin);
  padding-left: 0;
  font-size: 13px;
  font-weight: 400;
}

#search_filters p.h6.facet-title.hidden-sm-down::after {
  color: var(--gr-encre);
  font-size: 18px;
}

/* 06c. Barre « Il y a 212 produits » + tri */
body #products .products-selection {
  align-items: center;
  margin-bottom: var(--gr-e6);
  padding-bottom: var(--gr-e4);
  border-bottom: var(--gr-filet-fin);
}

body #products .products-selection .total-products p,
body #products .products-selection .sort-by {
  margin: 0;
  padding-top: 0;
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body #products .products-sort-order .select-title {
  padding: var(--gr-e2) 0;
  border: 0;
  border-bottom: 1px solid var(--gr-encre);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 400;
  color: var(--gr-encre);
}

body #products .products-sort-order .dropdown-menu {
  border: var(--gr-filet-fin);
  border-radius: 0;
  box-shadow: none;
  background: var(--gr-blanc);
}

body #products .products-sort-order .select-list {
  font-size: 13px;
  color: var(--gr-corps);
}

body #products .products-sort-order .select-list:hover {
  background: var(--gr-brume);
  color: var(--gr-encre);
}

/* 06d. Grille : 3 colonnes aérées (2 en mobile) */
body :is(#products, .featured-products) .products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gr-e7) var(--gr-e6);
  align-items: stretch; /* cartes de même hauteur dans une rangée */
}

body :is(#products, .featured-products) .products > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

body :is(#products, .featured-products) .products .product-miniature {
  margin: 0;
  width: 100%;
}

/* Cartes à hauteur libre : image carrée, puis nom, lien et référence */
/* Le thème Girard fixe la carte à 440 px (!important) et Classic à 250 px de
   large : carte fluide, hauteur selon le contenu */
body :is(#products, .featured-products) .product-miniature .thumbnail-container {
  width: 100%;
  height: auto !important; /* contre un !important du thème */
  margin-bottom: 0;
}

body :is(#products, .featured-products) .product-miniature .thumbnail-container .product-thumbnail {
  aspect-ratio: 1 / 1;
  height: auto;
}

body :is(#products, .featured-products) .product-miniature .thumbnail-container .product-thumbnail img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

body :is(#products, .featured-products) .product-miniature .product-description,
body :is(#products, .featured-products) .product-miniature #product-description-not-logged {
  position: static;
  width: 100%;
  height: auto;
  padding: var(--gr-e4) 0 0;
  background: transparent;
  box-shadow: none;
}

body :is(#products, .featured-products) .product-miniature .thumbnail-container .product-description::after {
  content: none;
}

/* Le thème fixe la zone de texte à 110 px (190 px connecté) en !important :
   avec une carte à hauteur libre, on rend la hauteur automatique */
body :is(#products, .featured-products) .product-miniature #product-description-not-logged,
body :is(#products, .featured-products) .product-miniature #product-description-logged {
  height: auto !important; /* contre un !important du thème */
}

body :is(#products, .featured-products) .product-miniature h2.product-title,
body :is(#products, .featured-products) .product-miniature h2.product-title a {
  margin: 0 0 var(--gr-e2);
  font-family: var(--gr-titre);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--gr-encre);
  text-align: left;
}

body :is(#products, .featured-products) .product-miniature .product-reference.h1,
body :is(#products, .featured-products) .product-miniature .product-price-and-shipping .product-reference.h1 label,
body :is(#products, .featured-products) .product-miniature .product-price-and-shipping .product-reference.h1 span {
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--gr-gris-texte);
}

body :is(#products, .featured-products) .product-miniature .product-price-and-shipping {
  justify-content: flex-start;
  margin-top: var(--gr-e3);
}

/* Aperçu rapide : petite étiquette en haut de la photo, au survol */
body :is(#products, .featured-products) .product-miniature .thumbnail-container .highlighted-informations,
body :is(#products, .featured-products) .product-miniature .thumbnail-container:hover .highlighted-informations,
body :is(#products, .featured-products) .product-miniature .thumbnail-container:focus-within .highlighted-informations {
  top: var(--gr-e3);
  right: var(--gr-e3);
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

body :is(#products, .featured-products) .product-miniature .thumbnail-container .highlighted-informations {
  opacity: 0;
}

body :is(#products, .featured-products) .product-miniature .thumbnail-container:hover .highlighted-informations,
body :is(#products, .featured-products) .product-miniature .thumbnail-container:focus-within .highlighted-informations {
  opacity: 1;
}

body :is(#products, .featured-products) .product-miniature .highlighted-informations::after {
  content: none;
}

body :is(#products, .featured-products) .product-miniature .highlighted-informations .quick-view .material-icons {
  font-size: 15px;
  vertical-align: -3px;
}

/* 06e. Pagination en texte */
body #products .pagination {
  margin-top: var(--gr-e8);
  padding-top: var(--gr-e5);
  border-top: var(--gr-filet-fin);
  font-family: var(--gr-texte);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body #products .pagination .page-list {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body #products .pagination a {
  font-weight: 400;
  color: var(--gr-corps);
}

body #products .pagination .current a {
  font-size: 13px;
  color: var(--gr-encre);
  border-bottom: 1px solid var(--gr-encre);
}

body #products .pagination .next,
body #products .pagination .previous {
  color: var(--gr-encre);
}

body #products .up .btn-secondary {
  border-color: var(--gr-filet-fort);
}


/* ==========================================================================
   07. FICHE PRODUIT — colonne d'achat sans encart, tout en texte
   ========================================================================== */
body#product .row.product-container {
  padding-top: var(--gr-e5);
  padding-bottom: var(--gr-e7); /* 48 px (96 px avant le 29/10 : grand vide sous la galerie) */
}

/* Visuel principal sur plateau, sans cadre */
body#product .images-container .product-cover {
  background: var(--gr-brume);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

body#product .images-container .product-cover img {
  mix-blend-mode: multiply;
  box-shadow: none;
}

body#product .images-container .product-cover .layer {
  background: rgba(244, 243, 241, 0.4);
}

body#product .images-container .product-cover .layer .zoom-in {
  color: var(--gr-encre);
  font-size: 32px;
}

/* Vignettes : plateau, sans cadre ; la vignette active est pleinement opaque */
body#product .product-images > li.thumb-container > .thumb {
  border: 0;
  border-radius: 0;
  background: var(--gr-brume);
  box-shadow: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

body#product .product-images > li.thumb-container > .thumb.selected,
body#product .product-images > li.thumb-container > .thumb:hover {
  border: 0;
  opacity: 1;
}

/* Colonne texte */
body#product #div-description-and-price-product {
  align-items: flex-start;
}

body#product #div-description-and-price-product > .tabs {
  padding-right: var(--gr-e7);
}

/* Titre : Cormorant 400, grand, casse normale */
body#product #wrapper h1.h1[itemprop="name"] {
  margin: 0 0 var(--gr-e4);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--gr-encre);
}

body#product #wrapper h1.h1[itemprop="name"]::first-letter {
  text-transform: uppercase;
}

/* Référence sous le titre : surtitre */
body#product .tabs > .product-reference.h1,
body#product .first-bloc-product-container > .product-reference.h1 {
  margin: 0 0 var(--gr-e7);
  padding: 0;
  border: 0;
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

body#product .tabs > .product-reference.h1 .label,
body#product .first-bloc-product-container > .product-reference.h1 .label,
body#product .tabs > .product-reference.h1 span,
body#product .first-bloc-product-container > .product-reference.h1 span {
  font-size: 10px;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
}

body#product .tabs > .product-reference.h1 .label,
body#product .first-bloc-product-container > .product-reference.h1 .label {
  color: var(--gr-gris-texte);
  font-weight: 400;
}

body#product .tabs > .product-reference.h1 span,
body#product .first-bloc-product-container > .product-reference.h1 span {
  color: var(--gr-encre);
}

/* Intertitres « Description », « Détails du produit » : surtitres gris */
:root body#product #wrapper h2.description-product-page,
:root body#product #wrapper h2.caracteristique-product-page {
  margin: var(--gr-e6) 0 var(--gr-e4);
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  border: 0;
  background: none;
}

body#product #description .product-description,
body#product .product-description {
  font-family: var(--gr-texte);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gr-corps);
  text-align: left;
}

body#product .product-features .data-sheet dt.name,
body#product .product-features .data-sheet dd.value {
  background: transparent;
  border-bottom: var(--gr-filet-fin);
  font-size: 13px;
  border-radius: 0;
}

body#product .product-features .data-sheet dt.name {
  color: var(--gr-gris-texte);
  font-weight: 400;
}

/* Prix (client connecté) */
body#product .product-prices .current-price,
body#product .product-prices .current-price span {
  font-family: var(--gr-titre);
  font-size: 30px;
  font-weight: 500;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

body#product .product-prices .tax-shipping-delivery-label {
  color: var(--gr-gris-texte);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* Colonne d'achat (visiteur) : plus d'encart ; un filet fin au-dessus,
   puis tout en texte */
body#product .bloc-hors-connexion {
  width: 100%;
  margin: 0;
  padding: var(--gr-e6) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gr-encre);
  border-radius: 0;
  align-items: flex-start;
  gap: var(--gr-e6);
}

body#product .bloc-hors-connexion .reference-hors-connexion {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

body#product .bloc-hors-connexion .reference-hors-connexion .product-reference {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

body#product .bloc-hors-connexion .reference-hors-connexion .product-reference span {
  color: var(--gr-encre);
}

body#product .bloc-hors-connexion .hors-connexion {
  width: 100%;
  padding: var(--gr-e5) 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  align-items: flex-start;
}

/* « Connectez-vous » : le bouton noir de la page */
body#product .bloc-hors-connexion .hors-connexion a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.35em 2.4em;
  margin-bottom: var(--gr-e3);
  background: var(--gr-encre);
  border-radius: 0;
  color: var(--gr-blanc);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--gr-espace-bouton);
  text-transform: uppercase;
  text-decoration: none;
}

body#product .bloc-hors-connexion .hors-connexion a:hover {
  background: #000000;
  color: var(--gr-blanc);
}

body#product .bloc-hors-connexion .hors-connexion span,
body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion span {
  font-family: var(--gr-texte);
}

body#product .bloc-hors-connexion .hors-connexion span {
  font-size: 13px;
  font-weight: 300;
  color: var(--gr-gris-texte);
}

body#product .bloc-hors-connexion .contact-hors-connexion {
  width: 100%;
  padding: var(--gr-e5) 0 0;
  background: transparent;
  border-top: var(--gr-filet-fin);
  justify-content: flex-start;
  color: var(--gr-corps);
}

/* Pictogramme décoratif retiré (le texte suffit) */
body#product .bloc-hors-connexion .contact-hors-connexion .icon-contact-hors-connexion {
  display: none;
}

body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion {
  align-items: flex-start;
  text-align: left;
  padding-left: 0;
  margin-left: 0;
}

body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion > * {
  margin-left: 0;
  padding-left: 0;
}

body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion a {
  font-family: var(--gr-titre);
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--gr-encre);
}

body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion span {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--gr-gris-texte);
}

/* 07c. ZONE D'ACHAT (client connecté), commune à la fiche et à l'aperçu rapide.
   P = :is(body#product #wrapper, body .quickview). Le thème pose la remise
   sur une bande pétrole (.remise-current-price), un bouton rose en
   !important et un sélecteur de quantité ombré : on harmonise. */

/* Bloc prix : libellés en surtitre, montants à droite, plus de bande pleine */
:is(body#product #wrapper, body .quickview) .product-prices .tab-price-style {
  padding: var(--gr-e2) 0;
  font-family: var(--gr-texte);
  font-size: 15px;
  font-weight: 400;
  color: var(--gr-corps);
}

:is(body#product #wrapper, body .quickview) .product-prices .product-discount .prix-brute,
:is(body#product #wrapper, body .quickview) .product-prices .current-price .remise-current-price .remise-prix,
:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .prix-net {
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
  text-align: left;
}

:is(body#product #wrapper, body .quickview) .product-prices .product-discount .regular-price {
  font-family: var(--gr-texte);
  font-size: 15px;
  font-weight: 400;
  color: var(--gr-gris-texte);
  text-align: right;
}

:is(body#product #wrapper, body .quickview) .product-prices .current-price .remise-current-price {
  background-color: transparent; /* bande pétrole du thème */
  color: var(--gr-encre);
  border-top: var(--gr-filet-fin);
  border-bottom: var(--gr-filet-fin);
}

:is(body#product #wrapper, body .quickview) .product-prices .current-price span.discount.discount-percentage,
:is(body#product #wrapper, body .quickview) .product-prices .current-price span.discount.discount-amount,
:is(body#product #wrapper, body .quickview) .product-prices .remise-current-price .discount-percentage {
  width: auto;
  margin-left: 0;
  padding: 2px 8px;
  background-color: transparent;
  border: 1px solid var(--gr-encre);
  border-radius: 0;
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gr-encre);
  text-align: center;
}

:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .product-price-net,
:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .product-price-net span {
  font-family: var(--gr-titre);
  font-size: 30px;
  font-weight: 500;
  color: var(--gr-encre);
  text-align: right;
  font-variant-numeric: lining-nums;
}

:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .prix-net {
  color: var(--gr-encre);
}

/* « Vendu par 6 unités », « Achetez par carton… » : texte courant */
:is(body#product #wrapper, body .quickview) .product-information p,
:is(body#product #wrapper, body .quickview) .product-actions p {
  font-family: var(--gr-texte);
  font-size: 15px;
  color: var(--gr-corps);
}

/* Bouton « Ajouter au panier » : noir. Le rose du thème (ou d'un module)
   résistait à la règle précédente : identifiant du formulaire en plus. */
:is(body#product #wrapper, body .quickview) #add-to-cart-or-refresh .add .btn.btn-primary.add-to-cart,
:is(body#product #wrapper, body .quickview) .product-actions .add-to-cart {
  height: 48px;
  padding: 0 var(--gr-e5);
  background: var(--gr-encre) !important; /* contre un !important du thème */
  background-color: var(--gr-encre) !important; /* idem */
  border: 1px solid var(--gr-encre);
  border-radius: 0;
  box-shadow: none;
  color: var(--gr-blanc);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-bouton);
  text-transform: uppercase;
}

:is(body#product #wrapper, body .quickview) #add-to-cart-or-refresh .add .btn.btn-primary.add-to-cart:hover,
:is(body#product #wrapper, body .quickview) #add-to-cart-or-refresh .add .btn.btn-primary.add-to-cart:focus,
:is(body#product #wrapper, body .quickview) .product-actions .add-to-cart:hover {
  background: #000000 !important; /* contre un !important du thème */
  background-color: #000000 !important; /* idem */
}

/* Sélecteur de quantité Classic (touchspin) : plat, angles droits, flèches nettes */
:is(body#product #wrapper, body .quickview) .product-quantity .bootstrap-touchspin {
  box-shadow: none;
}

:is(body#product #wrapper, body .quickview) .product-quantity #quantity_wanted,
:is(body#product #wrapper, body .quickview) .bootstrap-touchspin input.form-control {
  height: 48px;
  width: 56px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  font-family: var(--gr-texte);
  font-size: 16px;
  font-weight: 500;
  color: var(--gr-encre);
  text-align: center;
}

:is(body#product #wrapper, body .quickview) .bootstrap-touchspin .btn-touchspin {
  height: 24px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  background-color: var(--gr-blanc);
  color: var(--gr-encre);
}

:is(body#product #wrapper, body .quickview) .bootstrap-touchspin .btn-touchspin:hover {
  background-color: var(--gr-brume);
}

:is(body#product #wrapper, body .quickview) .product-add-to-cart .control-label,
:is(body#product #wrapper, body .quickview) .product-quantity .control-label,
:is(body#product #wrapper, body .quickview) .product-quantity label {
  font-family: var(--gr-texte);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

/* Disponibilité : petite, en vert sobre */
:is(body#product #wrapper, body .quickview) #product-availability {
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-succes);
}

:is(body#product #wrapper, body .quickview) #product-availability .product-available {
  color: var(--gr-succes);
  font-size: 16px;
  vertical-align: -3px;
}

/* Encart « Une question ? » : plus de bandeau noir à pointes */
body#product #tchat-box-question {
  height: auto;
  margin: var(--gr-e5) 0 0;
  padding: var(--gr-e5) 0 0;
  background-color: transparent;
  border-top: var(--gr-filet-fin);
}

body#product #tchat-box-question::before,
body#product #tchat-box-question::after,
body#product #tchat-question::before {
  content: none; /* pointes blanches et pictogramme décoratifs */
}

body#product #tchat-question {
  padding-top: 0;
  text-align: left;
}

body#product #wrapper #tchat-question h3 {
  margin: 0 0 var(--gr-e2);
  font-family: var(--gr-titre);
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  color: var(--gr-encre);
}

body#product #wrapper #tchat-question p {
  width: auto;
  margin: 0;
  font-family: var(--gr-texte);
  font-size: 15px;
  color: var(--gr-corps);
}

/* 07d. Zone d'achat, toutes largeurs (retours de Léo du 29/10, mobile puis PC) :
   une seule colonne alignée à gauche, même marge pour tout le bloc commercial.
   Le thème met les libellés et montants en inline-block de 49 %, centre la
   colonne d'achat (flex + align-items:center, 80 % de large au-delà de
   1 450 px), décale le bouton de 20 px, centre les mentions de
   conditionnement et décale « Détails du produit » de 5 px.
   Mise en page seulement : les champs et le bouton du formulaire gardent
   leur balisage et leur fonctionnement. Compatible avec gpe.css
   (girardproductenhancer), qui ne règle que le filet et la marge gauche de
   la colonne au-delà de 992 px. */

/* Prix brut / remise / prix net : libellé à gauche, valeur à droite */
:is(body#product #wrapper, body .quickview) .product-prices .tab-price-style {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gr-e1) var(--gr-e3);
  width: 100%;
  padding: var(--gr-e2) 0;
}

:is(body#product #wrapper, body .quickview) .product-prices .tab-price-style > * {
  width: auto;
  margin: 0;
}

:is(body#product #wrapper, body .quickview) .product-prices .tab-price-style > :last-child {
  margin-left: auto;
  text-align: right;
}

/* Mentions de conditionnement : à gauche, en petit. Les classes de
   centrage Bootstrap (.text-xs-center…) sont en !important. */
:is(body#product #wrapper, body .quickview) .product-information :is(p, .text-center, .text-xs-center, .text-sm-center, #cart-reduction-module-text, [class*="unite-vente"]) {
  text-align: left !important; /* contre les classes de centrage en !important */
}

:is(body#product #wrapper, body .quickview) .product-information > :is(p, div:not(.product-prices, .product-actions, #tchat-box-question, .tabs, .product-additional-info)),
:is(body#product #wrapper, body .quickview) .product-information > :is(div, p) > p,
:is(body#product #wrapper, body .quickview) .product-information #cart-reduction-module-text p {
  margin: 0 0 var(--gr-e1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gr-corps);
}

:is(body#product #wrapper, body .quickview) .product-information #cart-reduction-module-text {
  margin-top: 0;
}

/* Colonne d'achat : plus de centrage ni de largeur réduite */
:is(body#product #wrapper, body .quickview) .product-add-to-cart {
  align-items: stretch;
  width: 100%;
  margin: var(--gr-e4) 0 0;
}

/* Quantité + bouton : une ligne, à gauche, mêmes haut et bas (48 px) */
:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gr-e2);
  width: 100%;
  margin: 0;
}

/* clearfix inutile en flex : son ::after prendrait un écart */
:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity::before,
:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity::after {
  content: none;
}

:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity :is(.qty, .add) {
  float: none;
  margin: 0;
}

:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity .qty {
  flex: none;
}

:is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity .add .add-to-cart {
  margin: 0;
  white-space: nowrap;
}

/* Disponibilité : à gauche, sous la ligne d'achat */
:is(body#product #wrapper, body .quickview) .product-add-to-cart #product-availability {
  display: block;
  align-self: flex-start;
  margin: var(--gr-e3) 0 0;
  text-align: left;
}

/* « Détails du produit » : le thème décale ce bloc de 5 px */
body#product #wrapper .product-features {
  margin-left: 0;
}

/* Mobile (< 768 px) : le bouton prend le reste de la ligne */
@media (max-width: 767.98px) {
  :is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity .add {
    flex: 1 1 auto;
    min-width: 0;
  }

  :is(body#product #wrapper, body .quickview) .product-add-to-cart .product-quantity .add .add-to-cart {
    width: 100%;
    padding: 0 var(--gr-e3);
  }
}

/* Le thème colore aussi les prix et la mention « connecté » en rose */
.product-price,
#wrapper .product-price {
  color: var(--gr-encre);
}

#header .header-nav .user-info .logged {
  color: var(--gr-encre);
}
body#product .product-actions .product-quantity .qty .input-group,
body#product .product-actions .bootstrap-touchspin .input-group-btn-vertical .btn {
  border-color: var(--gr-filet-fort);
  border-radius: 0;
}

/* « Dans la même gamme » : grand titre sans filet doré ; 32 px entre le filet
   et le titre (le 29/10 : 96 px de marge et 96 px de retrait, jugés trop vides) */
body#product .featured-products {
  margin-top: 0 !important; /* contre .mt-3 du thème (3rem en !important) */
  padding-top: var(--gr-e6);
  border-top: var(--gr-filet-fin);
}

body#product .featured-products > .gr-surtitre {
  margin-bottom: var(--gr-e3);
}

:root body#product #wrapper .featured-products > h2 {
  margin-bottom: var(--gr-e7);
  font-size: 40px;
  text-align: left;
}

body#product .featured-products #separation-product-same-category {
  display: none;
}

body#product .featured-products .products {
  gap: var(--gr-e6);
}

/* 07b. Lisibilité de la fiche (retour du 26/10) : texte courant ≥ 15 px,
   Jost 400 (le 300 paraît pâle à l'écran), contrastes AA ; références en
   chiffres lisibles ; plus aucun texte en Raleway (police du thème). */
body#product #description .product-description,
body#product .product-description {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gr-corps);            /* 9:1 sur blanc */
}

body#product .tabs > .product-reference.h1 .label,
body#product .first-bloc-product-container > .product-reference.h1 .label,
body#product .bloc-hors-connexion .reference-hors-connexion .product-reference,
body#product .bloc-hors-connexion .reference-hors-connexion .product-reference .label {
  font-family: var(--gr-texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gr-gris-texte);       /* 4,7:1 sur blanc */
}

body#product .tabs > .product-reference.h1 span,
body#product .first-bloc-product-container > .product-reference.h1 span,
body#product .bloc-hors-connexion .reference-hors-connexion .product-reference span {
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gr-encre);
}

:root body#product #wrapper h2.description-product-page,
:root body#product #wrapper h2.caracteristique-product-page {
  font-size: 11px;
  font-weight: 500;
}

body#product .bloc-hors-connexion .hors-connexion span,
body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion span {
  font-family: var(--gr-texte);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gr-corps);
}

body#product .bloc-hors-connexion .contact-hors-connexion .link-contact-hors-connexion a {
  font-size: 28px;
  font-weight: 400;
}

/* Référence affichée deux fois (sous le titre et dans la colonne d'achat) :
   on garde celle du titre. Seul le libellé est masqué, pas le bloc de connexion. */
body#product .bloc-hors-connexion .reference-hors-connexion > .product-reference {
  display: none;
}

body#product .bloc-hors-connexion .hors-connexion {
  padding-top: 0;
}

body#product .featured-products .product-reference.h1 label,
body#product .featured-products .product-reference.h1 span {
  font-size: 12px;
  letter-spacing: 0.18em;
}

#wrapper .breadcrumb,
#wrapper .breadcrumb li a,
#wrapper .breadcrumb li span {
  font-family: var(--gr-texte);
  font-size: 11px;
}


/* ==========================================================================
   08. PANIER (CSS seul : aucune manipulation du DOM sur cette page)
   Couleurs, polices, bordures et espacements uniquement : jamais display,
   position ni visibility. Les champs restent lisibles en 16 px.
   ========================================================================== */

/* 08a. Le thème force Roboto (panier) et Noto Sans (tunnel) sur tous les
   textes : on rend Jost partout, sauf aux icônes Material. Les règles
   particulières qui suivent ont une spécificité égale ou supérieure. */
body#cart #wrapper :is(p, a, span, label, li, small, strong, td, th, button, input, select):not(.material-icons),
body#checkout #wrapper :is(p, a, span, label, li, small, strong, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, button, input, select):not(.material-icons) {
  font-family: var(--gr-texte);
}

/* 08b. Éléments propres au panier Girard (tableau d'articles, saisie rapide,
   franco de port, choix du transporteur) : couleurs et bordures seulement */
body#cart #wrapper .cart-grid-body .card-block {
  background-color: transparent;
}

body#cart #wrapper .cart-grid-body .card-block h1 {
  color: var(--gr-encre);
}

body#cart #wrapper table th {
  background-color: transparent;
  border-bottom: 1px solid var(--gr-encre);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body#cart #wrapper .cart-grid-body table.cart-items tr.cart-item:nth-child(even),
body#cart #wrapper .cart-grid-body table.cart-items tr.cart-item:nth-child(odd) {
  background-color: transparent;
}

body#cart #wrapper table.cart-items tr.cart-item td {
  border-bottom: var(--gr-filet-fin);
  font-size: 15px;
  color: var(--gr-corps);
}

body#cart #wrapper .checkout.cart-detailed-actions.card-block .btn {
  background-color: var(--gr-encre) !important; /* contre un !important du thème (rose #c91a56) */
  border-color: var(--gr-encre);
  color: var(--gr-blanc);
}

body#cart #wrapper #div-franco-de-port {
  background: var(--gr-brume);
  font-size: 14px;
  color: var(--gr-encre);
}

body#cart #wrapper .cart-grid-body #div-cart-saisie-rapide {
  background-color: var(--gr-brume);
}

body#cart #wrapper .cart-grid-body #div-cart-saisie-rapide input#input-reference-saisie-rapide {
  height: 44px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  font-size: 16px;
}

body#cart #wrapper .cart-grid-body #div-cart-saisie-rapide button {
  background-color: var(--gr-encre);
  border-color: var(--gr-encre);
  border-radius: 0;
}

body#cart #wrapper #cart-mode-de-livraison {
  border: var(--gr-filet-fin);
  box-shadow: none;
}

body#cart #wrapper #cart-mode-de-livraison .row.option-livraison {
  background: var(--gr-brume);
}

body#cart #wrapper .has-discount .discount,
body#cart #wrapper span.discount.discount-percentage {
  background-color: transparent;
  border: 1px solid var(--gr-encre);
  border-radius: 0;
  color: var(--gr-encre);
}

body#cart #wrapper .alert-danger {
  background-color: #fbeae7;   /* orange vif dans le thème */
  border-color: var(--gr-erreur);
  color: var(--gr-erreur);
}

body#cart #wrapper .card,
body#checkout #wrapper .card,
body#order-confirmation #wrapper .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--gr-blanc);
}

body#cart #wrapper .cart-container h1,
body#cart #wrapper .cart-grid-body h1 {
  font-size: 44px;
  font-weight: 300;
  text-transform: none;
}

body#cart #wrapper .separator {
  border-top: 1px solid var(--gr-encre);
}

body#cart #wrapper .cart-items .cart-item {
  padding: var(--gr-e5) 0;
  border-bottom: var(--gr-filet-fin);
}

body#cart #wrapper .cart-item .product-line-grid-left img {
  background: var(--gr-brume);
  mix-blend-mode: multiply;
}

body#cart #wrapper .cart-item .product-line-info a.label {
  font-family: var(--gr-titre);
  font-size: 21px;
  font-weight: 400;
  color: var(--gr-encre);
}

body#cart #wrapper .cart-item .product-line-info .value,
body#cart #wrapper .cart-item .product-line-info .label {
  font-size: 13px;
  color: var(--gr-corps);
}

body#cart #wrapper .cart-item .product-price,
body#cart #wrapper .cart-item .price,
body#cart #wrapper .cart-item .current-price .price {
  font-family: var(--gr-titre);
  font-size: 20px;
  font-weight: 500;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

body#cart #wrapper .cart-item .remove-from-cart,
body#cart #wrapper .cart-item .remove-from-cart .material-icons {
  color: var(--gr-gris-texte);
}

body#cart #wrapper .cart-item .remove-from-cart:hover .material-icons {
  color: var(--gr-encre);
}

/* Sélecteur de quantité (bootstrap-touchspin) */
body#cart #wrapper .bootstrap-touchspin .form-control,
body#cart #wrapper .bootstrap-touchspin input.js-cart-line-product-quantity {
  height: 44px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  font-size: 16px;
  color: var(--gr-encre);
  background: var(--gr-blanc);
}

body#cart #wrapper .bootstrap-touchspin .btn-touchspin {
  border-color: var(--gr-filet-fort);
  border-radius: 0;
  background: var(--gr-brume);
  color: var(--gr-encre);
}

/* Récapitulatif */
body#cart #wrapper .cart-summary,
body#checkout #wrapper .cart-summary,
body#checkout #wrapper #js-checkout-summary {
  background: var(--gr-brume);
}

body#cart #wrapper .cart-summary-line,
body#checkout #wrapper .cart-summary-line {
  font-size: 15px;
  color: var(--gr-corps);
}

body#cart #wrapper .cart-summary-line .label,
body#checkout #wrapper .cart-summary-line .label {
  font-weight: 400;
}

body#cart #wrapper .cart-summary-line .value,
body#checkout #wrapper .cart-summary-line .value {
  font-weight: 500;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums tabular-nums;
}

body#cart #wrapper .cart-total,
body#checkout #wrapper .cart-total {
  background: transparent;
  border-top: 1px solid var(--gr-encre);
}

body#cart #wrapper .cart-total .label,
body#cart #wrapper .cart-total .value,
body#checkout #wrapper .cart-total .label,
body#checkout #wrapper .cart-total .value {
  font-family: var(--gr-titre);
  font-size: 22px;
  font-weight: 500;
  color: var(--gr-encre);
}

body#cart #wrapper .cart-detailed-totals hr,
body#checkout #wrapper .cart-summary hr {
  border-top: var(--gr-filet-fin);
}

/* Code promo */
body#cart #wrapper .block-promo .promo-code,
body#checkout #wrapper .block-promo .promo-code {
  background: transparent;
}

body#cart #wrapper .block-promo .promo-input,
body#checkout #wrapper .block-promo .promo-input {
  height: 44px;
  border: 0;
  border-bottom: 1px solid var(--gr-encre);
  border-radius: 0;
  font-size: 16px;
  background: transparent;
}

body#cart #wrapper .block-promo .promo-code-button,
body#cart #wrapper .block-promo .collapse-button {
  font-size: 13px;
  color: var(--gr-encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Bouton « Commander » : le bouton noir de la page (zone 04) */
body#cart #wrapper .cart-detailed-actions .btn-primary {
  width: 100%;
}

/* Réassurance éventuelle sous le panier */
body#cart #wrapper #block-reassurance,
body#checkout #wrapper #block-reassurance {
  background: transparent;
  box-shadow: none;
  border-top: var(--gr-filet-fin);
}

body#cart #wrapper #block-reassurance li,
body#checkout #wrapper #block-reassurance li {
  border-bottom: var(--gr-filet-fin);
}


/* ==========================================================================
   09. TUNNEL DE COMMANDE (CSS seul)
   Prudence : couleurs, polices, bordures et espacements seulement ; jamais
   display, position ni visibility des étapes, des champs et des moyens de
   paiement. Aucune animation ici (zone 14 exclue sur #checkout).
   ========================================================================== */

/* Étapes : plus de cartes ombrées, un filet entre chaque étape */
body#checkout #wrapper section.checkout-step {
  border-bottom: var(--gr-filet-fin);
  box-shadow: none;
  background: var(--gr-blanc);
}

body#checkout #wrapper section.checkout-step .step-title {
  font-family: var(--gr-titre);
  font-size: 26px;
  font-weight: 400;
  text-transform: none;
  color: var(--gr-gris-texte);
}

body#checkout #wrapper section.checkout-step.-current .step-title,
body#checkout #wrapper section.checkout-step.-reachable .step-title {
  color: var(--gr-encre);
}

body#checkout #wrapper section.checkout-step .step-number {
  font-family: var(--gr-titre);
  font-weight: 300;
  color: var(--gr-gris);
}

body#checkout #wrapper section.checkout-step .done,
body#checkout #wrapper section.checkout-step.-complete .step-title .material-icons {
  color: var(--gr-succes);
}

body#checkout #wrapper section.checkout-step .step-edit {
  font-size: 13px;
  color: var(--gr-encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Onglets « Commander en tant qu'invité / Se connecter » */
body#checkout #wrapper .nav-inline .nav-link,
body#checkout #wrapper .nav .nav-link {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gr-gris-texte);
}

body#checkout #wrapper .nav-inline .nav-link.active,
body#checkout #wrapper .nav .nav-link.active {
  color: var(--gr-encre);
  border-bottom: 1px solid var(--gr-encre);
}

/* Formulaires : champs nets, 16 px, angles droits, focus encre */
body#checkout #wrapper .form-control-label,
body#cart #wrapper .form-control-label,
body#authentication #wrapper .form-control-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gr-corps);
}

body#checkout #wrapper .form-control,
body#authentication #wrapper .form-control,
body#checkout #wrapper .form-control-select {
  min-height: 44px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
  background-color: var(--gr-blanc);
  box-shadow: none;
  font-family: var(--gr-texte);
  font-size: 16px;
  color: var(--gr-encre);
}

body#checkout #wrapper .form-control:focus,
body#authentication #wrapper .form-control:focus {
  border-color: var(--gr-encre);
  outline: 1px solid var(--gr-encre);
  outline-offset: 0;
}

body#checkout #wrapper .form-control-comment {
  font-size: 13px;
  color: var(--gr-gris-texte);
}

body#checkout #wrapper .input-group-btn .btn,
body#authentication #wrapper .input-group-btn .btn {
  min-height: 44px;
  border-radius: 0;
  background: var(--gr-brume);
  color: var(--gr-encre);
}

/* Cases et boutons radio : encre au lieu du bleu Classic */
body#checkout #wrapper .custom-checkbox input[type="checkbox"] + span,
body#checkout #wrapper .custom-radio,
body#authentication #wrapper .custom-checkbox input[type="checkbox"] + span {
  border-color: var(--gr-encre);
  border-radius: 0;
}

body#checkout #wrapper .custom-radio {
  border-radius: 50%;
}

body#checkout #wrapper .custom-radio input[type="radio"]:checked + span {
  background-color: var(--gr-encre);
}

body#checkout #wrapper .custom-checkbox input[type="checkbox"] + span .checkbox-checked,
body#authentication #wrapper .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: var(--gr-encre);
}

/* Adresses, transporteurs, paiements : blocs plats, sélection en encre */
body#checkout #wrapper .address-item,
body#checkout #wrapper .delivery-option,
body#checkout #wrapper .payment-option {
  border: 1px solid var(--gr-filet);
  border-radius: 0;
  background: var(--gr-blanc);
}

body#checkout #wrapper .address-item.selected {
  border-color: var(--gr-encre);
}

body#checkout #wrapper .delivery-option {
  background: var(--gr-brume);
}

body#checkout #wrapper .carrier-name,
body#checkout #wrapper .address-alias {
  font-weight: 500;
  color: var(--gr-encre);
}

body#checkout #wrapper .carrier-delay,
body#checkout #wrapper .carrier-price {
  font-size: 14px;
  color: var(--gr-corps);
}

body#checkout #wrapper #conditions-to-approve,
body#checkout #wrapper .condition-label {
  font-size: 14px;
  color: var(--gr-corps);
}

body#checkout #wrapper .condition-label a {
  color: var(--gr-encre);
  text-decoration: underline;
}

body#checkout #wrapper #payment-confirmation .btn-primary,
body#checkout #wrapper .continue.btn-primary {
  min-width: 240px;
}

/* Alertes Bootstrap : sobres, lisibles */
body#cart #wrapper .alert,
body#checkout #wrapper .alert {
  border-radius: 0;
  font-size: 14px;
}

/* Confirmation de commande */
body#order-confirmation #wrapper #content-hook_order_confirmation .card-title,
body#order-confirmation #wrapper .card-title.h1 {
  font-family: var(--gr-titre);
  font-size: 36px;
  font-weight: 400;
  text-transform: none;
  color: var(--gr-encre);
}

body#order-confirmation #wrapper #content-hook_order_confirmation .done {
  color: var(--gr-succes);
}

body#order-confirmation #wrapper #order-items .order-line {
  border-bottom: var(--gr-filet-fin);
}


/* ==========================================================================
   10. PIED DE PAGE — sobre, façon LOFT
   ========================================================================== */

/* Réassurance : texte fin, petits pictogrammes gris */
:root body #footer .elementor .elementor-widget-icon .elementor-icon {
  color: var(--gr-gris);
  font-size: 18px;
}

:root body #footer .elementor .elementor-widget-text-editor.elementor-element {
  font-family: var(--gr-texte);
  font-weight: 300;
  color: var(--gr-corps);
}

:root body #footer .elementor .elementor-widget-text-editor strong {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-surtitre);
  color: var(--gr-encre);
}

/* Réseaux + newsletter : fond encre */
:root body #footer .elementor .elementor-section-stretched.elementor-top-section {
  background-color: var(--gr-encre);
}

:root body #footer .elementor .elementor-section-stretched.elementor-top-section > .elementor-background-overlay {
  opacity: 0;
}

:root body #footer .elementor .elementor-section-stretched .elementor-widget-heading .elementor-heading-title {
  font-family: var(--gr-titre);
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  color: var(--gr-blanc);
}

:root body #footer .elementor .elementor-section-stretched .elementor-divider-separator {
  width: 32px;
  border-top-width: 1px;
  border-top-color: #3a3936;
}

/* Séparateur vertical entre réseaux et newsletter (thème : 1 px blanc) */
#footer div#bloc-newsletter-before-footer .elementor-widget-wrap {
  border-left-color: #3a3936;
}

/* Le thème pose un trait gris de 2 px au-dessus du pied, sur la fiche produit */
body#product #footer {
  border-top: 0;
}

:root body #footer .elementor .icon-before-footer-follow-socail-media svg,
:root body #footer .elementor .icon-before-footer-follow-socail-media i {
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: #d9d7d2;
  fill: #d9d7d2;
}

/* Newsletter : champ souligné, bouton blanc */
:root body #footer .elementor .elementor-widget-email-subscription .elementor-field {
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #5a5955;
  border-radius: 0;
  background: transparent;
  color: var(--gr-blanc);
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

:root body #footer .elementor .elementor-widget-email-subscription .elementor-field::placeholder {
  color: var(--gr-gris);
}

:root body #footer .elementor .elementor-widget-email-subscription .elementor-field:focus {
  border-bottom-color: var(--gr-blanc);
  outline: none;
}

:root body #footer .elementor .elementor-widget-email-subscription button[type="submit"].elementor-button {
  height: 44px;
  background-color: var(--gr-blanc);
  border-color: var(--gr-blanc);
  color: var(--gr-encre);
}

:root body #footer .elementor .elementor-widget-email-subscription button[type="submit"].elementor-button:hover {
  background-color: var(--gr-brume);
  border-color: var(--gr-brume);
  color: var(--gr-encre);
}

/* Barre de copyright */
#footer .footer-container {
  background: var(--gr-encre);
  border-top: 1px solid #2c2b29;
}

#footer .footer-container,
#footer .footer-container p,
#footer .footer-container a {
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--gr-gris);
}

#footer .footer-container a:hover {
  color: var(--gr-blanc);
}


/* ==========================================================================
   11. SECTIONS CREATIVE ELEMENTS (accueil et pages CMS)
   Sélecteurs génériques (par type de widget), jamais par identifiant
   d'élément : ils restent valables si la page est modifiée dans CE.
   ========================================================================== */

/* Beaucoup d'air entre les sections (padding sur la section elle-même :
   n'interfère pas avec l'étirement pleine largeur de CE) */
:root body #content-wrapper .elementor .elementor-top-section {
  padding-top: calc(var(--gr-section) / 2);
  padding-bottom: calc(var(--gr-section) / 2);
}

:root body #content-wrapper .elementor .elementor-top-section:first-child {
  padding-top: var(--gr-e5);
}

/* Section qui ne contient qu'un titre : collée au contenu qui suit */
:root body #content-wrapper .elementor .elementor-top-section:not(:has(.elementor-widget:not(.elementor-widget-heading):not(.elementor-widget-divider):not(.elementor-widget-spacer))) {
  padding-bottom: 0;
}

/* Rangées de cartes catégories : une grille continue, pas des sections */
:root body #content-wrapper .elementor .elementor-top-section:has(.bloc-category-homepage) {
  padding-top: var(--gr-e5);
  padding-bottom: var(--gr-e5);
}

/* Titres : Cormorant 400, casse normale, grands */
:root body #wrapper .elementor .elementor-widget-heading .elementor-heading-title {
  font-family: var(--gr-titre);
  font-weight: 400;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gr-encre);
}

:root body #wrapper .elementor .elementor-widget-heading h2.elementor-heading-title {
  font-size: 44px;
}

/* Numérotation éditoriale de l'accueil : « 01 — » en surtitre au-dessus de
   chaque titre de section (compteur CSS, aucun texte ajouté au HTML) */
body#index #content-wrapper {
  counter-reset: gr-section gr-bloc;
}

body#index #content-wrapper .elementor-top-section .elementor-widget-heading .elementor-heading-title {
  counter-increment: gr-section;
}

body#index #content-wrapper .elementor-top-section .elementor-widget-heading .elementor-heading-title::before {
  content: counter(gr-section, decimal-leading-zero) "\2002\2014";
  display: block;
  margin-bottom: var(--gr-e5);
  font-family: var(--gr-texte);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--gr-espace-surtitre);
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Séparateurs CE : court filet d'encre */
:root body #wrapper .elementor .elementor-widget-divider .elementor-divider-separator {
  width: 32px;
  margin: 0 auto;
  border-top-width: 1px;
  border-top-color: var(--gr-encre);
}

/* Texte */
:root body #wrapper .elementor .elementor-widget-text-editor.elementor-element {
  font-family: var(--gr-texte);
  font-weight: 300;
  line-height: 1.75;
  color: var(--gr-corps);
}

:root body #wrapper .elementor .elementor-widget-text-editor p,
:root body #wrapper .elementor .elementor-widget-text-editor span {
  font-family: var(--gr-texte);
  text-align: left;
}

/* Texte justifié écrit dans le HTML (attribut style) : aligné à gauche */
:root body #wrapper .elementor .elementor-widget-text-editor [style*="justify"] {
  text-align: left !important;
}

:root body #wrapper .elementor .elementor-widget-text-editor .elementor-text-editor {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Encarts de texte sur fond gris posés dans CE : fond retiré */
:root body #wrapper .elementor .elementor-widget-text-editor.elementor-element,
:root body #wrapper .elementor .elementor-widget-text-editor.elementor-element > .elementor-widget-container {
  background-color: transparent;
}

/* Polices et tailles écrites dans le HTML (attribut style, ex. Arial) :
   on impose la typographie du site */
:root body #wrapper .elementor .elementor-widget-text-editor [style*="font-family"] {
  font-family: var(--gr-texte) !important;
}

/* Texte collé depuis un autre outil (fond #f7f7f8, couleur #374151 en attribut
   style) : fond retiré, couleur du texte courant */
:root body #wrapper .elementor .elementor-widget-text-editor [style*="background-color"] {
  background-color: transparent !important;
}

:root body #wrapper .elementor .elementor-widget-text-editor [style*="color: #374151"] {
  color: var(--gr-corps) !important;
}

/* Lettrine éventuelle */
:root body #wrapper .elementor .elementor-widget-text-editor .elementor-drop-cap-letter {
  font-family: var(--gr-titre);
  color: var(--gr-encre);
}

/* Liste à icônes : pastilles fines en gris */
:root body #wrapper .elementor .elementor-widget-icon-list .elementor-icon-list-icon i {
  color: var(--gr-gris-clair);
  font-size: 12px;
}

:root body #wrapper .elementor .elementor-widget-icon-list .elementor-icon-list-text {
  font-family: var(--gr-texte);
  font-weight: 300;
  color: var(--gr-corps);
}

/* Images : sans ombre, sans cadre */
:root body #wrapper .elementor .elementor-widget-image img {
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

/* Carte Google : en niveaux de gris, pour rester monochrome */
:root body #wrapper .elementor .elementor-widget-google_maps iframe {
  filter: grayscale(1) contrast(0.95);
}

/* Section « Contactez-nous » : gris très clair */
:root body #wrapper .elementor .elementor-section-stretched.elementor-top-section:has(.elementor-widget-google_maps) {
  background-color: var(--gr-brume);
}

/* Cartes « appel à l'action » (catégories de l'accueil) :
   sans cadre, image sur plateau, texte aligné à gauche */
:root body#index .elementor .bloc-category-homepage .elementor-widget-wrap {
  box-shadow: none; /* le thème pose une ombre noire à 50 % */
}

:root body #wrapper .elementor .elementor-widget-call-to-action .elementor-cta {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root body #wrapper .elementor .elementor-widget-call-to-action .elementor-cta-bg-wrapper {
  background: var(--gr-brume);
}

:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-cta-content {
  padding: var(--gr-e5) 0 var(--gr-e6);
  background: transparent;
  text-align: left;
  align-items: flex-start;
}

:root body #wrapper .elementor .elementor-widget-call-to-action .elementor-cta-title {
  margin-bottom: var(--gr-e4);
  font-family: var(--gr-titre);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--gr-encre);
}

/* Numérotation des cartes : grand chiffre gris et court filet d'encre (LOFT) */
body#index .bloc-category-homepage {
  counter-increment: gr-bloc;
}

body#index .bloc-category-homepage .elementor-cta-title::before {
  content: counter(gr-bloc, decimal-leading-zero);
  display: table;
  margin-bottom: var(--gr-e4);
  padding-bottom: var(--gr-e3);
  border-bottom: 1px solid var(--gr-encre);
  font-family: var(--gr-titre);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--gr-gris-clair);
}

/* « Consulter » devient « Consulter → » (style du lien éditorial en 04) */
:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
}

:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-cta:hover .elementor-button {
  background: transparent;
  color: var(--gr-encre);
}

/* Carte « cover » (photo pleine + titre). Le bandeau pétrole fait partie
   de l'image : il faudra le retirer du fichier image dans CE. */
:root body #wrapper .elementor .elementor-cta--skin-cover .elementor-cta-title {
  color: var(--gr-blanc);
  font-size: 32px;
  font-weight: 300;
}

/* Bouton « info » de CE (bleu ciel par défaut) : noir comme les autres */
:root body #wrapper .elementor .elementor-widget-button.elementor-button-info .elementor-button {
  background-color: var(--gr-encre);
  border-color: var(--gr-encre);
  color: var(--gr-blanc);
}


/* ==========================================================================
   12. FENÊTRES MODALES
   ========================================================================== */

/* Fenêtre de bienvenue Particulier / Professionnel */
#welcomeModal {
  background-color: rgba(26, 26, 26, 0.5);
}

#welcomeModal .modal-content {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--gr-e8) var(--gr-e7) var(--gr-e7);
}

#welcomeModal .modal-header {
  border-bottom: 0;
  padding-bottom: 0;
}

#welcomeModal .modal-header h5 {
  font-family: var(--gr-titre);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--gr-encre);
}

#welcomeModal .modal-body .col:not(:last-child) {
  border-right-color: var(--gr-filet);
}

#welcomeModal .close-btn {
  color: var(--gr-gris);
  font-weight: 300;
}

#welcomeModal .close-btn:hover {
  color: var(--gr-encre);
}

:root body #welcomeModal .btn {
  padding: 1.35em 2.4em;
  border-radius: 0;
  font-size: 11px;
}

:root body #welcomeModal .btn-pro {
  background-color: var(--gr-encre);
  border: 1px solid var(--gr-encre);
  color: var(--gr-blanc);
}

:root body #welcomeModal .btn-pro:hover {
  background-color: #000000;
}

:root body #welcomeModal .btn-particulier {
  background-color: transparent;
  border: 1px solid var(--gr-encre);
  color: var(--gr-encre);
}

:root body #welcomeModal .btn-particulier:hover {
  background-color: var(--gr-encre);
  color: var(--gr-blanc);
}

#welcomeModal .logo-modal:hover {
  transform: none;
}

/* Fenêtre « Saisie rapide » */
#header #modal-header-saisie-rapide {
  background-color: var(--gr-encre);
}

#modalSaisieRapide .modal-content {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Aperçu rapide (quickview) : même langage que la fiche. Les règles de la
   zone d'achat (07c) s'y appliquent aussi via le préfixe :is(…, body .quickview). */
#quickview-modal .modal-content,
.quickview .modal-content {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--gr-e5);
  background-color: var(--gr-blanc);
}

body .quickview .modal-header {
  border-bottom: 0;
}

body .quickview .modal-body h1.h1,
body .quickview .modal-body h1 {
  margin: 0 0 var(--gr-e3);
  font-family: var(--gr-titre);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  color: var(--gr-encre);
}

body .quickview .modal-body .product-reference,
body .quickview .modal-body .product-reference .label {
  font-family: var(--gr-texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body .quickview .modal-body .product-reference span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gr-encre);
}

/* Visuels : plateau, pas d'ombre, vignette active en encre (et non en bleu) */
body .quickview .images-container .product-cover,
body .quickview .images-container .product-cover img,
body .quickview .js-qv-product-images .thumb {
  box-shadow: none;
  border-radius: 0;
}

body .quickview .images-container .product-cover {
  background: var(--gr-brume);
}

body .quickview .js-qv-product-images .thumb {
  border: 1px solid transparent;
  opacity: 0.6;
}

body .quickview .js-qv-product-images .thumb.selected,
body .quickview .js-qv-product-images .thumb:hover {
  border-color: var(--gr-encre);
  opacity: 1;
}

/* Pied de fenêtre : plus de filet ; le formulaire vzqac y reste lisible */
body .quickview .modal-footer {
  border-top: 0;
  padding-top: 0;
}

body .quickview .modal-footer .vzqac .vzqac-qty {
  height: 44px;
  border: 1px solid var(--gr-filet-fort);
  border-radius: 0;
}

body .quickview .modal-footer .vzqac .vzqac-add {
  border-radius: 0;
  background: var(--gr-encre);
  border-color: var(--gr-encre);
}

body .quickview .close {
  font-weight: 300;
  color: var(--gr-encre);
  opacity: 0.7;
}


/* ==========================================================================
   13. MOBILE (≤ 767 px)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --gr-section: 80px;
  }

  #wrapper h1:not(.product-reference) {
    font-size: 36px;
  }

  /* En-tête */
  #header .header-nav {
    padding: var(--gr-e3) 0;
  }

  #header .header-nav #menu-icon .material-icons,
  #header .header-nav #_mobile_cart .material-icons,
  #header .header-nav #_mobile_user_info .material-icons {
    color: var(--gr-encre);
  }

  #header #search_widget form input[type="text"] {
    font-size: 16px; /* évite le zoom automatique d'iOS */
  }

  /* Rangée mobile : menu | logo centré | compte | panier, en flex.
     Les flottants du thème faisaient passer « Mon compte » sur le logo. */
  #header .header-nav .hidden-md-up.mobile {
    display: flex;
    align-items: center;
    gap: var(--gr-e2);
    min-height: 56px;
  }

  #header .header-nav #menu-icon {
    order: 1;
    flex: 0 0 44px;
    margin: 0;
    float: none;
  }

  #header .header-nav #_mobile_logo {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  #header .header-nav #_mobile_logo h1 {
    margin: 0;
  }

  #header .header-nav #_mobile_logo img {
    width: auto;
    max-width: 100%;
    max-height: 40px;
  }

  #header .header-nav #_mobile_user_info,
  #header .header-nav #_mobile_cart {
    float: none;
    flex: 0 0 auto;
  }

  #header .header-nav #_mobile_user_info {
    order: 3;
  }

  #header .header-nav #_mobile_cart {
    order: 4;
  }

  #header .header-nav #_mobile_user_info .user-info a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Libellé « Mon compte » masqué à l'écran mais lu par les lecteurs d'écran */
  #header .header-nav #_mobile_user_info .user-info a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #header .header-nav #_mobile_user_info .user-info .material-icons {
    margin: 0;
    font-size: 22px;
  }

  /* Menu mobile */
  #mobile_top_menu_wrapper {
    background: var(--gr-blanc);
    border-top: var(--gr-filet-fin);
  }

  #mobile_top_menu_wrapper .top-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    border-bottom: var(--gr-filet-fin);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gr-encre);
  }

  /* Listes : 2 colonnes, en-tête plus compact, collections en pastilles
     défilantes au lieu d'une longue colonne */
  :is(#js-product-list-header, #product-list-header) .block-category {
    padding-top: var(--gr-e6);
  }

  #wrapper :is(#js-product-list-header, #product-list-header) .block-category h1 {
    font-size: 40px;
  }

  :is(#js-product-list-header, #product-list-header) .block-category-inner #category-description p {
    font-size: 16px;
  }

  body #products .products {
    padding-left: 15px;
    padding-right: 15px;
  }

  body :is(#products, .featured-products) .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gr-e6) var(--gr-e4);
  }

  body#category #left-column .block-categories .category-sub-menu {
    display: flex;
    gap: var(--gr-e2);
    overflow-x: auto;
    padding-bottom: var(--gr-e2);
    scrollbar-width: none;
  }

  body#category #left-column .block-categories .category-sub-menu li a {
    padding: 8px 14px;
    border: 1px solid var(--gr-filet-fort);
    white-space: nowrap;
    font-size: 11px;
  }

  body#category #left-column .block-categories {
    margin-bottom: var(--gr-e5);
  }

  /* Fiche produit */
  body#product .row.product-container {
    padding-top: var(--gr-e4);
    padding-bottom: var(--gr-e6);
  }

  body#product #wrapper h1.h1[itemprop="name"] {
    margin-top: var(--gr-e6);
    font-size: 36px;
  }

  body#product #div-description-and-price-product > .tabs {
    padding-right: 15px;
  }

  body#product .bloc-hors-connexion {
    margin-top: var(--gr-e4);
    padding-top: var(--gr-e5);
  }

  /* Mobile : la référence sous le titre est suivie de près par le filet d'achat */
  body#product .first-bloc-product-container > .product-reference.h1 {
    margin-bottom: var(--gr-e4);
  }

  body#product .bloc-hors-connexion .hors-connexion a {
    width: 100%;
  }

  body#product .featured-products {
    margin-top: 0;
    padding-top: var(--gr-e6);
  }

  :root body#product #wrapper .featured-products > h2 {
    font-size: 32px;
  }

  /* Sections CE */
  :root body #wrapper .elementor .elementor-widget-heading h2.elementor-heading-title {
    font-size: 34px;
  }

  :root body #wrapper .elementor .elementor-widget-call-to-action .elementor-cta-title {
    font-size: 26px;
  }

  :root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button {
    width: 100%;
  }

  /* Pied de page */
  :root body #footer .elementor .elementor-section-stretched .elementor-widget-heading .elementor-heading-title {
    font-size: 22px;
  }

  /* Fenêtre de bienvenue */
  #welcomeModal .modal-content {
    width: calc(100% - 32px);
    padding: var(--gr-e7) var(--gr-e5) var(--gr-e6);
  }

  #welcomeModal .modal-header h5 {
    font-size: 30px;
  }

  #welcomeModal .modal-body .col:not(:last-child) {
    border-bottom-color: var(--gr-filet);
  }
}


/* ==========================================================================
   14. ANIMATIONS
   - On n'anime que transform (dont translate et scale) et opacity :
     compositeur seul, 60 im/s, aucun décalage de mise en page.
   - Exception assumée : les couleurs des liens et des boutons ont une
     transition de 300 ms (peinture seule, sans mise en page). Pour un mode
     strict, supprimer le bloc 14a.
   - Courbe var(--gr-courbe) = cubic-bezier(.22,1,.36,1), sans rebond ; 300 à 700 ms.
   - TOUT est sous « prefers-reduced-motion: no-preference ».
   - Panier et tunnel (#cart, #checkout, #order-confirmation) : transitions
     de survol seulement, ni fondu d'entrée ni révélation.
   ========================================================================== */

/* États de départ (sans mouvement, valables aussi en mouvement réduit) :
   soulignés qui se dessineront au survol */
:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button::before,
#wrapper .breadcrumb li a::after,
#footer .footer-container a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gr-encre);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

#footer .footer-container a::after {
  background: var(--gr-blanc);
}

#wrapper .breadcrumb li a,
#footer .footer-container a {
  position: relative;
  display: inline-block;
}

:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-cta:hover .elementor-button::before,
#wrapper .breadcrumb li a:hover::after,
#footer .footer-container a:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {

  /* 14a. Couleurs des liens et boutons (exception documentée) */
  a,
  :root body .btn,
  :root body :is(#wrapper, #footer) .elementor .elementor-button,
  #header #search_widget form input[type="text"],
  #header button#btn-saisie-rapide,
  .vzqac .vzqac-btn {
    transition: color var(--gr-d-court) var(--gr-courbe), background-color var(--gr-d-court) var(--gr-courbe), border-color var(--gr-d-court) var(--gr-courbe);
  }

  /* 14b. Boutons pleins : élévation d'un pixel */
  :root body .btn-primary,
  :root body .btn-secondary,
  :root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button,
  :root body :is(#wrapper, #footer) .elementor .elementor-widget-email-subscription .elementor-button,
  body#product .bloc-hors-connexion .hors-connexion a {
    transition: color var(--gr-d-court) var(--gr-courbe), background-color var(--gr-d-court) var(--gr-courbe), border-color var(--gr-d-court) var(--gr-courbe), translate var(--gr-d-court) var(--gr-courbe);
  }

  :root body .btn-primary:hover,
  :root body .btn-secondary:hover,
  :root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button:hover,
  :root body :is(#wrapper, #footer) .elementor .elementor-widget-email-subscription .elementor-button:hover,
  body#product .bloc-hors-connexion .hors-connexion a:hover {
    translate: 0 -1px;
  }

  /* 14c. Soulignés qui se dessinent (menu, « Consulter → », fil d'Ariane, pied) */
  #header .header-top a[data-depth="0"]::after,
  :root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button::before,
  #wrapper .breadcrumb li a::after,
  #footer .footer-container a::after,
  :root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button::after {
    transition: transform var(--gr-d-moyen) var(--gr-courbe);
  }

  :root body #wrapper .elementor .elementor-cta--skin-classic .elementor-cta:hover .elementor-button::after {
    transform: translateX(4px);
  }

  /* 14d. Cartes : élévation de 3 px (sans ombre) et zoom lent de la photo */
  #products .product-miniature .thumbnail-container,
  .featured-products .product-miniature .thumbnail-container,
  .product-accessories .product-miniature .thumbnail-container,
  :root body :is(#wrapper, #footer) .elementor .elementor-product-miniature {
    transition: translate var(--gr-d-moyen) var(--gr-courbe);
  }

  #products .product-miniature .thumbnail-container:hover,
  .featured-products .product-miniature .thumbnail-container:hover,
  .product-accessories .product-miniature .thumbnail-container:hover,
  :root body :is(#wrapper, #footer) .elementor .elementor-product-miniature:hover {
    translate: 0 -3px;
  }

  .product-miniature .thumbnail-container .product-thumbnail img,
  :root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-image img,
  body#product .images-container .product-cover img {
    transition: scale var(--gr-d-long) var(--gr-courbe);
  }

  .product-miniature .thumbnail-container:hover .product-thumbnail img,
  :root body :is(#wrapper, #footer) .elementor .elementor-product-miniature:hover .elementor-image img,
  body#product .images-container .product-cover:hover img {
    scale: 1.04;
  }

  /* 14e. Menus : apparition des sous-menus (Classic les montre par
     opacity/visibility ; on ajoute un glissement de 6 px) */
  #header .header-top .top-menu .sub-menu {
    translate: 0 6px;
    transition: opacity var(--gr-d-court) var(--gr-courbe), visibility var(--gr-d-court) var(--gr-courbe), translate var(--gr-d-court) var(--gr-courbe);
  }

  #_desktop_top_menu .top-menu[data-depth="0"] li:hover .sub-menu {
    translate: 0 0;
  }

  /* Volets de 2e niveau et menu mobile (affichés par display) */
  #header .header-top .top-menu[data-depth="1"] > li.category > div,
  #mobile_top_menu_wrapper {
    animation: gr-apparition var(--gr-d-court) var(--gr-courbe) both;
  }

  /* 14f. Fondu d'entrée de page : opacity seule sur le contenu (un transform
     sur #wrapper casserait les éléments position: fixed qu'il contient) */
  body:not(#cart):not(#checkout):not(#order-confirmation) #wrapper {
    animation: gr-fondu var(--gr-d-long) var(--gr-courbe) both;
  }

  /* 14g. Révélations au défilement : amélioration progressive.
     Chrome et Edge (animation-timeline: view()) : CSS pur. Ailleurs, rien
     n'est caché ; girard-motion.js (facultatif) prend le relais.
     Le pied de page est exclu : un transform sur ses colonnes faussait, par
     intermittence dans Firefox, l'étirement pleine largeur de sa section CE. */
  @supports (animation-timeline: view()) {
    body:not(#cart):not(#checkout):not(#order-confirmation) #content-wrapper .elementor-top-section .elementor-widget:not(.elementor-invisible):not(.animated),
    body:not(#cart):not(#checkout):not(#order-confirmation) #products .js-product-miniature,
    body#product .featured-products .js-product-miniature,
    body#product .featured-products > h2 {
      animation: gr-revele linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

  /* Même effet piloté par girard-motion.js (classes posées par le script) */
  html.gr-motion .gr-r {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--gr-d-long) var(--gr-courbe), transform var(--gr-d-long) var(--gr-courbe);
  }

  html.gr-motion .gr-r.gr-vu {
    opacity: 1;
    transform: none;
  }
}

@keyframes gr-apparition {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes gr-fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gr-revele {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* Impression : tout est visible */
@media print {
  html.gr-motion .gr-r {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   15. MOUVEMENTS RÉDUITS
   Rien à annuler pour nos règles : toutes les transitions et animations de
   la zone 14 sont sous « prefers-reduced-motion: no-preference ». Les états
   de survol restent, sans mouvement. girard-motion.js s'arrête aussi.
   On neutralise seulement l'animation d'ouverture apportée par le site.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #welcomeModal .modal-content {
    animation: none;
  }
}


/* ==========================================================================
   16. BLOCS AJOUTÉS PAR girard-enhance.js (facultatif)
   - Les blocs remplacés ne sont masqués que sous les classes html.gr-m-*,
     posées dans le <head> par le script et retirées si un module échoue :
     sans le script, ou en cas d'erreur, la page d'origine reste intacte.
   - Jamais sur le panier ni le tunnel (le script n'y tourne pas non plus).
   - Les textes masqués restent dans le DOM (pas de perte SEO).
   ========================================================================== */

/* 16a. Masquages (accueil) : bannières images datées, carrousel remplacé par
   la grille, ancienne numérotation des titres */
html.gr-m-hero body#index #content-wrapper .elementor-widget-image-slider,
html.gr-m-hero body#index #content-wrapper .elementor-widget-html:has(.carousel),
html.gr-m-hero body#index #content-wrapper .elementor-widget-image:has(img[src*="/img/cms/5.png"]),
html.gr-m-grille body#index #content-wrapper .elementor-widget-product-carousel {
  display: none;
}

html.gr-js body#index #content-wrapper .elementor-top-section .elementor-widget-heading .elementor-heading-title::before {
  content: none;
}

/* Pied de page : l'ancienne réassurance (deux grosses icônes) cède la place
   à la bande fine ; ses informations sont reprises dans la bande et la signature */
html.gr-m-pied body:not(#cart):not(#checkout):not(#order-confirmation) #footer .elementor-section-wrap > .elementor-top-section:first-child {
  display: none;
}

/* Noms de produits : le script les remet en casse correcte, on retire donc
   la mise en minuscules du CSS (zones 05 et 07) */
html.gr-m-noms body#product #wrapper h1.h1[itemprop="name"],
html.gr-m-noms body .product-miniature h2.product-title,
html.gr-m-noms body .product-miniature .product-title a,
html.gr-m-noms body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-title {
  text-transform: none;
}

/* 16b. Éléments communs */
.gr-bloc {
  margin: 0 auto;
}

/* Le thème impose sa police aux paragraphes : on la reprend sur nos blocs */
.gr-bloc p,
.gr-bloc span,
.gr-bloc li,
.gr-reassurance,
.gr-signature p {
  font-family: var(--gr-texte);
}

.gr-bloc .gr-numero,
.gr-bloc .gr-carte__nom,
.gr-bloc .gr-chiffres__valeur {
  font-family: var(--gr-titre);
}

.gr-surtitre {
  margin: 0 0 var(--gr-e4);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

.gr-lien {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gr-filet-fort);
  font-family: var(--gr-texte);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gr-encre);
}

.gr-lien:hover,
.gr-lien:focus {
  color: var(--gr-encre);
  border-bottom-color: var(--gr-encre);
}

.gr-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.35em 2.4em;
  background: var(--gr-encre);
  color: var(--gr-blanc);
  font-family: var(--gr-texte);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--gr-espace-bouton);
  text-transform: uppercase;
}

.gr-bouton:hover,
.gr-bouton:focus {
  background: #000000;
  color: var(--gr-blanc);
}

.gr-numero {
  display: block;
  font-family: var(--gr-titre);
  font-size: 15px;
  font-weight: 400;
  color: var(--gr-gris);
  font-variant-numeric: lining-nums;
}

.gr-numero--grand {
  display: table;
  margin-bottom: var(--gr-e4);
  padding-bottom: var(--gr-e3);
  border-bottom: 1px solid var(--gr-encre);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: var(--gr-gris-clair);
}

#wrapper h2.gr-titre-section {
  margin: 0;
  font-size: 44px;
}

/* 16c. Hero éditorial */
.gr-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--gr-e8);
  padding: var(--gr-e6) 15px var(--gr-e8);
}

.gr-hero__texte {
  max-width: 460px;
}

#wrapper h2.gr-hero__titre {
  margin: 0 0 var(--gr-e5);
  font-size: 58px;
  font-weight: 300;
  line-height: 1.04;
}

.gr-hero__phrase {
  margin: 0 0 var(--gr-e6);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gr-corps);
}

.gr-hero__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gr-e5) var(--gr-e6);
  margin: 0;
}

.gr-hero__image {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gr-brume);
}

.gr-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gr-hero__image figcaption {
  position: absolute;
  left: var(--gr-e5);
  bottom: var(--gr-e5);
  padding: var(--gr-e2) var(--gr-e3);
  background: rgba(255, 255, 255, 0.92);
}

.gr-hero__image figcaption .gr-lien {
  border-bottom: 0;
  padding: 0;
  font-size: 12px;
}

/* 16d. Bandeau de chiffres */
.gr-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 15px;
  padding: var(--gr-e7) 0;
  list-style: none;
  border-top: var(--gr-filet-fin);
  border-bottom: var(--gr-filet-fin);
}

.gr-chiffres li {
  padding: 0 var(--gr-e5);
  text-align: center;
}

.gr-chiffres li + li {
  border-left: var(--gr-filet-fin);
}

.gr-chiffres__valeur {
  display: block;
  margin-bottom: var(--gr-e2);
  font-family: var(--gr-titre);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

.gr-chiffres__valeur sup {
  font-size: 0.45em;
  top: -0.9em;
}

.gr-chiffres__libelle {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

/* 16e. Grille produits éditoriale (accueil) */
.gr-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gr-e7) var(--gr-e6);
  max-width: 1110px;               /* même largeur que le hero et les collections */
  margin: var(--gr-e6) auto var(--gr-e8);
  padding: 0 15px;
  text-align: left;
}

.gr-carte {
  display: block;
  color: var(--gr-encre);
}

.gr-carte__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gr-brume);
  margin-bottom: var(--gr-e4);
}

.gr-carte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gr-carte .gr-numero {
  margin-bottom: var(--gr-e1);
}

.gr-carte__nom {
  display: block;
  margin-bottom: var(--gr-e3);
  font-family: var(--gr-titre);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gr-encre);
}

.gr-carte:hover .gr-lien {
  border-bottom-color: var(--gr-encre);
}

/* 16f. Collections 01-02-03, image et texte en alternance */
.gr-collections {
  padding: var(--gr-section) 15px calc(var(--gr-section) / 2);
}

.gr-collections__tete {
  margin-bottom: var(--gr-e8);
}

.gr-collection {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--gr-e8);
  padding: var(--gr-e7) 0;
  border-top: var(--gr-filet-fin);
}

.gr-collection:nth-of-type(even) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.gr-collection:nth-of-type(even) .gr-collection__image {
  order: 2;
}

.gr-collection__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gr-brume);
}

.gr-collection__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#wrapper .gr-collection__nom {
  margin: 0 0 var(--gr-e2);
  font-family: var(--gr-titre);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--gr-encre);
}

.gr-collection__phrase {
  margin: 0 0 var(--gr-e5);
  max-width: 40ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gr-corps);
}

/* 16g. Pied de page : bande de réassurance et signature */
.gr-reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gr-e2) var(--gr-e7);
  margin: 0;
  padding: var(--gr-e5) 15px;
  list-style: none;
  border-top: var(--gr-filet-fin);
  background: var(--gr-blanc);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gr-corps);
}

.gr-signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gr-e7);
  padding: var(--gr-e8) max(15px, calc((100% - 1110px) / 2));
  background: var(--gr-encre);
  color: #d9d7d2;
  border-top: 1px solid #2c2b29;
}

.gr-signature .gr-signature__nom {
  margin: 0 0 var(--gr-e2);
  font-family: var(--gr-titre);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gr-blanc);
}

.gr-signature .gr-surtitre {
  color: var(--gr-gris);
}

.gr-signature__contact p {
  margin: 0 0 var(--gr-e3);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

.gr-signature__horaires {
  color: var(--gr-gris);
}

.gr-signature a {
  color: var(--gr-blanc);
  border-bottom-color: #5a5955;
}

.gr-signature a:hover,
.gr-signature a:focus {
  color: var(--gr-blanc);
  border-bottom-color: var(--gr-blanc);
}

.gr-signature__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gr-e3) var(--gr-e5);
  margin-top: var(--gr-e5);
}

.gr-signature .gr-lien {
  font-size: 12px;
}

/* 16h. Fiche produit : surtitre de collection et tableau de caractéristiques */
body#product .gr-surtitre--produit {
  margin-bottom: var(--gr-e3);
}

body#product .gr-fiche {
  width: 100%;
  margin-top: var(--gr-e2);
  border-collapse: collapse;
  font-size: 15px;
}

body#product .gr-fiche th,
body#product .gr-fiche td {
  padding: var(--gr-e3) 0;
  border-bottom: var(--gr-filet-fin);
  text-align: left;
  vertical-align: baseline;
}

body#product .gr-fiche tr:first-child th,
body#product .gr-fiche tr:first-child td {
  border-top: 1px solid var(--gr-encre);
}

body#product .gr-fiche th {
  width: 40%;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body#product .gr-fiche td {
  font-weight: 400;
  color: var(--gr-encre);
  font-variant-numeric: lining-nums;
}

/* « Dans la même gamme » façon LOFT : numéro au-dessus du nom */
html.gr-js body#product .featured-products .products {
  counter-reset: gr-piece;
}

html.gr-js body#product .featured-products .product-miniature {
  counter-increment: gr-piece;
}

html.gr-js body#product .featured-products .product-miniature h2.product-title::before {
  content: counter(gr-piece, decimal-leading-zero);
  display: block;
  margin-bottom: var(--gr-e1);
  font-family: var(--gr-titre);
  font-size: 15px;
  color: var(--gr-gris);
}

/* 16k. Autocomplétion de la recherche (module « autocompletion » du script).
   jQuery UI affiche/masque le panneau par display en style inline : on ne
   touche pas au display du ul ; la grille est faite de li en inline-block.
   Seule la largeur, posée en inline à la largeur du champ, est forcée. */
body ul.ui-autocomplete.gr-ac {
  width: min(900px, calc(100vw - 32px)) !important; /* contre la largeur inline de jQuery UI */
  max-height: 72vh;
  overflow-y: auto;
  padding: var(--gr-e5) var(--gr-e4) var(--gr-e4);
  background: var(--gr-blanc);
  border: var(--gr-filet-fin);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.08);
  font-family: var(--gr-texte);
  font-size: 0; /* supprime l'espace entre les li en inline-block */
}

body ul.ui-autocomplete.gr-ac li.gr-ac-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gr-e2) var(--gr-e4);
  margin: 0 var(--gr-e2) var(--gr-e4);
  padding: 0 0 var(--gr-e3);
  border-bottom: var(--gr-filet-fin);
  font-size: 13px;
  list-style: none;
}

body ul.ui-autocomplete.gr-ac li.gr-ac-tete .gr-ac-total {
  font-family: var(--gr-texte);
  font-size: 14px;
  font-weight: 500;
  color: var(--gr-encre);
}

body ul.ui-autocomplete.gr-ac li.elt-list-search-product {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: top;
  list-style: none;
}

body ul.ui-autocomplete.gr-ac li.elt-list-search-product > a {
  display: block;
  margin: 0;
  padding: var(--gr-e2);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--gr-encre);
  font-size: 13px;
  white-space: normal;
}

/* Navigation clavier et survol : visibles mais sobres */
body ul.ui-autocomplete.gr-ac li.elt-list-search-product > a:hover,
body ul.ui-autocomplete.gr-ac li.elt-list-search-product > a.ui-state-active,
body ul.ui-autocomplete.gr-ac li.elt-list-search-product > a.ui-state-focus {
  margin: 0;
  border-color: var(--gr-encre);
  background: var(--gr-brume);
  color: var(--gr-encre);
}

body ul.ui-autocomplete.gr-ac .gr-ac-image {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--gr-e3);
  overflow: hidden;
  background: var(--gr-brume);
}

body ul.ui-autocomplete.gr-ac .gr-ac-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body ul.ui-autocomplete.gr-ac .gr-ac-categorie {
  display: block;
  margin-bottom: var(--gr-e1);
  font-size: 10px;
  letter-spacing: var(--gr-espace-surtitre);
  text-transform: uppercase;
  color: var(--gr-gris-texte);
}

body ul.ui-autocomplete.gr-ac .gr-ac-separateur,
body ul.ui-autocomplete.gr-ac :is(.gr-ac-categorie, .gr-ac-ref).gr-ac-sans {
  display: none; /* « > », catégorie « Accueil » et référence vide restent dans le DOM */
}

body ul.ui-autocomplete.gr-ac .gr-ac-nom {
  display: block;
  font-family: var(--gr-titre);
  font-size: 18px;
  line-height: 1.2;
  color: var(--gr-encre);
}

body ul.ui-autocomplete.gr-ac .gr-ac-ref {
  display: block;
  margin-top: var(--gr-e1);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gr-gris-texte);
  font-variant-numeric: lining-nums tabular-nums;
}

body ul.ui-autocomplete.gr-ac .gr-ac-prix {
  display: block;
  margin-top: var(--gr-e1);
  font-family: var(--gr-titre);
  font-size: 17px;
  font-weight: 500;
}

/* État « aucun résultat » (sous le champ) */
/* La barre logo/recherche passe au-dessus de la ligne de menu, pour que le
   message « aucun résultat » ne glisse pas sous les entrées du menu */
#header .header-nav {
  position: relative;
  z-index: 20;
}

#search_widget .gr-ac-vide {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--gr-e4) var(--gr-e5);
  background: var(--gr-blanc);
  border: var(--gr-filet-fin);
  text-align: left;
}

#search_widget .gr-ac-vide[hidden] {
  display: none;
}

#search_widget .gr-ac-vide p {
  margin: 0;
  font-family: var(--gr-texte);
  font-size: 14px;
  color: var(--gr-encre);
}

#search_widget .gr-ac-vide .gr-ac-conseil {
  margin-top: var(--gr-e1);
  font-size: 13px;
  color: var(--gr-gris-texte);
}

@media (max-width: 767px) {
  body ul.ui-autocomplete.gr-ac li.elt-list-search-product {
    width: 50%;
  }
}

/* Apparition douce du panneau de résultats. Le message « aucun résultat » n'est
   pas animé : son calque animé restait figé à mi-opacité lors des tests. */
@media (prefers-reduced-motion: no-preference) {
  body ul.ui-autocomplete.gr-ac {
    animation: gr-apparition var(--gr-d-court) var(--gr-courbe) both;
  }
}

/* 16l. Recherche sous 992 px (module « recherche » du script) : loupe dans
   l'en-tête (rangée mobile sous 768 px, barre du haut de 768 à 991 px) et
   panneau sous l'en-tête où le vrai formulaire ps_searchbar est déplacé. Le
   thème masque « #header #search_widget » sous 992 px : on le rend visible
   dans le panneau seulement. */
#header .gr-loupe {
  display: none;
}

#gr-recherche {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gr-e2);
  padding: var(--gr-e3) 15px;
  background: var(--gr-fond, #fff);
  border-top: 1px solid var(--gr-filet);
  border-bottom: 1px solid var(--gr-filet);
}

#gr-recherche[hidden] {
  display: none;
}

#header #gr-recherche #search_widget {
  display: block;
  flex: 1 1 auto;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

#header #gr-recherche #search_widget form input[type="text"] {
  width: 100%;
  min-width: 0;
  font-size: 16px; /* évite le zoom automatique d'iOS */
}

#header #gr-recherche .gr-recherche__fermer,
#header .gr-loupe {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gr-encre);
  cursor: pointer;
}

#header #gr-recherche .gr-recherche__fermer {
  display: inline-flex;
  flex: none;
}

#header #gr-recherche #search_widget form button[type="submit"] i.material-icons.search {
  color: var(--gr-encre);
  font-size: 22px;
}

#header :is(.gr-loupe, .gr-recherche__fermer) .material-icons {
  font-size: 24px;
  line-height: 1;
}

#header :is(.gr-loupe, .gr-recherche__fermer):focus-visible {
  outline: 1px solid var(--gr-encre);
  outline-offset: -4px;
}

@media (max-width: 991.98px) {
  #header .gr-loupe {
    display: inline-flex;
    order: 3; /* rangée mobile : avant « Mon compte » (ordre 3 aussi) et le panier */
    flex: none;
  }
}

@media (min-width: 992px) {
  #gr-recherche {
    display: none; /* le script le ferme aussi au passage en grand écran */
  }
}

/* Liste de suggestions sous 992 px (QA M6 : elle dépassait de 16 px en 375 px).
   jQuery UI pose en ligne « left » et « width » = largeur du champ, et la largeur
   s'ajoutait aux marges internes et à la bordure. On la cale sur la largeur du
   panneau (gouttière de 15 px de chaque côté), pour le balisage standard de
   ps_searchbar comme pour la variante de production (.gr-ac). */
@media (max-width: 991.98px) {
  body ul.ui-autocomplete,
  body ul.ui-autocomplete.gr-ac {
    box-sizing: border-box;
    left: 15px !important; /* contre la position en ligne de jQuery UI */
    right: 15px;
    width: auto !important; /* contre la largeur en ligne de jQuery UI */
    max-width: calc(100vw - 2 * 15px);
  }
}

/* De 992 à 1 199 px, la liste de 900 px partait du bord gauche du champ et
   dépassait à droite (62 px en 1 024 px) : on l'aligne sur la gouttière droite. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body ul.ui-autocomplete.gr-ac {
    box-sizing: border-box;
    left: auto !important; /* contre la position en ligne de jQuery UI */
    right: 15px;
    width: min(900px, calc(100vw - 2 * 15px)) !important; /* contre la largeur en ligne */
  }
}

/* 16i. Mobile */
@media (max-width: 991px) {
  .gr-hero,
  .gr-collection {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gr-e6);
  }

  .gr-hero__image {
    order: -1;
  }

  .gr-collection:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .gr-collection:nth-of-type(even) .gr-collection__image {
    order: 0;
  }

  .gr-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gr-e6) var(--gr-e4);
  }

  .gr-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--gr-e6);
  }

  .gr-chiffres li:nth-child(odd) {
    border-left: 0;
  }

  .gr-signature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gr-e5);
  }
}

@media (max-width: 767px) {
  .gr-hero {
    padding-top: var(--gr-e3);
  }

  #wrapper h2.gr-hero__titre {
    font-size: 40px;
  }

  #wrapper h2.gr-titre-section {
    font-size: 32px;
  }

  #wrapper .gr-collection__nom {
    font-size: 32px;
  }

  .gr-numero--grand {
    font-size: 52px;
  }

  .gr-chiffres__valeur {
    font-size: 28px;
  }

  .gr-carte__nom {
    font-size: 19px;
  }

  .gr-reassurance {
    gap: var(--gr-e2) var(--gr-e5);
    font-size: 10px;
  }
}

/* 16j. Mouvement des nouveaux blocs (même règles que la zone 14) */
@media (prefers-reduced-motion: no-preference) {
  .gr-carte__image img,
  .gr-collection__image img,
  .gr-hero__image img {
    transition: scale var(--gr-d-long) var(--gr-courbe);
  }

  .gr-carte:hover .gr-carte__image img,
  .gr-collection__image:hover img {
    scale: 1.04;
  }

  .gr-carte,
  .gr-lien,
  .gr-bouton {
    transition: color var(--gr-d-court) var(--gr-courbe), background-color var(--gr-d-court) var(--gr-courbe), border-color var(--gr-d-court) var(--gr-courbe), translate var(--gr-d-moyen) var(--gr-courbe);
  }

  .gr-carte:hover {
    translate: 0 -3px;
  }

  .gr-hero {
    animation: gr-fondu var(--gr-d-long) var(--gr-courbe) both;
  }

  @supports (animation-timeline: view()) {
    .gr-chiffres li,
    .gr-carte,
    .gr-collection,
    .gr-collections__tete {
      animation: gr-revele linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}


/* ==========================================================================
   17. CHALEUR (retour de Léo, 28/10 : « plus de contraste, plus de chaleur,
   trop blanc partout »). Direction LOFT conservée, palette réchauffée :
   fond écru, bandes crème et brun profond en alternance, encre chaude,
   accent terre cuite, filets laiton, cartes sur plateau avec bordure et
   ombre douce. Toute la zone est autonome : la supprimer rend la version
   blanche précédente (zones 00 à 16 inchangées).
   Contrastes vérifiés (AA) : encre 13,6:1, texte 10,7:1, gris chaud
   6,3:1 et terre cuite 5,5:1 sur écru ; crème 13:1 et laiton clair 8,2:1
   sur brun. Le laiton moyen ne sert qu'aux filets (décor).
   ========================================================================== */
:root {
  /* Neutres réchauffés (remplacent ceux de la zone 01) */
  --gr-encre: #2a2420;          /* encre chaude : titres, boutons */
  --gr-corps: #3d352e;          /* texte courant */
  --gr-gris: #8a7d70;
  --gr-gris-texte: #625649;     /* petits textes, surtitres */
  --gr-gris-clair: #b5a898;     /* numéros décoratifs */
  --gr-filet: #e3d8c8;
  --gr-filet-fort: #cbbca7;
  --gr-brume: #ece4d7;          /* plateau des photos, sable */
  --gr-brume-fonce: #e3d8c8;

  /* Nouvelles surfaces */
  --gr-fond: #f6f1e9;           /* fond de page, écru */
  --gr-creme: #efe7db;          /* bandes claires en alternance, lin */
  --gr-carte: #fbf8f3;          /* cartes et panneaux */
  --gr-sombre: #2b231d;         /* bandes sombres : hero, chiffres, pied */
  --gr-sombre-2: #362d26;
  --gr-sur-sombre: #f3ece1;     /* texte sur brun */
  --gr-sur-sombre-2: #d8cdbd;
  --gr-filet-sombre: rgba(243, 236, 225, 0.16);

  /* Accents chauds */
  --gr-accent: #9a4a28;         /* terre cuite : liens, prix, survols */
  --gr-accent-fonce: #7f3c20;
  --gr-laiton: #b8955a;         /* filets (décor uniquement) */
  --gr-laiton-clair: #d4b98a;   /* texte sur fond sombre */

  /* Ombres douces, teintées brun */
  --gr-ombre-douce: 0 1px 2px rgba(43, 35, 29, 0.05), 0 10px 30px rgba(43, 35, 29, 0.07);
  --gr-ombre-survol: 0 2px 4px rgba(43, 35, 29, 0.06), 0 18px 44px rgba(43, 35, 29, 0.13);
}

/* 17a. Fond de page écru, en-tête assorti */
/* Le thème blanchit #wrapper page par page (body#index section#wrapper,
   body#category #wrapper, body#product #wrapper) : on reprend chaque cas */
body,
#wrapper,
#header,
:root body:not(#gr-aucun) section#wrapper { /* :not(#…) donne (2,1,2) > « body#index section#wrapper » (2,0,2) */
  background-color: var(--gr-fond);
}

:root body #header #topbannierehome.elementor-element {
  background-color: var(--gr-creme);
}

#header .header-top .popover.sub-menu,
#header .header-top .top-menu .sub-menu {
  background: var(--gr-carte);
  box-shadow: var(--gr-ombre-douce);
}

#header #search_widget form input[type="text"] {
  background: var(--gr-carte);
}

/* Sections Creative Elements : certaines ont un fond blanc réglé dans CE,
   qui couperait le fond écru. Les bandes voulues (contact) sont reprises en 17f. */
:root body #content-wrapper .elementor .elementor-top-section {
  background-color: transparent;
}

/* 17b. Liens, filets et survols en accent chaud */
a:hover,
a:focus {
  color: var(--gr-accent);
}

.gr-lien,
:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button,
:root body .product-miniature .product-title a::after,
:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature .elementor-title::after {
  border-bottom-color: var(--gr-laiton);
}

.gr-lien:hover,
.gr-lien:focus,
.gr-carte:hover .gr-lien {
  color: var(--gr-accent);
  border-bottom-color: var(--gr-accent);
}

:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-button::before,
#wrapper .breadcrumb li a::after,
#header .header-top a[data-depth="0"]::after {
  background: var(--gr-accent);
}

.gr-numero--grand,
body#index .bloc-category-homepage .elementor-cta-title::before {
  border-bottom-color: var(--gr-laiton);
  color: var(--gr-laiton);
}

:root body #wrapper .elementor .elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--gr-laiton);
}

/* 17c. Boutons : encre chaude, survol terre cuite */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.gr-bouton:hover,
.gr-bouton:focus,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-button .elementor-button:hover,
:root body :is(#wrapper, #footer) .elementor .elementor-widget-email-subscription .elementor-button:hover,
body#product .bloc-hors-connexion .hors-connexion a:hover,
:root body #welcomeModal .btn-pro:hover {
  background-color: var(--gr-accent);
  border-color: var(--gr-accent);
  color: var(--gr-blanc);
}

:is(body#product #wrapper, body .quickview) #add-to-cart-or-refresh .add .btn.btn-primary.add-to-cart:hover,
:is(body#product #wrapper, body .quickview) #add-to-cart-or-refresh .add .btn.btn-primary.add-to-cart:focus,
:is(body#product #wrapper, body .quickview) .product-actions .add-to-cart:hover {
  background: var(--gr-accent) !important; /* contre un !important du thème */
  background-color: var(--gr-accent) !important; /* idem */
}

:root body:not(#gr-aucun) .product-miniature [data-button-action="add-to-cart"]:hover {
  background: var(--gr-accent);
  border-color: var(--gr-accent);
}

/* 17d. Prix en terre cuite */
.product-miniature .price,
body :is(#products, .featured-products, .product-accessories) .product-miniature .product-price-and-shipping .price,
:root body:not(#gr-aucun) .product-miniature .product-price-and-shipping > :not(.product-reference, .vzqac, form, div, .regular-price, .discount-product, #product-availability),
body#product .product-prices .current-price,
body#product .product-prices .current-price span,
:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .product-price-net,
:is(body#product #wrapper, body .quickview) .product-prices .bloc-prix-net .product-price-net span,
body ul.ui-autocomplete.gr-ac .gr-ac-prix {
  color: var(--gr-accent);
}

/* 17e. Cartes sur plateau chaud, bordure visible, ombre douce */
#products .product-miniature .thumbnail-container,
.featured-products .product-miniature .thumbnail-container,
.product-accessories .product-miniature .thumbnail-container,
.gr-carte,
:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature,
:root body #wrapper .elementor .elementor-widget-call-to-action > .elementor-widget-container {
  padding: var(--gr-e3) var(--gr-e3) var(--gr-e4);
  background: var(--gr-carte);
  border: 1px solid var(--gr-filet);
  box-shadow: var(--gr-ombre-douce);
}

.product-miniature .product-description,
body :is(#products, .featured-products) .product-miniature .product-description,
body :is(#products, .featured-products) .product-miniature #product-description-not-logged {
  background: var(--gr-carte); /* garde l'« Aperçu rapide » caché au repos */
}

@media (prefers-reduced-motion: no-preference) {
  #products .product-miniature .thumbnail-container,
  .featured-products .product-miniature .thumbnail-container,
  .gr-carte,
  :root body :is(#wrapper, #footer) .elementor .elementor-product-miniature,
  :root body #wrapper .elementor .elementor-widget-call-to-action > .elementor-widget-container {
    transition: translate var(--gr-d-moyen) var(--gr-courbe), box-shadow var(--gr-d-moyen) var(--gr-courbe);
  }
}

#products .product-miniature .thumbnail-container:hover,
.featured-products .product-miniature .thumbnail-container:hover,
.gr-carte:hover,
:root body :is(#wrapper, #footer) .elementor .elementor-product-miniature:hover,
:root body #wrapper .elementor .elementor-widget-call-to-action > .elementor-widget-container:hover {
  box-shadow: var(--gr-ombre-survol);
  border-color: var(--gr-filet-fort);
}

:root body #wrapper .elementor .elementor-cta--skin-classic .elementor-cta-content {
  padding-left: var(--gr-e2);
  padding-right: var(--gr-e2);
}

/* 17f. Alternance de bandes. Les blocs du script restent dans la largeur
   du conteneur ; leur fond déborde en pleine largeur grâce à une ombre
   portée de 100vmax découpée par clip-path (aucun défilement horizontal). */
.gr-hero,
.gr-chiffres {
  background: var(--gr-sombre);
  box-shadow: 0 0 0 100vmax var(--gr-sombre);
  clip-path: inset(0 -100vmax);
}

.gr-hero {
  padding-top: var(--gr-e8);
  padding-bottom: var(--gr-e8);
}

#wrapper .gr-hero h2.gr-hero__titre {
  color: var(--gr-sur-sombre); /* (1,2,1) : passe devant « #wrapper h2:not(…) » de la zone 02 */
}

.gr-hero .gr-surtitre,
.gr-chiffres .gr-chiffres__libelle {
  color: var(--gr-laiton-clair);
}

.gr-hero .gr-hero__phrase {
  color: var(--gr-sur-sombre-2);
}

.gr-hero .gr-bouton {
  background: var(--gr-sur-sombre);
  color: var(--gr-sombre);
}

.gr-hero .gr-bouton:hover,
.gr-hero .gr-bouton:focus {
  background: var(--gr-laiton-clair);
  color: var(--gr-sombre);
}

.gr-hero .gr-hero__liens .gr-lien {
  color: var(--gr-sur-sombre);
  border-bottom-color: var(--gr-laiton);
}

.gr-hero .gr-hero__liens .gr-lien:hover {
  color: var(--gr-laiton-clair);
  border-bottom-color: var(--gr-laiton-clair);
}

.gr-hero__image {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.gr-chiffres {
  margin-top: 0;
  border-top: 1px solid var(--gr-filet-sombre);
  border-bottom: 0;
}

.gr-chiffres li + li {
  border-left-color: var(--gr-filet-sombre);
}

.gr-chiffres .gr-chiffres__valeur {
  color: var(--gr-sur-sombre);
}

/* Bandes claires : collections, contact, en-tête des catégories */
.gr-collections,
:root body #wrapper .elementor .elementor-section-stretched.elementor-top-section:has(.elementor-widget-google_maps),
:is(#js-product-list-header, #product-list-header) .block-category {
  background: var(--gr-creme);
  box-shadow: 0 0 0 100vmax var(--gr-creme);
  clip-path: inset(0 -100vmax);
}

body#category :is(#js-product-list-header, #product-list-header) .block-category.card.card-block {
  background-color: var(--gr-creme);
  box-shadow: 0 0 0 100vmax var(--gr-creme);
  clip-path: inset(0 -100vmax);
  padding-bottom: var(--gr-e7) !important; /* contre un !important du thème */
}

.gr-collection {
  border-top-color: var(--gr-filet-fort);
}

.gr-collection__image {
  box-shadow: var(--gr-ombre-douce);
}

/* 17g. Réassurance et pied de page : brun profond */
.gr-reassurance {
  background: var(--gr-sombre);
  border-top: 0;
  border-bottom: 1px solid var(--gr-filet-sombre);
  color: var(--gr-sur-sombre-2);
}

:root body #footer .elementor .elementor-section-stretched.elementor-top-section,
.gr-signature,
#footer .footer-container {
  background-color: var(--gr-sombre);
  background: var(--gr-sombre);
}

.gr-signature {
  border-top: 1px solid var(--gr-filet-sombre);
}

.gr-signature .gr-signature__nom {
  color: var(--gr-sur-sombre);
}

.gr-signature .gr-surtitre,
.gr-signature__horaires {
  color: var(--gr-laiton-clair);
}

.gr-signature__contact p {
  color: var(--gr-sur-sombre-2);
}

.gr-signature a {
  color: var(--gr-sur-sombre);
  border-bottom-color: var(--gr-laiton);
}

.gr-signature a:hover,
.gr-signature a:focus {
  color: var(--gr-laiton-clair);
  border-bottom-color: var(--gr-laiton-clair);
}

#footer .footer-container {
  border-top-color: var(--gr-filet-sombre);
}

#footer .footer-container,
#footer .footer-container p,
#footer .footer-container a {
  color: var(--gr-sur-sombre-2);
}

/* Sans le script : l'ancienne réassurance CE sur fond crème */
:root body #footer .elementor .elementor-section-wrap > .elementor-top-section:first-child {
  background-color: var(--gr-creme);
}

/* Newsletter sur brun : bouton crème, survol laiton */
:root body #footer .elementor .elementor-widget-email-subscription button[type="submit"].elementor-button {
  background-color: var(--gr-sur-sombre);
  border-color: var(--gr-sur-sombre);
  color: var(--gr-sombre);
}

:root body #footer .elementor .elementor-widget-email-subscription button[type="submit"].elementor-button:hover {
  background-color: var(--gr-laiton-clair);
  border-color: var(--gr-laiton-clair);
  color: var(--gr-sombre);
}

/* 17h. Panneaux et fenêtres : surface carte */
body ul.ui-autocomplete.gr-ac,
#search_widget .gr-ac-vide,
#welcomeModal .modal-content,
#quickview-modal .modal-content,
.quickview .modal-content,
body#cart #wrapper .card,
body#checkout #wrapper .card,
body#order-confirmation #wrapper .card {
  background-color: var(--gr-carte);
}

body#cart #wrapper .card,
body#checkout #wrapper .card {
  border: 1px solid var(--gr-filet);
  box-shadow: var(--gr-ombre-douce);
}

body#cart #wrapper .cart-summary,
body#checkout #wrapper .cart-summary,
body#checkout #wrapper #js-checkout-summary {
  background: var(--gr-creme);
}

body#checkout #wrapper section.checkout-step {
  background: var(--gr-carte);
}

/* Fiche : la colonne description est un panneau blanc dans Classic (.tabs) */
body#product #wrapper .tabs {
  background: transparent;
  box-shadow: none;
}

/* En-tête : la barre logo et la ligne de menu suivent le fond écru (mobile compris) */
#header .header-nav,
#header .header-top,
#header .header-nav .hidden-md-up.mobile {
  background-color: var(--gr-fond);
}