/* Framehit — design system V2 : tokens (copie de design-system/tokens/, sans l'import Google Fonts).
   Palette, dégradés et logo verrouillés : ne pas ajouter de teinte, tout le reste est une opacité.
   Polices servies par le site (licences SIL OFL dans assets/fonts/) : aucune requête vers un tiers. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800 900; font-stretch: 62% 75%; font-display: swap; src: url("../fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-tight-var.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); }

/* ---- tokens/colors.css ---- */
:root{
  /* === VERROUILLE — palette et degrades de la marque, inchanges. === */
  --fh-papier:#F2F2F3;
  --fh-encre:#1D1F20;
  --fh-noir:#0B0D0F;
  --fh-acier-100:#E8EDF2;
  --fh-acier-200:#C9D6E2;
  --fh-acier-300:#A6BACD;
  --fh-acier-400:#85A0B9;
  --fh-acier-500:#5980A6;
  --fh-acier-600:#4C6F92;
  --fh-acier-700:#416180;
  --fh-acier-800:#2D4459;
  --fh-acier-900:#1D2D3D;
  --fh-acier:var(--fh-acier-500);
  --fh-degrade-radial:radial-gradient(circle at 50% 16%, #0B0D0F 0%, #16202B 46%, #5980A6 100%); /* @kind other */
  --fh-degrade-lineaire:linear-gradient(168deg, #0B0D0F 0%, #1D2D3D 54%, #416180 100%); /* @kind other */
  --fh-degrade-halo:radial-gradient(70% 55% at 50% 108%, rgba(89,128,166,.85) 0%, rgba(89,128,166,0) 100%); /* @kind other */

  /* === Opacites derivees (aucune nouvelle teinte) === */
  --blanc-4:rgba(242,242,243,.04);
  --blanc-6:rgba(242,242,243,.06);
  --blanc-8:rgba(242,242,243,.08);
  --blanc-12:rgba(242,242,243,.12);
  --blanc-20:rgba(242,242,243,.20);
  --blanc-40:rgba(242,242,243,.40);
  --blanc-50:rgba(242,242,243,.50);
  --blanc-60:rgba(242,242,243,.60);
  --blanc-70:rgba(242,242,243,.70);
  --bleu-10:rgba(89,128,166,.10);
  --bleu-20:rgba(89,128,166,.20);
  --bleu-30:rgba(89,128,166,.30);
  --bleu-40:rgba(89,128,166,.40);
  --noir-60:rgba(11,13,15,.60);
  --noir-80:rgba(11,13,15,.80);
  --encre-8:rgba(29,31,32,.08);
  --encre-16:rgba(29,31,32,.16);
  --encre-60:rgba(29,31,32,.66);

  /* === Fonds — noir teinte de bleu, 3 niveaux (acier 900 pose en opacite sur noir) === */
  --fond-0:#0B0D0F;
  --fond-1:color-mix(in srgb, #1D2D3D 22%, #0B0D0F);
  --fond-2:color-mix(in srgb, #1D2D3D 42%, #0B0D0F);
  --fond-imprimable:var(--fh-papier);

  /* === Surfaces === */
  --surface-verre:var(--blanc-6);
  --surface-verre-fort:var(--blanc-8);
  --surface-verre-faible:var(--blanc-4);
  --surface-interne:var(--blanc-4);

  /* === Texte === */
  --texte-fort:var(--fh-papier);
  --texte-2:rgba(242,242,243,.66);
  --texte-3:rgba(242,242,243,.50);
  --texte-bleu:var(--fh-acier-300);
  --texte-encre:var(--fh-encre);
  --texte-encre-2:var(--encre-60);

  /* === Bordures === */
  --bord:var(--blanc-8);
  --bord-fort:var(--blanc-20);
  --bord-imprimable:var(--encre-16);
  --bord-lumineux:linear-gradient(168deg, rgba(166,186,205,.9) 0%, rgba(89,128,166,.55) 40%, rgba(89,128,166,.08) 100%); /* @kind other */

  /* === Halos (degrades verrouilles, en calque) === */
  --halo-titre:radial-gradient(50% 50% at 50% 50%, rgba(89,128,166,.45) 0%, rgba(89,128,166,0) 100%); /* @kind other */
}

/* ---- tokens/typography.css ---- */
:root{
  /* Display — Archivo ExtraCondensed Black. Surcharger ces 3 variables suffit a basculer
     sur Anton : --font-display:"Anton"; --display-stretch:normal; --display-weight:400. */
  --font-display:"Archivo", "Anton", Impact, sans-serif;
  --display-stretch:62%; /* @kind font */
  --display-stretch-titre:75%; /* @kind font */
  --display-weight:900; /* @kind font */
  --font-texte:"Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-accent:"Instrument Serif", Georgia, serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Echelle — desktop / mobile, et valeur fluide utilisee par les composants */
  --display-xl-d:168px; --display-xl-m:76px;
  --display-xl:clamp(76px, 11.5vw, 168px); /* @kind font */
  --display-xl-lh:.88; /* @kind font */
  --display-l-d:120px; --display-l-m:60px;
  --display-l:clamp(60px, 8.4vw, 120px); /* @kind font */
  --display-l-lh:.9; /* @kind font */
  --display-m-d:80px; --display-m-m:48px;
  --display-m:clamp(48px, 5.6vw, 80px); /* @kind font */
  --display-m-lh:.92; /* @kind font */
  --display-s-d:56px; --display-s-m:38px;
  --display-s:clamp(38px, 4vw, 56px); /* @kind font */
  --display-s-lh:.96; /* @kind font */
  --display-ls:-.01em; /* @kind font */

  --titre-d:28px; --titre-m:22px;
  --titre:clamp(22px, 2vw, 28px); /* @kind font */
  --titre-lh:1.1; /* @kind font */
  --titre-ls:-.01em; /* @kind font */

  --corps-l-d:20px; --corps-l-m:18px;
  --corps-l:clamp(18px, 1.4vw, 20px); /* @kind font */
  --corps-l-lh:1.5; /* @kind font */
  --corps:16px;
  --corps-lh:1.55; /* @kind font */
  --corps-s:14px;
  --corps-s-lh:1.45; /* @kind font */
  --texte-ls:-.008em; /* @kind font */

  --label:13px;
  --label-ls:.12em; /* @kind font */
  --caption:12px;
  --caption-lh:1.4; /* @kind font */
  --mention:11.5px;
  --mention-ls:.04em; /* @kind font */
}

/* ---- tokens/spacing.css ---- */
:root{
  /* Base 8 px */
  --esp-1:8px;
  --esp-2:16px;
  --esp-3:24px;
  --esp-4:32px;
  --esp-5:40px;
  --esp-6:48px;
  --esp-8:64px;
  --esp-10:80px;
  --esp-12:96px;
  --esp-15:120px;
  --esp-20:160px;
  --esp-demi:4px;
  --section-y:clamp(80px, 11vw, 160px); /* @kind spacing */
  --gouttiere:clamp(20px, 4vw, 48px); /* @kind spacing */
  --conteneur:1200px;
  --conteneur-texte:640px;

  /* Rayons */
  --rayon-pilule:999px;
  --rayon-carte:24px;
  --rayon-carte-s:20px;
  --rayon-interne:12px;
  --rayon-s:8px;
}

/* ---- tokens/effects.css ---- */
:root{
  /* Lueur bleue — reservee au CTA principal et a l'offre mise en avant. */
  --lueur:0 0 24px rgba(89,128,166,.40);
  --lueur-survol:0 0 32px rgba(89,128,166,.55);
  --lueur-carte:0 0 24px rgba(89,128,166,.40), 0 40px 120px -40px rgba(89,128,166,.45);
  --ombre-profonde:0 40px 80px -40px rgba(11,13,15,.9);
  --flou-verre:blur(16px); /* @kind other */
  --flou-leger:blur(8px); /* @kind other */
  --niveaux-gris:grayscale(1) opacity(.5); /* @kind other */
}

/* ---- tokens/motion.css ---- */
:root{
  --ease-sortie:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-douce:cubic-bezier(.45,0,.55,1); /* @kind other */
  --dur-court:180ms; /* @kind other */
  --dur-moyen:320ms; /* @kind other */
  --dur-revele:640ms; /* @kind other */
  --dur-respire:8s; /* @kind other */
  --montee:12px;
}
@keyframes fh-revele{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fh-respire{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes fh-pulse{0%{box-shadow:0 0 0 0 rgba(166,186,205,.55)}70%{box-shadow:0 0 0 8px rgba(166,186,205,0)}100%{box-shadow:0 0 0 0 rgba(166,186,205,0)}}
@keyframes fh-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fh-derive{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---- tokens/base.css ---- */
a{color:var(--fh-acier-300);text-decoration:none}a:hover{color:var(--fh-papier)}
.fh-accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;font-stretch:normal}