/* ============================================================
   SHOP — Vitrine produits immersive ("3D Motion Experience")
   ------------------------------------------------------------
   Fichier ISOLÉ : chargé uniquement par shop.html. N'affecte
   aucune autre page du site. Ne modifie ni ne redéfinit aucune
   classe globale de style.css — n'ajoute que des classes
   préfixées `shop-` et `.shop-card` (spécifiques à ce module).
   Voir assets/js/shop-showcase.js pour la logique (FLIP, tilt,
   halo, respiration, entrée en scène, swipe mobile).

   Principes de perf respectés partout dans ce fichier :
   seules `transform`, `opacity` et `filter` sont animées.
   Aucune animation de `left/top/width/height/margin`.
   ============================================================ */

/* ---------- Bandeau de confiance (déplacé juste au-dessus du
   disclaimer légal — cf. shop.html) : plus compact que l'ancien
   bloc .section-tight, pour réduire l'espace vide. ---------- */
.shop-trust-strip {
  padding: 26px 0;
}

.shop-trust-strip .trust-row {
  margin-top: 0;
  gap: 26px;
}

.shop-showcase-section {
  position: relative;
  padding: 60px 0 60px;
  overflow: hidden;
  /* Même bleu que le reste du site dès qu'il y a du bleu (vip.html,
     espace membre…) : reprend à l'identique le fond sitewide
     .dark-section de style.css. */
  background: radial-gradient(circle at 20% 0%, #142a4d 0%, var(--navy-deep) 55%);
}

/* Transition en fondu (pas de ligne nette) entre le blanc de la page
   et le bleu nuit de la vitrine, en haut comme en bas de la section.
   Bandes décoratives non interactives, indépendantes du fond plein
   .shop-showcase-section : le padding ci-dessus (60px) garde le texte
   de l'en-tête en dehors de leur zone de fondu (48px). */
.shop-showcase-section::before,
.shop-showcase-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 5;
}

.shop-showcase-section::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
}

.shop-showcase-section::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}

.shop-showcase-section .section-header {
  margin-bottom: 22px;
}

.shop-showcase-section .section-header p {
  /* Même gris-blanc que le texte "p" utilisé partout où le site passe
     en thème sombre (cf. .dark-section p dans style.css). */
  color: rgba(255, 255, 255, 0.62);
}

.shop-showcase-section .section-header .eyebrow {
  color: var(--gold-light);
}

.shop-showcase-section .section-header h2 {
  color: #fff;
}

/* ---------- Scène ---------- */
/* Conteneur plein largeur (sans le max-width de .container) : la
   scène occupe pratiquement toute la largeur de la fenêtre, comme
   les vitrines produit immersives de référence. */
.shop-stage-outer {
  width: 100%;
  padding: 0 clamp(10px, 2.4vw, 28px);
}

.shop-stage {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  padding: 30px clamp(14px, 3.5vw, 40px) 20px;
  overflow: hidden;
  /* Même bleu que partout ailleurs sur le site où du bleu apparaît
     (vip.html, espace membre…) : c'est le fond sitewide .dark-section
     de style.css (radial-gradient #142a4d → var(--navy-deep)), repris
     ici à l'identique pour une cohérence de couleur totale. */
  background: radial-gradient(circle at 20% 0%, #142a4d 0%, var(--navy-deep) 55%);
  box-shadow: 0 30px 90px rgba(3, 8, 18, 0.55);
  opacity: 0;
  transform: translateY(60px) scale(0.97);
}

.shop-stage.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Fond dynamique : deux univers qui se fondent ---------- */
.shop-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.shop-bg-layer {
  position: absolute;
  inset: -20%;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-bg-layer.is-visible {
  opacity: 1;
}

/* Base identique aux deux univers (même bleu sitewide) : seule la
   force du halo doré change d'une offre à l'autre, pour rester
   cohérent avec le bleu utilisé partout ailleurs sur le site. */
.shop-bg-layer[data-bg="essentielle"] {
  background:
    radial-gradient(48% 40% at 22% 28%, rgba(223, 199, 147, 0.14), transparent 60%),
    radial-gradient(circle at 20% 0%, #142a4d 0%, var(--navy-deep) 55%);
}

.shop-bg-layer[data-bg="avance"] {
  background:
    radial-gradient(50% 42% at 78% 22%, rgba(223, 199, 147, 0.22), transparent 60%),
    radial-gradient(circle at 20% 0%, #142a4d 0%, var(--navy-deep) 55%);
}

.shop-bg-layer[data-bg="premium"] {
  background:
    radial-gradient(46% 44% at 50% 18%, rgba(223, 199, 147, 0.26), transparent 62%),
    radial-gradient(circle at 20% 0%, #142a4d 0%, var(--navy-deep) 55%);
}

.shop-bg-blob {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-radius: 50%;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(201, 162, 75, 0.14), transparent 70%);
  animation: shop-bg-drift 34s ease-in-out infinite;
  will-change: transform;
}

@keyframes shop-bg-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -6%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---------- Rangée de cartes (desktop) ---------- */
.shop-stage-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 32px);
  perspective: 1600px;
}

.shop-card {
  position: relative;
  flex: 1 1 0%;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(2, 6, 14, 0.4);
  padding: 26px 24px 22px;
  cursor: default;
  transform-style: preserve-3d;
  will-change: transform;
  /* transform géré exclusivement en JS (tilt + FLIP + hover) : pas de
     transition CSS ici, pour éviter tout conflit d'écriture. */
}

/* Netteté : la carte active (celle qu'on regarde vraiment) se détache
   plus franchement du fond — bordure et ombre plus marquées — pour une
   hiérarchie visuelle plus lisible entre "la formule affichée" et les
   deux aperçus secondaires. */
.shop-card.is-active {
  border-color: rgba(223, 199, 147, 0.32);
  box-shadow: 0 26px 70px rgba(2, 6, 14, 0.5);
}

.shop-card.is-active {
  flex: 3 3 0%;
  cursor: default;
}

.shop-card.is-secondary {
  flex: 1 1 0%;
  cursor: pointer;
}

/* Couches de transform indépendantes (aucun conflit d'écriture JS) :
   .shop-card       → position/échelle FLIP (échange des deux cartes)
   .shop-card-tilt  → inclinaison 3D selon le curseur (parallaxe)
   .shop-card-breathe → respiration continue (vivant, en boucle)
   Chacune anime uniquement `transform`, jamais la même instance. */
.shop-card-tilt {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
}

.shop-card-breathe {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.shop-card-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 199, 147, 0.22), transparent 65%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}

.shop-card.is-active .shop-card-halo {
  opacity: 1;
}

.shop-card-featured-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  z-index: 2;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #241a05;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(201, 162, 75, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.shop-card.is-active .shop-card-featured-badge {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Icône produit : couche indépendante (parallax multi-couches) ----------
   Taille fixe et identique sur les deux cartes (active ou secondaire) afin que
   le badge/titre/prix qui suivent démarrent exactement à la même hauteur des
   deux côtés — c'est cette hauteur commune qui garantit l'alignement visuel. */
.shop-card-illustration {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 15px;
  will-change: transform;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.shop-card-illustration svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.shop-card[data-product="essentielle"] .shop-card-illustration {
  background: linear-gradient(150deg, #1c3966, #0a1f3c 75%);
  color: var(--gold-light);
}

.shop-card[data-product="avance"] .shop-card-illustration {
  background: linear-gradient(150deg, var(--gold-light), var(--gold-dark) 80%);
  color: #241a05;
}

.shop-card[data-product="premium"] .shop-card-illustration {
  background: linear-gradient(150deg, #2b2f38, #12141a 82%);
  border: 1px solid rgba(223, 199, 147, 0.5);
  color: var(--gold-light);
}

/* Lien secondaire sous le CTA principal (ex. offre Premium : "ou XX €/an") */
.shop-card-cta-alt {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}
.shop-card-cta-alt:hover,
.shop-card-cta-alt:focus-visible {
  color: var(--gold-light);
}

/* ---------- Contenu texte ---------- */
.shop-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shop-card-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  background: rgba(223, 199, 147, 0.12);
  border: 1px solid rgba(223, 199, 147, 0.28);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.shop-card-title {
  color: #fff;
  font-size: clamp(16px, 1.7vw, 21px);
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}

.shop-card-price {
  color: #fff;
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 700;
  margin-bottom: 6px;
}

.shop-card-price span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

/* Carte Premium : prix mensuel mis en avant + prix annuel juxtapose
   en repere secondaire (au lieu d'une simple mention en petit texte). */
.shop-card-price-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.shop-card-price-main {
  margin-bottom: 0;
  font-size: clamp(26px, 3vw, 34px);
}

.shop-card-price-annual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 10px 6px;
  border: 1px solid rgba(223, 199, 147, 0.28);
  border-radius: 10px;
  background: rgba(223, 199, 147, 0.07);
  margin-bottom: 1px;
}

.shop-card-price-annual-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.shop-card-price-annual-amount {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.shop-card-price-annual-amount span {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.shop-card-price-annual-detail {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* Phrase choc : traduit l'économie annuelle en repère quotidien concret,
   pour rendre l'avantage tangible en un coup d'œil (juste sous le bloc
   de prix, avant la description). */
.shop-card-shock {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(223, 199, 147, 0.1);
  border: 1px solid rgba(223, 199, 147, 0.22);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 12px;
  line-height: 1.4;
}

.shop-card-desc {
  /* Même gris-blanc que .dark-section p ailleurs sur le site. */
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.shop-card-features {
  list-style: none;
  margin: 0 0 4px;
  padding: 12px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* CORRECTIF 2026-08-25 (demande de Jean, "pas autant d'espace entre
     les points") : l'ancien flex:1 + space-evenly étirait l'espace
     disponible ENTRE chaque point, ce qui donnait de grands vides sur
     les cartes courtes. Les points restent maintenant compacts (gap
     fixe) et c'est .shop-card-cta (margin-top:auto, cf. plus bas) qui
     absorbe l'espace restant en un seul bloc, juste avant le bouton. */
}

.shop-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  line-height: 1.45;
}

.shop-card-features svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0;
  padding: 3px;
  border-radius: 50%;
  background: rgba(223, 199, 147, 0.14);
  color: var(--gold-light);
  box-sizing: border-box;
}

/* Plafond visuel : au-delà de 6 avantages, on affiche une mention
   plutôt que d'allonger la carte (contenu toujours présent dans le
   DOM, juste masqué visuellement — cf. .shop-feature-extra). */
.shop-feature-extra {
  display: none;
}

.shop-card-more {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-light);
  margin: 0 0 10px;
}

.shop-card-cta {
  margin-top: auto;
}

/* "Voir plus" (carte Premium) : renvoie vers vip.html pour l'argumentaire
   complet, au-dessus du CTA d'achat doré — jamais plus mis en avant que
   lui, juste une étape de réassurance avant de payer. */
.shop-card-more-btn {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 13px;
  padding: 9px 16px;
}

/* Le CTA doré (offre Avancée) garde son style existant, ici affiné pour
   la scène sombre : ombre dorée cohérente avec --shadow-gold. */
.shop-showcase-section .btn-gold {
  box-shadow: var(--shadow-gold);
}

.shop-showcase-section .btn-outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.shop-showcase-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ---------- État secondaire : aperçu discret ---------- */
.shop-card.is-secondary .shop-card-content {
  opacity: 0.7;
}

.shop-card.is-secondary .shop-card-features li:nth-child(n+4) {
  display: none;
}

.shop-card.is-secondary .shop-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Overlay d'activation (carte secondaire uniquement) ---------- */
.shop-card-activate {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.shop-card.is-active .shop-card-activate {
  pointer-events: none;
  visibility: hidden;
}

/* Pas de bouton/label visible : la carte secondaire s'active au survol
   (voir shop-showcase.js). Le curseur "pointer" + l'assombrissement /
   la remontée d'ombre au :hover (cf. plus bas) suffisent à signaler
   l'interactivité, sans ajouter d'élément visuel supplémentaire. */

/* ---------- Focus clavier visible (AA) ---------- */
.shop-card-activate:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -3px;
}

.shop-card .shop-card-cta:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.shop-dot:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ---------- Indicateurs (dots) ---------- */
.shop-stage-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.shop-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transform: scale(1);
  transition: background 0.35s ease, transform 0.35s ease;
}

.shop-dot[aria-selected="true"] {
  background: var(--gold-light);
  transform: scale(1.3);
}

.shop-dot-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.shop-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Repli si Motion One n'a pas pu se charger (CDN indisponible) :
   respiration en CSS pur, mêmes valeurs (1 à 2 %). */
.shop-breathe-fallback {
  animation: shop-card-breathe-css 4.6s ease-in-out infinite;
}

@keyframes shop-card-breathe-css {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}

/* ---------- Micro-interaction hover (feedback non-transform) ---------- */
.shop-card.is-secondary:hover,
.shop-card.is-secondary:focus-within {
  box-shadow: 0 24px 60px rgba(2, 6, 14, 0.55);
}

/* ============================================================
   Mobile : carte principale + aperçu partiel, swipe + snap natif
   ============================================================ */
@media (max-width: 760px) {
  .shop-stage-outer {
    padding: 0 12px;
  }

  .shop-stage {
    padding: 40px 0 32px;
    border-radius: 24px;
  }

  .shop-stage-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 14vw 8px 8vw;
    perspective: none;
    scrollbar-width: none;
  }

  .shop-stage-inner::-webkit-scrollbar {
    display: none;
  }

  .shop-card,
  .shop-card.is-active,
  .shop-card.is-secondary {
    flex: 0 0 78vw;
    max-width: 420px;
    scroll-snap-align: center;
  }

  .shop-card.is-secondary {
    opacity: 0.75;
  }

  .shop-card.is-secondary .shop-card-features li:nth-child(n+4) {
    display: flex;
  }

  .shop-card-activate {
    display: none;
  }
}

/* ============================================================
   BANDEAU DE RÉASSURANCE — sous le hero
   ------------------------------------------------------------
   Inspiré du bandeau fin en haut des pages catalogue e-commerce
   (3 mentions courtes, séparées par un point). Fond blanc, texte
   discret : ne fait pas concurrence au hero juste au-dessus.
   ============================================================ */
.shop-promo-bar {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.shop-promo-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 0;
}

.shop-promo-bar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  padding: 0 18px;
}

.shop-promo-bar-item:not(:last-child) {
  border-right: 1px solid var(--border);
}

.shop-promo-bar-item svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--gold-dark);
}

@media (max-width: 720px) {
  .shop-promo-bar-item { border-right: none !important; padding: 0 10px; }
}

.dark-section .shop-promo-bar { border-bottom-color: var(--pg-glass-border); }
.dark-section .shop-promo-bar-item { color: rgba(255,255,255,0.8); }
.dark-section .shop-promo-bar-item:not(:last-child) { border-right-color: var(--pg-glass-border); }

/* ============================================================
   "CE QUE CONTIENT CHAQUE FORMULE" — grille catalogue
   ------------------------------------------------------------
   Reprend la logique visuelle d'une grille de fiches produit
   (carte arrondie, icône colorée, badge de palier) sans inventer
   de faux avis / notes : chaque carte correspond à une ressource
   réellement incluse dans une des 3 formules ci-dessus.
   ============================================================ */
.shop-included-section {
  padding: 66px 0 60px;
  background: var(--off-white);
}

.dark-section .shop-included-section { background: transparent; }

.shop-included-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.shop-included-head .eyebrow { justify-content: center; }

.shop-included-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.shop-included-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.shop-included-card:hover,
.shop-included-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.shop-included-card:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Signale la nature cliquable de la carte sans surcharger le visuel. */
.shop-included-body::after {
  content: "Voir le détail →";
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-dark);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.shop-included-card:hover .shop-included-body::after,
.shop-included-card:focus-visible .shop-included-body::after {
  opacity: 1;
  transform: translateY(0);
}

/* Aperçu réel du document (capture du PDF/Excel vendu) — ou, à défaut
   (contenu Premium sans fichier), une icône centrée sur fond doré clair. */
.shop-included-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.shop-included-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* CORRECTIF 2026-08-24d (demande de Jean) : les captures du dashboard,
   des notes, des outils et de l'Académie sont toutes bien plus larges que
   hautes (~2/1, plein écran) — avec l'aspect-ratio 4/3 par défaut de
   .shop-included-cover, "contain" laissait des bandes bleu marine en haut/
   bas ou sur les côtés (essayé puis rejeté par Jean, "pas de bande bleue"),
   et "cover" recadrait trop serré. On aligne plutôt le ratio du cadre
   lui-même sur celui des captures (2/1) : l'image remplit alors tout le
   cadre en "cover" sans bande vide et avec un recadrage minime. */
.shop-included-cover.is-full-shot {
  aspect-ratio: 2 / 1;
}
.shop-included-cover.is-full-shot img {
  object-fit: cover;
  object-position: top center;
}

.shop-included-cover.is-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.08);
}

.shop-included-cover.is-icon-only svg {
  width: 34px;
  height: 34px;
  color: var(--gold-dark);
}

.shop-included-cover-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  padding: 3px 9px;
  border-radius: 999px;
}

/* Badge de type de fichier — Excel / PDF / logo GammaInvest (contenu
   Premium, sans fichier). Deux tailles : petite pastille en coin d'un
   aperçu réel, ou grand format centré quand il n'y a pas d'image. */
.shop-filetype-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.shop-filetype-badge svg,
.shop-filetype-badge img {
  width: 100%;
  height: 100%;
  display: block;
}

.shop-filetype-badge.is-corner {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
}

.shop-filetype-badge.is-large {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: none;
  background: #fff;
  padding: 10px;
}

.shop-filetype-badge.is-large.shop-filetype-gi {
  background: var(--off-white);
  padding: 12px;
}

.shop-filetype-badge.is-large img { object-fit: contain; }

.shop-included-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shop-included-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold-dark);
  margin-bottom: 14px;
}

.shop-included-icon svg { width: 20px; height: 20px; }

.shop-included-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.shop-included-card h4 {
  font-size: 14.5px;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.35;
}

.shop-included-tag {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
}

.shop-included-tag.tag-essentielle {
  color: var(--navy);
  background: rgba(10, 31, 60, 0.07);
}

.dark-section .shop-included-tag.tag-essentielle {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.1);
}

.shop-included-tag.tag-avance {
  color: var(--gold-dark);
  background: rgba(201, 162, 75, 0.14);
}

.dark-section .shop-included-tag.tag-avance {
  color: var(--gold-light);
  background: rgba(201, 162, 75, 0.18);
}

.shop-included-tag.tag-premium {
  color: #fff;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
}

@media (max-width: 960px) {
  .shop-included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .shop-included-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   "POURQUOI CHOISIR GAMMAINVEST" — bandeau 4 arguments
   ============================================================ */
.shop-why-section {
  padding: 56px 0 66px;
  background: var(--white);
}

/* CORRECTIF 2026-08-21 (demande de Jean) : la page Shop doit passer
   entièrement en noir pour un visiteur Premium/admin, comme le reste du
   site — plus de sections "îlots clairs". On bascule chaque fond clair
   vers transparent (hérite du noir de <main class="dark-section">) et on
   ajuste juste les couleurs de texte pour rester lisible. */
.dark-section .shop-why-section { background: transparent; }
.dark-section .shop-why-item h4 { color: #fff; }
.dark-section .shop-why-item p { color: rgba(255,255,255,0.6); }
.dark-section .shop-why-icon { background: rgba(201,162,75,0.16); }

.shop-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.shop-why-item {
  text-align: center;
}

.shop-why-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.1);
  color: var(--gold-dark);
}

.shop-why-icon svg { width: 24px; height: 24px; }

.shop-why-item h4 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 6px;
}

.shop-why-item p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .shop-why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

/* ============================================================
   FAQ SHOP — largeur de lecture confortable
   ============================================================ */
.shop-faq-section {
  padding: 56px 0 70px;
  background: var(--off-white);
}

.dark-section .shop-faq-section { background: transparent; }

.shop-faq-head {
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}

.shop-faq-head .eyebrow { justify-content: center; }

.shop-faq-list {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 22px;
}

/* ============================================================
   CORRECTIF 2026-08-21 (remplace le correctif du 2026-08-18) — Jean veut
   désormais que la page Shop passe entièrement en noir pour un visiteur
   Premium/admin, comme le reste du site (plus d'« îlots clairs »). Fini
   les contre-règles qui forçaient du navy-sur-blanc dans .dark-section :
   place à un vrai thème sombre sur ces blocs (fond verre dépoli
   --pg-glass, texte blanc/gris clair), cohérent avec .dark-section .card
   et .dark-section .blog-card déjà utilisés ailleurs sur le site.
   ============================================================ */
.dark-section .shop-faq-list {
  background: var(--pg-glass);
  border-color: var(--pg-glass-border);
}
.dark-section .shop-faq-head .eyebrow { color: var(--gold-light); }
.dark-section .shop-faq-head h2 { color: #fff; }
.dark-section .shop-faq-list .tool-faq-item { border-color: var(--pg-glass-border); }
.dark-section .shop-faq-list .tool-faq-item summary { color: #fff; }
.dark-section .shop-faq-list .tool-faq-item p { color: rgba(255,255,255,0.6); }

.dark-section .shop-included-head .eyebrow { color: var(--gold-light); }
.dark-section .shop-included-head h2 { color: #fff; }
.dark-section .shop-included-head p { color: rgba(255,255,255,0.6); }

.dark-section .shop-included-card {
  background: var(--pg-glass);
  border-color: var(--pg-glass-border);
}
.dark-section .shop-included-card:hover,
.dark-section .shop-included-card:focus-visible {
  border-color: var(--gold);
}
.dark-section .shop-included-cover {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--pg-glass-border);
}
.dark-section .shop-included-cover.is-icon-only { background: rgba(201,162,75,0.1); }
.dark-section .shop-included-cover-badge {
  color: var(--navy);
  background: rgba(255,255,255,0.85);
}
.dark-section .shop-included-kicker { color: rgba(255,255,255,0.45); }
.dark-section .shop-included-card h4,
.dark-section .shop-included-body h4 { color: #fff; }
.dark-section .shop-filetype-badge.is-large { background: rgba(255,255,255,0.06); }
.dark-section .shop-filetype-badge.is-large.shop-filetype-gi { background: rgba(255,255,255,0.03); }

.dark-section .shop-modal-backdrop { background: rgba(0,0,0,0.72); }
.dark-section .shop-modal-dialog {
  background: #12141a;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  border: 1px solid var(--pg-glass-border);
}
.dark-section .shop-modal-close {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
}
.dark-section .shop-modal-close:hover,
.dark-section .shop-modal-close:focus-visible {
  background: rgba(201,162,75,0.18);
  color: var(--gold-light);
}
.dark-section .shop-modal-kicker { color: rgba(255,255,255,0.45); }
.dark-section .shop-modal-dialog h3 { color: #fff; }
.dark-section .shop-modal-subtitle { color: var(--gold-light); }
.dark-section .shop-modal-desc { color: rgba(255,255,255,0.65); }

/* ============================================================
   MODALE DE DÉTAIL — grille "Ce que contient chaque formule"
   ------------------------------------------------------------
   Une seule instance dans le DOM (#shop-modal), remplie au clic
   par assets/js/shop-included-modal.js. Fond clair (cohérent avec
   la grille catalogue juste au-dessus, elle-même en fond clair).
   ============================================================ */
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.shop-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.shop-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.shop-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(2, 6, 14, 0.45);
  padding: 32px 28px 28px;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.25s ease;
}

.shop-modal.is-open .shop-modal-dialog {
  transform: translateY(0) scale(1);
}

.shop-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--text-secondary);
  cursor: pointer;
}

.shop-modal-close:hover,
.shop-modal-close:focus-visible {
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-dark);
}

.shop-modal-close svg { width: 16px; height: 16px; }

.shop-modal-icon {
  margin-bottom: 16px;
}

.shop-modal-icon .shop-filetype-badge.is-large {
  width: 56px;
  height: 56px;
}

.shop-modal-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.shop-modal-dialog h3 {
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 4px;
}

.shop-modal-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 14px;
}

.shop-modal-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.shop-modal-dialog .shop-included-tag {
  display: inline-block;
}

/* ============================================================
   APERÇU RÉEL DES PRODUITS — mockup "fenêtre d'app" + badges
   ------------------------------------------------------------
   Ajouté 2026-08-23 (demande de Jean) : remplace le simple logo
   PDF/Excel par une vraie capture du contenu (rendue depuis les
   fichiers sources), présentée dans un cadre façon fenêtre
   d'application, avec 2-3 badges qui résument ce qu'on y trouve.
   Utilisé dans la modale #shop-modal (grande version) ; la carte
   de la grille catalogue continue d'utiliser .shop-included-cover
   img (capture recadrée en petit, cf. règles plus haut).
   ============================================================ */
.shop-modal-dialog.has-mockup {
  max-width: 620px;
}

.gi-device-frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--off-white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.gi-device-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #eef0f4;
  border-bottom: 1px solid var(--border);
}

.gi-device-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(10, 31, 60, 0.16);
  display: block;
}

.gi-device-screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* CORRECTIF 2026-08-24h (demande de Jean, "l'image ne doit pas être
   coupée") : les 4 captures réelles (Notes, Patrimoine, Outils, Académie)
   sont presque 2/1, assez proches du cadre 16/9 pour qu'un "contain" ne
   laisse que de fines bandes — sur fond quasi noir identique à celui des
   captures, ces bandes sont pratiquement invisibles. */
.gi-device-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #050505;
  display: block;
}

/* Aperçu "Notes d'analyse" — pas de fichier réel à capturer, on
   rejoue une mini-fiche fidèle au format réel (cf. gabarit HTML
   dans le <template> de shop.html), toujours factuelle et sans
   recommandation, cohérente avec la règle du skill note-analyse. */
.gi-note-preview {
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  background: #0d1017;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: inherit;
}

.gi-note-preview .gi-note-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-light);
}

.gi-note-preview h5 {
  margin: 0;
  font-size: 14.5px;
  color: #fff;
  line-height: 1.3;
}

.gi-note-preview .gi-note-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 2px;
}

.gi-note-preview .gi-note-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 8px;
}

.gi-note-preview .gi-note-stat span {
  display: block;
}

.gi-note-preview .gi-note-stat .gi-note-stat-label {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}

.gi-note-preview .gi-note-stat .gi-note-stat-value {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

.gi-note-preview p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}

/* CORRECTIF 2026-08-24b : rangée "Déjà publiées" — 3 mini-pastilles ticker,
   pour rapprocher l'aperçu de la vraie liste de notes (logos + titres) sans
   reproduire des logos de marques déposées. */
.gi-note-preview .gi-note-published { display: flex; align-items: center; gap: 5px; }
.gi-note-preview .gi-note-published-label { font-size: 8.5px; color: rgba(255,255,255,0.4); margin-right: 1px; white-space: nowrap; }
.gi-note-preview .gi-note-published-chip { display: inline-flex; align-items: center; justify-content: center; height: 17px; padding: 0 6px; border-radius: 5px; border: 1px solid; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.01em; }

/* Version compacte utilisée dans la petite carte de la grille catalogue
   (aspect-ratio 4/3) — mêmes infos, densité réduite. */
/* CORRECTIF 2026-08-24 : même correctif que .gi-chart-preview.is-mini
   ci-dessous — dégager la zone du badge PDF/Excel en coin. */
.shop-included-cover .gi-note-preview.is-mini { padding-top: 46px; }
.shop-included-cover .gi-note-preview.is-mini {
  padding: 12px 14px;
  gap: 6px;
}
.shop-included-cover .gi-note-preview.is-mini h5 { font-size: 12.5px; }
.shop-included-cover .gi-note-preview.is-mini .gi-note-stat { padding: 4px 6px; }
.shop-included-cover .gi-note-preview.is-mini .gi-note-stat-label { font-size: 7.5px; }
.shop-included-cover .gi-note-preview.is-mini .gi-note-stat-value { font-size: 10.5px; }
.shop-included-cover .gi-note-preview.is-mini p { display: none; }

/* ============================================================
   APERÇUS "TERMINAL FINANCIER" — remplace les captures brutes des
   fichiers (fond blanc Excel/PDF, hors charte) par des mini-visuels
   SVG dessinés dans le style du site (fond sombre, or/bleu/rouge-
   orangé — mêmes teintes que weightColor() sur Mon Patrimoine).
   Ajouté 2026-08-23 (demande de Jean, 2e retour sur le shop) : chaque
   produit garde un aperçu qui VEND (donnée chiffrée, pas juste un
   nom de fichier) sans ressembler à une capture d'écran brute.
   ============================================================ */
.gi-chart-preview {
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  background: #0d1017;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gi-chart-preview .gi-chart-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-light);
}

.gi-chart-preview .gi-chart-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.gi-chart-preview .gi-chart-svg-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}

.gi-chart-preview .gi-chart-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.gi-chart-preview .gi-chart-caption {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* CORRECTIF 2026-08-24 : mini donut (Tableau de bord patrimoine) — les 3
   cartes de contenu Premium sans fichier réel (Mon Patrimoine, Outils,
   Académie) utilisaient jusqu'ici un simple logo centré ; elles reprennent
   désormais la même famille de mini-visuels "terminal financier" que les
   cartes PDF/Excel. Anneau volontairement sans chiffre inventé (aucune
   donnée personnelle réelle à représenter ici, contrairement au tableau de
   bord d'un membre connecté). */
.gi-chart-preview .gi-chart-donut-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-chart-preview .gi-chart-donut { width: 72px; height: 72px; transform: rotate(-90deg); }

/* CORRECTIF 2026-08-24b : petite courbe croissante au-dessus du donut (carte
   "Tableau de bord patrimoine") — écho de la vraie courbe du dashboard. */
.gi-chart-preview .gi-chart-spark-wrap { flex-shrink: 0; height: 22px; }
.gi-chart-preview .gi-chart-spark { width: 100%; height: 100%; display: block; overflow: visible; }

/* Rangée de pastilles façon onglets d'outils (carte "Une suite d'outils"). */
.gi-chart-preview .gi-chart-tool-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.gi-chart-preview .gi-chart-tool-tabs span { font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

/* Ligne de transactions (Suivi PLV) : liste compacte au lieu d'un SVG. */
.gi-chart-preview .gi-chart-ledger { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }
.gi-chart-preview .gi-chart-ledger-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; padding: 6px 10px; }
.gi-chart-preview .gi-chart-ledger-name { color: rgba(255,255,255,0.75); font-weight: 600; }
.gi-chart-preview .gi-chart-ledger-value { font-weight: 700; }
.gi-chart-preview .gi-chart-ledger-value.is-up { color: #7fd68f; }
.gi-chart-preview .gi-chart-ledger-value.is-down { color: #e2735c; }

/* Barres de comparaison (Calcul de juste prix) : deux lignes label + piste
   + valeur, même logique visuelle que .fin-donut-list-bar sur Mon
   Patrimoine (cohérence entre outils). */
.gi-chart-preview .gi-chart-compare { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.gi-chart-preview .gi-chart-compare-row { display: flex; flex-direction: column; gap: 4px; }
.gi-chart-preview .gi-chart-compare-top { display: flex; align-items: baseline; justify-content: space-between; }
.gi-chart-preview .gi-chart-compare-label { font-size: 10.5px; color: rgba(255,255,255,0.55); font-weight: 600; }
.gi-chart-preview .gi-chart-compare-value { font-size: 12px; font-weight: 700; color: #fff; }
.gi-chart-preview .gi-chart-compare-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gi-chart-preview .gi-chart-compare-fill { display: block; height: 100%; border-radius: 999px; }

/* Version compacte pour la petite carte de la grille catalogue. */
/* CORRECTIF 2026-08-24 : le badge PDF/Excel (.shop-filetype-badge.is-corner,
   30px, ancré top:10px/left:10px) se superposait au début du titre du
   mini-visuel ("Trajectoire d'épargne" devenait illisible) — on pousse le
   contenu sous la zone occupée par le badge. */
.shop-included-cover .gi-chart-preview.is-mini { padding: 46px 14px 12px; gap: 5px; }
.shop-included-cover .gi-chart-preview.is-mini .gi-chart-title { font-size: 12px; }
.shop-included-cover .gi-chart-preview.is-mini .gi-chart-caption { display: none; }
.shop-included-cover .gi-chart-preview.is-mini .gi-chart-ledger-row { padding: 5px 8px; font-size: 10.5px; }

.shop-modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

.shop-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(201, 162, 75, 0.1);
  border: 1px solid rgba(201, 162, 75, 0.22);
  padding: 6px 12px;
  border-radius: 999px;
}

.shop-modal-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-dark);
  flex-shrink: 0;
}

.shop-modal-content-toggle {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.shop-modal-content-toggle summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.shop-modal-content-toggle summary::-webkit-details-marker { display: none; }

.shop-modal-content-toggle summary::after {
  content: "+";
  font-size: 16px;
  color: var(--gold-dark);
  transition: transform 0.2s ease;
}

.shop-modal-content-toggle[open] summary::after { transform: rotate(45deg); }

.shop-modal-content-toggle ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-modal-content-toggle li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}

.shop-modal-content-toggle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.dark-section .gi-device-frame { border-color: var(--pg-glass-border); background: rgba(255,255,255,0.03); }
.dark-section .gi-device-bar { background: rgba(255,255,255,0.05); border-bottom-color: var(--pg-glass-border); }
.dark-section .gi-device-bar span { background: rgba(255,255,255,0.18); }
.dark-section .shop-modal-badge {
  color: var(--gold-light);
  background: rgba(201,162,75,0.12);
  border-color: rgba(201,162,75,0.28);
}
.dark-section .shop-modal-content-toggle { border-top-color: var(--pg-glass-border); }
.dark-section .shop-modal-content-toggle summary { color: #fff; }
.dark-section .shop-modal-content-toggle li { color: rgba(255,255,255,0.6); }

@media (max-width: 560px) {
  .shop-modal-dialog.has-mockup { max-width: 460px; }
}

/* ============================================================
   Accessibilité : prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .shop-stage,
  .shop-bg-layer,
  .shop-card,
  .shop-card-breathe,
  .shop-card-illustration,
  .shop-card-halo,
  .shop-card-featured-badge,
  .shop-dot {
    transition-duration: 0.01ms !important;
    animation: none !important;
    transform: none !important;
  }

  .shop-stage {
    opacity: 1;
    transform: none;
  }

  .shop-bg-blob {
    animation: none !important;
  }
}