/* Pages légales, conception « Le document » : /mentions-legales/ et
   /confidentialite/ (famille legal, DESIGN.md §12). Importée par ces deux
   pages seulement, après la mise en page. Jetons seulement, seuils de
   l'accueil seulement, classes préfixées par legal-.

   La page se lit comme une pièce juridique soignée : une couverture (titre,
   chapô, cartouche de plan d'architecte), puis une feuille posée sur la brume,
   avec son sommaire en marge et ses articles numérotés. Sur les mentions, les
   articles partagent une seule grille 5/7 (tout second bloc part de la même
   ligne) et une seule tête, calée sur leur bord ; chacun choisit la forme de
   son corps : fiche de registre, adresse en grand, tableau, bande foncée,
   clauses. Le seul dessin du document est le parcours d'une donnée, sur la
   confidentialité. */

/* ------------------------------------------------------------- ouverture */
/* L'entête du site est fixe et hors du flux : l'ouverture réserve sa hauteur,
   plus une respiration, comme EnTetePage. */
.legal-ouverture { padding-top: calc(var(--h-entete) + var(--e7)); padding-bottom: var(--e8); }

.legal-ouverture__titre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  margin-top: var(--e8);
}

/* Sur la crème, la pastille du libellé prenait la teinte crème : invisible,
   son retrait décalait le losange de 15 px par rapport au H1. En brume, comme
   sur les panneaux de l'accueil, la boîte se voit et son bord s'aligne. */
.legal-ouverture .libelle { background: var(--fond-alterne); }

/* Le titre prend toute la largeur : il tombe en deux lignes à 1440 px, le
   domaine seul en accent sur la seconde. */
.legal-ouverture .h1 { max-width: 26ch; }

.legal-ouverture__corps {
  display: grid;
  gap: var(--e6);
  margin-top: var(--e7);
}

.legal-ouverture__chapo { color: var(--texte-attenue); }

/* Le cartouche : le bloc-titre d'un plan. Des cases sous filet, l'intitulé en
   Chivo, la valeur en corps d'interface. */
.legal-cartouche {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--texte);
}

.legal-cartouche__case {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--filet);
}

.legal-cartouche__terme {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: var(--graisse-normale);
  color: var(--texte-attenue);
}

.legal-cartouche__valeur {
  margin: 0;
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  overflow-wrap: anywhere;
}
.legal-cartouche__valeur a:not(.lien-fleche) { text-decoration: none; }

/* La photographie de couverture : une bande, pas un héros. */
.legal-ouverture__image {
  margin-top: var(--e8);
  aspect-ratio: 4 / 3;
}

@media (min-width: 641px) {
  .legal-cartouche { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e5); }
  /* Un nombre impair de cases : la dernière, seule sur sa ligne, prend toute la
     largeur, comme la carte seule d'une famille de l'accueil (.disp:last-child)
     et la case large des droits (.legal-droits__case--large). */
  .legal-cartouche__case:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .legal-ouverture__image { aspect-ratio: 21 / 9; }
}

@media (min-width: 1024px) {
  .legal-ouverture__corps {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--e9);
  }
}

@media (max-width: 767.98px) {
  /* Le domaine est un seul mot insécable après découpe du titre : au calibre
     du H1, il sortirait de l'écran à 390 px. */
  .legal-ouverture .h1 { font-size: var(--t-titre-section); }
}

/* ----------------------------------------------------- engagements (confid.) */
.legal-engagements {
  margin-top: var(--e8);
  border-top: 1px solid var(--texte);
}

.legal-engagements__item {
  display: grid;
  grid-template-columns: var(--e8) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e4);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}

.legal-engagements__num {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  color: var(--accent);
}

.legal-engagements__texte {
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
}


/* ------------------------------------------------------------ la feuille */
/* La feuille suit la photographie de près : la brume n'est qu'un bord. */
.legal-document { padding-top: var(--e7); }

/* Blanc cassé sur la brume, rayon 16, sans ombre : le relief vient des deux
   fonds, comme les panneaux de l'accueil. Pleine largeur sous 768 px. */
.legal-document__feuille {
  display: grid;
  gap: var(--e7);
  padding: var(--e8) var(--e7);
  border-radius: var(--rayon-carte);
  background: var(--fond-carte);
}

@media (max-width: 767.98px) {
  .legal-document__feuille {
    margin-inline: calc(var(--gouttiere) * -1);
    padding: var(--e7) var(--gouttiere);
    border-radius: 0;
  }
}

@media (min-width: 1200px) {
  .legal-document__feuille {
    grid-template-columns: minmax(0, calc(var(--e9) * 2.75)) minmax(0, 1fr);
    gap: 0;
  }
  .legal-document__marge { padding-right: var(--e6); padding-bottom: 0; border-bottom: 0; }
  .legal-document__articles {
    min-width: 0;
    padding-left: var(--e8);
    border-left: 1px solid var(--filet);
  }
}

/* ------------------------------------------------------------ le sommaire */
.legal-sommaire {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.legal-sommaire__titre {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.legal-sommaire__liste { border-top: 1px solid var(--filet); }

.legal-sommaire__lien {
  display: grid;
  grid-template-columns: var(--e7) minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  text-decoration: none;
  transition: color var(--duree-survol) var(--courbe-survol), opacity var(--duree-survol) var(--courbe-survol);
}
.legal-sommaire__lien:hover { opacity: var(--opacite-survol); }

.legal-sommaire__num {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  color: var(--texte-attenue);
  transition: color var(--duree-survol) var(--courbe-survol);
}

/* L'article en cours de lecture : le numéro et le nom prennent l'accent. */
.legal-sommaire__lien[aria-current] { color: var(--accent); }
.legal-sommaire__lien[aria-current] .legal-sommaire__num { color: var(--accent); }

.legal-sommaire__renvoi { margin-top: var(--e2); }

/* Sous 1200 px, le sommaire ouvre la feuille, sur deux colonnes dès 641 px. */
.legal-document__marge {
  padding-bottom: var(--e7);
  border-bottom: 1px solid var(--filet);
}

@media (min-width: 641px) {
  .legal-sommaire__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e6);
  }
}

@media (min-width: 1200px) {
  .legal-document__marge { padding-bottom: 0; border-bottom: 0; }
  .legal-sommaire { position: sticky; top: var(--haut-colle); }
  .legal-sommaire__liste { display: block; }
}

/* ------------------------------------------------------------ les articles */
.legal-article {
  display: flex;
  flex-direction: column;
  gap: var(--e7);
  padding-block: var(--e8);
  border-top: 1px solid var(--filet);
}
.legal-article:first-child { padding-top: 0; border-top: 0; }
.legal-article:last-child { padding-bottom: 0; }

.legal-tete {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.legal-tete__num {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  color: var(--accent);
}

.legal-tete .h2 { max-width: 20ch; }

/* Une seule tête sur tout le document : le titre tombe toujours en deux
   lignes, l'accent seul sur la seconde, quelle que soit la place de la tête
   dans sa grille (relevé au tour 3 : une tête sur une ligne, décalée de 43 px
   par son numéro). */
.legal-tete .h2 em { display: block; }

.legal-article__chapo { max-width: 56ch; }

.legal-article__note { color: var(--texte-attenue); max-width: 72ch; }
.legal-article__note b { color: var(--texte); }

/* Deux paragraphes côte à côte, à la manière d'une colonne de journal. */
.legal-colonnes {
  display: grid;
  gap: var(--e4) var(--e7);
}
.legal-colonnes--notes .petit { color: var(--texte-attenue); }
.legal-colonnes--notes b { color: var(--texte); }

@media (min-width: 941px) {
  .legal-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.legal-mono {
  font-family: var(--police-mono);
  letter-spacing: var(--ls-etiquette);
  font-variant-numeric: tabular-nums;
}

.legal-document a:not([class]) {
  text-decoration-color: var(--accent);
  text-underline-offset: var(--e1);
}

/* ------------------------------------------------ la grille des articles */
/* Une seule grille pour les articles des mentions, 5/7 à partir de 941 px :
   tout second bloc part de la même ligne de colonne, d'un article à l'autre
   (relevé au tour 2 : quatre départs différents, de 844 à 989 px). Un enfant
   prend toute la largeur par défaut ; `__marge` tient la première colonne,
   `__corps` la seconde. Un bloc qui porte sa propre surface (le signalement,
   la carte foncée) ou ses propres rangées (les clauses) est une sous-grille :
   ses colonnes restent celles de l'article, son retrait ne décale que ses
   bords extérieurs. */
@media (min-width: 941px) {
  .legal-grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    row-gap: var(--e7);
    align-items: start;
  }
  .legal-grille > *,
  .legal-sous-grille > * { grid-column: 1 / -1; }
  .legal-grille .legal-sous-grille {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--e8);
  }
  .legal-grille .legal-grille__marge { grid-column: 1; }
  .legal-grille .legal-grille__corps,
  .legal-grille > .legal-fiche { grid-column: 2; }
}

/* ------------------------------------------------ 01, éditeur : la fiche */
/* La tête descend dans la colonne du texte : le H2 et la fiche partent de la
   même ligne, la fiche tient la colonne large. */
.legal-editeur__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
}
.legal-editeur__texte .legal-tete { margin-bottom: var(--e3); }
.legal-editeur__texte .lien-fleche { margin-top: var(--e2); }

/* La publication : un paragraphe signé sous un filet, pas une grille. */
.legal-editeur__publication {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}
.legal-editeur__publication b { font-weight: var(--graisse-moyenne); }
.legal-editeur__renvoi { color: var(--texte-attenue); }

/* ------------------------------------ 02, hébergement : l'adresse en grand */
/* La suscription d'une lettre : le nom et l'adresse de l'hébergeur au corps
   d'un titre de bloc, sous un filet de texte, sans surface ; le téléphone en
   Chivo et les serveurs dessous. Le chapô tient la marge, en gris, sous un
   filet fin : les deux colonnes partent de la même hauteur. */
.legal-adresse__chapo {
  max-width: 32ch;
  color: var(--texte-attenue);
}

.legal-adresse {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-top: var(--e5);
  border-top: 1px solid var(--texte);
  font-style: normal;
}

.legal-adresse__nom,
.legal-adresse__lignes {
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
}
.legal-adresse__lignes { color: var(--texte-attenue); }

.legal-adresse__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  color: var(--texte-attenue);
}
.legal-adresse__details .legal-mono { color: var(--texte); }

@media (min-width: 941px) {
  .legal-adresse__chapo {
    padding-top: var(--e5);
    border-top: 1px solid var(--filet);
  }
}

.legal-fiche {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  padding: var(--e6);
  border-radius: var(--rayon-carte);
  background: var(--fond-alterne);
}

.legal-fiche__titre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--texte);
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
}

.legal-fiche__cle {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.legal-fiche__nombre {
  font-size: var(--t-pastille);
  line-height: var(--lh-plein);
  letter-spacing: var(--ls-titre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--chiffre);
}

.legal-fiche__liste { margin: 0; border-top: 1px solid var(--filet); }

.legal-fiche__ligne {
  display: grid;
  gap: var(--e1);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--filet);
}

.legal-fiche__terme {
  overflow-wrap: anywhere;
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.legal-fiche__valeur {
  margin: 0;
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  overflow-wrap: anywhere;
}

.legal-fiche__mention {
  font-size: var(--t-mention);
  line-height: var(--lh-mention);
  color: var(--texte-attenue);
}

@media (min-width: 641px) {
  .legal-fiche__ligne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--e4);
  }
  .legal-fiche--large .legal-fiche__ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (max-width: 767.98px) {
  .legal-fiche { padding: var(--e5); }
}

/* ------------------------------------------------------------ le tableau */
.legal-tableau__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
}

.legal-tableau__table thead th {
  padding: 0 var(--e4) var(--e4) 0;
  text-align: left;
  vertical-align: bottom;
  font-weight: var(--graisse-normale);
}

.legal-tableau__table tbody th,
.legal-tableau__table tbody td {
  padding: var(--e4) var(--e4) var(--e4) 0;
  border-top: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
  font-weight: var(--graisse-normale);
}
.legal-tableau__table tbody tr:last-child > * { border-bottom: 1px solid var(--filet); }
.legal-tableau__table tbody th { font-weight: var(--graisse-moyenne); }
.legal-tableau__table .legal-mono { white-space: nowrap; }

/* La colonne mise en avant : Chivo et accent, comme un chiffre de registre. */
.legal-tableau__table td.legal-tableau__accent {
  font-family: var(--police-mono);
  letter-spacing: var(--ls-etiquette);
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .legal-tableau__table,
  .legal-tableau__table tbody,
  .legal-tableau__table tr,
  .legal-tableau__table th,
  .legal-tableau__table td { display: block; }

  /* Les intitulés passent devant chaque cellule (`data-libelle`). */
  .legal-tableau__table thead { display: none; }

  .legal-tableau__table tbody tr {
    padding-block: var(--e3);
    border-top: 1px solid var(--filet);
  }
  .legal-tableau__table tbody tr:last-child { border-bottom: 1px solid var(--filet); }

  .legal-tableau__table tbody th,
  .legal-tableau__table tbody td,
  .legal-tableau__table tbody tr:last-child > * {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--e3);
    padding: var(--e1) 0;
    border: 0;
  }
  .legal-tableau__table td.legal-tableau__accent { white-space: normal; }

  .legal-tableau__table tbody [data-libelle]::before {
    content: attr(data-libelle);
    font-family: var(--police-mono);
    font-size: var(--t-etiquette);
    font-weight: var(--graisse-normale);
    letter-spacing: var(--ls-etiquette);
    text-transform: uppercase;
    color: var(--texte-attenue);
  }
}

/* ------------------------------------- 02, hébergement : le signalement */
/* Une bande brume : la pilule dans la marge, le texte sur la seconde colonne
   (sous-grille à partir de 941 px). */
.legal-signalement {
  display: grid;
  gap: var(--e3);
  align-items: baseline;
  padding: var(--e5);
  border-radius: var(--rayon-carte);
  background: var(--fond-alterne);
}
.legal-signalement .calcul__pilule { justify-self: start; background: var(--fond-carte); }

@media (min-width: 941px) {
  .legal-signalement { row-gap: var(--e3); }
}

/* ------------------------------------------- 03, droits d'auteur : le texte */
.legal-droits-auteur__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: 64ch;
}

/* ---------------------------------- 03, droits d'auteur : les usages */
/* Un usage par rangée, une coche dans la colonne qui s'applique : les coches
   descendent en escalier, la règle se lit avant les phrases. La colonne des
   usages s'arrête sur la ligne de la seconde colonne de la grille : « Libre »
   part de la même ligne que la fiche, l'adresse et les notes. Un filet de
   texte sépare les usages libres de ceux qui demandent un accord. La largeur
   de la première colonne se calcule sur celle de l'article (unités de
   conteneur) : un calc() mêlant % et longueur est ignoré sur une cellule. */
.legal-usages { container-type: inline-size; }

.legal-usages__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.legal-usages__table th,
.legal-usages__table td {
  text-align: left;
  font-weight: var(--graisse-normale);
}

.legal-usages__table thead th {
  padding: 0 var(--e4) var(--e4) 0;
  vertical-align: bottom;
}
.legal-usages__table thead .legal-usages__usage { width: calc((100cqi - var(--e8)) * 5 / 12 + var(--e8)); }

/* L'intitulé de la colonne des usages : un libellé, pas une pilule. */
.legal-usages__entete {
  padding-inline: 0;
  background: none;
  color: var(--texte-attenue);
}

.legal-usages__table tbody th,
.legal-usages__table tbody td {
  padding: var(--e4) var(--e4) var(--e4) 0;
  border-top: 1px solid var(--filet);
  vertical-align: top;
}
.legal-usages__table tbody tr:last-child > * { border-bottom: 1px solid var(--filet); }
.legal-usages__rangee:not(.legal-usages__rangee--accord) + .legal-usages__rangee--accord > * { border-top-color: var(--texte); }

.legal-usages__table tbody .legal-usages__usage {
  font-size: var(--t-corps);
  line-height: var(--lh-compact);
}

.legal-usages__coche {
  display: block;
  width: var(--e5);
  height: var(--e5);
  margin-inline-start: var(--e3);
}
.legal-usages__coche path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* À partir de 768 px, la pilule de chaque case ne sert qu'à la lecture vocale :
   la coche la montre. */
@media (min-width: 768px) {
  .legal-usages__statut {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Sous 768 px, chaque rangée devient une ligne : l'usage, puis la pilule de sa
   colonne à la place de la coche. */
@media (max-width: 767.98px) {
  .legal-usages__table,
  .legal-usages__table tbody,
  .legal-usages__table th,
  .legal-usages__table td { display: block; }
  .legal-usages__table thead { display: none; }

  .legal-usages__table tbody tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e3);
    padding-block: var(--e4);
    border-top: 1px solid var(--filet);
  }
  .legal-usages__table tbody tr:last-child { border-bottom: 1px solid var(--filet); }
  .legal-usages__rangee:not(.legal-usages__rangee--accord) + .legal-usages__rangee--accord { border-top-color: var(--texte); }

  .legal-usages__table tbody th,
  .legal-usages__table tbody td,
  .legal-usages__table tbody tr:last-child > * { padding: 0; border: 0; }
  .legal-usages__case:empty,
  .legal-usages__coche { display: none; }
}

/* --------------------------- 04, valeur des contenus : la bande foncée */
/* La seule surface ardoise de la page, une bande qui court du filet du
   sommaire au bord de la feuille (d'un bord à l'autre de l'écran sous
   768 px). Sa marge négative et son retrait s'annulent : sa tête et ses
   colonnes restent sur le bord et la ligne des autres articles (relevé au
   tour 3 : la carte décalait la tête de son retrait). L'article perd son
   filet et son retrait, la bande porte les siens. Elle reprend les trois
   lignes des contextes foncés (DESIGN.md §2). */
.legal-article--portee { padding-block: 0; border-top: 0; }
.legal-article--portee + .legal-article { border-top: 0; }

.legal-portee {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  margin-inline: calc(var(--gouttiere) * -1);
  padding: var(--e7) var(--gouttiere);
  background: var(--fond-fonce);
  color: var(--texte-sur-fonce);
  --accent: var(--accent-sur-fonce);
  --texte-attenue: var(--texte-sur-fonce-attenue);
  --filet: var(--filet-sur-fonce);
}
.legal-portee .h2 { color: var(--texte-sur-fonce); }

.legal-portee__enonce {
  max-width: 36ch;
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
}

.legal-portee__suite {
  max-width: 60ch;
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
  color: var(--texte-sur-fonce-attenue);
}

/* Les trois réserves : des notes de bas de page, dans la seconde colonne,
   l'une sous l'autre et ouvertes par leur terme en gras (un intitulé en ligne,
   jamais une étiquette au-dessus). La phrase qui les introduit tient la marge,
   sous le même filet. */
.legal-notes { border-top: 1px solid var(--filet); }

.legal-notes__item {
  padding-block: var(--e4);
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  color: var(--texte-sur-fonce-attenue);
}
.legal-notes__item:last-child { padding-bottom: 0; border-bottom: 0; }
.legal-notes__item b { font-weight: var(--graisse-moyenne); color: var(--texte-sur-fonce); }

@media (min-width: 768px) {
  .legal-portee {
    margin-inline: calc(var(--e7) * -1);
    padding: var(--e8) var(--e7);
  }
}

@media (min-width: 941px) {
  .legal-portee { row-gap: var(--e6); }
}

@media (min-width: 1200px) {
  .legal-portee {
    margin-left: calc(var(--e8) * -1);
    padding-left: var(--e8);
  }
}

/* ------------------------------------------- 05, utilisation : les clauses */
/* Le numéro en Chivo et le terme ouvrent chaque clause, le texte suit. Sous
   941 px, le texte passe sous le terme, sur sa ligne. Au-delà, deux colonnes
   2/3 ; dans la grille des mentions, la tête tient la première colonne et le
   texte part de la seconde (sous-grilles). */
.legal-clauses { border-top: 1px solid var(--filet); }

.legal-clauses__item {
  display: grid;
  grid-template-columns: var(--e8) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e2) 0;
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}

.legal-clauses__tete { display: contents; }

.legal-clauses__num {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  letter-spacing: var(--ls-etiquette);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.legal-clauses__texte { grid-column: 2; max-width: 60ch; }

@media (min-width: 941px) {
  .legal-clauses__item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--e6);
  }
  .legal-clauses__tete {
    display: grid;
    grid-template-columns: var(--e8) minmax(0, 1fr);
    align-items: baseline;
  }
  .legal-grille > .legal-clauses,
  .legal-grille .legal-clauses__item {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--e8);
  }
  .legal-grille .legal-clauses__item { grid-column: 1 / -1; }
}

/* ------------------------------------------- 05, clôture : la dernière page */
/* La phrase du droit applicable en grand, à gauche comme le reste du document,
   puis les clauses, les trois dernières phrases dans la seconde colonne et la
   fin du document. */
.legal-cloture__phrase {
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
  max-width: 34ch;
}
.legal-cloture__phrase em { font-style: normal; color: var(--accent); }

.legal-cloture__suite {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  max-width: 72ch;
}
.legal-cloture__suite .petit { color: var(--texte-attenue); }

.legal-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4) var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--texte);
}

.legal-fin__mot {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}
.legal-fin__picto { display: inline-flex; color: var(--accent); }
.legal-fin__picto svg { width: var(--e4); height: var(--e4); }

/* ============================================== confidentialité seulement */

/* ------------------------------------------ 02, collecte : les traitements */
.legal-traitements { border-top: 1px solid var(--texte); }

.legal-traitements__item {
  display: grid;
  gap: var(--e4);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}

.legal-traitements__tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
}

.legal-traitements__details {
  margin: 0;
  display: grid;
  gap: var(--e3);
}
.legal-traitements__details dt {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}
.legal-traitements__details dd {
  margin: var(--e1) 0 0;
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
}

@media (min-width: 941px) {
  .legal-traitements__item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e7); }
  .legal-traitements__details { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e5); }
}

/* ---------------------------------------------- 03, parcours d'une demande */
/* Quatre étapes sur une ligne, reliées par un trait SVG étiré ; la dernière
   étape, la suppression, porte le seul segment cuivre. Sous 941 px, la ligne
   devient verticale. */
.legal-parcours {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  padding: var(--e7) var(--e6);
  border-radius: var(--rayon-carte);
  background: var(--fond-alterne);
}

.legal-parcours__schema { position: relative; }

.legal-parcours__ligne {
  position: absolute;
  top: calc(var(--e7) / 2 - var(--e1) / 2);
  left: 0;
  width: 100%;
  height: var(--e1);
}
.legal-parcours__ligne path {
  fill: none;
  stroke: var(--echelle-3);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.legal-parcours__ligne .legal-parcours__cuivre { stroke: var(--accent); }

.legal-parcours__etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.legal-parcours__etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  padding-inline: var(--e3);
  text-align: center;
}

.legal-parcours__point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--e7);
  height: var(--e7);
  border: 1px solid var(--echelle-3);
  border-radius: var(--rayon-pilule);
  background: var(--fond-carte);
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  color: var(--texte);
}
.legal-parcours__etape--fin .legal-parcours__point {
  border-color: var(--action);
  background: var(--action);
  color: var(--texte-sur-accent);
}

.legal-parcours__texte {
  max-width: 24ch;
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* Une adresse et un mot composé ne se coupent pas : relecture EKKO du 27/09,
   « contact@epargnesalariale » / « .com. » et « vous. » seul sur sa ligne à 1440. */
.legal-insecable { white-space: nowrap; }

.legal-parcours__jamais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e3);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}
.legal-parcours__jamais li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--rayon-pilule);
  background: var(--fond-carte);
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  color: var(--texte-attenue);
}
.legal-parcours__jamais svg { width: var(--e4); height: var(--e4); flex: 0 0 auto; }
.legal-parcours__jamais svg circle,
.legal-parcours__jamais svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

@media (max-width: 940.98px) {
  .legal-parcours { padding: var(--e6) var(--e5); }
  .legal-parcours__ligne { display: none; }
  .legal-parcours__etapes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }
  .legal-parcours__etapes::before {
    content: "";
    position: absolute;
    top: var(--e5);
    bottom: var(--e5);
    left: calc(var(--e7) / 2);
    border-left: 1px solid var(--echelle-3);
  }
  .legal-parcours__etape {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding-inline: 0;
    text-align: left;
  }
  .legal-parcours__point { flex: 0 0 auto; }
  .legal-parcours__texte { max-width: none; }
  .legal-parcours__jamais { justify-content: flex-start; }
}

/* ------------------------------------------ 04, destinataires : le lieu */
.legal-lieu { color: var(--texte-attenue); }

/* ------------------------------------------ 06, cookies : le zéro en grand */
.legal-cookies {
  display: grid;
  gap: var(--e7);
  align-items: start;
}

/* La carte d'un repère de l'accueil : l'énoncé en haut, le chiffre en bas,
   le vide entre les deux fait l'échelle. */
.legal-cookies__chiffre {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e7);
  min-height: calc(var(--e9) * 3);
  padding: var(--e5);
  border-radius: var(--rayon-carte);
  background: var(--fond-alterne);
}

.legal-cookies__legende {
  max-width: 14ch;
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
}

.legal-cookies__zero {
  font-size: var(--t-chiffre-cle);
  line-height: var(--lh-plein);
  letter-spacing: var(--ls-affiche);
  font-variant-numeric: tabular-nums;
  color: var(--chiffre);
}

.legal-cookies__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.legal-cookies__texte .petit { color: var(--texte-attenue); }
.legal-cookies__texte b { color: var(--texte); }

@media (min-width: 941px) {
  .legal-cookies { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e8); }
}

/* -------------------------------------------------- 07, droits : la grille */
.legal-droits {
  margin: 0;
  display: grid;
  gap: 0 var(--e6);
  border-top: 1px solid var(--texte);
}

.legal-droits__case {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--filet);
}
.legal-droits__case dt {
  font-size: var(--t-corps);
  line-height: var(--lh-compact);
  font-weight: var(--graisse-moyenne);
}
.legal-droits__case dd {
  margin: 0;
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  color: var(--texte-attenue);
}

@media (min-width: 641px) {
  .legal-droits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-droits__case--large { grid-column: 1 / -1; }
}

.legal-exercice {
  display: grid;
  gap: var(--e5);
  padding: var(--e6);
  border-radius: var(--rayon-carte);
  background: var(--fond-alterne);
}
.legal-exercice > div { display: flex; flex-direction: column; gap: var(--e3); }

.legal-exercice__terme {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--accent);
}

@media (min-width: 941px) {
  .legal-exercice { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e7); }
}

@media (max-width: 767.98px) {
  .legal-exercice { padding: var(--e5); }
}