/* ═══════════════════════════════════════════════════════════════════════════
   SIRA — feuille de style des pages légales.
   Mêmes jetons que la page d'accueil, sans les composants marketing : ces
   pages ne vendent rien, elles se lisent. Le texte y prime donc sur tout le
   reste — une colonne, un fond sable, et le tricolore pour seul ornement.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FBF6EC; --bg2:#FFFDF8; --card:#ffffff; --soft:#F7F0E2;
  --ink:#001831; --ink2:#5E5646; --ink3:#9C9280;
  --line:#E8DDC8; --line2:#F3EBDC;
  --brand:#0B7729; --brandD:#02492C; --brandL:#E6F1E6; --brandRing:rgba(11,119,41,.22);
  --gold:#D29402; --goldD:#8A6102; --goldL:#FBF1D8; --goldRing:rgba(210,148,2,.32);
  --clay:#B4531E;
  --frame:#001831;
  --mali-v:#15803D; --mali-j:#EAB308; --mali-r:#EF4444;
  --shadow-s:0 1px 2px rgba(38,26,8,.06);
  --shadow-m:0 14px 34px -20px rgba(38,26,8,.45);
  --r-m:16px; --r-l:22px; --r-xl:28px;
  --maxw:820px;
  --bogo-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FBF6EC' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M0 8h72M0 64h72'/%3E%3Cpath d='M-4 30l8 8 8-8 8 8 8-8 8 8 8-8 8 8 8-8 8 8 8-8'/%3E%3C/g%3E%3Cg fill='%23FBF6EC'%3E%3Cpath d='M18 12l6 6-6 6-6-6zM54 12l6 6-6 6-6-6z'/%3E%3Ccircle cx='9' cy='52' r='2.6'/%3E%3Ccircle cx='27' cy='52' r='2.6'/%3E%3Ccircle cx='45' cy='52' r='2.6'/%3E%3Ccircle cx='63' cy='52' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A0D13; --bg2:#0E1219; --card:#161C26; --soft:#121822;
    --ink:#F8F4EA; --ink2:#ADA593; --ink3:#7A7263;
    --line:#2A3040; --line2:#1E242F;
    --brand:#4FA12F; --brandD:#2B872B; --brandL:rgba(79,161,47,.14); --brandRing:rgba(79,161,47,.32);
    --gold:#E5B23C; --goldD:#E5B23C; --goldL:rgba(229,178,60,.12); --goldRing:rgba(229,178,60,.34);
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 14px 34px -20px rgba(0,0,0,.85);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brandD);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--brand)}
@media (prefers-color-scheme: dark){a{color:var(--brand)}}
h1,h2,h3{font-family:Fraunces,'Iowan Old Style',Georgia,serif;letter-spacing:-.018em;line-height:1.15;margin:0}
p{margin:0}
::selection{background:var(--goldL);color:var(--frame)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
header{
  background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
header:after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--mali-v) 0 33.3%,var(--mali-j) 33.3% 66.6%,var(--mali-r) 66.6%);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:40px;height:40px;object-fit:contain}
.brand-txt{display:flex;flex-direction:column;line-height:1.02}
.brand-name{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.brand-name b{color:var(--brand);font-weight:900}
.brand-slog{font-size:8px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin-top:2px}
.back{
  font-size:14px;font-weight:700;color:var(--ink2);text-decoration:none;white-space:nowrap;
  padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card);
}
.back:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:440px){.brand-slog{display:none}.back{padding:9px 12px;font-size:13px}}

/* ── Titre de page ───────────────────────────────────────────────────────── */
.hd{padding:clamp(40px,7vw,72px) 0 clamp(24px,3vw,34px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brandD);
  background:var(--brandL);border:1px solid var(--brandRing);
  padding:7px 15px 7px 12px;border-radius:4px;margin-bottom:18px;
}
.eyebrow:before{content:'';width:8px;height:8px;flex:none;background:currentColor;transform:rotate(45deg);opacity:.85}
@media (prefers-color-scheme: dark){.eyebrow{color:var(--brand)}}
.hd h1{font-size:clamp(32px,5.4vw,52px);font-weight:700;font-variation-settings:'opsz' 144}
.maj{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--ink3)}
.mali-rule{height:8px;width:96px;display:flex;align-items:center;gap:4px;margin:0 0 22px}
.mali-rule i{flex:1;height:4px;border-radius:1px;position:relative}
.mali-rule i:nth-child(1){background:var(--mali-v)}
.mali-rule i:nth-child(2){background:var(--mali-j)}
.mali-rule i:nth-child(3){background:var(--mali-r)}
.mali-rule i:nth-child(2):after{
  content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;
  background:var(--mali-j);transform:translate(-50%,-50%) rotate(45deg);
}

/* ── Sommaire ────────────────────────────────────────────────────────────── */
.toc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px 24px;box-shadow:var(--shadow-s);margin-bottom:clamp(34px,5vw,52px);
}
.toc h2{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:Inter,sans-serif;margin-bottom:14px}
.toc ol{margin:0;padding:0 0 0 20px;columns:2;column-gap:30px;font-size:14px}
.toc li{margin-bottom:8px;break-inside:avoid;color:var(--ink2)}
.toc a{color:var(--ink2);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}
@media (max-width:620px){.toc ol{columns:1}}

/* ── Corps du texte ──────────────────────────────────────────────────────── */
main{padding-bottom:clamp(50px,7vw,84px)}
.art section{margin-bottom:clamp(34px,4.5vw,50px);scroll-margin-top:90px}
.art h2{
  font-size:clamp(21px,2.8vw,27px);font-weight:700;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);font-variation-settings:'opsz' 144;
}
.art h2 .num{color:var(--gold);font-variant-numeric:tabular-nums;margin-right:10px}
.art h3{font-size:17px;font-weight:700;margin:24px 0 9px}
.art p{margin-bottom:13px;color:var(--ink2);line-height:1.78}
.art ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.art ul li{display:flex;gap:12px;color:var(--ink2);line-height:1.7}
.art ul li:before{content:'';flex:none;width:10px;height:10px;background:var(--brand);transform:rotate(45deg);margin-top:8px}
.art strong{color:var(--ink);font-weight:700}
.art dl{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px}
.art dt{font-weight:800;color:var(--ink);white-space:nowrap}
.art dd{margin:0;color:var(--ink2)}
@media (max-width:560px){.art dl{grid-template-columns:1fr;gap:2px 0}.art dd{margin-bottom:10px}}

/* Encadré d'attention — sert aussi aux champs restés à compléter */
.box{
  background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:18px 20px;margin:0 0 16px;
}
.box p:last-child{margin-bottom:0}
.box.brand-box{border-left-color:var(--brand)}

/* Un champ que seul l'éditeur peut remplir : impossible à publier par
   inadvertance, il crie sa présence. */
.todo{
  display:inline-block;background:#FEE2E2;color:#991B1B;border:1px dashed #DC2626;
  border-radius:5px;padding:1px 9px;font-size:13px;font-weight:800;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
}
@media (prefers-color-scheme: dark){.todo{background:rgba(220,38,38,.16);color:#FCA5A5}}

.tel-mail{font-weight:700;color:var(--brandD)}
@media (prefers-color-scheme: dark){.tel-mail{color:var(--brand)}}

/* ── Pied de page ────────────────────────────────────────────────────────── */
footer{
  background:var(--frame);color:#FBF6EC;padding:44px 0 28px;position:relative;overflow:hidden;
}
footer:before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--mali-v) 0 33.3%,var(--mali-j) 33.3% 66.6%,var(--mali-r) 66.6%);
}
footer:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--bogo-l);background-size:72px 72px;opacity:.07;
}
footer .wrap{position:relative;z-index:1}
.foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
/* Sur fond de couleur, l'emblème est posé sur une plaque blanche : le visage
   bleu nuit du logo se perdrait sinon dans l'indigo. */
.foot .brand img{width:46px;height:46px;padding:5px;background:#fff;border-radius:13px;box-shadow:0 8px 20px -10px rgba(0,0,0,.65)}
.foot .brand-name{color:#fff}
.foot .brand-name b{color:var(--mali-j)}
.foot .brand-slog{color:rgba(251,246,236,.5)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.foot-links a{color:rgba(251,246,236,.74);text-decoration:none;font-weight:500}
.foot-links a:hover{color:#fff}
.foot-bot{
  margin-top:30px;padding-top:20px;border-top:1px solid rgba(251,246,236,.14);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12.5px;color:rgba(251,246,236,.56);font-weight:600;
}