/* =========================================================================
   CARRIA — pages annexes (mentions légales, politique de confidentialité)

   Même charte que la landing : mêmes jetons, même en-tête A0, même pied A11.
   Aucune valeur hexadécimale en dur, aucune ressource externe.
   Se charge APRÈS styles/tokens.css, styles/base.css et styles/A0-A11.css.
   ========================================================================= */

/* Bandeau de titre : dégradé lavande, comme le hero de la page (C5). */
.legal-tete {
  background: var(--bg-grad);
  padding-block: 56px 48px;
}

.legal-surtitre {
  margin-bottom: var(--sp-md);
}

.legal-intro {
  margin-top: var(--sp-base);
  max-width: 68ch;
  color: var(--muted);
}

/* Corps : fond blanc, colonne de lecture plafonnée (C4). */
.legal-corps {
  background: var(--surface-solid);
  padding-block: 64px 96px;
}

.legal-contenu {
  max-width: 760px;
}

.legal-section + .legal-section {
  margin-top: var(--sp-xxxl);
}

.legal-titre {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-md);
}

.legal-sous-titre {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}

.legal-corps p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.legal-corps p + p {
  margin-top: var(--sp-md);
}

.legal-liste {
  margin: var(--sp-md) 0 0;
  padding-left: var(--sp-lg);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.legal-liste li + li {
  margin-top: var(--sp-sm);
}

/* Liste de champs / de mentions : libellé en gras, valeur ou marqueur après. */
.legal-champs {
  margin: var(--sp-md) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.legal-champs li {
  padding-block: var(--sp-sm);
  border-bottom: 1px solid var(--rule-25);
}

.legal-champs li:first-child {
  border-top: 1px solid var(--rule-25);
}

.legal-champ-nom {
  color: var(--ink-2);
  font-weight: 600;
}

.legal-lien {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-base) var(--ease);
}

.legal-lien:hover {
  color: var(--accent-dark);
}

/* --- Encadré d'avertissement : la page ne peut pas être mise en ligne ---
   Jamais en --accent : ce n'est pas une mise en avant commerciale, c'est un
   blocage. Couleurs sémantiques d'avertissement des jetons (C2). */

.legal-avertissement {
  margin-top: var(--sp-xxl);
  padding: var(--pad);
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
}

.legal-avertissement-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--warn);
}

.legal-avertissement-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.legal-avertissement-texte {
  margin-top: var(--sp-sm);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Marqueur d'information manquante ---
   Volontairement très visible : personne ne doit pouvoir publier la page
   sans les avoir toutes remplacées. Contraste vérifié : --warn sur
   --warn-bg posé sur blanc. */

.a-fournir {
  display: inline;
  padding: 2px 8px;
  border: 1px dashed var(--warn);
  border-radius: var(--r-xs);
  background: var(--warn-bg);
  color: var(--warn);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .legal-tete {
    padding-block: var(--sp-xxl) var(--sp-xl);
  }
  .legal-corps {
    padding-block: var(--sp-xxxl) 72px;
  }
  .a-fournir {
    font-size: 12px;
  }
}