/* =========================================================================
   Swiss Pro Moving — PAGES D'APRES.
   Ce que merci.html et 404.html ajoutent aux quatre feuilles communes.

   Se charge EN DERNIER, apres base.css et les trois feuilles de marque :
     <link rel="stylesheet" href="base.css">
     <link rel="stylesheet" href="marque/components.css">
     <link rel="stylesheet" href="marque/rayon-Composants.css">
     <link rel="stylesheet" href="marque/rayon-Marque.css">
     <link rel="stylesheet" href="pages.css">

   Sources : directions/site-swiss-pro-moving.md §1.5 (une forme par page),
   §2.3 et §2.4 (les jetons), §5.8 (merci), §5.9 (404) ;
   sites/swisspro/_SOCLE.md parties 6 et 7.

   AUCUN JETON DE PALETTE ICI, et aucune couleur en dur : tout se lit dans
   marque/tokens.css. Aucune ombre, aucun dégradé, aucun flou, aucun rayon sur
   un rectangle. Aucune requete externe, aucune police a telecharger.
   Deux pentes seulement, et elles viennent des classes de marque .pli et
   .puce : cette feuille n'en dessine aucune.
   ========================================================================= */

/* ----------------------------------------------------- 1. Regles communes */

/* [hidden] { display: none !important } vit dans base.css §2 depuis le
   19.09 : un attribut du HTML ne doit pas dependre de la feuille de page qui
   se charge ensuite. Ne pas la remettre ici. */

/* Les coordonnees que l'entreprise n'a pas encore donnees restent VISIBLES,
   entre crochets, dans l'encre du texte. Jamais en gris pale, jamais
   masquees, jamais remplacees par une valeur plausible : un crochet non
   rempli est une question posee a l'entreprise, et c'est son travail
   (cahier §1.6 point 6). La chasse fixe de DIN les detache de la phrase sans
   les eteindre. */
.a-fournir {
  font-family: var(--police-chiffre);
  font-weight: var(--graisse-medium);
  letter-spacing: .03em;
  color: var(--texte);
  white-space: nowrap;
}

/* L'ANNEAU DE FOCUS RESTE DANS LA FENETRE (controle 7 du banc de mise en
   page, §8.1). Mesure a 375 x 812 avant correction : sur merci, le dernier
   controle atteint par Tab occupait [40, 768, 319, 44], soit 768 + 44 + 4 =
   816 pour une fenetre de 812 ; sur 404, a.spm-btn--primaire occupait
   [40, 756, 185, 53], soit 756 + 53 + 4 = 813. Un a quatre pixels d'anneau
   passaient sous le bord bas.
   Cause : le defilement de navigation sequentielle cale l'element au ras du
   bord de la fenetre. Il connait la boite de l'element ; il ne sait rien de ce
   que :focus-visible dessine AUTOUR d'elle, soit --focus-epaisseur 2 px plus
   --focus-decalage 2 px.
   Reponse : scroll-margin-block, que ce defilement respecte par
   specification. La valeur couvre les 4 px de l'anneau et s'arrondit au pas de
   marque le plus proche, --e8. Cette propriete ne peint rien et ne deplace
   aucun pixel de mise en page : elle ne parle qu'au defilement, donc les
   controles 1, 8 et 13 du banc ne bougent pas d'un pixel.
   Le meme defaut, en plus grave, vit dans la barre basse du calculateur :
   fichier de L2, signale, pas touche. */
body[data-page="merci"] a,
body[data-page="merci"] button,
body[data-page="404"] a,
body[data-page="404"] button {
  scroll-margin-block: var(--e8);
}

/* LA COLONNE SE RECENTRE SUR LES GRANDS ECRANS (defaut releve sur capture le
   20.09 : « tout le contenu tient dans la moitie gauche »).
   Mesure a 1440 x 900 avant correction, sur ces deux pages :
       .bande ouvre sa colonne de texte a x = 100 et la ferme a x = 1340 ;
       mais aucun bloc ne la remplit — .temps-item s'arrete a 743 (--mesure,
       68 ch, une regle de lecture qu'on ne touche pas), .recap-zone a 620,
       le chapeau a 676, les boutons du 404 a 612.
   Il restait donc de 600 a 830 px de blanc a droite, sur toute la hauteur,
   sans rien pour tenir le bord : ce n'est plus de l'air, c'est un vide.

   Reponse : on ne change NI la mesure de lecture, NI l'alignement a gauche
   qui fait la composition du site. On reduit la colonne de la page a 800 px
   et la grille la recentre d'elle-meme. Le bloc le plus large, --mesure,
   se pose alors entre x = 384 et x = 1029 a 1440 px : 384 px de blanc a
   gauche, 411 a droite. Un texte cale a gauche demande un peu moins de marge
   du cote du fer qu'au lambeau ; l'ecart de 27 px va dans ce sens.

   Ce que la regle NE touche pas, et c'est voulu :
     · l'en-tete et le pied, qui ne sont pas des enfants de <main> : les
       quatre pages doivent garder le meme socle, au pixel (controle §7.1) ;
     · la photographie de merci, qui porte .pleine-largeur et va donc de
       pleine-d a pleine-f quelle que soit la colonne — elle continue de
       tenir les deux bords a elle seule ;
     · la bande du trajet rompu du 404, qui porte .bord-droit et court
       toujours jusqu'au bord droit de la fenetre.
   En dessous de 1080 px, rien ne change : la colonne y est deja plus etroite
   que 800 px, et la regle serait sans effet. */
@media (min-width: 1080px) {
  body[data-page="merci"] > main > .bande,
  body[data-page="404"] > main > .bande { --largeur-max: 800px; }
}

/* LA PAGE PIVOT (25.09.2026, piece 01 : demenagement-et-nettoyage-de-fin-de-
   bail-geneve.html). Elle compose les memes sections que merci (section-*,
   temps-*, preparer) mais n'avait aucune regle : a 1440 sa colonne de texte
   restait calee a gauche, 800 px de blanc a droite. Meme reponse que ci-dessus,
   la colonne de 800 px recentree par la grille ; en dessous de 1080 px, rien
   ne change. Meme marge de defilement pour l'anneau de focus. */
@media (min-width: 1080px) {
  body[data-page="pivot"] > main > .bande { --largeur-max: 800px; }
}

body[data-page="pivot"] a,
body[data-page="pivot"] button { scroll-margin-block: var(--e8); }

/* Les trois photos de la page pivot tiennent la mesure du texte, pas plus :
   une image plus large que sa colonne de lecture tirerait l'oeil hors du fil. */
.pivot-photo {
  margin-top: var(--e32);
  max-width: var(--mesure);
}

.pivot-photo img { display: block; }

/* Le bloc question-reponse : chaque question se detache de la reponse d'avant
   (releve dans PUBLIER.md, 24.09 : « chaque question en h3 suit de pres la
   reponse precedente »). */
body[data-page="pivot"] .section-preparer > h3 { margin-top: var(--e32); }

/* ------------------------------------------------ 2. merci.html · le rail */

/* Version figee du bandeau de base.css §12 : pas de <button>, des <span>.
   Le trace est entier, les cinq anneaux sont pleins, l'anneau d'arrivee est
   ferme des le chargement. La ligne ne bouge JAMAIS sur cette page, y
   compris hors prefers-reduced-motion : les deux transitions sont coupees
   ici plutot que dans le repli de base.css §16, qui ne couvre qu'un mode. */
.rail-fige .rail-arret { cursor: default; }
.rail-fige .rail-parcouru { transition: none; }
.rail-fige .rail-arrivee circle { stroke-dashoffset: 0; transition: none; }

/* LES LIBELLES PASSENT SOUS LE TRACE (defaut releve par le critique, 20.09).
   Mesure avant correction, telephone 375 : le <div class="rail rail-fige"> a
   y=306 sur 20 px de haut, la piste a y=315 sur 2 px, et les deux communes
   « 1206 Geneve » et « 1227 Carouge » se dessinaient DANS ce meme rang de
   20 px : le trait rouge traversait les mots et l'anneau d'arrivee mordait le
   « r » de Carouge.
   Cause, et elle n'est pas a moi : base.css:825 pose `.rail { height: var(--e20) }`,
   et merci.html place le <p class="rail-libelles"> DANS ce .rail. Toutes ses
   soeurs (piste, disque, cinq arrets, anneau) sont en position absolue, donc
   hors flux ; le <p> est le seul enfant en flux et se pose en haut du rail.
   Son margin-top de 6 px, qui devait l'en ecarter, se fond dans celui du rail :
   .rail est en position relative, ce qui ne cree pas de contexte de formatage,
   et la marge sort du bloc sans rien decaler.
   Reponse : le sortir du flux a son tour et le caler a 26 px du haut du rail,
   soit les 20 px du rail plus les 6 px d'ecart que base.css §12 avait prevus.
   Le budget de hauteur du bandeau est tenu au pixel :
   10 (padding haut) + 20 (rail) + 6 (ecart) + 16 (libelles) + 4 = 56 px.
   C'est EXACTEMENT le remede que calculateur.css partie 3 applique a
   .bandeau-calc .rail-libelles pour le meme defaut : meme cause, meme valeur,
   meme resultat. La correction de fond appartient a base.css, qui n'est pas de
   ce lot : signale a L0. 404.html n'est pas concerne, ses .rompu-libelles sont
   une SOEUR de .rompu-bande et passent deja sous la ligne. */
.rail-fige .rail-libelles {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--e20) + 6px);
  margin-top: 0;
}

/* Les deux communes se partagent la largeur, la moitie moins un ecart chacune,
   et l'anneau d'arrivee garde son degagement. Meme raison que
   calculateur.css : sans plafond, « 1227 Carouge » passe sous l'anneau. Ce
   rail fige n'a pas de nom d'arret, donc la moitie suffit a toutes largeurs. */
.rail-fige .rail-lieu {
  max-width: calc(50% - var(--e16));
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Une commune non saisie laisse sa place vide, sans tiret ni point
   d'interrogation : le script n'ecrit rien du tout. */

/* ETAT VIDE DU RAIL (defaut releve sur capture le 20.09). Sans donnees dans
   l'onglet, les deux etiquettes restaient vides et les cinq arrets se
   dessinaient quand meme : cinq disques rouges alignes sous l'en-tete, sans
   un mot pour dire ce qu'ils comptent. La classe vient du HTML — donc l'etat
   sans script porte deja la bonne forme — et pages.js la retire des qu'il a
   deux communes a nommer.
   On retire les ARRETS, et eux seuls : le trace, le disque de depart et
   l'anneau ferme disent « arrive », ce qui reste vrai sans les communes. La
   boite des etiquettes part avec eux, sinon elle garde une ligne d'air sous
   le trait pour deux mots absents.
   display: none et non visibility: hidden — un disque invisible garderait sa
   surface dans le comptage du rouge du banc §8.1. */
.rail-fige.rail-sans-lieux .rail-arret,
.rail-fige.rail-sans-lieux .rail-libelles { display: none; }

/* -------------------------------- 3. merci.html · la bande d'arrivee */

/* L'unique aplat rouge et l'unique pli de la page (cahier §1.5), et le seul
   endroit du site ou cette feuille corrige le cahier. §5.8 posait ici un
   GRAND aplat portant le h1 blanc ; §1.5 et le banc §8.1 interdisent au
   rouge de depasser un dixieme du premier ecran. En tete de page, les deux
   ne tiennent pas ensemble : a 1440 x 900, un dixieme vaut 90 px de hauteur
   sur toute la largeur, et un titre en condensee noire avec son chapeau n'y
   entre pas. Mesure du banc avant correction : 38,5 % / 28,6 % / 34,8 % aux
   trois largeurs. L'aplat reste donc, nu, reduit a un filet, et le titre
   passe en noir sur blanc dessous (le meme arbitrage est ecrit en tete de
   merci.html).

   La couleur, le blanc de son texte et la pente de son pli viennent toujours
   de .spm-bloc-marque et de .pli : cette feuille ne dessine ni couleur ni
   diagonale. Elle regle deux mesures, et par variable.

   1. La hauteur. .spm-bloc-marque pose padding-block: var(--e80), soit
      160 px de rouge sur toute la largeur : 12,3 % de l'ecran a 1440 x 900 a
      lui seul. Le filet fait var(--e48) : 48 x 1 440 = 69 120 px2, 5,3 % de
      1 296 000 px2, et 5,6 % a 375 x 812.

   2. La course du pli. Le pli descend de la MOITIE de sa course (tokens.css
      §4 : --pli-montee = --pli-course / 2), soit 120 px de descente a
      1 440 px de large. Sur un filet de 48 px, ce pli passe sous le bord bas
      et emporte le coin droit du filet. On raccourcit la course a 64 px ; la
      PENTE ne bouge pas, elle reste 1 : 2, la pente d'ouverture de la marque
      (banc §8.1, dixieme ligne, liste close des pentes).
      ⚠️ --pli-montee doit etre reecrite ici aussi : une propriete
      personnalisee est substituee la ou elle est DECLAREE. Celle de :root a
      deja avale la course de :root ; redeclarer la seule course ne la
      recalculerait pas, et le pli garderait ses 120 px.

   SECOND ARBITRAGE DU 20.09 — la bande porte enfin quelque chose.
   Le filet nu de 48 px a ete releve sur capture comme « une bavure
   d'impression en travers de la page » : ni la frise de rappel, ni un aplat
   qui porte quelque chose, et son pli de 64 px sur 1 440 de large (4,4 % de
   la largeur) se lisait comme une ebrechure, pas comme un pli.
   L'issue « le h1 blanc dans l'aplat » a ete mesuree puis ECARTEE : a
   375 x 812, le h1 (77 px) et le chapeau (50 px) coutent 200 px de bande
   avec leurs marges, soit 75 000 px2 = 24,6 % du premier ecran pour un
   plafond de 10 %. Le demonstratif est dans merci.html, au-dessus de la
   bande.

   Ce que la bande porte donc : la SIGNATURE de la marque, arretee dans
   marque/slogan/_CHOIX.md, blanche sur --marque (4,87:1, jeton --sur-marque).
   Aucune copie n'est inventee, aucun montant n'apparait, aucune croix n'est
   dessinee.

   Trois mesures, et trois seulement :

   1. La hauteur, --e64. Le compte du dixieme, mesure au navigateur cette
      session sur le reste du rouge du premier ecran (rail compris) :
          375 x 812   64 x 375 + 626   = 24 626 px2 →  8,1 %
          768 x 1024  64 x 768 + 1 380 = 50 532 px2 →  6,4 %
          1440 x 900  64 x 1440 + 2 538 = 94 698 px2 → 7,3 %
      Les trois largeurs du banc §8.1 restent sous 0,10. La ligne C8 du banc
      etait verte a 4,9 / 5,5 / 6,1 % avec 48 px ; elle le reste.

   2. La course du pli, 128 px, et sa montee, 64 px. La montee vaut
      exactement la hauteur de la bande : le pli ne mord plus un coin, il
      COUPE l'angle sur toute la hauteur, et c'est la seule forme lisible
      d'un pli sur une bande basse et large. La PENTE ne bouge pas, 1 : 2,
      la pente d'ouverture de la marque (banc §8.1 ligne 10, liste close).
      ⚠️ --pli-montee se reecrit ici aussi, meme raison qu'au paragraphe
      precedent : celle de :root a deja avale la course de :root.

   3. Le calage de la signature. La bande porte AUSSI .bande : elle prend
      donc la grille de page, et la signature se pose sur le meme bord gauche
      que le h1 juste dessous — sans cette grille elle collerait au bord de
      la fenetre. align-content centre l'unique rangee dans les 64 px ;
      .spm-bloc-marque pose padding-block: var(--e80), qui ferait 160 px de
      rouge a lui seul et doit etre remis a zero. */
.bande-arrivee {
  --pli-course: 128px;
  --pli-montee: 64px;
  padding-block: 0;
  min-height: var(--e64);
  align-content: center;
}

/* Reglage CONTEXTUEL, meme idiome que base.css §13 pour .spm-btn--fantome :
   .spm-chapeau porte 32 px sous elle pour se separer de ce qui suit. Ici,
   c'est .section-temps qui pose deja l'ecart (§4 juste dessous), et les deux
   s'additionnaient en 112 px — .section-arrivee porte .bande, donc une
   grille, et une grille ne fusionne pas les marges de ses enfants. Un seul
   proprietaire de l'ecart. */
.arrivee-corps .spm-chapeau { margin-bottom: 0; }

/* ------------------------------------------- 4. merci.html · rythme vertical */

/* Un seul proprietaire de l'ecart : margin-top. La sequence est inegale a
   dessein — le titre, la photographie et le panneau sont trois respirations
   de longueur differente, et un pas unique les aplatirait.
   Toutes les valeurs sont des pas de l'echelle de marque ; le palier median
   en posait trois qui n'en etaient pas (72, 112, 56).
   Le filet d'arrivee, lui, touche le rail : il n'a pas de marge haute. */
.section-arrivee  { margin-top: var(--e48); }
.section-temps    { margin-top: var(--e80); }
.section-photo    { margin-top: var(--e64); }
.section-recap    { margin-top: var(--e96); }
.section-preparer { margin-top: var(--e96); }
.section-contact  { margin-top: var(--e64); }
.section-fin      { margin: var(--e64) 0; }

@media (min-width: 1080px) {
  .section-arrivee  { margin-top: var(--e64); }
  .section-temps    { margin-top: var(--e128); }
  .section-photo    { margin-top: var(--e96); }
  .section-recap    { margin-top: var(--e160); }
  .section-preparer { margin-top: var(--e160); }
  .section-contact  { margin-top: var(--e96); }
  .section-fin      { margin: var(--e96) 0; }
}

/* ------------------------------------------- 5. merci.html · les trois temps */

/* Trois moments reels dans le temps, separes par des filets. Pas de
   pastilles numerotees, pas de cartes : les numeros ne diraient rien que
   « Aujourd'hui », « Sous deux jours ouvrables » et « Apres la visite » ne
   disent mieux. Le filet est --filet, le filet de separation de la marque,
   et non --filet-fort qui est un bord de champ.

   ⚠️ PAS DE `padding-left: 0` ICI, ET C'EST UNE CORRECTION (20.09).
   La feuille en posait un, par reflexe, pour retirer le retrait de liste du
   navigateur. Il n'y en avait pas a retirer : base.css §3 pose deja
   `.bande > * { padding-left: var(--retrait-rail) }`, qui l'emporte sur la
   regle du navigateur. Ce zero ne tuait donc pas le retrait de liste, il
   tuait le RETRAIT DE RAIL du site — 64 px au-dela de 1080 px.
   Mesure a 1440 x 900 : le titre « Ce qui se passe ensuite » commencait a
   x = 384 et les filets de ses trois temps a x = 320, soit une section dont
   les traits sortaient de 64 px a gauche de son propre titre. La preuve que
   c'est un oubli et non une intention : .preparer, l'autre liste de la meme
   page, ne pose pas ce zero et se cale, elle, a 384. Deux listes d'une meme
   page ne peuvent pas avoir deux bords gauches.
   Le defaut existait avant le recentrage de la colonne (§1) ; celui-ci le
   rendait seulement impossible a ne plus voir. Meme correction sur .contact,
   §9. A 375 px, --retrait-rail vaut 0 : rien ne change au telephone. */
.temps {
  margin-top: var(--e32);
  list-style: none;
}

.temps-item {
  margin-top: 0;
  padding: var(--e24) 0;
  max-width: var(--mesure);
  border-top: var(--filet-epaisseur) solid var(--filet);
}

.temps li + li { margin-top: 0; }

.temps-item:last-child { border-bottom: var(--filet-epaisseur) solid var(--filet); }

.temps-delai {
  font-family: var(--police-chiffre);
  font-size: var(--t-petit);
  letter-spacing: .05em;
  color: var(--texte-secondaire);
}

.temps-item h3 { margin: var(--e4) 0 0; }

.temps-phrase { margin-top: var(--e8); color: var(--texte-secondaire); }

/* La phrase de portee est la suite de celle du dessus, pas une note : meme
   corps, meme encre. Une seule des deux est levee, et jamais dans le
   canton. */
.temps-portee { margin-top: var(--e8); color: var(--texte-secondaire); }

.temps-rappel { margin-top: var(--e12); }

/* ---------------------------------- 6. merci.html · la photographie d'arrivee */

/* Pleine largeur, sans coupe en rabat : le quota de deux coupes appartient a
   l'accueil (§1.5). Le cadre est plafonne a la largeur native du fichier
   pour qu'aucun ecran large ne l'agrandisse — une image etiree de 25 % est
   une image molle, et le banc de mise en page mesure le rapport rendu contre
   le rapport natif a 2 % pres. Aucun recadrage pour la meme raison. */
.section-photo .spm-photo {
  max-width: 1536px;
  margin-inline: auto;
}

.section-photo .spm-photo img { display: block; }

/* -------------------------------------- 7. merci.html · le recapitulatif lu */

/* Le panneau de base.css §13, en lecture seule : aucun bouton « Modifier »
   sur les lignes, et le bloc de resultat ne s'anime pas. Ce qu'il rend n'est
   plus un montant mais une phrase (cahier §5.5 et §5.8).
   L'emplacement du repere reste hidden et vide : il n'a pas de regle ici, et
   il n'en aura pas dans deux feuilles de page le jour ou il s'allume — sa
   place est base.css §13, aupres du bloc de resultat qu'il complete. */
.recap-zone {
  margin-top: var(--e32);
  max-width: 520px;
}

.bouton-sous-panneau { margin-top: var(--e24); }

/* --------------------------------------------- 8. merci.html · a preparer */

/* L'unique liste de marque de la page : cinq rabats en miniature. Les filets
   du palier median sont partis — une puce ET un filet font deux marqueurs
   pour une seule liste. La cinquieme ligne peut etre masquee, donc rien ne
   se raccroche a :last-child. */
.preparer {
  margin-top: var(--e32);
  max-width: var(--mesure);
}

.preparer li + li { margin-top: var(--e12); }

/* ------------------------------------------ 9. merci.html · contact et fin */

.contact-texte { margin-top: var(--e16); color: var(--texte-secondaire); }

/* Ni l'un ni l'autre n'est un lien : un href vers un crochet est un lien
   mort. Ce sont deux lignes de texte, et la valeur attendue s'y voit.
   Pas de `padding-left: 0` : meme correction et meme demonstration qu'en §5
   sur .temps — ce zero effacait le retrait de rail du site, pas le retrait de
   liste du navigateur, et decalait les deux coordonnees de 64 px a gauche de
   leur propre titre. */
.contact {
  margin-top: var(--e24);
  list-style: none;
}

.contact li {
  margin-top: 0;
  font-size: var(--t-texte-large);
  color: var(--texte);
}

.contact li + li { margin-top: var(--e12); }

/* L'effacement est une action mineure : bouton secondaire, aligne a gauche,
   et la confirmation juste dessous dans une region vive deja presente au
   chargement.
   ⚠️ justify-self n'est pas un ornement. .section-fin porte AUSSI la classe
   .bande : c'est donc une grille, et ses enfants sont des elements de grille,
   que « stretch » etire sur les 1 240 px de la colonne. Mesure au navigateur
   le 20.09 sans cette ligne : le bouton faisait 1 176 px de large pour trois
   mots. Une action mineure ne prend pas la largeur de la page.
   ⚠️ Et le retrait de rail s'applique en MARGE, pas en remplissage. Quatrieme
   et derniere occurrence du meme defaut qu'en §5, §9 et §10 : base.css §3
   pose `padding-left: var(--retrait-rail)` sur tout enfant de .bande, ce qui
   convient a une section mais pas a un bouton — les 64 px entraient DANS la
   boite du bouton. Mesure a 1440 x 900 : son bord gauche tombait a x = 320
   quand tout le reste de la page se cale a 384, et son libelle partait 64 px
   a droite de ce bord, hors d'axe avec son propre cadre. On rend au bouton le
   remplissage de sa classe de marque, --btn-principal-marge-i, et on passe le
   retrait en marge, ou il deplace la boite entiere.
   A 375 px, --retrait-rail vaut 0 : rien ne change au telephone. */
.bouton-effacer {
  justify-self: start;
  padding-left: var(--e24);
  margin-left: var(--retrait-rail);
}

.section-fin [role="status"] { margin-top: var(--e12); }

/* --------------------------------------------- 10. 404.html · trajet rompu */

/* Le pied ne tombait pas en bas de fenetre : le corps devient une colonne
   d'au moins une fenetre, le <main> prend le reste, et align-content centre
   son contenu dans la hauteur qui lui revient au lieu de le coller en haut.
   Vise le seul body[data-page="404"] : les trois autres pages defilent et ne
   doivent rien recevoir de tout ca. 100dvh et jamais 100vh. */
body[data-page="404"] {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body[data-page="404"] > .spm-entete,
body[data-page="404"] > .spm-pied { flex-shrink: 0; }

body[data-page="404"] > main {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.page-404 { padding-top: var(--e48); }

/* Le trajet s'interrompt. Meme grammaire que le rail : disque de depart,
   trace plein sur les 62 % de gauche, anneau creux qui ne s'est jamais
   rempli, puis des tirets qui sortent du cadre.
   Le fond est l'unique zone de semis du site : la respiration au-dessus et
   en dessous lui donne de quoi se voir. Le semis est discret par
   construction (3,5 % de couverture mesures par le paquet de marque) : ne
   pas le foncer, il passerait devant le texte.

   LA RESPIRATION VALAIT --e32, ET C'ETAIT TROP PEU (defaut releve sur
   capture le 20.09 : les rabats se lisaient comme des salissures grises
   posees a cheval sur le trait rouge). Ce n'est pas une impression, c'est de
   la geometrie, et elle se verifie a la main dans deux fichiers.

     assets/motifs/semis-rabats.svg — carreau de 192 px, quatre rabats :
       rangee haute   y = 36 → 52
       rangee basse   y = 132 → 148
     Le masque est pose par components.css §11 en `inset: 0`, donc son origine
     est le coin haut-gauche de la BOITE DE REMPLISSAGE de .rompu : l'ordonnee
     d'un rabat se compte depuis le haut du padding.

   Avec --e32 en haut, .rompu-bande commencait a y = 32 et .rompu-plein, qui
   porte `top: 9px`, tracait ses 2 px de rouge entre y = 41 et y = 43 —
   c'est-a-dire DANS la rangee haute des rabats (36 → 52). Le trait coupait
   les quatre formes en deux, et la hauteur totale de la zone, 124 px, ne
   laissait pas voir la rangee basse : un seul carreau tronque, aucun motif.

   Avec --e64, le trait descend a y = 73 → 75, entre les deux rangees, et la
   zone fait 64 + 20 + 8 + 32 + 64 = 188 px : les deux rangees du carreau,
   36 → 52 et 132 → 148, s'y lisent ENTIERES. Le disque de depart (y 69 → 79)
   et l'anneau creux (y 64 → 84) restent eux aussi entre les rangees, et les
   deux etiquettes (y 92 → 124) n'en touchent aucune.
   Les 4 px manquants du carreau, de 188 a 192, ne portent aucune forme : le
   motif est complet sans que la zone ait a faire 192 px.
   On monte la zone plutot que de sortir la ligne du semis : le cahier §5.9
   veut le semis DERRIERE la bande du trajet, et le critere de fini de L3 ne
   compte qu'un seul `spm-semis` dans la page.

   LE RETRAIT DE RAIL EST REPOSE A GAUCHE, et c'est la meme correction qu'en
   §5 sur .temps : le raccourci `padding: X 0` remettait padding-left a zero
   et effacait le `padding-left: var(--retrait-rail)` que base.css §3 pose sur
   tout enfant de .bande. Mesure a 1440 x 900 : le disque de depart et
   l'etiquette « Accueil » commencaient a x = 320, le h1 de la page a 384 —
   64 px de decalage entre le trajet et le titre qu'il annonce. Le semis, lui,
   ne bouge pas : son ::before est pose en `inset: 0`, donc il couvre la boite
   de remplissage et continue de courir jusqu'au bord droit de la fenetre.
   A 375 px, --retrait-rail vaut 0 : rien ne change au telephone. */
.rompu {
  padding: var(--e64) 0 var(--e64) var(--retrait-rail);
  margin-bottom: var(--e48);
}

.rompu-bande {
  position: relative;
  display: block;
  height: var(--e20);
}

.rompu-plein {
  position: absolute;
  left: calc(var(--trajet-depart-taille) / 2);
  right: 38%;
  top: 9px;
  height: var(--trajet-trait);
  background: var(--trajet-parcouru);
}

/* Les tirets courent jusqu'au bord droit de la page : .bord-droit va de la
   colonne de texte au bord, la ligne n'a donc rien a deborder pour sortir. */
.rompu-tirets {
  position: absolute;
  left: 62%;
  right: 0;
  top: 9px;
  height: 0;
  border-top: var(--filet-epaisseur) dashed var(--trajet-restant);
}

.rompu-depart {
  position: absolute;
  left: 0;
  top: 10px;
  width: var(--trajet-depart-taille);
  height: var(--trajet-depart-taille);
  margin-top: calc(var(--trajet-depart-taille) / -2);
  border-radius: var(--rayon-rond);
  background: var(--trajet-parcouru);
}

/* Le seul anneau creux du site : il ne s'est jamais rempli, et c'est tout ce
   que la page a besoin de dire. Memes dimensions que l'anneau d'arrivee du
   rail, pour que ce soit visiblement le meme objet. */
.rompu-anneau {
  position: absolute;
  left: 62%;
  top: 10px;
  width: var(--trajet-arrivee-taille);
  height: var(--trajet-arrivee-taille);
  margin: calc(var(--trajet-arrivee-taille) / -2) 0 0 calc(var(--trajet-arrivee-taille) / -2);
  background: var(--fond);
  border: var(--trajet-arrivee-trait) solid var(--trajet-parcouru);
  border-radius: var(--rayon-rond);
}

.rompu-libelles {
  position: relative;
  display: block;
  height: var(--e32);
  margin-top: var(--e8);
  max-width: none;
  font-family: var(--police-chiffre);
  /* --t-petit, et non --t-micro : le jeton a change de SENS en passant du
     palier median a la marque (cahier §2.3, ligne du tableau des jetons
     morts). Le micro-texte du site vaut 0,875 rem et s'appelle desormais
     --t-petit ; le --t-micro de la marque vaut 0,8125 rem et sert aux
     MENTIONS LEGALES. Une etiquette de trajet n'est pas une mention legale :
     ecrire --t-micro la rapetissait de 14 px a 13 px sans erreur de console. */
  font-size: var(--t-petit);
  line-height: var(--e16);
  letter-spacing: .03em;
  color: var(--texte-secondaire);
}

.rompu-lieu { position: absolute; top: 0; }
.rompu-lieu-depart { left: 0; white-space: nowrap; }

/* Centre sur l'anneau creux. 76 % au plus : 62 % plus la moitie du bloc ne
   peut alors pas depasser le bord droit, a aucune largeur. */
.rompu-lieu-arret {
  left: 62%;
  max-width: 76%;
  overflow: hidden;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

/* Le chemin demande reste masque et vide : une page d'erreur qui affiche
   l'arborescence locale du chantier est une fuite de developpeur. La boite
   est conservee pour la mise en ligne. */
.rompu-chemin {
  display: block;
  overflow: hidden;
  /* Meme jeton que la ligne du dessus, et pour la meme raison : le chemin
     demande est du micro-texte de site, pas une mention legale. */
  font-size: var(--t-petit);
  text-overflow: ellipsis;
}

/* ----------------------------------------------- 11. 404.html · le contenu */

.section-404 h1 { margin-top: var(--e32); }

.section-404 .spm-btns { margin-top: var(--e32); }

.ligne-contact {
  margin-top: var(--e24);
  margin-bottom: var(--e64);
  color: var(--texte-secondaire);
}

@media (min-width: 1080px) {
  .page-404 { padding-top: var(--e64); }
  .ligne-contact { margin-bottom: var(--e96); }
}

/* --------------------------------------------------- 12. Mouvement reduit */

/* Cette feuille n'ajoute aucun mouvement : il n'y a rien a replier ici. Les
   seules transitions que ces deux pages heritent sont celles des boutons,
   deja repliees par marque/tokens.css §4, et celles du rail, coupees en
   partie 2 de cette feuille dans les DEUX modes.
   Toute retouche ajoute son repli, ou n'est pas livree. */

/* En-tête d'une seule ligne sur téléphone (audit mobile 21.09, P1-8 et P2-9).
   Le bouton de l'en-tête (« Estimer mon déménagement ») ne tient pas à côté du
   logo à 375 px et passait à la ligne. Sur ces deux pages il DOUBLE une action
   déjà présente dans le contenu (merci : les deux liens vers le calculateur ;
   404 : « Revenir à l'accueil » et « Estimer mon déménagement ») : sous
   600 px il s'efface, le logo ramène à l'accueil. */
@media (max-width: 599px) {
  body[data-page="merci"] .entete-corps > .spm-btn,
  body[data-page="404"] .entete-corps > .spm-btn { display: none; }
}

/* ------------------------------------- confidentialite.html (05.10.2026)
   Une colonne de lecture, comme la page pivot : la mesure du texte, centree
   par la grille au-dela de 1080 px. Aucun visuel. */
.page-texte { padding-top: var(--e48); padding-bottom: var(--e64, 64px); }
.section-texte h2 { margin-top: var(--e32); }
.section-texte p { max-width: var(--mesure); margin-top: var(--e16); }
.section-texte .spm-btns { margin-top: var(--e32); }
@media (min-width: 1080px) {
  body[data-page="confidentialite"] > main > .bande { --largeur-max: 800px; }
}