/* ==========================================================================
   OSUN — socle : reset, jetons partagés, typographie
   Les couleurs vivent dans theme-solar.css / theme-night.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: var(--header-height, 5rem);
}

:where(section, article)[id] { scroll-margin-top: 0; }

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:root {
  --header-height: 5rem;
  /* --- couleurs de marque, invariantes entre les deux directions --- */
  --brand:        #FF1164;
  --brand-deep:   #C4004A;
  --sun-1:        #FFC24A;
  --sun-2:        #FF7A29;
  --sun-3:        #FF1164;
  --sun-gradient: linear-gradient(105deg, var(--sun-1) 0%, var(--sun-2) 46%, var(--sun-3) 100%);

  /* --- typographie --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-logo:    'Archivo Narrow', 'Archivo', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* échelle fluide : min 320px → max 1440px */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.48vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.03rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.74rem);
  --step-4:  clamp(2.07rem, 1.53rem + 2.71vw, 3.70rem);
  --step-5:  clamp(2.49rem, 1.62rem + 4.35vw, 5.00rem);
  --step-6:  clamp(2.99rem, 1.60rem + 6.94vw, 6.75rem);

  /* --- rythme --- */
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --section:  clamp(4.5rem, 10vw, 9rem);
  --maxw:     78rem;
  --radius:   18px;
  --radius-lg: 28px;

  /* --- mouvement --- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   .25s;
  --dur:        .5s;
  --dur-slow:   .9s;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

/* --- utilitaires --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.sun-text {
  background: var(--sun-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 100;
  padding: .7rem 1.2rem;
  border-radius: 100px;
  background: var(--brand);
  color: var(--btn-ink);
  font-size: var(--step--1);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}