/**
 * VST43° — Page catégorie v2 (lot 2). Portée : .vst-plp (sections du corps « Catégorie v2 ») et .vst-pan (panneaux, barre panier, message).
 * Règles reprises de la maquette validée (maquettes/_commun/commun.css), préfixées. Couleurs : variables globales Divi 5 (gcid-vst-*) avec repli.
 * Généré une fois depuis la maquette, puis maintenu à la main.
 * Spécificité : « :is(.vst-plp, .vst-pan, #vst-x#vst-y) » vaut deux identifiants (l'argument fictif #vst-x#vst-y n'existe pas dans la page).
 * Il le faut pour passer devant les règles globales de Divi 5 en « .et-db #et-boc .et-l h1 / a » (un identifiant + deux classes),
 * sans !important. Relevé du 08.10 : titres transparents (--gcid-heading-color) et liens corail sans ce réglage.
 */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) {
  --vst-rouge: var(--gcid-vst-rouge, #E21F20);
  --vst-rouge-fonce: var(--gcid-vst-rouge-fonce, #C41A1B);
  --vst-corail: var(--gcid-de2da1d0-439d-46e9-990a-e1a6d8120582, #E75736);
  --vst-voile: var(--gcid-vst-voile, #FBE6DF);
  --vst-texte: var(--gcid-vst-texte, #575758);
  --vst-encre: var(--gcid-vst-encre, #232324);
  --vst-fond: var(--gcid-vst-fond, #FFF8F4);
  --vst-blanc: var(--gcid-vst-blanc, #FFFDFC);
  --vst-ligne: var(--gcid-vst-ligne, #E9DED7);
  --vst-epuise: var(--gcid-vst-epuise, #B3AEAB);
  --vst-photo: var(--gcid-vst-photo, #F4F2F1);
  --vst-corail-texte: var(--gcid-vst-corail-texte, #B5361C);
  --vst-ligne-ui: var(--gcid-vst-ligne-ui, #9C7763);
  --vst-erreur: var(--gcid-vst-erreur, #9F1C1C);
  --font-titre: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-corps: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --gouttiere: 20px;
  --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 40px; --esp-5: 72px;
  --rayon: var(--gvid-vst-rayon, 4px);
  --entete: 56px;
  color: var(--vst-texte); font: 300 16px/1.6 var(--font-corps);
}
:is(.vst-plp, .vst-pan, #vst-x#vst-y) * { box-sizing: border-box; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) img { max-width: 100%; display: block; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(button, select) { font: inherit; color: inherit; cursor: pointer; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) a { color: inherit; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :focus-visible { outline: 2px solid var(--vst-encre); outline-offset: 2px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ——— Tête de page ——— */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ariane { padding: 10px var(--gouttiere) 0; font: 400 13px/1.3 var(--font-corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ariane a { text-decoration: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .tete-plp { padding: 10px var(--gouttiere) 0; display: grid; gap: 6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .surtitre { font: 600 12px/1.3 var(--font-titre); color: var(--vst-corail-texte); letter-spacing: .14em; text-transform: uppercase; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) h1 { margin: 0; font: 600 24px/1.15 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .05em; text-wrap: balance; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .intro { margin: 2px 0 0; font-size: 14px; line-height: 1.6; max-width: 62ch; }

/* Sous-catégories */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gouttiere) 4px; scrollbar-width: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers::-webkit-scrollbar { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--vst-ligne); border-radius: 999px; background: var(--vst-blanc); text-decoration: none; font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .1em; color: var(--vst-encre); white-space: nowrap; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers a small { font: 400 13px/1 var(--font-corps); letter-spacing: 0; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers a[aria-current="page"] { background: var(--vst-encre); border-color: var(--vst-encre); color: var(--vst-blanc); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers a[aria-current="page"] small { color: var(--vst-ligne); }

/* Barre d'outils : fixe sous l'en-tête */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils { position: sticky; top: var(--entete); z-index: 15; background: var(--vst-fond); padding: 10px 0; } /* aucun trait ; même espace en haut et en bas (le bas ne dépend plus des marges internes des rangées) */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 var(--gouttiere); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .bouton-outil { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--vst-encre); border-radius: var(--rayon); background: var(--vst-blanc); font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .12em; color: var(--vst-encre); position: relative; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .bouton-outil svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .bouton-outil .nb { min-width: 18px; height: 18px; border-radius: 9px; background: var(--vst-encre); color: var(--vst-blanc); font: 600 11px/18px var(--font-corps); letter-spacing: 0; padding: 0 5px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .bouton-outil .nb:empty { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .tri { position: relative; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .tri select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; border: 1px solid var(--vst-ligne-ui); border-radius: var(--rayon); background: var(--vst-blanc); padding: 0 34px 0 14px; font: 400 13px/1 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .tri::after { content: ""; position: absolute; right: 14px; top: 17px; width: 7px; height: 7px; border-right: 1.5px solid var(--vst-encre); border-bottom: 1.5px solid var(--vst-encre); transform: rotate(45deg); pointer-events: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourcis { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--gouttiere) 0; scrollbar-width: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .rac { flex: none; position: relative; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourcis::-webkit-scrollbar { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourci { flex: none; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--vst-ligne); border-radius: 999px; background: transparent; font: 400 13px/1 var(--font-corps); color: var(--vst-encre); white-space: nowrap; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourci::after { content: ""; width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translateY(-2px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourci[data-actif="true"] { border-color: var(--vst-encre); font-weight: 600; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .actifs { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gouttiere) 0; scrollbar-width: none; align-items: center; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .actifs:empty { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .actifs::-webkit-scrollbar { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .actif { flex: none; height: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--vst-voile); font: 400 13px/1 var(--font-corps); color: var(--vst-encre); white-space: nowrap; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .actif span { font-size: 15px; line-height: 1; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .effacer { flex: none; border: 0; background: none; font: 400 13px/1 var(--font-corps); text-decoration: underline; text-underline-offset: 3px; color: var(--vst-encre); padding: 8px 4px; white-space: nowrap; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .compte { padding: 2px var(--gouttiere) 8px; margin: 0; font: 400 13px/1.6 var(--font-corps); letter-spacing: 0; text-transform: none; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .compte:focus { outline: 0; }

/* ——— Grille ——— */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 3px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-width: 0; } /* 6 coloris et plus à 320 px : la rangée de pastilles n'élargit plus la carte (19.10) */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit a { text-decoration: none; color: inherit; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .visuel { position: relative; aspect-ratio: 2 / 3; background: var(--vst-photo); overflow: hidden; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .visuel > a { position: absolute; inset: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .visuel img + img { opacity: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .texte { padding: 8px 12px 0; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); } /* une ligne plus large que la carte ne l'élargit pas (« Prix outlet » à 320 px, 19.10) */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .texte + .pastilles { padding-left: 5px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .nom { font: 600 12px/1.3 var(--font-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .px { font: 400 13px/1 var(--font-corps); color: var(--vst-encre); font-variant-numeric: tabular-nums; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .px del { color: var(--vst-texte); margin-left: 6px; font-size: 13px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .px.promo ins { text-decoration: none; color: var(--vst-rouge-fonce); font-weight: 600; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .px.outlet { color: var(--vst-rouge-fonce); font-weight: 600; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .px.outlet .lib { color: var(--vst-texte); font-weight: 400; margin-right: 4px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 28px; padding: 0 8px; margin-top: 2px; font-size: 13px; line-height: 1; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastille { width: 26px; height: 28px; display: grid; place-items: center; border: 0; background: none; padding: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastille i { width: 16px; height: 16px; border-radius: 50%; background: var(--img) 50% 50% / cover no-repeat, var(--c, #ddd); box-shadow: inset 0 0 0 1px rgba(35,35,36,.18); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastille[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(35,35,36,.18), 0 0 0 1.5px var(--vst-fond), 0 0 0 2.5px var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastille.sans i { background: repeating-linear-gradient(135deg, #fff 0 3px, #D9D4D1 3px 4px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .pastilles span { margin-left: 4px; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--vst-rouge); color: #fff; font: 600 13px/1 var(--font-titre); letter-spacing: .06em; padding: 5px 7px; border-radius: 2px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .badges .badge { position: static; line-height: 1.15; }
@media (max-width: 599px) { :is(.vst-plp, .vst-pan, #vst-x#vst-y) .badges { max-width: calc(100% - 64px); } :is(.vst-plp, .vst-pan, #vst-x#vst-y) .badges .badge { font-size: 11px; letter-spacing: .03em; padding: 4px 6px; } } /* le cœur (44 px) garde sa place à 320 px (recette du 19.10) */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .badge.info { background: var(--vst-encre); } /* Nouveau, Dernières pièces : le rouge reste à la remise (doc 08 §1) */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .coeur { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .coeur svg { width: 18px; height: 18px; stroke: var(--vst-encre); fill: rgba(255,253,252,.6); stroke-width: 1.5; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .coeur[aria-pressed="true"] svg { fill: var(--vst-rouge); stroke: var(--vst-rouge); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide { position: absolute; z-index: 2; right: 4px; bottom: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,253,252,.94); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(35,35,36,.12); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide svg { width: 16px; height: 16px; stroke: var(--vst-encre); fill: none; stroke-width: 1.6; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide .libelle { display: none; }

/* Tuile éditoriale dans la grille */

/* Voir plus */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .suite { display: grid; justify-items: center; gap: 12px; padding: 48px var(--gouttiere) 0; text-align: center; font-size: 13px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .jauge { width: 180px; height: 2px; background: var(--vst-ligne); position: relative; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .jauge i { position: absolute; inset: 0 auto 0 0; background: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn-second { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; height: 48px; padding: 0 32px; border: 1px solid var(--vst-encre); border-radius: var(--rayon); background: transparent; font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .14em; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn-second:hover { background: var(--vst-encre); color: var(--vst-blanc); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .vide { grid-column: 1 / -1; padding: 40px var(--gouttiere); text-align: center; font-size: 14px; }

/* Bas de page catégorie */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .bas { padding: var(--esp-5) var(--gouttiere) 0; display: grid; gap: var(--esp-4); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .titre-section { margin: 0 0 var(--esp-2); font: 600 13px/1.2 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .14em; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .liens-marques { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .liens-marques li { display: block; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .liens-marques a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--vst-ligne); border-radius: 999px; text-decoration: none; font-size: 13px; color: var(--vst-encre); background: var(--vst-blanc); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .texte-seo { font-size: 14px; line-height: 1.7; max-width: 68ch; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .texte-seo p { margin: 0 0 12px; }
/* ——— Panneaux : filtres et ajout rapide (bas d'écran sur mobile, latéral sur desktop) ——— */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; background: var(--vst-blanc); color: var(--vst-texte); border-radius: 12px 12px 0 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau::backdrop { background: rgba(35,35,36,.45); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-int { display: grid; grid-template-rows: auto 1fr auto; max-height: 92vh; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 8px 8px var(--gouttiere); border-bottom: 1px solid var(--vst-ligne); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-tete h2 { margin: 0; font: 600 13px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .14em; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .fermer { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-corps { overflow-y: auto; padding: 0 var(--gouttiere); overscroll-behavior: contain; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-pied { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px var(--gouttiere) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--vst-ligne); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette { border-bottom: 1px solid var(--vst-ligne); padding: 18px 0 20px; scroll-margin-top: 8px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette h3 { margin: 0 0 12px; font: 600 12px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .12em; color: var(--vst-encre); display: flex; justify-content: space-between; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette h3 small { font: 400 13px/1 var(--font-corps); text-transform: none; letter-spacing: 0; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-taille { height: 44px; border: 1px solid var(--vst-ligne); background: var(--vst-blanc); border-radius: var(--rayon); font: 400 13px/1 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-taille[aria-pressed="true"] { border: 1.5px solid var(--vst-encre); font-weight: 600; background: var(--vst-voile); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-taille:disabled { color: var(--vst-epuise); cursor: default; border-style: dashed; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; border: 0; background: none; padding: 0; text-align: left; font: 400 14px/1.2 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option .case { width: 18px; height: 18px; border: 1px solid var(--vst-texte); border-radius: 3px; display: grid; place-items: center; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option[aria-pressed="true"] .case { background: var(--vst-encre); border-color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option[aria-pressed="true"] .case::after { content: ""; width: 9px; height: 5px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option .rond { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(35,35,36,.18); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option .rond.multi { background: conic-gradient(#E7A1AE 0 25%, #9DBCE0 0 50%, #F3EFE6 0 75%, #1F2A44 0); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option[aria-pressed="true"] .rond { box-shadow: 0 0 0 2px var(--vst-blanc), 0 0 0 3px var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option small { font-size: 13px; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option:disabled { color: var(--vst-epuise); cursor: default; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-option:disabled .rond { opacity: .35; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn { height: 50px; border: 0; background: var(--vst-rouge); color: #fff; border-radius: var(--rayon); font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .14em; padding: 0 20px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn:hover { background: var(--vst-rouge-fonce); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn-encre { background: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .btn-encre:hover { background: #000; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .lien { color: var(--vst-encre); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; background: none; border: 0; padding: 8px 0; white-space: nowrap; }

/* Ajout rapide */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-produit { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 0; align-items: center; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-produit img { width: 84px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--vst-photo); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-produit b { display: block; font: 600 13px/1.3 var(--font-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-produit span { font-size: 15px; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-produit a { font-size: 13px; text-underline-offset: 3px; display: inline-block; margin-top: 6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-bloc { padding: 4px 0 18px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-bloc .choix-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 10px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-bloc .choix-tete b { font-weight: 600; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-couleurs { display: flex; flex-wrap: wrap; gap: 10px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .nuance { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: var(--img) 50% 50% / cover no-repeat, var(--c, #ddd); box-shadow: inset 0 0 0 1px rgba(35,35,36,.15); position: relative; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .nuance.sans { background: repeating-linear-gradient(135deg, #fff 0 4px, #D9D4D1 4px 5px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .nuance.sans::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 var(--font-corps); color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .nuance[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(35,35,36,.15), 0 0 0 2px var(--vst-blanc), 0 0 0 3px var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .ra-tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .taille { height: 44px; border: 1px solid var(--vst-ligne); background: var(--vst-blanc); border-radius: var(--rayon); font: 400 13px/1 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .taille[aria-checked="true"] { border: 1.5px solid var(--vst-encre); font-weight: 600; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .etat { min-height: 20px; margin: 10px 0 0; font-size: 13px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .etat.erreur { color: var(--vst-erreur); font-weight: 600; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-pied.un { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .visuel img, .rapide { transition: none; } }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit[data-couleur] .visuel img + img { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .insecable { white-space: nowrap; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .intro-plus { display: none; }
@media (max-width: 959px) {
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .intro:not(.ouverte) .intro-suite { display: none; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .intro:not(.ouverte) .intro-plus { display: inline; }
}
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq details { border-bottom: 1px solid var(--vst-ligne); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; cursor: pointer; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq summary::-webkit-details-marker { display: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq summary::after { content: "+"; font: 300 20px/1 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq details[open] summary::after { content: "–"; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq h3 { margin: 0; font: 600 14px/1.35 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .faq details p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; }
@media (min-width: 960px) { .faq { grid-column: 1 / -1; max-width: 860px; } }

/* ——— Desktop ——— */
@media (min-width: 960px) {
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) { --gouttiere: 40px; --entete: 68px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .ariane { padding-top: 20px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .tete-plp { padding-top: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px 48px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .tete-plp .surtitre, :is(.vst-plp, .vst-pan, #vst-x#vst-y) .tete-plp h1 { grid-column: 1; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .tete-plp .intro { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) h1 { font-size: 34px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .univers { padding-top: 28px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils { padding: 14px 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils-inner { display: flex; align-items: center; gap: 8px; padding: 0 var(--gouttiere); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils-ligne { display: contents; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils-ligne .bouton-outil { width: auto; padding: 0 18px; order: 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourcis { padding: 0; order: 1; flex: 1; overflow: visible; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop:not([hidden]) { display: grid; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .tri { order: 2; width: 220px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .actifs { padding: 10px var(--gouttiere) 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .compte { padding: 14px var(--gouttiere) 16px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; padding: 0 var(--gouttiere); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .texte { padding: 10px 0 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit .texte + .pastilles { padding-left: 0; margin-left: -5px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit:hover .visuel img + img { opacity: 1; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide { left: 10px; right: 10px; bottom: 10px; width: auto; height: 42px; border-radius: var(--rayon); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; font: 600 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: .14em; color: var(--vst-encre); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide svg { display: none; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide .libelle { display: inline; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .produit:hover .rapide, :is(.vst-plp, .vst-pan, #vst-x#vst-y) .rapide:focus-visible { opacity: 1; transform: none; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding-top: 120px; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: 440px; border-radius: 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-int { max-height: 100vh; height: 100%; }
}

/* ——— Menu déroulant d'une puce (≥ 960 px) ——— */
@media (min-width: 960px) {
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourci[aria-expanded="true"] { border-color: var(--vst-encre); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .raccourci[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-1px, -1px); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 300px; max-height: min(70vh, 480px); grid-template-rows: minmax(0, 1fr) auto; background: var(--vst-blanc); border: 1px solid var(--vst-ligne); border-radius: var(--rayon); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--vst-encre) 30%, transparent); }
  /* Menu ouvert : la barre collante passe au-dessus de tout le contenu de la page (grille, cartes, badges) mais reste sous l'en-tête (z 25) */
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .outils:has(.raccourci[aria-expanded="true"]) { z-index: 24; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .rac:has(.raccourci[aria-expanded="true"]) { z-index: 3; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop.droite { left: auto; right: 0; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop-corps { overflow-y: auto; padding: 12px 16px; overscroll-behavior: contain; }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--vst-ligne); }
  :is(.vst-plp, .vst-pan, #vst-x#vst-y) .pop .btn { height: 44px; }
}
/* ——— Tiroir (≥ 960 px, à gauche) et volet bas (mobile) des filtres : règles « .panneau » de la maquette appliquées au <dialog> lui-même ——— */
dialog.vst-pan#vst-filtres { padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; background: var(--gcid-vst-blanc, #FFFDFC); border-radius: 12px 12px 0 0; box-shadow: none; }
@media (min-width: 960px) {
  dialog.vst-pan#vst-filtres { margin: 0 auto 0 0; width: 440px; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .panneau-tete h2:focus { outline: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .fermer { outline: 0; box-shadow: none; border-radius: var(--rayon); -webkit-tap-highlight-color: transparent; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .fermer:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .fermer:focus-visible { outline: 2px solid var(--vst-encre); outline-offset: -2px; }
/* Accordéons du tiroir */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette { padding: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette h3 { margin: 0; display: block; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .acc { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; font: 600 12px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .12em; color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .acc small { margin-left: auto; font: 400 13px/1 var(--font-corps); text-transform: none; letter-spacing: 0; color: var(--vst-texte); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .acc .chev { flex: none; width: 8px; height: 8px; margin: 0 6px 3px 4px; border-right: 1.5px solid var(--vst-encre); border-bottom: 1.5px solid var(--vst-encre); transform: rotate(45deg); transition: transform .2s; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .acc[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette-corps { padding: 0 0 18px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .facette-corps[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { :is(.vst-plp, .vst-pan, #vst-x#vst-y) .acc .chev { transition: none; } }
/* Prix : champs et curseur double */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-champs { display: flex; align-items: flex-end; gap: 12px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-champs label { flex: 1; display: grid; gap: 4px; font-size: 13px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-tiret { padding-bottom: 12px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .champ { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid var(--vst-ligne-ui); border-radius: var(--rayon); background: var(--vst-blanc); color: var(--vst-encre); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .champ:focus-within { outline: 2px solid var(--vst-encre); outline-offset: 2px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .champ input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: 400 14px/1 var(--font-corps); color: var(--vst-encre); -moz-appearance: textfield; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .champ input::-webkit-outer-spin-button, :is(.vst-plp, .vst-pan, #vst-x#vst-y) .champ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur { position: relative; height: 44px; margin: 8px 22px 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur::before, :is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur::after { content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur::before { left: 0; right: 0; background: var(--vst-ligne); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur::after { left: var(--a); right: calc(100% - var(--b)); background: var(--vst-rouge); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input { position: absolute; left: -22px; top: 0; width: calc(100% + 44px); height: 44px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input.haut { z-index: 2; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input::-webkit-slider-runnable-track { height: 44px; background: none; border: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input::-moz-range-track { height: 44px; background: none; border: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: grab; background: radial-gradient(circle, var(--vst-blanc) 0 8px, var(--vst-rouge) 8.5px 11px, transparent 11.5px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input::-moz-range-thumb { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: grab; background: radial-gradient(circle, var(--vst-blanc) 0 8px, var(--vst-rouge) 8.5px 11px, transparent 11.5px); }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input:focus-visible { outline: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--vst-encre); outline-offset: -6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-curseur input:focus-visible::-moz-range-thumb { outline: 2px solid var(--vst-encre); outline-offset: -6px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .f-prix-bornes { display: flex; justify-content: space-between; margin: 0; font-size: 13px; }
/* Tailles indisponibles de l'ajout rapide : même signe que la fiche produit (vst-fiche-produit.css, .vst-indispo : gris + barre en diagonale). Sélecteur au même poids que « .taille » pour que le fond de celle-ci ne l'efface plus. */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) .taille.indispo { color: var(--vst-epuise); background-color: transparent; background-image: linear-gradient(to top right, transparent calc(50% - .5px), var(--vst-epuise) 50%, transparent calc(50% + .5px)); cursor: default; }

/* ——— Ajouts de l'intégration (absents de la maquette) ——— */
/* Fond de page et neutralisation des marges des modules Divi qui portent les codes courts. */
body.vst-plp-page, body.vst-plp-page #page-container, body.vst-plp-page #main-content { background: var(--gcid-vst-fond, #FFF8F4); }
.vst-plp.et_pb_section { background: transparent; }
.vst-plp.et_pb_section, .vst-plp .et_pb_row, .vst-plp .et_pb_column, .vst-plp .et_pb_module { padding: 0; margin: 0; width: 100%; max-width: 100%; }
.vst-plp .et_pb_row { max-width: 1440px; margin: 0 auto; }
.vst-plp .et_pb_text_inner > :last-child { margin-bottom: 0; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(ul, ol) { list-style: none; }
.vst-plp .grille, .vst-plp .liens-marques, .vst-pan .f-liste { padding: 0; margin: 0; }
.vst-plp .visuel img.vst-seconde { opacity: 0; }
.vst-plp .produit[data-couleur] .visuel img.vst-seconde { display: none; }
.vst-plp .produit .px.promo ins { background: none; }
.vst-pan .nuance:disabled { opacity: .35; cursor: default; }
.vst-pan .ra-produit del { font-size: 13px; color: var(--vst-texte); }
.vst-pan.panneau { color: var(--vst-texte); }
/* Le <dialog> porte lui-même .vst-pan : les règles « .vst-pan .panneau » plus haut ne le visent pas, il gardait la bordure de 3px du navigateur.
   Pas de contour épais ni au focus du conteneur (le focus reste visible sur les contrôles internes), rayon sobre, ombre douce, fond assombri. */
dialog.vst-pan { border: 0; outline: 0; border-radius: 8px; box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--gcid-vst-encre, #232324) 35%, transparent); }
dialog.vst-pan:focus, dialog.vst-pan:focus-visible { outline: none; }
dialog.vst-pan::backdrop { background: rgba(35,35,36,.45); background: color-mix(in srgb, var(--gcid-vst-encre, #232324) 45%, transparent); }
/* Message (ajout panier / wishlist) */
.vst-toast { position: fixed; left: 20px; right: 20px; top: 68px; z-index: 100000; background: var(--gcid-vst-encre, #232324); color: #FFFDFC; border-radius: 4px; padding: 12px 14px; font: 400 14px/1.4 "Open Sans", sans-serif; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.vst-toast a { color: #FFFDFC; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
/* Barre panier (D-27) : bas d'écran, panier non vide */
.vst-barre-panier { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--gcid-vst-blanc, #FFFDFC); border-top: 1px solid var(--gcid-vst-ligne, #E9DED7); box-shadow: 0 -6px 18px -12px rgba(35,35,36,.35); font: 400 14px/1.3 "Open Sans", sans-serif; color: var(--gcid-vst-encre, #232324); }
.vst-barre-panier[hidden] { display: none; }
.vst-barre-panier .vst-bp-resume { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vst-barre-panier .vst-bp-resume b { font-weight: 600; }
.vst-barre-panier .btn { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 4px; background: var(--gcid-vst-rouge, #E21F20); color: #fff; text-decoration: none; font: 600 12px/1 "Work Sans", sans-serif; text-transform: uppercase; letter-spacing: .14em; }
.vst-barre-panier .btn:hover { background: var(--gcid-vst-rouge-fonce, #C41A1B); }
.vst-barre-panier .vst-bp-fermer { flex: none; width: 44px; height: 44px; margin: 0 -10px 0 -4px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--gcid-vst-encre, #232324); font: 400 26px/1 "Open Sans", sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vst-barre-panier .vst-bp-fermer:hover { background: var(--gcid-vst-voile, #FBE6DF); }
body.vst-bp-ferme .vst-barre-panier { display: none; }
body.vst-plp-page:not(.vst-bp-ferme):has(.vst-barre-panier:not([hidden])) { padding-bottom: 68px; }
@media (min-width: 960px) {
  .vst-toast { left: auto; width: 420px; right: 24px; top: 84px; }
  .vst-barre-panier { left: auto; right: 24px; bottom: 24px; width: 420px; border: 1px solid var(--gcid-vst-ligne, #E9DED7); border-radius: 4px; }
  body.vst-plp-page:not(.vst-bp-ferme):has(.vst-barre-panier:not([hidden])) { padding-bottom: 0; }
}

/* Bas de page : la grille « .bas » de la maquette, posée sur les rangées Divi de la section. */
.vst-plp-bas .et_pb_row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 20px 0; }
.vst-plp-bas .et_pb_row + .et_pb_row { padding-top: 40px; }
.vst-plp-bas .et_pb_text_inner:empty, .vst-plp-bas .et_pb_column:not(:has(section, h2, .et_pb_accordion)) { display: none; }
/* FAQ : accordéon Divi au style de la maquette (details / summary). */
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle { border: 0; border-bottom: 1px solid var(--vst-ligne); background: none; padding: 0; margin: 0; }
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle_title { position: relative; display: flex; align-items: center; min-height: 52px; margin: 0; padding: 0 36px 0 0; font: 600 14px/1.35 var(--font-corps); color: var(--vst-encre); text-transform: none; letter-spacing: 0; cursor: pointer; }
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle_title::before { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; font: 300 20px/1 var(--font-corps); color: var(--vst-encre); }
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle_open .et_pb_toggle_title::before { content: "–"; display: block; }
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle_content { padding: 0; }
:is(.vst-plp, #vst-x#vst-y) .vst-faq .et_pb_toggle_content p { margin: 0 0 16px; padding: 0; font-size: 14px; line-height: 1.65; color: var(--vst-texte); }
/* Liens des réponses FAQ : toujours soulignés, couleur action foncée (5,7:1 sur le fond), focus visible. */
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(.vst-faq .et_pb_toggle_content, .faq details) a { color: var(--vst-rouge-fonce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(.vst-faq .et_pb_toggle_content, .faq details) a:hover { color: var(--vst-encre); text-decoration-thickness: 2px; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(.vst-faq .et_pb_toggle_content, .faq details) a:focus-visible { outline: 2px solid var(--vst-encre); outline-offset: 2px; border-radius: 2px; }
@media (min-width: 960px) {
  .vst-plp-bas .et_pb_row:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding: 120px 40px 0; }
  .vst-plp-bas .et_pb_row + .et_pb_row { padding: 40px 40px 0; }
  /* Étiquettes de marques sur toute la largeur de la rangée : une seule ligne en bureau. */
  .vst-plp-bas .et_pb_row:first-child > .et_pb_column:has(.liens-marques) { grid-column: 1 / -1; }
  .vst-plp-bas .et_pb_row + .et_pb_row .et_pb_column { max-width: 860px; }
}
/* Héritages de Divi neutralisés dans la portée (relevé du 08.10 : h1-h6 padding-bottom 10px ; hauteur de ligne 1em des modules Texte). */
:is(.vst-plp, #vst-x#vst-y) :is(.et_pb_text, .et_pb_text_inner) { font: inherit; line-height: inherit; color: inherit; }
:is(.vst-plp, .vst-pan, #vst-x#vst-y) :is(h1, h2, h3, h4, p) { padding-bottom: 0; }
/* Tuile éditoriale dans la grille (maquette commun.css l. 175-182 et desktop l. 312-314). */
:is(.vst-plp, #vst-x#vst-y) .tuile { grid-column: 1 / -1; position: relative; min-height: 360px; overflow: hidden; color: var(--vst-blanc); display: grid; align-content: end; background: #2a2f38; }
:is(.vst-plp, #vst-x#vst-y) .tuile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; }
:is(.vst-plp, #vst-x#vst-y) .tuile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(35,35,36,0) 35%, rgba(35,35,36,.72) 100%); }
:is(.vst-plp, #vst-x#vst-y) .tuile-texte { position: relative; z-index: 2; padding: 24px var(--gouttiere); display: grid; gap: 8px; }
:is(.vst-plp, #vst-x#vst-y) .tuile-texte .surtitre { color: var(--vst-blanc); }
:is(.vst-plp, #vst-x#vst-y) .tuile-texte p { margin: 0; font: 500 22px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: .04em; max-width: 20ch; color: var(--vst-blanc); }
:is(.vst-plp, #vst-x#vst-y) .tuile-texte a { justify-self: start; color: var(--vst-blanc); font-size: 13px; text-underline-offset: 3px; }
/* FAQ : modules Bascule empilés sans l'écart des colonnes flex de Divi. */
.vst-plp .vst-faq.et_pb_column { display: block; }
@media (min-width: 960px) {
  :is(.vst-plp, #vst-x#vst-y) .tuile { grid-column: span 2; grid-row: span 1; min-height: 0; }
  :is(.vst-plp, #vst-x#vst-y) .tuile-texte { padding: 32px; }
  :is(.vst-plp, #vst-x#vst-y) .tuile-texte p { font-size: 28px; }
}

/* « Complétez la tenue » (fiche) : cœur et ajout rapide toujours visibles, y compris au bureau (pas de survol requis) */
@media (min-width: 600px) {
  :is(.vst-plp, #vst-x#vst-y).vst-tenue-cartes .rapide { left: auto; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; opacity: 1; transform: none; }
  :is(.vst-plp, #vst-x#vst-y).vst-tenue-cartes .rapide svg { display: block; }
  :is(.vst-plp, #vst-x#vst-y).vst-tenue-cartes .rapide .libelle { display: none; }
}