/* Pages légales de la maquette : même palette que l'accueil, mise en page de lecture. */
:root {
  --noir: #0b0908; --carte: #15110f; --ligne: rgba(239, 230, 214, .14);
  --ivoire: #efe6d6; --ivoire-doux: #b9ae9c; --peche: #fad49b; --neon: #ff4fb8;
  --titre: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;
  --gouttiere: clamp(16px, 4vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--noir); color: var(--ivoire); font: 400 clamp(16px, 1.05vw, 19px)/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ivoire); text-decoration: none; border-bottom: 1px solid rgba(239, 230, 214, .35); transition: color .3s, border-color .3s; }
a:hover, a:focus-visible { color: var(--peche); border-color: var(--peche); }
.a-definir { color: var(--neon); border-bottom: 1px dashed currentColor; font-style: normal; }

.entete { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px var(--gouttiere); border-bottom: 1px solid var(--ligne); }
.entete a { border: 0; }
.marque { display: flex; align-items: center; gap: 14px; font: 400 15px/1.2 var(--sans); }
.marque img { width: 48px; height: 48px; }
.marque strong { display: block; font: 700 18px/1.2 var(--titre); color: var(--peche); }
.retour { font-size: 14px; letter-spacing: .08em; }
.retour::before { content: "\2190\00a0\00a0"; }

main { max-width: 78ch; margin: 0 auto; padding: clamp(48px, 7vw, 110px) var(--gouttiere) clamp(64px, 8vw, 130px); }
.surtitre { font: 500 12px/1.5 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--peche); }
h1 { font: 500 clamp(40px, 5.4vw, 84px)/.95 var(--titre); letter-spacing: -.04em; color: var(--peche); margin: 14px 0 18px; }
.maj { color: var(--ivoire-doux); font-size: .9em; margin: 0 0 32px; }
h2 { font: 500 clamp(22px, 1.9vw, 32px)/1.2 var(--titre); letter-spacing: -.02em; color: var(--ivoire); margin: 2.4em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--ligne); }
h3 { font: 500 1em/1.4 var(--sans); color: var(--peche); margin: 1.6em 0 .3em; }
p, ul, ol, dl { margin: 0 0 1em; color: var(--ivoire-doux); }
strong { color: var(--ivoire); font-weight: 500; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
dl { display: grid; grid-template-columns: minmax(10em, 1fr) 2fr; gap: .5em 1.5em; }
dt { color: var(--ivoire); }
dd { margin: 0; }
.projet { border-left: 3px solid var(--neon); background: rgba(255, 79, 184, .07); padding: 14px 18px; margin: 0 0 8px; }
.projet p { margin: 0; color: var(--ivoire); font-size: .92em; }
.defil { overflow-x: auto; margin: 0 0 1em; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92em; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ligne); color: var(--ivoire-doux); }
th { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--peche); }
.bouton-texte { background: none; border: 0; border-bottom: 1px solid rgba(239, 230, 214, .35); padding: 0; cursor: pointer; color: var(--ivoire); font: inherit; }
.bouton-texte:hover, .bouton-texte:focus-visible { color: var(--peche); border-color: var(--peche); }

.pied { border-top: 1px solid var(--ligne); padding: 26px var(--gouttiere) 60px; font-size: 14px; color: var(--ivoire-doux); }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 14px; }
.pied a { border: 0; }
.pied a[aria-current="page"] { color: var(--peche); }

@media (max-width: 600px) {
  dl { grid-template-columns: 1fr; gap: 0; }
  dd { margin-bottom: .8em; }
  .marque span { font-size: 13px; }
}