/* Pages légales Nippa.
 *
 * Volontairement sobres : ces pages se lisent, elles ne se parcourent pas.
 * Colonne étroite (68 caractères environ), interlignage généreux, et la
 * charte respectée — radius 0, aucune ombre, signature -9° réservée au
 * bandeau de titre.
 */

body.legal {
  background: var(--nippa-brume);
  color: var(--nippa-encre);
}

.legal-header {
  background: var(--nippa-encre);
  color: var(--nippa-blanc);
  padding: 26px 0;
}
.legal-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.legal-header a {
  color: #B9BDC4;
  text-decoration: none;
  font-size: 14px;
}
.legal-header a:hover { color: var(--nippa-blanc); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.legal-title {
  background: var(--nippa-encre);
  color: var(--nippa-blanc);
  padding: 0 0 64px;
}
.legal-title h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(34px, 6vw, 62px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.legal-title .maj {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8B9099;
  margin-top: 14px;
}

/* Colonne de lecture : au-delà de ~70 caractères par ligne, l'œil perd
   le début de la ligne suivante. */
.legal-body {
  max-width: 68ch;
  padding: 56px 0 88px;
}
.legal-body h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 21px;
  margin: 44px 0 12px;
  line-height: 1.25;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 26px 0 8px;
}
.legal-body p,
.legal-body li {
  font-size: 16px;
  line-height: 1.7;
  color: #2C3138;
}
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--nippa-encre); text-decoration: underline; }
.legal-body strong { font-weight: 600; }

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  background: var(--nippa-blanc);
}
.legal-body th,
.legal-body td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--nippa-bordure);
  font-size: 15px;
  vertical-align: top;
}
.legal-body th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nippa-asphalte);
  border-bottom: 2px solid var(--nippa-encre);
}

/* Mention à compléter par l'exploitant : signalée en Citron, la couleur
   que la charte réserve à ce qui demande une action. Ces blocs doivent
   tous disparaître avant l'ouverture au public. */
.a-completer {
  background: #FFF8E1;
  border-left: 3px solid var(--nippa-citron);
  padding: 12px 15px;
  margin: 14px 0;
  font-size: 15px;
}
.a-completer b { display: block; margin-bottom: 3px; }

footer.legal-footer {
  background: var(--nippa-encre);
  color: #7C8189;
  padding: 40px 0;
  font-size: 13px;
}
footer.legal-footer a { color: #B9BDC4; text-decoration: none; margin-right: 18px; }
footer.legal-footer a:hover { color: var(--nippa-blanc); }

/* ---------- Formulaire de suppression de compte ----------
 *
 * Seul formulaire du site public. Il reste dans la colonne de lecture des
 * pages légales : ce qu'il y a à comprendre avant de le remplir est au-dessus,
 * et l'élargir séparerait la décision de son explication.
 */
.form-suppression {
  background: var(--nippa-blanc);
  border: 1px solid var(--nippa-bordure);
  padding: 22px;
  margin: 18px 0 8px;
}

.form-suppression fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.form-suppression legend,
.form-suppression > label {
  display: block;
  font-family: var(--nippa-font-data);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nippa-asphalte);
  margin-bottom: 8px;
}
.form-suppression > label { margin-top: 18px; }
.form-suppression fieldset:first-child legend { margin-bottom: 10px; }

.form-suppression .choix {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
  cursor: pointer;
}
/* Les cases et boutons radio natifs sont ronds : c'est la seule courbe
   tolérée du site, la redessiner en carré demanderait de réimplémenter
   l'état coché et l'accessibilité clavier pour un gain purement décoratif. */
.form-suppression .choix input {
  margin-top: 3px;
  accent-color: var(--nippa-encre);
  flex-shrink: 0;
}

.form-suppression .aide {
  font-size: 13px;
  color: var(--nippa-asphalte);
  margin: 6px 0 0;
}

.form-suppression .confirmation {
  margin: 24px 0 20px;
  align-items: flex-start;
}

.form-suppression button { width: 100%; }