/* [LOT-26 2026-10-02] /suncode/ - styles EDITORIAUX portes par la page SEULE, tous circonscrits a .ork-suncode.
   Modele = assets/orkyva-univers.css (LOT-22B/22C, valide en production le 01/10).
   Le header, le mini-panier et le footer GLOBAUX ne sont styles QUE par la pile CSS globale (style.css, header-premium.css...).
   orkyva-home.css (partagee avec la home) et suncode-carousel.css ne sont PAS modifiees ; plus aucune regle sur
   html/body/header/footer/:root ici.
   THEME : le bloc suit le theme GLOBAL avec les MEMES selecteurs que style.css / tu-anti-flash.css (body.dark-mode,
   html.dark, html[data-tu-theme="dark"]) ; aucun JS, aucun second systeme, aucun prefers-color-scheme.
   - CLAIR (defaut) : jetons GLOBAUX --tu-* (bloc peint en --tu-surface, texte --tu-fg / --tu-fg-soft, liens
     --tu-accent-text, filets --tu-line, cartes --tu-surface bordees) ; SEULES les couleurs changent : marges, panneau,
     colonnes et retours a la ligne sont ceux du sombre (contrairement a /univers/ 22C, ou un panneau s'ajoute).
   - SOMBRE : valeurs ACTUELLES de /suncode/ (orkyva-home.css), inchangees.
   POLICES : piles ACTUELLES de /suncode/ telles qu'elles sont RENDUES aujourd'hui (police systeme ; Space Grotesk si
   installee). La pile globale declare un @font-face Poppins / Inter : sans retrait de ces deux noms, le corps passerait
   a la charte DA-01 (choix laisse au proprietaire, comme pour /univers/ en 22B).
   Jetons locaux prefixes --s- ; le carrousel (suncode-carousel.css, inchange) lit --radius/--border/--bg-card/--accent/
   --ink/--ease/--ff-heading : ces 7 noms sont poses sur .sc-gallery et .sc-lightbox SEULEMENT. */
.ork-suncode {
  /* CLAIR (defaut) - jetons globaux */
  --s-ink: var(--tu-fg);
  --s-ink-soft: var(--tu-fg-soft);
  --s-accent: var(--tu-accent-text);
  --s-accent-hover: var(--tu-accent-text-hover);
  --s-border: var(--tu-line);
  --s-border-strong: var(--tu-line-strong);
  --s-card: var(--tu-surface);
  /* titre : degrade des 2 jetons d'accent texte globaux (AA sur surface claire ; decision 22C) */
  --s-grad-title: linear-gradient(100deg, var(--tu-accent-text-hover) 0%, var(--tu-accent-text) 100%);
  /* communs aux deux themes */
  --s-grad-accent: linear-gradient(135deg, #3DDC84 0%, #2ECC71 50%, #FF9F5A 100%);
  --s-radius: 16px;
  --s-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --s-ff-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --s-ff-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  display: block;
  font-family: var(--s-ff-body);
  color: var(--s-ink);
  /* CLAIR : le bloc est peint en surface claire globale, la ou le SOMBRE le peint en degrade sombre. Aucune marge ni
     panneau ajoutes : la mise en page est STRICTEMENT celle du sombre (et de la production) ; la bascule ne deplace rien.
     #1E8449 (--tu-accent-text) n'est AA que sur --tu-surface (4,72:1), pas sur --tu-bg (4,48:1) ni sur le beige (4,11:1). */
  background: var(--tu-surface);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  position: relative;
  isolation: isolate;
  color-scheme: light;
}
/* SOMBRE - valeurs actuelles de /suncode/ (orkyva-home.css :root), inchangees */
html.dark .ork-suncode,
html[data-tu-theme="dark"] .ork-suncode,
body.dark-mode .ork-suncode {
  --s-bg-primary: #0A0A0A;
  --s-bg-tint: #0A0E0C;
  --s-ink: #F1F5F2;
  --s-ink-soft: #CBD4CE;
  --s-accent: #3DDC84;
  --s-accent-hover: #3DDC84;
  --s-border: rgba(255,255,255,0.08);
  --s-border-strong: rgba(255,255,255,0.14);
  --s-card: #10161A;
  --s-halo-primary: rgba(46, 204, 113, 0.26);
  --s-halo-secondary: rgba(230, 126, 34, 0.19);
  --s-halo-amber: rgba(243, 156, 18, 0.13);
  --s-halo-soft: rgba(46, 204, 113, 0.10);
  --s-grad-title: linear-gradient(100deg, #58E091 0%, #44E3B8 42%, #FFB776 100%);
  background:
    radial-gradient(66% 58% at 18% 26%, var(--s-halo-primary), transparent 68%),
    radial-gradient(60% 54% at 82% 72%, var(--s-halo-secondary), transparent 72%),
    radial-gradient(46% 40% at 86% 18%, var(--s-halo-amber), transparent 70%),
    radial-gradient(48% 38% at 50% 96%, var(--s-halo-soft), transparent 72%),
    linear-gradient(180deg, var(--s-bg-tint) 0%, var(--s-bg-primary) 100%);
  color-scheme: dark;
}
.ork-suncode *, .ork-suncode *::before, .ork-suncode *::after { box-sizing: border-box; }
/* texture et halo : SOMBRE seulement (le clair suit le canevas uni des pages globales) */
html.dark .ork-suncode::before,
html[data-tu-theme="dark"] .ork-suncode::before,
body.dark-mode .ork-suncode::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 52%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, #000 52%, transparent 82%);
  opacity: 0.09;
  color: var(--s-ink);
}
html.dark .ork-suncode::after,
html[data-tu-theme="dark"] .ork-suncode::after,
body.dark-mode .ork-suncode::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: min(660px, 58vw);
  height: min(660px, 58vw);
  background: conic-gradient(from 55deg at 50% 50%, var(--s-halo-primary) 0deg, var(--s-halo-secondary) 140deg, transparent 280deg);
  filter: blur(40px);
  opacity: 0.40;
  z-index: -1;
  pointer-events: none;
}
.ork-suncode .shell { max-width: 1160px; margin: 0 auto; position: relative; }
.ork-suncode .frame { position: absolute; inset: clamp(1rem, 2.5vw, 2rem); pointer-events: none; z-index: 0; }
.ork-suncode .frame::before,
.ork-suncode .frame::after,
.ork-suncode .frame > span::before,
.ork-suncode .frame > span::after {
  content: "";
  position: absolute;
  width: clamp(24px, 3vw, 40px);
  height: clamp(24px, 3vw, 40px);
  border: 1px solid var(--s-border-strong);
  opacity: 0.55;
}
.ork-suncode .frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ork-suncode .frame::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ork-suncode .frame > span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ork-suncode .frame > span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ork-suncode .eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--s-ff-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--s-accent); margin: 0 0 0.9rem;
}
.ork-suncode .eyebrow::before,
.ork-suncode .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.ork-suncode .subtitle {
  font-family: var(--s-ff-body); font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--s-ink-soft);
  line-height: 1.7; max-width: 60ch; margin: 0 auto 1.4rem;
}
.ork-suncode .subtitle em { color: var(--s-accent); font-style: italic; font-weight: 500; }
.ork-suncode .suncode-cta {
  display: inline-block; padding: 0.75rem 1.5rem; border-radius: 999px; background: var(--s-grad-accent);
  color: #0A0E0C; font-family: var(--s-ff-heading); font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  transition: transform 0.2s var(--s-ease), box-shadow 0.2s var(--s-ease);
}
.ork-suncode .suncode-cta:hover, .ork-suncode .suncode-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(61,220,132,0.25); }
.ork-suncode .suncode-cta:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; }
.ork-suncode .sc-hero {
  position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(0.75rem, 3vw, 2rem) 1rem;
}
.ork-suncode .sc-h1 {
  font-family: var(--s-ff-heading); font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto 1.1rem;
}
.ork-suncode .sc-h1 .grad {
  background: var(--s-grad-title); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ork-suncode .sc-h1 .grad { color: var(--s-accent) !important; }
}
.ork-suncode .sc-visual { display: block; margin: 1.2rem auto 1.6rem; max-width: 440px; }
.ork-suncode .sc-visual img { display: block; width: 100%; height: auto; border-radius: var(--s-radius); border: 1px solid var(--s-border); }
.ork-suncode .sc-visual--small { max-width: 360px; }
.ork-suncode .sc-section {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  padding: 1.4rem clamp(0.75rem, 3vw, 2rem); border-top: 1px solid var(--s-border);
  font-family: var(--s-ff-body); color: var(--s-ink-soft); line-height: 1.7;
}
.ork-suncode .sc-section h2 {
  font-family: var(--s-ff-heading); color: var(--s-ink); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: 0.01em; margin: 0 0 0.7rem;
}
.ork-suncode .sc-section p { margin: 0 0 0.9rem; }
.ork-suncode .sc-section a { color: var(--s-accent); }
.ork-suncode .sc-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0.4rem 0 1rem; padding: 0; }
.ork-suncode .sc-specs div { padding: 12px 14px; border: 1px solid var(--s-border); border-radius: 12px; background: var(--s-card); }
.ork-suncode .sc-specs dt {
  font-family: var(--s-ff-heading); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--s-accent); margin: 0 0 0.25rem;
}
.ork-suncode .sc-specs dd { margin: 0; color: var(--s-ink); font-size: 0.95rem; }
.ork-suncode .sc-faq details { border: 1px solid var(--s-border); border-radius: 12px; background: var(--s-card); padding: 0.2rem 1rem; margin: 0 0 10px; }
.ork-suncode .sc-faq summary { cursor: pointer; padding: 0.7rem 0; color: var(--s-ink); font-family: var(--s-ff-heading); font-weight: 600; }
.ork-suncode .sc-faq details p { margin: 0 0 0.9rem; }
.ork-suncode .sc-cta-final {
  position: relative; z-index: 1; text-align: center; padding: 1.6rem 1rem 0.6rem;
  border-top: 1px solid var(--s-border); max-width: 720px; margin: 0 auto;
}
.ork-suncode .sc-back { color: var(--s-ink-soft); font-size: 0.92rem; }
/* CARROUSEL (suncode-carousel.css inchange) : ses 7 jetons, poses sur le carrousel SEUL.
   SOMBRE = valeurs actuelles (#10161A, filet blanc 8 %, #3DDC84). CLAIR = jetons globaux pour la scene, les miniatures,
   l'anneau de focus et la miniature active. Les commandes superposees a la photo (fleches, loupe, compteur) gardent
   leur voile sombre et leur picto clair (--ink) dans les DEUX themes : elles se lisent sur la photo, pas sur la page. */
.ork-suncode .sc-gallery,
.ork-suncode .sc-lightbox {
  --radius: var(--s-radius);
  --ease: var(--s-ease);
  --ff-heading: var(--s-ff-heading);
  --ink: #F1F5F2;
  --border: var(--s-border);
  --bg-card: var(--s-card);
  --accent: var(--s-accent);
}
/* Lightbox : le header GLOBAL est collant (header-premium.css : position: sticky ; z-index: 4000) et recouvrirait le haut
   de la vue agrandie (bouton Fermer). Pendant que la vue est OUVERTE seulement, le bloc passe au-dessus du header :
   la vue couvre toute la page, comme aujourd'hui. Fermee : aucun effet (le menu burger reste au-dessus du contenu). */
.ork-suncode:has(.sc-lightbox:not([hidden])) { z-index: 4001; }
/* Pile GLOBALE chargee pour le header/footer : ses regles GENERIQUES atteignent aussi les balises du bloc
   (reset `* { margin:0 }`, `a { text-decoration:none }`, `body.dark-mode a:hover { color:#fff }`, interlignes mobiles
   `h2`/`p` de responsive-premium.css, `*:focus-visible { border-radius:6px }`, et en theme sombre
   `body.dark-mode h1..h6 { color ... !important }`, `p`, `span:not(...)`). On y restitue les valeurs du bloc, par jeton (donc
   dans les deux themes). Chaque !important ne repond qu'a un !important global ou a un selecteur global plus specifique
   ((0,3,2) pour span:not(.cart-badge):not(.product-badge)). */
.ork-suncode .sc-h1, .ork-suncode .sc-section h2 { color: var(--s-ink) !important; }
.ork-suncode .eyebrow { color: var(--s-accent) !important; }
.ork-suncode .sc-section p { color: var(--s-ink-soft); }
.ork-suncode .sc-section h2, .ork-suncode .sc-section p { line-height: inherit; }
.ork-suncode .sc-cta-final p { margin: 1em 0; line-height: inherit; color: inherit; }
.ork-suncode .sc-section a, .ork-suncode .sc-back { text-decoration: underline; }
.ork-suncode .sc-section a:hover { color: var(--s-accent-hover); }
.ork-suncode .sc-back:hover { color: var(--s-ink-soft); }
.ork-suncode .suncode-cta:hover, .ork-suncode .suncode-cta:focus-visible { color: #0A0E0C; }
.ork-suncode .sc-gallery__counter, .ork-suncode .sc-gallery__sr { color: var(--ink); }
.ork-suncode .sc-gallery__counter span, .ork-suncode .frame, .ork-suncode .frame span { color: inherit !important; }
.ork-suncode .sc-gallery__track:focus-visible { border-radius: 0; }
/* carrousel strictement inchange : gestes (tu-mobile-polish.css :where(button, a...) { touch-action: manipulation }) et
   tailles maximales (responsive-premium.css img, svg { max-width: 100% }) restitues a leur valeur actuelle */
.ork-suncode .sc-gallery__nav, .ork-suncode .sc-gallery__zoom, .ork-suncode .sc-gallery__thumb, .ork-suncode .sc-lightbox__close,
.ork-suncode .suncode-cta, .ork-suncode .sc-section a, .ork-suncode .sc-back, .ork-suncode .sc-faq summary { touch-action: auto; }
.ork-suncode .sc-gallery svg, .ork-suncode .sc-gallery__thumb img, .ork-suncode .sc-visual img { max-width: none; }
/* vue agrandie, mobile : tu-mobile-polish.css :where(img):not([width]):not([height]):not(.tu-no-ratio) (0,3,0) */
.ork-suncode .sc-lightbox .sc-lightbox__img { max-width: min(92vw, 900px); }
.ork-suncode .sc-gallery__sr { line-height: inherit; }
/* filets du carrousel : style.css `body.dark-mode * { border-color: var(--border-color) }` (0,1,1) l'emporte sur les
   regles a une classe de suncode-carousel.css ; valeurs du carrousel restituees (miniature active comprise) */
.ork-suncode .sc-gallery__stage, .ork-suncode .sc-gallery__thumb { border-color: var(--border); }
.ork-suncode .sc-gallery__thumb[aria-pressed="true"] { border-color: var(--accent); }
.ork-suncode .sc-gallery__nav, .ork-suncode .sc-gallery__zoom { border-color: rgba(255, 255, 255, 0.18); }
.ork-suncode .sc-lightbox__close { border-color: rgba(255, 255, 255, 0.25); }
@media (max-width: 780px) {
  .ork-suncode { padding: 22px 16px; }
  .ork-suncode .frame { inset: 0.6rem; }
  .ork-suncode .sc-specs { grid-template-columns: 1fr; }
  .ork-suncode .sc-section { padding: 1.2rem 0.2rem; }
}