/* ORKYVA — SUNCODE /precommande/ : HIÉRARCHIE D'ACHAT [MOBILE-UX-01 2026-10-08]
   Feuille PROPRE à la page de précommande : chargée après style.css, dans la branche déverrouillée SEULEMENT
   (style.css, elle, est partagée avec checkout, succès et guide des tailles — elle n'est pas touchée).
   Ordre de lecture voulu sur mobile : héros (nom, phrase, prix, livraison, total) → carrousel → étape « 1. Choisissez
   votre taille » (consigne / confirmation, aide + guide) → disponibilité → récapitulatif « ce que vous validez » + CGV
   → CTA → 4 repères → contenu détaillé. [MUX02 2026-10-08 : étape de taille explicite]
   ⚠️ L'ordre du DOM EST cet ordre : aucun `order` CSS ne réordonne le bloc d'achat (un lecteur d'écran et la
     tabulation suivent ce que l'on voit). Le récapitulatif reste AU-DESSUS du CTA (art. 34.2 des CGV, 03B1D1D §4) :
     il est seulement resserré, aucun de ses textes n'est retiré ni masqué.
   ⚠️ Couleurs (fond écru #F3EFE7) : #1E8449 pour le gros texte (prix, ≈ 4,1:1 ≥ 3:1) et le fond du CTA actif (texte
     blanc ≈ 4,7:1) ; #186A3B pour les liens en petit texte (≈ 5,8:1). Jamais la couleur seule pour porter un état. */

/* ============================================================================
   1. GRILLE À ZONES — desktop : galerie à gauche, héros + achat à droite ;
      une colonne (≤ 992 px) : héros, galerie, achat.
   ========================================================================== */
main.product-detail-page #product-detail-content.sc-layout {
  grid-template-areas: "gallery hero" "gallery buy";
  grid-template-rows: auto 1fr;
  column-gap: 50px; row-gap: 0;
}
#product-detail-content.sc-layout > .sc-hero { grid-area: hero; min-width: 0; }
#product-detail-content.sc-layout > .product-gallery { grid-area: gallery; min-width: 0; }
#product-detail-content.sc-layout > .product-info { grid-area: buy; min-width: 0; }
@media (max-width: 992px) {
  main.product-detail-page #product-detail-content.sc-layout {
    grid-template-areas: "hero" "gallery" "buy";
    grid-template-rows: auto;
    row-gap: 10px !important; column-gap: 0 !important;
    padding: 4px 0 24px !important;          /* plus de barre d'achat fixe sur cette page : pas de réserve de 140 px */
  }
  main.product-detail-page #product-detail-content.sc-layout > .product-gallery { margin-bottom: 0; }
}

/* ============================================================================
   2. HÉROS — ce que le visiteur doit comprendre en premier.
   ========================================================================== */
.sc-hero { padding: 0 24px; }
.sc-hero .product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.product-detail-page .sc-hero .badge { font-size: .66rem; padding: 3px 10px; line-height: 1.5; }
.product-detail-page .sc-hero .badge:hover { transform: none; box-shadow: none; }
/* états non achetables (paiement non ouvert, édition complète) : neutre, jamais le vert d'ouverture */
.product-detail-page .badge.badge-preorder.sc-badge-state { background: #E6E3DC; color: #34302A; border: 1px solid rgba(52, 48, 42, .22); }
/* thème sombre : la feuille canonique repeint TOUT .badge en gris (!important) — l'état « ouvert » y perdait son vert */
body.dark-mode .product-detail-page .sc-hero .badge.badge-preorder:not(.sc-badge-state) { background: #2ECC71 !important; color: #10200F; border-color: transparent; }
body.dark-mode .product-detail-page .sc-hero .badge.badge-preorder.sc-badge-state { background: rgba(255, 255, 255, .10) !important; color: #EDEDED; border-color: rgba(255, 255, 255, .18); }
main.product-detail-page .sc-hero #product-name {
  margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.015em; color: var(--dark-color, #2C3E50);
}
body.dark-mode main.product-detail-page .sc-hero #product-name { color: #FFFFFF; }
main.product-detail-page .sc-hero .sc-hero__tagline {
  margin: 6px 0 0; font-size: 1rem; line-height: 1.45; color: rgba(44, 62, 80, .88);
}
body.dark-mode main.product-detail-page .sc-hero .sc-hero__tagline { color: #D2D2D2; }
main.product-detail-page .sc-hero .sc-hero__price { margin: 12px 0 0; display: block; }
main.product-detail-page .sc-hero .current-price {
  font-size: 1.85rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: #1E8449;
}
body.dark-mode main.product-detail-page .sc-hero .current-price,
html[data-tu-theme="dark"] main.product-detail-page .sc-hero .current-price { color: #3DDC84; }
main.product-detail-page .sc-hero .sc-price-note {
  margin: 6px 0 0; font-size: .95rem; line-height: 1.45; color: var(--dark-color, #2C3E50);
}
body.dark-mode main.product-detail-page .sc-hero .sc-price-note { color: #E4E4E4; }
.sc-price-note__total { font-weight: 800; white-space: nowrap; }
.sc-price-note__ship { white-space: nowrap; }

/* ============================================================================
   3. GALERIE — inchangée en desktop ; mobile : cadre 4:5 borné par la fenêtre, pastilles au lieu des miniatures.
   ========================================================================== */
@media (max-width: 768px) {
  main.product-detail-page #gallery-main-container { aspect-ratio: 4 / 5; max-height: max(300px, 58vh); }
}
/* Pastilles : les MÊMES boutons (aria-pressed, data-slide, clavier, clic) ; la vignette est masquée
   visuellement mais reste dans l'arbre d'accessibilité — son texte alternatif nomme le bouton.
   Cible tactile 24 × 24 px (WCAG 2.5.8). */
@media (max-width: 599px) {
  main.product-detail-page #product-thumbnails {
    grid-template-columns: repeat(6, 24px); gap: 6px; margin-top: 6px; padding: 0; justify-content: center;
  }
  main.product-detail-page #product-thumbnails .sc-thumb { gap: 0; }
  main.product-detail-page #product-thumbnails .sc-thumb picture {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  main.product-detail-page #product-thumbnails .sc-thumb__btn {
    position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px;
  }
  main.product-detail-page #product-thumbnails .sc-thumb__btn::before {
    content: ""; display: block; width: 8px; height: 8px; border-radius: 999px;
    background: rgba(44, 62, 80, .30); transition: width .2s ease, background-color .2s ease;
  }
  main.product-detail-page #product-thumbnails .sc-thumb__btn[aria-pressed="true"]::before { width: 18px; background: #1E8449; }
  body.dark-mode main.product-detail-page #product-thumbnails .sc-thumb__btn::before { background: rgba(255, 255, 255, .35); }
  body.dark-mode main.product-detail-page #product-thumbnails .sc-thumb__btn[aria-pressed="true"]::before { background: #3DDC84; }
}

/* ============================================================================
   4. BLOC D'ACHAT — disponibilité, taille, récapitulatif, CTA, repères.
   ========================================================================== */
@media (max-width: 768px) {
  /* l'ordre affiché = l'ordre du DOM (les rangs `order` hérités visaient l'ancienne colonne mélangée) */
  main.product-detail-page #product-detail-content.sc-layout .product-info > * { order: 0 !important; }
}
/* Disponibilité (sous la taille) : une ligne + une jauge fine */
#product-detail-content.sc-layout .sc-availability { margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
body.dark-mode #product-detail-content.sc-layout .sc-availability { background: none; border: 0; }
#product-detail-content.sc-layout .sc-availability-head { margin: 0 0 6px; }
#product-detail-content.sc-layout .sc-availability-label { font-size: .9rem; }
#product-detail-content.sc-layout .sc-availability-label strong { font-size: 1.05rem; }
#product-detail-content.sc-layout .sc-gauge { height: 6px; }
#product-detail-content.sc-layout .sc-availability-pending { margin: 4px 0 0; }

/* Taille : titre d'étape + « Obligatoire » sur une ligne ; 7 tailles sur une rangée (2 rangées sous ~320 px de
   colonne) ; consigne / confirmation ; aide « coupe oversize » suivie du guide.
   Les puces reçoivent bordure et fond à TOUTES les largeurs : en desktop, la feuille canonique les laissait
   sans contour (variable de bordure non définie) — elles se lisaient comme du texte, pas comme des boutons. */
#product-detail-content.sc-layout #size-options-group { margin: 0; }
/* [MUX02-A] « 1. Choisissez votre taille » + mention discrète « Obligatoire » à droite (masquée aux lecteurs d'écran :
   le groupe porte aria-required) */
#product-detail-content.sc-layout .sc-size-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px;
}
#product-detail-content.sc-layout .sc-size-title { font-size: .98rem; font-weight: 800; line-height: 1.3; color: var(--dark-color, #2C3E50); }
body.dark-mode #product-detail-content.sc-layout .sc-size-title { color: #FFFFFF; }
#product-detail-content.sc-layout .sc-size-required {
  flex: 0 0 auto; margin-left: auto;   /* très étroit (≈ 320 px) : passe à la ligne en restant À DROITE */
  padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(62, 74, 69, .38);
  font-size: .64rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: #3E4A45;
}
body.dark-mode #product-detail-content.sc-layout .sc-size-required { color: #E3E3E3; border-color: rgba(255, 255, 255, .32); }
/* [MUX02-B] consigne → « ✓ Taille X sélectionnée ». Visible dès le premier rendu (état `todo` posé par le serveur ;
   sans JS, un <noscript> de l'en-tête le masque). Les deux messages sont EMPILÉS dans la même cellule de grille et
   basculent par `visibility` : la boîte garde la hauteur du plus long à toute largeur ⇒ la sélection ne déplace rien
   en dessous. `visibility: hidden` retire aussi le message inactif de l'arbre d'accessibilité. */
#product-detail-content.sc-layout .sc-size-status { display: grid; margin: 8px 0 0; font-size: .84rem; line-height: 1.4; }
#product-detail-content.sc-layout .sc-size-status > span { grid-area: 1 / 1; }
#product-detail-content.sc-layout .sc-size-status[data-state="todo"] .sc-size-status__done,
#product-detail-content.sc-layout .sc-size-status[data-state="selected"] .sc-size-status__todo { visibility: hidden; }
#product-detail-content.sc-layout .sc-size-status__todo { color: #3E4A45; font-weight: 600; }
#product-detail-content.sc-layout .sc-size-status__done { color: #186A3B; font-weight: 700; }
body.dark-mode #product-detail-content.sc-layout .sc-size-status__todo { color: #D8D8D8; }
body.dark-mode #product-detail-content.sc-layout .sc-size-status__done { color: #3DDC84; }
/* thème sombre : la feuille canonique grise TOUT `span` (`body.dark-mode span:not(…)`) et force `#selected-size-display`
   (!important) ⇒ la coche et la taille de la confirmation reprennent la couleur du message */
body.dark-mode #product-detail-content.sc-layout .sc-size-status__done span { color: inherit !important; }
/* [MUX02-A] aide « coupe oversize » (texte inchangé) suivie du guide des tailles, déplacé depuis la ligne du titre */
#product-detail-content.sc-layout .sc-size-foot { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; }
#product-detail-content.sc-layout .sc-size-foot .sc-size-help { display: inline; margin: 0; }
#product-detail-content.sc-layout .sc-size-foot .size-guide-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin: 0 0 0 6px !important;   /* cible ≥ 24 px (WCAG 2.5.8) */
  vertical-align: middle; white-space: nowrap; font-size: .8rem; font-weight: 600;
  color: #186A3B; border-bottom-color: rgba(24, 106, 59, .55);   /* vert clair canonique ≈ 1,9:1 sur l'écru ; #186A3B ≈ 5,8:1 */
}   /* thème sombre : la règle canonique (!important, gris doux lisible sur fond sombre) reste maîtresse */
/* Liens en petit texte du bloc d'achat (récapitulatif, CGV) : #1E8449 ≈ 4,1:1 sur l'écru, sous AA ⇒ #186A3B */
#product-detail-content.sc-layout .sc-prepay a,
#product-detail-content.sc-layout .sc-prepay__accept a { color: #186A3B; }
body.dark-mode #product-detail-content.sc-layout .sc-prepay a,
body.dark-mode #product-detail-content.sc-layout .sc-prepay__accept a { color: #3DDC84; }
main.product-detail-page #product-detail-content.sc-layout #size-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px;
}
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value {
  min-width: 0; min-height: 44px; height: 44px; padding: 0 2px; display: grid; place-items: center;
  border-radius: 12px; font-size: .92rem; font-weight: 700; text-align: center; white-space: nowrap;
  border: 1.5px solid rgba(44, 62, 80, .20); background: #FFFFFF; color: #2C3E50;
}
body.dark-mode main.product-detail-page #product-detail-content.sc-layout #size-options .option-value {
  border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #FFFFFF;
}
/* écrans étroits (360 px : largeur Android courante) : 7 tailles tiennent encore sur une rangée */
@media (max-width: 380px) {
  main.product-detail-page #product-detail-content.sc-layout #size-options { grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 5px; }
}
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value:focus-visible {
  outline: 3px solid #1E8449; outline-offset: 2px;
}
body.dark-mode main.product-detail-page #product-detail-content.sc-layout #size-options .option-value:focus-visible { outline-color: #3DDC84; }
/* [MUX02-D] taille SÉLECTIONNÉE : fond vert (texte blanc ≈ 4,7:1), bordure vert foncé, et des indices NON
   chromatiques — anneau intérieur blanc, graisse 800, pastille « ✓ » — en plus de l'état aria-checked (lu par les
   technologies d'assistance) et du message « ✓ Taille X sélectionnée ». Bat le noir canonique (!important). */
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value { position: relative; }
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value.selected,
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value[aria-checked="true"] {
  z-index: 1; background: #1E8449 !important; border-color: #145A32 !important; color: #FFFFFF !important;
  box-shadow: inset 0 0 0 2px #FFFFFF !important; font-weight: 800;
}
main.product-detail-page #product-detail-content.sc-layout #size-options .option-value[aria-checked="true"]::after {
  content: "\2713"; position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
  background: #145A32; color: #FFFFFF; box-shadow: 0 0 0 1.5px #F3EFE7;
}
body.dark-mode main.product-detail-page #product-detail-content.sc-layout #size-options .option-value[aria-checked="true"]::after { box-shadow: 0 0 0 1.5px #101010; }
#product-detail-content.sc-layout .sc-size-help {
  margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: .8rem; line-height: 1.45; color: var(--text-color-light, #4f4f4f);
}
body.dark-mode #product-detail-content.sc-layout .sc-size-help { background: none; border: 0; color: #C9C9C9; }

/* Carte d'achat : conservée en desktop (resserrée), à plat sur mobile pour rendre la largeur au texte */
#product-detail-content.sc-layout .sc-buy { margin: 16px 0 0; padding: 14px 16px; gap: 10px; }
@media (max-width: 768px) {
  #product-detail-content.sc-layout .sc-buy { margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
  body.dark-mode #product-detail-content.sc-layout .sc-buy { background: none; border: 0; }
}
#product-detail-content.sc-layout .sc-buy__headline { font-size: 1rem; }

/* Récapitulatif « ce que vous validez » : MÊMES lignes et MÊMES textes, mise en page de reçu compacte */
#product-detail-content.sc-layout .sc-prepay { margin: 0; padding: 12px 14px; border-radius: 12px; }
#product-detail-content.sc-layout .sc-prepay__title { margin: 0 0 6px; font-size: .86rem; }
#product-detail-content.sc-layout .sc-prepay__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
#product-detail-content.sc-layout .sc-prepay__grid > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px;
  padding: 2px 0; border-bottom: 1px solid rgba(0, 0, 0, .055);
}
body.dark-mode #product-detail-content.sc-layout .sc-prepay__grid > div { border-bottom-color: rgba(255, 255, 255, .07); }
#product-detail-content.sc-layout .sc-prepay__grid dt { flex: 0 1 auto; font-size: .76rem; line-height: 1.35; }
#product-detail-content.sc-layout .sc-prepay__grid dd { margin-left: auto; font-size: .82rem; line-height: 1.35; text-align: right; }
@media (max-width: 768px) {
  #product-detail-content.sc-layout .sc-prepay { padding: 10px 12px; }
  main.product-detail-page #product-detail-content.sc-layout > .product-info { padding-top: 4px !important; }
}
#product-detail-content.sc-layout .sc-prepay__refund,
#product-detail-content.sc-layout .sc-prepay__legal,
#product-detail-content.sc-layout .sc-prepay__pending { margin: 8px 0 0; line-height: 1.5; }
#product-detail-content.sc-layout .sc-prepay__accept { margin: 10px 0 0; padding: 9px 10px; gap: 9px; }
#product-detail-content.sc-layout .sc-prepay__accept label { line-height: 1.45; }

/* CTA : libellés, états et requête INCHANGÉS (campaign-product.js). Seule la couleur de l'état ACTIF change :
   le vert canonique #2ECC71 portait un texte blanc à ≈ 2:1 (sous WCAG AA) ; #1E8449 ≈ 4,7:1. Les états
   désactivés (style.css, !important) et le bouton non raccordé (.sc-disarmed) ne sont pas touchés. */
#product-detail-content.sc-layout .sc-buy__actions { margin: 0; }
#product-detail-content.sc-layout .sc-buy .add-to-cart-btn:not([disabled]):not(.sc-disarmed) {
  background: #1E8449; color: #FFFFFF; border-color: #1E8449;
}
#product-detail-content.sc-layout .sc-buy .add-to-cart-btn:not([disabled]):not(.sc-disarmed):hover { background: #186A3B; }

/* Repères sous le CTA : 4 lignes courtes + lien vers le contenu détaillé */
.sc-after-cta { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.sc-after-cta li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.4; color: var(--text-color, #2b2b2b); }
.sc-after-cta li .sc-i { flex: 0 0 auto; margin-top: 1px; color: #1E8449; }
body.dark-mode .sc-after-cta li { color: #E0E0E0; }
body.dark-mode .sc-after-cta li .sc-i { color: #3DDC84; }
.sc-after-cta__more { margin: 0; font-size: .8rem; line-height: 1.45; }
.sc-after-cta__more a { color: #186A3B; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.dark-mode .sc-after-cta__more a { color: #3DDC84; }
.sc-after-cta__more a:focus-visible { outline: 3px solid #1E8449; outline-offset: 2px; border-radius: 3px; }
#sc-infos { scroll-margin-top: 90px; }

/* Note de disponibilité déplacée en tête de l'onglet Précommande */
.sc-pc__intro { margin: 0 0 12px; }

/* ============================================================================
   5. MOBILE — en-tête de page : le fil d'Ariane (Accueil › Produits › SUNCODE) cède sa place au héros.
   ========================================================================== */
@media (max-width: 768px) {
  main.product-detail-page #product-breadcrumb { display: none; }
  main#tu-page-root.product-detail-page { padding-top: 4px; }
  .sc-hero { padding: 0 12px; }
  .sc-hero .product-badges { margin-bottom: 8px; }
  .product-detail-page .sc-hero .badge { font-size: .62rem; padding: 3px 9px; }
  .sc-hero .sc-badge-more { display: none; }   /* « à N exemplaires » : dit par la ligne de disponibilité */
  main.product-detail-page .sc-hero #product-name { font-size: 1.85rem; }
  main.product-detail-page .sc-hero .sc-hero__tagline { margin-top: 4px; font-size: .9rem; letter-spacing: -0.005em; }
  main.product-detail-page .sc-hero .sc-hero__price { margin-top: 8px; }
  main.product-detail-page .sc-hero .current-price { font-size: 1.65rem; }
  main.product-detail-page .sc-hero .sc-price-note { margin-top: 4px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  main.product-detail-page #product-thumbnails .sc-thumb__btn::before { transition: none; }
}