/* ==========================================================================
   ORION Energy — « Le Rayon » interface system
   One shape carries the interface: the ray of the logo — 15° step, round
   ends, gradient running left to right from blue to green.
   Rules: flat colour blocks, 36px panel radius, NO shadows, NO gradient
   washes on surfaces (the gradient belongs to rays only), sentence-case
   headings, never tracked-out capitals.
   Token values must match docs/reference/index.html — the guidelines win.
   ========================================================================== */

:root {
  --r-inst: #14328C;      /* Institutional Blue — night surfaces, footer */
  --r-blue: #0B47BF;      /* Primary Blue — actions, links */
  --r-tech: #1383F2;      /* Technology Blue — focus, ray stop */
  --r-deep: #0E2A6E;      /* deep night — CEMAC section */
  --r-green: #73D844;     /* Secondary Green — energy surfaces, night CTA */
  --r-green-2: #48D951;   /* Primary Green — "open" status */
  --r-lime: #D3D936;      /* Energy Lime — ray stop only, never text */
  --r-ink: #0E1A2B;
  --r-body: #3D5068;
  --r-mist: #F4F6FA;
  --r-line: #DDE3EB;
  --r-field: #9AA8BA;     /* form borders: 3:1 against white */
  --r-on-energy: #16301A; /* body text on green */
  --r-white: #FFFFFF;
  --r-ray: linear-gradient(90deg, #0B47BF 0%, #1383F2 28%, #D3D936 60%, #73D844 100%);
  --r-ray-v: linear-gradient(180deg, #0B47BF 0%, #1383F2 28%, #D3D936 60%, #73D844 100%);
  --r-display: 'Montserrat', 'Avenir Next', 'Segoe UI', sans-serif;
  --r-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --r-radius: 36px;
  --r-radius-sm: 28px;
  --r-gutter: clamp(20px, 6.7vw, 96px);
  --r-section: clamp(56px, 9vw, 128px);
  --r-max: 1248px;
}

/* ---------- base ---------- */
body { margin: 0; font-family: var(--r-text); color: var(--r-ink); background: var(--r-white); -webkit-font-smoothing: antialiased; }
a { color: var(--r-blue); text-decoration: none; }
a:hover { color: var(--r-inst); }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--r-tech); outline-offset: 3px; }
.r-wrap { max-width: var(--r-max); margin-inline: auto; padding-inline: var(--r-gutter); box-sizing: content-box; }

.r-h1 { font: 800 clamp(3.25rem, 6.4vw, 5.75rem)/0.98 var(--r-display); letter-spacing: -0.033em; color: var(--r-inst); margin: 0; text-wrap: balance; }
.r-h1--page { font-size: clamp(2.5rem, 4.8vw, 4.25rem); line-height: 1.04; }
.r-h2 { font: 800 clamp(1.875rem, 3.2vw, 2.875rem)/1.1 var(--r-display); letter-spacing: -0.03em; color: var(--r-ink); margin: 0; text-wrap: balance; }
.r-h3 { font: 700 1.375rem/1.25 var(--r-display); letter-spacing: -0.014em; color: var(--r-ink); margin: 0; }
.r-triple { font: 700 clamp(1.3rem, 2vw, 1.75rem)/1.3 var(--r-display); letter-spacing: -0.018em; margin: 0; }
.r-lede { font: 400 clamp(1.0625rem, 1.35vw, 1.1875rem)/1.65 var(--r-text); color: var(--r-body); margin: 0; text-wrap: pretty; max-width: 62ch; }
.r-p { font: 400 1rem/1.65 var(--r-text); color: var(--r-body); margin: 0; text-wrap: pretty; max-width: 68ch; }
.r-statement { font: 700 1.375rem/1.4 var(--r-display); letter-spacing: -0.014em; color: var(--r-inst); margin: 0; text-wrap: balance; }

/* ---------- surfaces ---------- */
.r-section { padding-block: var(--r-section); position: relative; }
.r-day { background: var(--r-white); }
.r-mist { background: var(--r-mist); }
.r-night { background: var(--r-inst); }
.r-deep { background: var(--r-deep); }
.r-energy { background: var(--r-green); }
:is(.r-night, .r-deep) :is(.r-h1, .r-h2, .r-h3, .r-statement) { color: var(--r-white); }
:is(.r-night, .r-deep) :is(.r-lede, .r-p) { color: rgba(255, 255, 255, 0.84); }
.r-energy :is(.r-lede, .r-p) { color: var(--r-on-energy); }
.r-clip { overflow: hidden; }

/* ---------- ray mark, kicker, bullets ---------- */
.r-mark { display: block; width: 32px; height: 6px; border-radius: 999px; background: var(--r-ray); flex-shrink: 0; }
.r-kicker { display: flex; align-items: center; gap: 14px; font: 700 1rem/1.3 var(--r-display); color: var(--r-blue); margin: 0; }
:is(.r-night, .r-deep) .r-kicker { color: var(--r-green); }
.r-energy .r-kicker { color: var(--r-inst); }
.r-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 40px; }
.r-bullets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-bullets li { display: flex; gap: 14px; align-items: flex-start; font: 400 1.0625rem/1.55 var(--r-text); color: var(--r-ink); }
.r-bullets li::before { content: ''; width: 18px; height: 5px; border-radius: 999px; background: var(--r-ray); margin-top: 0.65em; flex-shrink: 0; }
.r-night .r-bullets li { color: var(--r-white); }
.r-night .r-bullets li::before { background: var(--r-green); }
.r-energy .r-bullets li::before { background: var(--r-inst); }
.r-checks li::before { content: none; }

/* ---------- buttons: the capsule is the ray ---------- */
.r-btn { font: 700 0.9375rem/1 var(--r-display); min-height: 54px; padding: 0 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; border: 2px solid var(--r-blue); background: var(--r-blue); color: var(--r-white); cursor: pointer; text-align: center; transition: transform 0.15s ease; }
.r-btn:hover { transform: translateY(-2px); color: var(--r-white); }
.r-btn--ghost { background: transparent; color: var(--r-blue); }
.r-btn--ghost:hover { color: var(--r-blue); }
.r-btn--ink { background: var(--r-ink); border-color: var(--r-ink); }
/* context switches so a button can never be invisible on its surface */
:is(.r-night, .r-deep) .r-btn { background: var(--r-green); border-color: var(--r-green); color: var(--r-ink); }
:is(.r-night, .r-deep) .r-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: var(--r-white); }
.r-energy .r-btn { background: var(--r-ink); border-color: var(--r-ink); color: var(--r-white); }
.r-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- bursts (SVG comes from the `burst` shortcode) ---------- */
.r-burst { display: block; position: absolute; pointer-events: none; }
.r-burst--hero { right: 0; top: 0; height: 100%; width: auto; max-width: 62%; }
.r-burst--corner { right: 0; top: 0; width: var(--burst, 210px); height: var(--burst, 210px); }
.r-burst--sunrise { left: 50%; bottom: 0; width: min(1440px, 160%); transform: translateX(-50%); }
@keyframes r-charge { from { opacity: 0.06; } to { opacity: 1; } }
.r-ray-in { animation: r-charge 0.55s ease-out both; } /* rays are visible by default; the animation only adds the intro */

/* ---------- hero ---------- */
.r-hero { position: relative; overflow: hidden; min-height: min(880px, 92vh); display: flex; align-items: center; }
.r-hero__body { position: relative; display: flex; flex-direction: column; gap: 28px; max-width: 600px; padding-block: 72px; }
.r-hero__disc { position: absolute; border-radius: 999px; overflow: hidden; background: var(--r-inst); }
.r-hero__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- panels + corner device ---------- */
.r-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.r-panel { --burst: 210px; position: relative; overflow: hidden; border-radius: var(--r-radius); padding: 44px 40px 40px; display: flex; flex-direction: column; gap: 20px; min-height: 100%; box-sizing: border-box; }
.r-panel.r-day { border: 1px solid var(--r-line); }
/* CORNER DEVICE RULE: the label lives in the safe zone left of the burst.
   It wraps (max two lines) and is limited to 24 characters at the content
   level, so it can never run under the rays. */
.r-panel__label { position: relative; font: 800 1.125rem/1.25 var(--r-display); margin: 0; min-height: calc(var(--burst) * 0.62); max-width: calc(100% - var(--burst) * 0.78); text-wrap: balance; color: var(--r-blue); }
.r-night .r-panel__label, .r-panel.r-night .r-panel__label { color: var(--r-green); }
.r-panel.r-energy .r-panel__label { color: var(--r-inst); }
.r-panel__title { font: 800 1.75rem/1.16 var(--r-display); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.r-panel.r-night .r-panel__title { color: var(--r-white); }
.r-panel__cta { margin-top: auto; padding-top: 16px; }
.r-card { background: var(--r-white); border-radius: var(--r-radius-sm); padding: 40px; }

/* ---------- steps: ONLY for real sequences ---------- */
.r-steps { --n: 4; --gap: 32px; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); counter-reset: r-step; }
.r-steps::before { content: ''; position: absolute; left: 0; top: 9px; height: 8px; border-radius: 999px; background: var(--r-ray); right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) - 26px); }
.r-steps > li { position: relative; display: flex; flex-direction: column; gap: 12px; counter-increment: r-step; }
.r-steps > li::before { content: ''; order: -2; width: 26px; height: 26px; border-radius: 999px; box-sizing: border-box; background: var(--r-white); border: 7px solid var(--node, var(--r-tech)); }
.r-steps > li::after { content: counter(r-step); order: -1; font: 800 2.75rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); margin-top: 10px; }
.r-steps h3 { font: 700 1.25rem/1.25 var(--r-display); margin: 0; }
.r-steps p { font: 400 1rem/1.6 var(--r-text); color: var(--r-body); margin: 0; }
/* node colours walk the gradient; set --node inline or use these helpers */
.r-steps > li:first-child { --node: #0B47BF; }
.r-steps > li:last-child { --node: #73D844; }

/* ---------- editorial rows ---------- */
.r-split { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(40px, 6.7vw, 96px); align-items: start; }
.r-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-rows { border-bottom: 1px solid var(--r-line); }
.r-rows > * { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; padding: 28px 0; border-top: 1px solid var(--r-line); }
.r-night .r-rows, .r-night .r-rows > * { border-color: rgba(255, 255, 255, 0.22); }
.r-list-lined { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--r-line); }
.r-list-lined li { display: flex; align-items: center; gap: 18px; padding: 17px 0; border-top: 1px solid var(--r-line); font: 400 1.125rem/1.4 var(--r-text); }
.r-features { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.r-features > * { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.r-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: center; min-height: 104px; font: 700 1rem/1.25 var(--r-display); color: var(--r-inst); }
.r-trust > * { display: flex; align-items: center; gap: 14px; }

/* ---------- exchange (what each side brings) ---------- */
.r-exchange { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-exchange > :first-child { border-radius: var(--r-radius) 0 0 var(--r-radius); padding: 56px 72px 56px 56px; }
.r-exchange > :nth-child(2) { border-radius: 0 var(--r-radius) var(--r-radius) 0; padding: 56px 56px 56px 72px; }
.r-exchange__join { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; background: var(--r-white); display: grid; place-items: center; }

/* ---------- dial: only where the content has several real values ---------- */
.r-dial { position: relative; width: min(300px, 100%); aspect-ratio: 1; }
.r-dial svg { position: static; width: 100%; height: 100%; }
.r-dial__value { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 800 3.375rem/1 var(--r-display); letter-spacing: -0.04em; color: var(--r-inst); }

/* ---------- network status: readable without colour ---------- */
.r-status { display: inline-flex; align-items: center; gap: 10px; font: 600 0.9375rem/1.2 var(--r-text); }
.r-status::before { content: ''; width: 18px; height: 18px; border-radius: 999px; box-sizing: border-box; background: var(--r-white); border: 3px solid var(--r-blue); }
.r-status--open::before { background: var(--r-green-2); border-color: var(--r-inst); }
.r-status--build::before { background: linear-gradient(90deg, var(--r-tech) 50%, var(--r-white) 50%); border-color: var(--r-tech); }
.r-status--study::before { border: 3px dotted var(--r-body); }

/* ---------- chips, forms ---------- */
.r-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.r-chip { font: 500 0.9375rem/1.2 var(--r-text); color: var(--r-inst); background: var(--r-white); border: 1.5px solid var(--r-inst); border-radius: 999px; padding: 9px 18px; }
.r-choice { font: 600 0.9375rem/1 var(--r-display); min-height: 52px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--r-field); background: var(--r-white); color: var(--r-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.r-choice[aria-pressed='true'], .r-choice.is-active { border-color: var(--r-blue); background: var(--r-blue); color: var(--r-white); font-weight: 700; }
.r-choice[aria-pressed='true']::before, .r-choice.is-active::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--r-green); }
.r-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.r-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.r-field--wide { grid-column: 1 / -1; }
.r-field label, .r-field legend { font: 600 0.875rem/1.3 var(--r-text); color: var(--r-ink); }
.r-field :is(input:not([type='radio']):not([type='checkbox']), select, textarea) { width: 100%; min-height: 54px; box-sizing: border-box; border: 1.5px solid var(--r-field); border-radius: 16px; padding: 0 18px; font: 400 1rem/1.4 var(--r-text); color: var(--r-ink); background: var(--r-white); }
.r-field textarea { padding: 14px 18px; min-height: 120px; resize: vertical; }
.r-field :is(input, select, textarea):focus { border-color: var(--r-tech); }
.r-field [aria-invalid='true'] { border-color: #B42318; }
.r-field__error { font: 500 0.875rem/1.4 var(--r-text); color: #B42318; }
.r-radio { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 1.5px solid var(--r-field); border-radius: 999px; background: var(--r-white); cursor: pointer; font: 400 1rem/1 var(--r-text); }
.r-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--r-blue); }
.r-confirm { position: relative; overflow: hidden; border-radius: var(--r-radius); padding: clamp(40px, 5vw, 72px); min-height: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; justify-content: center; }

/* ---------- FAQ: native details, ray marks the open state ---------- */
.r-faq details { border-top: 1px solid var(--r-line); }
.r-faq details:last-child { border-bottom: 1px solid var(--r-line); }
.r-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 700 1.1875rem/1.35 var(--r-display); }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after { content: ''; width: 26px; height: 6px; border-radius: 999px; background: var(--r-line); flex-shrink: 0; transition: transform 0.2s ease; }
.r-faq details[open] summary::after { background: var(--r-ray); transform: rotate(-15deg); }
.r-faq details > :not(summary) { padding-bottom: 24px; }

/* ---------- chrome ---------- */
.r-util { background: var(--r-mist); min-height: 44px; display: flex; align-items: center; justify-content: space-between; font: 400 0.8125rem/1 var(--r-text); color: var(--r-body); }
.r-util a { color: var(--r-body); }
.r-nav { background: var(--r-white); border-bottom: 1px solid var(--r-line); min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.r-nav__logo img { height: 52px; width: auto; display: block; } /* never below 120px wide (guidelines) */
.r-nav__links { display: flex; align-items: center; gap: 24px; }
.r-nav__links a { font: 600 0.875rem/1 var(--r-display); color: var(--r-ink); padding: 8px 0; border-bottom: 3px solid transparent; }
.r-nav__links a[aria-current='page'] { color: var(--r-blue); font-weight: 700; border-bottom-color: var(--r-green); }
.r-footer { background: var(--r-inst); color: rgba(255, 255, 255, 0.78); border-top: 8px solid transparent; border-image: var(--r-ray) 1; }
.r-footer a { color: rgba(255, 255, 255, 0.78); }
.r-footer a:hover { color: var(--r-white); }
.r-footer h3 { font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-white); margin: 0 0 6px; }
.r-footer__logo { height: 116px; width: auto; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .r-nav__links { display: none; } /* keep the repo's existing mobile-menu behaviour */
  .r-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-panels { grid-template-columns: 1fr; gap: 16px; }
  .r-split, .r-split--even { grid-template-columns: 1fr; }
  .r-burst--hero { max-width: none; height: 46%; top: 0; }
}
@media (max-width: 760px) {
  .r-panel { --burst: 150px; border-radius: var(--r-radius-sm); padding: 28px 24px 24px; }
  .r-panel__label { font-size: 1rem; }
  .r-panel__title { font-size: 1.4375rem; }
  .r-btn { width: 100%; }
  .r-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; font-size: 0.8125rem; padding-block: 24px; }
  .r-rows > * { grid-template-columns: 1fr; gap: 8px; }
  .r-form, .r-bullets--2, .r-features { grid-template-columns: 1fr; }
  .r-exchange { grid-template-columns: 1fr; }
  .r-exchange > :first-child { border-radius: var(--r-radius-sm) var(--r-radius-sm) 0 0; padding: 36px 24px 56px; }
  .r-exchange > :nth-child(2) { border-radius: 0 0 var(--r-radius-sm) var(--r-radius-sm); padding: 56px 24px 36px; }
  /* steps turn vertical: the ray runs down the left edge */
  .r-steps { grid-template-columns: 1fr; gap: 30px; }
  .r-steps::before { left: 9px; top: 6px; bottom: 40px; right: auto; width: 8px; height: auto; background: var(--r-ray-v); }
  .r-steps > li { padding-left: 48px; gap: 6px; }
  .r-steps > li::before { position: absolute; left: 0; top: 2px; }
  .r-steps > li::after { font-size: 1.875rem; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .r-ray-in { animation: none; }
  .r-btn, .r-faq summary::after { transition: none; }
}