/**
* Charte graphique Seconde Main 224 — jetons partagés par tout le site.
* À charger APRÈS les feuilles de style existantes (bootstrap, style3.css, ...)
* pour affiner sans tout réécrire : mêmes structures, palette et typographie
* cohérentes partout.
*
* Police à charger dans chaque :
*
*
*
*/
:root{
/* Neutres à teinte chaude (assortis à l'accent orange) plutôt que du gris générique */
--ink:#221d1a;
--ink-soft:#6b6058;
--ink-faint:#a89e95;
--paper:#fbf9f6;
--surface:#ffffff;
--line:#ece6df;
/* Accent de marque — inchangé, c'est déjà l'identité du site */
--accent:#ff6b35;
--accent-deep:#e2531c;
--accent-soft:#fff1e8;
/* États sémantiques */
--good:#0f9d58; --good-soft:#e6f9f0;
--bad:#d93025; --bad-soft:#fdeaea;
--warn:#b3760a; --warn-soft:#fff1d6;
--shadow-sm:0 1px 2px rgba(34,29,26,.05);
--shadow-md:0 1px 2px rgba(34,29,26,.04), 0 10px 28px -8px rgba(34,29,26,.14);
--radius:16px;
--radius-sm:10px;
--font-display:'Fraunces','Georgia',serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* Typographie : titres en Fraunces (chaleureux, un peu de caractère), le reste en Inter */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:600;
letter-spacing:-.01em;
text-wrap:balance;
}
/* ── Composants réutilisables ─────────────────────────────────────── */
.btn-theme{
appearance:none;
border:none;
cursor:pointer;
font-family:var(--font-body);
font-weight:600;
font-size:14px;
padding:11px 20px;
border-radius:var(--radius-sm);
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
text-decoration:none;
transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
}
.btn-theme:hover{ text-decoration:none; }
.btn-theme-primary{
background:linear-gradient(135deg,var(--accent),#ff8a5c);
color:#fff;
box-shadow:0 6px 16px -6px rgba(255,107,53,.55);
}
.btn-theme-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(255,107,53,.5); color:#fff; }
.btn-theme-ghost{
background:var(--paper);
color:var(--ink);
border:1px solid var(--line);
}
.btn-theme-ghost:hover{ background:#f3ede7; color:var(--ink); }
.btn-theme-danger{ background:var(--bad-soft); color:var(--bad); }
.btn-theme-danger:hover{ background:#fbdad7; color:var(--bad); }
.btn-theme-dark{
background:linear-gradient(180deg,#2a231f,var(--ink) 70%);
color:#fff;
}
.btn-theme-dark:hover{ transform:translateY(-1px); color:#fff; }
.btn-theme-sm{ padding:8px 14px; font-size:13px; }
.btn-theme-block{ width:100%; }
.card-theme{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
}
.pill-theme{
display:inline-flex; align-items:center; gap:5px;
font-size:11.5px; font-weight:600; letter-spacing:.02em;
padding:4px 11px; border-radius:20px;
}
.pill-good{ background:var(--good-soft); color:var(--good); }
.pill-bad{ background:var(--bad-soft); color:var(--bad); }
.pill-warn{ background:var(--warn-soft); color:var(--warn); }
.pill-accent{ background:var(--accent-soft); color:var(--accent-deep); }