/* ============================================================================
etik.css — composants du SITE (home, catalogue, pages éditoriales).
Les valeurs vivent dans assets/jetons.css, à charger AVANT ce fichier :
Les plaquettes outil chargent jetons.css + plaquette.css à la place : elles
ont leur propre jeu de composants (hero imprimable, flow, avant/après), et
plusieurs noms de classe se recouvrent — .card, .kicker, .wrap n'ont pas la
même définition des deux côtés. Ne jamais charger etik.css ET plaquette.css
sur une même page.
============================================================================ */
/* ============================================================================
Reset et fondations
============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Le fond est porté par ET : sinon une bande blanche apparaît
quand on tire la page (overscroll). Standard app-shell ancré du repo. */
html { background: var(--sol); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--sol);
color: var(--ink);
font-family: var(--texte);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--teal-deep); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(34px, 5.4vw, 58px); letter-spacing: -.02em; }
h2 { font-size: clamp(23px, 3.6vw, 33px); }
h3 { font-size: 17px; }
/* Tout nombre qui varie — compteur, montant, colonne chiffrée — porte
tabular-nums, sinon le bloc « respire » à chaque incrément (canon). */
.chiffre, table td, .tabular { font-variant-numeric: tabular-nums; }
/* ============================================================================
Mise en page
============================================================================ */
.wrap { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.mesure { max-width: var(--mesure); }
section { padding: 46px 0; }
.grille { display: grid; gap: 16px; margin-top: 26px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
/* ============================================================================
Composants
============================================================================ */
/* ---- Kicker : sur-titre de section ---------------------------------------
⚠️ Il était en #F26A45 sur crème dans les 36 plaquettes, soit ≈ 2,9:1 — le
canon l'interdit explicitement : « sur fond clair, le corail ne porte pas de
texte, à aucune taille ». Il passe en teal-deep sur teal-soft (7,71:1), qui
est déjà le motif retenu par la page charte. */
.kicker{
display:flex; width:fit-content; align-items:center; gap:8px;
font-family:var(--tech); font-size:12px; font-weight:500;
letter-spacing:.1em; text-transform:uppercase;
color:var(--teal-deep); background:var(--teal-soft);
padding:6px 13px; border-radius:999px;
}
/* ---- Hero ---- */
.hero{
background:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 58%, var(--corail) 150%);
color:#fff; border-radius:0 0 28px 28px; overflow:hidden; position:relative;
}
.hero .wrap { position:relative; padding-top:34px; padding-bottom:48px; }
.hero h1 { margin-top:26px; font-weight:700; }
.hero h1 em { font-style:normal; color:var(--corail-soft); }
.hero .lead { font-size:clamp(15px, 2.4vw, 19px); max-width:640px; margin-top:16px; color:rgba(255,255,255,.92); }
/* Sur le hero (fond teal foncé) le corail EST lisible — l'interdiction du canon
ne vaut que sur fond clair. C'est pourquoi .hero .kicker peut l'utiliser. */
.hero .kicker { color:#fff; background:rgba(255,255,255,.16); }
/* ---- Marque ---- */
.marque { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; text-decoration:none; color:inherit; }
.marque img { width:28px; height:28px; border-radius:7px; display:block; }
/* ---- Carte ---- */
.carte{
background:#fff; border:1px solid var(--filet); border-radius:var(--rayon);
padding:22px; box-shadow:0 1px 2px rgba(28,26,22,.04);
transition:transform .18s var(--ease-enter), box-shadow .18s var(--ease-enter);
}
a.carte { text-decoration:none; color:inherit; display:block; }
a.carte:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(28,26,22,.09); }
.carte h3 { margin-top:12px; }
.carte p { font-size:13.5px; color:var(--muted); margin-top:7px; }
/* ---- Pastille ---- */
.pastille{
display:inline-block; font-size:11px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase;
padding:5px 11px; border-radius:999px;
background:var(--corail-soft); color:var(--ink);
}
/* ---- Bouton ---- */
.bouton{
display:inline-flex; align-items:center; gap:9px;
background:var(--teal); color:#fff; text-decoration:none;
font-weight:600; font-size:14px; padding:12px 20px; border-radius:12px;
transition:background .15s var(--ease-enter), transform .15s var(--ease-enter);
}
.bouton:hover { background:var(--teal-deep); transform:translateY(-1px); }
.bouton.secondaire { background:#fff; color:var(--teal-deep); border:1px solid var(--filet); }
/* ---- Libellé de section ---- */
.libelle{
display:flex; align-items:center; gap:10px; margin-bottom:18px;
font-size:11px; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted);
}
.libelle::after { content:""; flex:1; height:1px; background:var(--filet); }
/* ---- Pied ---- */
footer{
border-top:1px solid var(--filet); margin-top:60px;
padding:34px 0; font-size:13.5px; color:var(--muted);
}