/* ===========================================================================
   Cogenix Kids — système de design
   Un seul fichier de vérité pour les couleurs, les rayons, les ombres,
   la typographie et le mouvement. Tout le reste s'y réfère.
   =========================================================================== */

:root {
  /* --- Couleurs de marque -------------------------------------------------
     Chaudes et lumineuses, mais jamais criardes : l'écran d'un enfant de
     4 ans doit rester reposant pendant vingt minutes. */
  --sun:        #FF8A3D;
  --sun-soft:   #FFB877;
  --sky:        #38A9F0;
  --sky-soft:   #8ED2F8;
  --mint:       #2FC79A;
  --berry:      #F06AA8;
  --violet:     #8B6DF6;
  --sunshine:   #FFC53D;

  /* --- Surfaces ----------------------------------------------------------- */
  --bg:          #FFFBF5;
  --bg-tint:     #FFF3E6;
  --surface:     #FFFFFF;
  --surface-2:   #FFF7EE;
  --border:      #F0E2D2;
  --border-soft: #F7ECE1;

  /* --- Texte -------------------------------------------------------------- */
  --ink:      #241C3B;
  --ink-soft: #5B5273;
  --ink-mute: #8B839F;
  --on-color: #FFFFFF;

  /* --- Formes ------------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* --- Ombres : douces, jamais dures -------------------------------------- */
  --sh-sm: 0 2px 8px rgba(36, 28, 59, .06);
  --sh-md: 0 8px 24px rgba(36, 28, 59, .08);
  --sh-lg: 0 18px 48px rgba(36, 28, 59, .12);
  --sh-glow: 0 10px 40px rgba(255, 138, 61, .28);

  /* --- Typographie --------------------------------------------------------
     Pile système arrondie : aucune police distante n'est chargée (CSP stricte,
     zéro requête vers un tiers, chargement instantané même en 3G). */
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
          "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, monospace;

  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.4vw, 4.2rem);

  /* --- Rythme ------------------------------------------------------------- */
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --measure: 66ch;
  --wrap: 1140px;

  /* --- Mouvement ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t-med: .34s;
  --t-slow: .7s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #17132A;
    --bg-tint:     #1E1838;
    --surface:     #221C3D;
    --surface-2:   #2A2249;
    --border:      #362D58;
    --border-soft: #2E2650;

    --ink:      #F4F0FF;
    --ink-soft: #C3B9DE;
    --ink-mute: #9187B0;

    --sh-sm: 0 2px 8px rgba(0, 0, 0, .3);
    --sh-md: 0 8px 24px rgba(0, 0, 0, .34);
    --sh-lg: 0 18px 48px rgba(0, 0, 0, .42);
    --sh-glow: 0 10px 40px rgba(255, 138, 61, .22);
  }
}

:root[data-theme="dark"] {
  --bg:          #17132A;
  --bg-tint:     #1E1838;
  --surface:     #221C3D;
  --surface-2:   #2A2249;
  --border:      #362D58;
  --border-soft: #2E2650;

  --ink:      #F4F0FF;
  --ink-soft: #C3B9DE;
  --ink-mute: #9187B0;

  --sh-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --sh-md: 0 8px 24px rgba(0, 0, 0, .34);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, .42);
  --sh-glow: 0 10px 40px rgba(255, 138, 61, .22);
}

/* ===========================================================================
   Reset mesuré
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; height: auto; display: block; }

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

a { color: inherit; }

/* Un anneau de focus visible partout : c'est une exigence, pas une option. */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--sun-soft); color: var(--ink); }

/* Respect strict de la préférence système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilitaires partagés --------------------------------------------------- */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--ink); color: var(--on-color);
  padding: .7rem 1.2rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 1rem; }