/* Pages secondaires du site (mentions légales, page introuvable) : la même
   charte que l'accueil, réduite à ce qu'une page de texte utilise. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("polices/archivo-500-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("polices/sourcesans3-400-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("polices/sourcesans3-italique-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/ibmplexmono-500.woff2") format("woff2"); }

:root {
  --kyanos: #0B1F2A; --fond: #F4F7F7; --surface: #FFFFFF; --encre: #0B1F2A; --douce: #4A626D;
  --ligne: #D6E1E3; --cyan: #06B6D4; --cyan-texte: #0E7490; --vert: #047857; --ambre: #B45309;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #071318; --surface: #0E2027; --encre: #E4EEF0; --douce: #8FA8B2; --ligne: #1D3A45;
    --cyan: #22D3EE; --cyan-texte: #22D3EE; --ambre: #F59E0B;
  }
}
:root[data-theme="dark"] {
  --fond: #071318; --surface: #0E2027; --encre: #E4EEF0; --douce: #8FA8B2; --ligne: #1D3A45;
  --cyan: #22D3EE; --cyan-texte: #22D3EE; --ambre: #F59E0B;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column;
}
h1, h2 { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.08; font-weight: 700; }
h2 { font-size: 21px; font-weight: 600; margin-top: 38px; }
p { margin: 12px 0 0; }
a { color: var(--cyan-texte); }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.large { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 22px; }
.texte { max-width: 66ch; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

.barre { background: var(--kyanos); border-bottom: 2px solid var(--cyan); }
.barre .large { display: flex; align-items: center; gap: 14px; height: 62px; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marque .nom { font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.marque .nom span { font-weight: 500; color: #7FD8E6; }

main { flex: 1; padding: 56px 0 72px; }
.oeil {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan-texte); margin-bottom: 14px; display: block;
}
.chapo { font-size: 19px; color: var(--douce); margin-top: 16px; }
dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; }
dt { color: var(--douce); }
dd { margin: 0; }
@media (max-width: 559px) { dl { grid-template-columns: 1fr; gap: 2px; } dt { margin-top: 10px; } }
.a-completer {
  color: var(--ambre); font-family: "IBM Plex Mono", monospace; font-size: 15px;
  border: 1px dashed currentColor; border-radius: 6px; padding: 0 6px;
}

.cta {
  display: inline-flex; align-items: center; gap: 9px; background: var(--vert); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 16px; padding: 13px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  margin-top: 28px;
}
.cta:hover { background: #05614a; }
.cta:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.cta.discret { background: transparent; color: var(--cyan-texte); border-color: var(--ligne); margin-left: 10px; }

footer { border-top: 1px solid var(--ligne); background: var(--surface); padding: 26px 0; color: var(--douce); font-size: 15px; }
footer .large { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer a { color: inherit; }
footer .droite { margin-left: auto; }