/* =========================================
= PAGES LÉGALES — mentions, CGV, confidentialité, livraisons, retours, cookies
= Structure :
=   1. Page (article + titre h1)
=   2. Conteneur .nl-legal--grid (2 colonnes)
=   3. Colonne GAUCHE  → sommaire (.nl-legal--toc)
=   4. Colonne DROITE  → sections / contenu (.nl-legal--sections, .nl-legal--content)
========================================= */


/* =========================================
   1. PAGE (article + titre h1)
========================================= */
.nl-legal {
  /* padding homogène : titre + grille alignés sur les mêmes marges */
  padding: 5rem 2.5rem 3rem;
  font-family: var(--SR);
  color: var(--primary);
}

.nl-legal--title {
  margin: 0 0 3rem;
  border-bottom: 0.0625rem solid var(--accent);
  padding: 0 0 2rem;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 48rem) {
  .nl-legal {
    margin: 1rem auto;
    padding: 2.5rem 1.25rem 2rem;
  }
  .nl-legal--title { margin-bottom: 2rem; }
}


/* =========================================
   2. CONTENEUR GRID — 2 colonnes (sommaire | contenu)
========================================= */
.nl-legal--grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr); /* minmax(0,…) : empêche les tableaux de déborder la colonne */
  gap: 3rem;
  align-items: start;
}

@media (max-width: 64rem) {
  .nl-legal { max-width: 56rem; }
  .nl-legal--grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* =========================================
   3. COLONNE GAUCHE — SOMMAIRE (.nl-legal--toc)
   Style mirroir du footer (.nl-footer--list / .nl-footer--link) :
   pas de bullets, underline animé au hover/focus + permanent sur l'item actif.
========================================= */
.nl-legal--toc {
  position: sticky;
  top: 8rem;
  max-height: calc(100dvh - 8rem);
  overflow: auto;
  margin: 0;
}

.nl-legal--toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  font-size: var(--text-sm);
}
.nl-legal--toc li { margin: 0; }

.nl-legal--toc a {
  position: relative;
  display: inline-block;
  font-family: var(--SR);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
}
.nl-legal--toc a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.125em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.nl-legal--toc a:hover::after,
.nl-legal--toc a:focus-visible::after {
  transform: scaleX(1);
}

/* Item actif (page courante) : underline permanent + couleur soutenue */
.nl-legal--toc li.is-active > a {
  color: var(--primary);
}
.nl-legal--toc li.is-active > a::after {
  transform: scaleX(1);
}

/* Tablette + mobile : sommaire masqué (pas pertinent en monocolonne). */
@media (max-width: 64rem) {
  .nl-legal--toc { display: none; }
}


/* =========================================
   4. COLONNE DROITE — SECTIONS / CONTENU
   (.nl-legal--sections wrap chaque section, .nl-legal--content style le texte)
========================================= */
.nl-legal--sections {
  min-width: 0; /* laisse rétrécir tableaux / longs contenus */
}
.nl-legal--sec-title {
  font-size: var(--text-2xl);
}

.nl-legal--content {
  font-size: var(--text-sm);
  line-height: 1.7;        /* interligne confortable pour de longs textes légaux */
  max-width: 75ch;         /* largeur de lecture optimale (mesure) */
}

/* Saut d'ancre depuis le footer (#sec-…) sans masquer le titre sous le header */
.nl-legal--content section[id^="sec-"] {
  scroll-margin-top: 8rem;
}

/* -- Titres internes du contenu -- */
.nl-legal--content h2 {
  margin: 2rem 0 1rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}
.nl-legal--content h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* -- Paragraphes + listes (sans puces ni numéros) -- */
.nl-legal--content ul,
.nl-legal--content ol {
  list-style: none;
  margin: 1rem 0;
  padding-left: 0;
}
.nl-legal--content p,
.nl-legal--content li {
  margin: 1rem 0;
}

/* -- Liens dans le contenu (couleur atténuée → primaire au hover) -- */
.nl-legal--content a {
  color: var(--primary-40);
  text-decoration: none;
  transition: color .2s ease;
}
.nl-legal--content a:hover,
.nl-legal--content a:focus-visible,
.nl-legal--content a:active {
  color: var(--primary);
}

.nl-legal--content strong { font-weight: 600; }

.nl-legal--content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 0.0625rem solid var(--accent);
}

/* -- Tableaux (cookies, finalités RGPD) -- */
.nl-legal--content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
}
.nl-legal--content th,
.nl-legal--content td {
  border: 0.0625rem solid var(--accent);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.nl-legal--content thead th {
  background: var(--secondary);
  font-weight: 600;
}

/* -- Encadré : formulaire-type de rétractation -- */
.nl-legal--form {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 0.1875rem solid var(--primary);
  background: var(--secondary);
  font-size: var(--text-sm);
}
.nl-legal--form p { margin: 0 0 0.4rem; }

/* -- Champs à compléter avant publication (pastille jaune) -- */
.nl-legal--todo {
  display: inline;
  padding: 0.05em 0.35em;
  border-radius: var(--radius-xs);
  background: #fff3cd;
  color: #7a5b00;
  font-size: 0.92em;
  font-weight: 600;
}

/* -- Date de dernière mise à jour (en bas de chaque section) -- */
.nl-legal--updated {
  margin: 0 0 2rem;
  color: var(--primary-60);
  font-size: var(--text-sm);
  font-style: italic;
}

/* -- Responsive mobile : tableaux empilés en cartes -- */
@media (max-width: 48rem) {
  .nl-legal--content table,
  .nl-legal--content thead,
  .nl-legal--content tbody,
  .nl-legal--content th,
  .nl-legal--content td,
  .nl-legal--content tr {
    display: block;
  }
  .nl-legal--content thead { display: none; }
  .nl-legal--content td {
    border: 0;
    border-bottom: 0.0625rem solid var(--accent);
    padding: 0.4rem 0;
  }
  .nl-legal--content tr {
    margin-bottom: 0.75rem;
    border: 0.0625rem solid var(--accent);
    padding: 0.5rem 0.75rem;
  }
}