/* ============================================================
   CHEZ JULIEN : pages légales (privacy, cookies)
   Reprend les jetons de index.html, en version allégée.
   ============================================================ */
:root{
  --cream:#FBF4E8;
  --cream-2:#F5EBD9;
  --white:#FFFDF8;
  --ink:#1E3272;
  --ink-70:rgba(30,50,114,.74);
  --ink-45:rgba(30,50,114,.5);
  --ink-12:rgba(30,50,114,.13);
  --red:#E8503A;
  --red-deep:#D0402C;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --maxw:820px;
  --r-sm:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;font-weight:450;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* nav */
header.nav{position:sticky;top:0;z-index:60;background:rgba(251,244,232,.92);
  backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink-12)}
.nav-in{max-width:1180px;margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;gap:20px}
/* border-bottom:0 : la regle generique a{} plus bas souligne les liens de texte,
   ce qui dessinait un trait rouge sous le logo et un arc sous le bouton (le trait
   epouse le border-radius). Le header n'en veut pas. */
.nav-logo,.nav-back,.skip{border-bottom:0}
.nav-logo{flex:none;display:block;line-height:0}
.nav-logo img{width:56px;height:56px;display:block}
.nav-back{margin-left:auto;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--ink-70);text-decoration:none;padding:8px 15px;border-radius:999px}
.nav-back:hover{color:var(--ink);background:var(--cream-2)}

/* prose */
main{padding-block:clamp(40px,6vw,72px)}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(34px,5vw,52px);margin:0 0 10px}
.updated{font-weight:600;font-size:14px;color:var(--ink-45);margin:0 0 8px}
.lede{font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,21px);
  line-height:1.45;color:var(--ink);margin:22px 0 0}
h2{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.15;
  font-size:clamp(23px,2.8vw,30px);margin:48px 0 14px;scroll-margin-top:90px}
h3{font-family:var(--display);font-weight:700;font-size:19px;margin:28px 0 8px}
p,li{color:var(--ink-70);font-weight:500}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px;padding-left:22px}
li{margin-bottom:8px}
a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--red)}
a:hover{color:var(--red)}
strong{color:var(--ink);font-weight:700}

/* table */
.tbl-scroll{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--ink-12);
  vertical-align:top;color:var(--ink-70);font-weight:500}
th{font-family:var(--display);font-weight:700;color:var(--ink);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;background:var(--cream-2);
  border-bottom:2px solid var(--ink)}
td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--cream-2);padding:2px 6px;border-radius:5px;color:var(--ink)}

/* callout */
.note{background:var(--white);border:2px solid var(--ink);border-radius:var(--r-sm);
  padding:20px 22px;margin:24px 0;box-shadow:0 4px 0 var(--ink-12)}
.note p:last-child{margin-bottom:0}
.note.todo{border-style:dashed;border-color:var(--red);box-shadow:none;background:var(--cream-2)}

/* toc */
.toc{background:var(--white);border:2px solid var(--ink);border-radius:var(--r-sm);
  padding:20px 24px;margin:32px 0 0;box-shadow:0 4px 0 var(--ink-12)}
.toc h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;font-size:15px}
.toc li{margin-bottom:6px}
.toc a{border-bottom-color:var(--ink-12)}

/* footer */
footer.site{background:var(--ink);color:var(--cream);
  padding-block:clamp(36px,5vw,56px);margin-top:clamp(50px,7vw,90px);
  border-radius:24px 24px 0 0}
footer.site .wrap{max-width:1180px}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:14px;font-weight:600;
  align-items:center}
footer.site a{color:var(--cream);border-bottom:1.5px solid rgba(251,244,232,.25)}
footer.site a:hover{color:#fff;border-bottom-color:var(--red)}
.foot-nav .sep{opacity:.45}
.foot-credit{margin-left:auto;opacity:.6}
@media(max-width:620px){.foot-credit{margin-left:0}}

/* accessibilité */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:0 0 12px 0;z-index:100;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}