/* Palette : bleu = confiance, vert = bonnes pratiques, orange = vigilance, rouge = alertes importantes uniquement */
:root {
  --trust-50:#eff6ff; --trust-100:#dbeafe; --trust-600:#1d4ed8; --trust-700:#1e40af; --trust-900:#14306e;
  --good-50:#ecfdf5; --good-100:#d1fae5; --good-700:#047857; --good-800:#065f46;
  --warn-50:#fff7ed; --warn-100:#ffedd5; --warn-700:#b45309; --warn-800:#92400e;
  --alert-50:#fef2f2; --alert-700:#b91c1c; --alert-800:#991b1b;
  --text:#0f172a; --muted:#334155; --line:#cbd5e1; --bg:#f8fafc;
}
*,*::before,*::after { box-sizing:border-box; }
html { font-size:18px; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.6;
  font-family:Verdana, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { color:var(--trust-900); line-height:1.2; margin:0; }
p { margin:.6rem 0; }
.wrap { max-width:1024px; margin:0 auto; padding:0 1rem; }
.narrow { max-width:768px; }
.block { padding-top:3rem; padding-bottom:3rem; }
.plain { list-style:none; padding:0; margin:0; }
section[id] { scroll-margin-top:5rem; }
.small { font-size:.85rem; }

/* Focus très visible (navigation clavier) */
:focus-visible { outline:4px solid var(--trust-600); outline-offset:3px; border-radius:6px; }
h2:focus { outline:none; }

.skip { position:absolute; left:.5rem; top:-100px; background:var(--trust-700); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 8px; z-index:50; }
.skip:focus { top:0; }

.site-header { background:#fff; border-bottom:1px solid var(--line); z-index:20; }
@media (min-width:640px){ .site-header { position:sticky; top:0; } }
.header-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.75rem; padding-bottom:.75rem; }
.brand { font-weight:800; font-size:1.1rem; color:var(--trust-900); text-decoration:none; }
.nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; list-style:none; margin:0; padding:0; }
.nav a { display:inline-block; padding:.5rem 0; color:var(--trust-700); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.nav a:hover { color:var(--trust-900); }

.hero { background:linear-gradient(var(--trust-50), var(--bg)); padding:3rem 0 3.5rem; }
.slogan { color:var(--good-800); font-weight:700; }
.hero h1 { font-size:2rem; font-weight:800; margin:.4rem 0 1rem; }
@media (min-width:640px){ .hero h1 { font-size:3rem; } }
.lead { font-size:1.25rem; max-width:48rem; }
.hero p { max-width:48rem; }
.actions { display:flex; flex-direction:column; gap:.75rem; margin-top:2rem; }
@media (min-width:640px){ .actions { flex-direction:row; flex-wrap:wrap; } }
.reading { color:var(--muted); margin-top:1.25rem; }

h2 { font-size:1.6rem; font-weight:800; }
@media (min-width:640px){ h2 { font-size:2rem; } }
.intro { max-width:48rem; margin:.5rem 0 1.5rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.7rem 1.25rem;
  border-radius:12px; border:2px solid transparent; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; }
.btn-primary { background:var(--trust-600); border-color:var(--trust-600); color:#fff; }
.btn-primary:hover { background:var(--trust-700); border-color:var(--trust-700); }
.btn-secondary { background:#fff; border-color:var(--trust-600); color:var(--trust-700); }
.btn-secondary:hover { background:var(--trust-50); }
.btn-urgent { background:var(--alert-700); border-color:var(--alert-700); color:#fff; }
.btn-urgent:hover { background:var(--alert-800); }

.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.card.accent { border:2px solid var(--trust-600); }
.card h3 { font-size:1.25rem; font-weight:800; }
.grid { display:grid; gap:1.25rem; }
@media (min-width:768px){ .grid-2 { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .grid-3 { grid-template-columns:repeat(3,1fr); } }

.rule-head { display:flex; gap:.75rem; align-items:flex-start; }
.rule-ico { flex:none; font-size:1.6rem; padding:.55rem .65rem; border-radius:12px; }
.rule-ico.good { background:var(--good-100); } .rule-ico.warn { background:var(--warn-100); }
.rule-num { display:block; font-size:.85rem; font-weight:700; color:var(--muted); }
.card ul.bul { padding-left:1.25rem; }
.example { background:var(--trust-50); border:1px solid var(--trust-100); border-radius:12px; padding:1rem; margin-top:1rem; }
.example > p:first-child { font-weight:700; color:var(--trust-900); margin-top:0; }
.scam { border:2px solid var(--alert-700); background:var(--alert-50); border-radius:10px; padding:.75rem; margin:.75rem 0 0; }
.scam .tag { font-weight:700; color:var(--alert-800); margin:0; }

.band { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.msg { border:2px dashed #94a3b8; background:#f1f5f9; border-radius:12px; padding:1rem; margin-top:.75rem; }
.msg .meta { font-size:.85rem; font-weight:700; margin:0; }
.badge { display:inline-block; background:var(--warn-100); color:var(--warn-800); font-size:.85rem; font-weight:700; padding:0 .5rem; border-radius:4px; }
fieldset { border:0; padding:0; margin:1rem 0 0; min-width:0; }
legend { font-weight:700; padding:0; }
.check { display:flex; align-items:center; gap:.75rem; min-height:44px; cursor:pointer; }
.check input { width:1.4rem; height:1.4rem; accent-color:var(--trust-600); flex:none; }
.explain { background:var(--trust-50); border:1px solid var(--trust-100); border-radius:12px; padding:1rem; margin-top:1rem; }
.explain ul { padding-left:1.25rem; }

.progress { height:12px; background:#e2e8f0; border-radius:99px; margin-top:.5rem; }
.progress > div { height:12px; background:var(--trust-600); border-radius:99px; }
.q { font-size:1.2rem; font-weight:700; color:var(--text); }
.answers { display:grid; gap:.75rem; margin-top:1rem; }
.opt { display:flex; align-items:flex-start; gap:.75rem; border:2px solid var(--line); background:#fff; border-radius:12px; padding:1rem; cursor:pointer; }
.opt input { width:1.25rem; height:1.25rem; margin-top:.3rem; accent-color:var(--trust-600); flex:none; }
.opt.sel { border-color:var(--trust-600); background:var(--trust-50); }
.opt.right { border-color:var(--good-700); background:var(--good-50); }
.opt.wrong { border-color:var(--warn-700); background:var(--warn-50); }
.status { display:block; font-weight:700; margin-top:.25rem; }
.right .status { color:var(--good-800); } .wrong .status { color:var(--warn-800); }
.err { color:var(--alert-800); font-weight:700; margin-top:.75rem; }
.mt { margin-top:1.25rem; }

.urgence { background:var(--alert-50); border-top:4px solid var(--alert-700); border-bottom:4px solid var(--alert-700); }
.urgence h2 { color:var(--alert-800); }
.urgence .card { margin-top:1.5rem; }
.urgence #resultat-urgence .card { margin-top:1.5rem; }
.steps { padding-left:1.5rem; } .steps li { margin:.5rem 0; }
.note { background:var(--warn-50); border:1px solid var(--warn-700); border-radius:8px; padding:.75rem; }
.site-card { display:flex; flex-direction:column; }
.site-card p.grow { flex:1; }
.site-card .url { font-size:.85rem; color:var(--muted); word-break:break-all; }
.site-card .btn { align-self:flex-start; margin-top:1rem; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.site-footer { background:var(--trust-900); color:#fff; padding:2rem 0; }
.site-footer p { margin:.4rem 0; } .site-footer .small { color:#dbeafe; }

/* Réduction des animations si l'utilisateur le demande dans son appareil */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}