/* ==========================================================================
IDENTITÉ TYPOGRAPHIQUE — essai lié UNIQUEMENT sur la home.
Pour annuler : retirer le de site/index.html. Rien d’autre à défaire.
Sauvegarde complète : backups/site-avant-typo-20260720/
--------------------------------------------------------------------------
Choix utilisateur : Fredoka + dégradé bleu→violet sur le titre.
Principe : une police JOUEUSE en titre (l’énergie « Duolingo »), une police
NEUTRE en corps (lisible en paragraphe). Nunito ratait les deux rôles à la
fois — arrondie mais molle en titre, et fatigante en corps.
Feather (Duolingo) est propriétaire : Fredoka en partage le caractère
(arrondie, grasse, compacte, hauteur d’x élevée) sans en être une copie.
========================================================================== */
/* Baloo 2 pour les titres (choix utilisateur : le « t » le plus proche de Duolingo).
32 Ko, variable jusqu’à 800. Feather (Duolingo) est propriétaire, non téléchargeable ;
Baloo 2 en est l’alternative libre la plus proche — chunky, ronde, franche. */
@font-face{
font-family:'Baloo2';
font-weight:400 800;
font-display:swap;
src:url('/fonts/baloo2-var.woff2') format('woff2');
}
/* Inter pour le corps — 47 Ko, neutre, « moins passif » que Nunito. */
@font-face{
font-family:'InterBody';
font-weight:400 700;
font-display:swap;
src:url('/fonts/inter-var.woff2') format('woff2');
}
/* Nunito porte les TITRES depuis le 27/07. Deux graisses suffisent : les titres
du produit sont tous en 800 ou 900. Les fichiers étaient déjà dans site/fonts/,
hérités de l'ancienne typographie — on ne charge donc rien de plus. */
@font-face{
font-family:'NunitoTitre';
font-weight:800;
font-display:swap;
src:url('/fonts/nunito-800.woff2') format('woff2');
}
@font-face{
font-family:'NunitoTitre';
font-weight:900;
font-display:swap;
src:url('/fonts/nunito-900.woff2') format('woff2');
}
:root{
/* ⚠️ 27/07/2026 — les titres passent de Baloo 2 à Nunito, après comparaison des
trois combinaisons sur les MÊMES écrans (accueil, question, écran de fin).
Baloo 2 est une police de DISPLAY : à 19 px sur une question de 60 caractères
elle travaille hors de sa zone, les contreformes se ferment et « marquage-
piquetage » se resserre. Nunito est plus large, la question respire, et elle
garde la chaleur qu'Inter seul perdait. Elle était déjà dans site/fonts/. */
--font-title:'NunitoTitre',Nunito,ui-rounded,system-ui,sans-serif;
--font-ui:'InterBody',Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
/* Corps : Inter partout par défaut. */
body{ font-family:var(--font-ui); }
/* Titres : Fredoka, l’énergie du produit. Fredoka plafonne à 700 — inutile de
demander 900 (elle retomberait à 700 sans prévenir). */
main h1,
.hero h1,
.page-hero h1,
main h2,
.sec-t,
main h3{
font-family:var(--font-title);
font-weight:800;
}
/* — Titre du héros : grand, serré, arrondi. La rondeur SUPPORTE le serrage
bien mieux que Nunito (dont les terminaisons épaissies bavaient). — */
.hero h1{
font-size:clamp(40px,6.4vw,74px);
line-height:1.0;
letter-spacing:-.03em;
}
/* — LE DÉGRADÉ bleu → violet sur « en t’amusant ».
Remplace le faisceau doré (retiré). Le fallback (color) garantit un texte
lisible si background-clip:text n’est pas supporté (vieux navigateurs). — */
h1 .beam, h1 em.beam{
font-style:normal;
color:var(--blue-l,#8FB2FF); /* fallback */
background:linear-gradient(96deg,var(--blue-l,#8FB2FF),var(--violet,#8F7FE3));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Titres de section : même famille, un cran sous le héros. */
main h2,.sec-t{
font-size:clamp(27px,3.4vw,42px);
line-height:1.08;
letter-spacing:-.02em;
}
main h3{ letter-spacing:-.01em; }
/* — Micro-typo : les libellés en capitales veulent de l’AIR (l’inverse des titres).
Ils restent en Inter, plus lisible en petit que Fredoka. — */
.eyebrow,.pv-k,.sec-t em,.badge,.hd-lbl,.fam-txt i{
font-family:var(--font-ui);
letter-spacing:.04em;
}
/* Chiffres tabulaires, sinon ils dansent pendant l’animation de compteur. */
[data-stat],[data-count],.qn,.pv b{ font-variant-numeric:tabular-nums; }
/* Boutons/nav en Inter (Fredoka trop joueuse pour de l’action répétée). */
.nav .cta,.hlogin,.hnav a,.btn,.plan-cta,.hsearch-btn{
font-family:var(--font-ui);
letter-spacing:0;
}
/* Le mobile garde un titre GRAND — c’est ce qui empêche l’effet « page tassée ». */
@media(max-width:559px){
.hero h1{ font-size:clamp(38px,11vw,54px); line-height:1.02; letter-spacing:-.022em; }
}
/* ==========================================================================
BANDEAU DE STATS — gros chiffre en dégradé + emoji (demande utilisateur)
Remplace les petites icônes SVG qui faisaient « basique ». Le chiffre devient
le héros de chaque case (Fredoka + dégradé bleu→violet, comme le titre),
l’emoji donne le côté ludique, le label passe dessous.
Contenu honnête, dérivé de CERT_TOTAUX / SITE_STATS (pas les chiffres AMF).
========================================================================== */
.trustbar{
grid-template-columns:1fr 1fr;
gap:6px;
padding:16px 12px;
background:rgba(27,35,66,.55);
border:1px solid var(--line,rgba(255,255,255,.09));
border-radius:26px;
align-items:stretch;
}
@media(min-width:980px){ .trustbar{ grid-template-columns:repeat(4,1fr); gap:4px; } }
.trustbar .tb{
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
text-align:center; gap:5px; padding:20px 14px;
}
/* Fin séparateur vertical entre colonnes, façon carte de stats — discret. */
@media(min-width:980px){
.trustbar .tb + .tb{ border-left:1px solid var(--line,rgba(255,255,255,.08)); }
}
.tb-emoji{ font-size:27px; line-height:1; margin-bottom:1px; }
/* LE chiffre : Fredoka + dégradé, la même signature que le titre du héros.
⚠️ ADOUCI le 27/07/2026. Il montait à 44 px sur un dégradé bleu→violet saturé :
quatre chiffres de cette taille côte à côte criaient plus fort que le titre du
héros juste au-dessus, et la bande passait avant le message. On garde la
signature (Fredoka + dégradé, l'identité ne bouge pas), on baisse le volume :
−32 % de corps, et un dégradé qui part du blanc cassé plutôt que du bleu vif,
donc lisible sans éclat. Le poids visuel revient au libellé, qui porte le sens. */
.tb-num{
font-family:var(--font-title);
font-weight:800;
font-size:clamp(24px,2.6vw,30px);
line-height:1.05;
letter-spacing:-.015em;
/* 27/07 — le dégradé sur les chiffres est retiré : il délavait la fin du
nombre et rendait « 3 148 » moins net que « 3 1 » suivi de deux chiffres
plus clairs. Un chiffre se lit, il ne se décore pas. */
color:var(--white,#F5F6FF);
}
.tb-lbl{
font-family:var(--font-ui);
font-size:13px; line-height:1.38; font-weight:600;
color:var(--muted,#AEB6D9); max-width:24ch;
}
/* Icône 2D du bandeau : le .tb-emoji contient maintenant un