/* =====================================================================
   Page Mentions légales (/mentions-legales/) — src/mentions-legales.njk
   « Page violette » (AGENTS.md §13, demande de Christian du 09/10/2026) :
   thème de la page Contact — fond blanc, texte noir, accents
   --nc-violet-page, filet violet 50 % / cyan / magenta / jaune. Mêmes
   jetons et motifs que contact.css (titre, libellés mono, filets, liens
   soulignés violets) ; présentation sobre, sans image ni CTA.
   Toute la largeur de la page (demande de Christian, 09/10/2026) : en-tête
   pleine largeur, puis chaque rubrique en deux colonnes égales sur
   ordinateur (titre à gauche, texte à droite, comme les sections des
   prestations et réalisations), pour garder une mesure de lecture
   raisonnable. Mobile : titre puis texte.
   ===================================================================== */

.nc-legal {
  --nc-legal-flow: clamp(13px, 1.1vw, 24px);
  padding: clamp(26px, 2.8vw, 68px) var(--nc-pad-inline) var(--nc-pad-section-lg);
  background: var(--nc-blanc);
  color: var(--nc-noir);
}

/* ----- En-tête : fil d'Ariane, H1, filet violet ----- */
.nc-legal__head {
  display: flex;
  flex-direction: column;
  gap: var(--nc-legal-flow);
}

.nc-legal .nc-breadcrumbs--hero {
  padding: 0;
}

.nc-legal__title {
  font-size: clamp(2rem, 3.6vw, 4.75rem);
  text-wrap: balance;
}

/* Filet des pages violettes : violet 50 %, puis cyan, magenta et jaune à
   parts égales (AGENTS.md §13), paliers nets. */
.nc-legal__bar {
  display: block;
  width: 100%;
  height: clamp(6px, .5vw, 11px);
  margin-top: clamp(4px, .6vw, 12px);
  background: linear-gradient(90deg,
    var(--nc-violet-page) 0% 50%,
    var(--nc-cyan) 50% 66.667%,
    var(--nc-magenta) 66.667% 83.333%,
    var(--nc-jaune) 83.333% 100%);
}

/* ----- Corps ----- */
.nc-legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--nc-legal-flow);
  padding-top: clamp(28px, 3vw, 64px);
}

.nc-legal__content {
  display: flex;
  flex-direction: column;
  gap: var(--nc-legal-flow);
  min-width: 0;
}

@media (min-width: 820px) {
  .nc-legal__section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 72px);
    align-items: start;
  }
}

.nc-legal__section + .nc-legal__section {
  margin-top: clamp(28px, 3vw, 64px);
  border-top: var(--nc-bordure);
}

.nc-legal__h2 {
  font-size: clamp(1.5rem, 2.3vw, 3rem);
  text-wrap: balance;
}

.nc-legal__h3 {
  margin-top: clamp(8px, 1vw, 20px);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  line-height: 1.3;
  color: var(--nc-violet-page);
}

/* Paragraphes éditoriaux : corps de texte, justifiés, dernière ligne à
   gauche, sans césure (AGENTS.md §5). */
.nc-legal p,
.nc-legal__list li {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-noir);
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

.nc-legal p {
  text-align: justify;
  text-align-last: left;
}

/* Coordonnées (éditeur, hébergeur) : même motif que les coordonnées de la
   page Contact — libellé mono gris, valeur au corps de texte, filets. */
.nc-legal__coords {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--nc-bordure);
}

.nc-legal__coords li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: clamp(10px, .9vw, 18px) 0;
  border-top: var(--nc-bordure);
}

.nc-legal__label {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-gris-600);
}

.nc-legal__value {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-noir);
}

/* Liste à puces carrées violettes. */
.nc-legal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nc-legal__list li {
  position: relative;
  padding-left: 1.5em;
}

.nc-legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5em;
  height: .5em;
  background: var(--nc-violet-page);
}

/* Liens : soulignés violet, comme les coordonnées de la page Contact. */
.nc-legal a {
  color: var(--nc-noir);
  font-weight: 600;
  border-bottom: 2px solid var(--nc-violet-page);
  padding-bottom: 1px;
  transition: color var(--nc-transition-rapide);
}

/* Adresses web et e-mail : coupure possible à n'importe quel caractère sur
   petit écran — classe dédiée à ce seul cas (AGENTS.md §5). */
.nc-legal__url {
  overflow-wrap: anywhere;
}

.nc-legal a:hover,
.nc-legal a:focus-visible {
  color: var(--nc-violet-page);
}

.nc-legal a:focus-visible {
  outline: 3px solid var(--nc-violet-page);
  outline-offset: 2px;
}

.nc-legal .nc-breadcrumbs--hero a {
  font-weight: inherit;
  border-bottom: 0;
  padding-bottom: 0;
}