/* =================================================================================================
   LES TROIS PAGES LÉGALES : mentions légales, politique de confidentialité, CGU.
   =================================================================================================

   Fichier séparé et non balise <style> dans les pages : la politique de sécurité de _headers
   interdit le style en ligne sur tout le site, sans exception (style-src 'self'). Il se pose PAR
   DESSUS style.css, dont il reprend les jetons de couleur, la police et le voile de mie.

   Ces pages sont de la PROSE, et non des écrans d'application. Deux différences assumées avec
   style.css :

   1. « h2 » y est un vrai titre de section, lisible, et non le micro-intitulé en capitales des
      cartes de la page de commande. Les règles ci-dessous le réécrivent sous « body.legal ».
   2. La colonne est un peu plus large que les 640 px de « .enveloppe », parce qu'un texte juridique
      se lit en paragraphes et non en champs de formulaire. 720 px tient environ 80 caractères en
      Figtree 17 px, ce qui reste dans la fourchette de confort de lecture.

   Contrainte de forme vérifiée : rien ne déborde horizontalement à 390 px de large. C'est pour cela
   qu'il n'y a AUCUN tableau dans ces trois pages, alors que la matière s'y prêterait (la liste des
   sous-traitants, la grille des offres) : un tableau à trois colonnes de texte force la largeur
   minimale du contenu et fait défiler la page de côté sur un téléphone. La même matière est rendue
   par des listes de définitions, qui se replient toutes seules.
   ============================================================================================== */

body.legal {
  /* Le voile de mie de style.css est conservé tel quel. Seule la couleur du corps monte d'un cran :
     un texte long se lit mieux dans le brun de corps que dans le gris discret. */
  color: var(--corps);
}

.legal .enveloppe {
  max-width: 720px;
  padding: 20px var(--gouttiere) 56px;
}

/* LA BARRE DE TETE : le bouton « Retour » à gauche, puis la marque. Elle porte la marge basse que
   la marque portait seule avant le 19 août 2026, sans quoi les deux se seraient décalés l'un de
   l'autre.

   Le bouton n'est PAS un lien et c'est voulu : il ne mène pas à une adresse, il défait une
   navigation, ce que seul un bouton peut dire. Il est posé caché dans les trois pages et révélé par
   /retour.js, qui ne le montre que s'il a un retour à offrir. Le motif complet, l'application qui
   sort dans le navigateur et laisse un onglet sans page précédente, est en tête de ce fichier-là. */
.legal .barre-retour {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}

.legal .retour-arriere {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Contour et non aplat : la charte réserve la cannelle à l'accent, et un aplat plein en tête de
     page pèserait plus que le titre qu'il surmonte. Même parti que les boutons secondaires de
     l'application. */
  background: none;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon-chip);
  color: var(--corps);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  /* 44 px de haut, le minimum de cible tactile d'Apple, que l'application tient déjà partout. Ces
     pages se lisent au pouce sur un téléphone, jamais à la souris. */
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
}
.legal .retour-arriere:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 3px;
}
.legal .retour-arriere .fleche {
  font-size: 18px;
  line-height: 1;
}

/* La marque redevient un lien de retour vers la racine. Elle porte donc un contour de focus, ce que
   le simple paragraphe « .marque » de style.css n'avait pas besoin d'avoir.
   Sa marge basse est passée à « .barre-retour » le 19 août 2026, qui la porte pour les deux. */
.legal .retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--croute);
  font-size: 16px;
  text-decoration: none;
  margin: 0;
  border-radius: 8px;
}
.legal .retour img {
  display: block;
  width: 24px;
  height: 24px;
}
.legal .retour:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 3px;
}

.legal h1 {
  font-size: 30px;
  margin: 0 0 8px;
}

.legal .sous {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--discret);
}

/* Le chapeau : une phrase qui dit à qui la page s'adresse, avant le sommaire. */
.legal .chapeau {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--corps);
}

/* -------------------------------------------------------------------------------------------------
   Le sommaire. Une simple liste d'ancres : sans JavaScript, c'est la seule façon de rendre un texte
   long parcourable, et un lecteur d'écran y trouve la structure de la page d'un coup.
   ---------------------------------------------------------------------------------------------- */
.legal .sommaire {
  background: var(--creux);
  border: 1px solid var(--trait-carte);
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin: 0 0 32px;
}
.legal .sommaire h2 {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--discret);
  font-weight: 600;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.legal .sommaire ol {
  margin: 0;
  padding: 0 0 0 22px;
}
.legal .sommaire li {
  margin: 0 0 6px;
  font-size: 15px;
}
.legal .sommaire li:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------------------------------
   Le corps du texte
   ---------------------------------------------------------------------------------------------- */
.legal section {
  margin: 0 0 34px;
  /* La cible d'une ancre ne doit pas se coller au bord haut de la fenêtre. */
  scroll-margin-top: 16px;
}

.legal h2 {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--titre);
  text-transform: none;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--trait);
  text-wrap: balance;
}

.legal h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--intitule);
  margin: 24px 0 8px;
}

.legal p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
}

.legal ul,
.legal ol {
  margin: 0 0 12px;
  padding: 0 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
}
.legal li { margin: 0 0 8px; }

/* La liste de définitions remplace les tableaux : elle porte la même matière (un nom, ce qu'il
   fait, où il est) sans jamais imposer de largeur minimale au contenu. */
.legal dl {
  margin: 0 0 16px;
}
.legal dt {
  font-weight: 700;
  color: var(--intitule);
  margin: 14px 0 2px;
  font-size: 17px;
}
.legal dt:first-child { margin-top: 0; }
.legal dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--corps);
}

/* Le seul fragment technique des trois pages est l'adresse fabriquee pour un compte employe. Elle
   fait 35 caracteres : en monospace a 17 px elle depasserait la gouttiere d'un ecran de 390 px, d'ou
   la taille reduite ET le point de coupure autorise partout. Mesure et non suppose. */
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--creux);
  border-radius: 6px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.legal a {
  color: var(--croute);
  /* Un lien souligné, et non seulement coloré : la couleur seule ne suffit pas à distinguer un lien
     pour qui ne perçoit pas les contrastes de teinte. */
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Une adresse email longue ne doit pas pousser la page de côté sur un téléphone. */
  overflow-wrap: anywhere;
}
.legal a:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 2px;
  border-radius: 3px;
}

/* L'encadré d'insistance : ce que le lecteur doit voir même s'il parcourt la page en diagonale.
   Bordure et fond, jamais d'ombre : l'élévation se déclare une seule fois (règle du design system,
   reprise telle quelle de style.css). */
.legal .encadre {
  background: var(--accent-doux);
  border: 1px solid var(--croute);
  border-radius: var(--rayon);
  padding: 16px 18px;
  margin: 0 0 20px;
  color: var(--accent-texte);
}
.legal .encadre p { margin: 0 0 8px; }
.legal .encadre p:last-child { margin-bottom: 0; }
.legal .encadre strong { color: var(--accent-texte); }

/* Le pied de page : les trois pages se citent l'une l'autre, pour qu'aucune ne soit un cul-de-sac. */
.legal .pied {
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--trait);
  font-size: 15px;
  color: var(--discret);
}
.legal .pied ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 15px;
}
.legal .pied li { margin: 0; }
.legal .pied p { font-size: 15px; margin: 0; }