/* ==========================================================================
   FICHE PRODUIT — templates/commun/produit/fiche.html.twig
   ========================================================================== */

.fiche { padding-top: var(--e-5); }

/* ------------------------------------------------------------ haut de fiche */
.produit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-7); align-items: start; margin-top: var(--e-5); }
@media (max-width: 960px) { .produit { grid-template-columns: 1fr; gap: var(--e-5); } }

.visuel {
  position: relative; margin: 0; display: grid; place-items: center;
  aspect-ratio: 5 / 4; padding: var(--e-7);
  background: var(--md-papier); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2);
  cursor: zoom-in;
}
.visuel img { max-width: min(440px, 100%); max-height: 100%; width: auto; object-fit: contain; }
.visuel__etiquettes { position: absolute; z-index: 2; top: var(--e-4); left: var(--e-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.visuel .etiquette--destockage { height: 30px; padding: 0 var(--e-3); font-size: 13px; }
.visuel__agrandir {
  position: absolute; right: var(--e-4); bottom: var(--e-4);
  display: grid; place-items: center; width: 42px; height: 42px;
  border: var(--trait-1) solid var(--md-trait-2); border-radius: 50%;
  background: var(--md-papier); color: var(--md-encre-2); cursor: pointer;
}
.visuel__agrandir:hover { border-color: var(--md-encre); color: var(--md-encre); }
.visuel__mention { position: absolute; left: var(--e-4); bottom: var(--e-4); margin: 0; font-size: var(--t-0); color: var(--md-encre-3); }

.produit__infos { display: flex; flex-direction: column; gap: var(--e-5); }
.produit__titre { margin: 0; font-size: clamp(1.875rem, 2.2vw + 1.1rem, 2.75rem); }

.identifiants { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4) var(--e-7); margin: 0; }
.identifiant { display: grid; gap: 2px; }
.identifiant dt { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-encre-3); }
.identifiant dd { display: flex; align-items: center; gap: var(--e-3); margin: 0; font-family: var(--f-mono); font-size: var(--t-3); font-weight: 600; }
.identifiant--principal dd { font-size: var(--t-5); font-weight: 800; letter-spacing: -.01em; }

/* ------------------------------------------------------------- bloc d'achat */
.achat { padding: var(--e-5); background: var(--md-papier); border: var(--trait-1) solid var(--md-trait); border-top: 4px solid var(--marque); border-radius: var(--rayon-2); box-shadow: var(--ombre-1); }

.apercu__titre { margin: 0 0 var(--e-3); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--md-encre-3); }

/* ----------------------------------------------------------------- sommaire */
.sommaire {
  position: sticky; top: calc(var(--h-entete) + var(--wp-admin--admin-bar--height, 0px)); z-index: var(--plan-sommaire);
  margin-top: var(--e-8);
  background: rgba(247, 249, 252, .94); backdrop-filter: blur(8px);
  border-bottom: var(--trait-1) solid var(--md-trait);
}
.sommaire__liste { display: flex; gap: var(--e-2); list-style: none; overflow-x: auto; scrollbar-width: none; }
.sommaire__lien {
  display: inline-flex; align-items: center; gap: var(--e-2); height: 58px; padding: 0 var(--e-3);
  color: var(--md-encre-2); text-decoration: none; white-space: nowrap; font-size: var(--t-1); font-weight: 700;
  box-shadow: inset 0 -3px 0 transparent;
}
.sommaire__lien:hover { color: var(--md-encre); }
.sommaire__lien[aria-current="true"] { color: var(--md-encre); box-shadow: inset 0 -3px 0 var(--marque); }
.sommaire__n { min-width: 24px; padding: 0 7px; border-radius: var(--rayon-pilule); background: var(--md-trait); font-family: var(--f-mono); font-size: 11px; line-height: 20px; text-align: center; color: var(--md-encre-2); }
.sommaire__lien[aria-current="true"] .sommaire__n { background: var(--marque); color: var(--sur-marque); }

/* ------------------------------------------------------- sections de fiche */
/* minmax(0, 1fr) : sans lui, la rangée défilante et les tableaux élargissent
   la piste de grille à leur largeur propre, et toute la page déborde en mobile */
.fiche__sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); margin-top: var(--e-5); }

.caracteristiques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); margin: 0; }
@media (max-width: 760px) { .caracteristiques { grid-template-columns: 1fr; } }
.caracteristique { display: flex; justify-content: space-between; gap: var(--e-5); padding: var(--e-3) 0; border-bottom: var(--trait-1) solid var(--md-trait); }
.caracteristique dt { color: var(--md-encre-2); }
.caracteristique dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Dans la même famille : rangée défilante, quatre cartes visibles sur grand écran */
.defilant { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: var(--e-4); overflow-x: auto; padding-bottom: var(--e-3); scroll-snap-type: x mandatory; }
.defilant > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .defilant { grid-auto-columns: calc((100% - 3 * var(--e-4)) / 4); } }

/* ------------------------------------------------------ loupe sur la photo */
.loupe { position: relative; padding: var(--e-6); border: 0; border-radius: var(--rayon-2); background: var(--md-papier); box-shadow: var(--ombre-2); max-width: min(92vw, 760px); }
.loupe::backdrop { background: rgba(14, 23, 38, .75); }
.loupe img { width: 100%; max-height: 80vh; object-fit: contain; }
.loupe__fermer { position: absolute; top: var(--e-3); right: var(--e-3); width: 40px; height: 40px; border: var(--trait-1) solid var(--md-trait-2); border-radius: 50%; background: var(--md-papier); cursor: pointer; font-size: 1.25rem; line-height: 1; }

/* ------------------------------------------------- galerie de photos */
.produit__visuels { display: grid; gap: var(--e-3); min-width: 0; }
.visuel__dispo { position: absolute; top: var(--e-4); right: var(--e-4); z-index: 1; }
.vignettes { display: flex; gap: var(--e-2); overflow-x: auto; list-style: none; }
.vignette { display: grid; place-items: center; width: 76px; height: 76px; padding: var(--e-1); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-1); background: var(--md-papier); cursor: pointer; }
.vignette img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vignette[aria-pressed="true"] { border: var(--trait-2) solid var(--md-encre); }
.produit__logo-marque { margin-top: var(--e-3); height: auto; }

/* ------------------------------------------------ bloc d'achat : ce-* */
.achat { display: grid; gap: var(--e-4); }
.achat > :empty { display: none; }
.achat ce-product-price .product-information-price { text-align: left !important; }
.achat ce-product-price h4 { margin: 0; font-family: var(--f-titre); font-size: var(--t-6); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.achat ce-product-price h4 strong { font-weight: 800; }
.achat ce-product-price h4::after { content: " HT"; font-family: var(--f-texte); font-size: var(--t-1); font-weight: 600; letter-spacing: 0; color: var(--md-encre-3); }
.achat ce-product-price p { margin: var(--e-2) 0 0; font-size: var(--t-1); color: var(--md-encre-2); }
/* visiteur : invitation à se connecter, rendue par le composant */
.achat ce-product-price .alert { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.achat ce-product-price .alert p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: 0; font-size: var(--t-2); color: var(--md-encre); font-weight: 600; }
.achat ce-product-price .alert .fa { display: none; }
.achat ce-product-price .alert .btn { margin: 0 !important; min-height: 44px; padding: 0 var(--e-5); border: var(--trait-2) solid var(--bouton-fond); background: var(--bouton-fond); color: var(--bouton-texte); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.achat ce-product-price .alert .btn:hover { background: var(--bouton-fond-survol); border-color: var(--bouton-fond-survol); color: var(--bouton-texte-survol); }
.achat ce-product-stock-alert .alert { margin: 0; }
.achat ce-product-prices table { margin: 0; }
.achat ce-add-to-cart form.cart { display: flex; gap: var(--e-3); margin: 0; }
.achat ce-add-to-cart .quantity input.qty { width: 84px; height: 48px; }
.achat ce-add-to-cart .single_add_to_cart_button { flex: 1; min-height: 48px; }
.achat .js-ce-call-back-cta:empty { display: none; }
.achat__depart table { margin: 0; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }

/* --------------------------------------------------------- promotions */
.promos { display: grid; gap: var(--e-3); }
.promo { max-width: 100%; height: auto; border-radius: var(--rayon-2); }
.promo--texte { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--rayon-2); background: var(--marque-voile); border: var(--trait-1) solid var(--marque-trait); }

/* documents techniques dans la fiche */
.documents--fiche { margin-top: var(--e-5); }

/* fiche inactive */
.produit--inactif { grid-template-columns: 1fr; max-width: 760px; }

@media (max-width: 760px) {
  .tableau--vehicules th:nth-child(3), .tableau--vehicules td:nth-child(3) { white-space: normal; }
  .tableau--vehicules { font-size: var(--t-0); }
}

/* Piège de la couche « ancien » : une déclaration !important DANS une couche
   l'emporte sur une déclaration !important HORS couche. Les utilitaires
   Bootstrap (.text-center, .d-none…) gardent donc la main sur le conteneur
   où ils sont posés : on cible ses enfants, qui n'héritent plus. */
.achat ce-product-price .product-information-price > * { text-align: left; }
.achat ce-product-stock-alert .alert > * { text-align: left; }
.achat ce-product-stock-alert .alert { display: flex; align-items: center; gap: var(--e-2); }

/* mobile : piste bornée, sinon la photo (400 px) élargit toute la fiche */
@media (max-width: 960px) { .produit { grid-template-columns: minmax(0, 1fr); } .visuel { padding: var(--e-5); } }
.produit__visuels { grid-template-columns: minmax(0, 1fr); }

/* mise en page des anciens sites : photo collante à gauche, toutes les informations
   dans la colonne de droite (caractéristiques et logistique comprises) ; OEM et
   véhicules en pleine largeur dessous */
@media (min-width: 961px) {
  /* au-dessus de 960 px seulement : sans media, cette règle venue après annulait la colonne unique du mobile */
  .produit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .produit__visuels { position: sticky; top: calc(var(--h-entete) + var(--wp-admin--admin-bar--height, 0px) + var(--e-4)); }
}
.bloc.bloc--colonne { margin: 0; }
.fiche__sections { margin-top: var(--e-7); }

/* Produit vendu à prix NET à certains groupes clients seulement */
.produit-reserve { margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4); border-left: 4px solid var(--marque); background: var(--md-fond, #F5F5F4); font-weight: 600; }