/* ============================================================================
   Pages légales (Figma 3604:73793) — fond marron, texte en colonne de 656 px,
   logo fixe en arrière-plan, voile en dégradé au bas de l'écran.
   Seules les valeurs absentes de tokens.css sont définies ici.
   ========================================================================= */

.legal {
  --legal-col: 656px;
  --legal-gap: 90px;   /* entre deux sections (Figma : pas de 222 pour un bloc de 132) */
  --legal-veil: 275px; /* hauteur du dégradé */
  --legal-par: 18px;   /* blanc entre deux paragraphes : une ligne de 15 px à 1,2 */

  position: relative;
  isolation: isolate;
  padding: 129px var(--gutter) 0;
  background: var(--c-brown);
  color: var(--c-cream);
}

/* ── Logo fixe ──────────────────────────────────────────────────────────
   Le cadre rogne le logo à la hauteur de la page : sans cela, un élément fixe
   passerait par-dessus le pied de page. Même gabarit que le hero (961/900). */
.legal__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(0);
  /* Le bas du cadre fond au lieu de couper net les arcs du logo. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent);
  pointer-events: none;
}

.legal__shape {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  block-size: calc(100dvh * 961 / 900);
  aspect-ratio: 926.604 / 961;
  translate: -50% -50%;
}

.legal__outline {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.7;
  /* Écrit par js/legal-shape.js, qui lui donne son inertie. */
  rotate: var(--legal-angle, 0deg);
  will-change: rotate;
}

/* ── Titre ─────────────────────────────────────────────────────────────── */
.legal__title {
  margin: 0 0 var(--sp-96);
  text-align: center;
  color: var(--c-cream);
}

/* Une fois découpé, le titre est une colonne de lignes alignées à gauche. */
.legal__title.is-split {
  align-items: center;
}

/* ── Texte ─────────────────────────────────────────────────────────────── */
.legal__doc {
  display: flex;
  flex-direction: column;
  gap: var(--legal-gap);
  max-inline-size: var(--legal-col);
  margin-inline: auto;
  /* Le pied de page porte déjà son propre haut (--sp-edge) : on n'ajoute presque rien. */
  padding-block-end: var(--sp-24);
}

.legal__sec {
  display: flex;
  flex-direction: column;
  gap: var(--legal-par); /* un blanc d'une ligne entre deux paragraphes, comme dans la maquette */
  font-family: var(--ff-display);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--c-ink-inv-2);
}

.legal__sec > h2 {
  margin: 0 0 calc(var(--sp-20) - var(--legal-par)); /* 20 px sous le titre, malgré le gap commun */
  color: var(--c-cream);
}

.legal__sec p,
.legal__sec blockquote {
  margin: 0;
}

.legal__sec a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color var(--d-micro) var(--e-out);
}

.legal__sec a:hover,
.legal__sec a:focus-visible {
  color: var(--c-cream);
}

.legal__sec ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0;
  padding-inline-start: 1.2em;
  list-style: disc;
}

.legal__sec h3 {
  margin: var(--sp-8) 0 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  color: var(--c-cream);
}

.legal__sec h4 {
  margin: var(--sp-4) 0 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--c-cream);
}

.legal__sec strong {
  font-weight: var(--fw-bold);
  color: var(--c-cream);
}

/* Listes sans puce : sous-énumérations (i), (ii)… des droits. */
.legal__sec ul.legal__plain {
  list-style: none;
}

/* Bloc « Type / Administré par / But » d'un cookie. */
.legal__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.legal__btn {
  align-self: flex-start;
  border: 0;
  text-transform: uppercase;
  cursor: pointer;
}

/* Citation de la CNIL : filet à gauche, source en étiquette. */
.legal__sec blockquote {
  display: flex;
  flex-direction: column;
  gap: var(--legal-par);
  padding-inline-start: var(--sp-16);
  border-inline-start: 1px solid var(--c-ink-inv-3);
}

.legal__sec blockquote footer {
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: var(--fs-tag);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--c-ink-inv-3);
}

/* ── Voile ──────────────────────────────────────────────────────────────
   Fixe au bas de l'écran, dans un cadre rogné aux limites de la page : il
   recouvre le texte qui monte, mais s'arrête net au pied de page. Aucune
   réserve de place n'est donc nécessaire sous le dernier paragraphe. */
.legal__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0);
  pointer-events: none;
}

.legal__veil {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--legal-veil);
  background: linear-gradient(to top, var(--c-brown), rgb(var(--c-brown-rgb) / 0));
}

@media (max-width: 767px) {
  .legal {
    --legal-gap: var(--sp-64);
    --legal-veil: 160px;
    padding-block-start: 112px;
  }

  .legal__title {
    margin-block-end: var(--sp-56);
  }
}