/*
 * Identité visuelle Audiophonics — chargé automatiquement sur toutes les
 * pages front par PrestaShop (classes/controller/FrontController.php,
 * registerStylesheet 'theme-custom', priorité 1000 = chargé en dernier,
 * après theme.css). Un seul fichier à supprimer pour tout annuler ; les
 * versions précédentes sont conservées en .bak / .pre-*.bak dans ce dossier.
 *
 * Identité "atelier électronique éditorial" (remplace la passe précédente
 * encre/papier/cuivre, cf. .pre-*.bak) : papier clair, encre quasi noire,
 * bleu sérigraphie comme accent d'action, rouge comme signal promo/alerte,
 * ambre pour un stock tendu. Polices Archivo (display) et Instrument Sans
 * (texte) via Google Fonts (voir _partials/head.tpl) ; IBM Plex Mono reste
 * auto-hébergée (assets/fonts/) pour les éléments "fiche technique" (prix,
 * marques, références) — c'est déjà la police mono de la nouvelle maquette,
 * pas besoin de la charger une deuxième fois via CDN.
 *
 * Quelques correctifs fonctionnels de passes précédentes sont conservés à
 * l'identique (juste re-tokenisés) : le méga-menu catégories (bug Popper +
 * hauteur du thème), la grille produits (pas de grand vide sur ligne
 * incomplète), et l'ordre catégories/promo en page d'accueil. Ne pas les
 * supprimer sans comprendre le commentaire qui les accompagne.
 */

/* ==========================================================================
   Police mono auto-hébergée (assets/fonts/) — pas de CDN pour celle-ci,
   c'est déjà exactement IBM Plex Mono. Archivo et Instrument Sans (display
   et texte) sont chargées via Google Fonts, voir _partials/head.tpl.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --ap-ink: #15181c;
  --ap-ink-soft: #1e2228;
  --ap-paper: #f0efeb;
  --ap-paper-dim: #e6e4de;
  --ap-accent: #1f4ed8;
  --ap-accent-deep: #1a3fb0;
  --ap-accent-soft: #e3eafb;
  --ap-slate: #6a6e75;
  --ap-slate-light: #9a9ea4;
  --ap-line: #dddad2;
  --ap-signal: #2f7d46;
  --ap-signal-soft: #e4f0e7;
  --ap-danger: #c0392b;
  --ap-danger-soft: #f7e6e3;
  --ap-warn: #c98a16;
  --ap-warn-soft: #f6ecd7;

  /* Alias Bootstrap : re-teinte tous les composants qui consomment déjà
     ces variables (--bs-*) dans le theme.css compilé, sans toucher aux
     templates. */
  --bs-primary: var(--ap-accent);
  --bs-primary-rgb: 31, 78, 216;
  --bs-link-color: var(--ap-accent-deep);
  --bs-link-color-rgb: 26, 63, 176;
  --bs-link-hover-color: var(--ap-accent);
  --bs-body-bg: var(--ap-paper);
  --bs-body-color: var(--ap-ink);
  --bs-body-font-family: "Instrument Sans", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --bs-border-radius: .25rem;
  --bs-border-radius-lg: .375rem;
  /* Utilisé par customer/page.tpl pour surligner le lien actif du menu
     "Mon compte" (comparaison d'URL en CSS pur, voir le <style> inline). */
  --bs-list-group-active-bg: var(--ap-accent-soft);
  --bs-list-group-active-border-color: var(--ap-accent-soft);
  --bs-list-group-active-color: var(--ap-accent-deep);

  /* Typo */
  --ap-font-display: "Archivo", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --ap-font-body: "Instrument Sans", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --ap-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Ombres / rayons / mouvement */
  --ap-shadow-sm: 0 .125rem .5rem rgba(21, 24, 28, .08);
  --ap-shadow-md: 0 .5rem 1.5rem rgba(21, 24, 28, .12);
  --ap-shadow-lg: 0 1rem 3rem rgba(21, 24, 28, .2);
  --ap-radius: .25rem;
  --ap-transition: .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Typographie de base
   ========================================================================== */

body {
  font-family: var(--ap-font-body);
  line-height: 1.6;
  color: var(--ap-ink);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--ap-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ap-ink);
}

h5, .h5, h6, .h6 {
  font-weight: 600;
}

a {
  color: var(--ap-accent-deep);
}
a:hover {
  color: var(--ap-accent);
}

.product-title,
.product-title a {
  font-weight: 600;
  line-height: 1.35;
  color: var(--ap-ink);
}

.nav-link,
.navbar-inner-menu a {
  letter-spacing: .01em;
}

/* Repère éditorial mono (marques, éléments "fiche technique") — utilisé par
   .card-eyebrow (fiches produit), les badges de statut, le fil d'Ariane. */
.ap-eyebrow,
.card-eyebrow {
  display: block;
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ap-slate);
  margin-bottom: .3rem;
}

/* ==========================================================================
   Signature : le "trait de signal" — remplace le tiret générique centré
   utilisé sous chaque titre de section. Un trait fin avec un décrochement,
   comme une trace de mesure. S'anime une fois au scroll (respecte
   prefers-reduced-motion via custom.js).
   ========================================================================== */

.ap-signal-trace {
  --trace-color: var(--ap-accent);
  display: block;
  width: 100%;
  max-width: 7rem;
  height: 10px;
  margin: 0;
}
.ap-signal-trace svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ap-signal-trace path {
  fill: none;
  stroke: var(--trace-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset .8s ease;
}
.ap-signal-trace.is-visible path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ap-signal-trace path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Titres de section — motif éditorial (aligné à gauche : repère mono +
   titre display + trait de signal) au lieu du "titre centré + tiret"
   générique répété à l'identique sur "Our selection" / "Our top
   categories" / "En promo". Partagé par ps_featuredproducts, ps_newproducts,
   ps_specials, ap_homefeaturedcat (tous produisent .products-section-title).
   ========================================================================== */

.products-section-title {
  display: block !important;
  background: none !important;
  text-align: left !important;
  color: var(--ap-ink) !important;
  font-size: 1.85rem;
  text-transform: none;
  letter-spacing: -.01em;
  padding: 0 !important;
  border-radius: 0;
  margin-bottom: 1.1rem !important;
}
.ap-section-header {
  margin-bottom: 2rem;
}
.ap-section-header .products-section-title {
  margin-bottom: .9rem !important;
}

.all-product-link {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  font-family: var(--ap-font-mono);
  font-size: .78rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ap-accent-deep) !important;
  text-decoration: none !important;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
}
.all-product-link:hover {
  color: var(--ap-accent) !important;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  font-family: var(--ap-font-body);
  border-radius: var(--bs-border-radius);
  padding-block: .55rem;
  padding-inline: 1.1rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--ap-transition), box-shadow var(--ap-transition), filter var(--ap-transition);
}

.btn-secondary,
.btn.btn-outline-light,
a.btn {
  box-shadow: var(--ap-shadow-sm);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--ap-shadow-md);
  filter: brightness(1.04);
}
.btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}

.btn-primary {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ap-accent-deep);
  border-color: var(--ap-accent-deep);
  color: #fff;
}

/* .btn-outline-primary compilé par Bootstrap fige la teinte "primary"
   d'origine (#1b56bd) en dur dans ses variables --bs-btn-*, sans passer par
   --bs-primary (donc sans hériter de l'alias --ap-accent ci-dessus,
   contrairement à .btn-primary). On re-teinte ici pour rester cohérent. */
.btn-outline-primary {
  --bs-btn-color: var(--ap-accent-deep);
  --bs-btn-border-color: var(--ap-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ap-accent);
  --bs-btn-hover-border-color: var(--ap-accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ap-accent-deep);
  --bs-btn-active-border-color: var(--ap-accent-deep);
  --bs-btn-disabled-color: var(--ap-accent);
  --bs-btn-disabled-border-color: var(--ap-accent);
  --bs-btn-focus-shadow-rgb: 31, 78, 216;
}

/* Boutons laissés sans classe Bootstrap dans certains templates de modules */
#content-wrapper-top button:not([class]),
#content-wrapper-bottom button:not([class]),
.product-availability button:not([class]) {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--ap-accent);
  border-radius: var(--bs-border-radius);
  background-color: var(--ap-accent);
  color: #fff;
  font-weight: 600;
  transition: transform var(--ap-transition), filter var(--ap-transition);
}
#content-wrapper-top button:not([class]):hover,
#content-wrapper-bottom button:not([class]):hover,
.product-availability button:not([class]):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-control,
.form-select {
  font-family: var(--ap-font-body);
  border-radius: var(--bs-border-radius);
  border-color: var(--ap-line);
  padding-block: .55rem;
  transition: border-color var(--ap-transition), box-shadow var(--ap-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 .2rem rgba(31, 78, 216, .18);
}

/* ==========================================================================
   Accessibilité / UX de base
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ap-accent);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .navbar .nav-link,
  .btn,
  .card-img-overlay .stretched-link {
    min-height: 44px;
  }
}

#content-wrapper-top > *,
#content-wrapper-bottom > *,
.page-content > * {
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   En-tête / navigation — bandeau clair (identité "atelier électronique
   éditorial"), remplace l'ancien bandeau sombre.
   ========================================================================== */

#header {
  background-color: var(--ap-paper);
}

#toppestnav {
  background-color: var(--ap-ink);
  font-family: var(--ap-font-mono);
  font-size: .74rem;
  letter-spacing: .02em;
  padding-block: .45rem;
}
.ap-top-left {
  display: flex;
  gap: 1.1rem;
}
.ap-top-left a {
  color: rgba(247, 244, 239, .7);
}
.ap-top-left a:hover {
  color: #fff;
}
.ap-top-right {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ap-top-right .btn,
.ap-top-right button {
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
  border-color: rgba(247, 244, 239, .28) !important;
  color: rgba(247, 244, 239, .85) !important;
  font-family: var(--ap-font-mono);
  font-size: .7rem !important;
  padding-block: .2rem !important;
}
.ap-top-right .btn:hover,
.ap-top-right button:hover {
  border-color: var(--ap-accent) !important;
  color: #fff !important;
}
.ap-top-right .dropdown-menu {
  font-family: var(--ap-font-body);
}

header .navbar {
  border-bottom: 1px solid var(--ap-line);
  position: relative;
  z-index: 5;
}

.blockcart-wrap .cart-shipping-estimate {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .3rem;
  padding: .15rem .55rem;
  border-radius: var(--bs-border-radius-pill, 50rem);
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.blockcart-wrap .cart-shipping-estimate-icon {
  width: .8rem;
  height: .8rem;
  flex-shrink: 0;
}

.navbar-inner-menu .menubtn {
  color: var(--ap-ink);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  transition: color var(--ap-transition), transform var(--ap-transition);
}
/* theme.css contraint ".menubtn .apicon" à width:100%/height:100% (pensé
   pour un bouton icône seule de 35px, cf. "#header .login_cart .menubtn")
   — avec le libellé "Compte" ajouté à côté de l'icône, ça fait grossir le
   SVG hors de toute proportion. On reprend une taille fixe raisonnable
   pour ce cas précis, et une largeur libre (pas 35px) pour laisser la
   place au libellé. */
#header .login_cart .ap-act {
  width: auto !important;
  padding-inline-end: 0;
}
.ap-act .apicon {
  width: 1.35rem !important;
  height: 1.35rem !important;
  max-height: none !important;
  color: var(--ap-ink);
}
.navbar-inner-menu .menubtn:hover {
  color: var(--ap-accent);
  transform: translateY(-1px);
}
.navbar-inner-menu .ap-act-label {
  font-size: .8rem;
  font-weight: 500;
}
.login_cart {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.login_cart > .menubtn {
  margin-right: 0 !important;
}
.login_cart .blockcart-wrap {
  align-items: flex-end;
  /* Le badge du panier (ps_shoppingcart.tpl) est en position:absolute avec
     un transform négatif (translate(-60%, 90%)) qui le fait déborder à
     gauche de sa propre boîte — un simple "gap" entre .menubtn (Compte) et
     .blockcart-wrap ne suffit donc pas à l'empêcher de chevaucher le lien
     "Compte" : il faut une marge réelle en plus. */
  margin-left: .5rem;
}

.search-wrapper .ap_search_bar {
  display: flex;
  border: 1.5px solid var(--ap-ink);
  border-radius: var(--ap-radius);
  background: #fff;
  overflow: hidden;
}
.search-wrapper .input-group {
  display: flex;
  flex: 1;
}
.search-wrapper .form-control,
.search-wrapper input[type="search"] {
  border: 0;
  border-radius: 0;
  padding-inline-start: 1rem;
  background: transparent;
}
.search-wrapper .form-control:focus {
  box-shadow: none;
}
.ap-search-submit {
  border: 0;
  background: var(--ap-ink);
  color: #fff;
  padding-inline: 1.3rem;
  font-family: var(--ap-font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background-color var(--ap-transition);
}
.ap-search-submit:hover {
  background: var(--ap-accent-deep);
}

/* Barre de nav : les deux onglets univers (Écouter/Construire), les liens
   plats (Nouveautés, Marques, ...) — fond clair, accent bleu. */
#ap_mega_menu_content {
  background-color: var(--ap-paper);
}
.univ-trigger-item {
  display: flex;
  position: relative;
}
.univ-tab-btn {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  padding: .75rem 1.1rem !important;
  border-bottom: 3px solid transparent !important;
  color: var(--ap-ink) !important;
  font-weight: 600;
  font-size: .92rem;
  background: transparent !important;
  transition: border-color var(--ap-transition), color var(--ap-transition);
}
.univ-tab-btn .apicon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--ap-accent);
  flex-shrink: 0;
}
.univ-tab-btn small {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  color: var(--ap-slate);
}
.univ-tab-btn:hover,
.univ-tab-btn.active {
  border-bottom-color: var(--ap-accent) !important;
  color: var(--ap-ink) !important;
}

#ap_mega_menu_content > li > a.nav-link {
  position: relative;
  color: var(--ap-slate);
  padding: .75rem .9rem !important;
  border-bottom: 3px solid transparent;
  transition: color var(--ap-transition), border-color var(--ap-transition);
}
#ap_mega_menu_content > li > a.nav-link:hover {
  color: var(--ap-ink);
  border-bottom-color: var(--ap-line);
}
#ap_mega_menu_content > li > a.nlink-hot {
  color: var(--ap-danger);
  font-weight: 600;
}
#ap_mega_menu_content > li > a.nlink-hot:hover {
  border-bottom-color: var(--ap-danger);
}

/* ==========================================================================
   Méga-menu "Categories" (ap_category_menu) — la colonne de gauche liste les
   familles, chaque survol ouvre un panneau à droite. Le CSS du thème pose
   `height:100%` + `overflow:hidden` sur ce panneau (hauteur = celle du <li>
   déclencheur, donc minuscule) et empile les sous-catégories en colonnes via
   un hack flex-column + flex-wrap + h-100 : le nombre de colonnes dépend
   d'une hauteur imprévisible et tout ce qui dépasse est purement invisible
   (pas de scroll).

   Le composant Dropdown Bootstrap est instancié ici avec l'élément
   .dropdown-menu lui-même comme "toggle" (bug du thème, pas le nôtre) :
   Popper se positionne donc par rapport à l'élément lui-même et le
   translate vers le bas d'une hauteur égale à sa propre hauteur — invisible
   tant que le panneau était minuscule (height:100%;overflow:hidden), mais
   très visible depuis qu'il prend sa vraie hauteur de contenu. On neutralise
   ce positionnement JS et on repositionne en CSS pur, relatif à .category_menu
   (qui devient le bloc de référence commun pour tous les panneaux).

   Corrigé ici : colonnes en CSS columns. Le vrai piège (vérifié en DOM, pas
   supposé) : `theme.css` pose lui-même, sur ce même sélecteur,
   `overflow:hidden` + `width:75%`. Le width est désormais explicitement
   recouvert ci-dessous (90%, cf. demande d'élargissement du panneau) au lieu
   d'être simplement laissé passer, mais overflow:hidden doit toujours être
   explicitement recouvert sur les DEUX axes ci-dessous, sinon overflow-y
   reste "hidden" en cascade même sans qu'on y touche. Le vrai responsable du
   débordement vertical n'était PAS la
   largeur des colonnes ni un manque de scroll : c'est `break-inside:avoid`
   posé sur .menu-block, qui interdit à un groupe entier (ex. "Connecteurs",
   22 liens) de se répartir sur plusieurs colonnes — un seul gros groupe
   insécable forçait le panneau entier à dépasser 900px de haut quel que soit
   le nombre de colonnes disponibles. Retiré ici (break-inside:auto), avec en
   contrepartie un break-inside:avoid déplacé sur chaque lien pour empêcher un
   <a> individuel d'être lui-même coupé en deux entre deux colonnes. Résultat
   vérifié : tous les panneaux tiennent sous ~650px sans troncature. Un
   max-height généreux + scroll est gardé en filet de sécurité seulement (si
   une catégorie grossit beaucoup plus tard) — le scroll dans le panneau est
   en pratique peu fiable (la molette peut être interceptée par la page et
   refermer le dropdown), donc on ne doit pas compter dessus en usage normal.
   ========================================================================== */

#header .category_menu {
  position: relative;
}

/* theme.css pose `#header .category_menu li { width: 25%; }`, hérité de
   l'ancien menu horizontal à 4 colonnes (voir plus haut). Dans la disposition
   actuelle (sidebar verticale étroite), ce 25% écrase chaque libellé de
   catégorie dans le quart de la largeur du panneau ("Appareils HiFi" tronqué
   en "Appa... HiFi") — d'où le `left: 25%` du panneau juste en dessous, qui
   doit rester aligné sur cette même largeur de référence (100% ici). */
#header .category_menu li {
  width: 100% !important;
}

#header .category_menu li a {
  padding: .6rem .9rem !important;
  border-radius: var(--bs-border-radius);
  color: var(--ap-ink);
  transition: background-color var(--ap-transition), color var(--ap-transition);
}
#header .category_menu li a:hover,
#header .category_menu li a:focus-visible,
#header .category_menu li a.active {
  background: var(--ap-accent-soft) !important;
  color: var(--ap-accent-deep) !important;
}
#header .category_menu li a.active {
  border-left: 3px solid var(--ap-accent);
}

/* Les deux onglets univers (Écouter/Construire, voir header.tpl et
   custom.js initUnivTabs) partagent ce même panneau catégories : on
   masque en CSS pur les familles qui n'appartiennent pas à l'univers actif
   (attribut data-univ posé sur chaque <li> par
   ap_category_menu/categories.tpl). Marche même si les <li> sont insérés
   après ce calcul (sélecteur CSS réactif au DOM), pas de souci de timing
   avec le chargement asynchrone du chunk Dropdown de theme.js. */
.category_menu_container[data-univ-active="ecouter"] .category_menu > li:not([data-univ="ecouter"]) {
  display: none;
}
.category_menu_container[data-univ-active="construire"] .category_menu > li:not([data-univ="construire"]) {
  display: none;
}

/* Bug préexistant (repéré ici, pas introduit par ce changement) : le menu
   mobile (offcanvas, voir theme.js) clone #ap_mega_menu_content puis
   remplace .category_menu par un accordéon — mais ce clone reste
   visuellement invisible : .category_menu_container est un
   .dropdown-menu Bootstrap (display:none tant que .show n'est pas posé),
   et le clonage ne retire ni cette classe ni n'ajoute .show. Le mécanisme
   `data-mobile-class` prévu pour ce cas dans le JS compilé n'est posé sur
   aucun élément de ce thème — on force donc l'affichage ici, seulement
   dans le contexte du menu mobile. */
#ap_low_width_content .category_menu_container {
  display: block !important;
}

#header .category_menu li div.dropdown-menu {
  position: absolute !important;
  /* left: 100% (pas 25%, cf. commentaire sur #header .category_menu li
     ci-dessus) : le panneau doit démarrer après la pleine largeur de la
     colonne de gauche, pas la chevaucher. */
  inset: 0 auto auto 100% !important;
  /* Élargi de 75% (theme.css) à 90%, puis passé en clamp() : 90% était
     calculé par rapport à la largeur de la colonne de gauche (.category_menu,
     ~394px, le containing block de ce absolute — pas le viewport), donc le
     panneau restait plafonné à ~355px quelle que soit la largeur d'écran.
     clamp() découple la largeur du panneau de cette référence étroite pour
     qu'il utilise davantage l'espace libre à droite sur desktop. Réélargi
     une 2e fois pour la 3e colonne de .fs-m1 ci-dessous ; le plancher (420px)
     reste juste sous les ~430px disponibles au plus petit breakpoint desktop
     (~768px, d-md-flex) pour ne pas déborder du viewport à cette largeur. */
  width: clamp(420px, 60vw, 1100px) !important;
  transform: none !important;
  margin: 0 !important;
  height: auto !important;
  /* Filet de sécurité seulement : avec break-inside:auto sur .menu-block
     (plus bas), tous les panneaux actuels tiennent sous ~650px, donc ce
     plafond ne devrait normalement jamais être atteint. overflow-y doit être
     explicitement remis à "auto" (pas juste overflow-x) car theme.css pose
     overflow:hidden sur les deux axes pour ce même sélecteur. */
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 1.5rem !important;
  background: var(--ap-paper);
  border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
  box-shadow: var(--ap-shadow-md);
}

#header .category_menu li div.dropdown-menu .fs-m1 {
  display: block !important;
  height: auto !important;
  /* column-count fixe à 3 (plutôt que column-width seul) : garantit trois
     colonnes même quand la largeur disponible est trop juste pour que le
     calcul auto par largeur de colonne en déduise trois. */
  column-count: 3;
  column-gap: 2rem;
}

#header .category_menu li div.dropdown-menu .menu-block {
  /* auto (pas avoid) : un groupe entier interdit de se répartir sur
     plusieurs colonnes (ex. "Connecteurs", 22 liens) forcerait le panneau à
     dépasser 900px de haut. Seuls les liens individuels sont protégés
     (break-inside:avoid ci-dessous) pour ne pas couper un <a> en deux entre
     deux colonnes. */
  break-inside: auto;
  margin-bottom: 1.25rem !important;
}

/* Certaines catégories (ex. Alimentations et transformateurs, Pointes et
   traitement acoustique) listent leurs liens directement dans .fs-m1, sans les
   grouper dans des .menu-block (cf. ap_category_menu/categories.tpl). Le
   sélecteur ne doit donc pas dépendre de .menu-block, sous peine de laisser ces
   liens hériter de la couleur claire des <a> du panneau de gauche (texte clair
   sur fond clair, donc invisible). */
#header .category_menu li div.dropdown-menu a {
  display: block;
  break-inside: avoid;
  color: var(--ap-ink);
  padding-block: .15rem;
  border-radius: var(--bs-border-radius);
  transition: color var(--ap-transition), padding-left var(--ap-transition);
}
#header .category_menu li div.dropdown-menu a:hover,
#header .category_menu li div.dropdown-menu a:focus-visible {
  color: var(--ap-accent-deep) !important;
  padding-left: .3rem;
}
#header .category_menu li div.dropdown-menu a.menu-lvl2 {
  font-family: var(--ap-font-mono);
  color: var(--ap-ink);
  text-transform: uppercase;
  font-size: .74rem !important;
  font-weight: 500;
  letter-spacing: .06em;
  margin-bottom: .35rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--ap-line);
}
#header .category_menu li div.dropdown-menu a.menu-lvl2:hover {
  border-bottom-color: var(--ap-accent);
}
#header .category_menu li div.dropdown-menu img {
  max-width: 100%;
  border-radius: var(--bs-border-radius);
}

/* ==========================================================================
   Bandeau d'accueil (hero) — copie éditoriale + parcours à gauche, panneau
   visuel unique à droite. Le panneau visuel héberge le hook
   displayApHomeBanner (ap_imageslider, piloté depuis le back office) ; si le
   hook est vide, .ap-home-hero (repli statique logo + accroche + CTA) s'y
   affiche à la place — voir layout-home.tpl. Le carrousel n'est donc jamais
   supprimé, seulement réduit à ce panneau au lieu de toute la largeur.
   ========================================================================== */

.ap-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.75rem;
  align-items: center;
  padding-block: 3rem;
}
@media (max-width: 991.98px) {
  .ap-hero {
    grid-template-columns: 1fr;
  }
}
.ap-hero-eyebrow {
  font-family: var(--ap-font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-danger);
  margin-bottom: .85rem;
}
.ap-hero-title {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  margin-bottom: 1rem;
}
.ap-hero-title em {
  font-style: normal;
  color: var(--ap-accent);
}
.ap-hero-lede {
  font-size: 1.02rem;
  color: var(--ap-slate);
  max-width: 42rem;
  margin-bottom: 1.5rem;
}
.ap-hero-paths {
  display: grid;
  gap: .55rem;
  max-width: 32rem;
}
.ap-hero-path {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1rem;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  color: var(--ap-ink);
  text-decoration: none;
  transition: border-color var(--ap-transition), transform var(--ap-transition);
}
.ap-hero-path:hover {
  border-color: var(--ap-accent);
  transform: translateX(3px);
  color: var(--ap-ink);
}
.ap-hero-path .n {
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  color: var(--ap-slate-light);
  flex-shrink: 0;
}
.ap-hero-path b {
  display: block;
  font-weight: 600;
  font-size: .92rem;
}
.ap-hero-path small {
  display: block;
  color: var(--ap-slate);
  font-size: .78rem;
}
.ap-hero-path .go {
  margin-left: auto;
  color: var(--ap-accent);
  flex-shrink: 0;
}

.ap-hero-visual {
  border-radius: var(--ap-radius);
  overflow: hidden;
}

.ap-home-hero {
  position: relative;
  background: var(--ap-ink);
  color: var(--ap-paper);
  padding: 3rem 1.5rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--ap-radius);
  text-align: center;
}
.ap-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 22rem at 15% 0%, rgba(31, 78, 216, .22), transparent 60%),
    radial-gradient(32rem 18rem at 100% 100%, rgba(31, 78, 216, .12), transparent 60%);
  z-index: -1;
}
.ap-home-hero-logo {
  max-height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
  filter: brightness(0) invert(1);
}
.ap-home-hero-tagline {
  font-family: var(--ap-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  max-width: 26rem;
  margin: 0 auto 1.5rem;
}
.ap-home-hero-cta {
  padding-inline: 1.75rem;
}

/* ==========================================================================
   Bandeau de confiance (accueil, sous le hero) — texte seul, sans icônes
   ========================================================================== */

.ap-usp-bar {
  background: var(--ap-paper);
  border-top: 1px solid var(--ap-line);
  border-bottom: 1px solid var(--ap-line);
  padding-block: 1.5rem;
}
.ap-usp-bar .row {
  row-gap: 1.1rem;
}
.ap-usp-item strong {
  display: block;
  font-size: .88rem;
  color: var(--ap-ink);
}
.ap-usp-item span {
  display: block;
  font-size: .8rem;
  color: var(--ap-slate);
}

/* ==========================================================================
   Section "Pourquoi Audiophonics" (accueil) — progression numérotée
   ========================================================================== */

.ap-why-section {
  background: var(--ap-paper-dim);
  padding-block: 3.5rem;
  margin-bottom: 2rem !important;
}
.ap-why-section .products-section-title {
  text-align: center !important;
  margin-bottom: 2.5rem;
}
.ap-why-item {
  text-align: center;
  padding-inline: 1rem;
}
.ap-why-item .k {
  display: block;
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ap-slate-light);
  margin-bottom: .6rem;
}
.ap-why-item h3 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.ap-why-item p {
  font-size: .9rem;
  color: var(--ap-slate);
  margin-bottom: 0;
}

/* ==========================================================================
   Bloc newsletter (accueil)
   ========================================================================== */

.ap-newsletter-section {
  background: var(--ap-ink);
  color: var(--ap-paper);
  padding-block: 2.75rem;
  margin-bottom: 2rem !important;
  border-radius: var(--ap-radius);
}
.ap-newsletter-section h3 {
  font-family: var(--ap-font-display);
  color: #fff;
  margin-bottom: .35rem;
}
.ap-newsletter-section p {
  color: rgba(247, 244, 239, .75);
  margin-bottom: 0;
}
.ap-newsletter-section .block_newsletter h4 {
  display: none;
}
.ap-newsletter-section .block_newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.ap-newsletter-section .block_newsletter input[type="email"] {
  flex: 1 1 16rem;
  border: 0;
  border-radius: var(--bs-border-radius);
  padding: .6rem 1rem;
}
.ap-newsletter-section .block_newsletter input[type="submit"] {
  border: 0;
  border-radius: var(--bs-border-radius);
  padding: .6rem 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  background-color: var(--ap-accent);
  color: #fff;
  transition: filter var(--ap-transition), transform var(--ap-transition);
}
.ap-newsletter-section .block_newsletter input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ap-newsletter-section .block_newsletter p {
  flex-basis: 100%;
  font-size: .78rem;
  color: rgba(247, 244, 239, .6);
  margin: 0;
}

/* ==========================================================================
   Catalogue — fiches produit (listing)
   ========================================================================== */

.product-miniature {
  border-radius: var(--ap-radius);
  transition: background-color var(--ap-transition), box-shadow var(--ap-transition);
  border-bottom-color: var(--ap-line) !important;
}
.product-miniature:hover {
  background-color: var(--ap-accent-soft);
  box-shadow: var(--ap-shadow-sm);
}
.product-miniature .thumbnail-container {
  overflow: hidden;
  border-radius: var(--ap-radius);
}
.product-miniature .product-thumbnail img {
  transition: transform .35s ease;
  border-radius: var(--bs-border-radius);
}
.product-miniature:hover .product-thumbnail img {
  transform: scale(1.05);
}
.product-title a {
  transition: color var(--ap-transition);
}
.product-title a:hover {
  color: var(--ap-accent-deep);
}

/* ==========================================================================
   #content-wrapper-bottom (hook displayHomeBottom) : "Our top categories"
   et "En promo" partagent ce hook côté back-office ; l'ordre visuel est
   permuté ici en CSS (flex + order) pour placer les catégories avant la
   promo sans dépendre d'une réorganisation en base de données. — conservé.
   ========================================================================== */

#content-wrapper-bottom {
  display: flex;
  flex-direction: column;
}
#content-wrapper-bottom .home-categories-block {
  order: 1;
}
#content-wrapper-bottom .home-specials-block {
  order: 2;
}

/* ==========================================================================
   Bloc "catégories phares" (accueil) — vignettes groupées par univers
   (ap_homefeaturedcat/homeblock.tpl)
   ========================================================================== */

.ap-univ-band {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
}
.ap-univ-band h3 {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
  white-space: nowrap;
}
.ap-univ-band .rule {
  flex: 1;
  height: 1px;
  background: var(--ap-line);
}
.ap-univ-band .cnt {
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  color: var(--ap-slate-light);
  white-space: nowrap;
}

.card.border-0 {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ap-paper-dim);
}
.card.border-0 .card-img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
}
.card.border-0 > .card-img,
.card.border-0 .card-img-overlay {
  transition: transform .35s ease, box-shadow var(--ap-transition);
}
.card.border-0:hover .card-img {
  transform: scale(1.03);
}
.card.border-0 .card-img-overlay {
  background: linear-gradient(180deg, rgba(21, 24, 28, 0) 40%, rgba(21, 24, 28, .82) 100%);
  border-radius: inherit;
}
.card.border-0 .card-img-overlay h4,
.card.border-0 .card-img-overlay .h4,
.card.border-0 .card-img-overlay span {
  font-family: var(--ap-font-display);
  color: #fff;
}

/* ==========================================================================
   Cartes / modales
   ========================================================================== */

.card {
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
}
.modal-content {
  border-radius: var(--ap-radius);
  border: 0;
  box-shadow: var(--ap-shadow-lg);
}

/* ==========================================================================
   Grille "produit shelf" — grille responsive, jamais de grand vide quand
   une ligne n'est pas remplie (ex: une seule promo) : les cartes gardent
   une largeur confortable et s'alignent à gauche naturellement. — conservé.
   ========================================================================== */

.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1.1rem;
}
.product-grid > [class*="col"] {
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 575.98px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
}

.product-grid > .card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow var(--ap-transition), transform var(--ap-transition), border-color var(--ap-transition);
}
.product-grid > .card:hover {
  box-shadow: var(--ap-shadow-md);
  border-color: var(--ap-accent);
  transform: translateY(-3px);
}

.product-grid .thumbnail-container {
  position: relative;
  background: var(--ap-paper);
  padding: 1.5rem;
  border-radius: 0;
  border-bottom: 1px solid var(--ap-line);
  overflow: hidden;
}
.product-grid .thumbnail-container img {
  transition: transform .35s ease;
}
.product-grid .card:hover .thumbnail-container img {
  transform: scale(1.06);
}

.product-grid .discount_flag {
  position: absolute;
  top: 0;
  left: .75rem;
  background: var(--ap-danger);
  color: #fff;
  font-family: var(--ap-font-mono);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  padding: .45rem .55rem .35rem;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.product-grid .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem .25rem;
}
.product-grid .card-eyebrow {
  color: var(--ap-slate);
}
.product-grid .card-title {
  font-family: var(--ap-font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ap-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin-bottom: .5rem;
}
.product-grid .product-availability {
  font-size: .8rem;
}
.product-grid .card-footer {
  background: transparent;
  border: 0;
  padding: 0 1.1rem 1.1rem;
  font-family: var(--ap-font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ap-ink);
}
.product-grid .regular-price {
  font-size: .8rem;
  font-weight: 400;
  color: var(--ap-slate-light);
  text-decoration: line-through;
  margin-right: .4rem;
}
.product-grid .discount-percentage,
.product-grid .discount-amount {
  display: inline-block;
  font-family: var(--ap-font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
  background: var(--ap-danger);
  padding: .1rem .5rem;
  border-radius: var(--bs-border-radius-pill, 50rem);
}

/* Étoiles d'avis produit — accent plutôt que le jaune Bootstrap par défaut */
.ap-rating-stars .star,
.star-content,
.comments_note .star_content,
.rating .star {
  color: var(--ap-accent) !important;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

#footer {
  background-color: var(--ap-ink);
  color: rgba(247, 244, 239, .8);
}
#footer h3,
#footer .h3,
#footer .fs-5 {
  display: inline-block;
  font-family: var(--ap-font-mono);
  font-size: .8rem !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ap-accent);
  margin-bottom: .5rem;
}
#footer .nav-link {
  color: rgba(247, 244, 239, .75);
  padding-block: .3rem;
  transition: color var(--ap-transition), padding-left var(--ap-transition);
}
#footer .nav-link:hover,
#footer a:hover {
  color: #fff;
  padding-left: .25rem;
}
#footer .darker {
  background-color: rgba(0, 0, 0, .2);
}
.ap-footer-bottom {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(247, 244, 239, .55);
}
.ap-footer-bottom a {
  color: rgba(247, 244, 239, .55);
}
.ap-footer-bottom a:hover {
  color: #fff;
}

/* Bloc marque (logo + accroche + réseaux sociaux), colonne footer.tpl */
.ap-footer-brand .ap-footer-logo {
  filter: brightness(0) invert(1);
  opacity: .92;
}
.ap-footer-brand p {
  color: rgba(247, 244, 239, .7);
  font-size: .88rem;
  max-width: 26rem;
  margin-bottom: 1.25rem;
}
.ap-footer-social {
  display: flex;
  gap: .75rem;
}
.ap-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(247, 244, 239, .08);
  color: rgba(247, 244, 239, .85);
  transition: background-color var(--ap-transition), color var(--ap-transition), transform var(--ap-transition);
}
.ap-footer-social a:hover {
  background: var(--ap-accent);
  color: #fff;
  transform: translateY(-2px);
}
.ap-footer-social svg,
.ap-footer-social .apicon {
  width: 1.1rem;
  height: 1.1rem;
}

/* ==========================================================================
   En-tête de page catégorie
   ========================================================================== */

.block-category {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ap-line);
}
.block-category .h1 {
  font-size: 1.85rem;
}
.block-category #category-description {
  color: var(--ap-slate);
  max-width: 60rem;
}

#subcategories {
  margin-bottom: 1.5rem;
}
.subcategory-image {
  position: relative;
  border-radius: var(--ap-radius);
  overflow: hidden;
  transition: transform var(--ap-transition);
}
.subcategory-image:hover {
  transform: translateY(-2px);
}
.subcategory-image img {
  transition: transform .35s ease;
}
.subcategory-image:hover img {
  transform: scale(1.04);
}
.subcategory-image h5 {
  margin: 0;
}
.subcategory-name {
  font-family: var(--ap-font-display);
  font-size: .95rem;
}
.moresubcat-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ap-font-mono);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ap-accent-deep);
  cursor: pointer;
}
.moresubcat-btn:hover {
  color: var(--ap-accent);
}

/* ==========================================================================
   Arbre de catégories (ps_categorytree, colonne gauche des pages catégorie)
   ========================================================================== */

.category-tree {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
  padding: 1rem 1.1rem;
}
.category-tree ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}
.category-tree > ul {
  padding-left: 0;
}
.category-tree li {
  padding-block: .2rem;
}
.category-tree a {
  color: var(--ap-ink);
  text-decoration: none;
  font-size: .9rem;
  transition: color var(--ap-transition);
}
.category-tree a:hover,
.category-tree a.selected {
  color: var(--ap-accent-deep);
  font-weight: 600;
}

/* ==========================================================================
   Tri / pagination (page catégorie)
   ========================================================================== */

.products-sort-order {
  position: relative;
}
.products-sort-order .select-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--bs-border-radius);
  padding: .5rem 1rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ap-ink);
}
.products-sort-order .select-title:hover {
  border-color: var(--ap-accent);
  color: var(--ap-accent-deep);
}
.products-sort-order .dropdown-menu {
  border: 0;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-md);
  padding: .5rem 0;
}
.products-sort-order .select-list {
  display: block;
  padding: .5rem 1.1rem;
  font-size: .85rem;
  color: var(--ap-ink);
}
.products-sort-order .select-list:hover,
.products-sort-order .select-list.current {
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
}
.sort-by {
  font-weight: 600;
  color: var(--ap-ink);
}

/* ==========================================================================
   Recherche à facettes (ps_facetedsearch)
   ========================================================================== */

#search_filters {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
  padding: 1rem 1.1rem 1.25rem;
}
#search_filters .facets-heading {
  background-color: var(--ap-ink);
  color: #fff;
  font-family: var(--ap-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .6rem .9rem;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  margin: -1rem -1.1rem 1rem;
  width: calc(100% + 2.2rem);
}
#search_filters .clear-all-wrapper {
  margin-bottom: 1rem;
}
#search_filters .js-search-filters-clear-all {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ap-accent-deep);
  text-decoration: underline;
}
#search_filters .js-search-filters-clear-all:hover {
  color: var(--ap-accent);
}

#accordion-facets .facet {
  border: 0;
  border-bottom: 1px solid var(--ap-line);
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}
#accordion-facets .facet:last-child {
  border-bottom: 0;
}
#accordion-facets .accordion-button {
  padding: .5rem 0;
  font-family: var(--ap-font-mono);
  font-weight: 500;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ap-ink);
  background: transparent;
  box-shadow: none;
}
#accordion-facets .accordion-button:not(.collapsed) {
  color: var(--ap-accent-deep);
  background: transparent;
  box-shadow: none;
}
#accordion-facets .accordion-button::after {
  filter: none;
}
#accordion-facets .facet-list li {
  padding-block: .3rem;
}
#accordion-facets .facet-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .9rem;
}
#accordion-facets .facet-label.active,
#accordion-facets .facet-label:hover {
  color: var(--ap-accent-deep);
}
#accordion-facets .magnitude {
  color: var(--ap-slate-light);
  font-family: var(--ap-font-mono);
  font-weight: 400;
  font-size: .8rem;
  margin-left: .2rem;
}
#accordion-facets .facet-more {
  margin-top: .35rem;
}
#accordion-facets .facet-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ap-accent-deep);
}
#accordion-facets .facet-more > summary::-webkit-details-marker {
  display: none;
}
#accordion-facets .facet-more > summary:hover {
  color: var(--ap-accent);
  text-decoration: underline;
}
#accordion-facets .facet-more[open] > summary::after {
  content: " ▲";
}
#accordion-facets .facet-more:not([open]) > summary::after {
  content: " ▼";
}
#accordion-facets .facet-slider-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
#accordion-facets .facet-slider-inputs {
  display: flex;
  gap: .75rem;
}
#accordion-facets .facet-slider-inputs label {
  flex: 1;
  font-size: .78rem;
  color: var(--ap-slate-light);
}
#accordion-facets .facet-slider-inputs input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--ap-line);
  padding: .35rem .5rem;
}

#js-active-search-filters {
  border-bottom: 0 !important;
  margin-bottom: 1rem;
}
#js-active-search-filters .active-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
#js-active-search-filters .filter-block {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
  border: 1px solid rgba(31, 78, 216, .3);
  border-radius: var(--bs-border-radius-pill, 50rem);
  padding: .3rem .7rem;
  font-size: .8rem;
  font-weight: 600;
}
#js-active-search-filters .filter-block-facet {
  font-weight: 400;
  opacity: .75;
}
#js-active-search-filters .filter-block a {
  display: inline-flex;
  color: inherit;
}
#js-active-search-filters .filter-block a:hover {
  color: var(--bs-danger, #e65244);
}

/* ==========================================================================
   Page produit
   ========================================================================== */

/* Galerie et bloc d'achat collants (2026-09-02) — remplace l'ancien
   mécanisme .sticky-float/.sticky-float-wrapper (product_page_static.css,
   stock) qui reposait sur `top: var(--ap-header-height)`. Cette variable
   n'est définie nulle part dans ce thème (l'en-tête du site est
   position:static, pas fixed) : `top` retombait donc à `auto` et le bloc
   d'achat ne collait jamais réellement, il défilait avec le reste de la
   page. #content-wrapper prend maintenant toute la largeur du conteneur
   produit : rien n'est hooké sur displayRightColumnProduct (vérifié en
   base, apo_hook_module), la colonne de droite réservée par le layout
   stock (layout-both-columns.tpl) n'a donc plus lieu d'être ici — voir
   layout-product.tpl, qui neutralise `right_column` pour cette page. */
#product #content-wrapper {
  max-width: none !important;
  width: 100% !important;
}

.product-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
@media (min-width: 992px) {
  .product-head {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 400px);
    align-items: start;
    gap: 3rem;
  }
  .product-gallery,
  .product-buybox {
    position: sticky;
    top: 1.5rem;
  }
}

.product-gallery-media #carouselProductImages {
  max-width: 760px;
  margin: 0 auto;
}
.product-gallery-media .carousel-item img {
  width: 100%;
  height: auto;
}

.product-buybox {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  padding: 1.75rem;
  box-shadow: var(--ap-shadow-sm);
}

.product-buybox-header {
  margin-bottom: 1.5rem;
}
.product-buybox-header .product-reference-badge {
  display: inline-block;
  margin-bottom: .85rem;
}
.product-buybox-header .product-manufacturer-logo {
  display: block;
  margin-bottom: .6rem;
}
.product-buybox-header .product-manufacturer-logo img {
  display: block;
  height: 28px;
  width: auto;
}
.product-buybox-header .product-description-short {
  margin-top: .85rem;
  font-size: .92rem;
  color: var(--ap-slate);
}
.product-buybox-header .product-description-short p:last-child {
  margin-bottom: 0;
}

/* Les longues descriptions produit sont du contenu riche saisi en base
   (souvent avec une police "Montserrat" et des tailles fantaisistes propres
   à chaque produit) : on impose ici la police/couleur de la charte sans
   toucher à la mise en page (tableaux, images) de ce contenu éditorial. */
#description h1, #description h2, #description h3, #description h4,
#description h5, #description h6,
#description .desc-title-block h2,
#description .carac_block_title,
#description [class*="title"] {
  font-family: var(--ap-font-display) !important;
  color: var(--ap-ink) !important;
}
#description .carac_block_title {
  font-size: 1.6rem !important;
  margin-bottom: 1rem;
}
#description table th {
  font-family: var(--ap-font-mono);
  background: var(--ap-paper);
}

#carouselProductImages {
  border-radius: var(--ap-radius);
  overflow: hidden;
  background: var(--ap-paper);
}
#carouselProductImages .carousel-item img {
  cursor: zoom-in;
}
#carouselProductImages .carousel-control-prev,
#carouselProductImages .carousel-control-next {
  width: 3rem;
  height: 3rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: var(--ap-shadow-sm);
  opacity: .9;
}
#carouselProductImages .carousel-control-prev { left: 1rem; }
#carouselProductImages .carousel-control-next { right: 1rem; }
#carouselProductImages .carousel-control-prev-icon,
#carouselProductImages .carousel-control-next-icon {
  width: 1.2rem;
  height: 1.2rem;
  filter: invert(15%);
}

.product_thumb {
  border-radius: var(--bs-border-radius);
  padding: .2rem !important;
  margin: .2rem;
  transition: box-shadow var(--ap-transition);
}
.product_thumb.active,
.product_thumb:hover {
  box-shadow: 0 0 0 2px var(--ap-accent);
}

.product-reference-badge {
  display: inline-block;
  font-family: var(--ap-font-mono);
  background: var(--ap-paper-dim);
  color: var(--ap-slate);
  border-radius: var(--bs-border-radius-pill, 50rem);
  padding: .3rem .9rem;
  font-size: .78rem;
}

.product-title {
  font-family: var(--ap-font-display);
  font-size: 1.65rem !important;
  line-height: 1.15;
  margin: 0;
}
.comments-note .fw-bold {
  color: var(--ap-accent-deep);
}

.product-prices .current-price-value {
  font-family: var(--ap-font-mono);
  color: var(--ap-accent-deep);
}
.product-prices .regular-price {
  color: var(--ap-slate-light) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}
.product-prices .discount {
  background: var(--ap-accent);
  color: #fff;
  border-radius: var(--bs-border-radius-pill, 50rem);
  padding: .25rem .7rem;
  font-size: .8rem;
  text-transform: uppercase;
}
.product-prices .tax-shipping-delivery-label {
  font-size: .8rem;
  color: var(--ap-slate-light);
}

.product-variants-item {
  margin-bottom: 1rem;
}
.product-variants-item .control-label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}
.product-variants-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-variants-item ul .input-container {
  float: none !important;
}
.product-variants-item .radio-label {
  display: inline-block;
  padding: .4rem .9rem;
  border: 1px solid var(--ap-line);
  border-radius: var(--bs-border-radius-pill, 50rem);
  font-size: .85rem;
  transition: border-color var(--ap-transition), color var(--ap-transition);
}
.product-variants-item input:checked + .radio-label,
.product-variants-item input:checked ~ .radio-label {
  border-color: var(--ap-accent);
  color: var(--ap-accent-deep);
  font-weight: 600;
}
.product-variants-item .color {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ap-line);
  transition: box-shadow var(--ap-transition);
}
.product-variants-item input.input-color:checked + .color,
.product-variants-item input.input-color:checked ~ .color {
  box-shadow: 0 0 0 2px var(--ap-accent);
}

.product-add-to-cart .a2c-qty {
  border: 1px solid var(--ap-line);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}
.product-add-to-cart .a2c-qty button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--ap-paper);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background-color var(--ap-transition);
}
.product-add-to-cart .a2c-qty button:hover {
  background: var(--ap-paper-dim);
}
.product-add-to-cart .a2c-qty input {
  border: 0;
  background: #fff;
  width: 3.5rem;
  text-align: center;
  font-weight: 600;
}
.product-add-to-cart .a2c-btn {
  flex: 1;
  margin-left: .75rem;
  background: var(--ap-signal);
  border-color: var(--ap-signal);
  color: #fff;
  font-weight: 700;
  border-radius: var(--bs-border-radius);
  transition: transform var(--ap-transition), filter var(--ap-transition), box-shadow var(--ap-transition);
  box-shadow: var(--ap-shadow-sm);
}
.product-add-to-cart .a2c-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--ap-shadow-md);
  color: #fff;
}

.product-wishlist-btn {
  border-color: var(--ap-accent);
  color: var(--ap-accent-deep);
}
.product-wishlist-btn:hover {
  background: var(--ap-accent);
  border-color: var(--ap-accent);
  color: #fff;
}

.tabs .nav-tabs {
  border-bottom: 2px solid var(--ap-line);
}
.tabs .nav-tabs .nav-link {
  border: 0;
  font-weight: 600;
  color: var(--ap-slate);
  padding: .75rem 1.1rem;
  position: relative;
}
.tabs .nav-tabs .nav-link.active {
  color: var(--ap-accent-deep);
  background: transparent;
}
.tabs .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: -2px;
  height: 2px;
  background: var(--ap-accent);
}
.tabs .tab-content {
  border: 0 !important;
  padding-top: 1.5rem;
}

.table-product-discounts {
  width: 100%;
  border-collapse: collapse;
  margin-top: .5rem;
}
.table-product-discounts th,
.table-product-discounts td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--ap-line);
}
.table-product-discounts th {
  font-family: var(--ap-font-mono);
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--ap-slate-light);
}

/* Blocs de réassurance produit (apwarrantyreassurance, ap_product_reassurance, ap_irma) */
.ap-reassurance,
[class*="reassurance"] {
  --reassurance-accent: var(--ap-accent);
}

/* ==========================================================================
   Panier
   ========================================================================== */

/* Modale "Produit ajouté au panier" (ps_shoppingcart/modal.tpl) */
#blockcart-modal .product-name {
  font-family: var(--ap-font-display);
}
#blockcart-modal .image-container img {
  border-color: rgba(255, 255, 255, .35) !important;
}
#blockcart-modal #a2cModal {
  background-color: rgba(43, 163, 94, .18) !important;
  border-color: rgba(43, 163, 94, .4) !important;
  color: #fff !important;
}
#blockcart-modal .cart-content-btn .btn-secondary {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
#blockcart-modal .cart-content-btn .btn-primary {
  background-color: var(--ap-accent);
  border-color: var(--ap-accent);
}
#blockcart-modal .cart-content-btn .btn-primary:hover {
  background-color: var(--ap-accent-deep);
  border-color: var(--ap-accent-deep);
}
#blockcart-modal .product-total .value {
  font-family: var(--ap-font-mono);
}

.cart-items {
  list-style: none;
  padding-left: 0;
}
.cart-overview .cart-item {
  background: #fff !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: none !important;
  transition: border-color var(--ap-transition);
}
.cart-overview .cart-item:hover {
  border-color: var(--ap-accent) !important;
}

.cart-summary {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius) !important;
  box-shadow: none;
  padding: 1.5rem !important;
}
.cart-summary .cart-summary-line {
  padding-block: .4rem;
}
.cart-summary .cart-total,
.cart-detailed-totals .cart-summary-line.cart-total {
  font-family: var(--ap-font-mono);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ap-ink);
}

.cart-detailed-actions .btn.btn-primary {
  width: 100%;
  background-color: var(--ap-signal);
  border-color: var(--ap-signal);
}
.cart-detailed-actions .btn.btn-primary:hover {
  background-color: #228b4c;
  filter: brightness(1.05);
}

/* ==========================================================================
   Tunnel de commande — traitement volontairement sobre : priorité à la
   clarté et à la confiance plutôt qu'à l'identité visuelle sur ce parcours.
   ========================================================================== */

.header-nav {
  background-color: var(--ap-ink);
}

.checkout-step {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
}
.checkout-step .step-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
  font-family: var(--ap-font-mono);
  font-size: .95rem;
  font-weight: 600;
  flex-shrink: 0;
}
.checkout-step.-current .step-number {
  background: var(--ap-accent);
  color: #fff;
}
.checkout-step .step-edit {
  margin-left: auto;
  color: var(--ap-accent-deep);
  font-size: .85rem;
  font-weight: 600;
}

#js-checkout-summary,
#content.page-content .card {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
}

/* ==========================================================================
   Espace client
   ========================================================================== */

.customer-links .list-group-item-action {
  border: 0;
  border-radius: var(--bs-border-radius) !important;
  margin-bottom: .2rem;
  font-weight: 500;
  transition: background-color var(--ap-transition), color var(--ap-transition);
}
.customer-links .list-group-item-action.active,
.customer-links .list-group-item-action:hover {
  background-color: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
}

/* Fiches adresse (customer/_partials/block-address.tpl) */
.address {
  display: block;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color var(--ap-transition);
}
.address:hover {
  border-color: var(--ap-accent);
}
.address-body h4 {
  font-family: var(--ap-font-display);
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.address-body address {
  color: var(--ap-slate);
  font-style: normal;
  margin-bottom: 0;
}
.address-footer {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ap-line);
}
.address-footer a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ap-accent-deep);
}
.address-footer a:hover {
  color: var(--ap-accent);
}
.addresses-footer {
  margin-top: .5rem;
}
.addresses-footer a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--ap-accent-deep);
}
.addresses-footer a:hover {
  color: var(--ap-accent);
}

/* Historique de commandes (customer/_partials/order-history-block.tpl,
   utilisé à la fois sur l'aperçu du compte et sur la page "history") */
.customer-order-history {
  padding: 1rem 0;
  border-bottom-color: var(--ap-line) !important;
  align-items: center;
  gap: .5rem 1.5rem;
}
.customer-order-history .hb {
  font-size: .85rem;
}
.customer-order-history .h-ref strong,
.customer-order-history .h-date strong {
  color: var(--ap-slate);
  font-weight: 500;
}
.customer-order-history .h-ref {
  font-family: var(--ap-font-mono);
}
.customer-order-history .h-price {
  font-family: var(--ap-font-mono);
  font-weight: 600;
  color: var(--ap-accent-deep);
}
.customer-order-history .h-preview img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  background: var(--ap-paper);
  border: 1px solid var(--ap-line);
  border-radius: var(--bs-border-radius);
  padding: .25rem;
  margin-right: .35rem;
}
.customer-order-history .h-link {
  margin-left: auto;
}
.customer-order-history .h-link .btn {
  font-size: .8rem;
  padding: .45rem .9rem;
}

/* ==========================================================================
   Pages CMS / contact
   ========================================================================== */

.page-header {
  padding-block: 2.5rem;
  margin-bottom: 2.5rem !important;
  background: var(--ap-paper-dim);
}
.page-header h1 {
  font-family: var(--ap-font-display);
}

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */

.breadcrumb {
  font-family: var(--ap-font-mono);
  font-size: .78rem;
  letter-spacing: .01em;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ap-slate-light);
}
.breadcrumb-item a {
  color: var(--ap-slate);
}
.breadcrumb-item a:hover {
  color: var(--ap-accent-deep);
}
.breadcrumb-item.active {
  color: var(--ap-ink);
}

/* ==========================================================================
   Alertes de formulaire — le rouge Bootstrap par défaut (--bs-danger,
   compilé en dur dans theme.css) ne suit pas l'alias --ap-accent comme
   .btn-primary ; on aligne ici sur le rouge du thème (déjà utilisé ailleurs,
   ex. bouton supprimer du mini-panier).
   ========================================================================== */

.alert-danger {
  background-color: var(--ap-danger-soft);
  border-color: var(--ap-danger-soft);
  color: var(--ap-danger);
}

/* ==========================================================================
   Connexion / Inscription (customer/authentication.tpl, customer/registration.tpl,
   partials customer/_partials/login-form.tpl et customer-form.tpl). Ces deux
   pages jumelles ne recevaient qu'une mise en carte minimale (fond blanc +
   bordure, cf. règle .login-form ci-dessous, désormais partagée avec
   .register-form) et héritaient sinon du Bootstrap compilé brut : champs
   "form-floating" à fond papier peu contrasté sur la carte blanche, aucun
   padding interne (les champs touchaient la bordure de la carte), bouton
   "après-carte" (bascule login ↔ inscription) rendu identique au bouton de
   soumission (même btn-primary plein), messages d'erreur au rouge Bootstrap
   plutôt qu'au rouge du thème.
   ========================================================================== */

.login-form,
.register-form {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
  padding: 2rem;
}

.login-form .form-control,
.register-form .form-control {
  background: var(--ap-paper);
}
.login-form .form-control:focus,
.register-form .form-control:focus {
  background: #fff;
}

.login-form .form-floating > label,
.register-form .form-floating > label {
  color: var(--ap-slate);
}

.login-form .help-block,
.register-form .help-block {
  margin-top: -.5rem;
  margin-bottom: 1rem;
}
.login-form .alert-danger,
.register-form .alert-danger {
  margin-bottom: 0;
  padding: .75rem 1rem;
  font-size: .85rem;
}

.forgot-password {
  margin-top: -.5rem;
}
.forgot-password a {
  color: var(--ap-slate);
}
.forgot-password a:hover {
  color: var(--ap-accent-deep);
}

/* Bouton "afficher/masquer" du champ mot de passe (fields/password.tpl) */
.password-group .form-control {
  border-right: 0;
}
.password-group .input-group-text {
  border-color: var(--ap-line);
  background: var(--ap-paper) !important;
  color: var(--ap-slate);
  cursor: pointer;
  transition: color var(--ap-transition), border-color var(--ap-transition), background-color var(--ap-transition);
}
.password-group:focus-within .form-control,
.password-group:focus-within .input-group-text {
  border-color: var(--ap-accent);
}
.password-group:focus-within .input-group-text {
  background: #fff !important;
  color: var(--ap-accent-deep);
}

.no-account h2 {
  font-family: var(--ap-font-display);
  font-size: 1.3rem;
  margin-bottom: 0;
}

/* Connexion Google (module ap_googlesso, hook displayCustomerLoginFormAfter) :
   aucun token du thème n'y était appliqué (couleurs Bootstrap brutes). */
.ap-googlesso .btn {
  border-color: var(--ap-line);
  color: var(--ap-ink);
  box-shadow: none;
}
.ap-googlesso .btn:hover {
  background: var(--ap-paper-dim);
  border-color: var(--ap-slate-light);
  color: var(--ap-ink);
}
.ap-googlesso-separator hr {
  border-color: var(--ap-line);
  opacity: 1;
}
.ap-googlesso-separator span {
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ap-slate);
}

/* ==========================================================================
   Panier aside (mini-panier offcanvas, module ap_widgetpanier — #occart_panel,
   voir l'override themes/Audiophonics/modules/ap_widgetpanier/ap_widgetpanier.tpl).
   Panneau injecté dynamiquement en fin de <body> par le JS du module, hors
   du DOM du header : ne recevait jusqu'ici aucun style thème, uniquement
   Bootstrap brut (.border/.bg-light/.list-group).
   ========================================================================== */

.occart {
  --bs-offcanvas-width: 420px;
  box-shadow: var(--ap-shadow-lg);
}

.occart .offcanvas-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ap-line);
}

.occart .offcanvas-title {
  font-family: var(--ap-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ap-ink);
}

.occart .btn-close {
  opacity: .55;
  transition: opacity var(--ap-transition);
}
.occart .btn-close:hover,
.occart .btn-close:focus-visible {
  opacity: 1;
}

.occart .offcanvas-body {
  padding: 0 1.5rem 1.5rem;
}

/* Sections "Produits"/"Transporteurs" : on retire l'habillage carte
   Bootstrap brut (.border/.bg-light) pour un séquencement simple à la place,
   même logique que les .menu-block du panneau catégories du header. */
.occart .offcanvas-body > div.border {
  border: 0 !important;
  padding: 0 !important;
  margin: 1.25rem 0 !important;
}
.occart .offcanvas-body > div.border > h6 {
  background: transparent !important;
  text-align: left;
  padding: 0 0 .5rem !important;
  margin: 0 0 .5rem;
  font-family: var(--ap-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ap-slate);
  border-bottom: 1px solid var(--ap-line);
}

/* Liste produits */
.occart .oc_products_list .list-group-item,
.occart .oc_product_line {
  border: 0;
  border-bottom: 1px solid var(--ap-line);
  padding: .85rem 0;
  background: transparent;
}
.occart .oc_products_list .list-group-item:last-child,
.occart .oc_product_line:last-child {
  border-bottom: 0;
}
/* État panier vide : le seul <li> sans .oc_product_line (placeholder posé
   dans le tpl, jamais cloné depuis oc_product_line_template). */
.occart .oc_products_list > .list-group-item:only-child {
  text-align: center;
  color: var(--ap-slate);
  padding: 1.5rem 0;
  border-bottom: 0;
}

.occart .oc_product_line img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--ap-radius);
  background: var(--ap-paper-dim);
  padding: .25rem;
}

.occart .oc_name {
  color: var(--ap-ink);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  text-decoration: none;
}
.occart .oc_name:hover,
.occart .oc_name:focus-visible {
  color: var(--ap-accent-deep);
}

.occart .oc_product_line > span.d-flex.justify-content-between {
  margin-top: .6rem;
  align-items: center;
}

.occart .oc_minus,
.occart .oc_plus {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--ap-line);
  background: var(--ap-paper-dim);
  color: var(--ap-ink);
  border-radius: var(--ap-radius);
  line-height: 1;
  font-weight: 600;
  transition: background-color var(--ap-transition), color var(--ap-transition);
}
.occart .oc_minus:hover,
.occart .oc_plus:hover {
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
}

.occart .noinputnb {
  border: 1px solid var(--ap-line);
  border-left: 0;
  border-right: 0;
  text-align: center;
  font-weight: 600;
  color: var(--ap-ink);
  background: transparent;
}

.occart .oc_subtotal {
  font-weight: 700;
  color: var(--ap-ink);
  font-size: .92rem;
}

.occart .oc_delete {
  color: var(--ap-slate);
  background: transparent;
  border: 0;
  border-radius: var(--ap-radius);
  padding: .3rem;
  transition: color var(--ap-transition), background-color var(--ap-transition);
}
.occart .oc_delete:hover,
.occart .oc_delete:focus-visible {
  color: var(--ap-danger);
  background: var(--ap-danger-soft);
}

/* Transporteurs */
.occart .carrier_drop {
  background: var(--ap-paper-dim);
  border: 1px solid var(--ap-line);
  color: var(--ap-ink);
  box-shadow: none;
  text-align: left;
  font-weight: 500;
}
.occart .carrier_drop:hover,
.occart .carrier_drop:focus-visible {
  background: var(--ap-paper-dim);
  filter: brightness(.97);
}
.occart .carrier_drop:disabled {
  opacity: .6;
}

.occart .oc_carrier_list {
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-md);
  padding: .25rem;
}
.occart .oc_carrier_list .oc_name {
  border-radius: var(--ap-radius);
}
.occart .oc_carrier_list .oc_name:hover,
.occart .oc_carrier_list .oc_name.active {
  background: var(--ap-accent-soft);
  color: var(--ap-accent-deep);
}

/* Totaux */
.occart .px-2 > div {
  display: flex;
  justify-content: space-between;
  padding: .3rem 0;
  font-size: .88rem;
  color: var(--ap-slate);
}
.occart .oc_total_label,
.occart .oc_total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ap-ink);
}
.occart .px-2 > div:last-child {
  border-top: 1px solid var(--ap-line);
  margin-top: .4rem;
  padding-top: .6rem;
}

.occart .btn.btn-primary {
  margin-top: 1rem !important;
}

/* État de rafraîchissement Ajax (posé par le JS du module pendant les maj
   de quantité/transporteur) : aucun retour visuel n'existait avant. */
.occart .locked_for_update {
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--ap-transition);
}