/* ==========================================================================
   Header — Hummingbird Child (BAT « Shine Racing »)
   Override de _partials/header.tpl (blocs header_banner + header_bottom) + tpl
   modules ps_searchbar / ps_customersignin / ps_shoppingcart.
   Tous les sélecteurs sont préfixés .shine-header / .shine-nav / #mobileMenu :
   aucun impact hors header.
   Breakpoints : nav desktop / burger = 920 px (BAT §8) ; le swap JS _desktop_/_mobile_
   des modules reste à 768 px (md, codé en dur dans le parent).
   ========================================================================== */

/* La palette du theme vit dans custom.css (source unique des couleurs). */

/* Les @font-face de la charte (Anek, Saira, BricolageGrotesque) sont déclarés une
   seule fois dans custom.css. Hanken Grotesk a été retirée le 04/08/2026. */

/* --------------------------------------------------------------------------
   Barre principale (remplace .header-bottom du parent)
   -------------------------------------------------------------------------- */

.shine-header {
  position: relative; /* ancre des mega-menus pleine largeur */
  padding: 0;
  font-family: "Anek", system-ui, sans-serif;
  font-weight: 400;
  color: var(--shine-white);
  background: rgb(var(--shine-ink-rgb) / 0.98);
  border-bottom: 1px solid var(--shine-line-light);
}

.shine-header__bar {
  /* `position: relative` est désormais possible : les mega-menus qui devaient
     s'ancrer sur .shine-header pleine largeur ont disparu avec la nav horizontale.
     C'est ce qui permet de centrer le logo sur la barre, et non entre deux groupes
     de largeurs inégales (des marges auto le décaleraient visiblement). */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 20px;
  margin: 0 auto;
}

/* 🔴 Ces liens sont BLANCS et doivent le rester : la barre du header est rendue
   par Creative Elements sur fond NOIR (CE_HEADER = 1). Les passer en noir le
   13/08/2026 a rendu les icônes panier et compte invisibles — noir sur noir.
   Ce qui devait être corrigé, c'était le seul tiroir panier (fond blanc), traité
   par la règle dédiée plus bas.
   :not(.dropdown-item) : les items du menu compte connecté (fond blanc Bootstrap)
   gardent leur couleur sombre — même garde-fou que le parent (_header-top.scss). */
.shine-header a:not(.dropdown-item) {
  color: var(--shine-white);
  text-decoration: none;
}

/* chevron carret (SVG fourni) — remplace le caret CSS de Bootstrap */
.shine-header .dropdown-toggle::after {
  display: none;
}

.shine-header .shine-carret {
  flex: none;
  margin-left: -2px;
}

/* ---- Ordre visuel des enfants de la barre (le hook displayTop sort en premier) ---- */

.shine-header__bar > .ps-mainmenu--desktop { order: -3; } /* burger */
.shine-header__bar > .ps-searchbar__wrapper,
.shine-header__bar > .shine-search-wrap { order: -2; }               /* loupe */

/* Logo centré sur la barre, hors flux : il ne subit donc pas la largeur des
   groupes gauche et droite, qui ne sont jamais égaux. */
.shine-header__bar > .shine-header__h1,
.shine-header__bar > .shine-header__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.shine-header__bar > .shine-header__actions { order: 1; margin-left: auto; }
.shine-header__bar > #_mobile_ps_customersignin { order: 2; }
.shine-header__bar > #_mobile_ps_shoppingcart { order: 3; }

/* ⚠ Ancienne écriture fausse : `.shine-header__actions ~ #_mobile_…{margin-left:0}`
   annulait la marge EN PERMANENCE — un sélecteur frère ignore le fait que l'élément
   précédent soit masqué. Le décalage à droite se fait donc par media query. */

/* Libellé « Menu » à côté du burger (maquette). Il disparaît sur les écrans
   étroits, où la place manque pour autre chose que les pictogrammes. */
.shine-header [data-hdr-label] {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shine-white);
}

/* La loupe portait sa mise en page par la classe utilitaire `d-flex`, désormais
   retirée du gabarit : le thème la reprend à son compte. */
.shine-header .shine-search-toggle {
  display: flex;
}

/* Barre de recherche pleine largeur — masquée par défaut, elle ne sert qu'aux
   écrans étroits, où la loupe cède sa place. */
.shine-header__searchbar {
  display: none;
}

.shine-header__searchbar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--shine-white-rgb) / 0.75);
  text-align: left;
  background: rgb(var(--shine-white-rgb) / 0.1);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.shine-header__searchbar-btn:hover,
.shine-header__searchbar-btn:focus-visible {
  color: var(--shine-white);
  background: rgb(var(--shine-white-rgb) / 0.18);
}

@media (max-width: 767.98px) {
  .shine-header [data-hdr-label] {
    display: none;
  }

  .shine-header__bar {
    gap: 8px;
    height: 54px;
    padding: 0 12px;
  }

  /* Compte et panier collés à droite (maquette). Ils viennent des cibles de repli
     `_mobile_`, la barre `.shine-header__actions` étant masquée sous 768 px. */
  .shine-header__bar > #_mobile_ps_customersignin {
    margin-left: auto;
  }

  /* La loupe cède la place à la barre pleine largeur. Plus besoin d'!important : la
     classe utilitaire `d-flex` a été retirée du gabarit (voir ps_searchbar.tpl). */
  .shine-header .shine-search-toggle {
    display: none;
  }

  .shine-header__searchbar {
    display: block;
    padding: 0 12px 10px;
  }

  /* le logo ne doit jamais chevaucher les pictogrammes sur un petit écran */
  .shine-header__bar > .shine-header__brand img,
  .shine-header__bar > .shine-header__h1 img {
    max-width: 34vw;
  }
}

/* --------------------------------------------------------------------------
   Burger (ps_mainmenu parent) — restylé en 3 barres, menu desktop parent masqué
   -------------------------------------------------------------------------- */

.shine-header .ps-mainmenu--desktop {
  flex: 0 0 auto !important; /* neutralise col-xl / col-auto hors .row */
  width: auto !important;
  padding: 0;
}

.shine-header .ps-mainmenu__desktop {
  display: none !important; /* remplacé par .shine-header__nav */
}

.shine-header .menu-toggle {
  display: flex;
  /* en RANGÉE : le libellé « Menu » se place à côté du pictogramme, pas dessous.
     ⚠ Cette déclaration était dupliquée plus haut dans le fichier ; c'est celle-ci,
     déclarée en dernier, qui gagnait — d'où le libellé qui restait au-dessus. */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 6px;
  margin-left: -6px;
  cursor: pointer;
  background: none;
  border: 0;
}

/* burger = SVG inline fourni (menu.svg, currentColor) */
.shine-header .menu-toggle .shine-burger {
  display: block;
  color: var(--shine-white);
}

/* Le burger reste visible à TOUTES les largeurs : c'est le seul accès au menu depuis
   la refonte « full mobile ». Retirer la règle du thème enfant ne suffisait pas — le
   PARENT masque lui aussi le bouton, à partir de 1200 px :
     @media (min-width: 1200px) .ps-mainmenu--desktop .ps-mainmenu__mobile-toggle
   (theme.css, couche @layer ps-modules). Une règle non layerée l'emporte sur n'importe
   quelle couche, quelle que soit la spécificité : pas besoin d'!important. */
.shine-header .ps-mainmenu__mobile-toggle {
  display: flex;
}

/* --------------------------------------------------------------------------
   Logo + wordmark
   -------------------------------------------------------------------------- */

.shine-header__h1 {
  font-size: unset;
  line-height: 1;
}

.shine-header__brand {
  display: flex;
  flex: 0 0 auto;
  gap: 11px;
  align-items: center;
}

.shine-header__logo {
  display: block;
  flex: none;
  width: auto;
  /* 31px (BAT, emblème seul) → 20px : le SVG porte tout le lettrage (110×19 naturel) */
  height: 20px;
}

/* Ethnocentric indisponible dans le thème (licence Typodermic à valider) : fallback
   Anek 600 + letter-spacing .42em, comme le drawer mobile du BAT lui-même (spec §3 opt. 3) */
.shine-header__wordmark {
  padding-left: 0.42em; /* compense le letter-spacing du dernier caractère */
  font-family: "Anek", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.42em;
}

/* --------------------------------------------------------------------------
   La nav horizontale et ses mega-menus ont été supprimés le 06/08/2026 :
   le menu est un tiroir unique à toutes les largeurs. ~260 lignes retirées
   (.shine-header__nav, .shine-nav__*, .shine-drop__*).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Pictos actions (langue / recherche / compte / panier) + badge panier
   -------------------------------------------------------------------------- */

.shine-header__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.shine-header .header-block__action-btn {
  /* 🔴 Marge intérieure DROITE à zéro, à toutes les largeurs — c'est ce qui aligne le
     badge du panier entre mobile et desktop.
     Le bouton porte la classe utilitaire pe-md-0 : un padding-right nul qui ne
     s'applique qu'AU-DESSUS de 768 px, et qui gagne même contre cette règle-ci
     (declaration importante en couche > declaration importante hors couche). En
     dessous du seuil, les 8 px revenaient — et comme la propriete right d'un element
     absolu se mesure sur la boite de REMPLISSAGE, le badge se decalait d'autant.
     L'espacement entre pictogrammes est assure par le gap de la barre. */
  padding: 8px 0 8px 8px !important; /* écrase le padding md du parent */
  color: var(--shine-white);
  background: none;
  border: 0;
}

.shine-header .header-block__action-btn:hover,
.shine-header .header-block__action-btn:focus-visible {
  color: var(--shine-race);
}

/* icône seule, comme le BAT (les libellés « Connexion » / « Panier » sont masqués) */
.shine-header .header-block__title {
  display: none !important;
}

/* neutralise la mise en couleur primaire du panier actif (parent) */
.shine-header .header-block--active .header-block__icon {
  color: inherit;
}

/* Badge : pastille rouge permanente (le BAT affiche aussi « 0 »), accrochée au COIN
   haut-droit de l'icône. Repère : le bouton fait 36 px (padding 8 + icône 20), donc une
   pastille de 17 px posée à 1px/1px couvrait x 18→35 et y 1→18, c'est-à-dire la moitié
   droite et tout le haut du picto — dont les deux anses du panier, ce qui donnait
   l'impression d'une pastille centrée. On la sort de 2 px du bouton et on l'entoure d'un
   liseré de la couleur de la barre pour qu'elle se détache des traits fins du picto. */
.shine-header .header-block__badge {
  position: absolute !important;
  top: -2px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--shine-white) !important;
  background: var(--shine-race) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgb(var(--shine-ink-rgb) / 0.98);
}

/* wrappers module : pas de padding de colonne dans la barre flex */
.shine-header #_desktop_ps_shoppingcart,
.shine-header #_desktop_ps_customersignin,
.shine-header #_desktop_ps_languageselector,
.shine-header__bar > #_mobile_ps_customersignin,
.shine-header__bar > #_mobile_ps_shoppingcart,
.shine-header .ps-searchbar--mobile {
  padding: 0;
}

/* Sélecteur de langue (absent du BAT, requis : 2 langues actives).
   Fermé = code ISO « FR » en Anek 400 ; liste déroulante = nom complet en Anek 300.
   Le <select> porte tout le comportement mais afficherait le libellé de l'option
   sélectionnée : on le rend transparent et on le superpose au texte ISO. */
.shine-header .ps-languageselector {
  position: relative;
  display: flex;
  gap: 3px;
  align-items: center;
  color: var(--shine-white);
}

/* texte et chevron sont decoratifs : les clics doivent traverser jusqu'au select */
.shine-header .ps-languageselector__current,
.shine-header .ps-languageselector .shine-carret {
  pointer-events: none;
}

.shine-header .ps-languageselector__current {
  padding: 4px 6px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shine-header .js-language-selector {
  position: absolute;
  inset: 0;
  width: 100%; /* écrase le width:100% de .form-select, ici volontaire */
  height: 100%;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  opacity: 0; /* le popup natif s'ouvre quand même, aligné sur la boîte */
  appearance: none;
}

/* Les navigateurs qui stylent le popup natif (Chrome/Firefox sous Linux et Windows)
   reprennent ces règles ; macOS et certains mobiles imposent la police système. */
.shine-header .js-language-selector,
.shine-header .js-language-selector option {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--shine-ink);
}

/* --------------------------------------------------------------------------
   Recherche : OVERLAY plein écran (BAT V3) — la loupe de la barre ouvre
   l'offcanvas-top #searchCanvas restylé en panneau papier avec champ central.
   (contrat .js-search-* du parent inchangé ; le widget vit DANS l'overlay)
   -------------------------------------------------------------------------- */

.shine-header .ps-searchbar--toggle {
  padding: 0;
}

.shine-search {
  --bs-offcanvas-height: auto;

  max-height: 88vh;
  background: var(--shine-paper); /* --paper BAT */
  box-shadow: 0 30px 80px rgb(var(--shine-black-rgb) / 0.4);
}

.shine-search__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 820px;
  padding: 40px 20px 26px;
  margin: 0 auto;
}

.shine-search__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--shine-ink);
  cursor: pointer;
  background: var(--shine-white);
  border: 1.5px solid var(--shine-line);
  border-radius: 50%;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.shine-search__close:hover {
  /* Vert de charte au TEXTE sur fond clair = 1,15:1. Il reste en bordure, où il
     n'a pas de seuil à tenir, et le texte prend la couleur lisible.
     (Balayage de contraste du 02/09/2026, issu de la revue croisée Codex.) */
  color: var(--shine-dark);
  border-color: var(--shine-race);
}

.shine-search .ps-searchbar {
  min-width: 0;
  margin-block: 0;
}

.shine-search .ps-searchbar__form {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 16px;
  background: var(--shine-white);
  border: 2px solid var(--shine-ink);
  border-radius: 12px;
}

.shine-search .ps-searchbar__magnifier {
  position: static;
  flex: none;
  color: var(--shine-muted);
  transform: none;
}

.shine-search .ps-searchbar__input {
  flex: 1;
  min-width: 0;
  padding: 15px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--shine-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.shine-search .ps-searchbar__input:focus {
  outline: none;
  box-shadow: none;
}

.shine-search .ps-searchbar__clear {
  position: static;
  flex: none;
  color: var(--shine-ink);
  transform: none;
}

/* résultats AJAX (template a/img/p du parent) — lignes BAT V3 */
.shine-search .ps-searchbar__dropdown {
  max-height: 56vh;
  margin-top: 12px;
  overflow-y: auto;
}

.shine-search .ps-searchbar__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shine-search .ps-searchbar__result-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  color: var(--shine-ink);
  text-decoration: none;
  background: var(--shine-white);
  border-radius: 12px;
  transition: background 0.15s ease;
}

.shine-search .ps-searchbar__result-link:hover {
  background: var(--shine-paper-2);
}

.shine-search .ps-searchbar__result-image {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--shine-paper);
  border-radius: 9px;
}

.shine-search .ps-searchbar__result-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Drawer panier (BAT V3) — offcanvas droit #cartDrawer
   -------------------------------------------------------------------------- */

.shine-cart {
  --bs-offcanvas-width: min(94vw, 420px);

  font-family: "Anek", system-ui, sans-serif;
  font-weight: 400;
  background: var(--shine-white);
  box-shadow: -20px 0 50px rgb(var(--shine-black-rgb) / 0.3);
}

.shine-cart__refresh {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shine-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--shine-line);
}

.shine-cart__title {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

.shine-cart__close {
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: var(--shine-ink);
  cursor: pointer;
  background: var(--shine-white);
  border: 0;
  border-radius: 50%;
}

.shine-cart__close:hover {
  background: rgb(var(--shine-ink-rgb) / 0.06);
}

.shine-cart__ship {
  padding: 12px 22px;
  border-bottom: 1px solid var(--shine-line);
}

.shine-cart__ship-msg {
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--shine-ink-6);
}

.shine-cart__ship-bar {
  height: 6px;
  overflow: hidden;
  background: rgb(var(--shine-ink-rgb) / 0.08);
  border-radius: 4px;
}

.shine-cart__ship-bar span {
  display: block;
  height: 100%;
  background: var(--shine-ink);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.shine-cart__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-size: 14px;
  color: var(--shine-muted);
  text-align: center;
}

.shine-cart .shine-cart__empty-cta {
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--shine-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--shine-ink);
  border-radius: 11px;
}

.shine-cart__lines {
  flex: 1;
  padding: 8px 22px;
  overflow-y: auto;
}

.shine-cart__line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--shine-line);
}

/* Contour léger demandé le 18/08/2026. Le fond sombre est remplacé par du blanc :
   les visuels produit sont détourés sur fond clair, le dégradé les cernait d'un halo.
   ⚠ `background-clip: padding-box` : sans lui, le fond déborde SOUS la bordure et
   ressort en liseré aux angles arrondis — c'est une partie de l'effet « crénelé ». */
.shine-cart__line-img {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--shine-white);
  background-clip: padding-box;
  border: 1px solid var(--shine-line);
  border-radius: 10px;
}

.shine-cart__line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shine-cart__line-body {
  flex: 1;
  min-width: 0;
  padding-right: 26px; /* réserve la place de la corbeille : le nom ne passe plus dessous */
}

.shine-cart .shine-cart__line-name {
  display: block;
  overflow: hidden;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--shine-ink);
  text-transform: uppercase;
  text-overflow: ellipsis; /* nom sur une seule ligne, tronqué par … */
  white-space: nowrap;
}

.shine-cart__line-attr {
  font-size: 11.5px;
  color: var(--shine-muted);
}

.shine-cart__line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.shine-cart__qty {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--shine-line);
  border-radius: 9px;
}

.shine-cart .shine-cart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: var(--shine-ink);
  text-decoration: none;
}

.shine-cart .shine-cart__qty-btn:hover {
  background: rgb(var(--shine-ink-rgb) / 0.05);
}

.shine-cart__qty-val {
  width: 26px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* Prix du tiroir panier : noir. En vert clair sur fond blanc ils tombaient à
   1,15:1 — c'est le montant, il doit se lire d'un coup d'œil. */
.shine-cart__line-price {
  font-family: "Saira", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--shine-dark);
}

.shine-cart__foot {
  padding: 18px 22px;
  border-top: 1px solid var(--shine-line);
}

.shine-cart__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.shine-cart__total-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--shine-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shine-cart__total {
  font-family: "Saira", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
}

/* « Commander » est un bouton primaire : mêmes couleurs que .btn-primary. */
.shine-header .shine-cart .shine-cart__checkout {
  display: block;
  padding: 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--shine-dark);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--shine-race);
  border-radius: 12px;
}

/* ⚠ Préfixé par `.shine-header` (0,4,0) : sans lui, la règle générale des liens du
   header — `.shine-header .shine-cart a:not(...)`, soit (0,3,1) — repeignait le texte
   en noir et le bouton survolé devenait un rectangle noir illisible. */
.shine-header .shine-cart .shine-cart__checkout:hover,
.shine-header .shine-cart .shine-cart__checkout:focus-visible {
  color: var(--shine-race);
  background: var(--shine-dark);
}

.shine-cart__continue {
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--shine-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

/* Le drawer vit dans .shine-header ; ses liens suivent la règle générale (noir).
   ⚠ L'exclusion de `.shine-cart__checkout` a été retirée le 13/08/2026 : elle datait
   du bouton rouge à texte blanc, et c'est précisément elle qui laissait « COMMANDER »
   en blanc sur le vert clair. */
.shine-header .shine-cart a:not(.shine-cart__empty-cta) {
  color: var(--shine-dark);
}

.shine-cart__line {
  position: relative; /* référent de la croix de suppression */
}

/* corbeille de suppression (sans cercle) */
.shine-header .shine-cart a.shine-cart__line-remove {
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--shine-ink);
}

/* Survol de la corbeille : gris. Le vert de marque disait « action valorisée »
   sur un geste de suppression — contresens (13/08/2026). */
.shine-header .shine-cart a.shine-cart__line-remove:hover {
  color: var(--shine-gray);
}

/* --------------------------------------------------------------------------
   Loader réutilisable : ajouter la classe .shine-busy à n'importe quel
   conteneur -> voile blanc + refresh SVG qui tourne (retirer la classe à la fin)
   -------------------------------------------------------------------------- */

.shine-busy {
  position: relative;
  pointer-events: none;
}

.shine-busy::before {
  position: absolute;
  inset: 0;
  z-index: 20;
  content: "";
  background: rgb(var(--shine-white-rgb) / 0.6);
}

.shine-busy::after {
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
  z-index: 21;
  width: 28px;
  height: 28px;
  content: "";
  /* ⚠ SEULE couleur encore en dur du thème : on ne peut pas injecter une variable CSS
     dans un data-URI. Si --shine-ink change, mettre %230b0b0c à jour ici aussi. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: shine-spin 0.8s linear infinite;
}

@keyframes shine-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shine-busy::after {
    animation-duration: 2s;
  }
}

/* --------------------------------------------------------------------------
   Menu compte : ouverture au survol (BAT V3) en plus du clic Bootstrap
   -------------------------------------------------------------------------- */

/* positionnement CSS pur (data-bs-display="static", pas de Popper) :
   ancré à droite du bouton compte pour ne jamais sortir de l'écran */
.shine-header .ps-customersignin .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 0;
}

@media (min-width: 921px) {
  .shine-header .ps-customersignin .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Menu mobile (offcanvas #mobileMenu du parent) — thème sombre BAT
   -------------------------------------------------------------------------- */

#mobileMenu {
  --bs-offcanvas-bg: var(--shine-ink);
  --bs-offcanvas-color: var(--shine-white);
  /* Une colonne par défaut ; le tiroir s'élargit quand un sous-panneau s'ouvre. */
  --bs-offcanvas-width: min(94vw, 412px);

  display: flex;
  flex-direction: column;
  height: 100%; /* pleine hauteur : c'est ce qui plaque le pied en bas */
  font-family: "Anek", system-ui, sans-serif;
  font-weight: 400;
}

/* Voile de fond : flou des éléments de la page sous le menu.
   ⚠ Le voile de Bootstrap est un élément générique, partagé avec le panier et la
   recherche : le flou s'applique donc aux trois. C'est cohérent, et il n'existe pas
   de sélecteur qui distinguerait le voile d'un offcanvas donné. */
.offcanvas-backdrop.show,
.offcanvas-backdrop.fade.show {
  /* 🔴 `opacity` sur l'élément ANNULE l'effet visible de `backdrop-filter` : le
     navigateur peint le calque (fond + arrière-plan flouté) puis le compose avec cette
     opacité — le flou est dilué jusqu'à devenir invisible. C'est pour cela que le voile
     s'assombrissait sans jamais flouter.
     La transparence doit donc vivre dans la COULEUR, l'élément restant à opacity: 1.
     Bootstrap fait l'inverse (`.fade` 0 → `.show` .5) : on reprend la main sur les deux. */
  background-color: rgb(var(--shine-ink-rgb) / 0.6);
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- En-tête du tiroir : retour | marque | fermeture ---- */

#mobileMenu .shine-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 10px;
}

.shine-drawer__brand {
  margin-right: auto; /* logo à gauche, croix repoussée à droite */
  display: inline-flex;
  align-items: center;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--shine-white);
  text-decoration: none;
}

.shine-drawer__logo {
  display: block;
  width: auto;
  height: 24px;
}

/* Bouton « Retour » — déplacé par header.js dans le panneau ouvert, juste au-dessus de
   son titre. Même emplacement en mobile et en desktop, et un en-tête qui ne bouge plus.
   Sa transition est neutralisée : elle animait son ancien trajet vers l'en-tête. */
#mobileMenu .ps-mainmenu__back-button {
  transition: none;
}

#mobileMenu .menu .ps-mainmenu__back-button {
  margin-bottom: 6px;
}

/* Quand il n'est PAS dans un panneau, le bouton attend dans l'en-tête, masqué. Sans
   cette règle son conteneur vide occupait quand même une cellule de la grille flex :
   le logo se décalait de 12 px — la gouttière — à chaque ouverture de sous-panneau. */
#mobileMenu .shine-drawer__header .ps-mainmenu__back-button {
  display: none;
}

#mobileMenu .js-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--shine-white-rgb) / 0.7);
  transition: none;
}

#mobileMenu .js-back-button:hover,
#mobileMenu .js-back-button:focus-visible {
  color: var(--shine-race);
}

#mobileMenu .btn-close {
  order: 9;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: rgb(var(--shine-white-rgb) / 0.1);
  border-radius: 50%;
  opacity: 1;
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Pilule de recherche ---- */

.shine-drawer__search {
  padding: 6px 24px 10px;
}

.shine-drawer__search-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--shine-white-rgb) / 0.75);
  text-align: left;
  background: rgb(var(--shine-white-rgb) / 0.1);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.shine-drawer__search-btn:hover,
.shine-drawer__search-btn:focus-visible {
  color: var(--shine-white);
  background: rgb(var(--shine-white-rgb) / 0.18);
}

/* ---- Zone des panneaux : prend la hauteur restante et défile seule ---- */

#mobileMenu .shine-drawer__panels {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
}

#mobileMenu .menu {
  max-width: none; /* le module borne à 25rem */
  padding: 0 24px;
}

#mobileMenu .menu__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Titre de panneau — police d'affichage de la charte. */
#mobileMenu .menu__title {
  padding: 4px 0 14px;
  margin: 0;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--shine-white);
}

#mobileMenu .menu__list > li {
  position: relative; /* ancre le bouton d'ouverture, qui couvre toute la ligne */
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--shine-line-light);
}

/* Niveau 1 : rayons, en capitales. Niveau 2 : libellés courants. */
#mobileMenu .menu__link {
  display: block;
  flex: 1 1 auto;
  padding: 15px 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shine-white);
}

#mobileMenu .menu__link[data-depth="0"] ~ * {
  color: var(--shine-white);
}

#mobileMenu .menu:not([data-depth="0"]) .menu__link {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--shine-white-rgb) / 0.88);
}

/* Le survol rouge doit valoir dans les sous-panneaux AUSSI. La règle générique
   `.menu__link:hover` perdait : celle ci-dessus, plus spécifique, la neutralisait. */
#mobileMenu .menu:not([data-depth="0"]) .menu__link:hover,
#mobileMenu .menu:not([data-depth="0"]) .menu__link:focus-visible {
  color: var(--shine-race);
}

#mobileMenu .menu__link:hover,
#mobileMenu .menu__link:focus-visible {
  color: var(--shine-race);
}

/* Une entrée qui ouvre un sous-panneau ne doit PAS naviguer : le bouton du module
   est étiré sur toute la ligne et passe donc devant le lien. Le <a href> reste dans
   le document — indexable par les moteurs et atteignable au clavier — mais le clic
   à la souris ouvre le panneau. Aucun JavaScript. */
#mobileMenu .menu--childrens .menu__toggle-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0;
  color: rgb(var(--shine-white-rgb) / 0.6);
  background: none;
  border: 0;
}

#mobileMenu .menu--childrens:hover .menu__toggle-child {
  color: var(--shine-race);
}

/* Sens de la flèche. Le module ne marque pas la ligne ouverte : c'est header.js
   qui pose `.is-open`, faute de quoi aucun sélecteur CSS ne pourrait la désigner. */
#mobileMenu .menu__toggle-child .material-icons {
  transition: transform 0.2s ease;
}

#mobileMenu .menu--childrens.is-open .menu__toggle-child {
  color: var(--shine-race);
}

#mobileMenu .menu--childrens.is-open .menu__toggle-child .material-icons {
  transform: rotate(180deg);
}

/* ---- « Tout voir — Rayon », en TÊTE de sous-panneau ----
   Sur le modèle des « Voir la sélection » de shine-group.fr : une flèche, le libellé,
   et un filet sous l'ensemble. Plus un bouton encadré : c'est un lien de navigation,
   pas une action — l'encadrer le mettait au même niveau visuel que le CTA du pied. */

/* ⚠ Le filet appartient au <li>, PAS au <a>. Les <li> du menu sont des conteneurs
   flex : un <a> à l'intérieur se réduit à la largeur de son contenu, et sa bordure
   s'arrêtait donc à la fin du libellé — alors que tous les autres séparateurs du
   panneau courent sur toute la largeur du bloc. On rehausse celui du <li> plutôt
   que d'en ajouter un second. */
/* ⚠ Le séparateur générique est posé par `#mobileMenu .menu__list > li` : il faut
   la même portée pour le rehausser, sinon une classe seule perd contre l'id. */
#mobileMenu .menu__list > li.menu__seeall-item {
  margin: 2px 0 6px;
  border-bottom-color: rgb(var(--shine-white-rgb) / 0.28);
  transition: border-color 0.15s ease;
}

#mobileMenu .menu__list > li.menu__seeall-item:hover,
#mobileMenu .menu__list > li.menu__seeall-item:focus-within {
  border-bottom-color: var(--shine-race);
}

.menu__seeall {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 10px 0 12px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--shine-white);
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}

.menu__seeall-arrow {
  flex: 0 0 auto;
}

.menu__seeall-label {
  min-width: 0;
}

.menu__seeall:hover,
.menu__seeall:focus-visible {
  gap: 16px;
  color: var(--shine-race);
}

@media (prefers-reduced-motion: reduce) {
  .menu__seeall {
    transition: color 0.15s ease;
  }

  .menu__seeall:hover,
  .menu__seeall:focus-visible {
    gap: 12px;
  }
}

/* ---- Pied : appel à l'action + langue, plaqués en bas ---- */

#mobileMenu .shine-drawer__footer {
  flex: 0 0 auto;
  display: block;
  padding: 18px 24px 26px;
  border-top: 1px solid var(--shine-line-light);
}

.shine-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shine-dark);
  background: var(--shine-race);
  border: 0;
  border-radius: 10px;
  text-decoration: none;
}

.shine-drawer__cta:hover,
.shine-drawer__cta:focus-visible {
  color: var(--shine-dark);
  background: var(--shine-race-d, var(--shine-race));
}

.shine-drawer__lang {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shine-drawer__lang-label {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--shine-white-rgb) / 0.5);
}

.shine-lang {
  display: flex;
  gap: 8px;
}

.shine-lang__pill {
  padding: 7px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--shine-white);
  background: rgb(var(--shine-white-rgb) / 0.12);
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.shine-lang__pill:hover {
  color: var(--shine-white);
  background: rgb(var(--shine-white-rgb) / 0.22);
}

.shine-lang__pill--active {
  background: var(--shine-race);
}

/* ---- Sous-panneaux ----------------------------------------------------------
   Sous 901 px, le panneau enfant RECOUVRE son parent (comportement du module) et le
   bouton « Retour » sert de sortie. Au-delà, les deux sont côte à côte : le panneau
   parent reste lisible et cliquable, comme sur la maquette.
   Aucun `!important` n'est nécessaire — le CSS du thème enfant n'utilise pas @layer,
   il l'emporte donc sur le @layer ps-components du parent.
   --------------------------------------------------------------------------- */

@media (min-width: 901px) {
  /* `.menu--parent` n'est posée par mobile-menu.ts QUE lorsqu'un enfant prend la
     main : c'est le signal d'élargissement, sans JavaScript. */
  /* Le tiroir FERMÉ fait exactement la largeur de la colonne parent ouverte : sans
     cela, la zone de texte passait de 364 à 358 px à l'ouverture et TOUS les chevrons
     glissaient de quelques pixels. C'est le déplacement visible sur la vidéo. */
  #mobileMenu {
    --bs-offcanvas-width: min(94vw, 406px);
  }

  #mobileMenu:has(.menu--parent) {
    --bs-offcanvas-width: min(94vw, 812px);
  }

  /* Largeur imposée dans les DEUX états, pas seulement quand un enfant est ouvert. */
  #mobileMenu .menu[data-depth="0"] {
    width: min(94vw, 406px);
  }

  /* La colonne enfant étant absolue, le conteneur n'a plus à être une rangée flex :
     il ne porte plus que la colonne parent. */
  #mobileMenu:has(.menu--parent) .shine-drawer__panels {
    display: block;
  }

  /* Colonne 1 — le panneau parent, que le module masque (display:none, left:-100%).
     Il redevient pleinement visible ET cliquable. */
  #mobileMenu .menu--parent[data-depth="0"] {
    position: relative;
    left: 0;
    display: block;
    /* LA cause de la « colonne noire » : le thème parent applique `opacity: 0` sur
       .menu--parent, en plus de `display: none`. Rétablir le display ne suffisait donc
       pas — le panneau occupait sa place, cliquable, mais totalement transparent.
       ⚠ Ne PAS y ajouter `visibility: visible` : c'est Bootstrap qui pose
       `visibility: hidden` sur l'offcanvas FERMÉ, et le forcer rendrait cette colonne
       focalisable au clavier alors qu'elle est hors écran. */
    opacity: 1;
    flex: 0 0 auto;
    width: min(94vw, 406px);
  }

  /* Colonne 2 — le panneau enfant, en position ABSOLUE sur toute la hauteur du tiroir.
     C'est ce qui le fait démarrer tout en haut, au niveau du logo, et non sous la
     barre de recherche : dans le flux, il aurait commencé là où s'arrête l'en-tête.
     ⚠ Ne PAS cibler [data-depth="1"] : le module passe la profondeur du NŒUD, donc 2
     pour un rayon de niveau 2 (ps_mainmenu.tpl : depth=$child.children[0].depth). */
  #mobileMenu .menu--current:not([data-depth="0"]) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: calc(100% - min(94vw, 406px));
    padding: 22px 24px 24px;
    overflow-y: auto;
    /* Dégradé sombre plutôt qu'un aplat gris, comme la maquette. */
    background:
      linear-gradient(160deg, rgb(var(--shine-white-rgb) / 0.015) 0%, rgb(var(--shine-white-rgb) / 0.085) 100%);
    border-left: 1px solid var(--shine-line-light);
  }

  /* Plus rien à positionner ici : header.js déplace le bouton « Retour » DANS le
     panneau ouvert (voir plus bas). L'en-tête ne change donc plus jamais de contenu,
     et le logo ne se décale plus à l'ouverture d'un sous-panneau. */

  /* Le glissement « depuis la droite » a du sens quand le panneau RECOUVRE son
     parent ; côte à côte, il n'y a rien à faire glisser. */
  #mobileMenu:has(.menu--parent) .menu--fromRight {
    animation: none;
    transform: none;
  }

  /* En-tête, recherche et pied restent alignés sur la première colonne. */
  #mobileMenu :is(.shine-drawer__header, .shine-drawer__search, .shine-drawer__footer) {
    width: min(94vw, 406px);
  }

}