/* veldaria.online — feuille de style unique, auto-hébergée.
   Aucune police distante, aucune ressource tierce, aucun suivi. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --c-bg:#eef3ff;
  --c-surface:#ffffff;
  --c-soft:#e8eefb;
  --c-line:#d5deee;
  --c-ink:#101828;
  --c-muted:#5a6478;
  --c-brand:#0b5cff;
  --c-brand-dark:#0846c4;
  --c-brand-ink:#ffffff;
  --c-warn-bg:#fff6e5;
  --c-warn-line:#e8c98a;
  --c-warn-ink:#6b4a05;
  --c-ok:#00a06a;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --f-head:-apple-system,BlinkMacSystemFont,"Segoe UI Semibold","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --radius:10px;
  --maxw:1240px;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--c-brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--c-brand-dark)}
:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px}

/* ---------- Bandeau de transparence, tout en haut ---------- */
.topbar{
  background:var(--c-warn-bg);
  border-bottom:1px solid var(--c-warn-line);
  color:var(--c-warn-ink);
  font-size:14px;
  line-height:1.5;
}
.topbar p{margin:0;padding:10px 20px;max-width:var(--maxw);margin-inline:auto}
.topbar strong{font-weight:700}

/* ---------- En-tête ---------- */
.nav{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-line);
}
.nav-in{
  max-width:var(--maxw);margin-inline:auto;
  padding:14px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{
  font-family:var(--f-head);font-size:22px;font-weight:700;
  letter-spacing:-.02em;color:var(--c-ink);text-decoration:none;
}
.brand:hover{color:var(--c-brand)}
.kicker{
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-muted);border-left:1px solid var(--c-line);padding-left:16px;
}
.nav-links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nav-links a{color:var(--c-muted);text-decoration:none}
.nav-links a:hover{color:var(--c-brand);text-decoration:underline}

/* ---------- Gabarit ---------- */
.wrap{
  max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:28px 20px 48px;
  display:grid;gap:28px;
  grid-template-columns:230px minmax(0,1fr) 290px;
  align-items:start;
  flex:1 0 auto;
}
.wrap.narrow{grid-template-columns:minmax(0,1fr);max-width:860px}
.rail{position:sticky;top:20px}

/* ---------- Blocs de texte ---------- */
.main h1{
  font-family:var(--f-head);font-size:clamp(28px,4vw,42px);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 14px;
}
.main h2{
  font-family:var(--f-head);font-size:clamp(22px,2.6vw,29px);line-height:1.25;
  letter-spacing:-.01em;margin:44px 0 12px;
}
.main h3{font-family:var(--f-head);font-size:20px;margin:28px 0 8px}
.main p{margin:0 0 16px}
.main ul,.main ol{margin:0 0 18px;padding-left:22px}
.main li{margin-bottom:8px}
.lede{font-size:19px;color:#2b3346}
.byline{
  font-size:14px;color:var(--c-muted);margin:0 0 20px;
  border-bottom:1px solid var(--c-line);padding-bottom:16px;
}
.byline a{color:var(--c-muted)}

/* ---------- Encadré de divulgation ---------- */
.disclosure{
  background:var(--c-warn-bg);border:1px solid var(--c-warn-line);
  border-left:5px solid #d99a17;
  border-radius:var(--radius);padding:16px 18px;margin:0 0 26px;
  font-size:15px;line-height:1.6;color:var(--c-warn-ink);
}
.disclosure h2{font-family:var(--f-head);font-size:16px;margin:0 0 8px;color:var(--c-warn-ink)}
.disclosure p{margin:0 0 8px}
.disclosure p:last-child{margin:0}

.note{
  background:var(--c-soft);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:16px 18px;margin:24px 0;font-size:15px;
}
.note h3{margin-top:0}
.note p:last-child{margin-bottom:0}

/* ---------- Appels à l'action partenaires ---------- */
.promo{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:20px;margin:30px 0;
}
.promo-tag{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:#7a4b00;background:#ffe7bd;border:1px solid var(--c-warn-line);
  border-radius:4px;padding:3px 8px;margin-bottom:10px;
}
.promo p{margin:0 0 14px;font-size:16px}
.btn{
  display:block;width:100%;text-align:center;
  background:var(--c-brand);color:var(--c-brand-ink);
  font-family:var(--f-head);font-weight:600;font-size:17px;
  padding:14px 20px;border-radius:var(--radius);
  text-decoration:none;border:1px solid var(--c-brand-dark);
}
.btn:hover{background:var(--c-brand-dark);color:#fff;text-decoration:none}
.btn .btn-label{
  display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;opacity:.9;margin-top:5px;
}
.btn-outline{background:transparent;color:var(--c-brand);border:1px solid var(--c-brand)}
.btn-outline:hover{background:var(--c-brand);color:#fff}
.btn-s{font-size:15px;padding:11px 16px}
.aff-note{
  font-size:13px;line-height:1.5;color:var(--c-muted);margin:8px 0 0;
}

/* ---------- Rails ---------- */
.card{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:18px;font-size:15px;
}
.card h2,.card h3{font-family:var(--f-head);font-size:16px;margin:0 0 10px;letter-spacing:.01em}
.card p{margin:0 0 12px}
.toc{list-style:none;margin:0;padding:0;font-size:14.5px}
.toc li{margin-bottom:9px;line-height:1.4}
.toc a{color:var(--c-muted);text-decoration:none}
.toc a:hover{color:var(--c-brand);text-decoration:underline}
.ticks{list-style:none;margin:0 0 14px;padding:0;font-size:14.5px}
.ticks li{padding-left:22px;position:relative;margin-bottom:7px;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--c-ok);border-bottom:2px solid var(--c-ok);
  transform:rotate(-45deg);
}

/* ---------- Figures ---------- */
figure{margin:28px 0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:18px}
figure svg{width:100%;height:auto}
figcaption{font-size:14px;color:var(--c-muted);margin-top:12px;line-height:1.55}

/* ---------- Tableaux ---------- */
.table-scroll{overflow-x:auto;margin:22px 0}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--c-surface);min-width:520px}
th,td{border:1px solid var(--c-line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--c-soft);font-family:var(--f-head);font-weight:600}

/* ---------- Pieds de page ---------- */
.foot{
  background:var(--c-surface);border-top:1px solid var(--c-line);
  padding:28px 20px 34px;font-size:14px;color:var(--c-muted);
  flex-shrink:0;
}
.foot-in{max-width:var(--maxw);margin-inline:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
.foot-links a{color:var(--c-muted)}
.foot p{margin:0 0 10px;line-height:1.6}
.foot-id{font-size:13.5px}

.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;
}
code{font-family:var(--f-mono);font-size:.92em;background:var(--c-soft);padding:1px 5px;border-radius:4px}

@media (max-width:1080px){
  .wrap{grid-template-columns:minmax(0,1fr) 280px}
  .rail-l{display:none}
}
@media (max-width:820px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .rail-l{display:block}
  body{font-size:16.5px}
}