/*
 * Source unique des couleurs de marque (Architecture AD-3).
 * `assets/css/custom.css` est le chemin conventionnel que le coeur PrestaShop
 * charge automatiquement pour tout thème (FrontController::setMedia(),
 * priorité 1000 -- après theme-main, donc ces valeurs gagnent) : aucune
 * surcharge de gabarit ni entrée theme.yml nécessaire pour que ce fichier
 * se charge.
 * Surcharge les variables CSS que Hummingbird/Bootstrap 5 exposent sur :root --
 * pas de variable Sass ($primary, etc.) : le thème parent est déjà compilé,
 * on ne peut agir qu'au niveau des custom properties CSS qu'il émet.
 * Valeurs dérivées (text-emphasis/bg-subtle/border-subtle) calculées avec les
 * mêmes formules que Bootstrap 5.3 (shift-color: mix avec le noir/blanc) --
 * si la couleur de base change, recalculer ces trois variantes par couleur.
 *
 * Pour un nouveau client : ne modifier QUE ce fichier (couleurs) + le logo
 * via la configuration back-office PrestaShop (voir AD-2). Aucun autre
 * fichier ne doit déclarer de nouvelle variable de marque ni une valeur
 * hexadécimale brute.
 *
 * IMPORTANT -- limite connue de cette approche (trouvé en revue, pas silencieux) :
 * les variables --bs-primary/--bs-primary-rgb sur :root ne suffisent PAS à
 * recolorer tous les composants Bootstrap 5. Le mixin button-variant() de
 * Bootstrap fige --bs-btn-bg, --bs-btn-hover-bg, etc. en valeurs statiques AU
 * MOMENT DE LA COMPILATION d'Hummingbird (pas une référence live à
 * var(--bs-primary)) -- sans surcharge explicite, les boutons resteraient
 * bleus (couleur Hummingbird d'origine) malgré ce fichier. D'où le bloc
 * .btn-primary ci-dessous, calculé avec les mêmes formules Bootstrap 5.3
 * (button-variant: shade-color 15/20/25%, cf. $btn-*-shade-amount).
 * Composants NON couverts par ce fichier pour l'instant, qui suivent le même
 * risque et devront être surchargés explicitement s'ils s'avèrent visibles à
 * l'usage : .badge.bg-primary (probablement ok, lit --bs-primary directement),
 * .form-control:focus (ring de focus), .alert-primary.
 * .btn-outline-primary : couvert (Story 2.1, voir plus bas) -- entièrement via
 * var(), pas de valeur figée (color-contrast reste blanc/primaire quelle que
 * soit la teinte, donc résiste à un changement de couleur de marque).
 * .page-link.active : couvert (Story 2.5, voir plus bas).
 * .form-check-input:checked : couvert (revue filtres catégorie, voir plus
 * bas) -- même famille de risque que .page-link.active ($component-active-bg
 * figé en compilé). .nav-pills .nav-link.active, .dropdown-item.active,
 * .list-group-item.active restent le même risque, pas encore rencontrés à
 * l'usage -- voir deferred-work.md.
 * Liens (--bs-link-color/--bs-link-hover-color) : couverts ci-dessous (Story 1.4)
 * -- même risque trouvé sur le mega-menu Hummingbird (.ps-mainmenu__tree-link,
 * .submenu__left-item utilisent var(--bs-link-color)/var(--bs-link-hover-color),
 * qui sont AUSSI figées à la compilation, pas dérivées de --bs-primary).
 */

/* Polices de marque -- fidèles à la maquette de référence (tailwind.config.ts :
 * sans = Barlow, display = Hemi Head). Barlow via Google Fonts (poids
 * complets, police libre) ; Hemi Head est une police commerciale fournie
 * par le client dans sa propre maquette (public/fonts/) -- réutilisée telle
 * quelle, un seul style (700 italique) livré, celui utilisé partout dans la
 * maquette pour les titres. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'Hemi Head';
  src: url('../fonts/hemi-head-bd-it.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Garde-fou anti-scroll horizontal (mobile) -- un des nombreux blocs
 * sur-mesure de l'accueil (carrousel avis/nouveautés, méga-menu, etc.)
 * dépasse ponctuellement la largeur de l'écran ; plutôt que de traquer
 * l'élément exact à chaque nouvel ajout, on bloque au niveau racine. Sans
 * effet sur les défilements horizontaux voulus (ils gèrent déjà leur
 * propre overflow-x:auto en interne). */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

:root {
  --bs-body-font-family: 'Barlow', Calibri, system-ui, sans-serif;
  --bs-font-display: 'Hemi Head', 'Barlow Condensed', system-ui, sans-serif;

  /* Primaire (rouge WDA) */
  --bs-primary: #eb3f33;
  --bs-primary-rgb: 235, 63, 51;
  --bs-primary-text-emphasis: #5e1914;
  --bs-primary-bg-subtle: #fbd9d6;
  --bs-primary-border-subtle: #f7b2ad;
  /* Partagée entre .btn-primary et les autres surcharges (Story 1.3) pour éviter
   * de dupliquer la même teinte calculée à plusieurs endroits. */
  --custom-primary-hover: #c8362b;

  /* Secondaire (charcoal WDA) */
  --bs-secondary: #1f1f1f;
  --bs-secondary-rgb: 31, 31, 31;
  --bs-secondary-text-emphasis: #0c0c0c;
  --bs-secondary-bg-subtle: #d2d2d2;
  --bs-secondary-border-subtle: #a5a5a5;

  /* Liens (Story 1.4) -- --bs-link-color n'est PAS une référence live à
   * --bs-primary (même limite que les boutons, cf. note ci-dessus), mais comme
   * c'est une simple variable :root (pas une variable de composant comme les
   * boutons), on peut la référencer directement plutôt que dupliquer une valeur.
   * Affecte tout le site, y compris le mega-menu (.ps-mainmenu__tree-link,
   * .submenu__left-item -- vérifié dans le SCSS source d'Hummingbird : leur
   * `:focus` utilise déjà `outline: ... solid var(--bs-link-color)`, donc le
   * contour de focus au clavier suit lui aussi automatiquement cette variable,
   * aucune surcharge supplémentaire nécessaire pour ça).
   * Hover = shift-color(primary, 20%) -- calculé à partir de --bs-primary:
   * #eb3f33 ci-dessus. Formule Bootstrap par défaut ($link-shade-percentage),
   * différente du 15% utilisé pour les boutons -- valeurs volontairement
   * différentes, pas une incohérence. Pas de référence CSS live possible ici
   * (mix() n'existe pas nativement en CSS, seulement en Sass) : si --bs-primary
   * change pour un nouveau client, recalculer ce hover à la main --
   * mix(noir, nouveau primary, 20%), ou : R/G/B * 0.8 (puisque mix avec le noir
   * à ce poids revient à multiplier chaque canal par (1 - 0.20)). */
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #bc3229;
  --bs-link-hover-color-rgb: 188, 50, 41;
}

/*
 * ATTENTION -- contraste WCAG (vérifié en revue, pas silencieux) : texte
 * blanc sur --bs-primary (#eb3f33) = ratio 3.97:1. Ça passe le seuil AA pour
 * texte large/gras (>=3:1) mais PAS le seuil AA texte normal (>=4.5:1).
 * Mitigation appliquée ici : texte en gras sur fond primaire (voir .btn-primary
 * et .custom-header-top__link--cta). Si du texte NORMAL (non gras) blanc sur fond
 * primaire apparaît ailleurs dans le thème, il faudra soit le mettre en gras,
 * soit assombrir la couleur primaire -- décision de marque, pas seulement
 * technique, donc non prise unilatéralement ici.
 */

/* Boutons pleins -- le composant le plus visible qui NE suit PAS --bs-primary
 * automatiquement (voir note ci-dessus). Texte blanc car #eb3f33 est assez
 * sombre/saturé pour offrir un meilleur contraste en blanc (color-contrast). */
.btn-primary {
  font-weight: 600; /* mitigation contraste, voir note WCAG ci-dessus */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--custom-primary-hover);
  --bs-btn-hover-border-color: #bc3229;
  --bs-btn-focus-shadow-rgb: 238, 92, 82;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #bc3229;
  --bs-btn-active-border-color: #b02f26;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1a1a1a;
  --bs-btn-hover-border-color: #191919;
  --bs-btn-focus-shadow-rgb: 65, 65, 65;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #191919;
  --bs-btn-active-border-color: #171717;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Story 2.1 -- bouton "voir détails" (fallback carte produit sans ajout panier
 * rapide, product-miniature__details dans product.tpl). Comme .btn-primary et
 * .btn-secondary ci-dessus : figé au bleu d'origine d'Hummingbird à la
 * compilation sans cette surcharge (button-outline-variant() de Bootstrap,
 * pas un no-op). Formule : couleur pleine au survol/actif (inversion),
 * transparent au repos -- ici tout est en var() plutôt qu'en valeur figée
 * car color-contrast() donne blanc dans les deux cas (primaire ou son
 * inverse), donc ça résiste tel quel à un futur changement de couleur de
 * marque, contrairement aux blocs .btn-primary/.btn-secondary ci-dessus. */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* --------------------------------------------------------------------------
 * Au-delà des tokens de couleur : petites surcharges de composants propres au
 * thème (pas de fichier séparé -- ce point d'auto-chargement est le seul
 * garanti sans wiring supplémentaire, cf. en-tête de fichier). Rester léger
 * ici ; si ça grossit significativement, revoir l'organisation (AD-3).
 * -------------------------------------------------------------------------- */

/* Story 1.3 -- lien du bandeau top-bar (Reprise véhicule). */
/* Bandeau du haut -- fond sombre, fidèle à la maquette (bg-secondary
 * text-secondary-foreground dans Header.tsx). Padding natif (.25rem)
 * beaucoup trop serré comparé à la maquette (py-2.5 = .625rem). */
.header-top {
  background-color: var(--bs-secondary);
  border-bottom: 0;
  padding-block: 0.625rem;
  /* CAUSE RACINE du texte invisible dans ce bandeau (bouton "Accès pro" en
   * particulier) : le thème applique `.header-top a:not(.dropdown-item)
   * { color: var(--header-top-color) }` à TOUS les liens de la barre, mais
   * ne définit JAMAIS --header-top-color (ni son pendant -hover). La var()
   * est donc invalide, la déclaration devient "invalid at computed-value
   * time", et `color` retombe sur la valeur héritée -- le gris sombre du
   * body, illisible sur notre fond noir. On définit ici les deux variables
   * que le thème attend : ça corrige d'un coup tous les liens du bandeau
   * (présents et futurs) sans lutter contre la spécificité de sa règle. */
  --header-top-color: rgba(255, 255, 255, 0.85);
  --header-top-color-hover: #fff;
}
.custom-header-top__link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.custom-header-top__link:hover {
  color: #fff;
}
.custom-header-top__link .material-icons {
  font-size: 1rem;
  color: var(--bs-primary);
}
/* Connexion/Panier (ps_customersignin/ps_shoppingcart, hook displayNav2) --
 * héritaient du rouge --bs-link-color global (Story 1.4) ; sur fond sombre
 * il leur faut du blanc, pas le --bs-secondary (= la couleur du fond lui-même,
 * invisible). */
.header-top__right #_desktop_ps_customersignin a,
.header-top__right #_desktop_ps_shoppingcart .header-block__action-btn {
  color: rgba(255, 255, 255, 0.85);
}
.header-top__right #_desktop_ps_customersignin a:hover,
.header-top__right #_desktop_ps_shoppingcart .header-block__action-btn:hover {
  color: #fff;
}
/* Pastille de quantité du panier -- illisible signalée en revue : la
 * variante desktop native (.header-block__badge, seconde déclaration,
 * l'emporte sur la première au même niveau de spécificité) passe le fond en
 * --bs-tertiary-bg (gris quasi blanc) et le texte en `color: inherit`, qui
 * hérite ici du blanc appliqué juste au-dessus -- texte blanc sur fond
 * quasi blanc. */
.header-top__right .header-block__badge {
  background-color: var(--bs-primary);
  color: #fff;
}
.custom-header-top__link--cta {
  font-weight: 600; /* mitigation contraste, voir note WCAG ci-dessus */
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bs-border-radius, 0.5rem);
}
.custom-header-top__link--cta:hover {
  background-color: var(--custom-primary-hover);
  color: #fff;
}
/* "Accès pro -10%" (btn-outline-primary générique) -- rouge sur fond
 * sombre quasi noir, contraste trop faible pour être lisible (signalé en
 * revue). Contour clair sur ce bandeau sombre plutôt que la variante rouge
 * pensée pour un fond blanc -- se remplit de blanc au survol, texte
 * assombri pour rester lisible. Distinct du CTA plein rouge "Reprise
 * véhicule" à côté, qui garde la priorité visuelle. */
.header-top__right .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.6);
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  font-weight: 600;
  /* `color` explicite (pas seulement --bs-btn-color) : la règle native
   * `.header-top a:not(.dropdown-item)` pose `color` DIRECTEMENT et vit dans
   * un calque @layer postérieur à celui de .btn -- entre deux règles
   * calquées, le calque le plus tardif gagne, donc --bs-btn-color n'aurait
   * aucun effet. Notre déclaration, elle, est hors calque : pour les
   * déclarations normales, le hors-calque a priorité sur TOUS les calques. */
  color: #fff;
}
.header-top__right .btn-outline-primary:hover {
  /* Même raison qu'au-dessus, pour l'état survol (fond blanc -> texte
   * sombre, sinon blanc sur blanc). */
  color: var(--bs-secondary);
}
.custom-header-top__link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Story 2.1 -- ligne véhicule compatible sur la carte produit. Une seule ligne
 * avec troncature plutôt qu'un débordement qui casserait l'alignement des
 * cartes dans la grille (produits avec vs sans donnée renseignée). */
.product-miniature__vehicle {
  overflow: hidden;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, var(--bs-secondary));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carte produit (catalogue + accueil) -- badge garantie, prix HT, bloc
 * stock/livraison, fidèles à la maquette (ProductCard.tsx). Ajoutés via les
 * blocks product_miniature_top/product_price/product_reviews de la carte
 * héritée (voir product.tpl) -- pas une nouvelle structure de carte.
 *
 * Alignement de la grille (trouvé en vérification) : le natif Hummingbird
 * n'impose ni ratio d'image (.product-miniature__image { height:auto }) ni
 * hauteur de titre -- nos vraies photos produit ont des proportions très
 * différentes (carrées 1:1 à 250x190px), et des noms de longueurs
 * variables, ce qui décale tout le contenu sous l'image d'une carte à
 * l'autre dans une même rangée. Le bouton "Ajouter" est déjà correctement
 * épinglé en bas par Hummingbird (.product-miniature__actions{margin-top:
 * auto} sur un parent flex-column) -- seuls le ratio image et la hauteur du
 * titre manquaient pour que tout s'aligne au même niveau. */
/* Bordure + accent rouge au survol -- absents du natif (seule une ombre
 * neutre existe en compilé), fidèle à la maquette (ProductCard.tsx). */
.product-miniature__inner {
  position: relative;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-miniature__inner:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* Prix + bouton "Ajouter" sur la même ligne, fidèle à la maquette --
 * .product-miniature__infos et .product-miniature__actions sont deux
 * blocs SÉPARÉS côté natif (le second suit le premier, empilé). display:
 * contents "aplatit" infos dans bottom pour que tous ses enfants + actions
 * deviennent des cellules de la même grille, positionnables ensemble.
 *
 * RÈGLE À RESPECTER POUR TOUT AJOUT FUTUR (bug vécu en revue) : avec
 * display:contents, CHAQUE enfant de .infos devient un item direct de
 * cette grille -- un enfant sans grid-column explicite (ex: la référence
 * ajoutée sans cette règle) est inséré par l'algorithme d'auto-placement
 * dans la prochaine cellule libre et décale TOUT ce qui suit, y compris le
 * bouton "Ajouter" qui ne tombe plus sur la même ligne que le prix. Tout
 * nouvel enfant de .infos doit être ajouté à la liste "pleine largeur"
 * ci-dessous (ou recevoir sa propre règle de colonne).
 *
 * L'ordre visuel (prix+bouton en dernier, stock avant) diffère de l'ordre
 * DOM natif (product_reviews/stock vient APRÈS product_price) -- `order`
 * pilote l'ordre de placement dans la grille comme en flexbox. .prices et
 * .actions partagent la MÊME valeur d'order (8) : à égalité d'order, la
 * grille les place l'un après l'autre dans la première ligne encore libre
 * pour leur colonne respective, ce qui les fait tomber sur la même ligne --
 * des valeurs différentes (bug vécu) les envoie sur des lignes séparées. */
/* DÉBORDEMENT MOBILE (corrigé en revue) -- la grille produit native passe à
 * 2 colonnes dès 360px de viewport, alors que la maquette reste sur UNE
 * colonne sous 576px (grid-cols-1 sm:grid-cols-2 dans CategoryListing.tsx).
 * À 360px la carte ne mesure que ~156px de large, or la ligne "prix +
 * bouton Ajouter" a un minimum incompressible d'environ 178px (bouton ~108px
 * + prix ~62px + gap 8px) : la carte débordait horizontalement et le bouton
 * était rogné par l'overflow-x:hidden posé sur <body>. On revient donc à une
 * colonne sous 576px, comme la maquette.
 * Sélecteur avec l'id (#js-product-list) pour passer devant la règle native
 * `.products{...}` sans !important. */
@media (max-width: 575.98px) {
  #js-product-list .products {
    grid-template-columns: minmax(0, 1fr);
  }
}

.product-miniature__bottom {
  display: grid !important;
  /* minmax(0, 1fr) et non 1fr : le minimum automatique d'une piste `1fr`
   * est son min-content, ce qui lui permet de POUSSER la carte au-delà de sa
   * largeur. Avec minmax(0, ...) la colonne peut se comprimer, donc plus
   * aucun débordement possible quelle que soit la largeur de la carte. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;
}
.product-miniature__infos {
  display: contents;
}
.product-miniature__title,
.product-miniature__variants,
.product-miniature__vehicle,
.product-miniature__ref,
.product-list-review {
  grid-column: 1 / -1;
}
.product-miniature__title {
  order: 1;
}
.product-miniature__variants {
  order: 2;
}
.product-miniature__vehicle {
  order: 3;
}
.product-miniature__ref {
  order: 4;
}
.product-miniature__stock {
  grid-column: 1 / -1;
  order: 5;
}
.product-list-review {
  order: 6;
}
.product-miniature__divider {
  grid-column: 1 / -1;
  order: 7;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.product-miniature__prices {
  grid-column: 1;
  order: 8;
}
.product-miniature__actions {
  grid-column: 2;
  order: 8;
  margin-top: 0 !important;
}
.product-miniature__add {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-inline: 1rem;
}
.product-miniature__add-text {
  display: inline !important;
}
/* Sélecteur de quantité masqué sur la carte listing (absent de la
 * maquette -- un bouton "Ajouter" simple, la quantité se choisit sur la
 * fiche produit) -- fonctionnalité inchangée, l'ajout se fait toujours
 * avec la quantité par défaut (1). */
.product-miniature__form .quantity-button {
  display: none;
}
.product-miniature__top {
  position: relative;
}
.product-miniature__image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-tertiary-bg, #f5f5f5);
}
.product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}
.product-miniature__title {
  /* .product-miniature__title est un <a> : sans ce color explicite, il
   * hérite de --bs-link-color = var(--bs-primary) (rouge, Story 1.4,
   * appliqué site entier) -- la maquette ne colore QUE la marque
   * (.product-miniature__vehicle-brand ci-dessous), le titre reste noir. */
  color: var(--bs-body-color, #1f1f1f);
  font-family: var(--bs-font-display, inherit);
  font-style: italic;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}
.product-miniature__title:hover {
  color: var(--bs-primary);
}
/* Native "Neuf"/promo (product-flags.tpl, ul.product-flags) masqué sur la
 * carte : absent de la maquette (seul le badge "Garantie" existe), et son
 * positionnement top-left natif entrait en conflit visuel avec le nôtre. */
.product-miniature .product-flags {
  display: none;
}
.custom-product-badge {
  /* .product-miniature__inner (position:relative ci-dessus) est le repère --
   * ce badge est un frère de .product-miniature__top (ajouté après
   * {$smarty.block.parent} dans le bloc 'product_miniature_top', qui inclut
   * déjà la div .top avec sa fermeture), PAS un enfant de .top : sans le
   * position:relative sur .inner, il se positionnait par rapport à un
   * ancêtre bien plus haut (aucun repère intermédiaire) et disparaissait
   * hors de la carte, coupé par overflow:hidden -- d'où le badge invisible
   * signalé en revue. */
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: #16a34a;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}
.custom-product-badge .material-icons {
  font-size: 0.875rem;
}
/* Marque en rouge / modèle en noir (fidèle à la maquette, ProductCard.tsx :
 * text-primary sur la marque uniquement) -- jusqu'ici une seule ligne de
 * texte brute, sans distinction de couleur. */
.product-miniature__vehicle-brand {
  color: var(--bs-primary);
  font-weight: 700;
}
.product-miniature__vehicle-model {
  color: var(--bs-body-color, #1f1f1f);
}
.product-miniature__vehicle-dot {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-color, #6c757d);
  margin-inline: 0.375rem;
  vertical-align: middle;
}
/* Référence constructeur -- absente jusqu'ici, fidèle à la maquette. */
.product-miniature__ref {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}
/* Prix -- pas de var() figée côté Hummingbird ici (juste font-weight:600
 * en compilé) : le rouge/gras/police display sont ajoutés explicitement,
 * fidèles à la maquette (prix = élément le plus visible de la carte). */
.product-miniature__price {
  color: var(--bs-primary);
  font-family: var(--bs-font-display, inherit);
  font-size: 1.25rem;
  font-weight: 700;
}
.product-miniature__price-ttc-label {
  color: var(--bs-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: 0.25rem;
}
.product-miniature__price-ht {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: -0.25rem;
}
.product-miniature__stock {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  margin-block: 0.5rem;
  font-size: 0.8125rem;
}
/* Statut de stock séparé du détail livraison/retrait par une ligne, fidèle
 * à la maquette (ProductCard.tsx : border-b entre les deux groupes) --
 * jusqu'ici tout était empilé sans séparation ni structure interne. */
.product-miniature__stock-status {
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.product-miniature__stock-details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.product-miniature__stock-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #10b981;
  margin-right: 0.375rem;
}
.product-miniature__stock-dot--out {
  background-color: #f59e0b;
}
.product-miniature__stock-label {
  font-weight: 700;
  color: #059669;
}
.product-miniature__stock-label--out {
  color: #b45309;
}
.product-miniature__delivery {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bs-body-color);
}
.product-miniature__delivery .material-icons {
  font-size: 1rem;
  color: var(--bs-primary);
  vertical-align: text-bottom;
}

/* Fiche produit -- ligne véhicule, grille de réassurance, bloc d'aide
 * (fidèle à ProductDetail.tsx, voir templates/catalog/product.tpl). */
.product__vehicle-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.product__vehicle-brand {
  color: var(--bs-primary);
  font-weight: 700;
}
.product__vehicle-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-color, #6c757d);
  flex-shrink: 0;
}
/* Le séparateur qui suit la marque est rouge dans la maquette (bg-primary),
 * les suivants restent gris (bg-muted-foreground). */
.product__vehicle-brand + .product__vehicle-dot {
  background-color: var(--bs-primary);
}
.product__vehicle-ref {
  color: var(--bs-primary);
  font-weight: 600;
}

/* Colonne droite de la fiche produit -- ordre et mise en page de la maquette
 * (ProductDetail.tsx) : titre, ligne véhicule, carte "prix + ajout panier",
 * grille de réassurance, caractéristiques techniques. La grille CSS sert à
 * deux choses :
 *  1. réordonner sans toucher au DOM du parent (`order`), nos deux blocs
 *     arrivant du bloc 'product_customization' donc AVANT .product__actions ;
 *  2. mettre .product__prices et .product__actions sur la MÊME ligne pour
 *     former une seule carte bordée (même technique que la carte catalogue :
 *     valeur d'`order` identique = placement sur la première ligne libre).
 * Grille appliquée à toutes les largeurs (une seule colonne en dessous de lg)
 * afin que prix et bouton restent ADJACENTS partout : en flux normal,
 * .product__description-short s'intercale entre les deux et casserait la
 * jonction des bordures. */
.product__right {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.product__right > * {
  grid-column: 1 / -1;
}
.product__name {
  order: 1;
  margin-bottom: 0.5rem;
}
.product__vehicle-line {
  order: 2;
}
.product__price-wrap {
  order: 3;
}
.product__actions {
  order: 3;
}
/* .product__prices n'est plus l'élément-grille (c'est .product__price-wrap) :
 * il redevient un simple conteneur de texte, sans bordure ni marge. */
.product__prices {
  margin: 0;
  font-size: inherit;
}
/* Montant + "TTC" sur la MÊME ligne (le natif les empile : .product__price et
 * .product__tax-infos sont deux blocs frères), puis le HT en dessous --
 * fidèle à la maquette. */
.product__prices-block {
  display: flex;
  /* flex-direction explicite : le natif impose `column` sur ce conteneur, un
   * simple display:flex laissait donc "TTC" sous le montant. */
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.product__price {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--bs-primary);
  line-height: 1.1;
}
.product__tax-infos {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 0.8125rem;
}
.product__price-ht {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
  margin-top: 0.125rem;
}
/* Boutons de partage natifs (ps_sharebuttons, hook displayProductAdditionalInfo)
 * masqués : ils sont rendus DANS .product__actions, donc à l'intérieur de la
 * carte prix, ce qui la cassait visuellement (bordure interne parasite). Ils
 * font en plus doublon avec notre bouton "Partager" de la colonne gauche, seul
 * prévu par la maquette. */
.product__additional-info {
  display: none;
}
.product__custom-reassurance {
  order: 4;
}
.product__specs {
  order: 5;
}
/* La maquette n'a pas de description courte dans cette colonne -- placée en
 * fin de colonne plutôt que masquée (contenu client réel, on ne le supprime
 * pas), après les caractéristiques techniques. */
.product__description-short {
  order: 6;
}
.product__description-short:not(:empty) {
  margin-bottom: 1.25rem;
}

/* Sélecteur de quantité masqué (demande explicite 2026-08-23) : le client ne
 * vend que des PIÈCES UNIQUES issues de véhicules démontés -- proposer de
 * changer la quantité n'a pas de sens, et la maquette ne le montre pas non
 * plus. Masquage CSS et non suppression du template : l'<input name="qty"
 * value="1"> reste dans le DOM et continue d'être soumis avec le formulaire,
 * donc l'ajout au panier fonctionne à l'identique (quantité 1). */
.product__quantity {
  display: none;
}
/* Bouton d'ajout : hauteur, coins et respiration de la maquette
 * (h-12 rounded-xl px-6), libellé sur une seule ligne. */
.product__add-to-cart .btn {
  min-height: 3rem;
  border-radius: 0.75rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
}

/* Carte "prix + ajout panier" -- une seule boîte bordée visuellement, faite
 * de deux moitiés (bordures jointes) puisque les deux blocs sont des
 * éléments distincts du parent qu'on ne peut pas envelopper. En dessous de
 * lg : empilées, jonction horizontale. */
.product__price-wrap,
.product__actions {
  border: 2px solid rgba(var(--bs-primary-rgb), 0.2);
  padding: 1rem;
}
.product__price-wrap {
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product__actions {
  border-top: 0;
  border-radius: 0 0 0.75rem 0.75rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
  .product__right {
    grid-template-columns: 1fr auto;
    column-gap: 0;
  }
  /* Prix à gauche, bouton à droite sur la même ligne -- jonction verticale. */
  .product__price-wrap {
    grid-column: 1;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.2);
    border-right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    /* MÊME marge basse que .product__actions : les deux sont dans la même
     * rangée en align-items:stretch, or un élément s'étire à la hauteur de
     * rangée MOINS ses marges. Avec une marge sur une seule des deux
     * moitiés, l'une était plus courte que l'autre et leurs bordures ne se
     * rejoignaient pas -- c'est le décalage de trait constaté en revue. */
    margin-bottom: 1.25rem;
  }
  .product__actions {
    grid-column: 2;
    border-top: 2px solid rgba(var(--bs-primary-rgb), 0.2);
    border-left: 0;
    border-radius: 0 0.75rem 0.75rem 0;
  }
  /* Bouton "Ajouter au panier" centré verticalement dans sa moitié : il faut
   * relayer le centrage sur toute la chaîne d'enfants (form > conteneur >
   * ligne qty/add), sinon seul le <form> est centré et le bouton reste collé
   * en haut de sa boîte. */
  .product__actions,
  .product__actions > form,
  .product__actions .product__add-to-cart-container,
  .product__actions .product__actions-qty-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

.product__custom-reassurance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-auto-rows: 1fr -- toutes les rangées à la MÊME hauteur, comme la
   * maquette : sinon un libellé qui passe sur deux lignes ("Délais de
   * livraisons...") rendait sa rangée plus haute que l'autre et les
   * encadrés paraissaient irréguliers. */
  grid-auto-rows: 1fr;
  gap: 0.75rem;
  margin-block: 0 1.25rem;
}
.product__reassurance-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-radius: 0.75rem;
  padding: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.3;
  min-height: 3.25rem;
}
.product__reassurance-item .material-icons {
  color: var(--bs-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}
/* Garantie : mise en avant "positive" comme le stock (icône verte + graisse),
 * là où livraison/retour restent neutres avec l'icône rouge de marque. */
.product__reassurance-item--warranty {
  font-weight: 600;
}
.product__reassurance-item--warranty .material-icons {
  color: #059669;
}
.product__reassurance-item a {
  color: inherit;
  text-decoration: none;
}
.product__reassurance-item a:hover {
  color: var(--bs-primary);
}
.product__reassurance-item--eco {
  grid-column: span 2;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}
.product__reassurance-item--eco .material-icons {
  color: #059669;
}
.product__reassurance-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #10b981;
}
.product__reassurance-dot--out {
  background-color: #f59e0b;
}
.product__reassurance-stock {
  font-weight: 700;
  color: #059669;
}
.product__reassurance-stock--out {
  color: #b45309;
}

/* Bloc d'aide : la ligne icône + texte est désormais dans
 * .product__help-head, les deux actions en dessous (maquette) -- le bloc
 * lui-même n'est donc plus la rangée flex. */
.product__help-block {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1.5rem;
}
.product__help-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.product__help-block .material-icons {
  color: var(--bs-primary);
  margin-top: 0.125rem;
}
.product__help-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}
.product__help-text {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
}
.product__help-text a {
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
}
.product__help-text a:hover {
  text-decoration: underline;
}
/* Deux actions de largeur égale, comme la maquette (flex-1 chacune). */
.product__help-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.product__help-actions > * {
  flex: 1 1 0;
  justify-content: center;
}
.product__alert-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.product__alert-link:hover {
  text-decoration: underline;
}
.product__alert-link .material-icons {
  font-size: 1.125rem;
}

/* Favoris / Partager -- deux boutons pleine largeur côte à côte, fidèles à
 * la maquette. */
.product__secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  /* Espace avec le bloc "Un doute sur la compatibilité ?" juste au-dessus,
   * qui manquait (les deux blocs se touchaient). */
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.product__favorite-btn,
.product__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Galerie -- badges "Occasion"/"Garantie" + ligne de confiance, fidèles à
 * la maquette (ProductDetail.tsx). .product__left passe en position:relative
 * pour que les badges (frères de .product__images, cf. product.tpl) se
 * positionnent sur l'image plutôt que par rapport à un ancêtre plus haut
 * (même bug que celui trouvé et corrigé sur la carte catalogue). */
.product__left {
  position: relative;
}
/* Galerie en carte bordée, photo en ratio 4/3 non rognée -- fidèle à la
 * maquette (bg-card border border-border rounded-xl + aspect-[4/3]
 * object-contain p-4). Le natif laisse l'image à sa hauteur propre, donc la
 * hauteur du bloc variait d'un produit à l'autre selon les proportions de la
 * photo (nos visuels vont du carré au panoramique). */
.product__carousel {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--bs-body-bg, #fff);
}
.product__carousel .carousel-item img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 1rem;
  /* Plafond de hauteur : sur grand écran la colonne fait ~700px de large,
   * soit 525px de haut au ratio 4/3 -- beaucoup trop, la pièce se perdait
   * dans un grand cadre blanc (constaté en revue). Au-delà de cette limite
   * le ratio cède, object-fit:contain conservant les proportions de la photo. */
  max-height: 26rem;
}
.product__thumbnails {
  margin-top: 0.75rem;
}
.product__carousel .product-flags,
.product__no-image .product-flags {
  display: none;
}
.product__occasion-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background-color: var(--bs-secondary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.625rem;
  border-radius: 0.375rem;
}
.product__gallery-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.625rem;
  border-radius: 0.375rem;
}
.product__gallery-badge .material-icons {
  font-size: 0.9375rem;
}
.product__trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
}
.product__trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.product__trust-row .material-icons {
  font-size: 1.0625rem;
  color: #16a34a;
}

.product__specs {
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.product__specs-title {
  font-family: var(--bs-font-display, inherit);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
/* Phrase d'intro de la carte caractéristiques (maquette) -- masquée sous sm,
 * comme dans la maquette (hidden sm:block), où la place manque. */
.product__specs-intro {
  display: none;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
@media (min-width: 576px) {
  .product__specs-intro {
    display: block;
  }
}
.product__specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
}
.product__specs-col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.product__specs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}
/* Traits séparateurs uniquement sous sm, comme la maquette
 * (border-b border-border/50 sm:border-0) : en desktop les deux colonnes
 * respirent grâce à l'espacement seul, les traits alourdissaient la carte. */
@media (max-width: 575.98px) {
  .product__specs-row {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }
  .product__specs-col:last-child .product__specs-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.product__specs-row span:first-child {
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
.product__specs-row strong {
  text-align: right;
  font-weight: 600;
}
.product__specs-ref {
  color: var(--bs-primary);
}
@media (max-width: 575.98px) {
  .product__specs-grid {
    grid-template-columns: 1fr;
  }
}

/* Bandeau titre de catégorie -- fidèle à la maquette (bande "muted" pleine
 * largeur avec fil d'Ariane + titre, CategoryListing.tsx). Le fil d'Ariane
 * (.breadcrumb__wrapper, natif) et le titre (.category-banner, ajouté dans
 * templates/layouts/layout-both-columns.tpl -- voir ce fichier pour le
 * pourquoi de l'emplacement) sont deux blocs DOM distincts mais tous deux
 * pleine largeur ({block name='breadcrumb'} rend avant le conteneur
 * deux-colonnes) -- même fond + aucune marge/bordure entre eux pour ne
 * former qu'une seule bande continue. */
.breadcrumb__wrapper {
  /* Le natif Hummingbird fixe margin-bottom (1.5rem, 2.5rem en desktop) sur
   * cet élément -- sans ce reset, ça crée un vide BLANC entre le fil
   * d'Ariane et .category-banner juste en dessous (même fond gris sur les
   * deux, mais séparés par cette marge = effet de bande coupée en deux,
   * signalé en revue). Les deux doivent former UNE SEULE bande continue. */
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-bottom: 0;
  padding-block: 0.625rem 0;
}
/* La marge basse n'est supprimée que sur les pages CATÉGORIE, où le fil
 * d'Ariane doit se souder au bandeau titre (.category-banner) pour ne former
 * qu'une seule bande grise. Partout ailleurs (fiche produit, CMS...) il n'y a
 * pas de bandeau derrière : la marge native doit rester, sinon le contenu
 * démarre collé au fil d'Ariane (constaté sur la fiche produit). */
.page-category .breadcrumb__wrapper {
  margin-bottom: 0;
}
/* Séparateur "/" par défaut (Bootstrap) -- chevron + dernier élément
 * accentué en rouge, fidèle à la maquette. */
.breadcrumb {
  --bs-breadcrumb-divider: '\203A';
  /* Le <ol> porte --bs-breadcrumb-padding-y: 0.75rem en natif, qui
   * s'ajoutait au padding du wrapper : la bande grise était inutilement
   * haute et repoussait tout le contenu vers le bas. */
  --bs-breadcrumb-padding-y: 0.25rem;
}
/* Alignement horizontal de la bande (fil d'Ariane + titre) sur le contenu
 * en dessous : .columns-container passe en --bs-gutter-x: 2.5rem alors que
 * les .container de la bande gardent la valeur par défaut (1.5rem) -- soit
 * 8px de décalage entre le titre et la carte de filtres / la grille.
 * Media query identique à celle du natif (min-width: 768px, uniquement sur
 * les layouts à colonne) pour ne pas décaler le mobile, où .columns-container
 * conserve la gouttière par défaut. */
@media (min-width: 768px) {
  .layout-left-column .breadcrumb__wrapper > .container,
  .layout-right-column .breadcrumb__wrapper > .container,
  .layout-left-column .category-banner > .container,
  .layout-right-column .category-banner > .container {
    --bs-gutter-x: 2.5rem;
  }
}
.breadcrumb-item:last-child {
  color: var(--bs-primary);
  font-weight: 600;
}
.breadcrumb-item:last-child .breadcrumb-link,
.breadcrumb-item:last-child span {
  color: var(--bs-primary);
  font-weight: 600;
}
.category-banner {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  padding-block: 0 0.875rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  /* Respiration sous la bande grise avant la carte de filtres / la grille --
   * sans ça les deux se touchent (constaté en revue), la maquette laisse un
   * vrai espace. Le natif ne met aucune marge en haut de .columns-container. */
  margin-bottom: 2rem;
}
.category-banner .page-title-section {
  font-family: var(--bs-font-display, inherit);
  font-style: italic;
  font-weight: 700;
  font-size: 1.875rem;
  margin: 0;
}
/* Compteur à côté du H1 -- ajouté dans templates/layouts/
 * layout-both-columns.tpl, fidèle à la maquette : "Freinage (9 produits)"
 * en italique plus léger, sur la même ligne que le titre. */
.category__count {
  font-family: var(--bs-font-display, inherit);
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 400;
  font-size: 1.125rem;
  margin-left: 0.75rem;
}
/* #center-column ne porte plus le fond gris (déplacé sur .category-banner,
 * pleine largeur) -- ne garde que l'espacement avant la grille de produits
 * quand une description/couverture est présente (rare, catalogue plat). */
/* Rendu uniquement s'il a du contenu (voir category-header.tpl) -- plus
 * besoin de :not(:empty), qui ne filtrait de toute façon rien puisque les
 * espaces du template comptent comme contenu. */
.category__header {
  margin-bottom: 1.5rem;
}

/* Bandeau titre + compteur de la grille produits -- ajouté dans
 * catalog/_partials/products-top.tpl, fidèle à la maquette
 * ("Pièces de freinage... pas chères et garanties" / "Affichage 1-9 de 81
 * article(s)", CategoryListing.tsx). La phrase native "Il y a X produits."
 * (.products__count) devient redondante avec le nouveau compteur et est
 * masquée plutôt que supprimée du template (AD-6, logique intouchée). */
.products__count {
  display: none;
}
/* Bandeau intro à GAUCHE, contrôles de tri/affichage à DROITE sur la même
 * ligne, fidèle à la maquette. Deux pièges natifs corrigés ici :
 *  1. .products__selection est une GRILLE 2 colonnes ([compteur][tri]) --
 *     le compteur étant masqué ci-dessus, le tri retombait en colonne 1,
 *     donc collé à gauche au lieu d'être à droite (constaté en revue) ;
 *  2. les deux blocs (intro / selection) étaient simplement empilés, alors
 *     que la maquette les met côte à côte. */
#js-product-list-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  /* Reprend la marge basse que portait .products__selection en natif
   * (1.5rem, annulée plus bas) et l'élargit un peu -- respiration entre la
   * barre d'outils et la grille, comme la maquette. */
  margin-bottom: 2rem;
}
.products__intro {
  margin-bottom: 0;
}
.products__selection {
  display: flex;
  justify-content: flex-end;
  margin-block-end: 0;
}
.products__intro-title {
  font-family: var(--bs-font-display, inherit);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.products__intro-count {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* Bloc tri -- natif Hummingbird = un libellé texte + un bouton dropdown
 * disjoints ; fidèle à la maquette (Select shadcn d'un seul tenant), les deux
 * sont réunis visuellement dans un unique conteneur bordé. */
.products__sort {
  align-items: center;
}
.products__sort-label {
  display: none;
}
/* Le natif étire le dropdown (.products__sort-dropdown{flex-grow:1} +
 * bouton width:100%) pour remplir sa colonne de grille -- d'où un "Pertinence"
 * démesuré (constaté en revue). Largeur compacte comme la maquette. */
.products__sort-dropdown {
  flex-grow: 0;
}
.products__sort-dropdown-button {
  border-radius: 0.5rem;
  font-weight: 500;
  width: auto;
  /* min-width réservé au desktop : 11rem (176px) dans une colonne de ~336px
   * sur petit mobile laissait trop peu de place au reste de la barre. */
  min-width: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
.products__sort-dropdown-button::after {
  margin-left: auto;
}
@media (min-width: 768px) {
  .products__sort-dropdown-button {
    min-width: 11rem;
  }
}

/* Titres natifs non couverts par les sections sur-mesure ci-dessus (fiche
 * produit, pages CMS, etc.) -- même police de titre partout sur le site,
 * fidèle à la maquette (font-display utilisé sur tous les h1/h2 dans
 * Header.tsx/CategoryListing.tsx/ProductDetail.tsx). */
h1, h2,
.product__name,
.page-title-section {
  font-family: var(--bs-font-display, inherit);
}

/* Carte de filtres (ps_facetedsearch) -- habillage visuel uniquement,
 * aucune logique de filtre touchée (AD-6). Deux rendus natifs distincts
 * partagent ces règles : la colonne desktop (#search_filters_wrapper) et
 * le panneau offcanvas mobile (.ps-facetedsearch--mobile, bouton "Filtrer"
 * dans products-top.tpl) -- oublié lors de la première passe (desktop only). */
#search_filters_wrapper {
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  overflow: hidden;
}
/* En-tête "Filtrer les résultats" (icône + libellé) -- bloc
 * 'facets_title' surchargé dans
 * theme/modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl,
 * fidèle à la maquette (icône SlidersHorizontal + libellé, sidebar de
 * CategoryListing.tsx). Rendu deux fois par le module natif (colonne
 * desktop ET offcanvas mobile), d'où les deux sélecteurs. */
#search_filters_wrapper .search-filters__header,
.ps-facetedsearch--mobile .search-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.875rem 1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
#search_filters_wrapper .search-filters__header-label,
.ps-facetedsearch--mobile .search-filters__header-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#search_filters_wrapper .search-filters__header .material-icons,
.ps-facetedsearch--mobile .search-filters__header .material-icons {
  color: var(--bs-primary);
  font-size: 1.125rem;
}
/* Compteur "(N produits)" rempli en JS -- voir custom.js et le
 * data-total-items sur #js-product-list-top (products-top.tpl). */
#search_filters_wrapper .search-filters__count,
.ps-facetedsearch--mobile .search-filters__count {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
}
/* L'offcanvas mobile a déjà son propre titre ("Filtrer les résultats", voir
 * ps_facetedsearch.tpl) dans son .offcanvas-header -- le contenu cloné dans
 * #_mobile_faceted ne doit pas répéter ce même en-tête juste en dessous. */
.ps-facetedsearch--mobile .search-filters__header {
  display: none;
}
/* --bs-accordion-btn-padding-x/--bs-accordion-body-padding-x valent 0 par
 * défaut chez Bootstrap 5.3 (voir .accordion au niveau racine, theme.css) --
 * sans ce padding explicite, boutons de section ET lignes de filtres sont
 * plaqués contre les bords de la carte (le rendu "pas propre" signalé),
 * fidèle à la maquette qui respire (px-4, sidebar de CategoryListing.tsx). */
#search_filters_wrapper .accordion-button,
.ps-facetedsearch--mobile .accordion-button {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
}
#search_filters_wrapper .accordion-body,
.ps-facetedsearch--mobile .accordion-body {
  padding: 0 1rem 0.75rem;
}
#search_filters_wrapper .accordion-button:not(.collapsed),
.ps-facetedsearch--mobile .accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  background-color: transparent;
  box-shadow: none;
}
#search_filters_wrapper .accordion-button:focus,
.ps-facetedsearch--mobile .accordion-button:focus {
  box-shadow: none;
  border-color: var(--bs-border-color, #dee2e6);
}

/* Lignes de filtres (case/radio + libellé + compteur) -- natif Hummingbird
 * stylise déjà .search-filters__form-check/__link/__magnitude (theme.css),
 * mais pas la ligne elle-même : ni l'espacement vertical entre lignes
 * (tassées, cf. capture), ni le compteur aligné à droite (empilé après le
 * libellé dans le même lien plutôt qu'espacé, fidèle à la maquette). */
#search_filters_wrapper .search-filters__item,
.ps-facetedsearch--mobile .search-filters__item {
  padding-block: 0.3125rem;
}
#search_filters_wrapper .search-filters__form-check .form-check-label,
.ps-facetedsearch--mobile .search-filters__form-check .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
}
#search_filters_wrapper .search-filters__link,
.ps-facetedsearch--mobile .search-filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
/* Panneaux latéraux (filtres mobiles + menu mobile) -- Bootstrap fixe
 * --bs-offcanvas-width à 400px en dur : sur un écran de 360px le panneau est
 * plus large que l'écran et déborde à l'ouverture. Plafonné en vw, la valeur
 * d'origine restant utilisée dès que l'écran est assez large. */
.offcanvas-start,
.offcanvas-end {
  --bs-offcanvas-width: min(400px, 88vw);
}

.ps-facetedsearch--mobile .offcanvas-header {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.ps-facetedsearch--mobile .offcanvas-title {
  font-family: var(--bs-font-display, inherit);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0;
}

/* Bouton "Filtrer" mobile (products-top.tpl) -- même famille visuelle que
 * le reste des boutons outline de la marque. */
.products__filter-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

/* Story 2.5 -- page active de la pagination. $pagination-color/-hover-color
 * sont déjà des références var() live côté Bootstrap (pas de fix nécessaire),
 * mais $pagination-active-bg/-color viennent de $component-active-bg (figé
 * au bleu d'origine à la compilation) -- même piège que les boutons. */
.page-item.active .page-link {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-border-color: var(--bs-primary);
}

/* Revue filtres catégorie -- même piège que .page-item.active ci-dessus :
 * .form-check-input:checked{background-color:#0b69f6;border-color:#0b69f6}
 * est figé au bleu d'origine à la compilation (pas un var() live). Site
 * entier (pas seulement les filtres) : Bootstrap peint sa propre coche/rond
 * en SVG (appearance:none), donc `accent-color` seul n'a aucun effet ici --
 * override direct nécessaire. Le SVG blanc du coché reste inchangé (déjà
 * neutre sur n'importe quel fond de couleur). */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Bascule grille/liste (ex-Story 2.4, FR-9) RETIRÉE le 2026-08-23 sur
 * décision explicite du client (sans usage réel) : le CSS
 * (.custom-view-toggle*, .products--list*) et le JS associés ont été
 * supprimés, ainsi que le balisage dans products-top.tpl. Cela lève aussi la
 * limite connue qui était documentée ici (la classe products--list n'était
 * pas réappliquée après un rafraîchissement AJAX du listing). */

/* Le groupe accueille désormais le tri et le bouton filtre (mobile) --
 * laisser s'enrouler plutôt que se tasser sur petit écran. */
.products__sort {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Menu principal (surcharge complète ps_mainmenu.tpl, AD-5 SPINE-EXCEPTION) --
 * fidèle à la maquette de référence (Header.tsx). Desktop en CSS pur
 * (:hover/:focus-within), aucun JS nécessaire pour l'ouverture -- accessible
 * au clavier (Tab) comme à la souris. Mobile : accordéons Bootstrap natifs
 * (data-bs-toggle), même logique.
 * -------------------------------------------------------------------------- */
.custom-mainnav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.custom-mainnav__item {
  position: relative;
}
.custom-mainnav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 0;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--bs-body-color);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.custom-mainnav__item:hover > .custom-mainnav__link,
.custom-mainnav__item:focus-within > .custom-mainnav__link {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}
.custom-mainnav__chevron {
  font-size: 1.125rem;
  transition: transform 0.15s ease;
}
.custom-mainnav__item:hover .custom-mainnav__chevron,
.custom-mainnav__item:focus-within .custom-mainnav__chevron {
  transform: rotate(180deg);
}

/* Dropdown simple (Groupe WDA) */
.custom-mainnav__dropdown {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  min-width: 14rem;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  padding-block: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity 0.15s ease;
  z-index: 1000;
}
.custom-mainnav__item:hover .custom-mainnav__dropdown,
.custom-mainnav__item:focus-within .custom-mainnav__dropdown {
  opacity: 1;
  visibility: visible;
}
.custom-mainnav__dropdown-link {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--bs-body-color);
  text-decoration: none;
}
.custom-mainnav__dropdown-link:hover {
  color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg, #f5f5f5);
}

/* Méga-menu (Pièce auto) */
/* MÉGA-MENU ÉCRASÉ (corrigé en revue) -- cause : un élément en
 * position:absolute sans largeur explicite est dimensionné en "shrink-to-fit"
 * d'après son BLOC CONTENEUR, c'est-à-dire le plus proche ancêtre positionné.
 * Or .custom-mainnav__item est en position:relative : la largeur disponible
 * était donc celle de l'onglet "Pièce auto" (~100px), et le menu se
 * comprimait vers sa largeur minimale (colonnes tassées, libellés sur deux
 * lignes). On rend donc l'onglet du méga-menu statique et on prend
 * .header-bottom__container (le .container-md du header, pleine largeur de
 * contenu) comme repère, puis left:0/right:0 pour occuper toute sa largeur --
 * plus aucun shrink-to-fit. Les autres onglets gardent leur ancrage local
 * (petit dropdown "Groupe WDA"), d'où le ciblage sur --mega uniquement. */
.header-bottom__container {
  position: relative;
}
.custom-mainnav__item--mega {
  position: static;
}
.custom-mainnav__megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 1000;
}
.custom-mainnav__item--mega:hover .custom-mainnav__megamenu,
.custom-mainnav__item--mega:focus-within .custom-mainnav__megamenu {
  opacity: 1;
  visibility: visible;
}
.custom-mainnav__megamenu > .container-md {
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  /* width:100% pour occuper toute la largeur offerte par le parent (qui est
   * désormais en left:0/right:0 sur le container du header) -- sans ça un
   * .container-md imbriqué garderait sa propre largeur calculée. */
  width: 100%;
  max-width: 72rem;
}
.custom-mainnav__megagrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.custom-mainnav__megacol {
  padding: 1.5rem;
  border-right: 1px solid var(--bs-border-color, #dee2e6);
}
.custom-mainnav__megacol:last-child {
  border-right: 0;
}
.custom-mainnav__megacol h3 {
  font-family: var(--bs-font-display, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.custom-mainnav__megacol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-mainnav__megacol li {
  margin-bottom: 0.375rem;
}
.custom-mainnav__megacol a {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
}
.custom-mainnav__megacol a:hover {
  color: var(--bs-body-color);
}
.custom-mainnav__megasearch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Mobile (offcanvas) */
.custom-mobilenav__links {
  display: flex;
  flex-direction: column;
}
.custom-mobilenav__links a,
.custom-mobilenav__top-link {
  padding: 0.625rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 0.9375rem;
}
.custom-mobilenav__top-link {
  display: block;
  padding-inline: 1rem;
  font-weight: 600;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.custom-mobilenav__subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bs-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0 0.5rem;
}
.custom-mobilenav__subtitle:first-child {
  margin-top: 0;
}
.custom-mobilenav__links--sub {
  padding-left: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Page d'accueil (module customhomepage) -- sections marketing sur-mesure,
 * fidèles à la maquette de référence (mockup Lovable, Epic 3). Regroupées ici
 * plutôt que dans un fichier CSS séparé du module, pour garder ce fichier
 * unique comme seul point à modifier lors d'un rebrand (voir en-tête).
 * -------------------------------------------------------------------------- */

/* -- Hero -- */
.home-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 3rem 6rem;
  /* .page-content--home (natif Hummingbird) impose un gap fixe (2.5rem)
   * entre toutes les sections de l'accueil -- voulu pour la plupart des
   * transitions, mais casse l'effet recherché ici : le Hero (fond sombre
   * plein cadre) doit se prolonger sans coupure dans le bandeau de
   * réassurance qui suit. Marge négative ciblée, n'affecte aucune autre
   * section. */
  margin-bottom: -2.5rem;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--bs-secondary-rgb), 0.95),
    rgba(var(--bs-secondary-rgb), 0.8) 55%,
    rgba(var(--bs-secondary-rgb), 0.55)
  );
}
.home-hero__inner {
  position: relative;
  z-index: 1;
}
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.home-hero__eyebrow-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--bs-primary);
}
.home-hero__title {
  font-family: var(--bs-font-display, inherit);
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.home-hero__title-accent {
  color: var(--bs-primary);
}
.home-hero__badges {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.home-hero__badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}
.home-hero__badge .material-icons {
  color: var(--bs-primary);
  font-size: 1.75rem;
}
.home-hero__badge-logo {
  height: 3.5rem;
  width: auto;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.home-hero__badge p {
  font-weight: 600;
}
.home-hero__badge-sep {
  width: 1px;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.2);
}
.home-hero__badge-sub {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}
.home-hero__search {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.home-hero__search-title {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-secondary);
  margin-bottom: 1rem;
}
.home-hero__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.home-hero__buyback {
  position: relative;
  background: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.8));
  border-radius: 1rem;
  padding: 2rem;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.home-hero__buyback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.15);
  margin-bottom: 1.25rem;
}
.home-hero__buyback h3 {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.home-hero__buyback p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}
.home-hero__buyback-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fff;
  color: var(--bs-secondary);
  font-weight: 600;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
}
.home-hero__buyback-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--bs-secondary);
}
.home-hero__tagline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(var(--bs-secondary-rgb), 0.8), transparent);
  padding-block: 2rem;
}
.home-hero__tagline p {
  font-family: var(--bs-font-display, inherit);
  font-style: italic;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
}

/* -- TrustBar -- */
.home-trustbar {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-block: 1px solid var(--bs-border-color, #dee2e6);
  padding-block: 2rem;
}
.home-trustbar__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.home-trustbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.home-trustbar__icon .material-icons {
  color: var(--bs-primary);
}
.home-trustbar__title {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bs-secondary);
}
.home-trustbar__subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Titre de section réutilisé par plusieurs blocs de la page d'accueil. */
.home-section-heading {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 3rem;
  text-align: center;
}
.home-section-heading h2 {
  font-family: var(--bs-font-display, inherit);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.home-section-heading__accent {
  color: var(--bs-primary);
}
.home-section-heading p {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 1.0625rem;
}
/* Lien "Voir tout le catalogue" -- section "Autres pièces disponibles pour
 * ce véhicule" (fiche produit, related-vehicle-products.tpl). */
.product__related-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.product__related-link:hover {
  color: var(--custom-primary-hover, var(--bs-primary));
}
.product__related-link .material-icons {
  font-size: 1.125rem;
}
.product__related {
  padding-block: 2.5rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* -- Catégories -- */
.home-categories {
  padding-block: 3.5rem;
}
.home-categories__card {
  height: 100%;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 1rem;
  padding: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-categories__card:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.home-categories__card h3 {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.home-categories__item {
  background-color: var(--bs-body-bg, #fff);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.home-categories__item:hover {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
}
.home-categories__item-img {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-categories__item-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.home-categories__item:hover .home-categories__item-img img {
  transform: scale(1.1);
}
.home-categories__item-name {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1.2;
}
.home-categories__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-primary);
  text-decoration: none;
}
.home-categories__more .material-icons {
  font-size: 1rem;
}

/* -- Chiffres clés -- */
.home-stats {
  background-color: var(--bs-secondary);
  padding-block: 4rem;
}
.home-stats__value {
  font-family: var(--bs-font-display, inherit);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--bs-primary);
  margin-bottom: 0.5rem;
}
.home-stats__label {
  max-width: 220px;
  margin-inline: auto;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
}

/* -- Bandeau reprise véhicule -- */
.home-takeback {
  padding-block: 1.5rem;
}
.home-takeback__card {
  position: relative;
  background-color: var(--bs-secondary);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
}
.home-takeback__content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.home-takeback__content p {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
}
.home-takeback__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}
.home-takeback__icon .material-icons {
  color: var(--bs-primary);
  font-size: 2rem;
}
.home-takeback__btn {
  border-radius: 999px;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* -- Engagement RSE -- couleurs vertes volontairement hors charte (voir
 * commentaire du template) : valeurs figées, pas de variable --bs-*. */
.home-eco {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
}
.home-eco__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-eco__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-eco__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6, 78, 59, 0.9), rgba(6, 95, 70, 0.6) 60%, transparent);
}
.home-eco__inner {
  position: relative;
  z-index: 1;
}
.home-eco__heading {
  max-width: 40rem;
  margin-bottom: 3rem;
}
/* Cartes plus étroites, fidèle à la maquette -- alignées sur la même
 * largeur que le texte au-dessus (.home-eco__heading), pas la pleine
 * largeur de la bannière jusqu'à la photo. */
.home-eco__cards {
  max-width: 40rem;
}
.home-eco__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #a7f3d0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.home-eco__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: #6ee7b7;
}
.home-eco__heading h2 {
  font-family: var(--bs-font-display, inherit);
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.2;
}
.home-eco__title-accent {
  color: #6ee7b7;
}
.home-eco__card {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.25rem;
  backdrop-filter: blur(4px);
}
.home-eco__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background-color: #6ee7b7;
  margin-bottom: 1rem;
}
.home-eco__card-icon .material-icons {
  color: #064e3b;
}
.home-eco__card h3 {
  font-family: var(--bs-font-display, inherit);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  min-height: 2.6em;
}
.home-eco__card p {
  color: rgba(209, 250, 229, 0.9);
  font-size: 0.875rem;
  margin: 0;
}

/* -- Avis Google -- */
.home-reviews {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-block: 1px solid var(--bs-border-color, #dee2e6);
  padding-block: 2.5rem;
  overflow: hidden;
}
.home-reviews__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.home-reviews__google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.home-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--bs-secondary-color, #6c757d);
}
.home-reviews__stars {
  color: #d1d5db;
  letter-spacing: 1px;
}
.home-reviews__stars,
.home-reviews__card-stars {
  color: #facc15;
}
.home-reviews__rating strong {
  font-size: 1.25rem;
  color: var(--bs-secondary);
}
.home-reviews__track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.home-reviews__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: home-reviews-scroll 40s linear infinite;
}
.home-reviews__track:hover {
  animation-play-state: paused;
}
@keyframes home-reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.home-reviews__card {
  flex: 0 0 320px;
  background-color: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.home-reviews__card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.home-reviews__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 0.875rem;
}
.home-reviews__card-top > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.home-reviews__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-secondary);
}
.home-reviews__date {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}
.home-reviews__card-stars {
  font-size: 0.75rem;
  letter-spacing: 1px;
  white-space: nowrap;
}
.home-reviews__card p {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
  line-height: 1.5;
}

/* -- Dernières nouveautés -- */
.home-newproducts {
  padding-block: 3.5rem;
}
.home-section-heading--left {
  margin-inline: 0;
  text-align: left;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.home-section-heading--left h2 {
  margin-bottom: 0;
}
.home-section-heading--left p {
  flex-basis: 100%;
}
.home-newproducts__scroller {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-block: 0.5rem 1rem;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
  scrollbar-width: thin;
}
.home-product-card {
  flex: 0 0 17rem;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-product-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.3);
  color: inherit;
}
.home-product-card__image {
  position: relative;
  height: 11rem;
  background-color: var(--bs-tertiary-bg, #f5f5f5);
}
.home-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-product-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: #16a34a;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}
.home-product-card__badge .material-icons {
  font-size: 0.875rem;
}
.home-product-card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.home-product-card__body h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bs-body-color);
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.home-product-card__vehicle {
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}
.home-product-card__brand {
  color: var(--bs-primary);
  font-weight: 600;
  margin-right: 0.375rem;
}
.home-product-card__ref {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.75rem;
}
.home-product-card__stock {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
}
.home-product-card__stock-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #10b981;
  margin-right: 0.375rem;
}
.home-product-card__stock-dot--out {
  background-color: #f59e0b;
}
.home-product-card__stock-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #059669;
}
.home-product-card__stock-label--out {
  color: #b45309;
}
.home-product-card__delivery {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--bs-body-color);
  margin-top: 0.5rem;
}
.home-product-card__delivery .material-icons {
  font-size: 1rem;
  color: var(--bs-primary);
}
.home-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.home-product-card__price {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bs-primary);
}
.home-product-card__price small {
  font-size: 0.6875rem;
  font-weight: 600;
}
.home-product-card__price-ht {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
}
.home-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  font-size: 1.0625rem;
}

/* -- Véhicules à vendre -- */
.home-vehiclessale {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  padding-block: 2rem;
}
.home-vehiclessale__title {
  font-family: var(--bs-font-display, inherit);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.home-vehiclessale__card {
  position: relative;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
  background-color: var(--bs-body-bg, #fff);
  border: 2px dashed rgba(var(--bs-primary-rgb), 0.3);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
}
.home-vehiclessale__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.25rem;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  margin-bottom: 1.25rem;
}
.home-vehiclessale__icon .material-icons {
  color: var(--bs-primary);
  font-size: 2rem;
}
.home-vehiclessale__badge {
  display: inline-block;
  background-color: var(--bs-secondary);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.home-vehiclessale__card p {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 1.0625rem;
  margin-bottom: 1.5rem;
}

/* -- Actualités -- */
.home-actualites {
  padding-block: 3.5rem;
}
.home-article-card {
  display: block;
  height: 100%;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-article-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.3);
  color: inherit;
}
.home-article-card__image {
  position: relative;
  height: 13rem;
  overflow: hidden;
}
.home-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.home-article-card:hover .home-article-card__image img {
  transform: scale(1.05);
}
.home-article-card__category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--bs-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}
.home-article-card__body {
  padding: 1.25rem;
}
.home-article-card__date {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.75rem;
}
.home-article-card__date .material-icons {
  font-size: 0.875rem;
}
.home-article-card__body h3 {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-article-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-primary);
}
.home-article-card__more .material-icons {
  font-size: 1rem;
}

/* -- Certifications -- */
.home-certifications {
  background-color: var(--bs-tertiary-bg, #f5f5f5);
  border-block: 1px solid var(--bs-border-color, #dee2e6);
  padding-block: 3rem;
}
.home-certifications__title {
  font-family: var(--bs-font-display, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
}
.home-certifications__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.home-certifications__item {
  position: relative;
  height: 4rem;
  width: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.home-certifications__item img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.home-certifications__item:hover img,
.home-certifications__item:focus img,
.home-certifications__item:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}
.home-certifications__tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.75rem;
  width: 16rem;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 20;
  text-align: left;
}
.home-certifications__item:hover .home-certifications__tooltip,
.home-certifications__item:focus .home-certifications__tooltip,
.home-certifications__item:focus-within .home-certifications__tooltip {
  opacity: 1;
  visibility: visible;
}
.home-certifications__tooltip strong {
  display: block;
  font-family: var(--bs-font-display, inherit);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.home-certifications__tooltip p {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * Footer (surcharge complète _partials/footer.tpl, AD-5 SPINE-EXCEPTION) --
 * fidèle à la maquette de référence (Footer.tsx).
 * -------------------------------------------------------------------------- */
.custom-footer {
  background-color: var(--bs-secondary);
  color: rgba(255, 255, 255, 0.75);
}
.custom-footer h4 {
  font-family: var(--bs-font-display, inherit);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.custom-footer__logo {
  /* Logo fourni en couleur (fond blanc) -- inversé en silhouette blanche
   * pour se détacher sur le fond sombre du footer, même traitement que la
   * maquette (brightness-0 invert). */
  filter: brightness(0) invert(1);
  margin-bottom: 1.5rem;
}
.custom-footer__description {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}
.custom-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.custom-footer__contact a,
.custom-footer__contact span {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.custom-footer__contact a:hover {
  color: var(--bs-primary);
}
.custom-footer__contact .material-icons {
  color: var(--bs-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.custom-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.custom-footer__links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.custom-footer__links a:hover {
  color: var(--bs-primary);
}

/* Newsletter -- réutilise le vrai formulaire natif (ps_emailsubscription,
 * hook displayFooterBefore), restylé pour s'intégrer à la colonne sombre.
 * !important nécessaire : le module applique bg-body-tertiary directement
 * sur la section ET sur des éléments internes, et son propre système de
 * colonnes Bootstrap (col-lg-4/col-lg-6, pensé pour une pleine largeur de
 * page) casse la mise en page dans une colonne de footer étroite.
 *
 * Fond encore blanc malgré l'ID + !important (2026-08-23) : la vraie cause
 * n'est PAS la spécificité mais les Cascade Layers CSS (@layer). Le theme.css
 * d'Hummingbird déclare `@layer vendors, bs-base, ..., utilities;` et
 * .bg-body-tertiary vit dans `@layer utilities`. Or pour les déclarations
 * !important, l'ordre de priorité entre calques est INVERSÉ par rapport aux
 * déclarations normales : un style non calqué (notre custom.css) a la PLUS
 * BASSE priorité de tous face à un style calqué en !important, quelle que
 * soit sa spécificité (ID compris) -- voir
 * https://www.w3.org/TR/css-cascade-5/#layering. D'où ce bloc rejoignant
 * explicitement `@layer utilities`, le même calque que Bootstrap : à
 * l'intérieur d'un même calque, la spécificité (ID > classe) redevient le
 * critère, et notre sélecteur l'emporte. */
@layer utilities {
  .custom-footer__newsletter .ps-emailsubscription,
  .custom-footer__newsletter .ps-emailsubscription > .container,
  #emailsubscription_anchor_displayFooterBefore,
  #emailsubscription_anchor_displayFooterBefore > .container {
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
}
.custom-footer__newsletter .ps-emailsubscription .h3 {
  display: none;
}
/* Titre de remplacement (footer.tpl) -- même rôle visuel que le .h3 natif
 * masqué ci-dessus, texte et gabarit adaptés à la colonne de footer sombre. */
.custom-footer__newsletter-intro {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}
.custom-footer__newsletter .ps-emailsubscription .row {
  margin: 0;
  display: block;
}
.custom-footer__newsletter .ps-emailsubscription .row > * {
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
}
.custom-footer__newsletter .ps-emailsubscription form .d-flex {
  flex-wrap: nowrap;
}
.custom-footer__newsletter .form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 999px 0 0 999px;
  min-width: 0;
}
.custom-footer__newsletter .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.custom-footer__newsletter .btn-primary {
  border-radius: 0 999px 999px 0;
  flex-shrink: 0;
}
.custom-footer__newsletter .text-body-secondary {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.75rem;
}

.custom-footer__social {
  display: flex;
  gap: 0.75rem;
}
.custom-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.custom-footer__social a:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.custom-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  font-size: 0.875rem;
}
.custom-footer__bottom p {
  color: rgba(255, 255, 255, 0.6);
}
.custom-footer__legal {
  display: flex;
  gap: 1.5rem;
}
.custom-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.custom-footer__legal a:hover {
  color: var(--bs-primary);
}