/* ORKYVA — SUNCODE preorder page: adaptation layer over the canonical
   produit-detail template. Loaded only on the UNLOCKED state, AFTER
   /css/produit-detail*.css so the shop styling wins the base; this file only
   adds SUNCODE-specific pieces. Dark-mode aware (the live shop runs
   body.dark-mode). No new UI library.

   [LAUNCH-PAGE-01 2026-08-03] Réorganisation complète du fichier pour la
   nouvelle architecture éditoriale : hero 2 colonnes borné au bloc d'achat,
   réassurance unique, FAQ 12 questions. Les correctifs historiques prouvés
   (buy-bar fixe neutralisée en DESCENDANT, background-clip du mini-panier,
   z-index header/main, background-image jamais en shorthand) sont conservés
   à l'identique. Palette : vert canonique en tête ; accents SUNCODE MODÉRÉS
   (sable/écru, ocre/solaire, lagon) réservés aux micro-éléments d'identité
   du motif — jamais sur le CTA ni le prix. */

/* ============================================================================
   1. AMBIANCE — halos statiques (background-image SEUL, jamais le shorthand
   `background`, qui réinitialiserait background-clip ailleurs). [A1D3/§7]
   ========================================================================== */
body.sc-shop {
  background-image:
    radial-gradient(56% 42% at 10% -2%,  rgba(46, 204, 113, 0.12), transparent 60%),
    radial-gradient(52% 40% at 100% 4%,  rgba(46, 204, 113, 0.10), transparent 62%),
    radial-gradient(50% 46% at 88% 52%,  rgba(56, 166, 160, 0.08), transparent 60%),
    radial-gradient(62% 50% at 38% 108%, rgba(107, 164, 92, 0.07), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* keep footer + main above the fixed ambience layer; the header sits HIGHER still
   so its burger dropdown overlays the product content. [LOT16B-1A-UI] */
body.sc-shop main, body.sc-shop .footer { position: relative; z-index: 1; }
body.sc-shop header { position: relative; z-index: 1000; }

/* ---- Header: hide the desktop nav-links at the canonical breakpoint (<=1024px)
   so the always-present burger dropdown becomes the primary navigation below it. ---- */
@media (max-width: 1024px) {
  body.sc-shop .navbar .nav-links { display: none !important; }
}

/* ============================================================================
   2. HERO — grille canonique #product-detail-content (2 colonnes desktop).
   La grille s'arrête après .product-info : tout ce qui suit est pleine largeur.
   ========================================================================== */

/* Galerie sticky sur DESKTOP uniquement, bornée à la zone hero (la grille se
   termine après le bloc d'achat, donc la galerie se libère ensuite). [A1D3 §4] */
@media (min-width: 1025px) {
  #product-detail-content > .product-gallery {
    position: sticky; top: 84px; align-self: start;
  }
}

/* ---- Galerie : panneaux écrus + boutons accessibles (miniatures/zoom =
   <button> depuis A2H).
   [CAROUSEL-01] Carrousel de 6 visuels : piste horizontale à défilement
   accroché (swipe natif), précédent/suivant, miniatures, compteur.
   RATIO : chaque visuel est CONTENU (object-fit: contain), jamais rogné ni
   étiré ; la scène suit le format 3:4 des visuels n°1-3 (les n°4-6, en 4:5,
   gardent une fine marge écrue). Hauteur plafonnée par la fenêtre pour qu'un
   visuel vertical ne devienne pas démesuré. Aucun filtre sur les visuels :
   les commandes posées dessus n'ont ni flou d'arrière-plan ni voile coloré.
   ⚠️ La feuille canonique mobile impose `object-fit: cover` et un cadre 4:5 à
   `#main-product-image` (sélecteur à ID, ≤768 px) : le carrousel n'utilise
   plus cet identifiant et fixe son cadre par `#gallery-main-container`. ---- */
.product-detail-page .main-image-container { background: #ECE4D3; border-radius: 14px; }
main.product-detail-page #gallery-main-container {
  position: relative; overflow: hidden; width: 100%; height: auto;
  aspect-ratio: 3 / 4; max-height: max(360px, calc(100vh - 190px));
  background: #ECE4D3;
}
.sc-carousel__track {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-radius: inherit;
}
.sc-carousel__track::-webkit-scrollbar { display: none; }
.sc-carousel__track:focus-visible { outline: 3px solid #1E8449; outline-offset: -3px; }
body.dark-mode .sc-carousel__track:focus-visible { outline-color: #3DDC84; }
.sc-carousel__slide {
  flex: 0 0 100%; width: 100%; height: 100%; margin: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.sc-carousel__slide picture { display: block; width: 100%; height: 100%; }
.product-detail-page .sc-carousel__img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center; background: #ECE4D3;
}
.product-detail-page .thumbnail-image { object-fit: contain; background: #ECE4D3; }
.sc-thumb__btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; line-height: 0;
  border-radius: 10px;
}
.sc-thumb__btn picture { display: block; }
.sc-thumb__btn:focus-visible { outline: 3px solid #1E8449; outline-offset: 3px; }
body.dark-mode .sc-thumb__btn:focus-visible { outline-color: #3DDC84; }
.product-detail-page button.zoom-icon,
.product-detail-page button.gallery-nav-btn {
  padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.product-detail-page button.zoom-icon:focus-visible,
.product-detail-page button.gallery-nav-btn:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }
body.dark-mode .product-detail-page button.zoom-icon:focus-visible,
body.dark-mode .product-detail-page button.gallery-nav-btn:focus-visible { outline-color: #3DDC84; }
main.product-detail-page #gallery-main-container .gallery-nav-btn,
main.product-detail-page #gallery-main-container .zoom-icon {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* compteur « n / 6 » : repère visuel ; l'annonce vocale passe par #sc-carousel-status */
.sc-carousel__counter {
  position: absolute; left: 10px; bottom: 10px; z-index: 5; margin: 0;
  padding: 2px 9px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, 0.9); color: #2b2b2b;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .sc-carousel__counter { background: rgba(20, 20, 20, 0.85); color: #f1f1f1; }

/* Miniatures : 6 colonnes égales, jamais de retour à la ligne ni de défilement
   (donc aucun débordement horizontal). `touch-action` rendu au défaut utile :
   la règle canonique `pan-x` des bandes défilantes bloquerait ici le
   défilement vertical de la page quand le doigt part d'une miniature. */
main.product-detail-page #product-thumbnails {
  display: grid; grid-template-columns: repeat(6, minmax(0, 68px));
  justify-content: center; align-items: start; gap: 10px;
  margin-top: 12px; padding: 4px 2px; overflow: visible;
  scroll-snap-type: none; touch-action: manipulation;
}
.sc-thumb { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 0; min-width: 0; }
main.product-detail-page #product-thumbnails .sc-thumb .thumbnail-image {
  display: block; box-sizing: border-box; width: 100% !important; height: auto !important;
  aspect-ratio: 3 / 4;
}
/* ⚠️ premium-ux.css masque TOUTE image `loading="lazy"` (opacity: 0) jusqu'à ce
   que premium-ux.js lui ajoute .tu-ux-loaded — script NON chargé sur cette page.
   Sans ces règles : visuels 2-6 invisibles tant qu'ils restent différés, et
   miniatures inactives invisibles en desktop (défaut mesuré sur la page en
   production : miniature « Textile » à opacity 0 à 1280 px). Le 0,78 mobile
   canonique (sélecteur plus spécifique) reste inchangé. */
.product-detail-page .sc-carousel__img { opacity: 1; }
.sc-thumb .thumbnail-image { opacity: 0.7; }
.sc-thumb .thumbnail-image.active { opacity: 1; }
.sc-thumb figcaption {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray, #8a8a8a); text-align: center; line-height: 1.25;
}
body.dark-mode .sc-thumb figcaption { color: #9a9a9a; }
/* indicateur actif : ocre SUNCODE (identité du motif), bordure verte canonique */
.sc-thumb:has(.thumbnail-image.active) figcaption { color: #8A5A1B; }
body.dark-mode .sc-thumb:has(.thumbnail-image.active) figcaption { color: #E3B341; }
.product-detail-page .thumbnail-image.active { border-color: #2ECC71 !important; box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25); }

/* [CAROUSEL-01] Gabarits de la galerie.
   - Deux colonnes (≥993 px) : largeur de colonne INCHANGÉE (équilibre avec le
     bloc d'achat) ; hauteur plafonnée à la fenêtre moins 222 px (décalage de
     collage de 84 px + miniatures) : un visuel vertical ne dépasse pas l'écran.
   - Une colonne (≤992 px) : galerie bornée à 560 px et centrée, pour qu'un
     visuel vertical ne remplisse pas tout l'écran d'une tablette.
   - Étroit (<600 px) : légendes des miniatures réservées aux lecteurs d'écran
     (6 colonnes de ~52 px), l'état actif reste visible par la bordure. */
@media (min-width: 993px) {
  main.product-detail-page #gallery-main-container { max-height: max(420px, calc(100vh - 222px)); }
  main.product-detail-page #product-thumbnails { justify-content: start; }
}
@media (max-width: 992px) {
  #product-detail-content > .product-gallery { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 599px) {
  main.product-detail-page #product-thumbnails { gap: 8px; }
  .sc-thumb figcaption { position: absolute !important; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* note « visuels techniques » — discrète, ocre doux */
.sc-gallery-note { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.5;
  color: var(--text-color-light, #5a5a5a); display: flex; align-items: flex-start; gap: 7px; }
.sc-gallery-note i, .sc-gallery-note .sc-i { flex: 0 0 auto; margin-top: 2px; color: #B8860B; }
body.dark-mode .sc-gallery-note { color: #c9c9c9; }
body.dark-mode .sc-gallery-note i, body.dark-mode .sc-gallery-note .sc-i { color: #E3B341; }

/* ============================================================================
   3. COLONNE ACHAT
   ========================================================================== */

/* ---- Badges : précommande = vert canonique ; édition limitée = sable/ocre
   SUNCODE (accent d'identité, contraste AA sur les deux thèmes). ---- */
.product-detail-page .badge.badge-preorder { background: #2ECC71; color: #201800; }
.product-detail-page .badge.badge-limited {
  background: #F3EDDE; color: #6E5A1E; border: 1px solid rgba(138, 122, 69, 0.38);
}
body.dark-mode .product-detail-page .badge.badge-limited {
  background: rgba(227, 179, 65, 0.12); color: #E3B341; border-color: rgba(227, 179, 65, 0.32);
}

/* ---- Caractéristiques essentielles : ligne compacte de puces, marqueur solaire. ---- */
.sc-feats { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sc-feats li { position: relative; padding-left: 14px; font-size: 0.82rem; font-weight: 600;
  color: var(--text-color-light, #555); }
.sc-feats li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px;
  border-radius: 999px; background: #E0A93F; }
body.dark-mode .sc-feats li { color: #c2c2c2; }
body.dark-mode .sc-feats li::before { background: #E3B341; }

/* ---- Disponibilité serveur (« Il reste X exemplaires sur N »). ---- */
.sc-availability { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--border-color, #e8e8e8); border-radius: 12px; background: var(--bg-card, #fff); }
body.dark-mode .sc-availability { background: #151515; border-color: rgba(255, 255, 255, 0.10); }
.sc-availability-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.sc-availability-label { font-weight: 600; font-size: .98rem; }
.sc-availability-label strong { color: #1E8449; font-size: 1.25rem; font-weight: 800; }
body.dark-mode .sc-availability-label strong { color: #3DDC84; }
.sc-availability-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1E8449; background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .34); }
body.dark-mode .sc-availability-tag { color: #3DDC84; }
.sc-gauge { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
body.dark-mode .sc-gauge { background: rgba(255, 255, 255, .10); }
.sc-gauge-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2ECC71 0%, #27AE60 55%, #1E8449 100%); transition: width .5s ease; }
.sc-availability-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-color-light, #5A5A5A); }
body.dark-mode .sc-availability-note { color: #c9c9c9; }

/* ---- Aide au choix de la taille (aucune mensuration inventée). ---- */
.sc-size-help { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  font-size: 0.84rem; line-height: 1.55;
  background: rgba(46, 204, 113, 0.09); color: var(--text-color, #2b2b2b);
  border: 1px solid rgba(46, 204, 113, 0.22); }
.sc-size-help i, .sc-size-help .sc-i { color: #1E8449; margin-right: 6px; }
body.dark-mode .sc-size-help { background: rgba(61, 220, 132, 0.10); color: #d8d8d8;
  border-color: rgba(61, 220, 132, 0.22); }
body.dark-mode .sc-size-help i, body.dark-mode .sc-size-help .sc-i { color: #3DDC84; }

/* ---- Bloc d'achat désarmé : une carte, un CTA, une note. Souffle solaire
   très léger en fond (identité SUNCODE), structure verte canonique. ---- */
.sc-buy {
  margin: 18px 0 0; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(46, 204, 113, 0.30);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(224, 169, 63, 0.06), transparent 60%),
    rgba(46, 204, 113, 0.05);
  display: flex; flex-direction: column; gap: 10px;
}
body.dark-mode .sc-buy {
  border-color: rgba(46, 204, 113, 0.30);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(227, 179, 65, 0.07), transparent 60%),
    rgba(46, 204, 113, 0.06);
}
.sc-buy__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-buy__head:empty { display: none; }
.sc-buy__headline { margin: 0; font-size: 1.05rem; font-weight: 700; }
/* masqué visuellement, conservé pour lecteurs d'écran + ancre de section */
.sc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-buy__badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem;
  border-radius: 999px; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #1E8449; background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .34); }
body.dark-mode .sc-buy__badge { color: #3DDC84; }
.sc-buy__actions { margin: 0; }
.sc-buy .add-to-cart-btn { width: 100%; }
.sc-buy__note { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-color, #2b2b2b); font-weight: 600; }
body.dark-mode .sc-buy__note { color: #e0e0e0; }
.sc-buy__prod { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-color-light, #5f5f5f); }
.sc-buy__prod i, .sc-buy__prod .sc-i { color: #1E8449; margin-right: 4px; }
body.dark-mode .sc-buy__prod { color: #b6b6b6; }
body.dark-mode .sc-buy__prod i, body.dark-mode .sc-buy__prod .sc-i { color: #3DDC84; }

/* ---- CTA désarmé : empreinte canonique .add-to-cart-btn, clairement inerte
   mais LISIBLE (contraste conservé, pas de gris fantôme). ---- */
.product-detail-page .add-to-cart-btn.sc-disarmed { background: transparent !important; color: #1E8449 !important; border: 1.5px dashed rgba(46, 204, 113, .55) !important; cursor: not-allowed; box-shadow: none !important; }
body.dark-mode .product-detail-page .add-to-cart-btn.sc-disarmed { color: #3DDC84 !important; }
.product-detail-page .add-to-cart-btn.sc-disarmed:hover { transform: none !important; box-shadow: none !important; filter: none; }
.sc-buy .add-to-cart-btn:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }

/* ---- Réassurance compacte : 4 éléments, une seule fois sur la page. ---- */
.sc-reassure { list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-reassure li { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px;
  border-radius: 11px; border: 1px solid var(--border-color, #e8e8e8); background: var(--bg-card, #fff); }
body.dark-mode .sc-reassure li { background: #151515; border-color: rgba(255, 255, 255, .09); }
.sc-reassure li i, .sc-reassure li .sc-i { flex: 0 0 auto; margin-top: 2px; }
.sc-reassure li span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-reassure li strong { font-size: .8rem; font-weight: 700; line-height: 1.35; }
.sc-reassure li small { font-size: .73rem; line-height: 1.4; color: var(--text-color-light, #6a6a6a); }
body.dark-mode .sc-reassure li small { color: #a9a9a9; }
/* accents PAR FONCTION : livraison=lagon, rétractation=palmier, paiement=vert, email=vert */
.sc-reassure li:nth-child(1) i, .sc-reassure li:nth-child(1) .sc-i { color: #2C837E; }
.sc-reassure li:nth-child(2) i, .sc-reassure li:nth-child(2) .sc-i { color: #4F7E42; }
.sc-reassure li:nth-child(3) i, .sc-reassure li:nth-child(3) .sc-i { color: #1E8449; }
.sc-reassure li:nth-child(4) i, .sc-reassure li:nth-child(4) .sc-i { color: #1F9D57; }
body.dark-mode .sc-reassure li:nth-child(1) i, body.dark-mode .sc-reassure li:nth-child(1) .sc-i { color: #5FC7C0; }
body.dark-mode .sc-reassure li:nth-child(2) i, body.dark-mode .sc-reassure li:nth-child(2) .sc-i { color: #8FCB7C; }
body.dark-mode .sc-reassure li:nth-child(3) i,
body.dark-mode .sc-reassure li:nth-child(3) .sc-i,
body.dark-mode .sc-reassure li:nth-child(4) i, body.dark-mode .sc-reassure li:nth-child(4) .sc-i { color: #3DDC84; }

/* ============================================================================
   4. SECTIONS PLEINE LARGEUR — rythme par séparateurs fins.
   ========================================================================== */
.tu-pd-secondary { border-top: 1px solid rgba(46, 204, 113, 0.14); padding-top: 22px; }
.product-tabs-section { border-top: 1px solid rgba(46, 204, 113, 0.12); padding-top: 26px; }
.sc-block { border-top: 1px solid rgba(56, 166, 160, 0.14); padding-top: 26px; margin-top: 34px; }

.sc-section-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: .6rem; }
.sc-section-title i, .sc-section-title .sc-i { color: #2ECC71; }

/* ---- « Pourquoi cette pièce ? » : 6 cartes éditoriales, 3 colonnes desktop. ---- */
.sc-why { margin-top: 8px; padding: 20px 22px; border: 1px solid var(--border-color, #e8e8e8); border-radius: 14px; background: var(--bg-card, #fff); }
body.dark-mode .sc-why { background: #151515; border-color: rgba(255, 255, 255, .10); }
.sc-why-title { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.sc-why-title i, .sc-why-title .sc-i { color: #2ECC71; }
.sc-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.sc-why-card {
  display: flex; gap: 12px; padding: 15px 16px; border-radius: 14px;
  border: 1px solid var(--border-color, #e8e8e8); background: var(--bg-card, #fff);
}
body.dark-mode .sc-why-card { background: #141414; border-color: rgba(255, 255, 255, 0.09); }
.sc-why-card .sc-why-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.05rem; background: rgba(46, 204, 113, 0.12); color: #1E8449;
}
body.dark-mode .sc-why-card .sc-why-ico { color: #3DDC84; }
.sc-why-card h3 { margin: 0 0 3px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.sc-why-card p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-color-light, #5a5a5a); }
body.dark-mode .sc-why-card p { color: #b6b6b6; }
/* accents par carte : édition=vert, coton=sable, coupe=lagon, RTD=palmier,
   motif=SOLAIRE (identité SUNCODE), production=vert */
.sc-why-card:nth-child(1) .sc-why-ico { background: rgba(46, 204, 113, 0.14); color: #1E8449; }
.sc-why-card:nth-child(2) .sc-why-ico { background: rgba(236, 228, 211, 0.55); color: #8A7A45; }
.sc-why-card:nth-child(3) .sc-why-ico { background: rgba(56, 166, 160, 0.14); color: #2C837E; }
.sc-why-card:nth-child(4) .sc-why-ico { background: rgba(107, 164, 92, 0.16); color: #4F7E42; }
.sc-why-card:nth-child(5) .sc-why-ico { background: rgba(224, 169, 63, 0.16); color: #8A5A1B; }
.sc-why-card:nth-child(6) .sc-why-ico { background: rgba(39, 174, 96, 0.14); color: #1E8E4E; }
body.dark-mode .sc-why-card:nth-child(2) .sc-why-ico { background: rgba(236, 228, 211, 0.12); color: #D8CBA6; }
body.dark-mode .sc-why-card:nth-child(3) .sc-why-ico { color: #5FC7C0; }
body.dark-mode .sc-why-card:nth-child(4) .sc-why-ico { color: #8FCB7C; }
body.dark-mode .sc-why-card:nth-child(5) .sc-why-ico { background: rgba(227, 179, 65, 0.14); color: #E3B341; }
body.dark-mode .sc-why-card:nth-child(6) .sc-why-ico { color: #3DDC84; }

/* ---- Onglets : largeur de lecture contrôlée. ---- */
.product-tabs-section .tabs-header .tab-button.active { color: #1F9D57; }
body.dark-mode .product-tabs-section .tabs-header .tab-button.active { color: #3DDC84; }
.product-tabs-section .tab-content { max-width: 920px; }

.sc-desc-intro { margin: 0 0 16px; font-size: 1rem; line-height: 1.65; }
.sc-desc-body { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.65; color: var(--text-color, #2b2b2b); }
body.dark-mode .sc-desc-body { color: #d8d8d8; }
.sc-desc-inspiration { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--text-color-light, #5f5f5f); }
body.dark-mode .sc-desc-inspiration { color: #b6b6b6; }

/* ---- Détails : grille libellé/valeur 2 colonnes. ---- */
.tu-product-details-list.sc-details-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px;
}
.sc-details-grid li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 10px 2px; border-bottom: 1px solid var(--border-color, #ececec);
}
body.dark-mode .sc-details-grid li { border-color: rgba(255, 255, 255, 0.08); }
.sc-details-grid li strong { color: var(--gray, #7a7a7a); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; }
body.dark-mode .sc-details-grid li strong { color: #9a9a9a; }
.sc-details-grid li span { text-align: right; font-weight: 600; }

/* ---- Entretien. ---- */
.sc-care { margin-top: 18px; padding: 15px 16px; border-radius: 14px;
  border: 1px solid var(--border-color, #e8e8e8); background: var(--bg-card, #fff); }
body.dark-mode .sc-care { background: #141414; border-color: rgba(255, 255, 255, 0.09); }
.sc-care__title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; }
.sc-care__title i, .sc-care__title .sc-i { color: #1E8449; }
body.dark-mode .sc-care__title i, body.dark-mode .sc-care__title .sc-i { color: #3DDC84; }
.sc-care__lead { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.6; color: var(--text-color, #2b2b2b); }
body.dark-mode .sc-care__lead { color: #d8d8d8; }
.sc-care__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-care__list li { display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.86rem; line-height: 1.5; color: var(--text-color-light, #5a5a5a); }
body.dark-mode .sc-care__list li { color: #c9c9c9; }
.sc-care__list i, .sc-care__list .sc-i { flex: 0 0 auto; margin-top: 2px; width: 16px; text-align: center; color: #1E8449; }
body.dark-mode .sc-care__list i, body.dark-mode .sc-care__list .sc-i { color: #3DDC84; }

/* ---- Onglet Précommande : étapes numérotées + délais + note de statut. ---- */
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: sc-step; }
.sc-steps li { position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--border-color, #e8e8e8); border-radius: 12px; background: var(--bg-card, #fff); line-height: 1.55; }
body.dark-mode .sc-steps li { background: #151515; border-color: rgba(255, 255, 255, .10); }
.sc-steps li::before { counter-increment: sc-step; content: counter(sc-step); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: .82rem; color: #1E8449; background: rgba(46, 204, 113, .16); border: 1px solid rgba(46, 204, 113, .4); }
body.dark-mode .sc-steps li::before { color: #3DDC84; }

.sc-pc__delays { margin: 14px 0 0; display: grid; gap: 8px; }
.sc-pc__delay { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 11px; border-radius: 11px; font-size: 0.84rem; line-height: 1.5;
  background: rgba(0, 0, 0, 0.03); border: 1px solid var(--border-color, #e8e8e8); }
body.dark-mode .sc-pc__delay { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.09); }
.sc-pc__delay strong { flex: 0 0 auto; font-weight: 700; color: var(--text-color, #2b2b2b); }
.sc-pc__delay span { color: var(--text-color-light, #5a5a5a); }
body.dark-mode .sc-pc__delay strong { color: #e8e8e8; }
body.dark-mode .sc-pc__delay span { color: #b6b6b6; }
/* La date maximale non confirmée est SIGNALÉE (ocre), jamais noyée ; la date
   confirmée passe en vert (fait acquis). L'état ne repose pas que sur la
   couleur : le libellé dit « au plus tard le … » ou « non confirmée ». */
.sc-pc__delay--pending { background: rgba(184, 134, 11, 0.08); border-color: rgba(184, 134, 11, 0.32); }
body.dark-mode .sc-pc__delay--pending { background: rgba(227, 179, 65, 0.09); border-color: rgba(227, 179, 65, 0.30); }
.sc-pc__delay--set { background: rgba(46, 204, 113, 0.09); border-color: rgba(46, 204, 113, 0.30); }
body.dark-mode .sc-pc__delay--set { background: rgba(61, 220, 132, 0.10); border-color: rgba(61, 220, 132, 0.28); }

/* [03B1D1C §6] Les quatre règles de `.sc-steps-note` ont été retirées avec le
   bloc « Statut actuel » qu'elles habillaient : plus aucun élément ne porte
   cette classe, donc plus aucune bordure ni marge résiduelle. */

/* ============================================================================
   5. FAQ — accordéons natifs fermés par défaut, largeur de lecture contrôlée.
   ========================================================================== */
.sc-faq { display: grid; gap: 10px; max-width: 920px; }
.sc-faq details { border: 1px solid var(--border-color, #e8e8e8); border-radius: 12px; background: var(--bg-card, #fff); padding: 2px 16px; }
body.dark-mode .sc-faq details { background: #151515; border-color: rgba(255, 255, 255, .10); }
.sc-faq summary { cursor: pointer; font-weight: 600; padding: 14px 24px 14px 0; position: relative; list-style: none; }
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: #1F9D57; }
body.dark-mode .sc-faq summary::after { color: #3DDC84; }
.sc-faq details[open] summary::after { content: "\2013"; }
.sc-faq details[open] { border-color: rgba(46, 204, 113, 0.30) !important; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.06); }
.sc-faq details[open] summary { color: #1F9D57; }
body.dark-mode .sc-faq details[open] summary { color: #3DDC84; }
.sc-faq summary:focus-visible { outline: 2px solid #2ECC71; outline-offset: 3px; border-radius: 6px; }

.sc-faq-answer {
  margin: 2px 0 14px; padding: 14px 16px; border-radius: 10px;
  background: rgba(46, 204, 113, 0.045); border: 1px solid rgba(46, 204, 113, 0.12);
}
body.dark-mode .sc-faq-answer { background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.07); }
.sc-faq-answer p { margin: 0 0 10px; line-height: 1.65; color: var(--text-color-light, #555); max-width: 68ch; }
.sc-faq-answer p:last-child { margin-bottom: 0; }
body.dark-mode .sc-faq-answer p { color: #c2c2c2; }
.sc-faq-answer a { color: #1F9D57; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.sc-faq-answer a:hover { color: #2C837E; }
body.dark-mode .sc-faq-answer a { color: #3DDC84; }
body.dark-mode .sc-faq-answer a:hover { color: #5FC7C0; }
.sc-faq-answer .sc-faq-legal {
  padding: 10px 12px; margin-top: 4px; border-left: 3px solid rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.06); border-radius: 0 8px 8px 0; font-size: 0.85rem; color: var(--gray, #777);
}
body.dark-mode .sc-faq-answer .sc-faq-legal { background: rgba(46, 204, 113, 0.07); color: #b3ac9a; }
.sc-faq-answer .sc-faq-legal a { color: #1E8449; }
body.dark-mode .sc-faq-answer .sc-faq-legal a { color: #3DDC84; }

/* ============================================================================
   6. MINI-PANIER CANONIQUE (cart.js) — override VERT scoping body.sc-shop.
   .mini-cart-total-amount est un TEXTE DÉGRADÉ (background-clip:text +
   -webkit-text-fill-color:transparent) : re-pointer le dégradé via
   background-image SEUL et re-déclarer le clip, sinon le total devient
   invisible. [LOT16B-1B — piège mesuré] ---- */
body.sc-shop .mini-cart-header,
body.sc-shop .mini-cart .btn-primary {
  background: linear-gradient(135deg, #2ECC71 0%, #27AE60 45%, #1E8449 100%);
}
body.sc-shop .mini-cart-total-amount {
  background-image: linear-gradient(135deg, #2ECC71 0%, #27AE60 45%, #1E8449 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.sc-shop .mini-cart-header {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0),
    linear-gradient(135deg, #2ECC71 0%, #27AE60 45%, #1E8449 100%);
}
body.sc-shop .mini-cart-footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(46, 204, 113, 0.4) 20%, rgba(39, 174, 96, 0.5) 50%, rgba(30, 132, 73, 0.4) 80%, transparent 100%);
}
body.dark-mode.sc-shop .mini-cart-footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(46, 204, 113, 0.55) 20%, rgba(39, 174, 96, 0.65) 50%, rgba(30, 132, 73, 0.55) 80%, transparent 100%);
}
body.sc-shop .empty-cart-message::before,
body.sc-shop .cart-login-required .cart-login-blur svg {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.14) 0%, rgba(39, 174, 96, 0.10) 100%);
}
body.sc-shop .cart-login-required .cart-login-blur::before {
  background: linear-gradient(90deg, #2ECC71 0%, #27AE60 50%, #1E8449 100%);
}

/* ============================================================================
   7. RESPONSIVE MOBILE (<=768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Ordre canonique de la colonne info : badges > titre > phrase > prix >
     caractéristiques > disponibilité > tailles > achat > réassurance.
     (tu-mobile-polish.css ordonne les enfants du SHOP ; nos blocs SUNCODE
     reçoivent des rangs explicites, même forme de sélecteur, chargé après.) */
  main.product-detail-page .product-info > .product-badges     { order: 0; }
  main.product-detail-page .product-info > #product-name       { order: 1; }
  main.product-detail-page .product-info > .product-description { order: 2; }
  main.product-detail-page .product-info > .product-price      { order: 3; }
  main.product-detail-page .product-info > .sc-feats           { order: 4; }
  main.product-detail-page .product-info > .sc-availability    { order: 5; }
  main.product-detail-page .product-info > #size-options-group { order: 6; }
  main.product-detail-page .product-info > .sc-buy             { order: 7; }
  main.product-detail-page .product-info > .sc-reassure        { order: 8; }

  /* [LOT14A1D2-FIX] Le template canonique transforme .product-actions en barre
     d'achat FIXE en bas d'écran à <=768px. Ce patron sert un bouton ACTIF ;
     pour notre CTA DÉSARMÉ il ne ferait que docker un bouton inerte qui occulte
     le contenu. Neutralisé en DESCENDANT (le sélecteur canonique est descendant :
     un sélecteur enfant ne suffirait pas). Scopé à /precommande uniquement. */
  main.product-detail-page .product-actions {
    position: static !important;
    width: auto !important;
    z-index: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  /* l'espace de ~96px que le template réserve pour la barre fixe (retirée)
     n'est plus nécessaire sur cette page. */
  main#tu-page-root.product-detail-page { padding-bottom: 32px !important; }

  .sc-buy { padding: 14px 14px 12px; }
  .sc-reassure { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .sc-why-grid { grid-template-columns: 1fr; }
  .tu-product-details-list.sc-details-grid { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 1024px) {
  .sc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .sc-care { padding: 12px 13px; }
  .sc-pc__delay { flex-direction: column; gap: 2px; }
  .sc-feats { gap: 5px 12px; }
}

/* ============================================================================
   8. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sc-thumb__btn, .product-detail-page button.zoom-icon { transition: none; }
  .product-detail-page button.gallery-nav-btn { transition: none; }
  .sc-carousel__track { scroll-behavior: auto; }
  .sc-gauge-fill { transition: none; }
}

/* ── [OPENING-02 §4] SVG inline : géométrie commune. La COULEUR n'est jamais
   posée ici — chaque SVG hérite via `stroke="currentColor"` des règles de
   couleur par fonction déjà écrites plus haut, désormais appariées `i, .sc-i`.
   Le header et le pied de page CANONIQUES gardent leurs <i> : les sélecteurs
   visent les deux formes, aucun composant partagé n'est désynchronisé. ── */
.sc-i { flex: 0 0 auto; vertical-align: -0.15em; }
.sc-why-card .sc-why-ico .sc-i { vertical-align: 0; }
.sc-care__list .sc-i { width: 16px; height: 16px; }

/* [03B1D1B §1] Les règles du bandeau « MODE STRIPE TEST » ont été retirées avec
   son markup : fond rayé, bordure, marge basse de 10 px et hauteur comprises.
   Aucun espace résiduel ne subsiste entre le titre et le CTA — le bloc entier a
   disparu de l'arbre, il n'y a donc pas de conteneur vide à neutraliser. */
.sc-test-btn {
  display: block; width: 100%; margin: 10px 0 0; padding: 14px 18px;
  border-radius: 12px; border: 1.5px solid rgba(184,134,11,.55);
  background: #B8860B; color: #fff; font-weight: 800; font-size: .95rem;
  cursor: pointer; transition: background .2s ease, opacity .2s ease;
  min-height: 46px;                      /* cible tactile ≥ 44 px */
}
.sc-test-btn:hover:not([disabled]) { background: #9A6F09; }
.sc-test-btn[disabled] { opacity: .55; cursor: not-allowed; }
.sc-test-btn:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }
body.dark-mode .sc-test-btn { background: #C9950F; color: #1A1203; border-color: rgba(227,179,65,.5); }
body.dark-mode .sc-test-btn:hover:not([disabled]) { background: #E3B341; }
/* ---- [03B1D1E1B §3/§7] Précision de livraison sous le CTA actif.
   ⚠️ `[hidden]` explicite : `display:flex` sur le conteneur d'actions l'emporterait
     sinon sur le `display:none` de l'attribut, et la phrase resterait visible dans
     les états où le bouton ne porte aucun montant.
   ⚠️ Aucune réduction de la taille de police du CTA n'accompagne cet ajout (§7) :
     la précision est une SECONDE ligne, pas un moyen de faire entrer le montant. */
.sc-buy__total-note[hidden] { display: none !important; }
.sc-buy__total-note { margin: 6px 0 0; font-size: .78rem; line-height: 1.5;
  color: var(--text-color-light, #5f5f5f); }
body.dark-mode .sc-buy__total-note { color: #b6b6b6; }

.sc-test-msg { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; min-height: 1.2em; }
.sc-test-msg[data-tone="error"] { color: #B3261E; font-weight: 600; }
body.dark-mode .sc-test-msg[data-tone="error"] { color: #FFB4AB; }
@media (prefers-reduced-motion: reduce) { .sc-test-btn { transition: none; } }

/* ═══════════ [03B1D1D §4] RÉCAPITULATIF AVANT PAIEMENT ═══════════
   Dernière surface qu'Orkyva possède avant la page hébergée par Stripe : elle
   doit être LISIBLE, pas décorative. Grille à deux colonnes qui retombe en une
   seule sous 560 px — un engagement contractuel tronqué ne vaut rien.
   ⚠️ Aucune couleur ne porte à elle seule une information : la mention en attente
   est aussi un TEXTE, pour qui ne distingue pas les teintes. */
.sc-prepay {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .10); background: rgba(0, 0, 0, .022);
}
body.dark-mode .sc-prepay { border-color: rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .035); }
.sc-prepay__title {
  margin: 0 0 10px; font-size: .9rem; font-weight: 800; line-height: 1.35;
  color: var(--text-color, #2b2b2b); display: flex; align-items: center; gap: 6px;
}
body.dark-mode .sc-prepay__title { color: #e8e8e8; }
.sc-prepay__title i, .sc-prepay__title .sc-i { color: #1E8449; }
body.dark-mode .sc-prepay__title i, body.dark-mode .sc-prepay__title .sc-i { color: #3DDC84; }
.sc-prepay__grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.sc-prepay__grid > div {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .055);
}
body.dark-mode .sc-prepay__grid > div { border-bottom-color: rgba(255, 255, 255, .07); }
.sc-prepay__grid dt { flex: 1 1 auto; font-size: .78rem; color: var(--text-color-light, #5f5f5f); }
.sc-prepay__grid dd { margin: 0; font-size: .82rem; font-weight: 700; color: var(--text-color, #2b2b2b); }
body.dark-mode .sc-prepay__grid dt { color: #b6b6b6; }
body.dark-mode .sc-prepay__grid dd { color: #e8e8e8; }
.sc-prepay__refund, .sc-prepay__legal, .sc-prepay__pending {
  margin: 10px 0 0; font-size: .78rem; line-height: 1.55; color: var(--text-color-light, #5a5a5a);
}
body.dark-mode .sc-prepay__refund, body.dark-mode .sc-prepay__legal, body.dark-mode .sc-prepay__pending { color: #b6b6b6; }
.sc-prepay__refund { font-weight: 600; color: var(--text-color, #2b2b2b); }
body.dark-mode .sc-prepay__refund { color: #e8e8e8; }
.sc-prepay__pending {
  padding: 8px 10px; border-radius: 8px;
  background: rgba(184, 134, 11, .08); border: 1px solid rgba(184, 134, 11, .32);
}
body.dark-mode .sc-prepay__pending { background: rgba(227, 179, 65, .09); border-color: rgba(227, 179, 65, .30); }
.sc-prepay a { color: #1E8449; text-decoration: underline; }
body.dark-mode .sc-prepay a { color: #3DDC84; }
/* Remboursement : même traitement que les autres échéances de l'onglet. */
.sc-pc__delay--refund { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .10); }
body.dark-mode .sc-pc__delay--refund { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .10); }
@media (max-width: 560px) {
  .sc-prepay__grid { grid-template-columns: 1fr; gap: 0; }
  .sc-prepay__grid > div { justify-content: space-between; }
}

/* ═══════ [03B1D1D-R2 §5] ACCEPTATION DES CGV AVANT PAIEMENT ═══════
   ⚠️ Cible tactile et zone cliquable portées par le <label> lié : cocher doit
   rester possible au doigt comme au clavier, sans viser un carré de 13 px. */
.sc-prepay__accept {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(30, 132, 73, .06); border: 1px solid rgba(30, 132, 73, .28);
}
body.dark-mode .sc-prepay__accept { background: rgba(61, 220, 132, .07); border-color: rgba(61, 220, 132, .28); }
.sc-prepay__accept input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer;
  accent-color: #1E8449;
}
.sc-prepay__accept label {
  font-size: .8rem; line-height: 1.55; color: var(--text-color, #2b2b2b); cursor: pointer;
}
body.dark-mode .sc-prepay__accept label { color: #e8e8e8; }
.sc-prepay__accept a { color: #1E8449; text-decoration: underline; }
body.dark-mode .sc-prepay__accept a { color: #3DDC84; }
.sc-prepay__accept input[type="checkbox"]:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   [03B1D1E] GUIDE DES TAILLES · MODALE · FINITIONS ÉDITORIALES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Le lien du guide est devenu un <button> : on lui rend l'apparence d'un
        lien sans lui retirer sa nature de commande. ---- */
button.size-guide-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: #1E8449; text-decoration: underline; display: inline-flex; align-items: center; gap: 5px;
}
body.dark-mode button.size-guide-link { color: #3DDC84; }
button.size-guide-link:focus-visible { outline: 3px solid #1E8449; outline-offset: 3px; border-radius: 4px; }
body.dark-mode button.size-guide-link:focus-visible { outline-color: #3DDC84; }

/* ---- Contenu du guide (partagé modale + page autonome) ---- */
.sg-suncode { color: var(--text-color, #2b2b2b); }
body.dark-mode .sg-suncode, .sc-sg-standalone-body .sg-suncode { color: #E8EDE9; }
.sg-suncode__title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.sg-suncode__lede { margin: 0 0 16px; font-size: .85rem; line-height: 1.6; color: var(--text-color-light, #5f5f5f); }
body.dark-mode .sg-suncode__lede, .sc-sg-standalone-body .sg-suncode__lede { color: #B9C3BD; }
.sg-suncode__sub { margin: 18px 0 8px; font-size: .92rem; font-weight: 700; }
.sg-suncode__sub:first-of-type { margin-top: 4px; }

/* Gamme vendue : des puces sobres, pas des boutons — on ne sélectionne rien ici. */
.sg-sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sg-size {
  padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .03);
}
body.dark-mode .sg-size, .sc-sg-standalone-body .sg-size {
  border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
}

/* Mensurations indisponibles : dit, pas caché. */
.sg-suncode__pending {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: .82rem; line-height: 1.6;
  background: rgba(184, 134, 11, .09); border: 1px solid rgba(184, 134, 11, .34);
}
body.dark-mode .sg-suncode__pending, .sc-sg-standalone-body .sg-suncode__pending {
  background: rgba(227, 179, 65, .10); border-color: rgba(227, 179, 65, .32);
}
.sg-suncode__pending a { color: #1E8449; }
body.dark-mode .sg-suncode__pending a, .sc-sg-standalone-body .sg-suncode__pending a { color: #3DDC84; }

/* ⚠️ Le défilement horizontal est CONFINÉ au tableau : la page ne défile jamais
   latéralement, y compris à 320 px et à 200 % de zoom. */
.sg-tablewrap { overflow-x: auto; max-width: 100%; margin: 8px 0 0; }
.sg-tablewrap:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }
.sg-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 460px; }
.sg-table caption { text-align: left; padding: 0 0 8px; font-size: .78rem; color: var(--text-color-light, #5f5f5f); }
.sg-table th, .sg-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .08); }
body.dark-mode .sg-table th, body.dark-mode .sg-table td,
.sc-sg-standalone-body .sg-table th, .sc-sg-standalone-body .sg-table td {
  border-bottom-color: rgba(255, 255, 255, .10);
}
.sg-table thead th { font-weight: 700; }
.sg-table tbody th[scope="row"] { font-weight: 800; white-space: nowrap; }

.sg-steps { margin: 8px 0 0; padding-left: 1.15rem; font-size: .84rem; line-height: 1.75; }
.sg-suncode__advice { margin: 16px 0 0; font-size: .84rem; line-height: 1.65; font-weight: 600; }
.sg-suncode__reserve { margin: 8px 0 0; font-size: .78rem; line-height: 1.6; color: var(--text-color-light, #5f5f5f); }
body.dark-mode .sg-suncode__reserve, .sc-sg-standalone-body .sg-suncode__reserve { color: #97A29C; }

/* ---- Modale ---- */
.sc-sg-overlay {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 12, 10, .74);
}
.sc-sg-overlay[hidden] { display: none; }
.sc-sg-panel {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  padding: 22px 20px 20px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}
body.dark-mode .sc-sg-panel { background: #131A17; border-color: rgba(255, 255, 255, .12); }
.sc-sg-close {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--text-color-light, #5f5f5f);
}
body.dark-mode .sc-sg-close { color: #B9C3BD; }
.sc-sg-close:hover { background: rgba(0, 0, 0, .06); }
body.dark-mode .sc-sg-close:hover { background: rgba(255, 255, 255, .08); }
.sc-sg-close:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; }
body.dark-mode .sc-sg-close:focus-visible { outline-color: #3DDC84; }
.sc-sg-standalone { margin: 18px 0 0; font-size: .8rem; }
.sc-sg-standalone a { color: #1E8449; }
body.dark-mode .sc-sg-standalone a { color: #3DDC84; }
body.sc-sg-locked { overflow: hidden; }

/* ---- Page autonome du guide : identité SUNCODE, fond sombre assumé ---- */
.sc-sg-standalone-body {
  margin: 0; padding: 0; min-height: 100vh;
  background: #0E1412; color: #E8EDE9;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.sc-sg-standalone-wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 56px; }
.sc-sg-back {
  display: inline-block; margin: 0 0 22px; font-size: .85rem; font-weight: 600;
  color: #3DDC84; text-decoration: none;
}
.sc-sg-back:hover { text-decoration: underline; }
.sc-sg-back:focus-visible { outline: 3px solid #3DDC84; outline-offset: 3px; border-radius: 4px; }

/* ---- FAQ : titres de catégorie SECONDAIRES par rapport au h2 de section ---- */
.sc-faq-cat {
  margin: 26px 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-color-light, #5f5f5f);
}
.sc-faq-cat:first-child { margin-top: 4px; }
body.dark-mode .sc-faq-cat { color: #97A29C; }

/* ---- Récit : mise en valeur sobre, jamais un appel à l'action ---- */
.sc-desc-key {
  font-size: 1.02em; font-weight: 600; line-height: 1.7;
  padding-left: 14px; border-left: 3px solid rgba(30, 132, 73, .45);
}
body.dark-mode .sc-desc-key { border-left-color: rgba(61, 220, 132, .45); }

@media (max-width: 560px) {
  .sc-sg-panel { max-height: 92vh; padding: 20px 16px 16px; border-radius: 12px; }
  .sg-suncode__title { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-sg-overlay, .sc-sg-panel { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [03B1D1E1 §6] ÉTAT DÉSACTIVÉ DU CTA — LISIBLE, INERTE, JAMAIS APPÉTISSANT
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️⚠️ Le désarmement n'est PAS porté par la couleur seule : l'attribut `disabled`
     empêche l'action, et le LIBELLÉ dit ce qui manque (campagne fermée, taille,
     CGV, épuisement). La couleur ne fait que confirmer.
   ⚠️ La règle `.sc-disarmed` du lot 09C n'est pas touchée : elle traite un AUTRE
     cas (bouton non raccordé, contour tireté). Ici on traite le bouton RACCORDÉ
     mais momentanément bloqué. */
.sc-buy .add-to-cart-btn[disabled]:not(.sc-disarmed),
.product-detail-page .add-to-cart-btn[disabled]:not(.sc-disarmed) {
  background: #46584F !important;      /* gris-vert franchement assombri */
  color: #EDF2EE !important;           /* texte clair : contraste ≈ 7,4:1 */
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed;
  opacity: 1;                          /* pas d'opacité : elle délave le texte */
}
body.dark-mode .sc-buy .add-to-cart-btn[disabled]:not(.sc-disarmed),
body.dark-mode .product-detail-page .add-to-cart-btn[disabled]:not(.sc-disarmed) {
  background: #34423B !important; color: #E4EBE6 !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
/* Aucun appel à l'action au survol : un bouton inerte ne doit ni bouger, ni
   s'éclaircir, ni projeter d'ombre. */
.sc-buy .add-to-cart-btn[disabled]:hover,
.product-detail-page .add-to-cart-btn[disabled]:hover,
.sc-buy .add-to-cart-btn[disabled]:active,
.product-detail-page .add-to-cart-btn[disabled]:active {
  background: #46584F !important; transform: none !important;
  box-shadow: none !important; filter: none !important;
}
body.dark-mode .sc-buy .add-to-cart-btn[disabled]:hover,
body.dark-mode .product-detail-page .add-to-cart-btn[disabled]:hover {
  background: #34423B !important;
}
/* Le libellé peut atteindre deux lignes (« Acceptez les conditions générales de
   vente ») : on l'autorise proprement plutôt que de le laisser déborder. */
.sc-buy .add-to-cart-btn {
  white-space: normal; line-height: 1.35; min-height: 48px;
  padding-top: 12px; padding-bottom: 12px;
}

/* [03B1D1E1 §3] Compteur fermé : une note neutre, sans jauge ni promesse. */
.sc-availability-pending {
  margin: 8px 0 0; font-size: .78rem; line-height: 1.55;
  color: var(--text-color-light, #5f5f5f);
}
body.dark-mode .sc-availability-pending { color: #9aa39d; }