/*
 * Portail public de saisine.
 *
 * Les justiciables sont souvent âgés et consultent depuis un téléphone : corps de
 * texte large, contrastes francs, cibles tactiles généreuses, aucune animation.
 * Les couleurs reprennent celles de la Justice, sans en usurper les emblèmes.
 */

:root {
  --encre: #1b2733;
  --encre-douce: #5a6b7d;
  --sceau: #2d6da3;
  --sceau-clair: #3a83c0;
  --papier: #f4f6f9;
  --blanc: #ffffff;
  --trait: #dbe2ea;
  --alerte: #b3261e;
  --alerte-fond: #fdf0ef;
  --vert: #1d6b3f;
  --vert-fond: #eff7f2;
  --ambre: #8a5a00;
  --ambre-fond: #fdf6e8;

  /*
   * La largeur d'une case de saisie.
   *
   * Une case aussi large que la carte laisse croire qu'on attend davantage : on
   * hésite devant un rectangle de neuf cents pixels pour écrire « DURAND ». Et
   * une case dont on ne voit pas la fin ne se relit pas.
   *
   * Trente-quatre rems, soit environ six cents pixels : de quoi écrire une
   * adresse complète sans que la case dépasse ce que l'œil embrasse. Les champs
   * qui portent de la prose — le récit, les précisions — n'en dépendent pas, et
   * un code postal a sa propre borne, plus courte encore.
   */
  --saisie: 34rem;
  /*
   * Il n'y a plus de mesure de la prose, et c'est délibéré.
   *
   * Deux variables la portaient — --prose pour les paragraphes, --bloc pour les
   * encarts et le récapitulatif — et elles ont été bornées trois fois, à 74 puis
   * 78 puis 100 caractères. Les trois fois le conciliateur a redemandé la même
   * chose : que le texte aille au bout de la carte. Le défaut se voit sur
   * n'importe quelle capture d'écran — un bord droit déchiqueté au milieu de la
   * carte, deux cents pixels de blanc derrière lui, et des paragraphes qui
   * flottent dans un cadre trop grand pour eux au lieu de le remplir.
   *
   * Le compte en `ch` était de surcroît un mauvais outil : il se résout sur la
   * police de l'élément qui l'emploie, si bien que la même valeur donnait des
   * bords différents selon le corps du texte, et qu'aucun réglage ne les faisait
   * tomber ensemble.
   *
   * Les variables sont supprimées plutôt que mises à 100 % : une variable qui
   * signifie « pas de limite » est une invitation à y réécrire un nombre, et la
   * demande a déjà été contournée deux fois de cette manière-là.
   *
   * L'argument de lisibilité — au-delà d'une certaine longueur l'œil ne retrouve
   * plus le début de la ligne suivante, et les justiciables sont souvent âgés —
   * n'était pas faux, mais il ne vaut pas contre une demande explicite et
   * répétée. Il reste tenu ailleurs, et de façon visible : la carte s'arrête à
   * 1 144 pixels, le corps est à 17,5 px, l'interligne à 1,65. C'est là que se
   * règle le confort de lecture, pas dans une borne interne qui creuse un blanc.
   *
   * Ce qui garde une mesure propre en garde une pour une raison qui lui
   * appartient : --saisie ci-dessus, et la colonne des libellés du
   * récapitulatif. Pas la prose.
   */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Dix-sept pixels et demi, et une interligne large : les justiciables sont
     souvent âgés, et c'est le premier réglage qui compte avant toute autre
     amabilité de mise en page. */
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
}

a { color: var(--sceau); }

/* Bandeau d'environnement (préprod) : bande pleine largeur, ambre, en tête des
   portails publics. En production il n'est jamais rendu (voir index.php / depot.php). */
.bandeau-env {
  background: #b45309;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 6px 12px;
}

.bandeau {
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
  padding: 18px 0;
}

/* Un seul bord gauche, un seul bord droit, et c'est la carte qui les tient.

   Trois essais pour y arriver, et les deux premiers étaient à regarder pour le
   comprendre. 1 520 px de carte : la case « Nom » faisait 1 450 px de large, plus
   longue que l'écran d'un téléphone posé en travers. Puis 1 180 px de carte avec
   une colonne centrée de 640 : deux cents pixels de blanc de chaque côté À
   L'INTÉRIEUR de la carte, et le contenu qui flottait au milieu sans se raccrocher
   à rien.

   La faute était de centrer un bloc étroit dans un bloc large. Un paragraphe court
   aligné à gauche dans une carte large ne flotte pas : il commence au même endroit
   que tout le reste, et c'est la ligne qui est courte, non le bloc qui est perdu.

   Restait le blanc de droite, et il a survécu à trois élargissements successifs
   parce qu'à chaque fois la borne interne de la prose repartait un cran en deçà
   du cadre. C'est réglé par la suppression de cette borne : la ligne va jusqu'au
   bord de la carte et revient quand elle y arrive. La longueur de ligne se règle
   maintenant là où elle est visible — sur la largeur de la carte — et non dans un
   compte de caractères qui, lui, ne se voit pas.

   Ce qui a besoin d'une mesure propre en garde une, et pour une raison qui lui
   appartient : les cases de saisie (--saisie), parce qu'un rectangle de neuf cents
   pixels pour écrire « DURAND » laisse croire qu'on attend un paragraphe. */
/* Élargi d'un dixième sur demande du conciliateur : le récapitulatif y gagne,
   ses valeurs cessant de se replier sur deux lignes pour trois mots. */
.contenant { width: min(1144px, calc(100% - 32px)); margin: 0 auto; }

.bandeau .contenant { display: flex; align-items: center; gap: 16px; }
.bandeau img { height: 52px; width: auto; }
.bandeau .titre { font-size: 19px; font-weight: 640; line-height: 1.25; }
.bandeau .sous-titre { font-size: 14.5px; color: var(--encre-douce); }

main { padding: 28px 0 56px; }

/* Le titre de la page se centre : il annonce l'étape, il n'ouvre pas un
   paragraphe. Tout le reste part du bord gauche — un texte centré se lit mal, ses
   lignes ne commençant jamais au même endroit, et un intertitre centré au-dessus
   d'une liste alignée à gauche laisse un bord gauche qui ne correspond à rien.
   C'est la règle, et elle n'a que cette exception. */
h1 {
  font-size: 31px;
  line-height: 1.22;
  margin: 0 0 6px;
  font-weight: 640;
  text-align: center;
}

/* Un trait sous le titre, et de l'air : sur une carte large, le titre et le
   premier paragraphe se touchaient sans que rien ne dise où l'un finit. */
h1 { padding-bottom: 18px; border-bottom: 1px solid var(--trait); margin-bottom: 24px; }

h2 { font-size: 22px; margin: 0 0 14px; font-weight: 620; }

/* h3 ouvre une section à l'intérieur de l'étape — « Déjà reçus », « Pour finir ». */
h3 { font-size: 18px; margin: 28px 0 10px; font-weight: 620; }

/* Un reçu se lisait centré, sur 62 caractères, au motif que c'est un document
   qu'on regarde et non qu'on lit. La page de confirmation en porte davantage que
   trois phrases — ce qui va suivre, les délais, ce qu'on peut encore faire — et
   centrée dans une carte de 1 080 pixels elle laissait deux bandes de blanc, avec
   des lignes qui ne commencent jamais au même endroit.

   Elle suit donc la règle de tout le reste du portail : un seul bord gauche, un
   seul bord droit, celui de la carte. Seuls la référence et son encart restent
   centrés, plus bas — eux se regardent vraiment.

   Il n'y a plus de règle à écrire ici pour cela : le texte du reçu se comporte
   comme tout autre texte de la page dès lors que rien ne le centre ni ne le
   borne. Le commentaire reste, lui, parce qu'il dit pourquoi on ne recentrera
   pas. */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 28px 32px;
  margin-bottom: 20px;
}

.intro { color: var(--encre-douce); margin: 0 0 18px; }
/* Le premier paragraphe d'une carte s'écrivait à l'encre pleine, les suivants à
   l'encre douce, au motif qu'il dit ce qu'on attend de l'étape et se lit en
   premier. Sur un paragraphe de quatre phrases — celui des documents — l'écart
   d'encre ne se lit pas comme une hiérarchie mais comme du gras, et le
   conciliateur a demandé qu'on l'enlève. Tous les chapeaux ont donc la même encre :
   ce qui distingue le premier, c'est d'être le premier. */
.intro:last-child { margin-bottom: 0; }

/* ── Progression ────────────────────────────────────────────────────────── */

/* Le fil des étapes se centre sous le bandeau : c'est un repère, pas une liste à
   lire. Calé à gauche d'une carte large, il pendait dans le coin. */
.etapes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: 14px;
}
.etapes li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
}
.etapes li .rang {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--trait);
  font-size: 12px;
  font-weight: 640;
}
.etapes li.faite { color: var(--vert); border-color: #bcdcc9; background: var(--vert-fond); }
.etapes li.faite .rang { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
/* L'étape courante était distinguée par une bordure d'un pixel et un texte en
   demi-gras. Sur un écran de téléphone, à bout de bras, cinq pastilles presque
   identiques ne disent pas où l'on est. Celle-ci est maintenant pleine. */
.etapes li.courante {
  color: var(--blanc);
  border-color: var(--sceau);
  background: var(--sceau);
  font-weight: 640;
}
/* Passe de lecture intégrale du 2026-08-16 : la règle était écrite deux fois, et la
   première (rang blanc sur pastille pleine) perdait toujours contre celle-ci. */
.etapes li.courante .rang { background: var(--sceau); border-color: var(--sceau); color: var(--blanc); }

/* ── Champs ─────────────────────────────────────────────────────────────── */

/* Les justiciables sont souvent âgés : le libellé se lit à la taille du texte
   courant, non deux points en dessous, et l'aide juste après lui plutôt qu'en
   note de bas de champ. */
.champ { margin-bottom: 22px; }
/* L'intitulé d'un champ, et lui seul.
 *
 * Sans le :not(.option), cette règle attrapait aussi la case de consentement, qui
 * est un label posé directement dans son champ. Elle est plus spécifique que
 * « .option » — une classe et un type contre une classe — et lui imposait donc
 * display:block. La case redevenait un caractère dans le fil du texte : les lignes
 * suivantes repassaient dessous, au lieu de s'aligner sur la première. Sur un
 * écran de bureau la phrase tenait sur une ligne et rien ne se voyait ; sur un
 * téléphone elle en prend trois. */
.champ > label:not(.option) { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
/* L'aide se lit comme de la prose : elle s'arrête donc où s'arrête la prose,
   c'est-à-dire au bord de la carte. Elle a porté un temps une borne à elle, née
   d'une comparaison avec le récit voisin — celle d'« Autres documents » courait
   plus large que le champ qu'elle expliquait. Le récit ne se borne plus non plus,
   la comparaison ne tient donc plus. */
.champ .aide { font-size: 15px; color: var(--encre-douce); margin-bottom: 8px; }
.champ .facultatif { font-weight: 400; color: var(--encre-douce); font-size: 15px; }

/* Un code postal ou une somme n'ont pas besoin de toute la colonne : une case de
   900 px pour cinq chiffres laisse croire qu'on en attend davantage. */
.champ.court > input { max-width: 220px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  max-width: var(--saisie);
  /* Quarante-huit pixels de haut : la cible tactile que les deux systèmes
     recommandent, et qu'un doigt de quatre-vingts ans atteint sans viser. */
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid #b9c4d0;
  border-radius: 7px;
}

/* Sur iOS un champ de type date se tasse sans hauteur explicite. */
input[type=date] { min-height: 46px; }

/* Le récit, lui, porte de la prose : il prend la mesure d'un paragraphe, non celle
   d'une case — c'est le seul champ où l'on écrit des phrases, et il n'est donc pas
   borné à --saisie comme les autres. On y écrit ce qu'on relira comme du texte : il
   s'arrête où s'arrête le texte de la page, au bord de la carte.

   `max-width: none` est indispensable et non décoratif : la règle groupée
   ci-dessus lui impose --saisie, et sans cette levée le récit serait la seule
   chose de la page à rester dans une colonne de six cents pixels. */
textarea { min-height: 170px; max-width: none; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sceau);
  box-shadow: 0 0 0 3px rgba(45, 109, 163, .16);
}

.champ.faux input, .champ.faux select, .champ.faux textarea { border-color: var(--alerte); }
.erreur { color: var(--alerte); font-size: 14.5px; margin-top: 6px; font-weight: 560; }

/* Une paire de champs partage la largeur d'un seul : code postal et commune se
   lisent ensemble et tiennent dans la même colonne que le reste. */
.duo { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch;
       max-width: var(--saisie); }
.duo input, .duo select { max-width: none; }
.duo .champ { flex: 1 1 190px; margin-bottom: 20px; display: flex; flex-direction: column; }
.duo .champ.court { flex: 0 1 160px; }

/* Deux champs côte à côte n'ont pas le même texte d'aide : « Le constat d'accord
   signé en fin de conciliation la porte » tient sur deux lignes là où « La commune,
   et le pays » n'en prend qu'une. Empilés simplement, leurs cases se retrouvaient
   à deux hauteurs différentes. La case est donc poussée en bas de son champ, et
   les deux s'alignent quoi que disent les libellés au-dessus. */
.duo .champ > input,
.duo .champ > select,
.duo .champ > .options { margin-top: auto; }

/* Sauf quand l'un des deux porte un reproche : le message allonge sa colonne,
   et l'ancrage en bas envoyait la case voisine s'aligner sur le bas du message —
   décrochée de son libellé, un blanc entre les deux. La paire fautive s'aligne
   alors par le haut : chaque case reste sous son libellé, le reproche pend sous
   la sienne. Les navigateurs sans :has() gardent l'ancrage en bas, qui se lit. */
.duo:has(> .champ.faux) .champ > input,
.duo:has(> .champ.faux) .champ > select,
.duo:has(> .champ.faux) .champ > .options { margin-top: 0; }

/* Le reproche est resté dans le flux, et il y reste.

   Il en sortait pour ne pas déjouer l'alignement des cases : un champ fautif
   devenait plus haut que son voisin, sa case remontait d'autant, et les deux se
   retrouvaient en escalier. Trente pixels lui étaient réservés dessous, fautif
   ou non, pour que la hauteur ne dépende pas de ce que le serveur a eu à dire.

   Trente pixels, c'est une ligne. « Cette date donne plus de 120 ans : vérifiez
   l'année » en fait deux dans une colonne de cent quatre-vingt-dix pixels, et la
   seconde se posait par-dessus le libellé du champ suivant — deux textes
   superposés, dont un en rouge.

   Réserver une hauteur, c'est parier sur la longueur d'une phrase qu'on n'écrit
   pas ici. Le reproche reprend donc sa place dans le flux : la case du champ
   fautif remonte de la hauteur du message, ce qui se voit à peine et ne cache
   rien. Un champ en faute est fait pour se distinguer de son voisin. */
.duo .champ { margin-bottom: 20px; }

/* Le « display: flex » du duo l'emporterait sur le display:none que le
   navigateur attache à l'attribut hidden : la bascule entre personne physique et
   organisme laisserait un blanc là où elle masque une paire de champs. */
[hidden] { display: none !important; }

/* Choix exclusifs et cases, en cibles larges — mais pas plus larges que les cases
   de saisie qui les suivent : une rangée cliquable de neuf cents pixels pour le mot
   « Madame » ne donne pas une cible plus sûre, seulement un formulaire en escalier
   où rien ne partage le même bord droit. */
/* Un groupe de choix courts est une colonne de commandes : il suit la largeur des
   cases de saisie. */
.options { display: grid; gap: 9px; max-width: var(--saisie); }

/* Une case de consentement isolée, elle, porte une phrase — « J'accepte que ces
   informations soient enregistrées pour l'instruction de ma demande ». Elle avait
   une borne à elle : sans, elle courait sur toute la carte et se trouvait seule à
   dépasser le bord droit de tout le reste. Ce n'est plus le cas, tout le reste
   allant maintenant au même bord ; sa cible cliquable s'en trouve élargie à la
   ligne entière, ce qui ne dessert personne. */
.option {
  display: flex;
  gap: 13px;
  /* Le bouton se centre sur son intitulé. Aligné en haut et décalé de 4 px, il
     flottait au-dessus du texte sur les choix d'une seule ligne — c'est-à-dire
     sur tous ceux du portail. */
  align-items: center;
  /* Cible plus haute, et l'accolade du libellé au bouton : on coche en visant la
     ligne, pas le disque de dix-huit pixels. */
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  cursor: pointer;
  background: var(--blanc);
}
.option:hover { border-color: var(--sceau); }
/* La case est agrandie par sa taille, non par une transformation.

   « transform: scale(1.3) » la grossissait à l'écran sans rien changer à la place
   qu'elle occupe : le gap de treize pixels se mesurait sur la case d'origine, la
   case agrandie mordait dessus, et le texte finissait collé contre elle. Une
   largeur et une hauteur réelles réservent la place.

   accent-color donne au coché le bleu du site plutôt que celui du système. */
.option input {
  margin: 0;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  max-width: none;
  accent-color: var(--sceau);
}

/* Un choix qui porte une explication sur une seconde ligne reprend l'alignement
   par le haut : centrer le bouton sur deux lignes le mettrait entre les deux. Les
   navigateurs qui ignorent :has() centreront, ce qui reste lisible. */
.option:has(.detail) { align-items: flex-start; }
.option:has(.detail) input { margin-top: 4px; }
.option.retenue { border-color: var(--sceau); background: #f5f9fd; }
.option .libelle { font-weight: 560; }
.option .detail { font-size: 14.5px; color: var(--encre-douce); }

/* ── Boutons ────────────────────────────────────────────────────────────── */

/* Les boutons d'un formulaire suivent la colonne de saisie : « Continuer » se
   trouve sous le dernier champ, là où la main arrive. Centré sur la carte, il
   flottait dans le blanc à droite de la colonne — et il fallait revenir chercher
   le regard au milieu après avoir rempli à gauche. */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
           justify-content: flex-start; margin-top: 30px; }

/* Sur les deux pages sans formulaire, il n'y a qu'un bouton et rien à aligner :
   il commande la page entière et se centre. De même pendant l'attente de la
   relecture, où il n'y a pas de champ sous lequel se ranger. */
.carte.accueil .boutons,
.carte.recu .boutons,
.boutons.centre { justify-content: center; max-width: none; }

/* Un champ suivi de son bouton : le relevé au registre appartient au SIREN qui le
   précède. La case garde la place restante, le bouton la sienne, et sous 560 px la
   paire se replie plutôt que de se tasser. */
.avec-bouton { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avec-bouton input { flex: 1 1 150px; width: auto; }
.avec-bouton button { flex: 0 0 auto; white-space: nowrap; }

button, .bouton {
  display: inline-block;
  min-height: 52px;
  padding: 14px 28px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--blanc);
  background: var(--sceau);
  border: 1px solid var(--sceau);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover { background: var(--sceau-clair); border-color: var(--sceau-clair); }
button.discret, .bouton.discret {
  background: var(--blanc);
  color: var(--encre);
  border-color: #b9c4d0;
}
button.discret:hover, .bouton.discret:hover { background: var(--papier); }

/* ── Encarts ────────────────────────────────────────────────────────────── */

/* L'encart tient la largeur de la carte, comme son contenu.

   Il a été resserré un temps, et pour une raison qui se voyait : il prenait les
   974 pixels de la carte pour une prose bornée à 74 caractères, soit une bande
   teintée dont le tiers droit était vide, et les filets séparant les documents
   demandés couraient jusqu'au bord de la bande, bien au-delà des cases qu'ils
   séparaient. Un filet plus large que ce qu'il sépare désigne un rangement qui
   n'existe pas.

   C'était traiter le symptôme. La prose ne s'arrête plus avant le bord : la bande
   et ce qu'elle porte tombent au même endroit sans qu'on ait à les accorder. */
.encart {
  border-left: 4px solid var(--sceau);
  background: #f5f9fd;
  padding: 18px 20px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}
.encart.bien { border-color: var(--vert); background: var(--vert-fond); }
.encart.attention { border-color: var(--ambre); background: var(--ambre-fond); }
.encart.souci { border-color: var(--alerte); background: var(--alerte-fond); }
.encart p:first-child { margin-top: 0; }
.encart p:last-child { margin-bottom: 0; }
.encart strong { font-weight: 640; }

/* Les champs à reprendre, listés sous l'encart de refus.
 *
 * Chaque entrée est un lien vers l'ancre du champ. Sur un téléphone c'est le seul
 * moyen de le retrouver sans faire défiler tout le formulaire ; sur un écran de
 * bureau, cela ne coûte que quelques lignes.
 */
.a-corriger { margin: 12px 0 0; padding-left: 20px; }
.a-corriger li { margin-bottom: 6px; color: var(--encre); }
.a-corriger li:last-child { margin-bottom: 0; }
.a-corriger a { color: var(--alerte); font-weight: 600; }

/* Le saut d'ancre colle le champ au bord haut de la fenêtre. Un peu d'air au-dessus
 * évite de croire qu'on est arrivé au milieu de quelque chose. */
.champ { scroll-margin-top: 16px; }

/* Le bloc « Déjà reçus » et ses règles .fichiers sont retirés : le HTML qui les
   portait a disparu il y a longtemps, et une feuille qui garde des règles pour
   des classes mortes les fait croire vivantes au suivant. Ce qu'elles
   dessinaient — une bande verte, un nom en gras — vit maintenant dans .piece,
   plus bas, sous la case qui a servi. La pastille « nature reconnue » était partie
   avec, puis est revenue sur demande du conciliateur (passe de lecture intégrale du
   2026-08-16) : elle vit dans .piece .reconnu, plus bas. */

/* Ce que la relecture du récit conseille de joindre. */
.utiles { list-style: none; margin: 12px 0 0; padding: 0; }
.utiles li {
  padding: 9px 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.utiles li:first-child { border-top: none; }
.utiles .quoi { display: block; font-weight: 560; }
.utiles .pourquoi {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--encre-douce);
}

/* ── Relecture du récit en cours ─────────────────────────────────────────── */

/* Le formulaire demandait les documents pendant que le récit était encore en
   lecture : le justiciable joignait ce qu'il avait sous la main, et la liste des
   papiers qui comptent paraissait après, quand il avait fini. L'étape attend
   maintenant, et il faut bien lui montrer qu'il se passe quelque chose.

   Le pourcentage est une estimation, et le dit : la lecture ne rend pas
   d'avancement, seulement un résultat. La barre suit le temps écoulé sur une
   durée courante et s'arrête à 95 % — annoncer 100 % avant d'avoir la réponse
   serait mentir sur la seule chose que cette barre a à dire. */
.attente { text-align: center; padding: 8px 0 4px; }

.attente .rouet {
  width: 42px;
  height: 42px;
  margin: 0 auto 18px;
  border: 4px solid var(--trait);
  border-top-color: var(--sceau);
  border-radius: 50%;
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.attente .jauge {
  height: 10px;
  max-width: 420px;
  margin: 0 auto 10px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 999px;
  overflow: hidden;
}
.attente .jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sceau);
  border-radius: 999px;
  transition: width .6s linear;
}
.attente .part { font-weight: 640; font-size: 19px; }
.attente .quoi { color: var(--encre-douce); font-size: 15px; margin-top: 4px; }

/* Les personnes qui ont demandé moins de mouvement gardent la jauge, qui porte
   l'information, et perdent le rouet, qui n'en porte aucune. */
@media (prefers-reduced-motion: reduce) {
  .attente .rouet { display: none; }
  .attente .jauge span { transition: none; }
}

/* ── Un document attendu, et sa case pour le joindre ─────────────────────── */

/* Un seul champ de dépôt en bas de page obligeait à faire le va-et-vient entre
   la liste des papiers demandés et la case, en se souvenant de ce qui manquait.
   Chaque document demandé porte maintenant la sienne. */
.attendus { list-style: none; margin: 14px 0 0; padding: 0; }
.attendus > li {
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.attendus > li:first-child { border-top: none; }
.attendus .quoi { display: block; font-weight: 580; }
.attendus .pourquoi {
  display: block;
  margin: 2px 0 8px;
  font-size: 14.5px;
  color: var(--encre-douce);
}
/* Plus discret que le pavé du dépôt général : il y en a autant que de documents
   demandés, et empilés à pleine taille ils noieraient la page. */
.attendus input[type=file] { border-width: 1px; }
.attendus .recu {
  display: inline-block;
  font-size: 14px;
  color: var(--vert);
  background: var(--vert-fond);
  border: 1px solid #bcdcc9;
  border-radius: 999px;
  padding: 3px 12px;
}

/* ── Les cases d'un même document, empilées ──────────────────────────────── */

/* Une case par fichier, et une case servie fait naître la suivante. « multiple »
   demandait de savoir maintenir une touche pour en prendre plusieurs, et ne
   rendait ensuite que « 3 fichiers » — sans dire lesquels.

   Le bloc n'existe visuellement que par l'espace entre ses cases : c'est le
   script qui l'emplit, et une bordure autour d'une seule case ferait un cadre
   dans un cadre. */
/* Serré : « trop d'espace entre les lignes » — 2026-08-10. Huit pixels d'écart
   plus la marge de chaque ligne faisaient respirer un bloc qui n'est qu'une liste
   de noms de fichiers, et deux documents d'une même demande se lisaient comme deux
   demandes. */
.cases { display: flex; flex-direction: column; gap: 4px; }
.cases input[type=file] { width: 100%; }

/* Ce qu'il advient d'un fichier, écrit sous sa propre case : avec cinq cases,
   un mot unique en pied de bloc ne dirait plus de laquelle il parle. .dit ne
   porte plus que les refus et les avertissements — un fichier accepté a sa
   bande, juste dessous. */
.dit {
  margin: -2px 0 0;
  font-size: 14.5px;
  color: var(--encre-douce);
}
.dit.souci { color: var(--alerte); font-weight: 560; }
.dit button.lien { font-size: 14.5px; padding: 0 2px; }

/* La bande d'un fichier joint.
 *
 * Elle disait « Fichier X ajouté — Supprimer » en gris de quatorze points et
 * demi, sous une case grise, dans une page grise : le déposant ne voyait pas que
 * son envoi avait porté, et rejoignait le même document une seconde fois. Le
 * conciliateur l'a relevé — « pas assez visible dans le sens visuel ».
 *
 * Fond vert et filet vert à gauche, les mêmes que l'étape franchie du fil
 * d'Ariane : dans cette page, le vert veut dire « c'est fait ». Le nom du
 * fichier prend le poids d'un titre, parce que c'est la seule chose qu'on
 * cherche à lire, et il se coupe où il faut — les noms fabriqués par un
 * téléphone dépassent la largeur d'un écran de mobile.
 *
 * Les deux commandes se tiennent à droite, ensemble : « Voir » ouvre le document
 * dans un autre onglet, « Supprimer » le retire. Le second est rouge, le premier
 * non — deux liens de la même couleur côte à côte se cliquent l'un pour l'autre.
 */
/* Le nom du fichier sous le sélecteur, sans bandeau.
 *
 * « je veux pas de bandeau vert / je veux le nom du fichier SOUS le selecteur » —
 * 2026-08-10. La bande verte disait « c'est arrivé » une seconde fois, après que
 * la case l'a déjà montré, et prenait plus de place que le nom qu'elle portait.
 * Le fichier se lit maintenant comme une légende sous son champ : discret tant
 * qu'on n'en a pas besoin, lisible quand on le cherche. */
.piece {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0 2px;
  line-height: 1.35;
}
/* Le nom ne pousse plus le reste au bout de la carte.
 *
 * `flex: 1` le faisait s'étendre sur toute la largeur, et « Retirer » se retrouvait
 * à l'autre bord, à trente centimètres du fichier qu'il concerne. Les deux se
 * lisent ensemble : c'est une légende, pas une ligne de tableau. */
.piece .nom {
  font-size: 14.5px;
  color: var(--encre-douce);
  word-break: break-word;
}
.piece { flex-wrap: wrap; }
.piece .gestes { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

/* Le type reconnu dans le document, en pastille blanche sur la bande verte.
 *
 * Il dit au déposant que son papier a été compris, et lequel c'est. Fond blanc
 * plutôt que teinté : sur un fond déjà coloré, une pastille de la même famille
 * se confond avec lui, et c'est le nom du fichier qui doit rester le plus lu. */
.piece .reconnu {
  font-size: 13px;
  color: var(--encre-douce);
  /* Passe de lecture intégrale du 2026-08-16 : --filet n'a jamais été défini dans
     cette feuille — la bordure ne se dessinait pas. Le trait de séparation maison
     est --trait. */
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
/* Un lien, pas un bouton — et il faut le dire jusqu'au bout.
 *
 * « trop d'espace entre les lignes » — 2026-08-10, et la faute n'était ni dans la
 * marge ni dans le gabarit : la règle générale `button, .bouton` donne 52 pixels
 * de haut minimum, pour qu'on vise une cible tactile et non un disque de dix-huit
 * pixels. Elle est juste pour un bouton d'envoi ; sur un « Retirer » écrit en
 * petit sous un nom de fichier, elle imposait une ligne de 52 pixels pour un texte
 * de 20, et l'air venait de là. La remettre à zéro est le seul reste à défaire
 * quand on habille un bouton en lien. */
.piece .lien {
  font-size: 14.5px;
  min-height: 0;
  padding: 2px 2px;
  color: var(--sceau);
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  text-decoration: underline;
  cursor: pointer;
}
.piece .lien:hover { background: none; color: var(--sceau-clair); }
.piece .lien.oter { color: var(--alerte); }
.piece .lien.oter:hover { color: #8c1e17; }

/* Un point à préciser, et la case pour le faire tout de suite — repliée jusqu'à ce
   qu'on la veuille. C'est une invitation, pas une exigence de plus au moment
   d'envoyer, et dix cases ouvertes en font une exigence. */
.repondre { margin-top: 6px; }

/* Ni volet ni triangle : la case de réponse est ouverte, et l'intitulé n'est
   plus qu'un intitulé. Le <summary> et son marqueur dessiné servaient à dire
   qu'on pouvait déplier ; ils sont partis avec le repli, qui n'existait déjà
   plus depuis que les cases s'ouvrent d'office — personne ne répondait aux
   questions repliées. Un triangle qui ne déplie rien fait douter du reste. */
.repondre .intitule {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 560;
  color: var(--encre-douce);
}

/* La case de réponse remplit son encart.
 *
 * Elle était bornée à 46 caractères, dans un corps de 16 pixels plus étroit que
 * celui de la page : 368 pixels dans une carte de 1 080, soit le tiers. Le
 * conciliateur l'a signalé deux fois. Une case trois fois plus étroite que la
 * bande teintée qui la porte donne à croire qu'on attend trois mots, alors que
 * ces réponses-là épargnent un échange de courriers.
 *
 * Pas de borne propre, donc : celle de l'encart suffit, et le corps est celui du
 * reste de la page — on relit ce qu'on écrit ici. La levée de --saisie est
 * désormais portée par la règle `textarea` générale ; ce bloc ne garde que ce qui
 * lui est propre, la hauteur réduite et le fond blanc sur la bande teintée. */
.repondre textarea {
  min-height: 68px;
  margin-top: 4px;
  background: var(--blanc);
}

p.menu { font-size: 14.5px; color: var(--encre-douce); margin-bottom: 0; }

button.lien {
  background: none;
  border: none;
  padding: 4px 2px;
  color: var(--alerte);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}
button.lien:hover { background: none; color: #8c1e17; }

/* « Sans objet » à droite du sélecteur de fichier — « ce document ne me concerne
   pas, ou je ne l'ai pas ». Un vrai bouton (secondaire, contour), sur la même ligne
   que le champ ; sur un écran étroit, ils passent l'un sous l'autre. */
.depose-ou-non { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.depose-ou-non input[type=file] { flex: 1 1 240px; }
.depose-ou-non .sans-objet { flex: 0 0 auto; white-space: nowrap; }

/* Le contrôle de fichier, habillé.

   Laissé nu, il donne ce que le navigateur dessine : un bouton gris système
   « Choisir un fichier » suivi de « Aucun fichier choisi », plus petit que tout le
   reste de la page et étranger au reste du formulaire. Devant six documents
   demandés, cela fait six contrôles gris à côté de champs bleus soignés.

   ::file-selector-button habille le bouton natif sans script et sans cacher le
   contrôle : le clavier, le glisser-déposer et le lecteur d'écran continuent de
   marcher comme avant, et le libellé reste celui du navigateur — donc traduit. */
input[type=file] {
  width: 100%;
  max-width: var(--saisie);
  min-height: 52px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15.5px;
  color: var(--encre-douce);
  background: var(--blanc);
  border: 2px dashed #b9c4d0;
  border-radius: 8px;
  cursor: pointer;
}
input[type=file]:hover { border-color: var(--sceau); background: #f7fafd; }
input[type=file]:focus-visible {
  outline: none;
  border-color: var(--sceau);
  box-shadow: 0 0 0 3px rgba(45, 109, 163, .16);
}

input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 560;
  color: var(--sceau);
  background: #eef4fa;
  border: 1px solid #c2d6e8;
  border-radius: 6px;
  cursor: pointer;
}
input[type=file]:hover::file-selector-button { background: #e2ecf6; border-color: var(--sceau); }

/* Le récapitulatif se lit en trois blocs — vous, la personne concernée, le
   litige — au lieu d'une colonne de quinze lignes où seuls les intitulés
   disaient qu'on changeait de sujet. Les titres sont ceux du fil d'Ariane. */
.recap-titre {
  margin: 26px 0 4px;
  font-size: 15px;
  font-weight: 620;
  color: var(--encre-douce);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.recap-titre:first-of-type { margin-top: 14px; }

.recap { list-style: none; margin: 0; padding: 0; }
.recap li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.recap li:last-child { border-bottom: none; }
.recap .quoi { flex: 0 0 190px; color: var(--encre-douce); font-size: 15px; }
.recap .valeur { flex: 1; white-space: pre-line; }
.recap .valeur.absent { color: var(--encre-douce); font-style: italic; }

/* La référence est la seule chose que le justiciable doive retenir de toute la
   démarche : c'est elle qu'il citera en écrivant, et elle est perdue s'il ne la
   note pas. Elle se lisait à vingt et un pixels au fil d'une phrase. Elle est
   maintenant posée seule, au centre, à la taille d'un titre. */
/* Un numéro qu'on recopie ne se coupe pas en deux : « CC- » sur une ligne et les
   chiffres sur la suivante se recopient de travers. */
.insecable { white-space: nowrap; }

/* Le mot « Dossier » au-dessus de la référence, centré comme elle.
 *
 * « le CSS est pas bon » — 2026-08-10. La référence est un bloc centré, et elle
 * était posée au milieu d'une phrase : le mot qui la précédait restait sur sa
 * ligne, le point qui la suivait tombait seul sous le numéro, et la phrase
 * repartait à la ligne d'après. On lisait « Dossier / CC-… / . Déposez chaque
 * document ». La référence garde sa forme — c'est le numéro qu'il recopiera —, et
 * ce qui l'entoure lui laisse la place. */
.reference-dossier {
  margin: 0 0 6px;
  text-align: center;
  color: var(--encre-douce);
}

.reference {
  display: block;
  margin: 10px auto 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  font-weight: 640;
  letter-spacing: .06em;
  color: var(--vert);
}

.carte.recu .encart.bien { text-align: center; border-left: none; border-radius: 10px;
                           border: 1px solid #bcdcc9; max-width: 560px; margin: 0 auto 22px; }

/* Le lien de reprise se copie à la main : il doit se lire caractère par
   caractère, sans se replier au milieu d'un jeton. */
.carte code {
  display: block;
  padding: 12px 14px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 7px;
  font-size: 14.5px;
  word-break: break-all;
  line-height: 1.5;
}

/* Au-delà de 1 000 px, les paires de champs cessent de se replier : la largeur
   sert à cela. Le récapitulatif garde une mesure lisible, c'est de la prose. */
@media (min-width: 1000px) {
  .duo .champ { flex: 1 1 260px; }
}

/* ── Le téléphone ────────────────────────────────────────────────────────── */

/* La moitié des demandes arrive d'un mobile, souvent debout dans une file
   d'attente. Ce n'est pas la version dégradée du portail, c'est la principale.

   Cinq cent soixante pixels : au-delà, un téléphone tenu en travers a la place de
   la mise en page d'écran. En deçà, tout se replie en une colonne. */
@media (max-width: 560px) {
  /* Dix-sept pixels, non seize. Le lecteur de ce formulaire a souvent plus de
     soixante-dix ans, et l'écran est petit : ce n'est pas le moment de rapetisser
     le texte. Seize est par ailleurs le plancher sous lequel Safari grossit la
     page de lui-même dès qu'on entre dans un champ, ce qui déplace tout. */
  body { font-size: 17px; }

  main { padding: 18px 0 40px; }
  .contenant { width: calc(100% - 20px); }
  .carte { padding: 20px 16px; border-radius: 8px; margin-bottom: 14px; }

  h1 { font-size: 24px; padding-bottom: 14px; margin-bottom: 18px; }
  h2 { font-size: 20px; }
  h3 { font-size: 17px; margin: 20px 0 8px; }

  /* Le fil des étapes se réduit à celle où l'on est.

     Cinq pastilles sur un écran de 390 pixels tiennent sur trois lignes et mangent
     le tiers de la hauteur utile, avant même que le formulaire ne commence. Le
     justiciable n'a pas besoin de voir les quatre autres : il a besoin de savoir
     où il en est, et le titre le lui redit juste dessous. */
  .etapes { margin-bottom: 16px; }
  .etapes li { display: none; }
  .etapes li.courante { display: flex; }

  /* « 1 » seul ne dit pas combien il en reste. Le rang porte son total, et la
     pastille devient « 1/5 Vous ».

     En ligne, non en grille : le rang est un « display: grid » centré sur son
     unique enfant, et le pseudo-élément y devenait une seconde rangée — le « /5 »
     passait sous le chiffre, coupé par la hauteur fixe. */
  .etapes li.courante .rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 21px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .etapes li.courante .rang::after { content: "/" attr(data-sur); }

  /* Le pouce vise mal : les boutons prennent la largeur, et l'ordre reste celui
     de la page — l'action d'abord, le retour ensuite. */
  .boutons { max-width: none; gap: 10px; }
  .boutons button, .boutons .bouton { width: 100%; text-align: center; }
  .boutons.serres button { width: auto; }

  /* Seize caractères en chasse fixe à trente pixels débordent d'un écran de
     téléphone. La référence reste la chose la plus grosse de la page, mais elle
     tient sur une ligne. */
  .reference { font-size: 23px; letter-spacing: .02em; }
  .carte.recu .encart.bien { padding: 16px 12px; }

  /* Le bouton natif du dépôt et le nom du fichier ne tiennent pas côte à côte à
     390 pixels : on gagne la place sur les deux. */
  input[type=file] { font-size: 15px; padding: 8px 10px; }
  input[type=file]::file-selector-button { padding: 8px 12px; margin-right: 10px; }

  /* L'encart perd sa bordure épaisse, qui coûte quatre pixels sur trois cent
     cinquante utiles. */
  .encart { padding: 14px; border-left-width: 3px; margin: 16px 0; }

  .recap li { flex-direction: column; gap: 3px; }
  .recap .quoi { flex: none; }

  /* Le lien de reprise se recopie, il ne se lit pas : il peut rapetisser. */
  .carte code { font-size: 13px; padding: 10px 12px; }

  .attente .part { font-size: 17px; }
  .attente .rouet { width: 36px; height: 36px; margin-bottom: 14px; }

  /* Un nom de fichier scanné n'a pas d'espace où se couper. */
  .piece .nom, .attendus .quoi { overflow-wrap: anywhere; }
  .piece { flex-wrap: wrap; gap: 6px 10px; }
}

/* Le bandeau suit : le logo garde sa place, le nom se replie plutôt que de
   pousser la carte hors de l'écran. */
@media (max-width: 400px) {
  .bandeau { padding: 14px 0; }
  .bandeau img { height: 42px; }
  .bandeau .titre { font-size: 17px; }
  .bandeau .sous-titre { font-size: 13.5px; }
}

/* Deux boutons sous un champ, plus serrés que les boutons de navigation du bas
   de page : ils appartiennent au champ qu'ils servent, non à l'étape. */
.boutons.serres { gap: 10px; margin: 10px 0 0; }
.boutons.serres button { padding: 10px 18px; font-size: 15px; }

/* ── Le menu des communes d'un code postal ─────────────────────────────── */

/* Le menu EST le champ « Commune ».
   Il s'ajoutait d'abord à côté du champ texte : deux cases sous un seul intitulé, dont
   une vide. Il prend sa place, et son allure. Le champ texte survit caché, pour un
   code postal dont la table ne connaît aucune commune — un CEDEX, une adresse à
   l'étranger. Jamais les deux ensemble. */
.commune-choix {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #d5dae2;
  border-radius: 8px;
  background: #fff;
}

.commune-choix[hidden] { display: none; }
.commune-choix:has(option:checked:disabled) { color: #6b7280; }

/* ── La recherche d'entreprise par le nom, au-dessus du numéro ──
 *
 * Le champ naît masqué (hidden) et c'est le script qui le montre : sans lui, il
 * ne proposerait rien. La liste se pose par-dessus ce qui suit, comme toute
 * autocomplétion, d'où le positionnement. */
.cherche-entreprise { position: relative; margin-bottom: 10px; }

.cherche-entreprise[hidden] { display: none; }

/* Le champ lui-même n'a pas de règle à lui : c'est un input[type=text] comme
   les autres, et c'est la règle générale du formulaire qui l'habille — même
   police, même taille, même bordure, même placeholder que son voisin du
   dessous. Un style particulier vivait ici et les faisait dépareillés :
   « t'es aveugle ? » — 2026-08-11, à raison. */

.entreprise-liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(27, 39, 51, .14), 0 2px 6px rgba(27, 39, 51, .06);
}

.entreprise-liste[hidden] { display: none; }

/* Chaque ligne est un bouton — Entrée et la tabulation sans rien réinventer —
   mais un bouton qui se lit comme une ligne de liste. */
.entreprise-ligne {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font: inherit;
  color: var(--encre);
  background: none;
  border: none;
  border-top: 1px solid var(--trait);
  border-radius: 0;
  cursor: pointer;
}

.entreprise-ligne:first-child { border-top: none; }

.entreprise-ligne:hover,
.entreprise-ligne:focus {
  background: var(--papier);
  outline: none;
}

.entreprise-nom {
  display: block;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entreprise-detail {
  display: block;
  font-size: 13.5px;
  color: var(--encre-douce);
}

.entreprise-vide {
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--encre-douce);
}

/*
 * Bandeau légal, en bas de chaque page publique.
 *
 * Deux liens, servis par le site principal (racine du domaine) : la politique
 * RGPD et les mentions légales. Discret — un trait, un fond blanc — pour ne
 * pas concurrencer la démarche en cours.
 */
/* Le bandeau colle au bas de la fenêtre même quand la page est courte :
   le corps devient une colonne pleine hauteur, et margin-top:auto pousse
   le bandeau tout en bas. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pied-legal {
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  margin-top: auto;
  padding: 14px 16px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--encre-douce);
}
.pied-legal a {
  color: var(--sceau);
  font-weight: 600;
  text-decoration: none;
  margin: 0 10px;
}
.pied-legal a:hover {
  text-decoration: underline;
}