/* ==========================================================================
   My Lave Auto, DA v3 : page Boutique (Figma 221:2). Complète v3.css sans le modifier.
   En-tête clair (pas de photo en tête), héros + encart, catalogue filtré (shop.js),
   puis composants communs (étapes, centre, FAQ, SEO).
   ========================================================================== */

/* ---------- En-tête : variante claire, état initial seulement (l'état figé .is-fixe reste celui du socle) ---------- */
@media (max-width: 1100px) {
  /* menu ouvert : fond sombre, on rend au logo et au burger leur version blanche */
}

/* ---------- 1. Héros clair : texte à gauche, vitrine des flacons à droite (animation de la v1 du 29/09), bandeau d'achat dessous ---------- */
.sh3-hero { position: relative; min-height: 560px; padding: 150px 0 72px; border-radius: 0 0 40px 40px; } /* fond : .nuit3 (v3.css) */
.sh3-hero__grille { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 560px); justify-content: space-between; align-items: center; gap: 48px; }
.sh3-hero__titre { margin: 14px 0 14px !important; font: 700 clamp(30px, 2.8vw, 40px)/1.36 var(--f-titre); letter-spacing: -.03em; color: #fff; }
.sh3-hero__chapo { max-width: 600px; font: 600 17px/1.5 var(--f-texte); letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.sh3-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 24px; }
.sh3-hero__actions .pil3 { min-height: 38px; }
/* Badge « Distributeur agréé » + logo officiel Carpolish (carpolish.fr, fond noir rendu transparent) */
.sh3-badge { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 7px 16px 7px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 13px/1.2 var(--f-texte); letter-spacing: -.01em; color: rgba(255, 255, 255, .78); }
.sh3-badge img { display: block; width: auto; height: 30px; }

/* Vitrine : flacons détourés posés sur un sol avec reflet ; montée floutée en cascade depuis le centre, parallaxe au défilement (shop.js) */
.sh3-vitrine { position: relative; aspect-ratio: 600 / 500; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.sh3-vitrine::before { content: ""; position: absolute; left: 50%; top: 44%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(96, 198, 200, .20), rgba(96, 198, 200, .06) 55%, transparent 72%); }
.sh3-vitrine__sol { position: absolute; left: 0; right: 0; top: 82%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 30%, rgba(255, 255, 255, .28) 70%, transparent); }
.sh3-vitrine__sol::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 90px; background: radial-gradient(50% 100% at 50% 0, rgba(96, 198, 200, .10), transparent 80%); }
.sh3-vitrine__flacons { position: absolute; left: 0; right: 0; top: 0; bottom: 18%; display: flex; justify-content: center; align-items: flex-end; }
.sh3-vitrine__flacon { position: relative; display: block; flex: none; will-change: transform; }
.sh3-vitrine__in { display: block; height: 100%; animation: sh3-monte 1.9s var(--doux) both; animation-delay: var(--dl, .2s); -webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(255, 255, 255, .16)); }
.sh3-vitrine__in img { display: block; height: 100%; width: auto; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .55)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.sh3-vitrine__flacon--1, .sh3-vitrine__flacon--5 { height: 66%; }
.sh3-vitrine__flacon--2, .sh3-vitrine__flacon--4 { height: 80%; z-index: 1; }
.sh3-vitrine__flacon--3 { height: 94%; z-index: 2; --dl: .15s; }
.sh3-vitrine__flacon--1 { margin-right: -2.4%; --dl: .55s; }
.sh3-vitrine__flacon--2 { margin-right: -1.6%; --dl: .35s; }
.sh3-vitrine__flacon--4 { margin-left: -1.6%; --dl: .35s; }
.sh3-vitrine__flacon--5 { margin-left: -2.4%; --dl: .55s; }
.sh3-vitrine__flacon--1 img, .sh3-vitrine__flacon--5 img { filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .6)) brightness(.82); }
@keyframes sh3-monte { from { opacity: 0; transform: translate3d(0, 60px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Bandeau « Achat et retrait au centre » : horizontal, centré sous le bouton */
.sh3-encart { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 40px; max-width: 1180px; margin: 56px auto 0; padding: 26px 36px; border-radius: 28px; background: #fff; border: 1px solid rgba(96, 191, 194, .35); box-shadow: var(--v3-ombre); }
.sh3-encart__titre { margin: 0; max-width: 11ch; font: 700 22px/1.2 var(--f-titre); letter-spacing: -.03em; color: #233737; }
.sh3-encart__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.sh3-encart__liste > div { padding: 2px 24px; border-left: 1px solid rgba(96, 191, 194, .3); }
.sh3-encart__liste dt { font: 700 12px/1.2 var(--f-texte); letter-spacing: 0; text-transform: uppercase; color: var(--v3-lagon); }
.sh3-encart__liste dd { margin: 4px 0 0; font: 700 15px/1.4 var(--f-texte); letter-spacing: -.03em; color: #233737; }
.sh3-encart__liste a { color: inherit; text-decoration: none; white-space: nowrap; }
.sh3-encart__liste a:hover { color: var(--v3-lagon); }

/* ---------- 1 bis. Packs mis en avant : affiches du client en entier, carte cliquable ---------- */
.sh3-packs { padding-top: 90px; padding-bottom: 0; }
.sh3-packs .shead3 { align-items: center; }
.sh3-packs__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.sh3-packs__rail[data-n="1"] { grid-template-columns: minmax(0, 340px); }
.sh3-packs__rail[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); }
.pack3 { position: relative; display: flex; flex-direction: column; border-radius: 26px; background: #0a1114; overflow: hidden; box-shadow: var(--v3-ombre); transition: box-shadow .5s var(--doux), transform .5s var(--doux); }
.pack3:hover { box-shadow: 0 10px 46px rgba(96, 191, 194, .3); transform: translateY(-4px); }
.pack3__visuel { aspect-ratio: 900 / 1598; overflow: hidden; } /* repli : le gabarit pose le ratio réel du visuel en style (affiches verticales puis carrées le 16/10/2026) */
.pack3__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--doux); }
.pack3:hover .pack3__visuel img { transform: scale(1.025); }
.pack3__pied { padding: 18px 22px 22px; border-top: 1px solid rgba(96, 191, 194, .3); }
.pack3__nom { margin: 0; font: 700 18px/1.2 var(--f-titre); letter-spacing: -.03em; color: #fefefe; }
.pack3__lien { color: inherit; text-decoration: none; }
.pack3__lien::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pack3__lien:focus-visible { outline: none; }
.pack3:has(.pack3__lien:focus-visible) { outline: 2px solid var(--v3-lagon); outline-offset: 4px; }
.pack3__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px !important; }
.pack3__prix { font: 700 20px/1.2 var(--f-texte); letter-spacing: -.03em; color: var(--v3-lagon); }
.pack3__voir { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-texte); letter-spacing: -.03em; color: #fefefe; }
.pack3:hover .pack3__voir { color: var(--v3-lagon); }

/* ---------- 2. Catalogue ---------- */
.sh3-cat { padding-top: 80px; padding-bottom: 130px; scroll-margin-top: 60px; }
.sh3-cat .shead3 { align-items: center; }
.v3 .sh3-cat__txt { max-width: 560px; font-size: 16px; line-height: 1.2; color: #6b7b7b; }
.sh3-filtres { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 86px; }
.sh3-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.sh3-onglets button { display: inline-flex; align-items: center; height: 39px; padding: 0 18px; border: 1px solid var(--v3-lagon); border-radius: 999px; background: #fff; color: #233737; font: 600 14px/1 var(--f-texte); letter-spacing: -.03em; cursor: pointer; transition: background .35s var(--doux), color .35s var(--doux); }
.sh3-onglets button:hover { background: rgba(96, 191, 194, .1); }
.sh3-onglets button[aria-pressed="true"] { background: var(--v3-lagon); color: #fff; }
.sh3-onglets button:focus-visible { outline: 2px solid var(--v3-lagon); outline-offset: 3px; }
.sh3-onglets sup { display: none; } /* shop.js ajoute le décompte par catégorie ; la maquette ne l'affiche pas (il reste dans l'aria-label) */
.sh3-compte { flex: none; font: 600 14px/1.2 var(--f-texte); color: #6b7b7b; }

.sh3-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 66px 24px; margin: 31px 0 0; padding: 0; list-style: none; transition: opacity .35s var(--doux); }
.sh3-grille.is-sortie .prod3 { opacity: 0; transform: translate3d(0, 12px, 0); }
.prod3 { position: relative; display: flex; flex-direction: column; padding: 13px 13px 25px; border-radius: 24px; background: #fff; border: 1px solid rgba(96, 191, 194, .35); box-shadow: var(--v3-ombre); transition: opacity .35s var(--doux), transform .35s var(--doux), box-shadow .5s var(--doux); }
.prod3.is-entree { animation: sh3-entree .9s var(--doux) both; animation-delay: calc(var(--i, 0) * .04s); }
@keyframes sh3-entree { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
.prod3:hover { box-shadow: 0 6px 40px rgba(96, 191, 194, .26); }
.prod3__photo { position: relative; aspect-ratio: 286 / 230; border-radius: 18px; background: #edf7f7; overflow: hidden; }
.prod3__photo img { position: absolute; left: 10%; top: 8%; width: 80%; height: 84%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(34, 54, 55, .16)); transition: transform .8s var(--doux); }
.prod3__photo--plat img { left: 12%; top: 14%; width: 76%; height: 72%; }
.prod3__photo--photo img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: none; }
.prod3__photo--affiche { background: #0a1114; }
.prod3__photo--affiche img { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; filter: none; } /* affiche montrée en entier, quel que soit son format */
.prod3:hover .prod3__photo img { transform: translateY(-5px) scale(1.03); }
.prod3__infos { padding: 14px 8px 0; }
.prod3__cat { font: 700 11px/1.2 var(--f-texte); letter-spacing: 0; text-transform: uppercase; color: var(--v3-lagon); }
.prod3__nom { margin: 6px 0 0; font: 700 18px/1.2 var(--f-titre); letter-spacing: -.03em; color: #233737; transition: color .3s; }
.prod3__lien { color: inherit; text-decoration: none; }
.prod3__lien::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.prod3__lien:focus-visible { outline: none; }
.prod3:has(.prod3__lien:focus-visible) { outline: 2px solid var(--v3-lagon); outline-offset: 4px; }
.prod3:hover .prod3__nom { color: var(--v3-lagon); }
.prod3__desc { margin-top: 6px !important; font: 600 14px/1.2 var(--f-texte); color: #6b7b7b; }
.prod3__pied { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px !important; padding: 0 8px; }
.prod3__prix { font: 700 20px/1.2 var(--f-texte); letter-spacing: -.03em; color: var(--v3-lagon); }
.prod3__dispo { font: 600 12px/1.2 var(--f-texte); color: #6b7b7b; }

/* ---------- 3. Comment acheter ? : étapes horizontales du socle (comme le Parrainage), sans photo ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .sh3-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .sh3-encart { column-gap: 28px; padding: 24px 28px; }
  .sh3-encart__liste > div { padding: 2px 18px; }
}
@media (max-width: 1100px) {
  .sh3-hero { padding-top: 130px; min-height: 0; }
  .sh3-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
  .sh3-encart { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .sh3-encart__titre { max-width: none; }
  .sh3-encart__liste > div:first-child { padding-left: 0; border-left: 0; }
  .sh3-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .sh3-packs__rail { gap: 18px; }
  .pack3__pied { padding: 16px 16px 18px; }
  .sh3-filtres { flex-wrap: wrap; margin-top: 48px; }
}
@media (max-width: 900px) {
  .sh3-hero__grille { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .sh3-vitrine { order: -1; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 600 / 440; }
  .sh3-encart { margin-top: 40px; }
  .sh3-encart__liste { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .sh3-encart__liste > div { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(96, 191, 194, .3); }
  .sh3-encart__liste > div:first-child { padding-top: 0; border-top: 0; }
}
@media (max-width: 760px) {
  .sh3-hero { padding: 108px 0 48px; border-radius: 0 0 28px 28px; }
  .sh3-hero__chapo { font-size: 16px; }
  .sh3-encart { padding: 24px 20px; border-radius: 22px; }
  .sh3-encart__titre { font-size: 20px; }
  .sh3-encart__liste dd { font-size: 15px; }
  .sh3-cat { padding-top: 64px; padding-bottom: 90px; }
  .sh3-packs { padding-top: 64px; }
  .sh3-packs__rail, .sh3-packs__rail[data-n] { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 28px calc(-1 * var(--g3)) 0; padding: 4px var(--g3) 12px; }
  .sh3-packs__rail::-webkit-scrollbar { display: none; }
  .pack3 { flex: 0 0 min(78%, 320px); scroll-snap-align: center; border-radius: 22px; }
  .pack3:hover { transform: none; }
  .sh3-filtres { margin-top: 32px; gap: 14px; }
  .sh3-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--g3)); padding: 2px var(--g3); }
  .sh3-onglets::-webkit-scrollbar { display: none; }
  .sh3-onglets button { flex: none; height: 36px; padding: 0 14px; font-size: 13px; }
  .sh3-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 22px; }
  .prod3 { padding: 7px 7px 16px; border-radius: 18px; }
  .prod3__photo { border-radius: 13px; }
  .prod3__infos { padding: 12px 6px 0; }
  .prod3__cat { font-size: 10px; }
  .prod3__nom { font-size: 15px; }
  .prod3__desc { font-size: 12.5px; }
  .prod3__pied { flex-wrap: wrap; row-gap: 2px; padding: 0 6px; margin-top: 10px !important; }
  .prod3__prix { font-size: 17px; }
  .prod3__dispo { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .prod3.is-entree, .sh3-vitrine__in { animation: none; }
}

/* Produit sans photo adéquate : cadre « Photo à venir » (règle photo du projet, 21/10/2026) */
.prod3__attente, .pp-scene__attente { display: grid; place-items: center; width: 100%; height: 100%; min-height: 180px; font: 600 14px/1.2 var(--f-texte); letter-spacing: -.02em; color: #6b7b7b; text-align: center; }
.pp-scene__attente { position: relative; z-index: 2; min-height: 320px; }