/* JoyTrain — design system des pages secondaires (contact, merci, CGU, confidentialité).
   Même langage visuel que l'accueil : papier + encre, Archivo étendu, labels mono. */
:root{
  --bg:#F5F0E6; --ink:#16130E; --mute:#6B655B;
  --orange:#FF5E3A; --orange-deep:#E04A26; --amber:#FF9F0A;
  --paper:#FFFDF8; --line:rgba(22,19,14,.16);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:var(--orange); color:#fff; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:2px; }

.d{ font-variation-settings:"wdth" 118; font-weight:900; text-transform:uppercase;
    letter-spacing:-.015em; line-height:.96; }
.mono{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }

.page{ max-width:820px; margin-inline:auto; padding:0 24px 80px; }

/* En-tête simple : logo + retour accueil */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:26px 0 22px;
  border-bottom:1px solid var(--line); margin-bottom:44px; }
.topbar img{ height:44px; }
.topbar .back{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--mute); }
.topbar .back:hover{ color:var(--orange); }

.kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; border:1.5px solid var(--ink);
  border-radius:999px; padding:8px 15px; background:var(--paper); }
h1.d{ margin-top:22px; font-size:clamp(34px,6vw,56px); }
h1.d .alt{ color:var(--orange); }
.meta{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute); }

.lead{ margin-top:18px; font-size:17px; color:var(--mute); max-width:620px; }
.lead b, .lead strong{ color:var(--ink); }

/* Corps de texte long (légal) */
.doc{ margin-top:34px; }
.doc h2{ font-variation-settings:"wdth" 112; font-weight:900; text-transform:uppercase;
  font-size:17px; letter-spacing:.01em; margin:2.2rem 0 .6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.doc h3{ font-weight:800; font-size:15.5px; margin:1.1rem 0 .3rem; }
.doc p, .doc li{ color:#45403A; font-size:15.5px; line-height:1.75; }
.doc ul{ list-style:square; padding-left:1.3rem; margin:.5rem 0; }
.doc li::marker{ color:var(--orange); }
.doc a{ color:var(--orange-deep); text-decoration:underline; text-underline-offset:3px; }
.doc strong{ color:var(--ink); }
.doc table{ width:100%; border-collapse:collapse; margin:.8rem 0; font-size:14px; }
.doc th, .doc td{ border:1px solid var(--line); padding:.6rem .65rem; text-align:left; vertical-align:top; color:#45403A; }
.doc th{ background:var(--paper); font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }

.fill{ background:#FFF1C6; border-radius:4px; padding:0 .3rem; font-weight:600; color:#7a5b00; }
.note{ margin-top:22px; background:#FFF6E3; border:1.5px solid var(--amber); border-radius:14px;
  padding:.95rem 1.05rem; color:#7a5b00; font-size:14px; line-height:1.65; }
.health{ background:#FDECEA; border:1.5px solid #E5484D; border-radius:14px;
  padding:.95rem 1.05rem; color:#8a2a22; font-size:14.5px; line-height:1.65; }

/* Cartes (contact) */
.card{ background:var(--paper); border:2px solid var(--ink); border-radius:18px; padding:24px;
  box-shadow:6px 6px 0 rgba(22,19,14,.85); }
.card h2, .card .card-title{ font-variation-settings:"wdth" 112; font-weight:900; text-transform:uppercase; font-size:17px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }
.tile{ background:var(--paper); border:1.5px solid var(--ink); border-radius:14px; padding:18px 18px 20px; }
.tile b{ font-variation-settings:"wdth" 112; font-weight:900; text-transform:uppercase; font-size:14.5px; display:block; }
.tile p{ margin-top:6px; font-size:14px; color:var(--mute); line-height:1.6; }

.btn{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; padding:16px 26px; border-radius:12px;
  border:2px solid var(--ink); background:var(--ink); color:#FFF6EC;
  box-shadow:5px 5px 0 rgba(22,19,14,.18);
  transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.btn:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink);
  transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(22,19,14,.22); }

/* Pied de page */
.pagefoot{ margin-top:64px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 26px; }
.pagefoot a{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute); text-decoration:none; }
.pagefoot a:hover{ color:var(--orange); }