/* carneva.fr : système de design commun, identité Basalte (accueil, Mes Aides DOM, Métier Péi, Tendances).
   Fond clair, blocs basalte, goyave vert et rose, Bricolage Grotesque (titres) + Plus Jakarta Sans (texte).
   Ce fichier ne fait que définir des jetons et des composants préfixés .f- : il ne restyle rien d'existant tout seul. */
:root{
  --f-bg:#FBFAF8;--f-surface:#FFFFFF;--f-sable:#5FD3A0;--f-sable-t:#E3F5EC;
  --f-ink:#1B1A1F;--f-ink-2:#3F3D46;--f-ink-3:#5C5A63;--f-line:#ECEAE6;
  --f-basalte:#1C1B21;--f-mute:#CFCDD6;
  --f-vert:#137A57;--f-vert-v:#5FD3A0;--f-vert-on:#0D2A1F;--f-vert-t:#E3F5EC;
  --f-rose:#B52F5B;--f-rose-v:#FF7AA2;--f-rose-on:#3A0C1C;--f-rose-t:#FDEAF0;
  --f-font-d:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--f-font-b:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-r:26px 18px 24px 18px;--f-r-s:16px;--f-ease:cubic-bezier(.2,.8,.2,1);
  --f-galet:32px 22px 30px 20px;--f-galet-2:22px 32px 20px 30px;
  --f-shadow:0 1px 0 rgba(27,26,31,.04),0 14px 30px -20px rgba(27,26,31,.3);
}
/* Typo et fond partagés pour les pages qui l'adoptent (classe sur <body>) */
body.f{background:var(--f-bg);color:var(--f-ink);font-family:var(--f-font-b)}
body.f h1,body.f h2,body.f h3,.f-d{font-family:var(--f-font-d);font-weight:800;font-stretch:100%;letter-spacing:-.03em}

/* Badge bêta : un seul, petit */
.f-beta{display:inline-block;font:700 .6rem/1 var(--f-font-b);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border:1.5px solid currentColor;border-radius:999px;vertical-align:.15em;margin-left:4px;opacity:.85}

/* Boutons d'action */
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:0;color:#fff;font:700 1.03rem/1.1 var(--f-font-b);text-decoration:none;cursor:pointer;transition:transform .15s var(--f-ease),box-shadow .15s var(--f-ease)}
.f-btn{border-radius:var(--f-galet);font-weight:700}
.f-btn.vert{background:var(--f-vert-v);color:var(--f-vert-on)}.f-btn.rose{background:var(--f-rose-v);color:var(--f-rose-on);border-radius:var(--f-galet-2)}
.f-btn.ghost{background:transparent;color:var(--f-ink);box-shadow:inset 0 0 0 2px var(--f-ink)}
.f-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.f-btn:focus-visible,.f-card:focus-visible,.f-sel select:focus-visible{outline:3px solid var(--f-ink);outline-offset:3px}

/* Cartes et chiffres « Affiche » */
.f-card{display:block;background:var(--f-surface);border:1px solid var(--f-line);border-radius:var(--f-r);padding:22px;box-shadow:var(--f-shadow);color:inherit;text-decoration:none}
a.f-card{transition:transform .15s var(--f-ease)}a.f-card:hover{transform:translateY(-3px)}
.f-num{font-family:var(--f-font-d);font-weight:800;font-size:clamp(2.6rem,9vw,4.2rem);line-height:.9;letter-spacing:-.03em;display:block}
.f-num small{font-size:.38em;letter-spacing:0;margin-left:.15em}
.f-lab{font-size:.95rem;color:var(--f-ink-2);margin-top:6px}
.f-src{font-size:.8rem;color:var(--f-ink-3);margin-top:10px}
.f-src a{color:inherit}
.f-chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--f-sable-t);color:var(--f-ink)}
.f-chip.vert{background:var(--f-vert-t);color:var(--f-vert)}.f-chip.rose{background:var(--f-rose-t);color:var(--f-rose)}

/* Formes géométriques décoratives */
.f-geo{position:absolute;pointer-events:none;z-index:0}
.f-geo.rond{border-radius:50%}
.f-geo.sable{background:var(--f-sable);opacity:.55}.f-geo.vert{background:var(--f-vert-t)}.f-geo.rose{background:var(--f-rose-t)}

/* Listes déroulantes */
.f-sel{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem;color:var(--f-ink-2)}
.f-sel select,.f-sel input{width:100%;max-width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;min-height:50px;padding:0 40px 0 14px;border:1.5px solid var(--f-line);border-radius:var(--f-r-s);background:var(--f-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1612' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;font:400 1rem var(--f-font-b);color:var(--f-ink)}
.f-sel input{background-image:none;padding-right:14px}

/* Message d'encouragement entre deux questions (js/encourage.js) */
.f-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:999;background:var(--f-basalte);color:#fff;font:700 .98rem/1.3 var(--f-font-b);padding:12px 18px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:opacity .25s var(--f-ease),transform .25s var(--f-ease);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.f-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.f-btn,.f-card,.f-toast{transition:none}}