/* Accents de couleur, chargés en dernier : de la couleur, mais au service de la lecture. */
:root {
  --accent: #2f4fd8;
  --accent-soft: #eaeefe;
  --navy: #141b3d;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #8ea2ff; --accent-soft: #1d2448; --navy: #0b0f24; } }
:root[data-theme="dark"] { --accent: #8ea2ff; --accent-soft: #1d2448; --navy: #0b0f24; }

/* Navigation et onglets */
.brand svg path { fill: var(--accent); }
.mainnav a.active { border-bottom-color: var(--accent); color: var(--accent); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #0b0f24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #0b0f24; } }
.learn-nav a.active { background: var(--accent-soft); color: var(--accent); }

/* Titres de section : petit filet coloré */
.section-title h2, .block > h2.ttl, .panel > header h2, .block > .ttl {
  position: relative; padding-left: 12px;
}
.section-title h2::before, .block > h2.ttl::before, .panel > header h2::before, .block > .ttl::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background: var(--t, var(--accent));
}
h3.ttl { color: var(--t, var(--muted)); }

/* Chiffres clés dans leur couleur */
.stat[class*="tone-"] .v { color: var(--t); }
.stat[class*="tone-"] { background: linear-gradient(180deg, color-mix(in srgb, var(--t) 7%, var(--surface)) 0%, var(--surface) 70%); border-color: color-mix(in srgb, var(--t) 22%, var(--border)); }

/* Accueil : fond doucement teinté */
.hero { background:
  radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
  radial-gradient(600px 260px at 100% 100%, color-mix(in srgb, var(--v-red) 7%, transparent), transparent 70%),
  var(--surface); }
.hero h1 { color: var(--ink); }

/* Cartes teintées par leur couleur */
.gcard { background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 9%, var(--surface)) 0%, var(--surface) 60%); }
.gcard .gsig { color: color-mix(in srgb, var(--gc) 80%, var(--ink)); }
.lcard { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 6%, var(--surface)) 0%, var(--surface) 55%); }
.gbanner { background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 10%, var(--surface)) 0%, var(--surface) 55%); }
.award { border-left: 3px solid var(--t); }
.award .al { color: var(--t); }
.kvb { border-top: 3px solid var(--accent); }
.fact { background: color-mix(in srgb, var(--t, var(--accent)) 6%, var(--surface)); }
.banner { background: color-mix(in srgb, var(--t) 7%, var(--surface)); }
.toolbar { border-top: 3px solid var(--accent); }

/* Pied de page */
.footer { background: var(--navy); color: #c9cde0; border-top: 0; padding: 40px 0 28px; margin-top: 40px; }
.footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.footer a:hover { text-decoration-color: #fff; }
.footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.footer p { margin: 0 0 10px; line-height: 1.55; }
.footer ul { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.5fr .9fr; gap: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.footer-brand { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; letter-spacing: -.01em; }
.footer-small { font-size: .8rem; color: #9aa0bd; }
.footer-mail { font-weight: 600; }

.footer-support { display: inline-block; margin: 2px 0 12px; padding: 8px 14px; border-radius: 8px; background: #fff; color: var(--navy) !important; font-weight: 650; text-decoration: none !important; }
.footer-support:hover { background: #e8ebff; }

/* Accueil : présentation du site */
.intro { margin: 18px 0 16px; padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-radius: 0 8px 8px 0; max-width: 600px; }
.intro p { margin: 0 0 6px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.intro p:last-child { margin: 0; }
.intro a { font-weight: 600; }