/* Les pages légales de Laborats : noir, la police du site, le logo au marqueur pour revenir. */
:root { --fond: #050505; --texte: #d9d9db; --clair: #fff; --gris: #8a8a90; --rouge: #ff2a1f; --trait: rgba(255, 255, 255, 0.12); }
* { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 13px/1.75 "JetBrains Mono", ui-monospace, Menlo, monospace; -webkit-font-smoothing: antialiased; }
.page { max-width: 720px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left)); }
.haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 56px; }
.logo { display: inline-block; line-height: 0; }
.logo .marque { width: 144px; height: 53px; display: block; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55)); }
.liens { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.retour { color: var(--clair); text-decoration: none; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.retour:hover, .retour:focus-visible { opacity: 1; }
h1 { color: var(--clair); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; }
.maj { color: var(--gris); font-size: 11px; margin: 0 0 40px; }
h2 { color: var(--clair); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 40px 0 10px; padding-top: 24px; border-top: 1px solid var(--trait); }
/* les numéros, au marqueur rouge et entourés, comme ceux des tableaux de l'expérience */
h2 { display: flex; align-items: center; gap: 14px; }
h2 .no { position: relative; display: inline-block; padding: 0.32em 0.72em 0.26em; color: var(--rouge); font: 400 15px/1 "Permanent Marker", cursive; letter-spacing: 0; rotate: -4deg; }
h2 .no::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--rouge); border-radius: 50%; rotate: 2deg; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 18px; }
li { margin-bottom: 4px; }
a { color: var(--clair); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
a:hover { text-decoration-color: var(--rouge); }
strong { color: var(--clair); font-weight: 600; }
.pied { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--trait); color: var(--gris); font-size: 11px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { color: var(--gris); }
@media (max-width: 480px) { body { font-size: 12.5px; } h1 { font-size: 19px; } .haut { margin-bottom: 40px; } }