/* Pages légales NotiÈ (CGV, mentions légales, données personnelles).
   Feuille SÉPARÉE de site.css à dessein : ces pages n'empruntent que les
   variables de marque, et rien ici ne peut affecter la landing ni le tunnel
   de vente en production. Chargée après site.css. */

.legal { max-width: 720px; margin: 0 auto; padding: 4px 20px 8px; }

.legal-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--gris); margin: 0 0 10px;
}
.legal-titre {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 8vw, 52px); line-height: 0.98; letter-spacing: 0.01em;
  margin: 0 0 8px;
}
.legal-titre em { font-style: normal; color: var(--rouge); }
.legal-version { color: var(--gris); font-size: 13px; margin: 0 0 26px; }

/* Chapeau : le résumé en langage courant, avant les articles. */
.legal-chapeau {
  background: var(--noir-surface); border-left: 5px solid var(--rouge);
  padding: 16px 18px; margin: 0 0 30px;
}
.legal-chapeau p { margin: 0 0 10px; }
.legal-chapeau p:last-child { margin-bottom: 0; }

/* Sommaire */
.legal-sommaire { margin: 0 0 34px; padding: 0 0 0 1px; }
.legal-sommaire ol { margin: 0; padding-left: 20px; }
.legal-sommaire li { margin: 3px 0; font-size: 15px; }

.legal h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  color: var(--rouge); font-size: 20px; letter-spacing: 0.05em;
  margin: 40px 0 10px; scroll-margin-top: 20px;
}
.legal h3 { font-size: 15.5px; margin: 22px 0 4px; color: var(--blanc); }
.legal p, .legal li { font-size: 16px; line-height: 1.62; color: #e4e3de; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin: 5px 0; }
.legal strong { color: var(--blanc); }
.legal a { color: var(--blanc); text-decoration-color: var(--rouge); text-underline-offset: 3px; }
.legal a:hover { color: var(--rouge); }

/* Encart d'alerte (clause anti-arnaque) */
.legal-encart {
  border: 1px solid var(--rouge); background: rgba(254, 6, 15, 0.08);
  padding: 16px 18px; margin: 20px 0;
}
.legal-encart p:last-child { margin-bottom: 0; }
.legal-encart-titre {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 16px; color: var(--rouge); margin: 0 0 8px !important;
}

/* Liste de définitions (mentions légales, durées de conservation) */
.legal-dl { margin: 0 0 16px; }
.legal-dl dt {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 14px; color: var(--gris); margin-top: 16px;
}
.legal-dl dd { margin: 3px 0 0; font-size: 16px; line-height: 1.6; color: #e4e3de; }

/* Tableau (données collectées) : défile seul sur petit écran. */
.legal-tableau { overflow-x: auto; margin: 0 0 16px; }
.legal-tableau table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.legal-tableau th, .legal-tableau td {
  text-align: left; vertical-align: top; padding: 9px 12px;
  border-bottom: 1px solid #2a2a26;
}
.legal-tableau th {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 13px; color: var(--gris); border-bottom-color: #3d3c37;
}

/* Navigation entre les trois pages légales */
.legal-nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.legal-nav a {
  font-family: var(--display); text-transform: uppercase; font-size: 14px;
  letter-spacing: 0.1em; text-decoration: none; color: var(--blanc);
}
.legal-nav a:hover { color: var(--rouge); }
.legal-nav a[aria-current="page"] { color: var(--rouge); }