:root{
  --jaune:#fcb900;
  --anthracite:#333333;
  --teal:#00897c;
  --terracotta:#c85439;
  --encre:#1c1c1c;
  --gutter:clamp(1.25rem,5vw,4rem);
  --titre:'Lilita One',ui-rounded,system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font:400 1rem/1.7 var(--sans);
  color:var(--encre);
  background:#fff;
}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

header{
  padding:1.5rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #eee;
}
header a.retour{
  font:500 .9rem/1 var(--sans);
  color:var(--encre);
  text-decoration:none;
  display:flex;align-items:center;gap:.4rem;
}
header a.retour:hover{color:var(--teal)}
.marque{font:400 1.25rem/1 var(--titre);color:var(--anthracite);text-decoration:none}

main{max-width:42rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) 6rem}

h1{font:400 clamp(1.75rem,4vw,2.5rem)/1.15 var(--titre);color:var(--anthracite);margin:0 0 .5rem}
.intro{color:#666;margin:0 0 3rem;font-size:.95rem}

section{margin-bottom:3.5rem;scroll-margin-top:1.5rem}
section h2{font:400 1.5rem/1.2 var(--titre);color:var(--teal);margin:0 0 1.25rem}
section h3{font:600 1rem/1.3 var(--sans);color:var(--anthracite);margin:1.75rem 0 .5rem}
section p{margin:0 0 1rem}
section ul{margin:0 0 1rem;padding-left:1.25rem}
section li{margin-bottom:.4rem}

.a-completer{
  background:#fff8ec;border:1px dashed #e0b95c;
  padding:.15rem .5rem;border-radius:4px;
  font-size:.9em;color:#8a6415;
}

.retour-haut{font-size:.85rem}
hr{border:none;border-top:1px solid #eee;margin:3.5rem 0}