/* =====================================================================
   GR SHOP : thème enfant de Hummingbird, d'après la maquette (maquette-gr-shop, README § 2 « Charte graphique »)
   Polices : Saira Condensed 600/700/800 (titres, menu, boutons, prix), Barlow 400-700 (texte)
   Formes  : pas de rond ; boutons, pastilles, tuiles = 6 px ; cartes = 10 px
   Rouge   : actions d'achat et mises en avant ; boutons secondaires noirs ou blancs
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&display=swap");

:root {
  /* --- Charte --- */
  --gr-rouge: #D90A16;          /* accent, CTA d'achat */
  --gr-rouge-texte: #B3000C;    /* prix promo, liens d'accent sur fond clair */
  --gr-rouge-clair: #FF3B47;    /* accent sur fond noir */
  --gr-rouge-clair-2: #FF4D58;
  --gr-noir: #0B0B0C;           /* header, bandeaux */
  --gr-noir-menu: #111113;      /* menu */
  --gr-noir-texte: #141416;     /* texte, boutons secondaires */
  --gr-noir-champ: #17171A;     /* champ de recherche */
  --gr-trait-noir: #222226;     /* séparateurs sur fond noir */
  --gr-bord-noir: #2A2A2E;
  --gr-bord-noir-2: #3A3A40;
  --gr-fond: #F2F2F3;           /* fond de page */
  --gr-carte: #FFFFFF;
  --gr-bord: #E2E2E5;
  --gr-bord-2: #D4D4D8;
  --gr-trait: #EEEEF0;
  --gr-photo: #F6F6F7;          /* fond des photos produit */
  --gr-texte-2: #4B4B52;
  --gr-texte-3: #6B6B72;
  --gr-texte-4: #8A8A92;
  --gr-gris-clair: #C9CDD2;     /* texte secondaire sur fond noir */
  --gr-gris-moyen: #9A9AA2;
  --gr-vert: #1F7A3A;           /* succès, stock, compatibilité */
  --gr-vert-fonce: #145C2B;
  --gr-vert-fond: #E8F5EC;
  --gr-vert-bord: #9ED3AE;
  --gr-titre: "Saira Condensed", "Arial Narrow", sans-serif;
  --gr-corps: "Barlow", system-ui, sans-serif;
  --gr-rayon: 6px;
  --gr-rayon-carte: 10px;
  --gr-largeur: 1360px;
  --gr-hachure: repeating-linear-gradient(135deg, #1A1A1E 0 14px, #1F1F24 14px 28px);

  /* anciens noms (fiche produit, compatibilité) */
  --gr-accent: var(--gr-rouge);
  --gr-accent-hover: var(--gr-rouge-texte);
  --gr-accent-clair: var(--gr-rouge-clair-2);
  --gr-noir-2: var(--gr-noir-menu);
  --gr-texte: var(--gr-noir-texte);

  /* --- Bootstrap / Hummingbird --- */
  --bs-primary: var(--gr-rouge);
  --bs-primary-rgb: 217, 10, 22;
  --bs-link-color: var(--gr-noir-texte);
  --bs-link-color-rgb: 20, 20, 22;
  --bs-link-hover-color: var(--gr-rouge);
  --bs-link-hover-color-rgb: 217, 10, 22;
  --bs-body-font-family: var(--gr-corps);
  --bs-body-color: var(--gr-noir-texte);
  --bs-body-bg: var(--gr-fond);
  --bs-border-radius: var(--gr-rayon);
}

body { font-family: var(--gr-corps); color: var(--gr-noir-texte); background: var(--gr-fond); }
h1, h2, h3, .h1, .h2, .h3, .page-title, .section-title {
  font-family: var(--gr-titre); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
}
:focus-visible { outline: 2px solid var(--gr-rouge); outline-offset: 2px; }

.gr-container { max-width: var(--gr-largeur); margin: 0 auto; padding: 0 24px; }
.gr-hachure { background: var(--gr-hachure); }

/* ---------- Boutons ---------- */
.btn { border-radius: var(--gr-rayon); }
.btn-primary {
  --bs-btn-bg: var(--gr-rouge); --bs-btn-border-color: var(--gr-rouge);
  --bs-btn-hover-bg: var(--gr-rouge-texte); --bs-btn-hover-border-color: var(--gr-rouge-texte);
  --bs-btn-active-bg: var(--gr-rouge-texte); --bs-btn-active-border-color: var(--gr-rouge-texte);
  --bs-btn-disabled-bg: var(--gr-rouge); --bs-btn-disabled-border-color: var(--gr-rouge);
}
.btn-outline-primary {
  --bs-btn-color: var(--gr-noir-texte); --bs-btn-border-color: var(--gr-noir-texte);
  --bs-btn-hover-bg: var(--gr-noir-texte); --bs-btn-hover-border-color: var(--gr-noir-texte); --bs-btn-hover-color: #fff;
}
.gr-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: var(--gr-rayon); border: 2px solid transparent; font-family: var(--gr-titre); font-weight: 700;
  font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.gr-btn--accent { background: var(--gr-rouge); color: #fff; border-color: var(--gr-rouge); }
.gr-btn--accent:hover { background: var(--gr-rouge-texte); border-color: var(--gr-rouge-texte); color: #fff; }
.gr-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* =====================================================================
   EN-TÊTE
   ===================================================================== */
#header.header { background: var(--gr-noir); border: 0; box-shadow: none; }

/* Barre d'info rouge (ps_customtext) */
.gr-bandeau { background: var(--gr-rouge); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.gr-bandeau__inner { display: flex; justify-content: center; align-items: center; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.gr-bandeau__texte, .gr-bandeau__texte p { margin: 0; }
.gr-bandeau a { color: #fff; text-decoration: underline; }

/* Barre noire */
.gr-header { background: var(--gr-noir); color: #fff; }
.gr-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 14px; padding-bottom: 14px; }
.gr-header__logo a { display: flex; align-items: center; }
.gr-header__logo img { height: 64px; width: auto; display: block; }
.gr-header__search { flex: 1 1 360px; min-width: 0; display: flex; }
.gr-header__actions { display: flex; align-items: center; gap: 4px; }

/* Recherche (ps_searchbar) : champ noir + bouton rouge */
.gr-search { flex: 1 1 auto; width: 100%; margin: 0 !important; }
.gr-search .ps-searchbar { position: relative; width: 100%; }
.gr-search__form { display: flex; width: 100%; position: relative; }
.gr-header .gr-search__input, #_mobile_ps_searchbar .gr-search__input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 2px solid var(--gr-bord-noir); border-right: 0;
  border-radius: var(--gr-rayon) 0 0 var(--gr-rayon); background: var(--gr-noir-champ); color: #fff; font-family: inherit; font-size: 16px;
}
.gr-search__input::placeholder { color: var(--gr-gris-moyen); }
.gr-header .gr-search__input:focus { border-color: var(--gr-rouge); box-shadow: none; background: var(--gr-noir-champ); color: #fff; }
.gr-search__submit {
  flex: 0 0 56px; height: 48px; border: 0; border-radius: 0 var(--gr-rayon) var(--gr-rayon) 0;
  background: var(--gr-rouge); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gr-search__submit:hover { background: var(--gr-rouge-texte); }
.gr-search .ps-searchbar__clear { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); color: var(--gr-gris-moyen); }
.gr-search .ps-searchbar__dropdown { color: var(--gr-noir-texte); }

/* Mon garage (grcompat) */
.gr-garage {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 2px solid var(--gr-bord-noir-2);
  border-radius: var(--gr-rayon); color: #fff; text-decoration: none; max-width: 260px;
}
.gr-garage:hover { border-color: var(--gr-rouge); color: #fff; }
.gr-garage svg { flex: 0 0 auto; }
.gr-garage__texte { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.gr-garage__sur { font-size: 12px; color: var(--gr-gris-clair); }
.gr-garage__nom { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compte, favoris, panier : icône + libellé dessous */
.gr-header__lien {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 56px; min-height: 44px; padding: 6px 10px; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.gr-header__lien:hover, .gr-header__lien:focus { color: var(--gr-rouge-clair); }
.gr-header .header-block { padding: 0; margin: 0; }
.gr-panier__nb {
  position: absolute; top: 0; right: 8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--gr-rouge); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.gr-header .dropdown-menu { font-size: 15px; }

/* Menu des catégories (ps_mainmenu) */
.gr-menu { background: var(--gr-noir-menu); border-top: 1px solid var(--gr-trait-noir); }
.gr-menu__inner { display: flex; align-items: center; min-height: 52px; }
.gr-menu .ps-mainmenu--desktop, .gr-menu .ps-mainmenu { flex: 1 1 auto; padding: 0; width: 100%; }
.gr-menu .ps-mainmenu__desktop { flex: 1 1 auto; width: 100%; } /* pleine largeur : « Bons plans » calé à droite */
.gr-menu .ps-mainmenu__tree { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0; padding: 0; list-style: none; width: 100%; }
.gr-menu .ps-mainmenu__tree-link {
  display: block; padding: 14px; border-bottom: 3px solid transparent; color: #fff;
  font-family: var(--gr-titre); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item:not(:last-child):hover > .ps-mainmenu__tree-item-wrapper,
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item.is-open > .ps-mainmenu__tree-item-wrapper,
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item.current:not(:last-child) > .ps-mainmenu__tree-item-wrapper { box-shadow: inset 0 -3px var(--gr-rouge); }
.gr-menu .ps-mainmenu__tree-dropdown-toggle { color: #fff; }
/* « Bons plans » : dernier lien du menu, bouton rouge à droite */
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item:last-child { margin-left: auto; }
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item:last-child .ps-mainmenu__tree-link {
  padding: 8px 16px; border: 0; border-radius: 4px; background: var(--gr-rouge); color: #fff;
}
.gr-menu .ps-mainmenu__tree > .ps-mainmenu__tree-item:last-child .ps-mainmenu__tree-link:hover { background: var(--gr-rouge-texte); }
.gr-menu .menu-toggle, .gr-menu .menu-toggle .material-icons { color: #fff; }
.gr-menu .submenu { color: var(--gr-noir-texte); }

/* Méga-menus (ps_mainmenu + blocs ps_linklist) : panneau blanc pleine largeur sous le menu */
.gr-menu { position: relative; }
.gr-menu .ps-mainmenu__tree-item { position: static; }
.gr-menu .ps-mainmenu__tree-item-wrapper { display: flex; align-items: center; }
.gr-mega-item > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link { padding-right: 4px; }
.gr-mega__toggle {
  display: flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px; padding: 0 8px 0 2px;
  border: 0; background: transparent; color: #fff; font-size: 14px; cursor: pointer;
}
.gr-mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1050;
  background: #fff; color: var(--gr-noir-texte); box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  font-family: var(--gr-corps); text-transform: none; letter-spacing: normal; font-weight: 400;
}
.gr-mega-item:hover > .gr-mega, .gr-mega-item.is-open > .gr-mega, .gr-mega-item:focus-within > .gr-mega { display: block; }
/* élément ouvert : onglet blanc, souligné rouge */
.gr-mega-item:hover > .ps-mainmenu__tree-item-wrapper, .gr-mega-item.is-open > .ps-mainmenu__tree-item-wrapper { background: #fff; }
.gr-mega-item:hover > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link,
.gr-mega-item.is-open > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link,
.gr-mega-item:hover .gr-mega__toggle, .gr-mega-item.is-open .gr-mega__toggle { color: var(--gr-noir-texte); }
.gr-mega-item:hover .gr-mega__toggle span, .gr-mega-item.is-open .gr-mega__toggle span { display: inline-block; transform: rotate(180deg); }

.gr-mega__inner { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
.gr-mega__colonnes { flex: 3 1 760px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.gr-mega__col { display: flex; flex-direction: column; gap: 10px; }
.gr-mega__titre {
  padding-bottom: 8px; border-bottom: 3px solid var(--gr-rouge);
  font-family: var(--gr-titre); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.1;
}
.gr-mega__col a { color: #2A2A2E; font-size: 15px; text-decoration: none; }
.gr-mega__col a:hover { color: var(--gr-rouge-texte); text-decoration: underline; }
.gr-mega__col a.gr-mega__tout { color: var(--gr-rouge-texte); font-weight: 700; }
.gr-mega__cote { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gr-mega__machine { padding: 18px; border-radius: var(--gr-rayon-carte); background: var(--gr-fond); display: flex; flex-direction: column; gap: 10px; }
.gr-mega__machine-titre { font-weight: 700; font-size: 16px; }
.gr-mega__machine-texte { font-size: 14px; color: var(--gr-texte-2); }
.gr-mega__machine-btn {
  align-self: flex-start; padding: 12px 18px; border-radius: var(--gr-rayon); background: var(--gr-noir-texte); color: #fff;
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.gr-mega__machine-btn:hover { background: #000; color: #fff; }
.gr-mega__offre {
  flex: 1 1 auto; min-height: 200px; border-radius: var(--gr-rayon-carte); background: var(--gr-rouge); color: #fff; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-decoration: none;
}
.gr-mega__offre:hover { background: var(--gr-rouge-texte); color: #fff; }
.gr-mega__offre-sur { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.gr-mega__offre-titre { font-family: var(--gr-titre); font-weight: 800; font-size: 34px; line-height: 0.95; text-transform: uppercase; font-style: italic; }
.gr-mega__offre-cta { font-weight: 700; font-size: 15px; }
.gr-mega__marques { border-top: 1px solid var(--gr-bord); }
.gr-mega__marques-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; }
.gr-mega__marques-titre { font-weight: 700; }
.gr-mega__marques a { color: #2A2A2E; font-weight: 600; text-decoration: none; }
.gr-mega__marques a:hover { color: var(--gr-rouge-texte); }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.gr-home, .page-content--home.gr-home { display: block; width: 100%; padding: 0; margin: 0; }
.gr-section { padding-top: 48px; }
.gr-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; margin-bottom: 24px; }
.gr-section__title { margin: 0 0 24px; font-size: 44px; line-height: 1; }
.gr-section__head .gr-section__title { margin: 0; }
.gr-section__title--sm { font-size: 36px; margin-bottom: 20px; }
.gr-section__lien { color: var(--gr-noir-texte); font-weight: 700; text-decoration: underline; }
.gr-section__lien:hover { color: var(--gr-rouge-texte); }
.gr-barre { display: block; width: 44px; height: 5px; background: var(--gr-rouge); }

/* Recherche par véhicule : bandeau noir, liseré rouge */
.gr-vehicule { background: var(--gr-noir); border-top: 4px solid var(--gr-rouge); color: #fff; scroll-margin-top: 24px; }
.gr-vehicule__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 20px; padding-bottom: 20px; }
.gr-vehicule__titre { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 48px; }
.gr-vehicule__titre > span:first-child {
  font-family: var(--gr-titre); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; font-style: italic;
}
.gr-vehicule__onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-vehicule__onglets:empty { display: none; }
.gr-vehicule__onglet {
  height: 44px; padding: 0 14px; border-radius: 6px; border: 2px solid #3A3A40; background: transparent; color: #fff;
  font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.gr-vehicule__onglet:hover { border-color: #fff; }
.gr-vehicule__onglet[aria-checked="true"] { background: #fff; border-color: #fff; color: var(--gr-texte, #141416); font-weight: 700; }
.gr-vehicule__note { font-size: 13px; color: var(--gr-gris-clair); }
.gr-vehicule__note:empty { display: none; }
.gr-vehicule__champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--gr-gris-clair); }
.gr-vehicule__champ--marque { flex: 1 1 150px; }
.gr-vehicule__champ--cyl { flex: 1 1 130px; }
.gr-vehicule__champ--modele { flex: 1 1 180px; }
.gr-vehicule__champ--annee { flex: 1 1 120px; }
.gr-vehicule__champ select {
  height: 48px; padding: 0 12px; border: 0; border-radius: var(--gr-rayon); background: #fff; color: var(--gr-noir-texte);
  font-family: inherit; font-size: 16px;
}
.gr-vehicule__champ select:disabled { background: #D9D9DD; color: var(--gr-texte-3); }
.gr-vehicule__submit { flex: 0 0 auto; }
/* Bandeau compact (machine du garage) : même hauteur que la recherche par véhicule (114 px sur ordinateur) */
.gr-vehicule--compact .gr-vehicule__form { display: none; }
.gr-vehicule:not(.gr-vehicule--compact) .gr-vc { display: none; }
.gr-vc { display: flex; align-items: center; gap: 12px 20px; min-height: 114px; padding-top: 14px; padding-bottom: 14px; box-sizing: border-box; }
.gr-vc__ico { flex: 0 0 auto; color: var(--gr-rouge-clair, #FF3B47); }
.gr-vc__infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gr-vc__sur { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gr-rouge-clair, #FF4D58); }
.gr-vc__nom {
  font-family: var(--gr-titre); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-vc__details { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--gr-gris-clair); }
.gr-vc__details > span + span::before { content: "·"; margin-right: 14px; }
.gr-vc__actions { flex: 0 0 auto; display: flex; gap: 12px; }
.gr-vc__changer {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none;
  height: 48px; padding: 0 22px; border: 2px solid #fff; border-radius: var(--gr-rayon); background: transparent; color: #fff;
  font-family: var(--gr-titre); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.gr-vc__changer:hover { background: #fff; color: var(--gr-noir-texte); }

/* Grand bandeau (ps_imageslider) + 2 tuiles (ps_linklist) */
.gr-hero { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 24px; }
.gr-hero__grand { flex: 2 1 640px; min-width: 0; display: flex; }
.gr-hero__tuiles { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gr-slider { position: relative; width: 100%; }
.gr-slider .carousel-inner, .gr-slider .carousel-item { height: 100%; }
.gr-slide {
  position: relative; display: flex; align-items: flex-end; min-height: 440px; height: 100%; border-radius: var(--gr-rayon-carte);
  overflow: hidden; background: var(--gr-noir); color: #fff; text-decoration: none;
}
.gr-slide:hover { color: #fff; }
.gr-slide__visuel { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #16161A 0 14px, #1B1B20 14px 28px); }
.gr-slide__visuel img { position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; }
.gr-slide__noir { position: absolute; top: 0; left: 0; width: 62%; height: 100%; background: var(--gr-noir); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.gr-slide__bande { position: absolute; top: 0; left: 62%; width: 18px; height: 100%; margin-left: -60px; background: var(--gr-rouge); transform: skewX(-12deg); }
.gr-slide__texte { position: relative; padding: 40px; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.gr-slide__tag {
  align-self: flex-start; padding: 6px 12px; border-radius: 4px; background: var(--gr-rouge);
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.gr-slide__titre { font-family: var(--gr-titre); font-weight: 800; font-size: clamp(44px, 5vw, 72px); line-height: 0.92; text-transform: uppercase; font-style: italic; }
.gr-slide__titre em { color: var(--gr-rouge-clair); font-style: italic; }
.gr-slide__desc { font-size: 18px; color: var(--gr-gris-clair); }
.gr-slide__cta {
  align-self: flex-start; margin-top: 6px; padding: 14px 26px; border-radius: var(--gr-rayon); background: #fff; color: var(--gr-noir-texte);
  font-family: var(--gr-titre); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase;
}
.gr-slide:hover .gr-slide__cta { background: var(--gr-rouge); color: #fff; }
.gr-slider__points { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }
.gr-slider__points button { width: 10px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #B8B8BE; }
.gr-slider__points button.active { width: 28px; background: var(--gr-noir-texte); }

.gr-tuile {
  flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 28px;
  border-radius: var(--gr-rayon-carte); background: #fff; border: 1px solid var(--gr-bord); color: var(--gr-noir-texte); text-decoration: none;
}
.gr-tuile__sur { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gr-rouge-texte); }
.gr-tuile__titre { font-family: var(--gr-titre); font-weight: 800; font-size: 40px; line-height: 0.95; text-transform: uppercase; font-style: italic; }
.gr-tuile__cta { font-weight: 700; font-size: 15px; }
.gr-tuile:hover { border-color: var(--gr-noir-texte); color: var(--gr-noir-texte); }
.gr-tuile--rouge { background: var(--gr-rouge); border-color: var(--gr-rouge); color: #fff; }
.gr-tuile--rouge .gr-tuile__sur { color: #fff; }
.gr-tuile--rouge:hover { background: var(--gr-rouge-texte); border-color: var(--gr-rouge-texte); color: #fff; }

/* Nos univers */
.gr-univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.gr-univers__carte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gr-bord); border-radius: var(--gr-rayon-carte); overflow: hidden; }
.gr-univers__photo { position: relative; height: 200px; display: flex; align-items: flex-end; padding: 20px; color: #fff; text-decoration: none; }
.gr-univers__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-univers__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.6)); }
.gr-univers__nom {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--gr-titre); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; font-style: italic;
}
.gr-univers__photo:hover { color: #fff; outline: 3px solid var(--gr-rouge); outline-offset: -3px; }
.gr-univers__liens { list-style: none; margin: 0; padding: 12px 20px 20px; }
.gr-univers__liens li { border-bottom: 1px solid var(--gr-trait); }
.gr-univers__liens a { display: flex; justify-content: space-between; padding: 10px 0; color: var(--gr-noir-texte); font-size: 15px; font-weight: 500; text-decoration: none; }
.gr-univers__liens a span { color: var(--gr-texte-4); }
.gr-univers__liens a:hover { color: var(--gr-rouge-texte); }

/* Grilles de cartes produits (Promotions, Produits phares, Nouveautés) */
/* auto-fit : les cartes s'étirent sur toute la largeur (5 sur ordinateur) */
.gr-produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.gr-produits > * { width: auto; max-width: none; padding: 0; margin: 0; }
/* bouton favori des vignettes de l'accueil : en haut à droite de la photo, comme en page catégorie
   (la règle du module Liste d'envies ne vise que les listes « .products ») */
.gr-produits article .wishlist-button-add { position: absolute; top: 0.635rem; right: 0.635rem; z-index: 10; }

/* Nos marques : bande défilante (pause au survol, arrêtée si mouvement réduit) */
@keyframes gr-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gr-bande { background: #fff; border-radius: var(--gr-rayon-carte); overflow: hidden; }
.gr-bande__defile { display: flex; width: max-content; animation: gr-defile 40s linear infinite; will-change: transform; }
/* pause au survol de la souris et au clavier seulement : sur écran tactile, un toucher laisse le « survol » actif
   et la bande restait figée */
@media (hover: hover) and (pointer: fine) {
  .gr-bande:hover .gr-bande__defile { animation-play-state: paused; }
}
.gr-bande:has(:focus-visible) .gr-bande__defile { animation-play-state: paused; }
/* avec le script de l'accueil : bande défilable à la main (doigt, molette), défilement automatique piloté par le script */
.gr-bande--js { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gr-bande--js::-webkit-scrollbar { display: none; }
.gr-bande--js .gr-bande__defile { animation: none; will-change: auto; }
.gr-bande__item { flex: 0 0 280px; height: 180px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.gr-bande__item img { max-width: 220px; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.gr-bande__item span {
  width: 220px; height: 120px; border: 1px dashed #C4C4CA; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--gr-texte-3); font-family: var(--gr-titre); font-weight: 700; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase;
}
.gr-bande__item:hover span { border-color: var(--gr-rouge); color: var(--gr-rouge-texte); }
@media (prefers-reduced-motion: reduce) {
  .gr-bande { overflow-x: auto; }
  .gr-bande__defile { animation: none; }
}

/* Équipement pilote */
.gr-equipement { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.gr-equipement__item { display: flex; flex-direction: column; border-radius: var(--gr-rayon-carte); overflow: hidden; background: #fff; border: 1px solid var(--gr-bord); color: var(--gr-noir-texte); text-decoration: none; }
.gr-equipement__photo { height: 170px; background: var(--gr-photo); display: flex; align-items: center; justify-content: center; }
.gr-equipement__photo img { width: 100%; height: 100%; object-fit: cover; }
.gr-equipement__nom { padding: 14px 16px; font-family: var(--gr-titre); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.gr-equipement__item:hover { border-color: var(--gr-rouge); color: var(--gr-noir-texte); }

/* Conseils & tutos */
.gr-conseils { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gr-conseils__item { display: flex; flex-direction: column; border-radius: var(--gr-rayon-carte); overflow: hidden; background: #fff; border: 1px solid var(--gr-bord); color: var(--gr-noir-texte); text-decoration: none; }
.gr-conseils__photo { height: 180px; }
.gr-conseils__corps { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.gr-conseils__titre { font-weight: 700; font-size: 19px; line-height: 1.3; }
.gr-conseils__texte { font-size: 15px; color: var(--gr-texte-2); }
.gr-conseils__item:hover { border-color: var(--gr-rouge); color: var(--gr-noir-texte); }

/* Réassurance (blockreassurance) : bande blanche avant la newsletter */
.gr-rassure-bande { margin-top: 56px; background: #fff; border-top: 1px solid var(--gr-bord); border-bottom: 1px solid var(--gr-bord); }
.gr-rassure { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 32px 0; }
.gr-rassure__item { display: flex; gap: 14px; align-items: flex-start; color: var(--gr-noir-texte); text-decoration: none; }
.gr-rassure__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px; background: var(--gr-rouge); color: #fff; display: flex; align-items: center; justify-content: center; }
.gr-rassure__corps { display: flex; flex-direction: column; gap: 4px; }
.gr-rassure__titre { font-weight: 700; font-size: 17px; }
.gr-rassure__texte { font-size: 15px; color: var(--gr-texte-2); line-height: 1.4; }

/* =====================================================================
   PAGE VÉHICULE (module grcompat, maquette vehicule.html)
   ===================================================================== */
.gr-veh { width: 100%; padding: 0; margin: 0; }
.gr-veh__bandeau { position: relative; overflow: hidden; background: var(--gr-noir); color: #fff; border-top: 4px solid var(--gr-rouge); }
.gr-veh__bande { position: absolute; top: 0; right: 30%; width: 14px; height: 236px; background: var(--gr-rouge); transform: skewX(-14deg); }
.gr-veh__recap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding-top: 28px; padding-bottom: 28px; }
.gr-veh__photo { flex: 0 1 300px; height: 180px; min-width: 0; border-radius: var(--gr-rayon-carte); }
.gr-veh__infos { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-veh__ariane { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--gr-gris-moyen); }
.gr-veh__ariane a { color: var(--gr-gris-moyen); text-decoration: none; }
.gr-veh__ariane a:hover { color: #fff; }
.gr-veh__ariane [aria-current] { color: #fff; }
.gr-veh__sur { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gr-rouge-clair-2); }
.gr-veh__titre { margin: 0; color: #fff; font-size: clamp(40px, 5vw, 60px); line-height: 0.95; font-style: italic; }
.gr-veh__pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gr-veh__pastille { padding: 6px 12px; border-radius: var(--gr-rayon); background: #1F1F24; border: 1px solid #2E2E34; font-size: 14px; font-weight: 600; }
.gr-veh__fiche-btn {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--gr-rayon);
  background: #fff; color: var(--gr-noir-texte); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.gr-veh__fiche-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gr-veh__actions { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-veh__garage, .gr-veh__changer {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 12px; border-radius: var(--gr-rayon);
  font-family: var(--gr-titre); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
}
.gr-veh__garage { background: var(--gr-rouge); color: #fff; }
.gr-veh__changer { border: 2px solid #fff; color: #fff; text-decoration: none; }
.gr-veh__changer:hover { background: #fff; color: var(--gr-noir-texte); }

.gr-veh__fiche { position: relative; padding-top: 4px; padding-bottom: 32px; }
.gr-veh__fiche[hidden] { display: none; }
.gr-veh__fiche-titre { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: #fff; font-size: 30px; line-height: 1; }
.gr-barre-v { display: block; width: 5px; height: 32px; background: var(--gr-rouge); }
.gr-veh__fiche-corps { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.gr-veh__onglets { flex: 1 1 260px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-veh__onglet {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--gr-bord);
  background: #fff; text-align: left; font-family: inherit; cursor: pointer;
}
.gr-veh__onglet-icone { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--gr-rayon); background: var(--gr-fond); color: var(--gr-noir-texte); display: flex; align-items: center; justify-content: center; }
.gr-veh__onglet-texte { display: flex; flex-direction: column; gap: 2px; }
.gr-veh__onglet-nom { font-weight: 700; font-size: 16px; color: var(--gr-noir-texte); }
.gr-veh__onglet-nb { font-size: 13px; color: var(--gr-texte-3); }
.gr-veh__onglet[aria-selected="true"] { border-color: var(--gr-rouge); }
.gr-veh__onglet[aria-selected="true"] .gr-veh__onglet-icone, .gr-veh__onglet[aria-selected="true"] .gr-veh__onglet-nom { color: var(--gr-rouge-texte); }
.gr-veh__panneau { flex: 999 1 520px; min-width: 0; background: #fff; color: var(--gr-noir-texte); border-radius: var(--gr-rayon-carte); padding: 24px; }
.gr-veh__panneau[hidden] { display: none; }
.gr-veh__valeurs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0;
  border-top: 1px solid var(--gr-bord); border-left: 1px solid var(--gr-bord); border-radius: 8px; overflow: hidden;
}
.gr-veh__valeur { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; border-right: 1px solid var(--gr-bord); border-bottom: 1px solid var(--gr-bord); }
.gr-veh__valeur dt { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gr-texte-3); }
.gr-veh__valeur dd { margin: 0; font-size: 18px; font-weight: 700; }
.gr-veh__valeur--etoile dd { color: var(--gr-rouge-texte); }
.gr-veh__fiche-note { margin: 12px 0 0; font-size: 13px; color: var(--gr-gris-moyen); }

.gr-veh__corps { padding-top: 32px; padding-bottom: 64px; }
.gr-veh__section + .gr-veh__section { margin-top: 56px; }
.gr-veh__nb { font-size: 12px; font-weight: 400; color: var(--gr-texte-3); }
.gr-veh__rapides { display: flex; flex-wrap: wrap; gap: 10px; }
.gr-veh__rapide {
  flex: 1 1 118px; min-width: 0; min-height: 128px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--gr-bord-2);
  color: var(--gr-noir-texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
}
.gr-veh__rapide:hover { border-color: var(--gr-noir-texte); color: var(--gr-noir-texte); }
.gr-veh__rapide--large { flex: 1 1 210px; flex-direction: row; justify-content: flex-start; padding: 0 16px; gap: 12px; }
.gr-veh__rapide--rouge { background: var(--gr-rouge); border-color: var(--gr-rouge); color: #fff; }
.gr-veh__rapide--rouge:hover { background: var(--gr-rouge-texte); border-color: var(--gr-rouge-texte); color: #fff; }

.gr-veh__filtre { flex: 0 1 360px; min-width: 0; margin: 0; }
.gr-veh__filtre input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #B8B8BE; border-radius: var(--gr-rayon); background: #fff; font-family: inherit; font-size: 15px; }
.gr-veh__aucun { color: var(--gr-texte-2); }
.gr-veh__blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.gr-veh__bloc { background: #fff; border: 1px solid var(--gr-bord); border-top: 4px solid var(--gr-noir-texte); border-radius: 8px; overflow: hidden; }
.gr-veh__bloc[hidden] { display: none; }
.gr-veh__bloc-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--gr-bord); color: var(--gr-noir-texte); text-decoration: none; }
.gr-veh__bloc-tete:hover { color: var(--gr-rouge-texte); }
.gr-veh__bloc-nom { font-family: var(--gr-titre); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.gr-veh__liste, .gr-veh__sous { list-style: none; margin: 0; padding: 0; }
.gr-veh__ligne { border-bottom: 1px solid var(--gr-trait); background: #F7F7F8; }
.gr-veh__ligne--plus { display: none; }
.is-ouvert .gr-veh__ligne--plus, .is-filtre .gr-veh__ligne--plus { display: block; }
.gr-veh__ligne.is-masque, .gr-veh__sous li.is-masque { display: none; }
.gr-veh__ligne-tete { display: flex; align-items: center; }
.gr-veh__ligne-tete a, .gr-veh__sous a { flex: 1 1 auto; padding: 12px 18px; color: #2A2A2E; font-size: 15px; text-decoration: none; }
.gr-veh__ligne-tete a:hover, .gr-veh__sous a:hover { color: var(--gr-rouge-texte); }
.gr-veh__sous { background: #fff; }
.gr-veh__sous a { display: block; padding-left: 34px; font-size: 14px; }
.gr-veh__deplier { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--gr-noir-texte); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gr-veh__deplier[aria-expanded="true"] svg path { d: path("M5 12h14"); }
.gr-veh__plus { width: 100%; padding: 14px 18px; border: 0; background: #fff; color: var(--gr-noir-texte); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.gr-veh__plus:hover { color: var(--gr-rouge-texte); }
.is-filtre .gr-veh__plus { display: none; }
/* éléments propres au mobile (accordéon des catégories, libellés courts, barre Filtrer, « Afficher plus », bas du panneau de filtres) */
.gr-veh__bloc-bouton, .gr-veh__bloc-tout, .gr-mobile-seul, .gr-filtrer, .gr-plus, .gr-filtres__fermer, .gr-filtres__bas,
.gr-onglets__acc, .gr-barre-achat { display: none; }

/* =====================================================================
   CARTES PRODUITS (miniatures Hummingbird)
   ===================================================================== */
.product-miniature__inner { background: #fff; border: 1px solid var(--gr-bord); border-radius: var(--gr-rayon-carte); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
/* photo sur fond blanc, comme le reste de la carte (les photos Bihr sont détourées sur blanc) */
.product-miniature__top, .product-miniature__image-container, .product-miniature__image-link { position: relative; background: #fff; }
.product-miniature__top { position: relative; }
.product-miniature__bottom { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.gr-mini__marque { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gr-texte-3); }
.product-miniature__title { color: var(--gr-noir-texte); font-weight: 600; font-size: 17px; line-height: 1.3; text-decoration: none; }
.product-miniature__title:hover { color: var(--gr-rouge-texte); }
.gr-mini__stock { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gr-vert); }
.gr-dot { width: 8px; height: 8px; border-radius: 50%; background: #1F9D4A; }
.product-miniature__price, .product-miniature .price { font-family: var(--gr-titre); font-weight: 800; font-size: 28px; line-height: 1; color: var(--gr-noir-texte); }
.product-miniature .regular-price, .product-miniature__regular-price { font-family: var(--gr-corps); font-size: 14px; font-weight: 400; color: var(--gr-texte-3); text-decoration: line-through; }
.product-miniature .regular-price ~ .price, .product-miniature__prices--discount .product-miniature__price { color: var(--gr-rouge-texte); }
/* bouton panier rouge (achat) */
.product-miniature__add, .product-miniature .add-to-cart {
  --bs-btn-bg: var(--gr-rouge); --bs-btn-border-color: var(--gr-rouge); --bs-btn-hover-bg: var(--gr-rouge-texte); --bs-btn-hover-border-color: var(--gr-rouge-texte);
  background: var(--gr-rouge); border-color: var(--gr-rouge); color: #fff; border-radius: var(--gr-rayon);
}
/* badges : promo rouge, nouveau noir */
.product-flags .badge, .product-flag { border-radius: 4px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.product-flag.discount, .product-flag.on-sale, .badge.discount, .badge.on-sale { background: var(--gr-rouge); font-family: var(--gr-titre); font-size: 18px; font-weight: 800; }
.product-flag.new, .badge.new { background: var(--gr-noir-texte); font-size: 12px; }
/* pas de notes / avis sur le site (maquette) */
.product-miniature .star-content, .product-miniature .product-list-reviews, .product-miniature .comments-note { display: none !important; }

/* =====================================================================
   FICHE PRODUIT
   ===================================================================== */
.gr-produit__surtitre { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gr-texte-3); margin-bottom: 8px; }
.gr-produit__surtitre a { color: var(--gr-texte-3); text-decoration: none; }
.gr-produit__surtitre a:hover { color: var(--gr-rouge); }
.gr-produit__titre { font-family: var(--gr-titre); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1; text-transform: uppercase; margin-bottom: 16px; }
.product__price { font-family: var(--gr-titre); font-weight: 800; font-size: 52px; line-height: 1; color: var(--gr-noir-texte); }
.product__tax-label { color: var(--gr-texte-3); font-size: 15px; }

/* Déclinaisons en boutons */
.product-variant__legend { font-weight: 700; font-size: 15px; }
.product-variant__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.product-variant__radio.form-check { padding: 0; margin: 0; position: relative; }
.product-variant__radio .form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.product-variant__radio label {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--gr-rayon); border: 2px solid var(--gr-bord-2);
  background: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
}
.product-variant__radio .form-check-input:checked + label { border-color: var(--gr-noir-texte); background: var(--gr-noir-texte); color: #fff; }
.product-variant__radio .form-check-input:focus-visible + label { outline: 2px solid var(--gr-rouge); outline-offset: 2px; }

.product__add-to-cart-button {
  min-height: 56px; font-family: var(--gr-titre); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase;
}
.gr-produit__resume { margin: -6px 0 16px; font-size: 15px; color: var(--gr-texte-2); }
.gr-produit__resume p { margin: 0; }

/* Bandeau compatibilité de la fiche (grcompat) : vert / alerte / neutre */
.gr-compat-bandeau--produit { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 20px; }
.gr-compat-bandeau--produit > svg { flex: 0 0 auto; color: var(--gr-vert); }
.gr-compat-bandeau__corps { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #2E5A3B; }
.gr-compat-bandeau__corps strong { font-size: 16px; color: var(--gr-vert-fonce); }
.gr-compat-bandeau--alerte { background: #FFF6E5; border-color: #F0C36D; }
.gr-compat-bandeau--alerte > svg, .gr-compat-bandeau--alerte .gr-compat-bandeau__corps strong { color: #8A5300; }
.gr-compat-bandeau--alerte .gr-compat-bandeau__corps, .gr-compat-bandeau--alerte a { color: #6B4A10; }
.gr-compat-bandeau--produit.gr-compat-bandeau--neutre > svg, .gr-compat-bandeau--neutre .gr-compat-bandeau__corps strong { color: var(--gr-noir-texte); }
.gr-compat-bandeau--neutre .gr-compat-bandeau__corps { color: var(--gr-texte-2); }

/* Prix : promo en rouge, ancien prix barré, pourcentage en pastille rouge */
.product__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.product__discount-price .product__price, .product__prices .product__price.has-discount, .has-discount .product__price { color: var(--gr-rouge-texte); }
.product__regular-price, .product__prices .regular-price { font-size: 18px; color: var(--gr-texte-3); text-decoration: line-through; }
.product__discount-percentage, .product__prices .discount {
  padding: 4px 10px; border-radius: 4px; background: var(--gr-rouge); color: #fff; font-family: var(--gr-titre); font-weight: 800; font-size: 18px;
}

/* Couleurs en pastilles carrées */
.product-variant__color label, .product-variant .color, .input-color + .color { border-radius: var(--gr-rayon) !important; }

/* Quantité des vignettes produit (−, nombre, +) : trois cases arrondies, séparées */
.product-miniature .quantity-button__group { gap: 4px; flex-wrap: nowrap; }
.product-miniature .quantity-button__group > .form-control { border-radius: 6px !important; margin: 0 !important; }

/* Quantité + ajout au panier (rouge) + favori */
.product__add-to-cart .input-group, .product-quantity .input-group { border: 2px solid var(--gr-bord-2); border-radius: var(--gr-rayon); background: #fff; overflow: hidden; }
.product__add-to-cart-button { border-radius: var(--gr-rayon); }
.product-actions .wishlist-button-add, .product__add-to-cart .wishlist-button-add {
  width: 56px; height: 56px; border: 2px solid var(--gr-bord-2); border-radius: var(--gr-rayon); background: #fff; box-shadow: none;
}

/* Encadré stock + réassurance (module Réassurance en liste compacte) */
.gr-produit__rassure {
  margin: 16px 0 0; padding: 18px; border-radius: 8px; background: #fff; border: 1px solid var(--gr-bord);
  display: flex; flex-direction: column; gap: 10px; font-size: 15px;
}
.gr-produit__stock { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gr-vert); }
.gr-produit__stock--non { color: var(--gr-texte-2); }
.gr-produit__rassure .gr-rassure { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.gr-produit__rassure .gr-rassure__item { gap: 10px; align-items: center; }
.gr-produit__rassure .gr-rassure__icon { width: 24px; height: 24px; border-radius: 4px; background: transparent; color: var(--gr-vert); }
.gr-produit__rassure .gr-rassure__icon svg { width: 18px; height: 18px; }
.gr-produit__rassure .gr-rassure__corps { flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
.gr-produit__rassure .gr-rassure__titre { font-size: 15px; font-weight: 600; }
.gr-produit__rassure .gr-rassure__texte { font-size: 14px; }

/* Sections de produits sous la fiche (dans le conteneur de la page) */
.gr-section--produit { padding-left: 0; padding-right: 0; padding-top: 56px; }
.gr-section--produit .gr-section__title { font-size: 36px; }

.gr-onglets { margin-top: 56px; background: #fff; border: 1px solid var(--gr-bord); border-radius: var(--gr-rayon-carte); overflow: hidden; }
.gr-onglets__nav { border-bottom: 1px solid var(--gr-bord); flex-wrap: wrap; }
.gr-onglets__nav .nav-link {
  padding: 16px 24px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--gr-texte-2);
  font-family: var(--gr-titre); font-weight: 700; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase;
}
.gr-onglets__nav .nav-link.active { color: var(--gr-noir-texte); border-bottom-color: var(--gr-rouge); }
.gr-onglets__contenu { padding: 24px; }
.gr-carac { width: 100%; border-collapse: collapse; font-size: 15px; }
.gr-carac th, .gr-carac td { padding: 12px; border-bottom: 1px solid var(--gr-bord); text-align: left; vertical-align: top; }
.gr-carac th { width: 35%; color: var(--gr-texte-2); font-weight: 600; }

/* Compatibilité véhicules (module grcompat) */
.gr-compat__recherche { margin-bottom: 16px; max-width: 420px; }
.gr-compat__recherche .form-control { height: 48px; }
.gr-compat__tableau { max-height: 520px; overflow: auto; }
.gr-compat__table thead th {
  position: sticky; top: 0; background: #fff; width: auto; color: var(--gr-texte-2); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--gr-noir-texte);
}
.gr-compat__note { margin: 16px 0 0; color: var(--gr-texte-2); font-size: 14px; }

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
#footer.footer { background: var(--gr-noir); color: var(--gr-gris-clair); padding: 0; margin: 0; }
.gr-newsletter { background: var(--gr-rouge); color: #fff; --bs-tertiary-bg-rgb: 217, 10, 22; }
.gr-newsletter section.ps-emailsubscription.bg-body-tertiary { background-color: transparent !important; }
.gr-newsletter .ps-emailsubscription { background: transparent !important; color: #fff; padding: 36px 0 !important; }
.gr-newsletter .ps-emailsubscription .container { max-width: none; padding: 0; }
.gr-newsletter .ps-emailsubscription .row { align-items: center; justify-content: space-between !important; margin: 0; }
.gr-newsletter .h3, .gr-newsletter .ps-emailsubscription .h3 {
  font-family: var(--gr-titre); font-weight: 800; font-size: 36px; text-transform: uppercase; line-height: 1;
  color: #fff !important; margin: 0 0 12px; padding: 0;
}
.gr-newsletter p, .gr-newsletter label, .gr-newsletter small, .gr-newsletter .text-body-secondary,
.gr-newsletter [class*="text-"] { color: #fff !important; }
.gr-newsletter .ps-emailsubscription .form-control { height: 52px; border: 0; border-radius: var(--gr-rayon); }
.gr-newsletter .ps-emailsubscription .btn-primary {
  --bs-btn-bg: var(--gr-noir); --bs-btn-border-color: var(--gr-noir); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
  height: 52px; padding: 0 24px; font-family: var(--gr-titre); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase;
}
.gr-newsletter .ps-emailsubscription .text-body-secondary, .gr-newsletter .ps-emailsubscription a { color: #fff !important; }

/* Newsletter (gabarit GR SHOP du module) */
.gr-nl { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; padding: 36px 0; background: transparent; color: #fff; }
.gr-nl__texte { display: flex; flex-direction: column; gap: 6px; }
.gr-nl__titre { margin: 0; color: #fff; font-size: 36px; line-height: 1; }
.gr-nl__sous { margin: 0; font-size: 17px; }
.gr-nl__form { flex: 1 1 380px; max-width: 520px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gr-nl__ligne { display: flex; gap: 8px; }
.gr-nl__email { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: var(--gr-rayon); font-family: inherit; font-size: 16px; color: var(--gr-noir-texte); }
.gr-nl__btn {
  height: 52px; padding: 0 24px; border: 0; border-radius: var(--gr-rayon); background: var(--gr-noir); color: #fff; cursor: pointer;
  font-family: var(--gr-titre); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase;
}
.gr-nl__btn:hover { background: #000; }
.gr-nl__msg { padding: 8px 12px; border-radius: var(--gr-rayon); background: #fff; color: var(--gr-vert-fonce); font-weight: 600; }
.gr-nl__msg--erreur { color: var(--gr-rouge-texte); }
.gr-nl__rgpd, .gr-nl__rgpd label, .gr-nl__conditions { margin: 0; font-size: 13px; color: #fff; }
.gr-nl__rgpd a, .gr-nl__conditions a { color: #fff; text-decoration: underline; }

.gr-footer { background: var(--gr-noir); color: var(--gr-gris-clair); }
.gr-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 32px; }
.gr-footer__grid > * { width: auto; max-width: none; padding: 0; margin: 0; }
.gr-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.gr-footer__brand img { height: 72px; width: auto; align-self: flex-start; }
.gr-footer__brand p { margin: 0; font-size: 15px; line-height: 1.5; }
.gr-footer .footer-block__content.collapse { display: block; }
@media (max-width: 767.98px) { .gr-footer .footer-block__content.collapse:not(.show) { display: none; } }
.gr-footer .footer-block__title { font-family: var(--gr-titre); font-weight: 700; font-size: 19px; text-transform: uppercase; color: #fff; }
.gr-footer .footer-block__title .material-icons { color: #fff; }
.gr-footer .footer-block__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gr-footer a { color: var(--gr-gris-clair); text-decoration: none; font-size: 15px; }
.gr-footer a:hover { color: var(--gr-rouge-clair); }
.gr-footer__bottom { border-top: 1px solid var(--gr-trait-noir); }
.gr-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: var(--gr-gris-moyen); }

/* =====================================================================
   PAGES CATÉGORIE (maquette categorie.html) : en-tête, filtres (ps_facetedsearch), liste, texte SEO
   ===================================================================== */
.breadcrumb { font-size: 14px; }
.breadcrumb a { color: var(--gr-texte-2); }

/* En-tête */
.gr-cat { margin-bottom: 24px; }
.gr-cat__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.gr-cat__intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gr-cat__titre { margin: 0; font-size: clamp(38px, 4.5vw, 56px); line-height: 0.95; font-style: italic; }
.gr-cat__desc { max-width: 720px; font-size: 16px; color: var(--gr-texte-2); }
.gr-cat__desc p { margin: 0; }
.gr-cat__nb { font-size: 15px; color: var(--gr-texte-2); }
.gr-cat__sous { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gr-cat__pastille {
  display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--gr-rayon); border: 2px solid var(--gr-bord-2);
  background: #fff; color: var(--gr-noir-texte); font-weight: 600; font-size: 15px; text-decoration: none;
}
.gr-cat__pastille:hover { border-color: var(--gr-noir-texte); color: var(--gr-noir-texte); }
.gr-cat__pastille.is-actif { border-color: var(--gr-noir-texte); background: var(--gr-noir-texte); color: #fff; }

/* Bandeau compatibilité (grcompat) */
.gr-compat-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px;
  border-radius: 8px; background: var(--gr-vert-fond); border: 1px solid var(--gr-vert-bord);
}
.gr-compat-bandeau__texte { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--gr-vert-fonce); }
.gr-compat-bandeau__texte svg { flex: 0 0 auto; color: var(--gr-vert); }
.gr-compat-bandeau a { color: var(--gr-vert-fonce); font-weight: 600; text-decoration: underline; }
.gr-compat-bandeau__liens { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gr-cat__desc a { color: var(--gr-noir-texte); font-weight: 600; }
.gr-cat__pastille .gr-veh__nb { margin-left: 4px; }
.gr-cat__pastille.is-actif .gr-veh__nb { color: var(--gr-gris-clair); }
.gr-compat-bandeau--neutre { background: #fff; border-color: var(--gr-bord); }
.gr-compat-bandeau--neutre .gr-compat-bandeau__texte, .gr-compat-bandeau--neutre a { color: var(--gr-texte-2); font-weight: 500; }

/* Colonne des filtres */
#left-column .ps-facetedsearch, #left-column .block-categories {
  background: #fff; border: 1px solid var(--gr-bord); border-radius: var(--gr-rayon-carte); padding: 8px 20px 20px;
}
.gr-filtres__tete { align-items: center; justify-content: space-between; padding: 12px 0; }
.search-filters .left-block__title, .gr-filtres__tete .left-block__title {
  margin: 0; font-family: var(--gr-titre); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--gr-noir-texte);
}
.gr-filtres__effacer { border: 0; background: none; padding: 0; color: var(--gr-texte-2); font-size: 14px; text-decoration: underline; cursor: pointer; }
.gr-filtres__actifs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--gr-bord); }
.gr-filtres__actif {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--gr-rayon);
  background: var(--gr-noir-texte); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
.gr-filtres__actif:hover { background: var(--gr-rouge); color: #fff; }
/* Véhicule du garage en filtre (grcompat) : colonne des filtres sur ordinateur, en-tête de la catégorie sur mobile */
.gr-fv { padding: 4px 0 14px; border-bottom: 1px solid var(--gr-bord); margin-bottom: 12px; }
.gr-fv--entete { border: 0; padding: 0; margin: 0; }
.gr-fv--colonne { display: none; }
@media (min-width: 768px) { .gr-fv--colonne { display: block; } .gr-fv--entete { display: none; } }
.gr-fv__titre { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gr-texte-2); }
.gr-fv__etiquette {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: var(--gr-rayon);
  background: var(--gr-noir-texte); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; text-transform: uppercase;
}
.gr-fv__etiquette:hover, .gr-fv__etiquette:focus-visible { background: var(--gr-rouge); color: #fff; }
.gr-fv__aide { margin: 8px 0 0; font-size: 13px; color: var(--gr-texte-2); }
.gr-fv__aide a { color: var(--gr-noir-texte); font-weight: 600; }
.gr-fv__remettre {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--gr-noir-texte);
  border-radius: var(--gr-rayon); color: var(--gr-noir-texte); font-weight: 700; font-size: 14px; text-decoration: none;
}
.gr-fv__remettre:hover { background: var(--gr-noir-texte); color: #fff; }
.search-filters .accordion-item { border-bottom: 1px solid var(--gr-bord); background: transparent; }
.search-filters .accordion-button {
  padding: 14px 0; background: transparent; box-shadow: none; color: var(--gr-noir-texte); font-weight: 700; font-size: 16px;
}
.search-filters .accordion-button:not(.collapsed) { color: var(--gr-noir-texte); background: transparent; }
.search-filters .accordion-body { padding: 0 0 14px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.search-filters__item, .search-filters .facet-label { display: flex; align-items: center; min-height: 32px; }
.search-filters .form-check-input { width: 20px; height: 20px; margin-top: 0; border-radius: 4px; border-color: #B8B8BE; }
.search-filters .form-check-input:checked { background-color: var(--gr-noir-texte); border-color: var(--gr-noir-texte); }
.search-filters__link { display: flex; justify-content: space-between; gap: 8px; width: 100%; color: var(--gr-noir-texte); font-size: 15px; text-decoration: none; }
.search-filters__magnitude { font-size: 13px; color: var(--gr-texte-3); }
.search-filters .ui-slider-range, .search-filters .noUi-connect { background: var(--gr-rouge); }
.search-filters .ui-slider-handle, .search-filters .noUi-handle { border: 3px solid var(--gr-rouge); border-radius: 4px; background: #fff; }
/* filtres actifs : affichés dans la colonne (pas au-dessus de la liste) sur ordinateur */
@media (min-width: 768px) { #js-active-search-filters { display: none; } }

/* Barre de tri */
.products__selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.products__count { font-size: 15px; color: var(--gr-texte-2); }
.products__sort { display: flex; align-items: center; gap: 10px; }
.products__sort-label { font-size: 14px; color: var(--gr-texte-2); }
.products__sort-dropdown-button { min-height: 44px; min-width: 180px; border: 1px solid #B8B8BE; border-radius: var(--gr-rayon); background: #fff; color: var(--gr-noir-texte); text-align: left; }

/* Grille des produits */
#js-product-list .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
#js-product-list .products > * { width: auto; max-width: none; padding: 0; margin: 0; }

/* Pagination : carrés de 44 px, page courante noire */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding-top: 12px; }
.pagination .page-link {
  display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 2px solid var(--gr-bord-2); border-radius: var(--gr-rayon) !important; background: #fff; color: var(--gr-noir-texte); font-weight: 600;
}
.pagination .page-item.active .page-link { background: var(--gr-noir-texte); border-color: var(--gr-noir-texte); color: #fff; }
.pagination .page-link:hover { border-color: var(--gr-noir-texte); color: var(--gr-noir-texte); }
.pagination .page-link.disabled { color: var(--gr-texte-4); }

/* Texte de présentation (Description supplémentaire) */
.gr-cat__seo { margin-top: 56px; padding: 32px; background: #fff; border: 1px solid var(--gr-bord); border-radius: var(--gr-rayon-carte); display: flex; flex-direction: column; gap: 12px; }
.gr-cat__seo-texte { max-height: 9.6em; overflow: hidden; font-size: 16px; line-height: 1.6; color: #2A2A2E; max-width: 900px; }
.gr-cat__seo-texte.is-ouvert { max-height: none; }
.gr-cat__seo-texte h2, .gr-cat__seo-texte h3 { font-size: 30px; margin: 0 0 12px; }
.gr-cat__seo-plus { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--gr-noir-texte); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 991.98px) {
  .gr-vehicule__submit { flex: 1 1 100%; }
}
@media (max-width: 767.98px) {
  .gr-container { padding: 0 12px; }  /* maquette mobile : marges latérales 12 px */
  .gr-vc { flex-wrap: wrap; min-height: 0; padding-top: 18px; padding-bottom: 20px; }
  .gr-vc__ico { display: none; }
  .gr-vc__nom { font-size: 28px; white-space: normal; }
  .gr-vc__actions { flex: 1 1 100%; flex-direction: column; }
  .gr-vc__actions > * { width: 100%; justify-content: center; }
  .product__price { font-size: 40px; }
}

/* =====================================================================
   MOBILE / TABLETTE (< 1200 px) : EN-TÊTE ET TIROIR DU MENU (maquette-gr-shop-mobile, mobile-accueil / mobile-menu)
   Le brief prévoit le burger jusqu'à 1023 px ; la barre de catégories ne tenant pas avant 1200 px,
   l'en-tête mobile est gardé jusqu'à 1199 px (même seuil que l'ancien menu Hummingbird).
   ===================================================================== */
.gr-header__burger { display: none; }
.gr-tiroir { display: none; }

@media (max-width: 1199.98px) {
  .gr-bandeau { font-size: 13px; }
  .gr-bandeau__inner { padding-top: 6px; padding-bottom: 6px; }

  /* Ligne 1 : burger + compte | logo centré | Mon garage + panier ; ligne 2 : recherche pleine largeur */
  .gr-header__row {
    display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px;
    grid-template-areas: "burger compte logo garage panier" "recherche recherche recherche recherche recherche";
    align-items: center; gap: 10px 0; padding: 8px 12px 12px;
  }
  .gr-header__burger {
    grid-area: burger; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  }
  .gr-header__logo { grid-area: logo; justify-self: center; }
  .gr-header__logo img { height: 46px; }
  .gr-header__search { grid-area: recherche; }
  .gr-header__garage { grid-area: garage; }
  .gr-header__actions { display: contents; }
  .gr-header #_desktop_ps_customersignin { grid-area: compte; }
  .gr-header #_desktop_ps_shoppingcart { grid-area: panier; }
  .gr-header__favoris { display: none !important; }
  .gr-header__lien { min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .gr-header__lien > span:not(.gr-panier__nb) { display: none; }
  .gr-panier__nb { top: 3px; right: 3px; }

  /* Mon garage : icône seule, rouge clair quand une machine est enregistrée */
  .gr-garage { width: 44px; height: 44px; padding: 0; border: 0; justify-content: center; max-width: none; }
  .gr-garage svg { width: 28px; height: 20px; }
  .gr-garage__texte { display: none; }
  .gr-garage--actif { color: var(--gr-rouge-clair); }

  /* Recherche : 44 px ; sous 768 px, Hummingbird la range dans un panneau : il est affiché en place */
  .gr-header .gr-search__input, #_mobile_ps_searchbar .gr-search__input { height: 44px; padding: 0 14px; }
  .gr-search__submit { flex-basis: 50px; height: 44px; }
  .gr-header .ps-searchbar--mobile { width: 100%; }
  /* loupe qui ouvrait le panneau : inutile, le champ est affiché (le bloc garde « d-flex » de Bootstrap, on masque le lien) */
  .gr-header .ps-searchbar--mobile > .header-block > a { display: none; }
  .gr-header .ps-searchbar__offcanvas {
    position: static; visibility: visible !important; transform: none !important; width: 100%; height: auto;
    background: transparent; border: 0; z-index: auto; transition: none;
  }
  .gr-header .ps-searchbar__offcanvas .offcanvas-header { padding: 0; background: transparent; }
  .gr-header .ps-searchbar__offcanvas .ps-searchbar__container { width: 100%; }
  .gr-header .ps-searchbar__offcanvas [data-bs-dismiss="offcanvas"] { display: none; }

  /* La barre de catégories disparaît (le tiroir est rangé dedans, en position fixe) */
  .gr-menu { border: 0; background: none; }
  .gr-menu__inner { min-height: 0; padding: 0; }
  .gr-menu .ps-mainmenu--desktop { display: none; }

  /* ---------- Tiroir du menu : plein écran, depuis la gauche ---------- */
  .gr-tiroir {
    display: block; position: fixed; inset: 0; z-index: 1200; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; color: var(--gr-noir-texte); transform: translateX(-100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .gr-tiroir.is-open { transform: none; visibility: visible; }
  html.gr-tiroir-ouvert, html.gr-tiroir-ouvert body { overflow: hidden; }
  .gr-tiroir a { text-decoration: none; color: var(--gr-noir-texte); }
  .gr-tiroir__entete {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: var(--gr-noir); color: #fff;
  }
  .gr-tiroir__entete img { height: 46px; width: auto; display: block; }
  .gr-tiroir__fermer {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  }

  /* Carte Mon garage (module GR Compatibilité, garage_tiroir.tpl) */
  .gr-tg { margin: 12px; padding: 14px; border-radius: 8px; background: var(--gr-fond); display: flex; flex-direction: column; gap: 10px; }
  .gr-tg__entete { display: flex; align-items: center; gap: 10px; }
  .gr-tg__entete svg { flex: 0 0 auto; }
  .gr-tg__textes { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .gr-tg__sur { font-size: 12px; color: var(--gr-texte-2); }
  .gr-tg__nom { font-weight: 700; font-size: 16px; }
  .gr-tg__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gr-tiroir .gr-tg__btn {
    height: 44px; border-radius: var(--gr-rayon); border: 2px solid var(--gr-noir-texte); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 15px; color: var(--gr-noir-texte);
  }
  .gr-tiroir .gr-tg__btn--rouge { background: var(--gr-rouge); border-color: var(--gr-rouge); color: #fff; }

  /* Catégories en accordéon */
  .gr-tiroir__cats { font-family: var(--gr-titre); }
  .gr-tiroir .gr-tiroir__cat {
    width: 100%; height: 56px; padding: 0 16px 0 20px; border: 0; border-top: 1px solid var(--gr-bord); background: #fff;
    display: flex; align-items: center; justify-content: space-between; font-family: inherit; font-weight: 800;
    font-size: 21px; text-transform: uppercase; color: var(--gr-noir-texte); text-align: left; cursor: pointer;
  }
  .gr-tiroir .gr-tiroir__cat[aria-expanded="true"] { border-left: 4px solid var(--gr-rouge); padding-left: 16px; }
  .gr-tiroir__cat[aria-expanded="true"] .gr-tiroir__plus-v { display: none; }
  .gr-tiroir__chevron { font-family: var(--gr-corps); font-weight: 400; color: var(--gr-texte-4); }
  .gr-tiroir__sous { list-style: none; margin: 0; padding: 0 0 8px; background: #F7F7F8; font-family: var(--gr-corps); }
  .gr-tiroir__sous[hidden] { display: none; }
  .gr-tiroir__sous a {
    min-height: 46px; padding: 0 20px 0 28px; display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--gr-trait);
  }
  .gr-tiroir__sous a span { color: var(--gr-texte-4); }
  .gr-tiroir .gr-tiroir__sous .gr-tiroir__tout { border-bottom: 0; font-weight: 700; color: var(--gr-rouge-texte); justify-content: flex-start; }
  .gr-tiroir .gr-tiroir__bons-plans {
    margin: 12px; height: 52px; border-radius: var(--gr-rayon); background: var(--gr-rouge); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; text-transform: uppercase;
  }
  .gr-tiroir__liens { border-top: 1px solid var(--gr-bord); padding: 8px 0; }
  .gr-tiroir__liens a { height: 48px; padding: 0 20px; display: flex; align-items: center; font-size: 16px; font-weight: 600; }
  .gr-tiroir a:hover, .gr-tiroir .gr-tiroir__cat:hover { color: var(--gr-rouge-texte); }
  .gr-tiroir .gr-tiroir__bons-plans:hover, .gr-tiroir .gr-tg__btn--rouge:hover { color: #fff; background: var(--gr-rouge-texte); }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .gr-tiroir { transition: none; }
}

/* =====================================================================
   MOBILE (< 768 px) : ACCUEIL (maquette-gr-shop-mobile/pages/mobile-accueil.html)
   Titres de section 32 px, sections espacées de 32 px, marges 12 px, bandes horizontales à faire glisser.
   ===================================================================== */
@media (max-width: 767.98px) {
  .gr-section { padding-top: 32px; }
  .gr-section__title, .gr-section__title--sm { font-size: 32px; margin-bottom: 14px; }
  .gr-section__head { margin-bottom: 14px; flex-wrap: nowrap; gap: 8px; }
  .gr-section__lien { font-size: 14px; white-space: nowrap; }

  /* ---------- Recherche par véhicule : 3 onglets sur une ligne, selects en 2 × 2, bouton pleine largeur ---------- */
  .gr-vehicule__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding-top: 16px; padding-bottom: 20px; }
  .gr-vehicule__titre { grid-column: 1 / -1; min-height: 0; gap: 12px; }
  .gr-vehicule__titre > span:first-child { font-size: 26px; }
  .gr-vehicule__onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gr-vehicule__onglet { padding: 0 6px; font-size: 14px; line-height: 1.1; }
  .gr-vehicule__champ { gap: 4px; }
  .gr-vehicule__champ select { height: 46px; padding: 0 10px; }
  .gr-vehicule__submit { grid-column: 1 / -1; min-height: 52px; font-size: 21px; }

  /* ---------- Grand bandeau : visuel en haut, texte en dessous ; les 2 tuiles côte à côte ---------- */
  .gr-hero { flex-direction: column; gap: 10px; padding-top: 16px; }
  .gr-hero__grand, .gr-hero__tuiles { flex: 0 0 auto; }
  .gr-slide { flex-direction: column; align-items: stretch; min-height: 0; }
  .gr-slide__visuel { position: relative; inset: auto; height: 170px; display: block; }
  .gr-slide__visuel img { width: 100%; }
  .gr-slide__noir { display: none; }
  .gr-slide__bande {
    display: block; top: 160px; left: 0; width: 100%; height: 10px; margin: 0; transform: skewY(-6deg);
  }
  .gr-slide__texte { max-width: none; padding: 26px 20px 20px; gap: 10px; background: var(--gr-noir); }
  .gr-slide__titre { font-size: 40px; }
  .gr-slide__desc { font-size: 15px; }
  .gr-slide__cta { align-self: flex-start; font-size: 18px; }
  .gr-slider__points { padding-top: 8px; }
  .gr-hero__tuiles { flex-direction: row; gap: 10px; }
  .gr-tuile { flex: 1 1 0; min-width: 0; min-height: 150px; padding: 14px; justify-content: flex-end; gap: 4px; }
  .gr-tuile__sur { font-size: 11px; }
  .gr-tuile__titre { font-size: 24px; }
  .gr-tuile__cta { display: none; }

  /* ---------- Nos univers : grille 2 × 2, sans les listes de sous-catégories ---------- */
  .gr-univers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gr-univers__carte { border: 0; }
  .gr-univers__photo { height: 170px; padding: 12px; }
  .gr-univers__nom { font-size: 24px; line-height: 0.95; gap: 6px; }
  .gr-univers__nom .gr-barre { width: 32px; height: 4px; }
  .gr-univers__liens { display: none; }

  /* ---------- Bandes de produits à faire glisser (offres, nouveautés, sélection, produits associés) : cartes de 168 px ---------- */
  .gr-produits {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -12px; padding: 0 12px 4px; scroll-padding: 0 12px;
  }
  .gr-produits::-webkit-scrollbar { display: none; }
  .gr-produits > * { flex: 0 0 168px; scroll-snap-align: start; }
  .gr-produits .product-miniature__top img { height: 150px; width: 100%; object-fit: contain; }
  .gr-produits .product-miniature__bottom { position: relative; padding: 10px; gap: 4px; }
  .gr-produits .product-miniature__infos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
  .gr-produits .product-miniature__quickview-touch, .gr-produits .product-miniature__quickview-button { display: none !important; }
  .gr-produits .gr-mini__marque { font-size: 11px; }
  .gr-produits .product-miniature__title { font-size: 14px; line-height: 1.25; }
  .gr-produits .gr-mini__stock { display: none; }
  .gr-produits .product-miniature__prices {
    margin-top: auto; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-right: 50px;
  }
  .gr-produits .product-miniature__price, .gr-produits .product-miniature .price { font-size: 21px; }
  .gr-produits .product-miniature .regular-price { font-size: 12px; }
  .gr-produits .product-miniature__actions { position: absolute; right: 10px; bottom: 10px; }
  .gr-produits .quantity-button { display: none; }
  .gr-produits .product-miniature__add { width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0; }
  .gr-produits .product-miniature__add-text { display: none; }
  .gr-produits article .wishlist-button-add { width: 44px; height: 44px; min-width: 44px; top: 6px; right: 6px; }

  /* ---------- Nos marques : logos plus petits ---------- */
  .gr-bande__item { flex-basis: 150px; height: 110px; }
  .gr-bande__item img { max-width: 124px; max-height: 70px; }
  .gr-bande__item span { width: 124px; height: 70px; font-size: 16px; }

  /* ---------- Équipement pilote : 2 colonnes ---------- */
  .gr-equipement { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gr-equipement__photo { height: 110px; }
  .gr-equipement__nom { padding: 10px 12px; font-size: 20px; }

  /* ---------- Conseils & tutos : bande à faire glisser, cartes de 260 px ---------- */
  .gr-conseils {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -12px; padding: 0 12px 4px;
  }
  .gr-conseils::-webkit-scrollbar { display: none; }
  .gr-conseils__item { flex: 0 0 260px; scroll-snap-align: start; }
  .gr-conseils__photo { height: 130px; }
  .gr-conseils__corps { padding: 12px; }
  .gr-conseils__titre { font-size: 16px; }
  .gr-conseils__texte { display: none; }

  /* ---------- Réassurance : 2 × 2, icône au-dessus du titre ---------- */
  .gr-rassure-bande { margin-top: 32px; }
  .gr-rassure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 20px 0; }
  .gr-rassure__item { flex-direction: column; gap: 8px; }
  .gr-rassure__icon { width: 40px; height: 40px; border-radius: var(--gr-rayon); }
  .gr-rassure__titre { font-size: 15px; line-height: 1.25; }
  .gr-rassure__texte { display: none; }

  /* ---------- Newsletter : champ et bouton empilés ---------- */
  .gr-nl { flex-direction: column; align-items: stretch; gap: 12px; padding: 24px 0; }
  .gr-nl__titre { font-size: 28px; }
  .gr-nl__sous { font-size: 15px; }
  .gr-nl__form { flex: 0 0 auto; max-width: none; }
  .gr-nl__ligne { flex-direction: column; }
  .gr-nl__email, .gr-nl__btn { height: 48px; width: 100%; }

  /* ---------- Pied de page : logo, colonnes en accordéon (+ / –), coordonnées en dessous ---------- */
  .gr-footer__grid { display: flex; flex-direction: column; gap: 0; padding-top: 24px; padding-bottom: 16px; }
  .gr-footer__brand { display: contents; }
  .gr-footer__brand img { order: 0; height: 60px; margin-bottom: 10px; }
  .gr-footer__brand p { order: 2; margin-top: 10px; font-size: 14px; }
  .gr-footer__brand p + p { margin-top: 4px; }
  .gr-footer .footer-block { order: 1; width: 100%; padding: 0; margin: 0; }
  .gr-footer .footer-block__title {
    position: relative; display: flex; align-items: center; justify-content: space-between; height: 52px; margin: 0;
    border-bottom: 1px solid var(--gr-trait-noir);
  }
  .gr-footer .footer-block__title .material-icons { display: none; }
  .gr-footer .footer-block__title button { color: #fff; background: none; border: 0; }
  .gr-footer .footer-block__title::after { content: "+"; font-family: var(--gr-corps); font-weight: 700; font-size: 24px; line-height: 1; }
  .gr-footer .footer-block__title:has(button[aria-expanded="true"])::after { content: "–"; }
  .gr-footer .footer-block__content { padding: 4px 0 12px; }
  .gr-footer .footer-block__list { gap: 0; }
  .gr-footer .footer-block__list a { display: flex; align-items: center; min-height: 44px; }
  .gr-footer__bottom-inner { flex-direction: column; gap: 4px; padding-top: 14px; padding-bottom: 20px; font-size: 13px; }
}

/* =====================================================================
   MOBILE (< 768 px) : PAGE VÉHICULE (maquette-gr-shop-mobile/pages/mobile-vehicule.html)
   ===================================================================== */
@media (max-width: 767.98px) {
  .gr-ordi-seul { display: none; }
  .gr-mobile-seul { display: inline; }

  /* ---------- Récap : fil d'Ariane, petite photo à gauche du nom, pastilles, bouton fiche, 2 boutons côte à côte ---------- */
  .gr-veh__bande { display: none; }
  .gr-veh__recap {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start;
    padding-top: 14px; padding-bottom: 14px;
  }
  .gr-veh__infos { display: contents; }
  .gr-veh__ariane { grid-column: 1 / -1; font-size: 13px; gap: 4px; }
  .gr-veh__photo { display: block; grid-column: 1; grid-row: 2 / span 2; width: 120px; height: 90px; flex: none; border-radius: 8px; }
  .gr-veh__sur { grid-column: 2; grid-row: 2; font-size: 12px; }
  .gr-veh__titre { grid-column: 2; grid-row: 3; font-size: 32px; }
  .gr-veh__pastilles { grid-column: 1 / -1; gap: 6px; }
  .gr-veh__pastille { padding: 5px 10px; font-size: 13px; }
  .gr-veh__fiche-btn { flex: 1 1 100%; justify-content: space-between; height: 44px; padding: 0 14px; font-size: 15px; }
  .gr-veh__actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gr-veh__garage, .gr-veh__changer { min-height: 44px; padding: 4px 8px; font-family: var(--gr-corps); font-size: 15px; letter-spacing: 0; text-transform: none; }
  .gr-veh__actions > :only-child { grid-column: 1 / -1; }

  /* ---------- Caractéristiques techniques : onglets horizontaux à faire glisser, valeurs sur une colonne ---------- */
  .gr-veh__fiche { padding-bottom: 14px; }
  .gr-veh__fiche-titre { display: none; }
  .gr-veh__fiche-corps { display: block; background: #fff; border-radius: var(--gr-rayon-carte); overflow: hidden; }
  .gr-veh__onglets {
    max-width: none; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px;
    border-bottom: 1px solid var(--gr-bord);
  }
  .gr-veh__onglets::-webkit-scrollbar { display: none; }
  .gr-veh__onglet { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: var(--gr-rayon); border-width: 2px; }
  .gr-veh__onglet-icone, .gr-veh__onglet-nb { display: none; }
  .gr-veh__onglet-nom { font-size: 15px; white-space: nowrap; }
  .gr-veh__onglet[aria-selected="true"] { background: var(--gr-rouge); border-color: var(--gr-rouge); }
  .gr-veh__onglet[aria-selected="true"] .gr-veh__onglet-nom { color: #fff; }
  .gr-veh__panneau { padding: 0; border-radius: 0; }
  .gr-veh__valeurs { grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .gr-veh__valeur { padding: 10px 14px; border-right: 0; }
  .gr-veh__valeur:last-child { border-bottom: 0; }
  .gr-veh__valeur dt { font-size: 11px; }
  .gr-veh__valeur dd { font-size: 17px; }
  .gr-veh__fiche-note { font-size: 12px; }

  /* ---------- Accès rapide : « Tous les produits » en largeur, tuiles en grille de 4, Pneus en rouge ---------- */
  .gr-veh__corps { padding-top: 24px; padding-bottom: 40px; }
  .gr-veh__section + .gr-veh__section { margin-top: 32px; }
  .gr-veh__rapides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .gr-veh__rapide { min-height: 82px; padding: 8px 4px; gap: 6px; font-size: 12px; border-radius: 8px; }
  .gr-veh__rapide svg { width: 26px; height: 26px; }
  .gr-veh__rapide .gr-veh__nb { display: none; }
  .gr-veh__rapide--large, .gr-veh__rapide--rouge {
    grid-column: 1 / -1; min-height: 52px; flex-direction: row; justify-content: flex-start; padding: 0 14px; gap: 12px; font-size: 15px;
  }
  .gr-veh__rapide--large .gr-veh__nb { display: inline; }

  /* ---------- Toutes les catégories : recherche pleine largeur, accordéon (une ouverte à la fois, liseré rouge) ---------- */
  .gr-veh__section .gr-section__head { flex-wrap: wrap; }
  .gr-veh__filtre { flex: 1 1 100%; }
  .gr-veh__filtre input { height: 48px; font-size: 16px; }
  .gr-veh__blocs { grid-template-columns: 1fr; gap: 8px; }
  .gr-veh__bloc { border-top-width: 1px; border-left: 4px solid var(--gr-noir-texte); border-radius: 8px; }
  .gr-veh__bloc.is-deplie { border-left-color: var(--gr-rouge); }
  .gr-veh__bloc-tete { display: none; }
  .gr-veh__bloc-bouton {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px;
    padding: 8px 14px; border: 0; background: #fff; color: var(--gr-noir-texte); text-align: left; cursor: pointer;
  }
  .gr-veh__bloc-bouton-nom { font-family: var(--gr-titre); font-weight: 800; font-size: 21px; line-height: 1; text-transform: uppercase; }
  .gr-veh__bloc-bouton svg { flex: 0 0 auto; transition: transform 0.2s; }
  .gr-veh__bloc-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
  .gr-veh__bloc-contenu { display: none; border-top: 1px solid var(--gr-bord); }
  .gr-veh__bloc.is-deplie .gr-veh__bloc-contenu, .gr-veh__bloc.is-filtre .gr-veh__bloc-contenu { display: block; }
  .gr-veh__bloc .gr-veh__ligne--plus { display: block; }
  .gr-veh__bloc .gr-veh__plus { display: none; }
  .gr-veh__ligne-tete a { display: flex; justify-content: space-between; min-height: 44px; align-items: center; padding: 10px 14px 10px 24px; }
  .gr-veh__bloc-tout {
    display: flex; align-items: center; min-height: 48px; padding: 0 24px; font-weight: 700; font-size: 15px;
    color: var(--gr-rouge-texte); text-decoration: none; background: #fff;
  }
  .gr-veh__bloc.is-filtre .gr-veh__bloc-tout { display: none; }
}

/* =====================================================================
   MOBILE (< 768 px) : PAGE CATÉGORIE + PANNEAU DE FILTRES
   (maquette-gr-shop-mobile/pages/mobile-categorie.html et mobile-filtres.html)
   ===================================================================== */
@media (max-width: 767.98px) {
  /* ---------- En-tête : titre, nombre de produits dessous, sous-catégories à faire glisser ---------- */
  .gr-cat__tete { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gr-cat__titre { font-size: 34px; line-height: 0.95; }
  .gr-cat__nb { font-size: 15px; }
  .gr-cat__sous {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px 4px;
    scroll-snap-type: x proximity; scroll-padding-left: 12px;
  }
  .gr-cat__sous::-webkit-scrollbar { display: none; }
  .gr-cat__pastille { flex: 0 0 auto; white-space: nowrap; min-height: 44px; scroll-snap-align: start; }

  /* ---------- Barre « Filtrer (n) » + « Trier », collante sous l'en-tête ---------- */
  #js-product-list-top {
    position: sticky; top: var(--gr-entete-h, 152px); z-index: 20; margin: 0 -12px 10px; padding: 10px 12px;
    background: var(--gr-fond); border-bottom: 1px solid var(--gr-bord);
  }
  .products__selection { margin: 0; }
  .products__count, .products__sort-label { display: none; }
  .products__sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .gr-filtrer {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 10px; border: 0;
    border-radius: var(--gr-rayon); background: var(--gr-noir-texte); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer;
  }
  .products__sort-dropdown, .products__sort-dropdown-button { width: 100%; min-width: 0; }
  .products__sort-dropdown-button {
    height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; border: 2px solid var(--gr-bord-2);
  }
  .products__sort-dropdown-button::before { content: "Trier : "; }
  .products__sort .dropdown-menu { font-size: 15px; }
  .products__sort .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .active-filters { margin-bottom: 10px; }

  /* ---------- Produits : grille de 2 colonnes, cartes compactes (photo 150 px, panier rouge 44 × 44) ---------- */
  #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #js-product-list .product-miniature__top img { height: 150px; width: 100%; object-fit: contain; }
  #js-product-list .product-miniature__bottom { position: relative; padding: 10px; gap: 4px; }
  #js-product-list .product-miniature__infos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
  #js-product-list .product-miniature__quickview-touch, #js-product-list .product-miniature__quickview-button { display: none !important; }
  #js-product-list .gr-mini__marque { font-size: 11px; }
  #js-product-list .product-miniature__title { font-size: 14px; line-height: 1.25; }
  #js-product-list .gr-mini__stock { font-size: 13px; }
  #js-product-list .product-miniature__prices {
    margin-top: auto; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-right: 50px;
  }
  #js-product-list .product-miniature__price, #js-product-list .product-miniature .price { font-size: 21px; }
  #js-product-list .product-miniature .regular-price { font-size: 12px; }
  #js-product-list .product-miniature__actions { position: absolute; right: 10px; bottom: 10px; }
  #js-product-list .quantity-button { display: none; }
  #js-product-list .product-miniature__add { width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0; }
  #js-product-list .product-miniature__add-text { display: none; }
  #js-product-list .product-miniature .wishlist-button-add { width: 44px; height: 44px; min-width: 44px; top: 6px; right: 6px; }

  /* ---------- « Afficher plus de produits » à la place de la pagination ---------- */
  #js-product-list > .products__pagination { display: none; }
  .gr-plus { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 8px; }
  .gr-plus__texte { margin: 0; text-align: center; font-size: 14px; color: var(--gr-texte-2); }
  .gr-plus__barre { height: 4px; border-radius: 2px; background: var(--gr-bord); overflow: hidden; }
  .gr-plus__barre span { display: block; height: 100%; background: var(--gr-noir-texte); }
  .gr-plus__btn {
    height: 52px; border: 2px solid var(--gr-noir-texte); border-radius: var(--gr-rayon); background: #fff; color: var(--gr-noir-texte);
    font-family: var(--gr-titre); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  }
  .gr-plus__btn:disabled { opacity: 0.6; cursor: progress; }

  /* ---------- Panneau de filtres plein écran (#offcanvas-faceted de Hummingbird) ---------- */
  #offcanvas-faceted { --bs-offcanvas-width: 100%; background: #fff; }
  #offcanvas-faceted .offcanvas-header { display: none; }
  #offcanvas-faceted .offcanvas-body { padding: 0; display: flex; flex-direction: column; }
  #offcanvas-faceted #_mobile_faceted { flex: 1 1 auto; display: flex; flex-direction: column; }
  #offcanvas-faceted .search-filters { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 16px; }
  #offcanvas-faceted .gr-filtres__tete {
    position: sticky; top: 0; z-index: 2; gap: 16px; min-height: 60px; margin: 0 -16px; padding: 4px 8px 4px 16px;
    background: #fff; border-bottom: 1px solid var(--gr-bord);
  }
  #offcanvas-faceted .gr-filtres__tete .left-block__title { flex: 1 1 auto; margin: 0; font-size: 30px; }
  #offcanvas-faceted .gr-filtres__effacer { font-size: 15px; min-height: 44px; }
  #offcanvas-faceted .gr-filtres__fermer {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
    background: none; color: var(--gr-noir-texte); cursor: pointer;
  }
  #offcanvas-faceted .gr-filtres__actifs { padding-top: 12px; }
  #offcanvas-faceted .gr-filtres__actif { min-height: 36px; font-size: 15px; }
  #offcanvas-faceted .gr-fv--colonne { display: block; }
  #offcanvas-faceted .accordion-button {
    min-height: 56px; padding: 0; font-weight: 700; font-size: 17px; color: var(--gr-noir-texte); background: #fff; box-shadow: none;
  }
  #offcanvas-faceted .accordion-button::after {
    content: "+"; background-image: none; width: auto; height: auto; transform: none; font-size: 24px; line-height: 1;
  }
  #offcanvas-faceted .accordion-button:not(.collapsed)::after { content: "–"; }
  #offcanvas-faceted .accordion-item { border-bottom: 1px solid var(--gr-bord); }
  #offcanvas-faceted .accordion-body { padding: 0 0 12px; }
  #offcanvas-faceted .search-filters__item { min-height: 44px; display: flex; align-items: center; }
  #offcanvas-faceted .form-check-input { width: 22px; height: 22px; margin-top: 0; }
  #offcanvas-faceted .search-filters__link, #offcanvas-faceted .search-filters__form-label { font-size: 16px; }
  #offcanvas-faceted .gr-filtres__bas {
    display: block; position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--gr-bord);
  }
  #offcanvas-faceted .gr-filtres__appliquer {
    width: 100%; height: 52px; border: 0; border-radius: var(--gr-rayon); background: var(--gr-rouge); color: #fff;
    font-family: var(--gr-titre); font-weight: 800; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer;
  }
}

/* =====================================================================
   MOBILE (< 768 px) : FICHE PRODUIT (maquette-gr-shop-mobile/pages/mobile-produit.html)
   ===================================================================== */
@media (max-width: 767.98px) {
  /* fil d'Ariane sur une ligne, à faire glisser */
  .page-product .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 13px; }
  .page-product .breadcrumb::-webkit-scrollbar { display: none; }

  /* ---------- Galerie pleine largeur, à faire glisser, points indicateurs au lieu des vignettes ---------- */
  .page-product .product__carousel { border-radius: var(--gr-rayon-carte); overflow: hidden; background: #fff; touch-action: pan-y; }
  .page-product .product__zoom, .page-product .product__carousel .carousel-control-prev,
  .page-product .product__carousel .carousel-control-next { display: none; }
  .gr-compat-bandeau--produit { flex-wrap: nowrap; padding: 12px 14px; }
  .page-product .product__thumbnails { margin-top: 10px; }
  .page-product .product__thumbnails-list { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; overflow: visible; }
  .page-product .product__thumbnails-list:has(> :only-child) { display: none; }
  .page-product .product__thumbnail {
    flex: 0 0 auto; width: 8px; height: 6px; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: #B8B8BE; overflow: hidden;
  }
  .page-product .product__thumbnail picture, .page-product .product__thumbnail img { display: none; }
  .page-product .product__thumbnail.active { width: 24px; background: var(--gr-noir-texte); }

  /* ---------- Colonne unique : titre, prix, déclinaisons en 2 colonnes, quantité + panier sur une ligne ---------- */
  .gr-produit__surtitre { font-size: 12px; margin-bottom: 4px; }
  .gr-produit__titre { font-size: 34px; margin-bottom: 8px; }
  .gr-produit__resume { margin: 0 0 12px; }
  .product__price { font-size: 40px; }
  .product-variant__radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-variant__radio label { justify-content: center; min-height: 48px; padding: 0 8px; text-align: center; }
  /* quantité + « Ajouter au panier » (+ favori) sur une seule ligne */
  .product__actions-qty-add { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .product__actions-qty-add .product__quantity { flex: 0 0 auto; width: auto; margin: 0; }
  .product__actions-qty-add .quantity-button__group { width: auto; height: 52px; flex-wrap: nowrap; }
  .product__actions-qty-add .quantity-button__group .btn { width: 40px; min-width: 40px; }
  .product__actions-qty-add .quantity-button__group .form-control { width: 40px; flex: 0 0 40px; padding: 0; text-align: center; font-size: 16px; }
  .product__actions-qty-add .product__add-to-cart { flex: 1 1 auto; min-width: 0; margin: 0; }
  .product__add-to-cart-button { width: 100%; min-height: 52px; font-size: 18px; padding: 0 8px; white-space: nowrap; }
  .product__add-to-cart-button .material-icons { display: none; }
  .product__actions-qty-add > .wishlist-button-add { flex: 0 0 48px; width: 48px; height: 52px; margin: 0; }

  /* encadré stock + réassurance : liste compacte (pas la grille 2 × 2 de l'accueil) */
  .gr-produit__rassure { padding: 14px; }
  .gr-produit__rassure .gr-rassure { display: flex; flex-direction: column; gap: 6px; padding: 0; }
  .gr-produit__rassure .gr-rassure__item { flex-direction: row; align-items: center; gap: 8px; }
  .gr-produit__rassure .gr-rassure__icon { width: 20px; height: 20px; }
  .gr-produit__rassure .gr-rassure__titre { font-size: 14px; font-weight: 500; }

  /* ---------- Onglets → accordéons (Compatibilité ouvert), compatibilité en liste « modèle cylindrée — années » ---------- */
  .gr-onglets { margin-top: 28px; }
  .gr-onglets__nav { display: none; }
  .gr-onglets__contenu { padding: 0; }
  .gr-onglets__acc {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 16px 0 18px;
    border: 0; border-top: 1px solid var(--gr-bord); border-left: 4px solid transparent; background: #fff; color: var(--gr-noir-texte);
    font-family: var(--gr-titre); font-weight: 800; font-size: 21px; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .gr-onglets__acc:first-child { border-top: 0; }
  .gr-onglets__acc::after { content: "+"; font-family: var(--gr-corps); font-size: 24px; font-weight: 700; }
  .gr-onglets__acc[aria-expanded="true"] { border-left-color: var(--gr-rouge); }
  .gr-onglets__acc[aria-expanded="true"]::after { content: "–"; }
  .gr-onglets__contenu > .tab-pane { display: none; opacity: 1; padding: 0 14px 14px; }
  .gr-onglets__contenu > .tab-pane.is-ouvert { display: block; }
  .gr-carac th, .gr-carac td { padding: 10px 6px; font-size: 14px; }
  .gr-compat__recherche { max-width: none; margin-bottom: 8px; }
  .gr-compat__tableau { max-height: 420px; }
  /* une ligne par modèle : « MARQUE MODÈLE … années », cylindrée en petit dessous */
  .gr-compat__tableau { overflow-x: hidden; }
  .gr-compat__table, .gr-compat__table tbody { display: block; width: 100%; }
  .gr-compat__table thead { display: none; }
  .gr-compat__table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--gr-bord); }
  .gr-compat__table tr[hidden] { display: none; }
  .gr-compat__table td { display: block; border: 0; padding: 0; font-size: 14px; }
  .gr-compat__table td:nth-child(1) { flex: 0 0 auto; font-weight: 700; }
  .gr-compat__table td:nth-child(2) { flex: 1 1 0; min-width: 0; font-weight: 700; }
  .gr-compat__table td:nth-child(4) { flex: 0 0 auto; white-space: nowrap; text-align: right; }
  .gr-compat__table td:nth-child(3) { order: 5; flex: 0 0 100%; font-size: 13px; color: var(--gr-texte-3); }
  .gr-compat__table td:nth-child(3):empty { display: none; }

  /* ---------- Barre d'achat fixe en bas de l'écran ---------- */
  .gr-barre-achat {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--gr-bord);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); transform: translateY(110%); transition: transform 0.2s ease;
  }
  .gr-barre-achat.is-visible { transform: none; }
  .gr-barre-achat__infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
  .gr-barre-achat__nom { font-size: 13px; color: var(--gr-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gr-barre-achat__prix { font-family: var(--gr-titre); font-weight: 800; font-size: 26px; color: var(--gr-noir-texte); }
  .gr-barre-achat__btn {
    flex: 0 0 auto; height: 52px; padding: 0 18px; border: 0; border-radius: var(--gr-rayon); background: var(--gr-rouge); color: #fff;
    font-family: var(--gr-titre); font-weight: 700; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  }
  .gr-barre-achat__btn:disabled { opacity: 0.5; }
  body.gr-barre-achat-visible { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .gr-barre-achat { transition: none; }
}