/* ============================================================
   Page légale — layout étroit, typographie de lecture
   Utilisé par mentions-legales.html (et prochainement
   politique-confidentialite.html). Réutilise la coquille
   .ivr-phero pour l'en-tête et un container centré étroit
   pour le corps du document.
   ============================================================ */

.ivr-phero--compact {
  /* pas d'image, hauteur réduite — la page est purement textuelle */
  min-block-size: 22rem;
  background: linear-gradient(180deg, var(--ivr-blue-900) 0%, var(--ivr-blue-800) 100%);
}

/* Alignement du header avec la colonne étroite du corps du document.
   Le container reste plein largeur (pour préserver le fond bleu et le
   scrim), mais le bloc .ivr-phero__head s'aligne sur .ivr-legal__doc :
   même max-inline-size, même centrage horizontal. */
.ivr-phero--compact .ivr-phero__head {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.ivr-phero--compact .ivr-phero__head .ivr-overline { justify-self: center; }

.ivr-phero--compact .ivr-phero__scrim {
  background: linear-gradient(180deg, rgb(2 26 59 / 0.65) 0%, rgb(2 26 59 / 0.35) 100%);
}

.ivr-legal { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.ivr-legal__doc {
  max-inline-size: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--ivr-space-8);
  font-size: var(--ivr-text-base);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text);
}

.ivr-legal__intro,
.ivr-legal__intro-wrap > p {
  font-size: var(--ivr-text-lg, 1.125rem);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text);
}

.ivr-legal__stamp {
  font-style: italic;
  color: var(--ivr-blue-700);
  font-size: var(--ivr-text-sm);
}

.ivr-legal__section {
  display: grid;
  gap: var(--ivr-space-4);
  padding-block-start: var(--ivr-space-6);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
}

.ivr-legal__section:first-of-type { border-block-start: none; padding-block-start: 0; }

.ivr-legal__h2 {
  font-size: var(--ivr-text-xl, 1.375rem);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-tight);
  color: var(--ivr-blue-800);
  text-transform: uppercase;
  padding-block-end: var(--ivr-space-2);
  border-block-end: 2px solid var(--ivr-border-subtle);
}

.ivr-legal__h3 {
  font-size: var(--ivr-text-base);
  font-weight: var(--ivr-weight-semibold);
  color: var(--ivr-blue-700);
  margin-block-start: var(--ivr-space-3);
}

.ivr-legal__doc p { color: var(--ivr-text); }

.ivr-legal__doc ul {
  list-style: disc;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: var(--ivr-space-2);
}

.ivr-legal__doc ul li { color: var(--ivr-text); }

.ivr-legal__doc a { color: var(--ivr-blue-700); text-decoration: underline; text-underline-offset: 3px; }
.ivr-legal__doc a:hover { color: var(--ivr-blue-900); }

.ivr-legal__list {
  display: grid;
  gap: var(--ivr-space-2);
  padding: var(--ivr-space-5) var(--ivr-space-6);
  background-color: var(--ivr-surface-alt, var(--ivr-gray-50, #f7f8fa));
  border-radius: var(--ivr-radius-card);
}

.ivr-legal__list > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) 1fr;
  gap: var(--ivr-space-4);
  align-items: baseline;
}

.ivr-legal__list dt {
  font-weight: var(--ivr-weight-semibold);
  color: var(--ivr-blue-800);
  font-size: var(--ivr-text-sm);
  letter-spacing: var(--ivr-tracking-normal);
}

.ivr-legal__list dd { margin: 0; color: var(--ivr-text); }

.ivr-legal__version {
  font-style: italic;
  color: var(--ivr-text-muted);
  text-align: end;
  font-size: var(--ivr-text-sm);
}

@media (max-width: 40rem) {
  .ivr-legal__list > div { grid-template-columns: 1fr; gap: 0; }
  .ivr-legal__list dd { padding-inline-start: 0; }
}