/**
 * VST43° — Accueil v2 (lot 2). Règles reprises de la maquette validée (maquettes/accueil/src.html, l. 10-131), préfixées.
 * S'ajoute à vst-categorie.css (jetons, cartes, panneaux). Même spécificité « deux identifiants » pour passer devant Divi.
 */
:is(.vst-plp, #vst-x#vst-y) .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
:is(.vst-plp, #vst-x#vst-y) .titre { margin: 0; font: 600 18px/1.2 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .1em; text-wrap: balance; }
:is(.vst-plp, #vst-x#vst-y) .surtitre-rouge { color: var(--vst-rouge-fonce); }
:is(.vst-plp, #vst-x#vst-y) .lien-fleche { font-size: 13px; color: var(--vst-encre); text-underline-offset: 3px; white-space: nowrap; }
:is(.vst-plp, #vst-x#vst-y) .lien-fleche::after { content: " →"; }
:is(.vst-plp, #vst-x#vst-y) .defile-x { list-style: none; margin: 0; padding: 0 var(--gouttiere); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); scrollbar-width: none; }
:is(.vst-plp, #vst-x#vst-y) .defile-x::-webkit-scrollbar { display: none; }
:is(.vst-plp, #vst-x#vst-y) .defile-x > li { scroll-snap-align: start; }

/* Hero */
:is(.vst-plp, #vst-x#vst-y) .hero { position: relative; height: min(64vh, 540px); min-height: 400px; overflow: hidden; background: #6b7f93; color: var(--vst-blanc); display: grid; align-content: end; }
:is(.vst-plp, #vst-x#vst-y) .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; }
:is(.vst-plp, #vst-x#vst-y) .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35,35,36,0) 40%, rgba(35,35,36,.35) 100%); }
:is(.vst-plp, #vst-x#vst-y) .hero-texte { position: relative; z-index: 2; text-shadow: 0 1px 12px rgba(35,35,36,.35); padding: 88px var(--gouttiere) 28px; background: linear-gradient(180deg, rgba(35,35,36,0) 0, rgba(35,35,36,.62) 72px, rgba(35,35,36,.7) 100%); display: grid; gap: 8px; }
:is(.vst-plp, #vst-x#vst-y) .hero-h1 { margin: 0; color: var(--vst-blanc); font: 600 12px/1.3 var(--font-titre); text-transform: uppercase; letter-spacing: .16em; text-shadow: 0 1px 8px rgba(35,35,36,.6); }
:is(.vst-plp, #vst-x#vst-y) .hero-titre { margin: 0; font: 500 28px/1.1 var(--font-titre); text-transform: uppercase; letter-spacing: .03em; text-wrap: balance; max-width: 16ch; }
:is(.vst-plp, #vst-x#vst-y) .hero-sous { margin: 0; font-size: 15px; line-height: 1.5; }
:is(.vst-plp, #vst-x#vst-y) .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
:is(.vst-plp, #vst-x#vst-y) .hero-actions .btn { height: 50px; }
:is(.vst-plp, #vst-x#vst-y) .hero-lien { color: var(--vst-blanc); font-size: 14px; text-underline-offset: 3px; }

/* Univers */
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles { padding: 24px 0 0; }
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles li { flex: 0 0 34%; }
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles a { display: grid; gap: 8px; text-decoration: none; }
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; background: var(--vst-photo); }
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles span { font: 600 12px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .12em; color: var(--vst-encre); }
:is(.vst-plp, #vst-x#vst-y) .univers-tuiles li:last-child span { color: var(--vst-rouge-fonce); }

/* Rangées de produits */
:is(.vst-plp, #vst-x#vst-y) .rangee { padding: var(--esp-5) 0 0; }
:is(.vst-plp, #vst-x#vst-y) .rangee-tete { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 var(--gouttiere) 20px; }
:is(.vst-plp, #vst-x#vst-y) .rangee-tete > div { display: grid; gap: 6px; }
:is(.vst-plp, #vst-x#vst-y) .cartes { gap: 12px; }
:is(.vst-plp, #vst-x#vst-y) .cartes > .produit { flex: 0 0 62%; }
:is(.vst-plp, #vst-x#vst-y) .cartes .produit .texte { padding: 10px 0 0; }
:is(.vst-plp, #vst-x#vst-y) .cartes .produit .texte + .pastilles { padding-left: 0; margin-left: -5px; }

/* Marques */
:is(.vst-plp, #vst-x#vst-y) .marques { padding: var(--esp-5) var(--gouttiere) 0; }
:is(.vst-plp, #vst-x#vst-y) .marques .titre { margin-bottom: 20px; }
:is(.vst-plp, #vst-x#vst-y) .marques-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:is(.vst-plp, #vst-x#vst-y) .marques-grille a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--vst-blanc); text-decoration: none; background: var(--vst-photo); }
:is(.vst-plp, #vst-x#vst-y) .marques-grille img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s ease; }
:is(.vst-plp, #vst-x#vst-y) .marques-grille a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35,35,36,0) 50%, rgba(35,35,36,.62) 100%); }
:is(.vst-plp, #vst-x#vst-y) .marques-grille span { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; font-size: 13px; line-height: 1.3; }
:is(.vst-plp, #vst-x#vst-y) .marques-grille b { display: block; font: 600 13px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
:is(.vst-plp, #vst-x#vst-y) .marques-grille a:hover img { transform: scale(1.03); }
:is(.vst-plp, #vst-x#vst-y) .marques-autres-titre { margin: 28px 0 12px; padding: 0; font: 600 13px/1.2 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .16em; }
:is(.vst-plp, #vst-x#vst-y) .marques-autres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
:is(.vst-plp, #vst-x#vst-y) .marques-autres a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 14px 6px 6px; background: var(--vst-blanc); border: 1px solid var(--vst-ligne); color: var(--vst-texte); text-decoration: none; font-size: 13px; line-height: 1.3; transition: border-color .2s ease; }
:is(.vst-plp, #vst-x#vst-y) .marques-autres img, :is(.vst-plp, #vst-x#vst-y) .marques-autres i { display: block; width: 48px; height: 48px; object-fit: cover; object-position: 50% 15%; background: var(--vst-photo); }
:is(.vst-plp, #vst-x#vst-y) .marques-autres b { display: block; font: 600 12px/1.2 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
:is(.vst-plp, #vst-x#vst-y) .marques-autres a:hover { border-color: var(--vst-encre); }

/* Éditorial */
:is(.vst-plp, #vst-x#vst-y) .edito { margin: var(--esp-5) 0 0; display: grid; }
:is(.vst-plp, #vst-x#vst-y) .edito figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--vst-photo); }
:is(.vst-plp, #vst-x#vst-y) .edito figure img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
:is(.vst-plp, #vst-x#vst-y) .edito-texte { padding: 28px var(--gouttiere) 0; display: grid; gap: 10px; justify-items: start; }
:is(.vst-plp, #vst-x#vst-y) .edito-texte h2 { margin: 0; font: 500 26px/1.12 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .04em; text-wrap: balance; }
:is(.vst-plp, #vst-x#vst-y) .edito-texte p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; max-width: 44ch; }
:is(.vst-plp, #vst-x#vst-y) .btn-second { display: inline-flex; align-items: center; text-decoration: none; }

/* Prix promo dans les cartes */
:is(.vst-plp, #vst-x#vst-y) .produit .px.promo ins { color: var(--vst-rouge-fonce); }

/* Boutiques */
:is(.vst-plp, #vst-x#vst-y) .boutiques { margin: var(--esp-5) 0 0; }
:is(.vst-plp, #vst-x#vst-y) .boutiques-texte { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--gouttiere) 32px; display: grid; gap: 8px; } /* 32 px sous la liste, comme avant le retrait de la photo */
:is(.vst-plp, #vst-x#vst-y) .liste-boutiques { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
:is(.vst-plp, #vst-x#vst-y) .liste-boutiques a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; border-bottom: 1px solid var(--vst-ligne); text-decoration: none; font-size: 14px; color: var(--vst-encre); }
:is(.vst-plp, #vst-x#vst-y) .liste-boutiques small { font-size: 13px; color: var(--vst-texte); }

/* Histoire */
:is(.vst-plp, #vst-x#vst-y) .histoire { padding: var(--esp-5) var(--gouttiere) 0; display: grid; gap: 14px; justify-items: start; max-width: 860px; }
:is(.vst-plp, #vst-x#vst-y) .histoire h2 { margin: 0; font: 500 22px/1.3 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .03em; text-wrap: balance; }
:is(.vst-plp, #vst-x#vst-y) .histoire h2 span { color: var(--vst-corail); font-weight: 600; }
:is(.vst-plp, #vst-x#vst-y) .histoire p { margin: 0; font-size: 15px; line-height: 1.75; max-width: 62ch; }

/* Newsletter */
:is(.vst-plp, #vst-x#vst-y) .lettre { margin: var(--esp-5) var(--gouttiere) 0; padding: 28px 20px; background: var(--vst-voile); display: grid; gap: 18px; }
:is(.vst-plp, #vst-x#vst-y) .lettre h2 { margin: 6px 0 6px; font: 500 22px/1.15 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .04em; }
:is(.vst-plp, #vst-x#vst-y) .lettre p { margin: 0; font-size: 14px; }
:is(.vst-plp, #vst-x#vst-y) .champ { display: grid; grid-template-columns: 1fr; gap: 8px; }
:is(.vst-plp, #vst-x#vst-y) .champ input { height: 50px; border: 1px solid var(--vst-ligne-ui); border-radius: var(--rayon); background: var(--vst-blanc); padding: 0 14px; font: 400 15px/1 var(--font-corps); color: var(--vst-encre); min-width: 0; }
:is(.vst-plp, #vst-x#vst-y) .champ input:focus { outline: 2px solid var(--vst-encre); outline-offset: 0; }
:is(.vst-plp, #vst-x#vst-y) .lettre .mention { margin-top: 10px; font-size: 13px; }
:is(.vst-plp, #vst-x#vst-y) .lettre .mention a { color: var(--vst-encre); }
:is(.vst-plp, #vst-x#vst-y) .lettre .etat { margin-top: 6px; font-weight: 600; color: var(--vst-encre); }

@media (min-width: 600px) {
  :is(.vst-plp, #vst-x#vst-y) .champ { grid-template-columns: 1fr auto; }
}
@media (min-width: 960px) {
  :is(.vst-plp, #vst-x#vst-y) .hero { height: min(78vh, 720px); }
  :is(.vst-plp, #vst-x#vst-y) .hero-texte { padding: 120px var(--gouttiere) 56px; max-width: none; }
  :is(.vst-plp, #vst-x#vst-y) .hero-texte > * { max-width: 760px; }
  :is(.vst-plp, #vst-x#vst-y) .hero-titre { font-size: 54px; max-width: 16ch; }
  :is(.vst-plp, #vst-x#vst-y) .hero-sous { font-size: 17px; }
  :is(.vst-plp, #vst-x#vst-y) .univers-tuiles { padding-top: 40px; }
  :is(.vst-plp, #vst-x#vst-y) .univers-tuiles ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; overflow: visible; }
  :is(.vst-plp, #vst-x#vst-y) .rangee { padding-top: 120px; }
  :is(.vst-plp, #vst-x#vst-y) .titre { font-size: 22px; }
  :is(.vst-plp, #vst-x#vst-y) .cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; overflow: visible; }
  :is(.vst-plp, #vst-x#vst-y) .cartes > .produit { flex: none; }
  :is(.vst-plp, #vst-x#vst-y) .marques { padding-top: 120px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-grille span { left: 20px; bottom: 20px; font-size: 13px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-grille b { font-size: 15px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-autres-titre { margin-top: 40px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-autres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-autres a { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-right: 16px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-autres img, :is(.vst-plp, #vst-x#vst-y) .marques-autres i { width: 56px; height: 56px; }
  :is(.vst-plp, #vst-x#vst-y) .marques-autres b { font-size: 13px; }
  :is(.vst-plp, #vst-x#vst-y) .edito { margin-top: 120px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  :is(.vst-plp, #vst-x#vst-y) .edito figure { aspect-ratio: 16 / 10; }
  :is(.vst-plp, #vst-x#vst-y) .edito-texte { padding: 0 var(--gouttiere) 0 64px; }
  :is(.vst-plp, #vst-x#vst-y) .edito-texte h2 { font-size: 40px; }
  :is(.vst-plp, #vst-x#vst-y) .boutiques { margin-top: 120px; }
  :is(.vst-plp, #vst-x#vst-y) .boutiques-texte { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: end; column-gap: 64px; padding-bottom: 40px; }
  :is(.vst-plp, #vst-x#vst-y) .boutiques .liste-boutiques { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  :is(.vst-plp, #vst-x#vst-y) .histoire { padding-top: 120px; justify-items: center; text-align: center; margin: 0 auto; }
  :is(.vst-plp, #vst-x#vst-y) .histoire h2 { font-size: 32px; }
  :is(.vst-plp, #vst-x#vst-y) .lettre { margin-top: 120px; padding: 48px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  :is(.vst-plp, #vst-x#vst-y) .lettre h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .marques-grille img { transition: none; } }
/* ——— Ajouts de l'intégration ——— */
/* Sections Divi pleine largeur, sans marges : la mise en page vient de la maquette. */
:is(.vst-plp, #vst-x#vst-y) .hero img { max-width: none; }
:is(.vst-plp, #vst-x#vst-y) .hero-texte .btn { color: #fff; }
:is(.vst-plp, #vst-x#vst-y) .hero-titre, :is(.vst-plp, #vst-x#vst-y) .hero-sous { color: var(--vst-blanc); }
:is(.vst-plp, #vst-x#vst-y) .titre { padding-bottom: 0; }
:is(.vst-plp, #vst-x#vst-y) .edito-texte h2, :is(.vst-plp, #vst-x#vst-y) .histoire h2, :is(.vst-plp, #vst-x#vst-y) .lettre h2 { padding-bottom: 0; }
:is(.vst-plp, #vst-x#vst-y) .liens-marques, :is(.vst-plp, #vst-x#vst-y) .liste-boutiques, :is(.vst-plp, #vst-x#vst-y) .marques-grille, :is(.vst-plp, #vst-x#vst-y) .marques-autres { padding-left: 0; }
:is(.vst-plp, #vst-x#vst-y) .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Paragraphes vides ajoutés par WordPress autour des éléments en ligne des modules Texte (relevé du 08.10 : +26 px dans l'éditorial). */
:is(.vst-plp, #vst-x#vst-y) .vst-acc p:empty, :is(.vst-plp, #vst-x#vst-y).vst-acc p:empty { display: none; }
:is(.vst-plp, #vst-x#vst-y) .edito-texte p:has(> .btn-second) { margin: 0; }
/* Newsletter : la rangée Divi porte la classe « lettre » ; elle garde ses marges latérales (pas de largeur 100 %). */
/* !important : le CSS du pied de page actuel (#76, et-core-unified-tb-76) vise « .et_pb_row_3 … .et_pb_row_8 » sans préfixe, en !important,
   et touche les rangées de la page (relevé du 08.10). À retirer quand le nouveau pied de page remplacera le #76. */
.vst-plp .et_pb_row.lettre { width: auto !important; max-width: none !important; }
.vst-plp .et_pb_row.lettre > .et_pb_column { width: auto; }
/* Formulaire Inscription de Divi au style du champ de la maquette (.champ). */
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form { background: none; padding: 0; color: var(--vst-texte); }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_description { display: none; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_form { padding: 0; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_fields > p { margin: 0; padding: 0; width: auto; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form input.input { width: 100%; height: 50px; border: 1px solid var(--vst-ligne-ui); border-radius: var(--rayon); background: var(--vst-blanc); padding: 0 14px; font: 400 15px/1 var(--font-corps); color: var(--vst-encre); box-shadow: none; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form input.input:focus { outline: 2px solid var(--vst-encre); outline-offset: 0; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_button { display: flex; align-items: center; justify-content: center; height: 50px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--rayon); background: var(--vst-rouge); color: #fff; font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_button:hover { background: var(--vst-rouge-fonce); }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_button::after { content: none; }
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_success h2 { font: 600 14px/1.5 var(--font-corps); color: var(--vst-encre); text-transform: none; letter-spacing: 0; }
/* Message de retour Divi 5 (succès et erreur) : blanc par défaut, illisible sur le corail */
:is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_result { color: var(--vst-encre); font: 600 14px/1.5 var(--font-corps); text-align: left; }
:is(.vst-plp, #vst-x#vst-y).vst-acc-lettre .mention { margin-top: 10px; font-size: 13px; }
/* Relevé du 17.10 : le module Texte enveloppe le surtitre dans un <p> à 14 px (ligne de 22,4 px au lieu des 25,6 de la maquette),
   et la colonne Divi du formulaire espace ses modules de 30 px (--vertical-gap) : la maquette colle la mention au champ (marge de 10 px)
   et réserve sous la mention la ligne d'état (6 + 20 px). */
:is(.vst-plp, #vst-x#vst-y) .lettre p:has(> .surtitre) { font-size: 16px; }
.vst-plp .et_pb_row.lettre > .et_pb_column:has(.vst-lettre-form) { row-gap: 0; padding-bottom: 26px; }
@media (min-width: 600px) {
  :is(.vst-plp, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_fields { grid-template-columns: 1fr auto; }
}
@media (min-width: 960px) {
  .vst-plp .et_pb_row.lettre { margin-left: 40px; margin-right: 40px; }
}
/* Accessibilité (Lighthouse du 08.10) : corail de texte de la DA (doc 08, 5,70:1) au lieu du corail clair ; lien souligné dans la mention. */
:is(.vst-plp, #vst-x#vst-y) .histoire h2 span { color: var(--vst-corail-texte); }
:is(.vst-plp, #vst-x#vst-y).vst-acc-lettre .mention a { color: var(--vst-encre); text-decoration: underline; text-underline-offset: 3px; }
/* Bandeaux photo en pleine largeur à toutes les tailles (retour de Gabrielle du 08.10 : pas de marge sur les côtés si aucune en haut).
   Le contenu (cartes, marques, histoire) reste centré sur 1 440 px. !important : CSS du pied #76 sur .et_pb_row_0…2. */
.vst-acc-hero .et_pb_row, .vst-acc-edito .et_pb_row, .vst-acc-boutiques .et_pb_row { max-width: none !important; width: 100% !important; }
/* Newsletter alignée sur la grille du contenu (1 440 px moins les gouttières), comme les cartes et les marques. */
@media (min-width: 960px) {
  .vst-plp .et_pb_row.lettre { max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; width: calc(100% - 80px) !important; }
}