/* ==========================================================================
   lumavien.online — feuille de style unique.
   Aucune ressource externe : pas de police web, pas de CDN, pas d'image
   distante. Uniquement des polices systeme.
   ========================================================================== */

:root{
  --bg:#14181d;
  --surface:#1a2027;
  --soft:#1e252d;
  --line:#333c47;
  --line-soft:#272f38;
  --ink:#e8e6df;
  --muted:#9aa3ad;
  --brand:#c8a24a;
  --brand-2:#a8842f;
  --brand-ink:#14181d;
  --ember:#d1682e;
  --ok:#5aa877;
  --maxw:1240px;
  --radius:12px;
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ff-head:Georgia,"Times New Roman","Liberation Serif",serif;
  --ff-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}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff);
  font-size:clamp(1rem,.96rem + .25vw,1.08rem);
  line-height:1.68;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;line-height:1.18;margin:0}
h1{font-size:clamp(1.85rem,1.35rem + 2.6vw,2.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,1.15rem + 1.05vw,1.85rem);margin-top:2.4em}
h3{font-size:clamp(1.1rem,1.03rem + .45vw,1.3rem);margin-top:1.8em}
h4{font-size:1rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.2em;padding-left:1.35em}
li{margin:0 0 .5em}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:2.6em 0}
strong{color:#fff}
code{font-family:var(--ff-mono);font-size:.92em;background:var(--soft);padding:.1em .35em;border-radius:4px}

/* --- lien d'evitement ------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);
  color:var(--brand-ink);padding:.7em 1.1em;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* --- bandeau de divulgation (tout en haut de page) -------------------- */
.disclosure-bar{
  background:var(--ember);
  color:#fff;
  font-size:.86rem;
  line-height:1.45;
  font-weight:600;
  text-align:center;
  padding:.6em 16px;
}
.disclosure-bar a{color:#fff;text-decoration:underline}

/* --- en-tete ---------------------------------------------------------- */
.nav{
  border-bottom:1px solid var(--line);
  background:rgba(20,24,29,.92);
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(140%) blur(6px);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:.7em 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand svg{width:32px;height:32px;flex:0 0 32px}
.brand-t{font-family:var(--ff-head);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;line-height:1.1}
.brand-s{display:block;font-family:var(--ff);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:2px 4px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav-links a{
  color:var(--muted);font-size:.9rem;font-weight:600;padding:.35em .6em;border-radius:7px;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);background:var(--soft);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--brand);background:var(--soft)}

/* --- grille ----------------------------------------------------------- */
.wrap{
  max-width:var(--maxw);width:100%;margin:0 auto;padding:clamp(22px,3.5vw,44px) 16px;
  display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:minmax(0,23fr) minmax(0,54fr) minmax(0,23fr);
  align-items:start;flex:1 0 auto;
}
.wrap.narrow{grid-template-columns:minmax(0,1fr);max-width:860px}
.rail-l{order:1;position:sticky;top:76px}
.main{order:2;min-width:0}
.rail-r{order:3;position:sticky;top:76px}
@media (max-width:1080px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .rail-l,.rail-r{position:static;order:3}
  .main{order:1}
}

/* --- cartes de rail --------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(16px,2vw,22px);
}
.card+.card{margin-top:18px}
.card h4{
  font-family:var(--ff);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin:0 0 .9em;
}
.card ul{list-style:none;margin:0;padding:0;font-size:.93rem}
.card ul li{margin:0 0 .45em;padding-left:1.1em;position:relative;color:var(--muted)}
.card ul li::before{content:"\203A";position:absolute;left:0;color:var(--brand);font-weight:700}
.card ul li a{color:var(--muted)}
.card ul li a:hover{color:var(--ink)}
.card p{font-size:.93rem;color:var(--muted);margin:0 0 .8em}
.card p:last-child{margin-bottom:0}
.card dl{margin:0;font-size:.92rem}
.card dt{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.9em}
.card dt:first-child{margin-top:0}
.card dd{margin:.1em 0 0;color:var(--ink);font-weight:600}

/* --- chapeau, signature ----------------------------------------------- */
.kicker{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin:0 0 .8em;
}
.lede{font-size:clamp(1.08rem,1.02rem + .42vw,1.3rem);color:var(--muted);margin:.9em 0 1.4em}
.byline{
  display:flex;flex-wrap:wrap;gap:.35em 1.1em;align-items:baseline;
  font-size:.86rem;color:var(--muted);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:.75em 0;margin:0 0 1.6em;
}
.byline strong{color:var(--ink);font-weight:700}

/* --- encadre de divulgation (juste apres le h1) ----------------------- */
.disclosure-box{
  background:var(--soft);
  border:1px solid var(--line);
  border-left:4px solid var(--ember);
  border-radius:var(--radius);
  padding:clamp(14px,1.8vw,20px);
  margin:0 0 2em;
  font-size:.94rem;
}
.disclosure-box p{margin:0 0 .6em}
.disclosure-box p:last-child{margin-bottom:0}
.disclosure-box .dt{
  display:block;font-family:var(--ff);font-weight:700;color:var(--ember);
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.5em;
}

/* --- notes, encadres --------------------------------------------------- */
.note{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(14px,1.8vw,20px);margin:1.6em 0;font-size:.95rem;
}
.note h3{margin-top:0;font-size:1.05rem}
.note p:last-child{margin-bottom:0}
.note.warn{border-left:4px solid var(--ember)}
.note.tm{font-size:.88rem;color:var(--muted)}

/* --- tableaux ---------------------------------------------------------- */
.table-scroll{overflow-x:auto;margin:1.6em 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:520px}
caption{caption-side:bottom;text-align:left;font-size:.84rem;color:var(--muted);padding-top:.8em}
th,td{border:1px solid var(--line-soft);padding:.6em .8em;text-align:left;vertical-align:top}
thead th{background:var(--soft);color:var(--brand);font-family:var(--ff);
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
tbody th{background:var(--surface);font-weight:600;color:var(--ink);font-family:var(--ff)}

/* --- figures / illustrations ------------------------------------------ */
figure{margin:2em 0;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(14px,2vw,22px)}
figure img{width:100%;border-radius:6px}
figcaption{margin-top:1em;font-size:.87rem;color:var(--muted);line-height:1.55}
figcaption b{color:var(--ink)}

/* --- boutons / appels a l'action -------------------------------------- */
.cta{margin:1.8em 0}
.cta.center{text-align:center}
.btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3em;
  padding:.85em 1.9em;border-radius:999px;font-weight:700;line-height:1.25;
  text-align:center;text-decoration:none;border:2px solid transparent;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
  max-width:100%;
}
.btn:hover,.btn:focus-visible{text-decoration:none;transform:translateY(-1px)}
.btn-solid{background:var(--brand);color:var(--brand-ink)}
.btn-solid:hover,.btn-solid:focus-visible{background:#dcb659}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand-2)}
.btn-outline:hover,.btn-outline:focus-visible{background:rgba(200,162,74,.1);border-color:var(--brand)}
.btn-full{display:flex;width:100%}
.btn-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.82;font-family:var(--ff);
}
.cta-note{
  font-size:.83rem;color:var(--muted);line-height:1.5;margin:.7em 0 0;
  max-width:52ch;
}
.cta.center .cta-note{margin-left:auto;margin-right:auto}

/* --- grille de cartes (accueil) --------------------------------------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));margin:2em 0}
.tile{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;
}
.tile h3{margin:0 0 .35em;font-size:1.3rem}
.tile h3 a{color:var(--ink)}
.tile h3 a:hover{color:var(--brand);text-decoration:none}
.tile .tile-meta{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);font-weight:700;margin:0 0 .7em}
.tile p{font-size:.95rem;color:var(--muted)}
.tile svg{margin:0 0 1.1em;border-radius:8px;width:100%}
.tile .tile-go{margin-top:auto;padding-top:.5em;font-weight:700}

/* --- pied de page ------------------------------------------------------ */
.foot{
  border-top:1px solid var(--line);background:var(--surface);
  margin-top:auto;padding:clamp(26px,3.5vw,44px) 16px;font-size:.9rem;
}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.foot h4{font-family:var(--ff);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin:0 0 .9em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 .45em}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot address{font-style:normal;color:var(--muted);line-height:1.7}
.foot-bottom{
  max-width:var(--maxw);margin:clamp(22px,3vw,36px) auto 0;padding-top:20px;
  border-top:1px solid var(--line-soft);color:var(--muted);font-size:.85rem;
}
.foot-bottom p{margin:0 0 .7em}
.foot-bottom p:last-child{margin-bottom:0}

/* --- passerelle partenaire --------------------------------------------- */
.bridge{
  display:flex;min-height:100vh;align-items:center;justify-content:center;
  padding:24px 16px;text-align:center;
}
.bridge-in{max-width:520px}
.bridge h1{font-size:1.5rem;margin-bottom:.6em}
.bridge p{color:var(--muted);font-size:.95rem}

/* --- sommaire en ligne (mobile) ---------------------------------------- */
.toc-inline{display:none}
@media (max-width:1080px){
  .toc-inline{display:block;margin:0 0 2em}
}

/* --- listes de definition dans le contenu ------------------------------ */
.main dl{margin:1.4em 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.main dt{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
  font-weight:700;margin-top:1.1em}
.main dt:first-child{margin-top:0}
.main dd{margin:.15em 0 0;color:var(--ink)}
@media (min-width:620px){
  .main dl{grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:.1em 1.4em;align-items:baseline}
  .main dt{margin-top:.55em}
  .main dd{margin-top:.55em}
  .main dt:first-child,.main dt:first-child+dd{margin-top:0}
}

/* --- adresse postale --------------------------------------------------- */
.postal{
  font-style:normal;background:var(--surface);border:1px solid var(--line-soft);
  border-left:4px solid var(--brand);border-radius:var(--radius);
  padding:clamp(14px,1.8vw,20px);line-height:1.8;margin:1.4em 0;
}

/* --- enveloppe de bouton ----------------------------------------------- */
.btn-wrap{margin:0}
.cta.center .btn-wrap{margin:0}
.card .btn-wrap{margin:0}
.card .cta-note{font-size:.78rem;margin-top:.6em}
.bridge .btn{margin:1.2em 0}