/* [LOT-22 2026-10-01] /univers/ — styles EDITORIAUX portes par la page SEULE, tous circonscrits a .ork-univers.
   Le header et le footer GLOBAUX ne sont styles QUE par la pile CSS globale (style.css, header-premium.css...).
   orkyva-home.css (home, /suncode/) n'est PAS modifiee. Aucune regle sur html/body/header/footer/:root : zero collision.
   [LOT-22C 2026-10-01] PARITE DE THEME : le bloc editorial 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.
   - CLAIR (defaut) : tokens GLOBAUX --tu-* de style.css (filet de securite des pages statiques) : canevas beige du body,
     contenu sur surface --tu-surface, texte --tu-fg / --tu-fg-soft, liens --tu-accent-text / -hover, filets --tu-line.
   - SOMBRE : valeurs 22B INCHANGEES (palette v2, halos, texture, degrade du titre).
   Jetons locaux prefixes --u- (la 22B masquait --bg-primary / --bg-card, noms aussi definis par style.css). */
.ork-univers {
  /* CLAIR (defaut) — tokens globaux */
  --u-ink: var(--tu-fg);
  --u-ink-soft: var(--tu-fg-soft);
  --u-accent: var(--tu-accent-text);
  --u-accent-hover: var(--tu-accent-text-hover);
  --u-border: var(--tu-line);
  --u-border-strong: var(--tu-line-strong);
  --u-card: var(--tu-surface);
  --u-panel: var(--tu-surface);
  --u-panel-ring: 0 0 0 1px var(--tu-line), var(--shadow-sm);
  --u-panel-radius: var(--radius-lg);
  --u-panel-pad: clamp(12px, 3vw, 32px);
  --u-panel-pad-end: clamp(16px, 3vw, 32px);
  /* titre : degrade des 2 jetons d'accent texte globaux (AA sur surface claire) */
  --u-grad-title: linear-gradient(100deg, var(--tu-accent-text-hover) 0%, var(--tu-accent-text) 100%);
  /* communs aux deux themes */
  --u-grad-accent: linear-gradient(135deg, #3DDC84 0%, #2ECC71 50%, #FF9F5A 100%);
  --u-radius: 16px;
  --u-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --u-ff-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --u-ff-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  display: block;
  font-family: var(--u-ff-body);
  color: var(--u-ink);
  background: transparent;
  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 22B inchangees */
html.dark .ork-univers,
html[data-tu-theme="dark"] .ork-univers,
body.dark-mode .ork-univers {
  --u-bg-primary: #0A0A0A;
  --u-bg-tint: #0A0E0C;
  --u-ink: #F1F5F2;
  --u-ink-soft: #CBD4CE;
  --u-accent: #3DDC84;
  --u-accent-hover: #3DDC84;
  --u-border: rgba(255,255,255,0.08);
  --u-border-strong: rgba(255,255,255,0.14);
  --u-card: #10161A;
  --u-panel: transparent;
  --u-panel-ring: none;
  --u-panel-radius: 0;
  --u-panel-pad: 0;
  --u-panel-pad-end: 0;
  --u-halo-primary: rgba(46, 204, 113, 0.26);
  --u-halo-secondary: rgba(230, 126, 34, 0.19);
  --u-halo-amber: rgba(243, 156, 18, 0.13);
  --u-halo-soft: rgba(46, 204, 113, 0.10);
  --u-grad-title: linear-gradient(100deg, #58E091 0%, #44E3B8 42%, #FFB776 100%);
  background:
    radial-gradient(66% 58% at 18% 26%, var(--u-halo-primary), transparent 68%),
    radial-gradient(60% 54% at 82% 72%, var(--u-halo-secondary), transparent 72%),
    radial-gradient(46% 40% at 86% 18%, var(--u-halo-amber), transparent 70%),
    radial-gradient(48% 38% at 50% 96%, var(--u-halo-soft), transparent 72%),
    linear-gradient(180deg, var(--u-bg-tint) 0%, var(--u-bg-primary) 100%);
  color-scheme: dark;
}
.ork-univers *, .ork-univers *::before, .ork-univers *::after { box-sizing: border-box; }
/* texture et halo : SOMBRE seulement (le clair suit le canevas uni des pages globales) */
html.dark .ork-univers::before,
html[data-tu-theme="dark"] .ork-univers::before,
body.dark-mode .ork-univers::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(--u-ink);
}
html.dark .ork-univers::after,
html[data-tu-theme="dark"] .ork-univers::after,
body.dark-mode .ork-univers::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(--u-halo-primary) 0deg, var(--u-halo-secondary) 140deg, transparent 280deg);
  filter: blur(40px);
  opacity: 0.40;
  z-index: -1;
  pointer-events: none;
}
/* panneau : surface globale en CLAIR (comme les cartes des pages statiques), neutre en SOMBRE */
.ork-univers .shell {
  max-width: 1160px; margin: 0 auto; position: relative;
  background: var(--u-panel); box-shadow: var(--u-panel-ring); border-radius: var(--u-panel-radius);
  padding: 0 var(--u-panel-pad) var(--u-panel-pad-end);
}
.ork-univers .frame { position: absolute; inset: clamp(1rem, 2.5vw, 2rem); pointer-events: none; z-index: 0; }
.ork-univers .frame::before,
.ork-univers .frame::after,
.ork-univers .frame > span::before,
.ork-univers .frame > span::after {
  content: "";
  position: absolute;
  width: clamp(24px, 3vw, 40px);
  height: clamp(24px, 3vw, 40px);
  border: 1px solid var(--u-border-strong);
  opacity: 0.55;
}
.ork-univers .frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ork-univers .frame::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ork-univers .frame > span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ork-univers .frame > span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ork-univers .eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--u-ff-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--u-accent); margin: 0 0 0.9rem;
}
.ork-univers .eyebrow::before,
.ork-univers .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.ork-univers .subtitle {
  font-family: var(--u-ff-body); font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--u-ink-soft);
  line-height: 1.7; max-width: 60ch; margin: 0 auto 1.4rem;
}
.ork-univers .subtitle em { color: var(--u-accent); font-style: italic; font-weight: 500; }
.ork-univers .suncode-cta {
  display: inline-block; padding: 0.75rem 1.5rem; border-radius: 999px; background: var(--u-grad-accent);
  color: #0A0E0C; font-family: var(--u-ff-heading); font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  transition: transform 0.2s var(--u-ease), box-shadow 0.2s var(--u-ease);
}
.ork-univers .suncode-cta:hover, .ork-univers .suncode-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(61,220,132,0.25); }
.ork-univers .suncode-cta:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 3px; }
.ork-univers .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-univers .sc-h1 {
  font-family: var(--u-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-univers .sc-h1 .grad {
  background: var(--u-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-univers .sc-h1 .grad { color: var(--u-accent) !important; }
}
.ork-univers .sc-visual { display: block; margin: 1.2rem auto 1.6rem; max-width: 440px; }
.ork-univers .sc-visual img { display: block; width: 100%; height: auto; border-radius: var(--u-radius); border: 1px solid var(--u-border); }
.ork-univers .sc-visual--small { max-width: 360px; }
.ork-univers .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(--u-border);
  font-family: var(--u-ff-body); color: var(--u-ink-soft); line-height: 1.7;
}
.ork-univers .sc-section h2 {
  font-family: var(--u-ff-heading); color: var(--u-ink); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: 0.01em; margin: 0 0 0.7rem;
}
.ork-univers .sc-section p { margin: 0 0 0.9rem; }
.ork-univers .sc-section a { color: var(--u-accent); }
.ork-univers .sc-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0.4rem 0 1rem; padding: 0; }
.ork-univers .sc-specs div { padding: 12px 14px; border: 1px solid var(--u-border); border-radius: 12px; background: var(--u-card); }
.ork-univers .sc-specs dt {
  font-family: var(--u-ff-heading); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--u-accent); margin: 0 0 0.25rem;
}
.ork-univers .sc-specs dd { margin: 0; color: var(--u-ink); font-size: 0.95rem; }
.ork-univers .sc-cta-final {
  position: relative; z-index: 1; text-align: center; padding: 1.6rem 1rem 0.6rem;
  border-top: 1px solid var(--u-border); max-width: 720px; margin: 0 auto;
}
.ork-univers .sc-back { color: var(--u-ink-soft); font-size: 0.92rem; }
/* Pile GLOBALE chargee pour le header/footer : ses regles GENERIQUES atteignent aussi les balises du bloc editorial
   (reset `* { margin:0 }`, `a { text-decoration:none }`, `body.dark-mode a:hover { color:#fff }`, interlignes mobiles
   `h2`/`p` de responsive-premium.css, 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-univers .sc-h1, .ork-univers .sc-section h2 { color: var(--u-ink) !important; }
.ork-univers .eyebrow { color: var(--u-accent) !important; }
.ork-univers .sc-section p { color: var(--u-ink-soft); }
.ork-univers .sc-section h2, .ork-univers .sc-section p { line-height: inherit; }
.ork-univers .sc-cta-final p { margin: 1em 0; line-height: inherit; color: inherit; }
.ork-univers .sc-section a, .ork-univers .sc-back { text-decoration: underline; }
.ork-univers .sc-section a:hover { color: var(--u-accent-hover); }
.ork-univers .sc-back:hover { color: var(--u-ink-soft); }
.ork-univers .suncode-cta:hover, .ork-univers .suncode-cta:focus-visible { color: #0A0E0C; }
@media (max-width: 780px) {
  .ork-univers { padding: 22px 16px; }
  .ork-univers .frame { inset: 0.6rem; }
  .ork-univers .sc-specs { grid-template-columns: 1fr; }
  .ork-univers .sc-section { padding: 1.2rem 0.2rem; }
}