/* =============================================================================
   SOPOMAID 2026 — Feuille de style du rebranding
   Thème enfant de Flatsome 3.20
   -----------------------------------------------------------------------------
   Sommaire
     1.  Jetons de design (couleurs, typo, rayons, ombres)
     2.  Base et typographie
     3.  Boutons
     4.  En-tête et navigation
     5.  Hero d'accueil
     6.  Bandeau de réassurance
     7.  Grille et cartes produits
     8.  Fiche produit
     9.  Panier et commande
     10. Pied de page
     11. Barre d'action mobile
     12. Blocs éditoriaux (FAQ, étapes, cartes)
     13. Ajustements responsive
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. JETONS DE DESIGN
   -------------------------------------------------------------------------- */

:root {
  /* Fonds — du plus profond au plus clair */
  --sop-ink:        #070911;
  --sop-surface:    #10131F;
  --sop-surface-2:  #191D2C;
  --sop-surface-3:  #222739;
  --sop-line:       #2A3049;

  /* Texte */
  --sop-text:       #EEF0F7;
  --sop-text-soft:  #B9C0D6;
  --sop-text-mute:  #7E88A6;

  /* Couleur de marque : violet électrique */
  --sop-violet:     #7B5CFF;
  --sop-violet-dark:#5B3BE8;
  --sop-violet-soft:rgba(123, 92, 255, 0.14);

  /* Couleur d'action : or — réservée aux CTA d'achat, jamais décorative */
  --sop-gold:       #FFC531;
  --sop-gold-dark:  #E8A400;

  /* Sémantique */
  --sop-green:      #2BD97C;
  --sop-red:        #FF4D6A;

  /* Typographie */
  --sop-font-title: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sop-font-body:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rayons */
  --sop-r-sm: 8px;
  --sop-r-md: 14px;
  --sop-r-lg: 20px;
  --sop-r-pill: 999px;

  /* Ombres */
  --sop-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sop-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sop-shadow-glow: 0 8px 30px rgba(123, 92, 255, 0.35);

  /* Transitions */
  --sop-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -----------------------------------------------------------------------------
   2. BASE ET TYPOGRAPHIE
   -------------------------------------------------------------------------- */

body {
  background-color: var(--sop-ink);
  color: var(--sop-text);
  font-family: var(--sop-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.entry-title,
.product-title {
  font-family: var(--sop-font-title);
  color: var(--sop-text);
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-weight: 700;
  /* Les titres du site étaient forcés en majuscules : on rétablit la casse
     normale, bien plus lisible et bien mieux interprétée par Google. */
  text-transform: none;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }

p { color: var(--sop-text-soft); }

a { color: var(--sop-violet); transition: color 0.2s var(--sop-ease); }
a:hover { color: #9E86FF; }

::selection { background: var(--sop-violet); color: #fff; }

/* Barre de défilement (navigateurs WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sop-ink); }
::-webkit-scrollbar-thumb {
  background: var(--sop-surface-3);
  border-radius: var(--sop-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--sop-violet); }

.page-wrapper,
.dark,
.row,
.section {
  background-color: transparent;
}

/* Anneau de focus accessible — indispensable, et absent du thème d'origine */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--sop-gold);
  outline-offset: 2px;
  border-radius: var(--sop-r-sm);
}

/* Champs de formulaire */
input[type='text'], input[type='email'], input[type='tel'],
input[type='password'], input[type='search'], input[type='number'],
select, textarea, .select2-container .select2-selection {
  background-color: var(--sop-surface-2);
  border: 1px solid var(--sop-line);
  color: var(--sop-text);
  border-radius: var(--sop-r-sm);
  box-shadow: none;
  height: auto;
  padding: 12px 14px;
  font-family: var(--sop-font-body);
  transition: border-color 0.2s var(--sop-ease), box-shadow 0.2s var(--sop-ease);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--sop-violet);
  box-shadow: 0 0 0 3px var(--sop-violet-soft);
}

input::placeholder, textarea::placeholder { color: var(--sop-text-mute); }


/* -----------------------------------------------------------------------------
   3. BOUTONS
   -------------------------------------------------------------------------- */

.button, button, input[type='submit'], .primary {
  font-family: var(--sop-font-title);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--sop-r-pill);
  border: none;
  transition: transform 0.18s var(--sop-ease), box-shadow 0.18s var(--sop-ease),
              background-color 0.18s var(--sop-ease);
}

.button:hover, button:hover { transform: translateY(-2px); }
.button:active, button:active { transform: translateY(0); }

/* CTA principal — or. Réservé à « Acheter » et « Ajouter au panier ». */
.button.primary,
.single_add_to_cart_button,
.checkout-button,
.sop-btn-buy {
  background: linear-gradient(135deg, var(--sop-gold) 0%, var(--sop-gold-dark) 100%);
  color: #14100A !important;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 197, 49, 0.28);
}

.button.primary:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.sop-btn-buy:hover {
  background: linear-gradient(135deg, #FFD05C 0%, var(--sop-gold) 100%);
  box-shadow: 0 10px 28px rgba(255, 197, 49, 0.42);
  color: #14100A !important;
}

/* Bouton secondaire — violet */
.button.alt, .sop-btn-alt {
  background: var(--sop-violet);
  color: #fff !important;
  box-shadow: var(--sop-shadow-glow);
}
.button.alt:hover, .sop-btn-alt:hover { background: var(--sop-violet-dark); color: #fff !important; }

/* Bouton fantôme — actions tertiaires */
.button.is-outline, .sop-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--sop-line);
  color: var(--sop-text) !important;
}
.button.is-outline:hover, .sop-btn-ghost:hover {
  border-color: var(--sop-violet);
  background: var(--sop-violet-soft);
  color: #fff !important;
}

/* Bouton WhatsApp — vert de la marque, mais volontairement plus discret que
   le CTA d'achat : c'est un recours, pas le chemin principal. */
.sop-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 1.5px solid #25D366;
  color: #25D366 !important;
  font-family: var(--sop-font-title);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--sop-r-pill);
  text-decoration: none;
  transition: all 0.18s var(--sop-ease);
}
.sop-btn-whatsapp:hover {
  background: #25D366;
  color: #06210F !important;
  transform: translateY(-2px);
}
.sop-btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; }


/* -----------------------------------------------------------------------------
   4. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */

.header-wrapper,
.header-main,
.header-bottom,
.header-top {
  background-color: var(--sop-ink);
  border: none;
}

.header-wrapper.stuck .header-main {
  background-color: rgba(7, 9, 17, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--sop-line), var(--sop-shadow-md);
}

/* Bandeau annonce — remplace le fouillis promotionnel actuel */
.sop-topbar {
  background: linear-gradient(90deg, var(--sop-violet-dark), var(--sop-violet));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: 0.01em;
}
.sop-topbar strong {
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 9px;
  border-radius: var(--sop-r-sm);
  font-family: var(--sop-font-title);
  letter-spacing: 0.06em;
}

/* Liens de navigation */
.header-nav .nav > li > a,
.nav > li > a {
  font-family: var(--sop-font-title);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--sop-text-soft);
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s var(--sop-ease);
}
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current-menu-item > a { color: var(--sop-text); }

/* Soulignement animé sous l'élément survolé */
.nav > li.menu-item { position: relative; }
.nav > li.menu-item > a::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--sop-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--sop-ease);
}
.nav > li.menu-item:hover > a::after,
.nav > li.current-menu-item > a::after { transform: scaleX(1); }

/* Menus déroulants */
.nav-dropdown {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  box-shadow: var(--sop-shadow-md);
  padding: 8px;
}
.nav-dropdown > li > a {
  color: var(--sop-text-soft);
  border-radius: var(--sop-r-sm);
  padding: 9px 12px;
  border: none;
}
.nav-dropdown > li > a:hover {
  background: var(--sop-surface-2);
  color: var(--sop-text);
}

/* Barre de recherche de l'en-tête — élargie : sur un catalogue de 550 titres,
   la recherche est le premier outil de navigation. */
.header-search-form .searchform input[type='search'] {
  background: var(--sop-surface-2);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-pill);
  padding-left: 18px;
  min-width: 260px;
}

/* Icône panier avec pastille de compteur */
.cart-icon strong {
  border-color: var(--sop-text-soft);
  color: var(--sop-text);
  font-family: var(--sop-font-title);
}
.cart-icon strong::after { background-color: var(--sop-gold); }

/* Menu mobile latéral */
.mfp-content .mobile-sidebar,
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
  background-color: var(--sop-surface);
}


/* -----------------------------------------------------------------------------
   5. HERO D'ACCUEIL
   -------------------------------------------------------------------------- */

.sop-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0;
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(123, 92, 255, 0.30), transparent 62%),
    radial-gradient(760px 420px at 88% 8%, rgba(255, 197, 49, 0.14), transparent 60%),
    var(--sop-ink);
}

/* Trame discrète pour donner de la texture au fond */
.sop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.sop-hero__inner { position: relative; z-index: 2; max-width: 820px; }

.sop-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sop-violet-soft);
  border: 1px solid rgba(123, 92, 255, 0.35);
  color: #C6B7FF;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: var(--sop-r-pill);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.sop-hero__title {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 20px;
}
.sop-hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--sop-gold), #FF8A3D);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sop-hero__sub {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  color: var(--sop-text-soft);
  max-width: 620px;
  margin-bottom: 32px;
}

.sop-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.sop-hero__actions .button { margin: 0; padding: 15px 34px; font-size: 1rem; }

/* Puces de réassurance sous le hero */
.sop-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-pill);
  padding: 8px 15px;
  font-size: 0.85rem;
  color: var(--sop-text-soft);
}
.sop-chip svg { width: 16px; height: 16px; flex: none; stroke: var(--sop-green); }


/* -----------------------------------------------------------------------------
   6. BANDEAU DE RÉASSURANCE
   -------------------------------------------------------------------------- */

.sop-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sop-line);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-lg);
  overflow: hidden;
  margin: 0 0 8px;
}
.sop-trust__item {
  background: var(--sop-surface);
  padding: 30px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sop-trust__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--sop-r-md);
  background: var(--sop-violet-soft);
  color: var(--sop-violet);
}
.sop-trust__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.sop-trust__title {
  font-family: var(--sop-font-title);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--sop-text);
  margin: 0 0 8px;
}
.sop-trust__desc { font-size: 0.83rem; color: var(--sop-text-mute); margin: 0; line-height: 1.62; }


/* -----------------------------------------------------------------------------
   7. GRILLE ET CARTES PRODUITS
   -------------------------------------------------------------------------- */

/* Carte produit — refonte complète. La jaquette du jeu est l'argument de vente
   principal : on la met en avant et on rend toute la carte cliquable. */
.product-small.col .col-inner,
.product-small .box {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--sop-ease),
              border-color 0.25s var(--sop-ease),
              box-shadow 0.25s var(--sop-ease);
}

.product-small .box:hover {
  transform: translateY(-5px);
  border-color: var(--sop-violet);
  box-shadow: var(--sop-shadow-md);
}

.product-small .box-image {
  border-radius: 0;
  background: var(--sop-surface-2);
}
.product-small .box-image img {
  transition: transform 0.45s var(--sop-ease);
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.product-small .box:hover .box-image img { transform: scale(1.05); }

.product-small .box-text {
  padding: 15px 15px 17px;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Titre du produit — 2 lignes maximum, hauteur fixe pour aligner la grille */
.product-small .product-title,
.product-small .name.product-title a {
  font-family: var(--sop-font-title);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sop-text);
  text-transform: none;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-small .product-title a:hover { color: var(--sop-violet); }

/* La catégorie affichée par Flatsome est du bruit : on la masque au profit
   du badge de plateforme, plus utile. */
.product-small .category { display: none; }

/* Prix */
.product-small .price,
.woocommerce-Price-amount {
  font-family: var(--sop-font-title);
  font-weight: 700;
  color: var(--sop-gold);
  font-size: 1.05rem;
}
.product-small del,
.product-small del .woocommerce-Price-amount {
  color: var(--sop-text-mute);
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.75;
}
.product-small ins { text-decoration: none; }

/* Badge de plateforme — injecté par le thème enfant (voir functions.php) */
.sop-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-family: var(--sop-font-title);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--sop-r-sm);
  background: var(--sop-surface-3);
  color: var(--sop-text-soft);
  border: 1px solid var(--sop-line);
}
.sop-platform--ps   { background: rgba(0, 112, 209, 0.16); color: #6BB6FF; border-color: rgba(0, 112, 209, 0.4); }
.sop-platform--xbox { background: rgba(16, 124, 16, 0.16); color: #6BE08A; border-color: rgba(16, 124, 16, 0.45); }
.sop-platform--pc   { background: rgba(123, 92, 255, 0.16); color: #B7A4FF; border-color: rgba(123, 92, 255, 0.4); }
.sop-platform--gift { background: rgba(255, 197, 49, 0.16); color: var(--sop-gold); border-color: rgba(255, 197, 49, 0.4); }

/* La jaquette est l'argument de vente : plus aucune pastille ne vient la
   recouvrir. Le badge de promotion de Flatsome est donc retiré de l'image,
   et le taux de remise réapparaît sous la jaquette, dans la ligne d'étiquettes. */
.product-small .box-image .badge-container,
.product-small .box-image .badge.onsale {
  display: none !important;
}

/* Ligne d'étiquettes : plateforme à gauche, remise à droite. */
.sop-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sop-discount {
  display: inline-flex;
  font-family: var(--sop-font-title);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--sop-r-pill);
  background: var(--sop-red);
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Bouton d'ajout au panier au survol de la carte */
.product-small .add-to-cart-button a {
  border-radius: var(--sop-r-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

/* En-tête de page catégorie */
.shop-page-title,
.page-title-inner {
  background: var(--sop-surface);
  border-bottom: 1px solid var(--sop-line);
}

/* Filtres et tri */
.woocommerce-ordering select,
.wc-block-components-sort-select__select {
  background: var(--sop-surface-2);
  border: 1px solid var(--sop-line);
  color: var(--sop-text);
  border-radius: var(--sop-r-pill);
}

/* Pagination */
.page-numbers li > a, .page-numbers li > span {
  background: var(--sop-surface-2);
  border: 1px solid var(--sop-line);
  color: var(--sop-text-soft);
  border-radius: var(--sop-r-sm);
}
.page-numbers li > .current {
  background: var(--sop-violet);
  border-color: var(--sop-violet);
  color: #fff;
}


/* -----------------------------------------------------------------------------
   8. FICHE PRODUIT
   -------------------------------------------------------------------------- */

.product-main { padding: 40px 0; }

.product-info .product-title,
.product-title.product_title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  font-weight: 800;
  text-transform: none;
  margin-bottom: 14px;
}

/* Bloc de prix mis en évidence */
.product-info .price-wrapper .price {
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  font-weight: 800;
  color: var(--sop-gold);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.product-info .price del { font-size: 1rem; }

/* Ligne d'étiquettes de la fiche produit : plateforme et taux de remise */
.sop-pdp-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Étiquette d'économie, calculée par le thème enfant */
.sop-saving {
  display: inline-block;
  background: rgba(255, 77, 106, 0.15);
  border: 1px solid rgba(255, 77, 106, 0.4);
  color: #FF8497;
  font-family: var(--sop-font-title);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--sop-r-pill);
}

/* Galerie */
.product-gallery .woocommerce-product-gallery__image img {
  border-radius: var(--sop-r-lg);
  border: 1px solid var(--sop-line);
}

/* Zone d'achat regroupée : prix, livraison, CTA et paiements dans un même
   encadré. Réduit la charge cognitive au moment de la décision. */
.sop-buybox {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-lg);
  padding: 22px;
  margin: 22px 0;
}
.sop-buybox__delivery {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--sop-green);
  font-weight: 500;
  margin-bottom: 16px;
}
.sop-buybox__delivery::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sop-green);
  box-shadow: 0 0 0 4px rgba(43, 217, 124, 0.18);
  animation: sop-pulse 2.4s var(--sop-ease) infinite;
}
@keyframes sop-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(43, 217, 124, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(43, 217, 124, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .sop-buybox__delivery::before { animation: none; }
  .button:hover, .product-small .box:hover { transform: none; }
}

/* CTA d'achat pleine largeur */
.single_add_to_cart_button {
  width: 100%;
  padding: 17px 28px !important;
  font-size: 1.05rem !important;
  justify-content: center;
}

/* Séparateur « ou » entre le paiement en ligne et WhatsApp */
.sop-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  color: var(--sop-text-mute);
  font-size: 0.8rem;
}
.sop-or::before, .sop-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sop-line);
}
.sop-buybox .sop-btn-whatsapp { width: 100%; }

/* Logos de paiement acceptés */
.sop-paylogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sop-line);
}
.sop-paylogos span {
  font-size: 0.74rem;
  color: var(--sop-text-mute);
  width: 100%;
  margin-bottom: 2px;
}
.sop-paylogos img { height: 26px; width: auto; border-radius: 4px; opacity: 0.92; }

/* Onglets de la fiche produit */
.woocommerce-tabs .nav-tabs > li > a,
.product-tabs > li > a {
  font-family: var(--sop-font-title);
  color: var(--sop-text-mute);
  text-transform: none;
  font-weight: 600;
  border: none;
}
.woocommerce-tabs .nav-tabs > li.active > a,
.product-tabs > li.active > a {
  color: var(--sop-text);
  border-bottom: 2px solid var(--sop-violet);
}
.woocommerce-tabs .tab-panels { padding-top: 26px; }
.woocommerce-Tabs-panel h2 { font-size: 1.3rem; margin-bottom: 14px; }

/* Produits liés */
.related.related-products-wrapper > h3,
.up-sells > h3 {
  font-size: 1.5rem;
  margin-bottom: 22px;
}


/* -----------------------------------------------------------------------------
   9. PANIER ET COMMANDE
   -------------------------------------------------------------------------- */

.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
#order_review {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-lg);
  padding: 24px;
}

.shop_table, .shop_table th, .shop_table td {
  border-color: var(--sop-line);
  color: var(--sop-text-soft);
  background: transparent;
}
.shop_table th {
  font-family: var(--sop-font-title);
  color: var(--sop-text);
  font-weight: 600;
}
.cart_totals .order-total .amount { color: var(--sop-gold); font-size: 1.4rem; }

/* Méthodes de paiement */
.wc_payment_methods li {
  background: var(--sop-surface-2);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  list-style: none;
  transition: border-color 0.2s var(--sop-ease);
}
.wc_payment_methods li:hover { border-color: var(--sop-violet); }
.wc_payment_methods li label {
  font-family: var(--sop-font-title);
  font-weight: 600;
  color: var(--sop-text);
  cursor: pointer;
}
.payment_box {
  background: var(--sop-ink) !important;
  border-radius: var(--sop-r-sm);
  color: var(--sop-text-soft);
  font-size: 0.88rem;
}
.payment_box::before { display: none !important; }

/* Bouton de validation de commande */
#place_order {
  width: 100%;
  padding: 17px !important;
  font-size: 1.05rem !important;
}

/* Rappel de sécurité sous le bouton de paiement */
.sop-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--sop-text-mute);
}
.sop-secure-note svg { width: 15px; height: 15px; stroke: var(--sop-green); fill: none; }

/* Messages WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--sop-surface-2);
  border-left: 3px solid var(--sop-violet);
  border-radius: var(--sop-r-sm);
  color: var(--sop-text);
}
.woocommerce-message { border-left-color: var(--sop-green); }
.woocommerce-error   { border-left-color: var(--sop-red); }


/* -----------------------------------------------------------------------------
   10. PIED DE PAGE
   -------------------------------------------------------------------------- */

.footer-wrapper, .footer, #footer {
  background: var(--sop-surface);
  border-top: 1px solid var(--sop-line);
}
.footer-widgets { padding: 52px 0 36px; }
.footer h3, .footer .widget-title {
  font-family: var(--sop-font-title);
  color: var(--sop-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 16px;
}
.footer a, .footer p, .footer li {
  color: var(--sop-text-mute);
  font-size: 0.89rem;
}
.footer a:hover { color: var(--sop-text); }
.absolute-footer {
  background: var(--sop-ink);
  border-top: 1px solid var(--sop-line);
  color: var(--sop-text-mute);
  font-size: 0.82rem;
  padding: 18px 0;
}


/* -----------------------------------------------------------------------------
   11. BARRE D'ACTION MOBILE
   -------------------------------------------------------------------------- */

/* Sur mobile, le CTA disparaît au défilement. Cette barre le garde accessible
   en permanence : c'est l'un des leviers de conversion les plus rentables. */
.sop-mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(16, 19, 31, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--sop-line);
}
.sop-mobile-bar__price {
  font-family: var(--sop-font-title);
  font-weight: 800;
  color: var(--sop-gold);
  font-size: 1.05rem;
  line-height: 1.2;
  flex: none;
}
.sop-mobile-bar__price small {
  display: block;
  font-size: 0.66rem;
  color: var(--sop-text-mute);
  font-weight: 500;
}
.sop-mobile-bar .sop-btn-buy { flex: 1; padding: 13px 18px; font-size: 0.95rem; }
.sop-mobile-bar .sop-btn-whatsapp { flex: none; padding: 12px 14px; }
.sop-mobile-bar .sop-btn-whatsapp span { display: none; }

@media (max-width: 849px) {
  .single-product .sop-mobile-bar { display: flex; }
  .single-product .page-wrapper { padding-bottom: 78px; }
}


/* -----------------------------------------------------------------------------
   12. BLOCS ÉDITORIAUX
   -------------------------------------------------------------------------- */

/* Titre de section avec surtitre */
.sop-section-head { margin-bottom: 40px; }
.sop-section-head__eyebrow {
  font-family: var(--sop-font-title);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sop-violet);
  margin-bottom: 14px;
  display: block;
}
.sop-section-head h2 { margin: 0 0 14px; }
.sop-section-head p { color: var(--sop-text-mute); margin: 0; max-width: 640px; }

/* Cartes de plateformes */
.sop-platforms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sop-platform-card {
  position: relative;
  display: block;
  border-radius: var(--sop-r-md);
  border: 1px solid var(--sop-line);
  background: var(--sop-surface);
  padding: 30px 18px;
  text-align: center;
  overflow: hidden;
  transition: all 0.25s var(--sop-ease);
}
.sop-platform-card:hover {
  border-color: var(--sop-violet);
  transform: translateY(-4px);
  box-shadow: var(--sop-shadow-md);
}
.sop-platform-card__name {
  font-family: var(--sop-font-title);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sop-text);
  display: block;
  margin-bottom: 8px;
}
.sop-platform-card__count { font-size: 0.79rem; color: var(--sop-text-mute); }

/* Étapes « comment ça marche » */
.sop-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: sop-step; }
.sop-step {
  position: relative;
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  padding: 32px 22px 26px;
}
.sop-step::before {
  counter-increment: sop-step;
  content: counter(sop-step);
  position: absolute;
  top: -16px; left: 20px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sop-violet), var(--sop-violet-dark));
  color: #fff;
  font-family: var(--sop-font-title);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--sop-shadow-glow);
}
.sop-step h3 { font-size: 1rem; margin: 8px 0 10px; }
.sop-step p { font-size: 0.88rem; color: var(--sop-text-mute); margin: 0; line-height: 1.62; }

/* Accordéon FAQ */
.sop-faq { max-width: 800px; margin: 0 auto; }
.sop-faq details {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.sop-faq details[open] { border-color: var(--sop-violet); }
.sop-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 52px 17px 20px;
  font-family: var(--sop-font-title);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--sop-text);
  position: relative;
}
.sop-faq summary::-webkit-details-marker { display: none; }
.sop-faq summary::after {
  content: '+';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sop-violet);
  transition: transform 0.25s var(--sop-ease);
}
.sop-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sop-faq details > div { padding: 0 20px 19px; color: var(--sop-text-soft); font-size: 0.92rem; }

/* Encadré d'avertissement / information */
.sop-callout {
  display: flex;
  gap: 14px;
  background: var(--sop-violet-soft);
  border: 1px solid rgba(123, 92, 255, 0.32);
  border-radius: var(--sop-r-md);
  padding: 18px 20px;
  margin: 22px 0;
}
.sop-callout svg { flex: none; width: 22px; height: 22px; stroke: var(--sop-violet); fill: none; }
.sop-callout p { margin: 0; font-size: 0.9rem; color: var(--sop-text-soft); }
.sop-callout strong { color: var(--sop-text); }


/* -----------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sop-trust     { grid-template-columns: repeat(2, 1fr); }
  .sop-platforms { grid-template-columns: repeat(3, 1fr); }
  .sop-steps     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 549px) {
  body { font-size: 15px; }
  .sop-trust     { grid-template-columns: 1fr; }
  .sop-platforms { grid-template-columns: repeat(2, 1fr); }
  .sop-steps     { grid-template-columns: 1fr; gap: 26px; }
  .sop-hero      { padding: 44px 0; }
  .sop-hero__actions { flex-direction: column; }
  .sop-hero__actions .button { width: 100%; }
  .product-small .box-text { padding: 11px; }
  .product-small .product-title { font-size: 0.82rem; }
  .woocommerce-cart-form, .cart-collaterals,
  .woocommerce-checkout-review-order, #order_review { padding: 16px; }
}

/* -----------------------------------------------------------------------------
   14. BLOCS DE LA PAGE D'ACCUEIL
   Mise en forme des raccourcis fournis par l'extension SOPOMAID Core.
   -------------------------------------------------------------------------- */

/* Hero sur deux colonnes : texte à gauche, bandeau de prix à droite */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 52px;
  align-items: center;
}

/* ---------- Bandeau de prix animé ----------
   Deux colonnes qui défilent en sens inverse. Le masque en dégradé fait
   disparaître les étiquettes en haut et en bas plutôt que de les couper net. */
.sop-pins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: 580px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.sop-pins__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: sop-defile-y 46s linear infinite;
}
.sop-pins__col--b { animation-duration: 58s; animation-direction: reverse; }
@keyframes sop-defile-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.sop-pins:hover .sop-pins__col,
.sop-pins:focus-within .sop-pins__col { animation-play-state: paused; }

.sop-pin {
  display: block;
  background: #FFFFFF;
  color: #16142A !important;
  border-radius: 18px;
  padding: 14px 14px 16px;
  text-align: center;
  flex: none;
  box-shadow: 6px 6px 0 rgba(7, 9, 17, 0.85), 0 14px 34px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.5deg);
  transition: transform 0.25s var(--sop-ease);
}
.sop-pins__col > .sop-pin:nth-child(even) { transform: rotate(1.6deg); }
.sop-pin:hover { transform: rotate(0deg) scale(1.03); }

.sop-pin__oeillet {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--sop-gold);
  margin: 0 auto 12px;
}
.sop-pin img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 11px;
  margin-bottom: 12px;
  display: block;
}
.sop-pin__plat {
  display: block;
  font-family: var(--sop-font-title);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sop-violet-dark);
}
.sop-pin__titre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sop-font-title);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.25;
  margin: 7px 0 10px;
}
.sop-pin__store {
  display: block;
  font-family: var(--sop-font-title);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B87A6;
}
.sop-pin__store s { display: block; font-size: 0.78rem; letter-spacing: 0.02em; margin-top: 2px; }
.sop-pin__prix {
  display: block;
  font-family: var(--sop-font-title);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.sop-pin__gain {
  display: inline-block;
  background: #E4322B;
  color: #fff;
  font-family: var(--sop-font-title);
  font-weight: 700;
  font-size: 0.64rem;
  padding: 6px 13px;
  border-radius: var(--sop-r-pill);
  margin-top: 11px;
  font-variant-numeric: tabular-nums;
}

/* Le prix des étiquettes est rendu par WooCommerce : on neutralise l'or */
.sop-pin .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.sop-pin__store .woocommerce-Price-amount { color: #8B87A6; }

/* ---------- Prix du store sur la fiche produit ---------- */
.sop-eco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sop-store {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--sop-text-mute);
}
.sop-store s { color: var(--sop-text-mute); }
.sop-store small { font-size: 0.72rem; opacity: 0.8; }

/* ---------- Avis Trustpilot ---------- */
.sop-tp { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.sop-tp__score {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-lg);
  padding: 26px;
}
.sop-tp__num {
  font-family: var(--sop-font-title);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sop-tp__num span { font-size: 1.1rem; color: var(--sop-text-mute); font-weight: 600; }
.sop-tp__stars { display: flex; gap: 3px; margin: 14px 0 10px; }
.sop-tp__stars i {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: #00B67A;
  display: grid;
  place-items: center;
}
.sop-tp__stars i.off { background: var(--sop-surface-3); }
.sop-tp__stars svg { width: 15px; height: 15px; fill: #fff; }
.sop-tp__count { font-size: 0.86rem; color: var(--sop-text-mute); }
.sop-tp__bars { margin-top: 20px; display: flex; flex-direction: column; gap: 7px; }
.sop-tp__bar {
  display: grid;
  grid-template-columns: 52px 1fr 38px;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  color: var(--sop-text-mute);
}
.sop-tp__bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sop-tp__bar b { display: block; height: 7px; border-radius: 4px; background: var(--sop-surface-3); overflow: hidden; }
.sop-tp__bar b i { display: block; height: 100%; background: #00B67A; }
.sop-tp__lien { font-size: 0.83rem; }

.sop-tp__reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sop-tp__review {
  background: var(--sop-surface);
  border: 1px solid var(--sop-line);
  border-radius: var(--sop-r-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sop-tp__review .sop-tp__stars i { width: 18px; height: 18px; }
.sop-tp__review .sop-tp__stars svg { width: 12px; height: 12px; }
.sop-tp__review p { font-size: 0.9rem; flex: 1; margin: 0; }
.sop-tp__sign {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 0.79rem;
  color: var(--sop-text-mute);
}
.sop-tp__sign strong { color: var(--sop-text); font-weight: 600; }
.sop-tp__pays {
  font-family: var(--sop-font-title);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--sop-r-sm);
  background: var(--sop-surface-3);
  border: 1px solid var(--sop-line);
  color: var(--sop-text-soft);
}
.sop-tp__verif { color: #00B67A; font-weight: 600; }

/* Sur écran étroit, le bandeau passe à l'horizontale : une colonne verticale
   mangerait toute la hauteur utile du hero. */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .sop-pins {
    grid-template-columns: 1fr;
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .sop-pins__col { flex-direction: row; animation-name: sop-defile-x; animation-duration: 52s; }
  .sop-pins__col--b { display: none; }
  .sop-pin { width: 178px; }
  @keyframes sop-defile-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

@media (max-width: 1024px) {
  .sop-tp { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sop-tp__reviews { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sop-pins__col { animation: none; }
  .sop-pins { height: auto; max-height: 580px; }
  .sop-pin:hover { transform: none; }
}

/* Impression : rendu clair et lisible */
@media print {
  body { background: #fff; color: #000; }
  .sop-mobile-bar, .header-wrapper, .footer-wrapper, .sop-pins { display: none !important; }
}