/* ==========================================================================
   Pages légales — mentions, CGUV, données personnelles, cookies.
   Une seule feuille pour les quatre : ce sont quatre textes de loi, pas quatre
   écrans. Ils partagent la même colonne de lecture et la même hiérarchie de
   titres ; leur donner chacun sa mise en page les aurait fait diverger au
   premier ajout, et un texte juridique se relit d'un fichier à l'autre.

   Ces pages ne portent aucune photographie et aucune apparition au défilement :
   on ne vient pas y flâner, on vient y chercher une ligne. Tout ce qui
   retarderait la lecture en a été retiré.
   ========================================================================== */

.mentions {
  padding: var(--u12) 0 var(--u16);
  background: var(--black);
}

/* La colonne est fixée en `ch` et non en pixels : la mesure suit la taille des
   caractères, donc la ligne garde environ 75 signes quel que soit le réglage de
   corps du visiteur. Au-delà, l'œil perd la ligne suivante en revenant à la
   marge — sur des pages de cette longueur, c'est ce qui fait abandonner. */
.mentions__colonne {
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   L'en-tête.
   -------------------------------------------------------------------------- */

.mentions__titre {
  margin-top: var(--u2);
  color: var(--white);
}

.mentions__titre::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin-top: var(--u4);
  background: var(--red);
}

/* Le sous-titre nomme l'entité et le support concernés — « Site Web
   CONNIVENCE », « SCS LABS ». Sur un texte de loi, savoir QUI s'engage et sur
   QUOI se lit avant le premier article. */
.mentions__sous-titre {
  margin-top: var(--u3);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--beige);
}

/* --------------------------------------------------------------------------
   Le corps du texte.
   Les sélecteurs descendants sont assumés : le contenu est de la prose, écrite
   dans le gabarit et non composée depuis une liste de données. Poser une classe
   sur chaque paragraphe d'un texte de dix pages n'aurait rien apporté qu'à
   relire.
   -------------------------------------------------------------------------- */

.mentions__corps {
  margin-top: var(--u8);
  color: var(--beige);
}

.mentions__corps > h2 {
  margin-top: var(--u8);
  color: var(--white);
}

.mentions__corps > h2:first-child {
  margin-top: 0;
}

.mentions__corps > h3 {
  margin-top: var(--u6);
  color: var(--white);
}

.mentions__corps p {
  margin-top: var(--u3);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.mentions__corps > h2 + p,
.mentions__corps > h3 + p {
  margin-top: var(--u4);
}

/* base.css retire les puces de TOUTES les listes — la navigation, le pied de
   page et les grilles du site n'en veulent pas. Ici on les remet : dans un
   texte de loi, l'énumération est une figure de rédaction, pas une mise en
   forme. Sans marqueur, on ne voit plus où s'arrête un item. */
.mentions__corps ul {
  margin-top: var(--u3);
  padding-left: var(--u4);
  list-style: disc;
}

.mentions__corps li {
  margin-top: var(--u2);
  font-size: 1.0625rem;
  line-height: 1.65;
  list-style: inherit;
}

.mentions__corps li::marker {
  color: var(--red);
}

.mentions__corps strong {
  color: var(--white);
}

/* Les liens du corps sont soulignés, contrairement à ceux du reste du site :
   dans un pavé de texte, la seule couleur ne suffit pas à les distinguer, et
   ces pages sont précisément celles où l'on cherche une adresse à cliquer. */
.mentions__corps a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mentions__corps a:hover,
.mentions__corps a:focus-visible {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   La fiche d'identité — page « Mentions légales » uniquement.
   Une liste de définitions plutôt qu'un tableau : ce sont des paires
   intitulé/valeur, pas des données croisées. Le lecteur d'écran les annonce
   comme telles, et la mise en colonnes tombe d'elle-même sur mobile.
   -------------------------------------------------------------------------- */

.mentions__fiche {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--u2) var(--u4);
  margin: var(--u6) 0 0;
  padding: var(--u4);
  border-left: 2px solid var(--red);
  background: var(--surface);
}

.mentions__fiche dt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.mentions__fiche dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.mentions__fiche a {
  color: var(--beige);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mentions__fiche a:hover,
.mentions__fiche a:focus-visible {
  color: var(--red);
}

@media (max-width: 599px) {
  .mentions__fiche {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u1) 0;
  }
  .mentions__fiche dd {
    margin-bottom: var(--u3);
  }
  .mentions__fiche dd:last-child {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Le renvoi vers les trois autres textes.
   Les quatre pages se citent l'une l'autre — la loi impose de pouvoir passer
   des mentions à la notice de données sans repasser par le pied de page.
   -------------------------------------------------------------------------- */

.mentions__renvois {
  margin-top: var(--u8);
  padding-top: var(--u6);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.mentions__renvois-titre {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.mentions__renvois ul {
  display: grid;
  gap: var(--u2);
  margin-top: var(--u4);
}

.mentions__renvois a {
  font-size: 1.0625rem;
  color: var(--beige);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mentions__renvois a:hover,
.mentions__renvois a:focus-visible {
  color: var(--red);
}

@media (max-width: 899px) {
  .mentions { padding: var(--u8) 0 var(--u12); }
}