:root {
  --marine: #0b1a2e;
  --marine-nuit: #07111f;
  --laiton: #c9a24d;
  --blanc: #f7f5f0;
  --blanc-ombre: #eeeae2;
  --encre: #101a2b;
  --encre-douce: #5c6472;
  --filet: rgba(16, 26, 43, .14);
  --titre: "Montserrat", "Futura", "Helvetica Neue", Arial, sans-serif;
  --texte: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 16.5px; line-height: 1.7; font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
.barre { background: var(--marine); color: var(--blanc); }
.barre .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.barre img { height: 15px; width: auto; display: block; }
.barre a.retour { font-family: var(--titre); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: rgba(247,245,240,.8); }
.barre a.retour:hover { color: #fff; }
.wrap { max-width: 860px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
main { padding-block: clamp(48px, 7vw, 96px); }
.etiquette { font-family: var(--titre); font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--laiton); }
h1 { font-family: var(--titre); font-weight: 300; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; margin: 16px 0 0; }
.maj { margin-top: 14px; font-size: 14px; color: var(--encre-douce); }
h2 { font-family: var(--titre); font-weight: 500; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; margin: 44px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--encre); }
p, ul { margin: 14px 0 0; }
ul { padding-left: 20px; }
li + li { margin-top: 6px; }
strong { font-weight: 500; }
.completer { background: #fbeec9; padding: 1px 6px; font-weight: 500; }
dl { margin: 16px 0 0; display: grid; grid-template-columns: 200px 1fr; gap: 8px 20px; }
dt { font-weight: 500; }
dd { margin: 0; }
@media (max-width: 600px) { dl { grid-template-columns: 1fr; gap: 2px; } dd { margin-bottom: 10px; } }
.pied { background: var(--marine-nuit); color: rgba(247,245,240,.6); font-size: 13px; padding-block: 28px; }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; }