/*
 * Les pages de droit de la Vallée : mentions légales et conditions générales.
 *
 * Elles ne partagent pas `style.css`, qui bloque le défilement du document
 * (`overflow:hidden`) parce que le jeu occupe tout l'écran. Ici on veut une
 * page qui se lit, qui s'imprime et qui se copie : un texte, une colonne, la
 * même encre et le même crème que le reste de la Vallée.
 */
:root{
  --encre:#241f1a; --encre-doux:#6b6055; --creme:#f7f3ea;
  --bord:rgba(36,31,26,.14); --accent:#3f7f4a; --alerte:#c0532f;
  --r:14px;
}
*{box-sizing:border-box}
html{background:var(--creme)}
body{
  margin:0;padding:0 20px 72px;background:var(--creme);color:var(--encre);
  font:16px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
.feuille{max-width:700px;margin:0 auto}

.tete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0}
.marque{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.015em;color:inherit;text-decoration:none}
.marque svg{width:24px;height:24px;fill:currentColor}
.tete nav{display:flex;gap:14px;font-size:14px}
.tete nav a{color:var(--encre-doux)}
.tete nav a[aria-current="page"]{color:var(--encre);font-weight:600}

h1{font-size:clamp(28px,5vw,36px);line-height:1.15;letter-spacing:-.025em;margin:38px 0 10px}
.chapeau{font-size:17px;color:var(--encre-doux);margin:0 0 6px}
.date{font-size:13.5px;color:var(--encre-doux);margin:0 0 4px}

h2{font-size:20px;letter-spacing:-.015em;margin:38px 0 10px;scroll-margin-top:18px}
h3{font-size:16px;margin:22px 0 6px}
p,li{margin:0 0 12px}
li{margin-bottom:7px}
ul{padding-left:22px}
a{color:var(--accent)}
a:hover{color:var(--encre)}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--bord);margin:34px 0}

/* L'état civil de l'éditeur : deux colonnes sur écran large, une liste sur
   téléphone. Rien à styliser de plus, ce sont des faits. */
.etat{display:grid;grid-template-columns:190px 1fr;gap:6px 18px;margin:0 0 14px;font-size:15.5px}
.etat dt{color:var(--encre-doux)}
.etat dd{margin:0}
@media (max-width:560px){
  .etat{grid-template-columns:1fr;gap:2px}
  .etat dt{margin-top:10px;font-size:13.5px}
}

/* L'encadré : ce qu'on ne veut pas qu'un lecteur pressé rate (l'âge, la
   rétractation, la mort du nain). Une bordure à gauche, pas une alarme. */
.note{border-left:3px solid var(--bord);padding:2px 0 2px 16px;margin:16px 0;color:var(--encre-doux)}
.note strong{color:var(--encre)}
.note.attention{border-left-color:var(--alerte)}

.sommaire{border:1px solid var(--bord);border-radius:var(--r);padding:16px 20px;margin:24px 0 6px;background:rgba(255,255,255,.5)}
.sommaire p{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--encre-doux);margin:0 0 8px}
.sommaire ol{margin:0;padding-left:20px;font-size:15px}
.sommaire li{margin-bottom:4px}

.pied{margin-top:44px;padding-top:18px;border-top:1px solid var(--bord);font-size:14px;color:var(--encre-doux);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.pied a{color:var(--encre-doux)}

@media print{
  body{padding:0;font-size:11.5pt}
  .tete nav,.sommaire{display:none}
  a{color:inherit;text-decoration:none}
}