/* =====================================================================
 * zeMoritz — LES DEUX PAGES LÉGALES
 *
 * Mentions légales et Politique de confidentialité. Une seule feuille pour
 * les deux : elles ont la même composition, et rien ne justifierait d'en
 * écrire deux.
 *
 * Écrite le 28 août 2026. Préfixe « .legal- », vérifié absent de
 * styles.css, realisations.css et contact.css avant d'être employé.
 *
 * AUCUNE MAQUETTE N'EXISTE de ces deux pages — dossier OneDrive vérifié
 * vide le 28 août. Tout ce qui suit est TRANSPOSÉ du desktop validé de
 * Contact, et chaque cote dit sur quoi elle s'appuie. Contact est la page
 * la plus proche : pas d'écran d'ouverture, un bandeau de page, du texte
 * suivi dans une colonne de lecture.
 *
 * LA SEULE CHOSE VRAIMENT NEUVE EST LA HIÉRARCHIE DE TITRES (§ 3). Les
 * trois pages du site n'ont qu'un titre et du texte ; un texte juridique a
 * dix parties. Elle est construite avec les voix qui existent déjà, sans en
 * inventer une seule.
 *
 * Cette feuille n'habille aucun sélecteur du tronc.
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 0. [TRONC] Bandeau de page
 *
 * COPIÉ de contact.css, qui l'avait lui-même copié de realisations.css où
 * il est marqué [TRONC] — et non déplacé : deux conversations n'écrivent
 * pas dans le tronc en même temps. À la fusion, une seule copie survivra et
 * servira aux QUATRE pages sans écran d'ouverture.
 *
 * ⚠ « data-site-header » est posé sur ce bandeau pour régler le seuil du
 * header au survol. Conséquence relevée le 27 août sur Réalisations :
 * script.js y écrit « --p: 1 » en style en ligne et lui ajoute
 * « est-compact ». Un seul sélecteur du tronc en dépend ici — la réduction
 * du logo — et il est neutralisé juste en dessous. Sans le « transform:
 * none », le facteur 0,62 du tronc s'appliquerait une seconde fois sur une
 * largeur déjà réduite et le logo tomberait de 273 à 169 px, sans erreur et
 * sans que rien d'autre ne bouge. C'est le premier point à vérifier sur
 * cette page.
 * ------------------------------------------------------------------- */

.legal-bandeau__blanc {
  height: 110px;
  display: grid;
  place-items: center;
  background: var(--color-white);
}

.legal-bandeau__blanc .brand-link {
  display: block;
  width: 273px;        /* la cote de la maquette, écrite et non obtenue par réduction */
  margin-inline: auto;
  transform: none;     /* neutralise la réduction du tronc — voir ci-dessus */
}

.legal-bandeau__blanc .brand-logo {
  width: 273px;
  height: auto;
  display: block;
}

/*
 * « .compact-nav » du tronc est en position absolue, invisible, et son
 * opacité dépend de « --p ». Ici la barre est un objet ordinaire : on
 * neutralise ces trois états. On ne touche pas au tronc, on le recouvre.
 */
.legal-bandeau__nav {
  position: static;
  height: 56px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ---------------------------------------------------------------------
 * 1. Gabarit de la page
 *
 * Coquille de 994 px et colonne de lecture de 617, comme Réalisations et
 * Contact. C'est la continuité qui commande, pas le contenu : les trois
 * pages sans écran d'ouverture posent leur première encre au même endroit,
 * et passer de l'une à l'autre ne doit pas faire sauter le bord gauche du
 * texte.
 * ------------------------------------------------------------------- */

.legal-shell {
  width: min(calc(100% - 2 * var(--gutter)), 994px);
  margin-inline: auto;
}


/* ---------------------------------------------------------------------
 * ⚠ PAS DE RÉSERVE BASSE EN BUREAU — DÉCISION DE FLORIAN DU 30 AOÛT 2026.
 *
 * Cette section portait « padding-bottom: 40px », la réserve basse du
 * gabarit. Elle est retirée EN BUREAU, et en bureau seulement.
 *
 * Pourquoi. Le pictogramme ZZ ne tombait pas au même endroit d'une page à
 * l'autre. MESURÉ à 1440 le 30 août : sur l'accueil, dont la maquette v4 est
 * la seule qui existe, le pictogramme fait 82 px de large et s'arrête à
 * 32 px du filet du pied de page — les 32 px étant la seule réserve haute du
 * pied de page lui-même. Sur les deux pages légales, il faisait 100 px et s'arrêtait
 * à 72 px : 40 px de réserve basse, puis les 32 px du pied de page.
 *
 * Florian a tranché sur image : « 82 et 32 sont les invariants du site ».
 * Les six fiches projets les respectent aussi.
 *
 * ⚠ LA RÉSERVE BASSE MOBILE, ELLE, NE BOUGE PAS. Le bloc sous 900 px garde
 * ses 32 px : la composition mobile de cette page a été jugée sur l'iPhone
 * de Florian et validée telle quelle. C'est pour cela que la valeur mobile
 * est écrite ici sans valeur bureau au-dessus d'elle — ce n'est pas un
 * oubli.
 * ------------------------------------------------------------------- */
.legal {
  position: relative;
  padding-top: 56px;    /* la réserve haute de Contact et de Réalisations */
}


/* ---------------------------------------------------------------------
 * 2. L'ouverture : titre, date, chapô
 *
 * TRANSPOSITION LITTÉRALE de Contact : 27 / 34 pour le titre, 42 / 46 pour
 * le chapô, largeurs décroissantes 994 → 868 → 617.
 *
 * La ligne de date est le seul élément que les autres pages n'ont pas. Elle
 * est OBLIGATOIRE ET DOIT ÊTRE EN TÊTE : le texte lui-même se termine par
 * « la date de dernière mise à jour est indiquée en tête de page ». Elle
 * prend le corps et la couleur de la mention d'information de Contact —
 * 16 px, gris bleuté, 4,99:1 sur blanc — parce qu'elle joue le même rôle :
 * une information de service, lisible, qui ne prend pas la parole avant le
 * texte.
 *
 * Elle se place ENTRE le titre et le chapô, et non après. Elle qualifie la
 * page, comme une date sous un titre d'article ; posée après le chapô, elle
 * se serait glissée entre la phrase d'ouverture et le corps, c'est-à-dire
 * au milieu de la lecture.
 * ------------------------------------------------------------------- */

.legal-titre {
  max-width: 868px;
  margin: 0;
  color: var(--color-anthracite);
  font-size: 27px;
  font-weight: var(--weight-semibold);
  line-height: 34px;
}

.legal-date {
  max-width: 617px;
  margin: 6px 0 0;
  color: var(--color-blue-gray);
  font-size: 16px;
  line-height: 24px;
}

.legal-chapo {
  max-width: 868px;
  margin: 14px 0 0;
  color: var(--color-orange-mid);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--weight-bold);
  line-height: 46px;
}


/*
 * (Une règle « .legal--sans-chapo » a vécu ici quelques minutes, le temps
 * que les mentions légales n'aient pas de phrase d'introduction. Florian en
 * a écrit une le soir même : les deux pages ont donc un chapô, plus aucune
 * page n'emploie ce modificateur, et il est retiré. Le projet n'écrit pas
 * de règle pour un cas qui n'existe pas — et n'en garde pas non plus.)
 */


/* ---------------------------------------------------------------------
 * 3. LA HIÉRARCHIE DE TITRES — le seul travail neuf de cette page
 *
 * Le site n'en avait pas besoin jusqu'ici : ses trois pages n'ont qu'un
 * titre et du texte suivi. Ce texte-ci a dix parties.
 *
 * ELLE N'INVENTE AUCUNE VOIX NOUVELLE. Elle emploie celle qui existe déjà :
 * les titres de partie sont en Barlow gras anthracite 27 / 34, exactement
 * comme « Écrivez-moi » sur Contact, qui est le seul « h2 » du site.
 *
 * Pourquoi le titre de partie fait la même taille que le « h1 » de la page,
 * et pourquoi ce n'est pas une faute : sur ce site, le « h1 » n'est pas
 * l'élément dominant de l'ouverture — c'est une étiquette de 27 px posée
 * au-dessus d'un chapô de 42. Le chapô domine, le titre nomme. Les titres
 * de partie sont donc les plus gros anthracites de la page, ce qui est leur
 * rôle, et ils ne concurrencent pas une ouverture qui joue sur une autre
 * couleur et une autre taille.
 *
 * L'ÉCART AU-DESSUS D'UN TITRE EST FIXE, et c'est délibéré : 44 px, contre
 * 15 entre deux paragraphes. Le rapport de 1 à 3 suffit à faire voir la
 * coupure sans qu'on ait à la chercher. Les « souffles » du tronc, qui
 * s'ouvrent avec la hauteur de fenêtre, ont été écartés ici : ils sont
 * faits pour des sections qui occupent un écran, pas pour un rythme qui se
 * répète dix fois dans un texte qu'on lit d'une traite — ils auraient
 * allongé la page de plus de 400 px sur un grand écran, sans rien apporter
 * à la lecture.
 *
 * PAS DE TROISIÈME NIVEAU. Ce texte n'a pas de sous-parties, et le projet
 * n'écrit pas de règle pour un cas qui n'existe pas. Si les mentions
 * légales en demandent un, il s'ajoutera là, et il sera soumis.
 * ------------------------------------------------------------------- */

.legal-corps {
  max-width: 617px;
  margin-top: 34px;   /* l'interligne du titre — la respiration avant la première partie */
}

.legal-corps h2 {
  margin: 44px 0 12px;
  color: var(--color-anthracite);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: var(--weight-bold);
  line-height: 34px;
}

/*
 * Le premier titre de partie suit déjà les 34 px de « .legal-corps » : il
 * ne prend pas en plus les 44 px de coupure, qui n'ont rien à séparer.
 */
.legal-corps > h2:first-child {
  margin-top: 0;
}

.legal-corps p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

/*
 * LES SOUS-TITRES. Posés le 4 octobre 2026 avec la partie « Prospection
 * commerciale ». C'est le premier « h3 » des pages légales : jusqu'ici la
 * page n'avait que des titres de partie et du texte.
 *
 * 21 px se lit ENTRE les deux cotes déjà posées, 27 pour le titre de partie
 * et 18 pour le texte. Le rapport au texte, 21 / 18 = 1,17, suffit à faire
 * voir un sous-titre sans qu'il dispute jamais sa partie.
 *
 * L'ÉCART AU-DESSUS EST DE 26 px, ET CE N'EST PAS UN CHIFFRE NEUF : c'est
 * l'interligne du corps du texte. « .legal-corps » prend 34 px au-dessus
 * parce que 34 est l'interligne du titre ; c'est la même règle, transposée
 * d'un cran. Les 44 px du titre de partie lui restent : ils marquent une
 * coupure, et un sous-titre n'en marque pas.
 *
 * La marge basse de 12 px ne bouge pas : c'est l'attache du titre à son
 * texte, et elle vaut pour les deux niveaux.
 */
.legal-corps h3 {
  margin: 26px 0 12px;
  color: var(--color-anthracite);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--weight-bold);
  line-height: 28px;
}

.legal-corps p + p {
  margin-top: 15px;
}

/*
 * Les liens en plein texte ne reçoivent aucune règle : ils gardent le
 * traitement du tronc, comme sur Contact. Leur cible tactile n'atteint pas
 * les 44 px du site, écart accepté par Florian le 28 août — un lien au
 * milieu d'un paragraphe se rend confortable par son interligne, pas en
 * gonflant les mots. Ici l'interligne est de 26 px.
 */


/* ---------------------------------------------------------------------
 * 4. Les listes à puces
 *
 * Trois listes dans ce texte. La puce est posée EN DEHORS de la colonne de
 * texte, à l'aplomb exact du bord gauche des paragraphes : le texte des
 * items reste aligné sur lui-même, et rien ne dépasse du bloc.
 *
 * La puce est un disque de 6 px en orange moyen. C'est le seul endroit où
 * la couleur du site entre dans le corps de la page, et elle n'y porte
 * aucun sens : le texte se lit entièrement sans elle.
 * ------------------------------------------------------------------- */

.legal-corps ul {
  margin: 15px 0 0;
  padding-left: 22px;
  list-style: none;
}

.legal-corps li {
  position: relative;
  font-size: 18px;
  line-height: 26px;
}

.legal-corps li + li {
  margin-top: 6px;
}

/*
 * Le paragraphe qui SUIT une liste reprend l'écart des paragraphes. Sans
 * cette ligne il se colle au dernier item et se lit comme un sixième item :
 * le défaut s'est vu au premier essai, sous « Finalité du traitement ».
 */
.legal-corps ul + p {
  margin-top: 15px;
}

.legal-corps li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 10px;          /* centré sur la ligne de 26 px */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange-mid);
}


/* ---------------------------------------------------------------------
 * 5. Le bloc d'adresse
 *
 * Le responsable du traitement s'écrit en quelques lignes courtes. Ce n'est
 * ni un paragraphe ni une liste : les retours à la ligne y sont du sens.
 * Corps et interligne du texte courant, sans aucune fantaisie.
 *
 * CHAQUE LIGNE EST UN « span » EN BLOC, ET NON UN « br ». Le rendu est le
 * même au pixel en desktop ; la différence n'apparaît qu'en mobile, où une
 * ligne trop longue passe à la ligne et doit rentrer de 20 px pour qu'on
 * voie qu'elle est la suite de la précédente (§ M2). Un « text-indent »
 * négatif ne traite que la PREMIÈRE ligne d'un bloc : avec des « br », il
 * n'aurait rentré que la suite de la première ligne d'adresse et laissé
 * toutes les autres au bord. Le sens des retours à la ligne étant porté par
 * le balisage, il pouvait être dessiné.
 * ------------------------------------------------------------------- */

.legal-adresse {
  margin: 15px 0 0;
  font-size: 18px;
  line-height: 26px;
}

.legal-adresse > span {
  display: block;
}


/* ---------------------------------------------------------------------
 * 6. Pictogramme de fin de page
 *
 * Même cote et même rôle que sur les trois autres pages : il ferme <main>
 * et sert de butée au « Retour en haut ».
 *
 * RÉSERVE HAUTE DE 86 px — 56 + 30. Ni les 56 de Réalisations, ni les 125 de
 * Contact.
 *
 * La demande de Florian, le 28 août au soir, après avoir vu la page : « il
 * faudrait plus d'espace entre le haut du picto zz et la fin du texte […]
 * redescendre l'ensemble du footer de l'équivalent de la hauteur de
 * l'avant-bras du singe ». C'est la deuxième fois qu'il chiffre un écart en
 * prenant une partie du dessin comme étalon — sur Contact, c'était « à peu
 * près la hauteur des z ».
 *
 * L'AVANT-BRAS EST MESURÉ DANS LE DESSIN, PAS ESTIMÉ À L'ŒIL. Le
 * pictogramme a été rendu à dix fois sa taille et le bord gauche de la
 * silhouette relevé ligne par ligne, en unités du « viewBox » (0 0 100 160,
 * donc 1 unité = 1 px à la cote de rendu de 100 x 160) :
 *
 *   - de y 32 à y 55, le bord se déplace vers la DROITE en descendant
 *     (+0,1 à +0,2 par unité) : c'est le bras ;
 *   - à partir de y 56, il se déplace vers la GAUCHE (-0,4 à -0,6) : le
 *     sens s'inverse, c'est le COUDE ;
 *   - à y 86, il saute de 3,1 d'un coup : la main s'élargit, c'est le
 *     POIGNET, à y 85.
 *
 *   COUDE 55 → POIGNET 85 = 30 px.
 *
 * (Mesuré jusqu'au bas de la main, à y 90, on trouverait 35. C'est
 * l'avant-bras qui a été demandé, donc coude à poignet.)
 *
 * Le geste porte sur la réserve du pictogramme, ce qui descend AUSSI tout le
 * pied de page : c'est exactement ce que Florian demande — « redescendre
 * l'ensemble du footer ». Aucune règle du tronc n'est touchée, et les cotes
 * de « .rea-mark », « .project__mark » et « .contact-mark » ne bougent pas.
 * ------------------------------------------------------------------- */

.legal-mark {
  margin: 86px auto 0;
  display: block;
  width: 82px;   /* 82 et non 100 : voir la note du 30 août ci-dessus */
}

.legal-mark img {
  width: 100%;
  height: auto;
  display: block;
}


/* =====================================================================
 * SOUS 900 px — LE CHASSIS, PUIS LA COMPOSITION
 *
 * Ce bloc contient deux choses, écrites à deux dates :
 *
 *   - LE CHASSIS (§ M0), écrit le 28 août 2026 avec les deux pages : le
 *     bandeau de page, sans lequel la page serait fausse et non seulement
 *     mal composée ;
 *   - LA COMPOSITION MOBILE (§ M1 et suivants), écrite le 29 août 2026.
 *     Fenêtre de composition : 375 x 768 px, l'iPhone 11 Pro de Florian,
 *     mesuré sur une capture de son appareil.
 *
 * (Ce commentaire disait, jusqu'au 29 août, que la composition mobile
 * n'était pas faite. Il a été corrigé le jour où elle a été écrite : un
 * commentaire périmé part chez le visiteur et piège la reprise suivante.
 * Le défaut a été payé trois fois sur ce chantier.)
 *
 * POURQUOI LE BANDEAU EST OBLIGATOIRE DÈS MAINTENANT. « data-bandeau-
 * permanent » est posé sur le <body> : le header fixe du site est là dès le
 * premier pixel. Sans ce bloc, le bandeau de page garderait ses cotes
 * d'ordinateur — 166 px de haut, logo de 273 centré — et le header fixe de
 * 76 px viendrait se poser dessus : deux logos superposés et une réserve
 * haute fausse.
 *
 * Les cinq gestes sont ceux du § D de la liste à cocher, et les cotes sont
 * COPIÉES de la première moitié du bloc mobile de contact.css, elle-même
 * copiée de « .rea-bandeau ». Conséquence voulue : le header fixe se pose
 * sur ce bandeau sans rien déplacer d'un pixel.
 *
 * La cote de bascule est celle du site, 900 px, et il n'y en a pas d'autre.
 * ===================================================================== */

@media (max-width: 899px) {

  /* ..................................................................
   * M0. LE CHASSIS — le bandeau de page
   *
   * Écrit le 28 août 2026. Les cinq gestes du § D de la liste à cocher,
   * COPIÉS de la première moitié du bloc mobile de contact.css, elle-même
   * copiée de « .rea-bandeau ». Conséquence voulue : le header fixe se pose
   * sur ce bandeau sans rien déplacer d'un pixel.
   * .................................................................. */

  .legal-bandeau__blanc {
    height: var(--mob-bandeau);        /* 76 px */
    display: flex;                     /* reprise explicite du « grid » desktop */
    align-items: center;
    justify-content: flex-start;       /* reprise explicite de « place-items: center » */
    padding-inline: var(--mob-marge);  /* 20 px */
  }

  .legal-bandeau__blanc .brand-link {
    width: var(--mob-logo-compact);    /* 160 px */
    margin-inline: 0;                  /* reprise explicite du « auto » desktop */
    margin-top: 5px;                   /* le logo n'est pas centré : il descend */
  }

  .legal-bandeau__blanc .brand-logo {
    width: var(--mob-logo-compact);
  }

  /*
   * Avec JavaScript, le header fixe est posé exactement sur ce bandeau. Le
   * laisser peint dessous laisserait une seconde cible clavier invisible
   * sous la première — ce que le projet interdit. « visibility » et non
   * « display » : la boîte de 76 px reste, donc la réserve sous le header
   * fixe reste, et « #haut-de-page » reste une cible d'ancre positionnable.
   * « display: none » casserait la flèche de remontée, qui vise cette ancre.
   */
  .js .legal-bandeau__blanc {
    visibility: hidden;
  }

  /*
   * Reprise EXPLICITE, non complétée : à trois entrées, la navigation du
   * bandeau dépasse 320 px de large, et le projet interdit tout défilement
   * horizontal de 320 à 1920 px. Le menu du site reste atteignable par le
   * burger du header fixe.
   */
  .legal-bandeau__nav {
    display: none;
  }


  /* ..................................................................
   * M1. LA COMPOSITION — passe A, l'ouverture et le texte
   *
   * 29 août 2026. Aucune maquette de ces deux pages n'existe — dossier
   * OneDrive vérifié vide le 28 août. Tout ce qui suit est TRANSPOSÉ, et
   * chaque cote dit sur quoi elle s'appuie. La source est Contact mobile,
   * composée la veille, elle-même transposée de Réalisations mobile :
   * c'est la page la plus proche — pas d'écran d'ouverture, même bandeau
   * de 76 px, même suite titre / chapô / corps.
   *
   * Largeur de composition : 375 px. Fenêtre : 375 x 768.
   *
   * ⚠ CETTE FEUILLE HABILLE DEUX PAGES. Tout ce qui suit vaut pour les
   * mentions légales ET pour la politique de confidentialité — et les deux
   * pages doivent porter la même chaîne « ?v= » dans la même livraison.
   * .................................................................. */

  /*
   * La colonne passe de 327 à 335 px, et son bord gauche de 24 à 20.
   *
   * Même défaut, même remède que sur Contact le 28 août : sans cette
   * ligne, la coquille retombe sur « --gutter », qui vaut 24 px sous 900,
   * quand Réalisations et Contact posent leur colonne à 20. Passer de
   * l'une à l'autre faisait sauter le texte de 4 px. « --mob-colonne » est
   * la colonne de Réalisations mobile, au pixel — 335 à 375, plafonnée à
   * 560 sur tablette.
   */
  .legal-shell {
    width: var(--mob-colonne);
  }

  /*
   * Réserve haute : 56 → 36 px. En desktop la page respire 56 px sous un
   * bandeau de 166 ; en mobile le bandeau tombe à 76 et la réserve se
   * resserre avec lui. Cote de Réalisations mobile et de Contact mobile :
   * les quatre pages sans écran d'ouverture posent leur première encre à
   * 112 px du haut.
   *
   * Réserve basse : 40 → 32 px, la même cote sur les deux mêmes pages.
   * (Décidée en passe B, écrite ici parce qu'elle appartient au gabarit.)
   */
  .legal {
    padding-top: 36px;
    padding-bottom: 32px;
  }

  /*
   * Titre 27 / 34 → 22,5 / 29, la cote de « .rea-titre » et de
   * « .contact-titre », elle-même reprise du « h1 » de l'ouverture mobile
   * de Présentation.
   *
   * « max-width: none » : les 868 px du desktop ne bornent plus rien sous
   * 900, mais la reprise est explicite. Une règle de composition se redit,
   * elle ne s'hérite pas.
   */
  .legal-titre {
    max-width: none;
    font-size: 22.5px;
    line-height: 29px;
  }

  /*
   * La date ne change ni de corps ni de couleur : 16 px, gris bleuté.
   * Même raison que la mention d'information de Contact, restée à 16 en
   * mobile — c'est déjà le plus petit texte de la page, et le rétrécir
   * encore en ferait une note illisible. Elle ne contient aucun lien : son
   * interligne n'a pas à s'ouvrir comme celui de la mention.
   *
   * Son écart au titre reste à 6 px. Redit, non hérité.
   */
  .legal-date {
    max-width: none;
    margin-top: 6px;
  }

  /*
   * Chapô 42 / 46 → 33,5 / 38, la cote de « .rea-chapo » et de
   * « .contact-chapo », reprise des grands titres mobiles de 02-4 et 02-5.
   *
   * C'EST LE DÉFAUT LE PLUS LOURD DES DEUX PAGES, et il est plus lourd
   * qu'il ne l'était sur Contact. Mesuré à 375 x 768 avant cette passe :
   * le chapô de la politique occupait 552 px sur les 768 de l'écran —
   * DOUZE lignes —, celui des mentions 506 px sur onze lignes. Le corps du
   * texte commençait à y 801 sur la politique : le premier écran ne
   * contenait pas une ligne de texte courant. Après : huit lignes et
   * 304 px, corps à y 521.
   *
   * Le rapport titre / chapô est conservé — x 1,56 en desktop, x 1,49 ici,
   * exactement comme sur Réalisations et sur Contact.
   *
   * Son écart à la date reste à 14 px. Redit, non hérité : c'est un petit
   * blanc entre deux lignes de texte, pas une respiration de section, et
   * les petits blancs ne se resserrent pas.
   */
  .legal-chapo {
    max-width: none;
    margin-top: 14px;
    font-size: 33.5px;
    line-height: 38px;
  }

  /*
   * Corps 18 / 26 → 17 / 26 : le corps de TOUTE la page mobile de
   * Présentation, celui de Réalisations mobile et celui de Contact mobile.
   *
   * L'écart au-dessus du corps suit le même raisonnement qu'en desktop, où
   * il vaut 34 px — l'interligne du titre. Le titre passant à 29, il passe
   * à 29 : c'est la règle qui est transposée, pas le chiffre.
   */
  .legal-corps {
    max-width: none;
    margin-top: 29px;
  }

  .legal-corps p,
  .legal-corps li,
  .legal-adresse {
    font-size: 17px;
    line-height: 26px;
  }

  /*
   * Écart entre paragraphes : 15 px, la même valeur qu'en desktop, que sur
   * Réalisations mobile, sur Contact mobile et sur 02-1 et 02-5. Redit
   * explicitement, non hérité.
   */
  .legal-corps p + p {
    margin-top: 15px;
  }

  /*
   * LES TITRES DE PARTIE suivent le « h1 », comme en desktop où tous deux
   * sont à 27 / 34. Le « h1 » descendant à 22,5 / 29, ils le suivent :
   * sans quoi ils deviendraient les plus gros anthracites de la page,
   * au-dessus de son propre titre. C'est exactement l'arbitrage rendu sur
   * « Écrivez-moi » le 28 août.
   *
   * L'ÉCART DE 44 px AU-DESSUS NE BOUGE PAS, sur une page qui devient
   * pourtant très longue en mobile — près de six mille pixels pour la
   * politique. La question a été chiffrée avant d'être tranchée : descendu
   * à 34 px, il ferait gagner 72 px sur TOUTE la politique, qui compte dix
   * titres. C'est 1,2 % de la page pour un rapport de 1 à 3 cassé — le
   * seul signal qui fait voir les coupures sans qu'on les cherche. La
   * longueur d'une page ne se gagne pas sur sa lisibilité.
   *
   * La marge basse de 12 px ne bouge pas non plus : elle attache le titre
   * à son texte, et cette attache est indépendante de la largeur.
   */
  .legal-corps h2 {
    font-size: 22.5px;
    line-height: 29px;
  }

  /*
   * LES SOUS-TITRES en mobile. Le texte descend de 18 à 17, le titre de
   * partie de 27 à 22,5.
   *
   * LE SOUS-TITRE NE PEUT PAS SUIVRE LA PROPORTION DU TITRE DE PARTIE :
   * 21 x 0,833 donnerait 17,5, soit un demi-pixel au-dessus du corps du
   * texte — il cesserait d'être un titre. C'est donc LE RAPPORT AU TEXTE
   * qui est transposé, 1,17 comme en desktop : 17 x 1,17 = 19,9, arrondi à
   * 19,5 pour rester franchement sous les 22,5 du titre de partie.
   *
   * La hiérarchie tient aux deux largeurs : 27 / 21 / 18 en desktop,
   * 22,5 / 19,5 / 17 en mobile.
   *
   * L'interligne descend à 26, celui du corps, comme l'écart au-dessus.
   */
  .legal-corps h3 {
    font-size: 19.5px;
    line-height: 26px;
  }


  /* ..................................................................
   * M2. LA COMPOSITION — passe B, les listes, les adresses, le bas de page
   *
   * 29 août 2026, après validation de la passe A par Florian (« c'est
   * nickel »). Même méthode : tout est transposé, et chaque cote dit sur
   * quoi elle s'appuie.
   * .................................................................. */

  /*
   * LES LISTES. Le retrait passe de 22 à 20 px, et la puce le suit : elle
   * reste à l'aplomb exact du bord gauche des paragraphes, ce qui est toute
   * la raison d'être de ce montage.
   *
   * 20 px est la marge mobile du site — « --mob-marge ». C'est le même
   * geste que la gouttière du formulaire de Contact, passée de 24 / 25 à
   * 20 : en mobile les blancs se resserrent, les contenus ne rétrécissent
   * pas (P4.0 § 3.3). Sur une colonne de 335 au lieu de 617, deux pixels
   * repris au retrait sont deux pixels rendus au texte des items.
   *
   * Le disque de 6 px ne change ni de taille ni de couleur, et son calage
   * vertical non plus : l'interligne reste à 26 px, donc (26 - 6) / 2 = 10.
   * Une puce est un signal, pas un contenu — elle ne suit pas le corps du
   * texte quand il descend.
   */
  .legal-corps ul {
    padding-left: 20px;
  }

  .legal-corps li::before {
    left: -20px;
  }

  /*
   * LES BLOCS D'ADRESSE — le seul vrai problème de composition de ces deux
   * pages en mobile.
   *
   * Ce ne sont ni des paragraphes ni des listes : les retours à la ligne y
   * sont du sens. Sur une colonne de 335, la ligne la plus longue ne tient
   * plus — celle de l'éditeur fait 87 signes. Mesuré à 375 avant cette
   * passe : l'adresse des mentions occupait SEPT lignes pour six déclarées,
   * celle de la politique SIX pour cinq. La ligne de retour se collait sous
   * la précédente, au même bord gauche, et se lisait comme une ligne
   * d'adresse à part entière.
   *
   * LES TEXTES SONT FIGÉS AU MOT PRÈS : la coupure ne peut pas être traitée
   * dans le HTML, et il n'était pas question de rétrécir le corps pour
   * faire tenir une ligne.
   *
   * Le remède est un RETRAIT DE CONTINUATION : la première ligne reste au
   * bord, les lignes de retour rentrent de 20 px. Le sens du bloc est
   * rendu par le dessin — ce qui commence au bord est une ligne d'adresse,
   * ce qui est rentré est la suite de la précédente.
   *
   * 20 px, la même valeur que le retrait des listes : la page n'a qu'un
   * seul signal de continuation, et il a une seule taille.
   *
   * La règle porte sur les « span » et non sur le paragraphe : un
   * « text-indent » ne traite que la première ligne d'un bloc. C'est la
   * raison pour laquelle les lignes d'adresse sont des blocs et non des
   * « br » — voir le § 5.
   */
  .legal-adresse > span {
    padding-left: 20px;
    text-indent: -20px;
  }

  /*
   * LE PICTOGRAMME DE FIN : 100 → 83 px, la cote du pictogramme mobile de
   * 02-6, reprise par Réalisations mobile puis par Contact mobile.
   *
   * SA RÉSERVE HAUTE EST RECALCULÉE, PAS RECOPIÉE : 86 → 73 px.
   *
   * Le desktop de ces deux pages porte 86 là où Réalisations porte 56,
   * parce que Florian a demandé le 28 août de descendre le bas de page « de
   * l'équivalent de la hauteur de l'avant-bras du singe » — 30 px relevés
   * dans le dessin, à la cote de rendu de 100. C'est ce raisonnement qui se
   * transpose, et non le chiffre : la réserve mobile de Réalisations est de
   * 48 px, et l'avant-bras à la cote de 83 vaut 30 x 83 / 100, soit 25.
   *
   *   48 + 25 = 73.
   *
   * (Transposer le chiffre par simple proportion — 86 x 48 / 56 — donnerait
   * 73,7. Les deux voies convergent à moins d'un pixel, ce qui est le signe
   * que la cote est juste ; celle qui est écrite est celle qui suit le
   * raisonnement de Florian. C'est exactement ce qui s'est passé sur
   * Contact, où 105 et 107 convergeaient de la même façon.)
   */
  .legal-mark {
    width: 83px;
    margin-top: 73px;
  }

}