/* LA CHARTE DE LA PAGE D ACCUEIL — FICHIER PRODUIT, NE JAMAIS LE MODIFIER A LA MAIN.

   D OU IL VIENT : recopie du vrai fichier de style du theme du site,
   D:/Publii/humans-board/input/themes/HumansBoard/assets/css/main.css,
   celui que la page d accueil utilise reellement.

   POURQUOI : regle 168 du projet. Le style, la charte graphique et les couleurs
   de la page d accueil s appliquent aussi aux offres payantes.

   COMMENT LE METTRE A JOUR : relancer
   node .claude/skills/design-visuel-site/generer-charte-offres.cjs
   Toute modification faite a la main ici serait effacee a la prochaine execution,
   et le controle verif-charte-offres.cjs la signalerait avant (regle 119).

   Les reglages qui changent selon la taille de l ecran sont recopies eux aussi,
   dans le meme ordre : le telephone d abord, les grands ecrans ensuite.

   La police --hb-police est celle du corps des pages du site, recopiee telle
   quelle depuis le meme fichier. */

:root{
  --hb-police:system-ui,-apple-system,'Segoe UI',sans-serif;
}

:root{
  color-scheme:light;
  --blue:#000091; --blue-d:#00006E;
  --blue-lt:#EDF1FB; --blue-md:#D4DDF4; --blue-tx:#00006E;
  --blue-hero:#000091;
  --accent:#FFB400;
  --vg:linear-gradient(135deg,#a78bfa,#7c3aed,#5b21b6);
  --v3:#7c3aed;
  --green:#047857; --glt:#d1fae5; --green-d:#065f46;
  --red:#b91c1c;  --orange:#b45309;
  --tx:#111827; --tx2:#374151; --tx3:#4b5563; --tx4:#4b5563;
  --bd:#e5e7eb;
  --bg:#ffffff;
  --bg3:#f3f4f6;
  --card-bg:#f5f7ff;
  --card-bd:rgba(0,0,145,.08);
  --r:8px; --r2:12px;
  --f-xxs:13px; --f-xs:13px; --f-sm:13px; --f-md:14px;
  --f-base:16px; --f-lg:17px; --f-xl:18px;
  --f-h1:clamp(22px,6vw,28px);
  --f-hero-h1:clamp(22px,3.2vw,26px);
  --f-h2:clamp(18px,4.5vw,22px);
  --f-h3:15px;
  --f-stat:clamp(26px,7vw,32px);
  --lh:1.65; --lh-h:1.15;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:40px; --s8:56px;
  --nav-h:56px; --max:1080px; --px:20px; --py:40px;
  --bd-champ:#6b7280; --max-lecture:70ch; --max-form:480px; --r-pill:999px;
  --sep:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(0,0,145,.20) 15%,rgba(0,0,145,.20) 85%,rgba(255,255,255,.9) 100%);
  --sep-shadow:0 2px 6px rgba(0,0,145,.1),0 1px 0 rgba(255,255,255,.9);
}

@media(min-width:640px){
:root{
  --px:32px;--py:48px;
  --f-h1:clamp(26px,5vw,34px);
  --f-h2:clamp(20px,4vw,24px);
  --f-stat:clamp(28px,5vw,36px);
}
}

@media(min-width:1024px){
:root{
  --px:48px;--py:80px;
  --f-h1:clamp(32px,3.2vw,42px);
  --f-h2:clamp(22px,2.2vw,28px);
  --f-h3:15px;--f-base:17px;--f-lg:18px;--f-xl:19px;
  --f-stat:clamp(30px,2.8vw,38px);
}
}

@media(min-width:1280px){
:root{
  --max:1120px;
}
}

:root{
  --f-xxs:clamp(13px,12.4px + .15vw,14px);
  --f-xs:clamp(13px,12.4px + .15vw,14px);
  --f-sm:clamp(13px,12.2px + .2vw,15px);
  --f-md:clamp(14px,13.2px + .2vw,16px);
  --f-base:clamp(16px,15.4px + .17vw,18px);
  --f-lg:clamp(17px,16.2px + .2vw,19px);
  --f-xl:clamp(18px,17px + .25vw,20px);
  --f-h3:clamp(15px,14.2px + .22vw,17px);
}