/* ═══ DA « Le net-net » — couche d'identité (25/09/2026) ═════════════════════
   Chargée après global.css. Couleurs : uniquement des jetons (variables.css). */

:root { --logo-fond: var(--text); --logo-trait: var(--bg); }

[hidden] { display: none !important; }

body { font-family: var(--font); background: var(--bg); color: var(--text); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h3, h4 { font-weight: 700; letter-spacing: -0.015em; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }

/* Boutons : pilule, poids franc */
.btn { border-radius: var(--radius-full); font-weight: 600; }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn-ghost { color: var(--text); border-color: var(--text); }
.btn-ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-outline-sm { border-radius: var(--radius-full); }

/* Surligneur et surtitre */
mark, .surligne {
    background: linear-gradient(transparent 12%, var(--fluo) 12%, var(--fluo) 88%, transparent 88%);
    color: var(--fluo-text);
    padding: 0 .08em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.surtitre {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font: 600 12px/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted);
}
.surtitre::before { content: ""; width: 22px; height: 2px; background: var(--primary); flex: none; }

/* En-tête */
.site-header { top: env(safe-area-inset-top, 0px); border-bottom-color: var(--border); }
.site-header .container { height: 68px; gap: 20px; }
.site-logo { color: var(--text); }
.site-logo-icon { width: 34px; height: 34px; }
.site-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); }
.site-logo-text strong { color: var(--primary-text); font-weight: 800; }
.site-nav { margin-left: auto; gap: 22px; }
.site-nav a:not(.btn) { color: var(--text-secondary); font-size: .95rem; }
.site-nav a:not(.btn):hover { color: var(--text); }
.site-header-tools { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.theme-toggle:hover { border-color: var(--text-muted); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-soleil { display: none; }
:root[data-theme="dark"] .theme-lune { display: none; }
:root[data-theme="dark"] .theme-soleil { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-lune { display: none; }
    :root:not([data-theme="light"]) .theme-soleil { display: block; }
}

/* Pied de page : toujours sombre, couleurs fixes lisibles */
.site-footer { background: var(--footer-bg); color: #AEBAB3; --logo-fond: #F2F4F1; --logo-trait: #0D1310; }
.site-footer .site-logo-text, .footer-col h4 { color: #FFFFFF; }
.site-footer .site-logo-text strong { color: #FFE14D; }
.footer-brand p, .footer-col a, .footer-bottom { color: #AEBAB3; }
.footer-col a:hover { color: #FFFFFF; }
.footer-bottom a { color: #9DD3BA; }
.footer-col h4 { font-family: var(--font); letter-spacing: .12em; }

/* Cartes et champs suivent les jetons en sombre */
input, select, textarea { color: var(--text); }

/* Pages légales */
.legal-section { padding: 56px 0 24px; }
.legal-section h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 24px; }
.legal-section h2 { font-size: 1.3rem; margin: 28px 0 10px; }
.legal-section p, .legal-section li { color: var(--text-secondary); max-width: 68ch; }

@media (max-width: 768px) {
    .site-header .container { height: 60px; }
    .site-nav { top: calc(60px + env(safe-area-inset-top, 0px)); margin-left: 0; }
    .site-logo-text { font-size: .98rem; }
    .site-header-tools { margin-left: auto; }
}
@media (max-width: 380px) {
    .site-logo-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }