:root {
  --bg: #F2F1EE;
  --card: #FFFFFF;
  --line: #DFDCD7;
  --fg: #17161A;
  --muted: #6A6770;
  --dim: #97939C;
  --you: #C1553A;
  --todo-bg: #FDF0D5;
  --todo-fg: #7A5A12;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090C14;
    --card: #121722;
    --line: #202634;
    --fg: #E7EAF0;
    --muted: #868E9E;
    --dim: #525968;
    --you: #E28468;
    --todo-bg: #2A2312;
    --todo-fg: #E0C077;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 64rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

/* L'en-tête : le nom, et la bascule de langue. Elle porte une bordure parce
   qu'un mot gris en haut à droite ne se voit pas — c'était l'un des sept
   manques relevés dans docs/pages-legales.html. */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

header.top .nom {
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-decoration: none;
}

header.top .langue {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.2rem 0.7rem;
  transition: color .15s, border-color .15s;
}
header.top .langue:hover { color: var(--you); border-color: var(--you); }

/* Le chapeau : étiquette de famille, titre, pastille de date. */
.chapeau { padding: 2.5rem 0 1.75rem; border-bottom: 1px solid var(--line); }

.kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--you);
}

h1 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0;
  font-weight: 700;
  max-width: 18ch;
}

.maj {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
}
.maj .todo { border-radius: 3px; }

/* Le corps : le rail, puis le texte. */
.corps { display: grid; grid-template-columns: 12.5rem 1fr; gap: 3.5rem; padding-top: 2.5rem; }

/* Sans rail, l'article deviendrait le premier élément de la grille et
   atterrirait dans la piste de 12,5 rem prévue pour le sommaire — le texte se
   retrouve écrasé sur 200 px avec les trois quarts de la page vides. C'est le
   cas des deux accueils, qui n'ont que deux sections et donc pas de sommaire. */
.corps.seul { grid-template-columns: 1fr; }

.rail { position: sticky; top: 1.75rem; align-self: start; max-height: calc(100vh - 3.5rem); overflow-y: auto; }
.rail .titre {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.75rem;
}
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0; }
.rail a {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  padding: 0.3rem 0 0.3rem 0.7rem;
  border-left: 2px solid var(--line);
  transition: color .15s, border-color .15s;
}
.rail a:hover { color: var(--fg); }
.rail a[aria-current="true"] { color: var(--you); border-left-color: var(--you); }

/* `min-width: 0` n'est pas décoratif. Le minimum automatique d'un élément de
   grille vaut son contenu intrinsèque : sans cette ligne, le `min-width: 28rem`
   du tableau de la politique de confidentialité gonfle la piste `1fr` à 448 px
   et fait défiler la page entière à l'horizontale sur téléphone. */
article { max-width: 38rem; min-width: 0; }
.rail { min-width: 0; }

h2 {
  font-size: 1.22rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 3rem 0 0.85rem;
  font-weight: 680;
  scroll-margin-top: 1.5rem;
}
article > h2:first-child { margin-top: 0; }

h3 {
  font-size: 0.98rem;
  margin: 2rem 0 0.6rem;
  font-weight: 650;
  color: var(--muted);
  scroll-margin-top: 1.5rem;
}

/* L'ancre de section : discrète, et elle existe. Sans elle, impossible
   d'écrire « voir la section 8 » depuis une réponse au support. */
.ancre {
  margin-left: 0.4rem;
  color: var(--dim);
  text-decoration: none;
  font-weight: 400;
  opacity: .4;
  transition: opacity .15s;
}
/* Visible par défaut, et effacée seulement là où le survol existe pour la
   ramener. L'inverse laissait l'ancre introuvable partout où la requête
   `(hover: none)` n'est pas honorée, ce qui inclut plus de contextes qu'on ne
   croit. */
@media (hover: hover) {
  .ancre { opacity: 0; }
  h2:hover .ancre, .ancre:focus { opacity: 1; }
}

p { margin: 0 0 1.1rem; }
a { color: var(--you); text-underline-offset: 2px; }
strong { font-weight: 640; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.45rem; }
li::marker { color: var(--dim); }

blockquote {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

/* Les tableaux portent l'essentiel de la politique de confidentialité. Sur
   téléphone ils défilent seuls plutôt que de pousser la page. */
.tableau { overflow-x: auto; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
th, td { text-align: left; vertical-align: top; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }

/* Ce qui reste à remplir doit se voir de loin. Une page publiée qui en contient
   encore est une page qu'on n'aurait pas dû publier. */
.todo { background: var(--todo-bg); color: var(--todo-fg); border-radius: 4px; padding: 0.05em 0.2em; font-style: normal; }

footer.bas { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
footer.bas nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
footer.bas a { color: var(--muted); text-decoration: none; }
footer.bas a:hover, footer.bas a[aria-current] { color: var(--you); }
footer.bas .fin { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; color: var(--dim); font-size: 0.8rem; }
footer.bas .haut { color: var(--dim); }

/* Le sommaire de l'accueil, qui sert aussi d'URL de support. */
.sommaire { list-style: none; padding: 0; margin: 0 0 2rem; }
.sommaire li { margin-bottom: 0.6rem; }
.sommaire a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
}
.sommaire a:hover { border-color: var(--you); }
.sommaire span { display: block; font-weight: 400; font-size: 0.88rem; color: var(--muted); margin-top: 0.15rem; }

/* Sous 62rem, le rail cesse d'être une colonne et devient un sommaire borné en
   tête de page. Borné : quatorze sections dépliées repousseraient le texte
   sous la ligne de flottaison. */
@media (max-width: 62rem) {
  .corps { grid-template-columns: 1fr; gap: 2rem; }
  .rail {
    position: static;
    max-height: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.9rem 1rem;
  }
  .rail ol { max-height: 10.5rem; overflow-y: auto; }
  .rail a { border-left-width: 2px; padding-left: 0.6rem; }
  article { max-width: none; }
  h1 { max-width: none; }
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .page { padding: 1.25rem 1rem 3rem; }
}

/* Une CGU s'imprime et se joint à un dossier. Elle sortait sur fond noir. */
@media print {
  :root { --bg: #FFF; --card: #FFF; --line: #CCC; --fg: #000; --muted: #333; --dim: #666; --you: #000; --todo-bg: #FFF; --todo-fg: #000; }
  body { font-size: 11pt; }
  .page { max-width: none; padding: 0; }
  header.top .langue, .rail, footer.bas nav, .ancre, .haut { display: none; }
  .corps { display: block; padding-top: 1.5rem; }
  article { max-width: none; }
  h2, h3 { break-after: avoid; }
  table, blockquote, li { break-inside: avoid; }
  .todo { border: 1px solid #000; }
  article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}