/* truebase.online — feuille de style unique, auto-hébergée.
   Aucune police distante, aucune ressource tierce, aucun appel réseau externe. */

:root{
  --brand:#046b47;
  --brand-strong:#03543a;
  --brand-soft:#e6f3ee;
  --brand-line:#b9ddcd;
  --accent:#0f766e;
  --ink:#12211c;
  --ink-soft:#44564e;
  --muted:#5f716a;
  --bg:#ffffff;
  --surface:#f5f9f7;
  --surface-2:#eef4f1;
  --line:#dbe5e0;
  --warn-bg:#fff8e8;
  --warn-line:#e8d197;
  --warn-ink:#6b4e10;
  --radius:10px;
  --radius-lg:14px;
  --maxw:1240px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--brand-strong)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- Bandeau de divulgation (tout en haut de page) ---------- */
.afbar{
  background:var(--brand-strong);
  color:#eefaf4;
  font-size:14px;
  line-height:1.5;
  padding:10px 16px;
  text-align:center;
}
.afbar strong{color:#fff}
.afbar a{color:#cdeede}

/* ---------- En-tête ---------- */
.nav{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;top:0;z-index:20;
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px}
.brand:hover{text-decoration:none;color:var(--brand)}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px}
.nav-links a{color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{color:var(--brand);text-decoration:underline}

/* ---------- Grille ---------- */
.wrap{
  max-width:var(--maxw);margin:0 auto;padding:28px 16px 48px;
  display:grid;gap:34px;
  grid-template-columns:230px minmax(0,1fr) 280px;
  align-items:start;
}
.wrap.solo{grid-template-columns:minmax(0,760px);justify-content:center}
main{min-width:0}
.rail{min-width:0;font-size:15px}
.rail-sticky{position:sticky;top:76px}
@media (max-width:1080px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .rail{order:2}
  .rail-sticky{position:static}
}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{line-height:1.25;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(28px,4.2vw,40px);margin:.1em 0 .35em;letter-spacing:-.015em}
h2{font-size:clamp(22px,2.8vw,28px);margin:2.2em 0 .6em;letter-spacing:-.01em;padding-top:.2em}
h3{font-size:19px;margin:1.8em 0 .5em}
p{margin:0 0 1.05em}
.kicker{
  text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:700;
  color:var(--brand);margin:0 0 .4em;
}
.lede{font-size:19px;color:var(--ink-soft);margin-bottom:1.1em}
.byline{
  font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 0;margin:0 0 1.6em;display:flex;flex-wrap:wrap;gap:6px 18px;
}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.3em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em}
ul.check li::before{
  content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:700;
}
ul.dash{list-style:none;padding-left:0}
ul.dash li{position:relative;padding-left:1.7em}
ul.dash li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--accent)}
strong{color:var(--ink)}
small{font-size:14px;color:var(--muted)}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:4px}

/* ---------- Encadré de divulgation ---------- */
.disclo{
  border:1px solid var(--brand-line);
  background:var(--brand-soft);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  margin:0 0 1.8em;
}
.disclo h2,.disclo h3{margin:0 0 .4em;font-size:16px;color:var(--brand-strong);padding-top:0}
.disclo p{margin:0 0 .6em;font-size:15px;color:var(--ink-soft)}
.disclo p:last-child{margin-bottom:0}

/* ---------- Encadrés génériques ---------- */
.box{
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius-lg);padding:18px 20px;margin:1.6em 0;
}
.box h2,.box h3{margin-top:0;padding-top:0}
.box > :last-child{margin-bottom:0}
.box.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.box.warn h3{color:var(--warn-ink)}

/* ---------- Boutons / appels à l'action ---------- */
.cta{margin:1.8em 0}
.cta.center{text-align:center}
.btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--brand);color:#fff;text-decoration:none;
  font-weight:700;font-size:17px;line-height:1.25;
  padding:14px 26px;border-radius:var(--radius);
  border:1px solid var(--brand-strong);
  transition:background .15s ease;
}
.btn:hover{background:var(--brand-strong);color:#fff;text-decoration:none}
.btn-full{display:flex;width:100%}
.btn-ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand-strong)}
.btn-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  opacity:.92;
}
.btn-ghost .btn-tag{opacity:1;color:var(--brand-strong)}
.cta-note{
  font-size:13.5px;color:var(--muted);margin:.6em 0 0;line-height:1.5;
}
.cta.center .cta-note{margin-left:auto;margin-right:auto;max-width:44em}

/* ---------- Bannière promo ---------- */
.promo{
  border:1px solid var(--brand-line);background:var(--brand-soft);
  border-radius:var(--radius-lg);padding:22px 22px 20px;margin:2em 0;
}
.promo h3{margin-top:0;color:var(--brand-strong)}
.promo .cta{margin-bottom:0}

/* ---------- Sommaire ---------- */
.toc{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);padding:14px 16px;
}
.toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .6em;color:var(--muted);padding-top:0}
.toc ol{list-style:none;margin:0;padding:0;font-size:14.5px}
.toc li{margin:.42em 0}
.toc a{color:var(--ink-soft);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}

/* ---------- Fiche latérale ---------- */
.card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px;margin:0 0 18px;background:#fff;
}
.card h3{margin:0 0 .5em;font-size:16px}
.card dl{margin:0;font-size:14.5px}
.card dt{font-weight:700;color:var(--ink);margin-top:.6em}
.card dt:first-child{margin-top:0}
.card dd{margin:0 0 .2em;color:var(--ink-soft)}

/* ---------- Tableaux ---------- */
.tablewrap{overflow-x:auto;margin:1.5em 0}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
caption{caption-side:bottom;text-align:left;font-size:13.5px;color:var(--muted);padding-top:.7em}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{background:var(--surface-2);font-size:14.5px}
tbody th{background:var(--surface);font-weight:600}

/* ---------- Figures / illustrations ---------- */
figure{margin:2em 0;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;background:#fff}
figure img{width:100%;height:auto;margin:0 auto}
figcaption{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.55;border-top:1px solid var(--line);padding-top:12px}
figcaption b{color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin:.6em 0;background:#fff}
.faq summary{
  cursor:pointer;padding:13px 16px;font-weight:650;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:700;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details > p{padding:0 16px 14px;margin:0;color:var(--ink-soft);font-size:15.5px}

/* ---------- Sources ---------- */
.sources{font-size:15px;color:var(--ink-soft)}
.sources li{margin:.5em 0}

/* ---------- Pied de page ---------- */
.foot{
  border-top:1px solid var(--line);background:var(--surface);
  margin-top:auto;padding:30px 16px 36px;font-size:14.5px;color:var(--ink-soft);
}
.foot-in{max-width:var(--maxw);margin:0 auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 16px;padding:0;list-style:none}
.foot-nav a{color:var(--ink-soft);text-decoration:none}
.foot-nav a:hover{color:var(--brand);text-decoration:underline}
.foot p{margin:0 0 .7em;max-width:78em}
.foot .legal{font-size:13.5px;color:var(--muted)}

/* ---------- Page passerelle / redirection ---------- */
.bridge{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.bridge-in{max-width:520px}

/* ---------- Divers ---------- */
.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;
}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.updated{font-size:14px;color:var(--muted)}

@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:22px 14px 40px;gap:26px}
  figure{padding:12px}
  .btn{width:100%}
}