/* ============================================================
   Feuille de style des pages légales.

   Les deux pages existantes — invitation et lien invité — portent leur style
   en ligne, parce qu'elles sont autonomes et qu'un aller-retour réseau de plus
   retarderait ce que leur destinataire vient chercher. Les pages légales, elles,
   sont trois et se ressemblent : un fichier partagé évite d'avoir à corriger
   trois fois la même chose, et personne n'arrive ici pressé.

   Mêmes tokens que la charte, à l'identique.
   ============================================================ */

:root {
  --sable: #F6EFE4;
  --sable-clair: #FDFAF4;
  --bois: #2B1D14;
  --terre-douce: #5B4433;
  --argile: #8A6A4E;
  --lin: #E4D6C2;
  --lin-fonce: #D9C7AF;
  --sable-attenue: #E8DBCB;
  --sable-chaud: #C9A883;
  --terre-cuite: #D9743F;
  --braise: #A8492A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Marges systeme : la page se lit aussi sur un telephone a encoche. */
  padding: calc(32px + env(safe-area-inset-top, 0px)) 20px
           calc(48px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  background: var(--sable);
  color: var(--bois);
  /* Corps jamais sous 15 px (charte). */
  font: 400 16px/1.6 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
}

/* Plus large que les pages d'arrivee : on lit ici, on n'agit pas. */
main { width: 100%; max-width: 620px; }

.logo { display: block; width: 44px; height: 44px; }

h1 {
  margin: 28px 0 0;
  font: 600 clamp(30px, 8vw, 38px)/1.08 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.03em;
}

h2 {
  margin: 40px 0 0;
  font: 600 21px/1.25 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

h3 {
  margin: 24px 0 0;
  font: 600 17px/1.3 "Instrument Sans", system-ui, sans-serif;
}

p, li { margin: 12px 0 0; color: var(--terre-douce); }
main > p:first-of-type { color: var(--bois); font-size: 17px; }

ul { margin: 12px 0 0; padding-left: 20px; }
li { margin: 8px 0 0; }

strong { color: var(--bois); font-weight: 600; }

a { color: var(--braise); }
a:active { color: #7A3319; }

.label {
  font: 400 11px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--argile);
}

.maj { margin-top: 12px; font-size: 15px; color: var(--argile); }

.carte {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--lin);
  border-radius: 22px;
  background: var(--sable-clair);
}
.carte p:first-child { margin-top: 0; }

/* L'unique aplat sombre de la page, reserve au contenu du moment (charte). */
.aplat {
  margin-top: 28px;
  padding: 24px;
  border-radius: 22px;
  background: var(--bois);
  color: var(--sable-clair);
}
.aplat .label { color: var(--sable-chaud); }
.aplat p { color: var(--sable-attenue); }
.aplat strong { color: var(--sable-clair); }
.aplat a { color: var(--sable-chaud); }

/* Ce que l'exploitant doit completer avant publication. Volontairement
   voyant : une mention legale laissee en gabarit est pire que pas de page. */
.a_completer {
  display: inline-block;
  padding: 1px 7px;
  border: 1px dashed var(--braise);
  border-radius: 10px;
  color: var(--braise);
  font: 400 14px/1.5 "JetBrains Mono", ui-monospace, monospace;
}

table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
th, td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--lin);
  color: var(--terre-douce);
}
th { color: var(--bois); font-weight: 600; }

/* Les tableaux sont la seule chose autorisee a deborder, dans leur propre
   conteneur : le corps de la page ne defile jamais horizontalement. */
.large { overflow-x: auto; }

footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--lin);
  font-size: 15px;
  color: var(--argile);
}
footer a { margin-right: 16px; display: inline-block; }

@media (prefers-color-scheme: dark) {
  /* La charte ne prevoit qu'un theme, clair. On force le fond plutot que de
     laisser le navigateur inverser un texte brun sur sable. */
  body { background: var(--sable); color: var(--bois); }
}