/* boutiK — vitrine éditoriale de la boutiK d'app.spikto.com.
   Écrite en mobile first, avec les mêmes paliers que style.css (600 / 768 / 960). */

:root {
  --framboise: #C8267D;
  --bleu: #0089D4;
  --jaune: #FFE066;
  --encre: #333;
  --gris: #666;
}

.is-hidden { display: none !important; }

.vitrine {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

@media (min-width: 600px) {
  .vitrine { padding: 1.5rem 1.25rem 4rem; }
}

/* ---------- En-tête : titre, accroche, remises, recherche ---------- */
.vit-hero { text-align: center; padding: 1.5rem 0 1rem; }
.vit-hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin: 0 0 0.4rem; color: var(--framboise); }
.vit-hero h1 .k-tilt { color: var(--bleu); display: inline-block; transform: rotate(-10deg); }
.vit-hero .vit-accroche { margin: 0 auto 1.4rem; max-width: 620px; color: var(--gris); font-size: 1rem; line-height: 1.6; }
.vit-remise {
  /* Jaune (comme le bouton APP) : se détache du fond sable et de la recherche, blanche */
  display: inline-block; max-width: 100%; background: var(--jaune); border: 2px solid #F2C200;
  border-radius: 1.2rem; padding: 0.5rem 0.6rem; font-size: 0.74rem; font-weight: 600; color: var(--framboise); margin-bottom: 1.2rem;
  box-shadow: 0 4px 14px rgba(242, 194, 0, 0.3);
}
.vit-remise a { color: var(--framboise); font-weight: 700; }
/* Deux lignes au téléphone : les remises, puis le lien. Sur ordi, une seule ligne si
   elle tient ; sinon le lien passe entier à la ligne (blocs insécables qui s'enroulent). */
.vit-remise { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.vit-remise a { white-space: nowrap; }
/* très petit écran (320 px) : les remises peuvent se couper plutôt que déborder */
.vit-remise-txt { white-space: normal; }
.vit-remise-sep { display: none; }
.vit-remise a { flex-basis: 100%; }

@media (min-width: 600px) {
  .vit-hero .vit-accroche { font-size: 1.05rem; }
  .vit-remise { border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; }
  .vit-remise-sep { display: inline; white-space: pre; }
  .vit-remise a { flex-basis: auto; }
  .vit-remise-txt { white-space: nowrap; }
}

.vit-search { position: relative; max-width: 640px; margin: 0 auto; }
.vit-search input {
  -webkit-appearance: none; appearance: none;   /* sinon iOS impose son propre style de champ de recherche */
  width: 100%; padding: 0.8rem 1rem 0.8rem 2.8rem; border-radius: 999px;
  border: 1.5px solid rgba(200,38,125,0.22); background: #fff; font-size: 1rem; font-family: inherit; color: var(--encre);
  box-shadow: 0 3px 12px rgba(200,38,125,0.07); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.vit-search input::placeholder { color: #999; }
.vit-search input::-webkit-search-decoration { -webkit-appearance: none; }
.vit-search input:focus { border-color: var(--framboise); box-shadow: 0 6px 20px rgba(200,38,125,0.15); }
.vit-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--framboise); pointer-events: none; }
/* Nombre de résultats : sous la barre, pour ne pas gêner la saisie ni le bouton d'effacement. */
#vitrine-count { display: block; min-height: 1.2em; margin-top: 0.5rem; text-align: center; font-size: 0.8rem; color: var(--gris); }

/* ---------- Filtre par rubrique : pastilles sous la recherche ---------- */
.vit-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; max-width: 640px; margin: 0.4rem auto 0; }
.vit-filtres button {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1;
  padding: 0.55rem 0.95rem; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--encre); border: 1.5px solid rgba(200,38,125,0.22);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vit-filtres button:hover { border-color: var(--framboise); color: var(--framboise); }
.vit-filtres button[aria-pressed="true"] { background: var(--framboise); border-color: var(--framboise); color: #fff; }
.vit-filtres .k-tilt { display: inline-block; transform: rotate(-10deg); color: var(--bleu); }
.vit-filtres button[aria-pressed="true"] .k-tilt { color: #fff; }
.chapitre { scroll-margin-top: 90px; }

@media (min-width: 600px) {
  .vit-filtres button { font-size: 0.9rem; padding: 0.6rem 1.1rem; }
}

@media (min-width: 600px) {
  .vit-search input { padding: 0.9rem 1.2rem 0.9rem 2.9rem; border-width: 2px; box-shadow: 0 6px 24px rgba(200,38,125,0.08); }
  .vit-search svg { width: 20px; height: 20px; }
}

.vit-empty { text-align: center; padding: 3rem 1rem; color: var(--gris); }
.vit-empty a { color: var(--framboise); font-weight: 700; }

/* ---------- Boutons ---------- */
.vit-btn {
  display: inline-block; background: var(--jaune); color: var(--framboise); font-weight: 800; text-decoration: none; text-align: center;
  border-radius: 999px; padding: 0.7rem 1.4rem; box-shadow: 0 4px 15px rgba(200,38,125,0.15); transition: transform 0.2s, background 0.2s;
}
.vit-btn:hover { background: #FFD22E; transform: translateY(-2px); }
.vit-btn-ligne { display: inline-block; color: var(--framboise); font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(200,38,125,0.3); }
.vit-btn-ligne:hover { border-color: var(--framboise); }

/* ---------- Introduction ---------- */
.vit-lead { max-width: 760px; margin: 0 auto 1.5rem; text-align: center; font-size: 1.05rem; line-height: 1.7; color: #444; }
.vit-lead p { margin: 0; }
/* En conclusion, après les chapitres */
.vit-lead-fin { margin: 3rem auto 0; }
.is-searching .vit-lead-fin { display: none; }
.vit-lead .k-tilt { display: inline-block; transform: rotate(-10deg); }
/* Liste des supports : fine, espacée, entre les deux phrases. */
.vit-lead .vit-lead-liste {
  margin: 1rem auto; font-size: 0.85rem; font-weight: 300; letter-spacing: 0.12em;
  color: #777; text-wrap: balance;
}

@media (min-width: 600px) {
  .vit-lead { font-size: 1.15rem; margin-bottom: 2rem; }
}

/* ---------- Chapitres : texte + mosaïque de produits ----------
   Mobile : texte puis mosaïque, l'un sous l'autre.
   Tablette et plus : côte à côte, en alternant le côté du texte. */
.chapitre {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start;
  background: #fff; border-radius: 1.4rem; padding: 1.2rem; margin-top: 1.5rem;
}
.chapitre-txt { min-width: 0; }
.chapitre-num { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--framboise); font-weight: 700; margin: 0 0 0.4rem; }
.chapitre h2 { margin: 0 0 0.8rem; font-size: 1.4rem; line-height: 1.2; color: var(--encre); }
.chapitre h2 .k-tilt { color: var(--bleu); display: inline-block; transform: rotate(-10deg); }
.chapitre-txt p { color: #444; line-height: 1.7; margin: 0 0 0.8rem; }
.chapitre-txt .vit-btn { margin: 0.4rem 0.6rem 0.2rem 0; }

@media (min-width: 768px) {
  .chapitre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2.2rem; padding: 2rem; margin-top: 1.8rem; }
  .chapitre:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .chapitre:nth-child(even) .chapitre-txt { order: 2; }
  .chapitre-txt { position: sticky; top: 100px; }
  .chapitre h2 { font-size: 1.6rem; }
}

/* Vignettes + bouton « Acheter » en dessous */
.chapitre-produits { min-width: 0; }
.vit-acheter { display: block; width: 100%; max-width: 320px; margin: 1rem auto 0; font-size: 1.05rem; }

/* ---------- Mosaïque de produits ---------- */
.vp-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

@media (min-width: 768px) {
  .vp-mosaic { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; }
}

.vp-tile { position: relative; aspect-ratio: 1/1; border-radius: 1rem; overflow: hidden; display: block; background: #f7f5fb; text-decoration: none; color: inherit; }
.vp-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.vp-tile:hover .vp-img { transform: scale(1.06); }
.vp-tile-cap {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 0.6rem 0.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); color: #fff;
  font-size: 0.78rem; line-height: 1.25; display: flex; flex-direction: column;
}
.vp-tile-cap b { font-weight: 700; }
.vp-tile-cap i { font-style: normal; opacity: 0.9; }
.vp-tile-cap .k-tilt { display: inline-block; transform: rotate(-10deg); color: inherit; text-shadow: none; }

/* cirKle® sans photo : icône piKto sur fond doux */
.vp-icone {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(145deg, #fdf0f5, #eef4fb);
}
.vp-icone img { width: 38%; height: auto; opacity: 0.9; }
.vp-icone span { font-weight: 800; color: var(--framboise); font-size: 0.9rem; }
.vp-icone .k-tilt { color: var(--bleu); display: inline-block; transform: rotate(-10deg); }

/* ================= Rubrique PRO : mise en avant sur trois niveaux =================
   1. le tryptiK, l'app et le KodeX en grand ; 2. BOX, KlassiK, TOTEM, Fables en
   plus petit ; 3. le Kit Jaune en bonus, encore plus petit. Pleine largeur. */
.chapitre-pro .chapitre-txt { text-align: center; position: static; }
.chapitre-mots-cles {
  margin: 0 auto; max-width: 620px; font-size: 0.82rem; font-weight: 300; letter-spacing: 0.1em;
  color: #777; text-wrap: balance;
}
.chapitre-pro .chapitre-txt p.chapitre-mots-cles { margin: 0 auto; color: #777; line-height: 1.6; }

/* Textes après les produits, puis le mode d'emploi */
.chapitre-suite { max-width: 720px; margin: 1.6rem auto 0; }
.chapitre-suite p { color: #444; line-height: 1.7; margin: 0 0 0.9rem; }
/* Mode d'emploi : 3 étapes en petites cartes numérotées.
   Téléphone : empilées, reliées par un trait vertical. Tablette et plus : côte à côte, avec des flèches. */
.mode-emploi { margin-top: 1.6rem; padding: 1.2rem 1rem 1.3rem; border-radius: 1.1rem; background: #fdf0f5; border: 1px solid #f3d8e5; }
.chapitre-suite .mode-emploi-titre { margin: 0; text-align: center; font-weight: 800; color: var(--framboise); font-size: 1.15rem; }
.chapitre-suite .mode-emploi-sous { margin: 0.1rem 0 1rem; text-align: center; font-size: 0.82rem; color: #8a6376; }
.mode-emploi ol { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 0.7rem; }
.mode-emploi ol::before { content: ''; position: absolute; left: 1.05rem; top: 1rem; bottom: 1rem; width: 2px; background: rgba(200,38,125,0.25); }
.mode-emploi li {
  position: relative; counter-increment: etape;
  display: flex; flex-direction: column; gap: 0.1rem;
  margin-left: 2.7rem; padding: 0.7rem 0.9rem; border-radius: 0.8rem;
  background: #fff; box-shadow: 0 2px 10px rgba(200,38,125,0.08); line-height: 1.4;
}
.mode-emploi li::before {
  content: counter(etape); position: absolute; left: -2.7rem; top: 50%; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--framboise); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 0 0 4px #fdf0f5;
}
.mode-emploi li b { color: #333; font-weight: 700; font-size: 0.95rem; }
.mode-emploi li span { color: #777; font-size: 0.82rem; }


@media (min-width: 768px) {
  .chapitre.chapitre-pro { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  /* Pleine largeur : le titre reste en tête, quel que soit le rang de la rubrique */
  .chapitre.chapitre-pro .chapitre-txt { order: 0; }
  .mode-emploi { padding: 1.5rem 1.5rem 1.6rem; }
  .mode-emploi ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  .mode-emploi ol::before { content: none; }
  .mode-emploi li { margin-left: 0; padding: 1.8rem 1rem 1rem; text-align: center; }
  .mode-emploi li::before { left: 50%; top: 0; transform: translate(-50%, -50%); }
  .mode-emploi li + li::after { content: '→'; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); color: var(--framboise); font-weight: 800; }
  .mode-emploi ol { margin-top: 1.1rem; }
}

/* Noms de produits dans les textes : semi-gras rose */
.nom-produit { font-weight: 600; color: var(--framboise); }

/* « by » en plus petit ; le nom qui le contient reste sur une ligne */
.vp-by { font-size: 0.7em; font-weight: 400; opacity: 0.85; }
.vp-nobr { white-space: nowrap; }
/* Contenu d'un pack, sous le prix */
.vp-inclus { display: block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 400; opacity: 0.95; line-height: 1.3; }

/* Après le mode d'emploi : vers les formations */
.chapitre-suite .certification { margin: 1.1rem 0 0; text-align: center; font-size: 0.9rem; font-weight: 400; font-style: italic; color: #777; }
.certification a { color: var(--framboise); text-decoration: none; border-bottom: 1px solid rgba(200,38,125,0.35); }
.certification a:hover { border-color: var(--framboise); }

/* ================= Rubrique PRO : mosaïque =================
   Le pack en grande tuile (2 × 2), les produits à l'unité en tuiles carrées,
   le Kit Jaune en bandeau. Légende sur verre dépoli : l'image est floutée
   derrière le texte seulement, pour que les noms restent lisibles. */
/* Téléphone : tuiles carrées ; le pack, sur 2 colonnes × 2 rangées, est carré lui aussi */
.pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pd-grid .vp-tile { aspect-ratio: 1 / 1; height: auto; align-self: start; border-radius: 0.9rem; }
.pd-grid .vp-tile-cap {
  padding: 0.45rem 0.6rem 0.5rem; font-size: 0.74rem;
  background: rgba(30, 20, 28, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.pd-grid .vp-tile-cap i {
  align-self: flex-start; margin-top: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: #fff; color: var(--framboise); font-weight: 800; font-size: 0.72rem; opacity: 1;
}
.vp-badge {
  align-self: flex-start; margin-bottom: 0.25rem; padding: 0.12rem 0.5rem; border-radius: 999px;
  background: var(--framboise); color: #fff; font-style: normal; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pd-grid .vp-tile:hover .vp-img { transform: scale(1.04); }

/* Le pack : grande tuile, carrée sur téléphone pour montrer toute la photo */
.pd-grid > .vp:first-child { grid-column: 1 / -1; grid-row: span 2; aspect-ratio: auto; height: 100%; align-self: stretch; }
/* Tuile du pack : photo en bandeau centré sur la ligne de produits, légende SOUS la photo
   (et non par-dessus) pour que toute la ligne reste visible. */
.pd-grid:not(.pd-egal) > .vp:first-child {
  display: flex; flex-direction: column; grid-row: auto; aspect-ratio: auto; height: auto;
  background: #2a1e27; border: 0;
}
.pd-grid:not(.pd-egal) > .vp:first-child .vp-img { height: auto; aspect-ratio: 16 / 9; object-position: 50% 60%; }
.pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap {
  position: relative; background: #2a1e27; color: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  isolation: isolate; overflow: hidden;
}
/* Verre dépoli comme les autres cartes, sans masquer la photo : la légende est à côté
   de la photo, on la fond donc dans une copie floutée et teintée de la photo (--img). */
.pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap::before {
  content: ''; position: absolute; inset: -30px; z-index: -1;
  background: linear-gradient(rgba(30, 20, 28, 0.42), rgba(30, 20, 28, 0.42)), var(--img) center bottom / cover;
  filter: blur(14px) saturate(1.3);
}
.pd-grid:not(.pd-egal) > .vp:first-child .vp-inclus { color: rgba(255,255,255,0.8); }
.pd-grid > .vp:first-child .vp-tile-cap { font-size: 0.78rem; padding: 0.5rem 0.7rem 0.55rem; }
.pd-grid > .vp:first-child .vp-tile-cap b { font-size: 0.98rem; line-height: 1.2; }
.pd-grid > .vp:first-child .vp-tile-cap i { font-size: 0.76rem; margin-top: 0.2rem; }
.pd-grid > .vp:first-child .vp-badges { gap: 0.25rem; margin-bottom: 0.2rem; }
.pd-grid > .vp:first-child .vp-badge { font-size: 0.55rem; padding: 0.08rem 0.45rem; }
.pd-grid > .vp:first-child .vp-inclus { font-size: 0.66rem; margin-top: 0.15rem; }

/* L'app : logo sur fond doux, remonté au-dessus de la légende floutée */
/* logo centré dans l'espace libre au-dessus de la légende, taille proportionnelle à la tuile */
.pd-grid .vp-icone {
  justify-content: center; padding: 0 0 3.3rem;
  /* bords légèrement assombris, fondu doux vers le centre (vignettage) */
  box-shadow: inset 0 0 26px 2px rgba(90, 40, 75, 0.2);
}
.pd-grid .vp-icone img { width: auto; height: 62%; max-height: 88px; }

/* Le Kit Jaune : simple ligne discrète sous la mosaïque, en mode « bonus » */
.vp-mosaic.pd-bonus { display: flex; justify-content: center; margin-top: 0.8rem; }
.pd-bonus > .vp {
  width: auto; max-width: 100%; height: 44px; aspect-ratio: auto;
  background: none; border: 1px dashed rgba(0,0,0,0.13); border-radius: 999px; overflow: hidden;
}
.pd-bonus > .vp .vp-img { position: absolute; left: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%; opacity: 0.9; }
.pd-bonus > .vp:hover .vp-img { transform: none; }
.pd-bonus > .vp .vp-tile-cap {
  position: static; height: 100%; padding: 0 1rem 0 2.8rem;
  flex-direction: row; align-items: center; gap: 0.4rem; white-space: nowrap;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #777; font-size: 0.78rem;
}
.pd-bonus > .vp .vp-tile-cap b { font-weight: 600; color: #555; }
.pd-bonus > .vp .vp-tile-cap i { margin: 0; padding: 0; background: none; color: #999; font-weight: 600; font-size: 0.78rem; }
.pd-bonus > .vp .vp-badge {
  align-self: center; margin: 0; padding: 0; background: none; color: var(--framboise); font-size: 0.62rem; letter-spacing: 0.12em;
}

/* Tablette et ordi : mêmes tuiles carrées qu'au téléphone, en plus grand.
   PRO : le pack en bandeau horizontal (photo à gauche, légende foncée à droite),
   puis les six produits sur trois colonnes, en deux rangées complètes. */
@media (min-width: 768px) {
  .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .pd-grid .vp-tile { border-radius: 1.1rem; box-shadow: 0 4px 16px rgba(60, 20, 45, 0.08); transition: box-shadow 0.25s, transform 0.25s; }
  .pd-grid .vp-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(60, 20, 45, 0.16); }
  .pd-grid .vp-tile-cap { padding: 0.7rem 0.9rem 0.8rem; font-size: 0.86rem; }
  .pd-grid .vp-tile-cap b { font-size: 0.95rem; }
  .pd-grid .vp-tile-cap i { font-size: 0.8rem; }
  .vp-badge { font-size: 0.62rem; }
  .pd-grid .vp-icone img { max-height: 120px; }

  .pd-grid:not(.pd-egal) > .vp:first-child {
    display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-img { height: 100%; aspect-ratio: 16 / 10; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap { justify-content: center; padding: 1.6rem 1.8rem; font-size: 0.95rem; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap::before { background-position: center, right center; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap b { font-size: 1.7rem; line-height: 1.15; margin-top: 0.4rem; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-tile-cap i { font-size: 1rem; margin-top: 0.7rem; padding: 0.2rem 0.8rem; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-badges { gap: 0.35rem; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-badge { font-size: 0.66rem; padding: 0.15rem 0.6rem; }
  .pd-grid:not(.pd-egal) > .vp:first-child .vp-inclus { font-size: 0.85rem; margin-top: 0.9rem; line-height: 1.5; }
}

/* Pastilles de la légende (Recommandé, Précommande…) : côte à côte, retour à la ligne si besoin */
.vp-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.25rem; }
.vp-badges .vp-badge { margin: 0; }
.vp-badge-2 { background: var(--bleu); letter-spacing: 0.04em; }

/* ================= Rubrique Découvrir : même mise en page que PRO =================
   Six tuiles de même taille (pas de grande tuile), texte après les produits. */
.pd-grid.pd-egal > .vp:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; height: auto; align-self: start; }
.pd-grid.pd-egal > .vp:first-child .vp-tile-cap { font-size: 0.74rem; padding: 0.45rem 0.6rem 0.5rem; }
.pd-grid.pd-egal > .vp:first-child .vp-tile-cap b { font-size: inherit; }
.pd-grid.pd-egal > .vp:first-child .vp-tile-cap i { font-size: 0.72rem; }
.liste-produits { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.liste-produits li { position: relative; padding-left: 1.2rem; color: #444; line-height: 1.65; }
.liste-produits li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--framboise); }
.fin { font-weight: 300; }

/* L'app sur deux cases, en fin de mosaïque : les rangées restent complètes */
.pd-grid.pd-egal > [data-ref="app-gp"] { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Tablette : trois colonnes, l'app en bandeau sur toute la largeur.
   Ordi : quatre colonnes, l'app sur deux cases : deux rangées complètes. */
@media (min-width: 768px) {
  .pd-grid.pd-egal > .vp:first-child .vp-tile-cap { font-size: 0.86rem; padding: 0.7rem 0.9rem 0.8rem; }
  .pd-grid.pd-egal > .vp:first-child .vp-tile-cap i { font-size: 0.8rem; }
  .pd-grid.pd-egal > [data-ref="app-gp"] { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
}
@media (min-width: 960px) {
  .pd-grid.pd-egal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-grid.pd-egal > [data-ref="app-gp"] { grid-column: span 2; aspect-ratio: auto; align-self: stretch; }
}

/* « app » dans le texte : lien en pastille jaune, texte rose (comme le bouton APP du header) */
.pastille-app {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
  background: #FFE066; color: var(--framboise); font-weight: 800; text-decoration: none; line-height: 1.5;
  transition: background 0.2s;
}
.pastille-app:hover { background: #FFD22E; }

/* ================= Rubrique COMBO =================
   Le Pack découverte PRO en bandeau (même rendu que dans PRO), puis les deux petits
   packs. Leurs photos sont larges (deux produits et un « + ») : tuiles au format de
   la photo, l'une sous l'autre au téléphone, côte à côte dès la tablette. */
.pd-grid.pd-combo > .vp:not(:first-child) { grid-column: 1 / -1; aspect-ratio: 12 / 7; }
@media (min-width: 768px) {
  .pd-grid.pd-combo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-grid.pd-combo > .vp:not(:first-child) { grid-column: auto; }
}

/* Rubriques et filtres en veille : présents dans la page, jamais affichés */
.standby { display: none !important; }