:root { --nuit: #F4F0E9; --nuit-2: #E9E3D8; --ivoire: #1B1C1F; --ivoire-doux: #5B554C; --champagne: #8C6631; --filet: rgba(138,107,62,.35); --filet-doux: rgba(27,28,31,.12);
  --didone: 'Bodoni Moda','Didot','Bodoni 72',Georgia,serif; --texte: 'Jost','Futura','Helvetica Neue',Arial,sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--nuit); color: var(--ivoire); font-family: var(--texte); font-weight: 300; font-size: 17px; line-height: 1.75; padding-inline: clamp(18px,5vw,72px); }
a { color: inherit; }
.page { max-width: 1240px; margin: 0 auto; }
.label { font-size: 11px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase; color: var(--champagne); margin: 0; }
h1, h2, h3 { font-family: var(--didone); font-weight: 400; margin: 0; text-wrap: balance; }
h1 em { font-style: italic; color: var(--champagne); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 1px solid var(--champagne); color: var(--ivoire); text-decoration: none; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.btn.plein { background: var(--champagne); color: var(--nuit); }
.btn:hover { background: var(--ivoire); color: var(--nuit); border-color: var(--ivoire); }
a:focus-visible, summary:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px; flex-wrap: wrap; }
.marque { display: flex; flex-direction: column; line-height: 1; gap: 4px; text-decoration: none; }
.marque span:first-child { font-family: var(--didone); font-style: italic; font-size: 17px; color: var(--ivoire-doux); }
.marque span:last-child { font-family: var(--didone); font-size: 25px; letter-spacing: .06em; }
.marque small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivoire-doux); margin-top: 6px; }
nav { display: flex; gap: 32px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--ivoire-doux); } nav a:hover { color: var(--champagne); }
main { padding-block: clamp(40px,7vw,90px) clamp(60px,9vw,120px); border-top: 1px solid var(--filet-doux); }
.entete h1 { font-size: clamp(42px,6.5vw,84px); line-height: 1.04; margin: 24px 0; }
.chapeau { max-width: 36em; color: var(--ivoire-doux); font-size: 19px; }
.liste-articles { list-style: none; margin: clamp(48px,7vw,90px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,340px),1fr)); gap: 0 48px; }
.liste-articles li { border-top: 1px solid var(--filet); }
.liste-articles a { display: flex; flex-direction: column; gap: 14px; padding: 32px 0 40px; text-decoration: none; }
.liste-articles h2 { font-size: clamp(26px,3vw,34px); line-height: 1.15; }
.liste-articles p { margin: 0; font-size: 15px; color: var(--ivoire-doux); }
.liste-articles a:hover h2 { color: var(--champagne); }
.lire { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); }
.article { max-width: 44rem; margin: 0 auto; }
.article h1 { font-size: clamp(36px,5.4vw,60px); line-height: 1.08; margin: 18px 0 20px; }
.article h2 { font-size: clamp(26px,3.4vw,36px); line-height: 1.15; margin: 56px 0 16px; }
.article p, .article li { color: var(--ivoire-doux); }
.article p { margin: 0 0 20px; }
.article strong { color: var(--ivoire); font-weight: 500; }
.article ul { padding-left: 20px; margin: 0 0 20px; } .article li { margin-bottom: 8px; }
.article .chapeau { font-size: 20px; margin: 0 0 12px; max-width: none; color: var(--ivoire); }
.fil { margin: 0 0 28px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; } .fil a { text-decoration: none; color: var(--ivoire-doux); }
.meta { font-size: 13px; color: var(--ivoire-doux); margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--filet-doux); }
details { border-top: 1px solid var(--filet-doux); padding: 18px 0; } details:last-of-type { border-bottom: 1px solid var(--filet-doux); }
summary { cursor: pointer; font-family: var(--didone); font-size: 20px; color: var(--ivoire); list-style: none; }
summary::-webkit-details-marker { display: none; } summary::after { content: "+"; float: right; color: var(--champagne); }
details[open] summary::after { content: "–"; } details p { margin: 12px 0 0; }
.invitation { margin: 64px 0 24px; padding: clamp(24px,4vw,40px); border: 1px solid var(--filet); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.invitation p { margin: 0; font-family: var(--didone); font-size: clamp(20px,2.4vw,24px); line-height: 1.4; color: var(--ivoire); }
.avertissement { font-size: 13px; }
.suite { max-width: 44rem; margin: 56px auto 0; } .suite ul { list-style: none; margin: 14px 0 0; padding: 0; }
.suite a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--filet-doux); text-decoration: none; } .suite .t { font-family: var(--didone); font-size: 22px; }
footer { padding-block: 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12.5px; color: var(--ivoire-doux); border-top: 1px solid var(--filet-doux); }
footer p { margin: 0; max-width: 60em; } .pied-marque { font-family: var(--didone); font-size: 20px; color: var(--ivoire); } .pied-liens { display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 700px) { nav { gap: 18px 22px; } body { font-size: 16px; } }
.couverture, .illustration { margin: 28px 0 8px; } .couverture img, .illustration img, .vignette { display: block; width: 100%; height: auto; }
.couverture img { border: 1px solid var(--filet); } .illustration img { border: 1px solid var(--filet-doux); }
.vignette { border: 1px solid var(--filet-doux); margin-bottom: 4px; }
.verdict { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px !important; }
.verdict span { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--champagne); }
.verdict b { font-family: var(--didone); font-style: italic; font-weight: 400; font-size: 24px; color: var(--ivoire); }
.illustration + p { margin-top: 22px; }