/* =================================================================
   FIINAFAS — EXPLORATEUR PRODUITS & SOUS-OPTIONS (scoped : pexp / subopt)
   Réutilisable. Dépend de styles.css pour le composant .product-card.
   ================================================================= */
.pexp { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
.pexp [hidden] { display: none !important; }

/* État A : cards déclencheuses = composant product-card (rendu cliquable) */
.pexp__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px);
}
.pexp__grid--two {
  grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 80px);
  max-width: 880px; margin-left: auto; margin-right: auto;
}
.product-card.pexp-trigger { cursor: pointer; }
.product-card.pexp-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.product-card.pexp-trigger .product-card__cta { pointer-events: none; }
.product-card__flag {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.94); color: #1E3549;
  box-shadow: 0 4px 14px rgba(30,53,73,0.16);
}
@media (max-width: 767px) {
  .pexp__grid, .pexp__grid--two { grid-template-columns: 1fr; }
}

/* État B : onglets */
.pexp__tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 7px; background: #f5f7fa; border-radius: 16px;
  width: fit-content; max-width: 100%; margin: 0 auto 18px; flex-wrap: wrap;
}
.pexp__tab {
  --c: #6fcf97;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; background: transparent; border: none; border-radius: 11px;
  cursor: pointer; font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 600; color: #7290ac;
  transition: color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pexp__tab::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #c5cfd9; transition: background 250ms var(--ease);
}
.pexp__tab--incomelab { --c: #6fcf97; }
.pexp__tab--packs     { --c: #C3E8D2; }
.pexp__tab--coach     { --c: #F05742; }
.pexp__tab--monallie  { --c: #F05742; }
.pexp__tab:hover { color: #1E3549; }
.pexp__tab.is-active {
  background: #fff; color: #1E3549; box-shadow: 0 2px 8px rgba(30,53,73,0.08);
}
.pexp__tab.is-active::before { background: var(--c); }

.pexp__back {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid rgba(30,53,73,0.12); cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  color: #4a5e72; padding: 9px 16px 9px 13px; border-radius: 999px;
  margin: 0 auto 26px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pexp__back svg { transition: transform 200ms var(--ease); }
.pexp__back:hover { color: #1E3549; border-color: rgba(30,53,73,0.28); box-shadow: 0 6px 16px -10px rgba(30,53,73,0.4); }
.pexp__back:hover svg { transform: translateX(-3px); }
.pexp__back:focus-visible { outline: 2px solid #6fcf97; outline-offset: 3px; }

/* ===== Sous-options · cartes pricing claires (style abonnement, minimalisme impactant) ===== */
.subopt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
  padding-top: 16px;
  transition: opacity 200ms var(--ease);
}
.subopt-grid[data-product="incomelab"] { grid-template-columns: repeat(3, 1fr); }
.subopt-grid[data-product="coach"] { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-left: auto; margin-right: auto; }
.subopt {
  --accent: #169D53; --accent-ink: #fff; --fill: var(--accent); --fill-ink: var(--accent-ink); --on: #1E3549; --muted: #7290ac;
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  background: #fff; color: var(--on);
  border: 1px solid rgba(30,53,73,0.10); border-radius: 20px; padding: 28px 26px 26px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.subopt:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -24px rgba(30,53,73,0.26); border-color: var(--accent); }
.subopt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.subopt--incomelab { --accent: #169D53; --accent-ink: #fff; }
.subopt--packs     { --accent: #169D53; --accent-ink: #fff; --fill: #C3E8D2; --fill-ink: #1E3549; }
.subopt--coach     { --accent: #F05742; --accent-ink: #fff; }
.subopt--monallie  { --accent: #F05742; --accent-ink: #fff; }

/* ===== Options avec visuel + tarif (Services : #pexp[data-option-media]) ===== */
.subopt--media { padding-top: 0; }
.subopt__frame {
  position: relative; width: calc(100% + 52px); margin: 0 -26px 22px;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 20px 20px 0 0;
  border-bottom: 3px solid var(--accent);
  background:
    radial-gradient(130% 92% at 82% 6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent) 8%, #fff);
}
.subopt__media { width: 100%; height: 100%; display: block; }
.subopt__frame[style*="--media-scale"] .subopt__media { transform: scale(var(--media-scale)); }
.subopt__frame[style*="--media-scale"] .subopt__media { transform: scale(var(--media-scale)); }
.subopt--featured .subopt__frame {
  border-bottom-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.4);
}
.subopt--packs.subopt--featured .subopt__frame { background: rgba(255,255,255,0.55); }

/* Tarif — zone à compléter */
.subopt__tarif { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.subopt__tarif-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted);
}
.subopt__tarif-value { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; color: var(--on); }
.subopt__tarif-value--empty {
  font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted);
  border: 1px dashed rgba(30,53,73,0.30); border-radius: 8px; padding: 4px 11px;
}
.subopt--featured .subopt__tarif-label,
.subopt--featured .subopt__tarif-value { color: var(--fill-ink); }
.subopt--featured .subopt__tarif-value--empty { border-color: rgba(255,255,255,0.55); }
.subopt--packs.subopt--featured .subopt__tarif-value--empty { border-color: rgba(30,53,73,0.28); }

/* Meta délai (petite ligne sous le titre) */
.subopt__meta { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.subopt__meta svg { flex-shrink: 0; color: var(--accent); }
.subopt--featured .subopt__meta { color: var(--fill-ink); opacity: 0.85; }
.subopt--featured .subopt__meta svg { color: var(--fill-ink); }
.subopt--packs.subopt--featured .subopt__meta svg { color: #1E3549; }

/* Ruban « le plus choisi » */
.subopt__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 15px; border-radius: 999px;
  background: #fff; color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(30,53,73,0.4);
}
.subopt__ribbon svg { width: 12px; height: 12px; flex-shrink: 0; }
.subopt__ribbon--status { background: #f7c472; color: #6b4400; }

/* Carte mise en avant : remplie de la couleur produit */
.subopt--featured {
  background: var(--fill); color: var(--fill-ink); border-color: transparent;
  box-shadow: 0 22px 46px -24px rgba(30,53,73,0.3);
}
.subopt--featured::before {
  content: ''; position: absolute; inset: -6px -6px -10px; z-index: -1; border-radius: 26px;
  background: var(--accent); opacity: 0.18; filter: blur(22px);
}
.subopt--featured .subopt__sub,
.subopt--featured .subopt__featlabel { color: var(--fill-ink); opacity: 0.82; }
.subopt--featured .subopt__tier,
.subopt--featured .subopt__price,
.subopt--featured .subopt__benefit,
.subopt--featured .subopt__check { color: var(--fill-ink); }
.subopt--featured .subopt__divider { background: rgba(255,255,255,0.28); }
.subopt--packs.subopt--featured .subopt__divider { background: rgba(30,53,73,0.14); }
.subopt--featured .subopt__cta { background: #fff; color: var(--accent); }
.subopt--packs.subopt--featured .subopt__cta { color: #1E3549; }

/* En-tête */
.subopt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 76px; }
.subopt__headmain { min-width: 0; }
.subopt__tier { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; color: var(--on); }
.subopt__sub { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.subopt__audience { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12.5px; line-height: 1.5; color: var(--on); margin: 24px 0 22px; }
.subopt__audience-label { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; }
.subopt--featured .subopt__audience-label { color: var(--accent); background: rgba(255,255,255,0.9); }
.subopt--featured .subopt__audience { color: var(--fill-ink); opacity: 0.9; }
.subopt__status {
  display: inline-block; margin-top: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(247,196,114,0.2); color: #b06a00;
}
.subopt--featured .subopt__status { background: rgba(255,255,255,0.85); color: var(--accent); }
.subopt--packs.subopt--featured .subopt__status { color: #1E3549; }

/* Sélecteur (multisélection conservée) */
.subopt__select {
  flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid rgba(30,53,73,0.2); color: #fff;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.subopt--featured .subopt__select { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.7); }
.subopt__select svg { opacity: 0; transform: scale(0.6); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.subopt:hover .subopt__select { border-color: var(--accent); }
.subopt.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -20px rgba(30,53,73,0.3); }
.subopt.is-selected::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent); opacity: 0.07; pointer-events: none;
}
.subopt--featured.is-selected::after { opacity: 0.14; }
.subopt.is-selected .subopt__select { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.subopt--featured.is-selected .subopt__select { background: #fff; border-color: #fff; color: var(--accent); }
.subopt--packs.is-selected .subopt__select { color: #1E3549; }
.subopt.is-selected .subopt__select svg { opacity: 1; transform: scale(1); }

/* Ligne offre (livrable) */
.subopt__price { font-size: 14.5px; font-weight: 700; color: var(--on); line-height: 1.4; margin: 2px 0 16px; min-height: 42px; }

/* CTA compacte */
.subopt__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-ink); border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
  padding: 11px 22px; border-radius: 999px; margin-bottom: 20px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.subopt__cta svg { transition: transform 200ms var(--ease); }
.subopt__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(30,53,73,0.4); }
.subopt__cta:hover svg { transform: translateX(3px); }
.subopt__demo {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; color: var(--on); border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 0; margin: -12px 0 20px; text-decoration: none; opacity: 0.75;
  transition: opacity 200ms var(--ease);
}
.subopt__demo:hover { opacity: 1; }
.subopt__demo svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Lightbox vidéo démo — intégrée, ne quitte jamais le site */
.pexp__video-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; }
.pexp__video-modal.is-open { display: flex; }
.pexp__video-backdrop { position: absolute; inset: 0; background: rgba(20,28,38,0.78); backdrop-filter: blur(4px); }
.pexp__video-box {
  position: relative; z-index: 1; width: min(92vw, 420px); aspect-ratio: 9 / 16;
  background: #000; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
  animation: pexpVideoIn 320ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes pexpVideoIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.pexp__video-frame, .pexp__video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pexp__video-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.pexp__video-close:hover { background: rgba(0,0,0,0.72); }

.subopt__divider { height: 1px; background: rgba(30,53,73,0.09); margin: 22px 0 18px; }

/* Bouton « Voir la démo des outils » — produit Packs Équilibre (vert) */
.pexp__optionbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
/* le bouton retour, une fois dans la barre, ne garde pas sa marge d'origine */
.pexp__optionbar .pexp__back { margin: 0; }
.pexp__demo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: #E7F5EE; border: 1.5px solid rgba(22,157,83,0.34); color: #169D53;
  font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.pexp__demo svg { flex-shrink: 0; }
.pexp__demo:hover {
  background: #169D53; color: #fff; border-color: #169D53;
  transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(22,157,83,0.6);
}
.pexp__demo:focus-visible { outline: 2px solid #169D53; outline-offset: 3px; }
/* Piles déployées (pages segments) : bouton en entête de la colonne, aligné à gauche */
.subopt-stack .pexp__demo { margin: 0 0 4px; }

/* Liste fonctionnalités */
.subopt__featlabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 15px; margin-top: -14px; }
.subopt__benefits { display: flex; flex-direction: column; gap: 13px; }
.subopt__benefit { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--on); line-height: 1.4; }
.subopt__check { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

/* Barre de multisélection */
.pexp__selbar {
  position: sticky; bottom: 16px; z-index: 5;
  margin-top: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 14px 13px 22px;
  background: #1E3549; color: #fff; border-radius: 16px;
  box-shadow: 0 20px 44px -18px rgba(30,53,73,0.55);
}
.pexp__selcount { font-size: 14px; font-weight: 600; }
.pexp__selcount span { color: #9fb3c4; font-weight: 500; }
.pexp__selactions { display: flex; align-items: center; gap: 8px; }
.pexp__selclear {
  background: none; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: #9fb3c4;
  padding: 8px 12px; border-radius: 999px; transition: color 200ms var(--ease);
}
.pexp__selclear:hover { color: #fff; }
.pexp__selcta {
  display: inline-flex; align-items: center; gap: 7px;
  background: #6fcf97; color: #143a26; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  padding: 14px 32px; border-radius: 999px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pexp__selcta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(111,207,151,0.8); }

/* Apparition slide-in de la barre (à l'activation de la 1re sélection) */
@keyframes pexpSelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.pexp__selbar:not([hidden]) { animation: pexpSelIn 400ms var(--ease); }

@media (max-width: 1023px) {
  .pexp__grid { grid-template-columns: repeat(3, 1fr); }
  /* [data-product] a la meme specificite -> ces regles responsive gagnent bien
     (sinon .subopt-grid[data-product="incomelab"]{repeat(3,1fr)} deborde en mobile). */
  .subopt-grid, .subopt-grid[data-product] { grid-template-columns: repeat(2, 1fr); gap: 46px 18px; }
}
@media (max-width: 680px) {
  .pexp__grid { grid-template-columns: 1fr; }
  .subopt-grid, .subopt-grid[data-product] { grid-template-columns: 1fr; }
  .pexp__tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .pexp__tab { padding: 10px 16px; white-space: nowrap; }
  .pexp__selbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .pexp__selactions { justify-content: space-between; }
  .pexp__selcta { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pexp *, .pexp *::before, .pexp *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== Vue produit — bloc bénéfices + CTA contextualisé (État B) ===== */
.pexp-benefits { --c: #169D53; margin-top: 40px; }
.pexp-benefits--incomelab { --c: #169D53; }
.pexp-benefits--packs { --c: #169D53; }
.pexp-benefits--coach { --c: #F05742; }
.pexp-benefits--monallie { --c: #F05742; }
.pexp-benefits:empty { display: none; }
.pexp-benefits__rule {
  display: flex; align-items: center; gap: 16px;
  margin: 8px 0 28px; color: #7290ac;
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.pexp-benefits__rule::before, .pexp-benefits__rule::after {
  content: ''; height: 1px; background: rgba(30,53,73,0.1); flex: 1;
}
.pexp-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pexp-benefit {
  position: relative; background: #fff; border: 1px solid rgba(30,53,73,0.08);
  border-radius: 16px; padding: 24px 22px; padding-left: 26px;
}
.pexp-benefit::before {
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 3px; border-radius: 3px; background: var(--c);
}
.pexp-benefit h4 { font-size: 16px; font-weight: 700; color: #1E3549; line-height: 1.35; margin: 0 0 10px; }
.pexp-benefit p { font-size: 14px; line-height: 1.6; color: #4a5e72; margin: 0; }

.pexp-cta { --c: #169D53; --c-text: #fff; margin-top: 32px; }
.pexp-cta--incomelab { --c: #169D53; --c-text: #fff; }
.pexp-cta--packs { --c: #1E3549; --c-text: #fff; }
.pexp-cta--coach { --c: #F05742; --c-text: #fff; }
.pexp-cta--monallie { --c: #F05742; --c-text: #fff; }
.pexp-cta:empty { display: none; }
.pexp-cta__btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--c); color: var(--c-text); text-decoration: none;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
  padding: 14px 32px; border-radius: 999px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pexp-cta__btn svg { transition: transform 200ms var(--ease); }
.pexp-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px var(--c); }
.pexp-cta__btn:hover svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  .pexp-benefits__grid { grid-template-columns: 1fr; }
}

/* =================================================================
   MODE DÉPLOYÉ (data-mode="expanded") : sous-options toujours visibles
   sous chaque carte produit, en colonne. Multisélection + barre conservées.
   ================================================================= */
.pexp__grid--expanded { align-items: start; }
.pexp-col { display: flex; flex-direction: column; min-width: 0; }
.pexp-col .product-card { position: relative; z-index: 1; }
.subopt-stack { display: flex; flex-direction: column; gap: 36px; padding: 42px 4px 0; }

.pexp--expanded .subopt {
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), box-shadow 280ms var(--ease);
}
.pexp--expanded .subopt.is-in { opacity: 1; transform: none; }

/* CTA contextualisé en pied de colonne */
.pexp-col__cta {
  --cta-bg: #169D53; --cta-text: #fff;
  margin-top: 8px; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  background: var(--cta-bg); color: var(--cta-text); text-decoration: none;
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), box-shadow 200ms var(--ease);
}
.pexp-col__cta.is-in { opacity: 1; transform: none; }
.pexp-col__cta--incomelab { --cta-bg: #169D53; }
.pexp-col__cta--packs     { --cta-bg: #1E3549; }
.pexp-col__cta--coach     { --cta-bg: #F05742; }
.pexp-col__cta--monallie  { --cta-bg: #F05742; }
.pexp-col__cta svg { transition: transform 200ms var(--ease); }
.pexp-col__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px var(--cta-bg); }
.pexp-col__cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .pexp--expanded .subopt, .pexp-col__cta { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .subopt-stack { gap: 32px; padding-top: 40px; }
  /* Options : cartes allégées sur mobile (cadre image plus court, padding
     resserré) — sans couper de contenu. */
  .subopt { padding: 20px 18px 20px; }
  .subopt__frame { aspect-ratio: 16 / 8; margin-bottom: 16px; }
  .subopt-grid, .subopt-grid[data-product] { gap: 18px; }
}