:root{
  --papier:#f6f5ef; --surface:#fffef9; --encre:#233c30; --sourd:#54645a;
  --ligne:#cdd4c9; --foret:#365b3e; --teinte:#e7ebdf;
  --mesure:38rem; --page:68rem; --ecart:clamp(1.25rem,3vw,2.5rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font:400 1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--foret); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:3px solid var(--foret); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-999rem; top:0; background:var(--surface); padding:.75rem 1rem}
.skip:focus{left:1rem; top:1rem; z-index:2}

.top,.bottom,main{max-width:var(--page); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem)}
.top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 2rem; padding-block:1.5rem}
.mark{font-weight:700; font-size:1.25rem; letter-spacing:-.01em; color:var(--encre); text-decoration:none}
.top nav,.bottom nav{display:flex; flex-wrap:wrap; gap:.25rem 1.5rem}
.top nav a,.bottom nav a{padding-block:.5rem}

main>section{padding-block:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--ligne)}
main>section.hero{border-top:0; padding-top:clamp(2rem,7vw,5.5rem)}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:clamp(2.25rem,7vw,4.25rem); font-weight:700; letter-spacing:-.03em; max-width:16ch}
h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:650; margin-bottom:1rem}
p{margin:0 0 1rem}
.measure{max-width:var(--mesure)}
.small{font-size:.9375rem; color:var(--sourd)}
.lede{font-size:clamp(1.1875rem,2.2vw,1.4375rem); line-height:1.45; max-width:34rem; margin-top:1.5rem}
.status{max-width:34rem; color:var(--sourd); border-left:3px solid var(--foret); padding-left:1rem; margin-top:1.5rem}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* La table et la balance : un fléau, deux plateaux */
.beam{position:relative; height:2.75rem; margin-top:2.5rem}
.beam::before{content:""; position:absolute; left:calc(25% - var(--ecart)/4 - 1px); right:calc(25% - var(--ecart)/4 - 1px); top:.5rem; height:2px; background:var(--foret)}
.beam::after{content:""; position:absolute; left:50%; top:.5rem; width:0; height:0; translate:-50% 0;
  border-left:.6rem solid transparent; border-right:.6rem solid transparent; border-top:.85rem solid var(--foret)}
.pans{display:grid; grid-template-columns:1fr 1fr; gap:var(--ecart); align-items:stretch}
.pan{position:relative; background:var(--surface); border:1px solid var(--ligne); border-bottom:3px solid var(--foret);
  border-radius:4px 4px 14px 14px; padding:clamp(1.25rem,2.5vw,2rem)}
.pan::before{content:""; position:absolute; left:50%; bottom:100%; width:2px; height:2.25rem; background:var(--foret); translate:-50% 0}
table{width:100%; border-collapse:collapse}
caption,.pan h3{font-size:1.125rem; line-height:1.15; font-weight:650; text-align:left; padding:0 0 .75rem; letter-spacing:-.01em}
th,td{text-align:left; vertical-align:top; padding:.6rem .75rem .6rem 0; border-top:1px solid var(--ligne)}
thead th{font-size:.875rem; font-weight:500; color:var(--sourd); border-top:0; padding-top:0}
tbody th{font-weight:500; color:var(--sourd); white-space:nowrap}
td.num,th.num{text-align:right; padding-right:0}
.aisles{display:grid; gap:1.25rem}
.aisle h4{font-size:.875rem; font-weight:500; color:var(--sourd); padding-bottom:.4rem; border-bottom:1px solid var(--ligne)}
.aisle ul{list-style:none; margin:0; padding:0; columns:2; column-gap:1.5rem}
.aisle li{display:flex; justify-content:space-between; gap:.75rem; padding:.3rem 0; break-inside:avoid; font-size:.9688rem}
.aisle li .num{color:var(--sourd)}

.what{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem clamp(1.5rem,4vw,3.5rem); margin:1.5rem 0 0}
.what dt{font-weight:650; font-size:1.125rem; margin-bottom:.35rem}
.what dd{margin:0; color:var(--sourd); max-width:30rem}

.prices{margin:1.5rem 0; background:var(--surface); border:1px solid var(--ligne); border-radius:6px}
.prices th,.prices td{padding:.9rem 1rem}
.prices thead th{padding-top:.9rem; background:var(--teinte)}
.prices tbody th{color:var(--encre); font-weight:650}
.prices td:last-child{font-weight:650; min-width:11rem}

.plain{margin:0; padding-left:1.1rem}
.plain li{margin-bottom:.6rem}
.facts{display:grid; gap:.5rem; margin:1.25rem 0 0}
.facts div{display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:1rem}
.facts dt{color:var(--sourd)}
.facts dd{margin:0}
.more{margin:1.5rem 0 0}

.doc{max-width:var(--mesure); padding-block:clamp(2rem,6vw,4rem)}
.doc h1{font-size:clamp(2rem,5vw,3rem); margin-bottom:1.5rem; max-width:none}
.doc h2{font-size:1.25rem; margin:2.25rem 0 .6rem}

.bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; padding-block:2rem 3rem;
  border-top:1px solid var(--ligne); color:var(--sourd); font-size:.9375rem}
.bottom p{margin:0; padding-block:.5rem}

@media (max-width:52rem){
  .beam{display:none}
  .pans{grid-template-columns:1fr; margin-top:2rem}
  .pan::before{display:none}
  .what{grid-template-columns:1fr}
}
@media (max-width:34rem){
  .aisle ul{columns:1}
  .prices thead{position:absolute; left:-999rem}
  .prices tr{display:block; padding:.9rem 1rem; border-top:1px solid var(--ligne)}
  .prices tbody tr:first-child{border-top:0}
  .prices th,.prices td{display:block; padding:.15rem 0; border:0; min-width:0}
  .facts div{grid-template-columns:1fr; gap:0}
}
@media print{
  body{background:#fff}
  .top nav,.bottom nav,.skip{display:none}
}