:root{
  /* Les noms de l'ancienne charte, rattachés à « La lumière ». */
  --encre:var(--texte);--encre-douce:var(--texte-doux);--gris:var(--texte-faible);
  --titre:var(--texte);--filet:var(--trait);--papier-creuse:var(--fond-creux);
  --sora:var(--f-titre);--mono:var(--f-technique);
  --ambre:var(--accent);--ambre-sombre:var(--accent);
}
/* Pages légales : conditions générales, confidentialité, mentions légales.
   S'appuie sur ouraya.css et vente.css (barre, pied, jetons des deux modes) et
   n'ajoute que la mise en page de lecture. Aucune couleur en dur hors
   impression : le mode sombre suit tout seul.

   Le texte de ces pages est généré depuis docs/legal/*.md, mot pour mot.
   Toute correction se fait d'abord dans le Markdown. */

/* Sora, variable de 100 à 800, pour les titres. Servie depuis le domaine. */
@font-face{
  font-family:Sora;
  src:url(/fonts/sora-latin-wght-normal.woff2) format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC;
}
@font-face{
  font-family:Sora;
  src:url(/fonts/sora-latin-ext-wght-normal.woff2) format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02AF,U+1E00-1EFF;
}

:root { --sora: Sora, var(--titre); }

/* Une colonne de lecture d'environ soixante-dix caractères, centrée. Le « ch »
   se mesure sur la police du corps, d'où la taille posée ici. */
.w.legal {
  max-width: calc(70ch + 2 * var(--marge));
  font-size: 17px;
}

/* ------------------------------------------------------------------ en-tête */

.hero.legal-hero { padding-block: 64px 36px; }

.legal-hero h1 {
  max-width: 26ch;
  font: 600 clamp(30px, 4.4vw, 44px)/1.14 var(--sora);
  letter-spacing: -.028em;
  text-wrap: balance;
}

.legal-version {
  margin: 18px 0 0;
  font: 400 13px/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--gris);
}

/* L'avertissement qui précède le texte (état du service à la date de la version). */
.avis {
  margin: 0 0 34px;
  padding: 18px 22px;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--ambre);
  border-radius: 0 14px 14px 0;
  background: var(--papier-creuse);
}
.avis p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--encre); }

/* ----------------------------------------------------------------- sommaire */

.sommaire {
  margin: 0 0 20px;
  padding: 22px 24px 18px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: var(--surface);
}

.sommaire-titre {
  margin: 0 0 14px;
  font: 600 12px/1 var(--sora);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 250px;
  column-gap: 30px;
}

.sommaire li { break-inside: avoid; margin: 0 0 7px; font-size: 15px; line-height: 1.4; }

.sommaire a {
  display: flex;
  gap: .5em;
  color: var(--encre-douce);
  text-decoration: none;
}
.sommaire a:hover { color: var(--encre); }
.sommaire a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--ambre); }
.sommaire .num { flex: 0 0 auto; min-width: 1.6em; }

/* -------------------------------------------------------------------- texte */

.legal-texte { padding-bottom: 88px; }

.legal-texte p,
.legal-texte li {
  color: var(--encre-douce);
  line-height: 1.7;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  overflow-wrap: break-word;
}
.legal-texte p { margin: 0 0 1em; }
.legal-texte strong { color: var(--encre); font-weight: 600; }

.legal-texte h2 {
  margin: 56px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--filet);
  font: 600 clamp(21px, 2.6vw, 25px)/1.25 var(--sora);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.legal-texte h3 {
  margin: 36px 0 12px;
  font: 600 18px/1.3 var(--sora);
  letter-spacing: -.012em;
}

/* Le numéro d'article, dans le titre et dans le sommaire. */
.num {
  color: var(--ambre-sombre);
  font-variant-numeric: tabular-nums;
}

/* Le numéro d'alinéa, en tête de paragraphe : « 2.1. ». */
.alinea {
  color: var(--encre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* La barre de navigation reste collée en haut : l'ancre ne doit pas finir dessous. */
.legal-texte [id] { scroll-margin-top: 96px; }

/* L'alinéa visé par un lien se signale, sans décaler la mise en page. */
.legal-texte p:target {
  background: var(--papier-creuse);
  outline: 8px solid var(--papier-creuse);
  border-radius: 2px;
}

.legal-texte a,
.avis a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--ambre);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-texte a:hover,
.avis a:hover { text-decoration-thickness: 2px; }

.legal-texte code {
  font-family: var(--mono);
  font-size: .86em;
  padding: .06em .34em;
  border: 1px solid var(--filet);
  border-radius: 5px;
  background: var(--papier-creuse);
  color: var(--encre);
  white-space: nowrap;
}

.legal-texte ul,
.legal-texte ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.legal-texte li { margin: 0 0 .45em; padding-left: .2em; }
.legal-texte li::marker { color: var(--ambre-sombre); }
.legal-texte ol li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Les encadrés cités (cases à cocher, garantie légale de conformité). La règle
   de ouraya.css, pensée pour une citation en grand, est ramenée au corps. */
.legal-texte blockquote {
  margin: 1.2em 0 1.4em;
  padding: 18px 22px;
  border-left: 3px solid var(--ambre);
  border-radius: 0 12px 12px 0;
  background: var(--papier-creuse);
  font: inherit;
  color: var(--encre);
}
.legal-texte blockquote p { color: var(--encre); font-size: 16px; line-height: 1.64; }
.legal-texte blockquote p:last-child { margin-bottom: 0; }

/* mouvement.js voile toutes les citations pour les révéler au défilement. Sur
   un texte qu'on atteint par une ancre, l'effet retarde la lecture : coupé. */
.legal-texte .voile { opacity: 1; transform: none; }

.legal-texte hr { border: 0; border-top: 1px solid var(--filet); margin: 64px 0 0; }
.legal-texte hr + h2 { border-top: 0; margin-top: 40px; padding-top: 0; }

/* ----------------------------------------------------------------- tableaux */

.tableau {
  margin: 1.3em 0 1.6em;
  border: 1px solid var(--filet);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.52; }

.tableau th {
  text-align: left;
  vertical-align: bottom;
  padding: 11px 14px;
  background: var(--papier-creuse);
  border-bottom: 1px solid var(--filet);
  font: 600 13px/1.35 var(--sora);
  letter-spacing: .01em;
  color: var(--encre);
}

.tableau td {
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--filet);
  color: var(--encre-douce);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.tableau tr:last-child td { border-bottom: 0; }
.tableau td:first-child { color: var(--encre); font-weight: 500; }
.tableau code { white-space: normal; }

/* Les tableaux longs débordent de la colonne sur un écran large : quatre
   colonnes de texte dans soixante-dix caractères se liraient mot par mot. */
@media screen and (min-width: 1000px) {
  .tableau.large { margin-inline: calc(50% - min(470px, 50vw - 40px)); }
  .tableau.large th:first-child,
  .tableau.large td:first-child { min-width: 10.5em; }
}

/* Sur un téléphone, chaque ligne devient une fiche : l'intitulé de colonne
   passe au-dessus de chaque valeur. */
@media screen and (max-width: 700px) {
  .tableau { border-radius: 10px; }
  .tableau table,
  .tableau tbody,
  .tableau tr,
  .tableau td { display: block; width: 100%; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tableau tr { padding: 12px 0 10px; border-bottom: 1px solid var(--filet); }
  .tableau tr:last-child { border-bottom: 0; }
  .tableau td { padding: 3px 16px 7px; border: 0; }
  .tableau td::before {
    content: attr(data-etiquette);
    display: block;
    margin-bottom: 2px;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .tableau td:first-child { font-weight: 600; }
}

@media (max-width: 820px) {
  .hero.legal-hero { padding-block: 44px 26px; }
  .legal-texte h2 { margin-top: 44px; padding-top: 24px; }
}

@media (max-width: 480px) {
  .w.legal { font-size: 16px; }
  .sommaire { padding: 18px 18px 14px; }
  .avis { padding: 16px 18px; }
  .legal-texte blockquote { padding: 16px 16px; }
  .legal-texte blockquote p { font-size: 15px; }
}

/* --------------------------------------------------------------- impression */

@media print {
  :root,
  :root[data-theme="sombre"] {
    --encre: #000; --encre-douce: #1d1d1d; --gris: #4a4a4a;
    --ambre: #9a9a9a; --ambre-sombre: #5a4214;
    --papier: #fff; --papier-creuse: #f3f3f3; --filet: #c8c8c8; --surface: #fff;
  }
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .barre, footer, .evitement, .progression, .sommaire { display: none !important; }
  .hero.legal-hero { padding: 0 0 10pt; }
  .hero .lueur { display: none; }
  .w, .w.legal { max-width: none; padding-inline: 0; font-size: 10.5pt; }
  .legal-hero h1 { font-size: 20pt; max-width: none; }
  .legal-texte { padding-bottom: 0; }
  .legal-texte h2 { font-size: 14pt; margin: 18pt 0 6pt; padding-top: 0; border-top: 0; break-after: avoid; page-break-after: avoid; }
  .legal-texte h3 { font-size: 12pt; margin: 12pt 0 4pt; break-after: avoid; page-break-after: avoid; }
  .legal-texte p, .legal-texte li { line-height: 1.5; orphans: 3; widows: 3; }
  .legal-texte a, .avis a { color: inherit; text-decoration: none; }
  .legal-texte code { border: 0; background: none; padding: 0; }
  .legal-texte blockquote, .avis, .tableau tr { break-inside: avoid; page-break-inside: avoid; }
  .legal-texte blockquote { background: none; }
  .tableau.large { margin-inline: 0; }
  .tableau table { font-size: 9.5pt; }
  .voile { opacity: 1 !important; transform: none !important; }
}