@font-face{font-family:'Bootzy';src:url(fonts/bootzy.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Neutral Face';src:url(fonts/neutral-face.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Neutral Face';src:url(fonts/neutral-face-bold.otf) format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Raw Serif';src:url(fonts/raw-serif.ttf) format('truetype');font-display:swap}
:root{
  --papier:#FAF5E6;--chiffon:#FFF8CA;--encre:#2D120D;--sang:#6B0B0C;--rose:#EAD5D2;
  --encre-60:rgba(45,18,13,.66);--encre-30:rgba(45,18,13,.28);
  --display:'Bootzy',system-ui,sans-serif;--struct:'Neutral Face',system-ui,sans-serif;--serif:'Raw Serif',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:linear-gradient(var(--papier) 0 50%,var(--encre) 50% 100%)}
body{background:var(--papier);color:var(--encre);font-family:var(--serif);font-size:17px;line-height:1.75}
a{color:inherit}
::selection{background:var(--sang);color:var(--papier)}
a:focus-visible{outline:2px solid var(--sang);outline-offset:3px}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 5vw;background:rgba(250,245,230,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--encre-30)}
.wordmark{font-family:var(--struct);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.wordmark span{color:var(--sang)}
.retour{font-family:var(--struct);font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--sang);padding-bottom:3px}
.page{max-width:780px;margin:0 auto;padding:90px 22px 120px}
.label{display:block;font-family:var(--struct);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sang);margin-bottom:18px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,92px);line-height:.96;margin-bottom:22px;overflow-wrap:anywhere}
.maj{font-family:var(--struct);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60);margin-bottom:56px}
.chapo{font-size:19px;line-height:1.6;margin-bottom:48px}
h2{font-family:var(--struct);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  border-top:1px solid var(--encre-30);padding-top:30px;margin:52px 0 18px}
h3{font-family:var(--struct);font-weight:700;font-size:15px;letter-spacing:.04em;margin:30px 0 10px}
p{margin-bottom:16px}
ul{list-style:none;margin:0 0 18px}
li{padding-left:22px;position:relative;margin-bottom:8px}
li::before{content:"\2733\FE0E";position:absolute;left:0;top:5px;font-size:10px;color:var(--sang)}
.fiche{background:var(--chiffon);border-radius:18px;padding:28px 30px;margin:0 0 18px}
.fiche p{margin-bottom:4px}
.fiche strong{font-family:var(--struct);font-weight:700;font-size:13px;letter-spacing:.04em}
.bref{background:var(--rose);border-radius:18px;padding:28px 30px;margin-bottom:10px}
.bref li::before{color:var(--sang)}
footer{background:var(--encre);color:var(--papier);padding:56px 5vw calc(30px + env(safe-area-inset-bottom))}
.foot{max-width:1220px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;
  font-family:var(--struct);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,245,230,.55)}
.foot nav{display:flex;flex-wrap:wrap;gap:22px}
.foot a{text-decoration:none}
.foot a:hover,.foot a[aria-current]{color:var(--rose)}
@media (max-width:640px){
  .nav{padding:16px 22px}
  .page{padding:60px 22px 90px}
  .fiche,.bref{padding:22px 20px}
  .foot{flex-direction:column}
}