/* Jetons du design system Histoires futées (copie de la maquette validée). */
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
/* Histoires Futées — palette officielle (charte COULEURS) */
:root{
  /* Base — HEX / RVB / CMJN / Pantone from the brand sheet */
  --hf-rose:#E987C6;      /* 233 135 198 · 11 58 00 00 · 237 C */
  --hf-violet:#C59CEC;    /* 197 156 236 · 32 44 00 00 · Violet 0631 C */
  --hf-turquoise:#74CBD2; /* 116 203 210 · 55 00 21 00 · 630 C */
  --hf-vert:#BECF71;      /* 190 207 113 · 33 04 67 00 · 7492 C */
  --hf-jaune:#F1C22A;     /* 241 194 42 · 07 24 89 00 · 123 C */
  --hf-gris:#F2F2F2;      /* 242 242 242 · 06 04 05 00 */
  --hf-encre:#012C2D;     /* 1 44 45 · 94 55 60 70 · 547 C */
  --hf-blanc:#FFFFFF;

  /* Derived tints (mixes of the official colours with gris/encre) */
  --hf-rose-pale:color-mix(in oklab,var(--hf-rose) 22%,var(--hf-gris));
  --hf-violet-pale:color-mix(in oklab,var(--hf-violet) 22%,var(--hf-gris));
  --hf-turquoise-pale:color-mix(in oklab,var(--hf-turquoise) 22%,var(--hf-gris));
  --hf-vert-pale:color-mix(in oklab,var(--hf-vert) 22%,var(--hf-gris));
  --hf-jaune-pale:color-mix(in oklab,var(--hf-jaune) 22%,var(--hf-gris));
  --hf-encre-80:color-mix(in oklab,var(--hf-encre) 80%,var(--hf-gris));
  --hf-encre-60:color-mix(in oklab,var(--hf-encre) 64%,var(--hf-gris));
  --hf-encre-20:color-mix(in oklab,var(--hf-encre) 16%,var(--hf-gris));
  --hf-encre-10:color-mix(in oklab,var(--hf-encre) 8%,var(--hf-gris));

  /* Official duo gradients (charte COULEURS-002), left → right */
  --hf-grad-rose-violet:linear-gradient(90deg,var(--hf-rose),var(--hf-violet));
  --hf-grad-turquoise-rose:linear-gradient(90deg,var(--hf-turquoise),var(--hf-rose));
  --hf-grad-vert-turquoise:linear-gradient(90deg,var(--hf-vert),var(--hf-turquoise));
  --hf-grad-jaune-vert:linear-gradient(90deg,var(--hf-jaune),var(--hf-vert));
  --hf-grad-rose-jaune:linear-gradient(90deg,var(--hf-rose),var(--hf-jaune));
  --hf-grad-arc-en-ciel:linear-gradient(90deg,var(--hf-vert),var(--hf-violet) 25%,var(--hf-rose) 50%,var(--hf-turquoise) 75%,var(--hf-jaune));
  /* Logo gradient: line 1 turquoise→jaune, line 2 violet→rose */
  --hf-grad-logo-1:linear-gradient(90deg,var(--hf-turquoise),var(--hf-vert) 50%,var(--hf-jaune));
  --hf-grad-logo-2:linear-gradient(90deg,var(--hf-violet),var(--hf-rose));

  /* "Fonds" — soft corner-glow mesh gradients (IG posts) */
  --hf-fond-soleil:radial-gradient(ellipse 70% 55% at 0% 0%,var(--hf-turquoise),transparent 70%),radial-gradient(ellipse 60% 45% at 100% 0%,var(--hf-rose),transparent 75%),radial-gradient(ellipse 65% 45% at 100% 100%,var(--hf-rose),transparent 75%),var(--hf-jaune);
  --hf-fond-nuage:radial-gradient(ellipse 60% 45% at 0% 0%,var(--hf-violet),transparent 75%),radial-gradient(ellipse 55% 40% at 100% 0%,var(--hf-jaune),transparent 75%),radial-gradient(ellipse 65% 45% at 100% 100%,var(--hf-rose),transparent 75%),var(--hf-gris);
  --hf-fond-prairie:radial-gradient(ellipse 55% 40% at 0% 0%,var(--hf-jaune),transparent 75%),radial-gradient(ellipse 60% 45% at 100% 0%,var(--hf-turquoise),transparent 75%),radial-gradient(ellipse 60% 45% at 100% 100%,var(--hf-turquoise),transparent 75%),var(--hf-vert);
  --hf-fond-bonbon:radial-gradient(ellipse 55% 40% at 0% 0%,var(--hf-jaune),transparent 75%),radial-gradient(ellipse 60% 45% at 100% 0%,var(--hf-violet),transparent 75%),radial-gradient(ellipse 60% 45% at 100% 100%,var(--hf-violet),transparent 75%),var(--hf-rose);
  --hf-fond-lavande:radial-gradient(ellipse 55% 40% at 0% 0%,var(--hf-turquoise),transparent 75%),radial-gradient(ellipse 45% 35% at 100% 100%,var(--hf-rose),transparent 75%),var(--hf-violet);

  /* Semantic aliases */
  --surface-page:var(--hf-gris);
  --surface-card:var(--hf-blanc);
  --surface-sunken:var(--hf-encre-10);
  --surface-inverse:var(--hf-encre);
  --text-body:var(--hf-encre);
  --text-strong:var(--hf-encre);
  --text-muted:var(--hf-encre-60);
  --text-inverse:var(--hf-gris);
  --text-on-color:var(--hf-encre);
  --border-subtle:var(--hf-encre-20);
  --border-strong:var(--hf-encre);
  --focus-ring:var(--hf-violet);
  --accent-primary:var(--hf-encre);
  --accent-highlight:var(--hf-jaune);
  --link:var(--hf-encre);
  --link-hover:color-mix(in oklab,var(--hf-encre) 70%,var(--hf-turquoise));
  --feedback-success:var(--hf-vert);
  --feedback-info:var(--hf-turquoise);
  --feedback-warning:var(--hf-jaune);
  --feedback-danger:var(--hf-rose);
}
:root{
  --font-brand:'Satoshi',ui-rounded,system-ui,sans-serif;
  --font-display:var(--font-brand);
  --font-body:var(--font-brand);
  --weight-regular:400;--weight-bold:700;--weight-black:900;

  --text-display-xl:72px;--text-display-l:56px;--text-display-m:40px;
  --text-title-l:32px;--text-title-m:24px;--text-title-s:20px;
  --text-body-l:18px;--text-body-m:16px;--text-body-s:14px;--text-caption:12px;

  --leading-tight:1.05;--leading-snug:1.2;--leading-body:1.5;
  --tracking-display:-0.02em;--tracking-body:0;--tracking-caps:0.08em;

  /* Semantic */
  --type-display:var(--weight-black) var(--text-display-l)/var(--leading-tight) var(--font-display);
  --type-title:var(--weight-bold) var(--text-title-m)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-body-m)/var(--leading-body) var(--font-body);
  --type-label:var(--weight-bold) var(--text-body-s)/1.2 var(--font-body);
  --type-caption:var(--weight-regular) var(--text-caption)/1.4 var(--font-body);
}
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
  --radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;--radius-pill:999px;
  --control-h-sm:36px;--control-h-md:44px;--control-h-lg:56px;
  --border-w:2px;
  --content-max:1120px;
}
:root{
  --shadow-sm:0 1px 2px rgb(1 44 45 / .08),0 2px 6px rgb(1 44 45 / .06);
  --shadow-md:0 4px 12px rgb(1 44 45 / .08),0 12px 28px rgb(1 44 45 / .08);
  --shadow-lg:0 12px 32px rgb(1 44 45 / .12),0 28px 64px rgb(1 44 45 / .10);
  --shadow-press:0 3px 0 var(--hf-encre);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-soft:cubic-bezier(.25,.8,.25,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --overlay-scrim:rgb(1 44 45 / .45);
  --blur-glass:16px;
}