/* ==========================================================================
   ds-legal.css — Zone LEGAL
   --------------------------------------------------------------------------
   Perimetre :
     - templates/legal/**            (CGU, mentions legales, confidentialite, cookies)
     - templates/bundles/TwigBundle/Exception/**  (404, 403, 500, generique)

   Regles :
     - 100% des couleurs viennent des tokens --ds-* de design-system.css.
       Aucune valeur chromatique en dur (#hex / rgb / hsl / oklch) dans ce fichier.
     - On consomme les primitives .ds-* (boutons, cartes, tableaux) plutot que
       de les redefinir. Ce fichier ne contient que la mise en page longue
       lecture et les ecrans d'erreur.
     - Mobile-first : les media queries montent (min-width) uniquement.
   ========================================================================== */

/* ==========================================================================
   1. COQUILLE DE PAGE LEGALE
   ========================================================================== */

.legal-page {
  background-color: var(--ds-paper);
  padding-block: var(--ds-section-y);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
}

.legal-page__container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* --------------------------------------------------------------------------
   En-tete du document — aligne a gauche : c'est un document de lecture,
   pas une page marketing. Un titre centre casse le rythme de lecture.
   -------------------------------------------------------------------------- */

.legal-page__header {
  max-width: var(--ds-measure);
  margin-bottom: var(--ds-space-10);
  padding-bottom: var(--ds-space-8);
  border-bottom: 1px solid var(--ds-border);
}

.legal-page__title {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text);
  text-wrap: balance;
}

.legal-page__subtitle {
  margin: var(--ds-space-4) 0 0;
  max-width: var(--ds-measure);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

/* --------------------------------------------------------------------------
   Grille sommaire + contenu.
   Mobile : une colonne, le sommaire passe au-dessus du texte.
   >= 1024px : sommaire fixe (sticky) a gauche, contenu a droite.
   -------------------------------------------------------------------------- */

.legal-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .legal-page__layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--ds-space-12);
  }
}

/* ==========================================================================
   2. SOMMAIRE ANCRE
   ========================================================================== */

.legal-toc {
  padding: var(--ds-space-5);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

@media (min-width: 1024px) {
  .legal-toc {
    position: sticky;
    top: var(--ds-space-8);
    max-height: calc(100vh - var(--ds-space-16));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: transparent;
    border: 0;
    border-left: 1px solid var(--ds-border);
    border-radius: 0;
    padding: var(--ds-space-1) 0 var(--ds-space-1) var(--ds-space-5);
  }
}

/* Pas de titre visible dans le sommaire : aucune cle de traduction existante
   ne porte le mot "Sommaire" et les pages sont servies en 11 langues.
   Le <nav> est donc nomme via aria-labelledby -> le <h1> du document. */

.legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

.legal-toc__link {
  display: block;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text-muted);
  text-decoration: none;
  transition:
    color var(--ds-transition),
    background-color var(--ds-transition);
}

.legal-toc__link:hover {
  background-color: var(--ds-accent-subtle);
  color: var(--ds-accent-hover);
}

.legal-toc__link:active {
  background-color: var(--ds-ink-subtle);
}

.legal-toc__link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

/* La cible tactile reste >= 44px sur petit ecran, meme si la ligne est courte. */
@media (max-width: 1023.98px) {
  .legal-toc__link {
    min-height: var(--ds-touch-target);
    display: flex;
    align-items: center;
  }
}

/* ==========================================================================
   3. CONTENU — SECTIONS
   ========================================================================== */

.legal-page__content {
  min-width: 0;
}

.legal-section {
  padding-block: var(--ds-space-10);
  border-top: 1px solid var(--ds-border);
}

.legal-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal-section:last-child {
  padding-bottom: 0;
}

/* Le titre reste visible sous le header colle quand on saute a une ancre.
   design-system.css pose deja scroll-margin-block sur :target ; on le
   renforce ici pour les sections qui ne sont pas la cible active. */
.legal-section,
.legal-subsection__title {
  scroll-margin-top: var(--ds-space-16);
}

.legal-section__title {
  margin: 0 0 var(--ds-space-5);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text);
  text-wrap: balance;
}

.legal-subsection__title {
  margin: var(--ds-space-8) 0 var(--ds-space-3);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text);
}

.legal-subsection__title:first-child {
  margin-top: 0;
}

.legal-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

/* ==========================================================================
   4. PROSE — texte injecte par les traductions (|raw)
   Le contenu traduit contient <ul>, <li>, <strong>, <em>, <br>, <a>.
   Tout doit rester lisible sans classe sur ces balises.
   ========================================================================== */

.legal-prose {
  max-width: var(--ds-measure);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text);
  overflow-wrap: anywhere;
}

.legal-prose > * + * {
  margin-top: var(--ds-space-4);
}

.legal-prose p {
  margin: 0;
}

.legal-prose strong,
.legal-prose b {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.legal-prose em {
  font-style: italic;
  color: var(--ds-text);
}

.legal-prose a {
  color: var(--ds-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  border-radius: var(--ds-radius-sm);
}

.legal-prose a:hover {
  color: var(--ds-accent-active);
}

.legal-prose a:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-color);
  outline-offset: var(--ds-focus-offset);
}

.legal-prose ul,
.legal-prose ol {
  margin: var(--ds-space-4) 0 0;
  padding-left: var(--ds-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.legal-prose li {
  line-height: var(--ds-leading-relaxed);
}

.legal-prose li::marker {
  color: var(--ds-muted);
}

/* Chiffres, montants, references : Departure Mono. */
.legal-prose .mono,
.legal-prose code {
  font-family: var(--ds-font-mono);
  font-size: 0.95em;
  color: var(--ds-text);
}

/* Tableau eventuellement present dans une traduction : il doit scroller,
   pas deborder. On ne peut pas l'envelopper dans .ds-table-wrap (HTML injecte),
   donc le tableau devient lui-meme la zone de scroll. */
.legal-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

.legal-prose th,
.legal-prose td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  text-align: left;
  vertical-align: top;
}

.legal-prose th {
  background-color: var(--ds-surface-sunken);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   5. PAGES D'ERREUR (404 / 403 / 500 / generique)
   Sobre, centre, une seule action primaire, retour toujours evident.
   ========================================================================== */

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--ds-section-y) var(--ds-gutter);
  background-color: var(--ds-paper);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
}

.error-page .error-container {
  width: 100%;
  max-width: 34rem;
  padding: var(--ds-space-8) var(--ds-space-6);
  background-color: var(--ds-surface-raised);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  text-align: center;
}

@media (min-width: 640px) {
  .error-page .error-container {
    padding: var(--ds-space-12) var(--ds-space-10);
  }
}

.error-page .error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-4);
}

/* Pastille d'icone : encre sur fond encre tres clair, pas de disque massif. */
.error-page .error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  background-color: var(--ds-ink-subtle);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  color: var(--ds-text);
}

.error-page .error-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  color: inherit;
  fill: currentColor;
}

/* Le code HTTP est une reference technique : Departure Mono, en surtitre.
   Il informe sans voler la vedette au titre — c'est le message qui compte,
   pas le nombre. */
.error-page .error-code {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-none);
  letter-spacing: var(--ds-tracking-caps);
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

.error-page .error-title {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text);
  text-wrap: balance;
}

.error-page .error-subtitle {
  margin: 0;
  max-width: 34ch;
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

.error-page .error-message {
  margin: 0;
  max-width: 42ch;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text-muted);
}

.error-page .error-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
  width: 100%;
  margin-top: var(--ds-space-4);
}

@media (min-width: 640px) {
  .error-page .error-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
  }
}

/* Les icones inline des boutons du design system. */
.error-page .ds-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Bloc "que faire maintenant ?"
   -------------------------------------------------------------------------- */

.error-page .error-suggestions {
  width: 100%;
  margin-top: var(--ds-space-6);
  padding: var(--ds-space-5);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  text-align: left;
}

.error-page .suggestions-title {
  margin: 0 0 var(--ds-space-3);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--ds-text-muted);
  text-align: left;
}

.error-page .suggestions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-page .suggestions-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) 0;
  border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

.error-page .suggestions-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.error-page .suggestions-list li:first-child {
  padding-top: 0;
}

.error-page .suggestions-list svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--ds-muted);
  fill: currentColor;
}

/* ==========================================================================
   6. IMPRESSION — les pages legales sont imprimees et archivees.
   ========================================================================== */

@media print {
  .legal-toc {
    display: none;
  }

  .legal-page {
    padding-block: 0;
    background: none;
  }

  .legal-page__layout {
    display: block;
  }

  .legal-section {
    break-inside: avoid;
    padding-block: var(--ds-space-6);
  }

  .legal-section__title,
  .legal-subsection__title {
    break-after: avoid;
  }

  .legal-prose {
    max-width: none;
  }

  .legal-prose a::after {
    content: ' (' attr(href) ')';
    font-size: var(--ds-text-xs);
    color: var(--ds-text-muted);
  }
}