/* =================================================================================================
   LE PORTAIL PROFESSIONNEL (chantier E, lot 1.5.0, tache 12) : connexion, inscription, code, session.
   =================================================================================================

   Fichier separe et non balise <style> dans la page : la politique de securite de _headers interdit
   le style en ligne sur tout le site, sans exception (style-src 'self'). Il se pose PAR DESSUS
   style.css, dont il reprend les jetons de couleur, la police, le voile de mie, les cartes, les
   champs et le bouton principal (« .envoyer ») : ce sont des ecrans de formulaire, pas une matiere
   nouvelle, la carte de commander.html leur convient deja.

   CE QUE CE FICHIER AJOUTE ET RIEN DE PLUS : le commutateur d'ecrans (un seul visible a la fois), la
   case « Rester connecte », les liens qui basculent entre connexion/inscription/mot de passe oublie,
   le champ de code a six chiffres, et la liste minimale de boulangeries de l'ecran « connecte », qui
   n'est qu'un temoin que la session fonctionne : la tache 13 la remplace par le vrai ecran « Mes
   boulangeries ».
   ============================================================================================== */

body.portail { color: var(--corps); }

/* Les champs email et mot de passe N'EXISTENT QUE SUR LE PORTAIL, et la regle commune de style.css
   ne couvre que date/time/number/text : sans ce bloc, ces deux types rendaient le champ nu du
   navigateur, constate au correctif afficher/masquer du 21 aout 2026 qui a besoin d'un champ a la
   geometrie connue pour y poser son bouton. Reprend la regle commune valeur pour valeur (style.css,
   section « Les champs ») plutot que de l'etendre la-bas : ce fichier ne doit porter que ce que le
   portail ajoute. */
input[type="email"],
input[type="password"] {
  font: inherit;
  color: var(--titre);
  background: #FFFFFF;
  border: 1px solid var(--trait-fort);
  border-radius: 14px;
  padding: 0 14px;
  height: var(--hauteur-champ);
  width: 100%;
  transition: border-color var(--duree-courte) ease-out, box-shadow var(--duree-courte) ease-out;
}

/* Afficher/masquer le mot de passe (critique du 21 aout 2026). Le bouton vit DANS le champ, a
   droite : une enveloppe en position relative, le champ garde toute sa largeur et reserve la place
   de l'oeil par son padding droit. Cible tactile de 44 px (metrics.hitMin de tokens.ts), dans un
   champ de 52 px. L'etat presse s'affiche par l'accent doux, le vrai retour visuel etant le mot de
   passe lui-meme, revele dans le champ. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 52px; }
.voir-mdp {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--discret);
  cursor: pointer;
}
.voir-mdp[aria-pressed="true"] {
  background: var(--accent-doux);
  color: var(--accent-texte);
}
.voir-mdp:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 2px;
}
/* Edge pose son propre oeil de revelation dans tout champ de mot de passe : deux yeux cote a cote,
   dont un que notre bascule ne controle pas, se contrediraient. */
input[type="password"]::-ms-reveal { display: none; }

/* Un seul ecran visible a la fois : pro.js pose [hidden] sur tous les autres. [hidden] de style.css
   (display: none !important) suffit deja, cette regle n'a rien a ajouter. */

/* La case a cocher, sa propre rangee au-dessus du bouton principal : assez d'espace pour rester une
   cible tactile confortable sans peser autant qu'un champ de saisie. */
.case-session {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.case-session input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--croute);
  flex: none;
}
.case-session span {
  font-size: 14px;
  color: var(--corps);
}

/* Le champ de code : centre, espace entre les chiffres, plus grand qu'un champ ordinaire. Il reste
   un simple input[type=text] pour la CSP et pour l'autoremplissage du navigateur
   (autocomplete="one-time-code"), styles ci-dessous par-dessus la regle commune de style.css. */
input.code {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--titre);
}

/* Les liens qui basculent d'ecran ou renvoient un formulaire : des <button type="button"> stylises en
   lien, jamais des <a href> vers rien. « form-action 'none' » interdit de toute facon tout <form>. */
button.lien {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-texte);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.lien:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 2px;
  border-radius: 3px;
}

/* LE BOUTON D UNE CARTE DE FORMULAIRE PREND LA LARGEUR DE SES CHAMPS (22 aout 2026). button.envoyer
   vaut « flex: none; min-width: 190px » dans style.css, taille pensee pour la BARRE D ENVOI de la
   page de commande, ou il vit dans une rangee flex a cote d un total. Dans une carte de formulaire,
   ou il suit des champs a 100 %, il se posait donc a 190 px CONTRE LE BORD GAUCHE, ce qui se lit
   comme un bouton mal place et non comme une intention.
   Cette regle est la meme que celle deja posee sur « .liste-boulangeries li > .envoyer », qui avait
   rencontre le probleme la-bas : elle est ici REMONTEE au niveau qui la rend vraie partout, donc
   sur les six ecrans de formulaire du portail (connexion, inscription, code, mot de passe oublie,
   nouveau mot de passe, mon compte) et pas seulement sur celui qui l a fait voir. La barre d envoi
   de la commande n est pas touchee, elle n est pas dans une carte. */
.carte button.envoyer {
  display: block;
  width: 100%;
  min-width: 0;
  /* Le groupe au-dessus (les champs et la regle qui les explique) se tient serre, le bouton s en
     detache : c est ce qui fait lire « voila ce qu il faut saisir » puis « voila le geste ». */
  margin-top: 14px;
}

/* Le second role du bouton : meme forme, meme largeur, sans l aplat brun. Il sert « Se deconnecter »,
   qui est une VRAIE action reguliere du professionnel et non une note de bas de carte, mais qui ne
   doit pas se lire comme l action principale d un ecran ou l action principale est ailleurs.
   Contrastes calcules : le texte --titre (#2B1A0C) sur blanc vaut 16,4:1, et le filet --trait-fort
   (#8C7D61) 4,02:1, chiffre deja mesure en tete de style.css, au-dessus des 3:1 exiges d un contour
   porteur de sens. Neutre et non cannelle, deliberement : l accent reste au chemin principal. */
.carte button.envoyer.secondaire {
  background: #FFFFFF;
  color: var(--titre);
  border: 1.5px solid var(--trait-fort);
}
@media (hover: hover) {
  .carte button.envoyer.secondaire:not([disabled]):hover { background: var(--creux); }
}

/* LE LIEN QUI DETRUIT NE RESSEMBLE PAS AU LIEN QUI DECONNECTE (22 aout 2026). « Supprimer mon
   acces » et « Se deconnecter » etaient deux liens identiques, l un colle a gauche et l autre
   centre, dans la meme carte : rien ne disait lequel est irreversible, et leur desalignement se
   lisait comme un defaut. Le rouge de --erreur-texte (#8E3220, 7,99:1 sur blanc) porte desormais
   ce que le libelle dit deja, et le filet du dessus separe les deux gestes. */
/* « button.lien » et non « .lien-destructif » seul : le selecteur de base vaut (0,1,1) et
   l emporterait sur une classe seule (0,1,0), si bien que le rouge ne s appliquait pas. Mesure et
   non supposition, la premiere version rendait encore la cannelle a l ecran. */
button.lien.lien-destructif {
  color: var(--erreur-texte);
}
.pied-carte.pied-destructif {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}

/* LE TITRE QUI SE DEROULE (22 aout 2026), pour « Autres produits ». Le <h2> garde tout son style,
   c'est le <button> a l'interieur qui prend sa place : la structure de titres de la page survit, et
   le controle reste un vrai bouton, atteignable au clavier et annonce par son « aria-expanded ».
   Le bouton prend TOUTE la largeur de la carte : la cible touchable est la rangee entiere et non les
   deux mots du titre, ce qui compte pour la personne visee, un professionnel sur un telephone. */
.titre-accordeon { margin: 0; }
button.accordeon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  /* « font: inherit » NE SUFFIT PAS, ET C'EST MESURE : la feuille de style du navigateur pose
     « text-transform: none » et « letter-spacing: normal » sur tout <button>, deux proprietes qui ne
     font pas partie du raccourci « font » et qui coupent donc l'heritage depuis le <h2>. Sans ces
     deux lignes, ce titre s'ecrivait « Autres produits » en casse ordinaire a cote de « VOS
     PRODUITS » et de « QUAND ET COMMENT ? ». */
  text-transform: inherit;
  letter-spacing: inherit;
  /* LA RANGEE EST LARGE, ELLE N'ETAIT PAS HAUTE (3 septembre 2026, passe Impeccable). Le commentaire
     ci-dessus dit « la cible touchable est la rangee entiere », et c'etait vrai en LARGEUR seulement :
     mesuree dans le navigateur, cette rangee faisait 18 px de haut, soit moins de la moitie des 24 px
     du critere 2.5.8 et bien moins des 44 px que le reste de ce fichier respecte.
     Le rembourrage la porte a 44 px et la marge negative de meme valeur annule EXACTEMENT ce qu'il
     ajoute : la cible grandit, la carte repliee ne bouge pas d'un pixel. Verifie a l'ecran. */
  padding: 13px 0;
  margin: -13px 0;
}
button.accordeon:focus-visible {
  outline: 2px solid var(--croute);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Le chevron pointe vers le bas quand la liste est repliee, « il y a quelque chose dessous », et se
   retourne quand elle est ouverte. La rotation suit la duree courte du systeme, et se tait pour qui
   demande moins de mouvement. */
.accordeon-chevron {
  flex: none;
  color: var(--accent-texte);
  transition: transform var(--duree-courte) ease-out;
}
button.accordeon[aria-expanded="true"] .accordeon-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .accordeon-chevron { transition: none; }
}
/* Le corps replie laisse le titre seul dans sa carte : sans cela, le rembourrage du bas de la carte
   s'ajoutait a la marge du titre et faisait une carte deux fois trop haute pour une seule ligne. */
#cmd-hors-corps:not([hidden]) { margin-top: 12px; }

/* La rangee de bas de carte : une phrase discrete puis son lien, meme grammaire que
   src/app/onboarding/index.tsx (« Pas encore de compte ? Creer un compte »). */
.pied-carte {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--discret);
  text-align: center;
}
.pied-carte button.lien { margin-left: 4px; }
/* Meme correction de cible que sur le titre qui se deroule, et pour la meme raison (3 septembre
   2026, passe Impeccable) : « Mot de passe oublie », « Revenir a la connexion », « Annuler » et
   « Retour » etaient des cibles de 20 px de haut, mesurees dans le navigateur, sous les 24 px du
   critere 2.5.8, et sans que l'ecart aux boutons voisins ne les en dispense. Le rembourrage les
   porte a 44 px, les marges negatives de meme valeur annulent EXACTEMENT ce qu'il ajoute : sur une
   boite en ligne, c'est la boite de marge qui fait la hauteur de ligne, donc rien ne se decale.
   La barre de navigation et le « Retour » collant ont leurs propres regles, plus loin et plus
   specifiques : celles-la posent deja 45 px sans marge negative, puisque la hauteur y est voulue. */
.pied-carte button.lien {
  padding: 12px 0;
  margin-top: -12px;
  margin-bottom: -12px;
}

/* Une seconde rangee de pied, pour l'ecran de connexion qui porte a la fois « Mot de passe oublie »
   et « Creer un compte » : deux liens ne doivent pas se lire comme une seule phrase. */
.pied-carte + .pied-carte { margin-top: 8px; }

/* DEUX SOUS-TITRES QUI SE SUIVENT NE DOIVENT PAS SE TOUCHER (revue finale, 9 septembre 2026). Meme
   idiome exactement que la rangee de pied juste au-dessus, et pour le meme motif : « .sous » de
   style.css vaut « margin: 0 », ce qui est juste tant qu'il n'y en a qu'un par carte, et faux des
   qu'il y en a deux, les deux paragraphes se lisant alors comme un seul bloc.

   POURQUOI ICI ET NON DANS style.css, QUI EST LE FICHIER OU VIT « .sous ». style.css est partagee par
   TOUT le site, la page d'accueil et les pages legales comprises ; y poser une regle d'adjacence
   changerait l'ecart de pages qui n'ont rien demande et que ce chantier ne mesure pas. pro.css ne
   sert que le portail, et son en-tete se donne deja cette discipline mot pour mot : « ce fichier ne
   doit porter que ce que le portail ajoute ». C'est aussi le motif pour lequel ce chantier a deja
   ecarte une correction dans style.css.

   CE QU'ELLE CORRIGE EN PLUS DE L'ECRAN NEUF, ET C'EST VOULU : le portail porte aujourd'hui DEUX
   endroits ou des « .sous » se suivent, mesures dans pro.html, l'ecran de choix de rattachement (ses
   trois paragraphes) et l'ecran « Supprimer mon acces » (ses trois paragraphes, qui se touchent
   depuis le lot de conformite de la fusion 1.5.0). C'est le MEME defaut au MEME endroit du site, pas
   un nettoyage de voisinage : le corriger sur l'un et pas sur l'autre demanderait une regle portee
   par un identifiant, que le prochain ecran a deux sous-titres redecouvrirait. */
.sous + .sous { margin-top: 6px; }

/* La regle de mot de passe et l'avertissement d'inscription (limite nommee 8 de la spec) reprennent
   « .mention » de style.css : meme discretion, meme taille, deja pensee pour du texte informatif sous
   un formulaire. Rien a ajouter ici, seule la marge change pour se poser AU-DESSUS des champs plutot
   qu'en pied de page. */
.avant-champs.mention { margin: 0 0 16px; }

/* L'ecran « Mes boulangeries » (tache 13). Chaque ligne porte son en-tete (nom + etat) puis, selon
   l'etat, soit un bouton « Commander » soit la phrase de la decision 4 et un bouton « Voir
   l'historique » : la ligne n'est donc plus un simple flex a deux colonnes mais une colonne qui
   empile ce qui s'applique. « Mes commandes » (.liste-commandes, plus bas) reprend la meme
   grammaire, une ligne par commande. */
.liste-boulangeries,
.liste-commandes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.liste-boulangeries li,
.liste-commandes li {
  padding: 14px 0;
  border-top: 1px solid var(--trait);
}
.liste-boulangeries li:first-child,
.liste-commandes li:first-child { border-top: 0; }

.liste-boulangeries .ligne-entete,
.liste-commandes .ligne-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.liste-boulangeries .nom {
  color: var(--titre);
  font-weight: 600;
}
.liste-boulangeries .etat,
.liste-commandes .etat {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 4px 10px;
}
.liste-boulangeries .etat.ouverte,
.liste-commandes .etat.confirmed {
  background: var(--ok-fond);
  color: var(--ok-texte);
}
/* « .arretee » PREND LE BEIGE DE « .pending » ET NON LE ROUGE DE « .cancelled » (7 septembre 2026,
   arbitrage A-8). Une serie arretee apres cinq jours n'est pas une serie annulee : ses cinq jours
   existent et se facturent. Le rouge se lit comme « rien de tout cela n'a eu lieu », ce qui serait
   faux, et c'est exactement la confusion que l'arbitrage separe. */
.liste-boulangeries .etat.fermee,
.liste-commandes .etat.pending,
.liste-commandes .etat.arretee {
  background: var(--creux);
  color: var(--discret);
}
.liste-commandes .etat.refused,
.liste-commandes .etat.cancelled {
  background: var(--erreur-fond);
  color: var(--erreur-texte);
}
.liste-boulangeries .sous,
.liste-commandes .sous { margin-top: 4px; }
.liste-boulangeries li > .envoyer,
.liste-boulangeries li > .lien {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}
/* « Voir l'historique » est la seule action d'une rangee de boulangerie fermee, et c'etait un lien
   haut de 21 px, CENTRE au milieu d'une rangee dont tout le reste est aligne a gauche : sur un
   ordinateur il flottait seul au milieu de la carte, sans rien pour le rattacher a la boulangerie
   au-dessus de lui. Meme correction exactement que celle deja faite le 22 aout 2026 sur « Voir la
   facture » et sur la barre de navigation : 12 px au-dessus et au-dessous d'une ligne de 21 px font
   les 45 px de cible tactile du systeme, et le geste s'aligne sur ce qu'il concerne. */
.liste-boulangeries li > .lien {
  margin-top: 0;
  padding: 12px 0;
  text-align: left;
}
.liste-commandes .lignes-commande {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--corps);
}
/* LE PRIX EN COLONNE, ET NON AU BOUT D'UNE PHRASE (22 aout 2026). Chaque ligne etait un seul texte,
   « Boule de campagne × 2 · 2,00 € » : trois lignes de suite ne formaient donc aucune colonne de
   montants, et rien ne se comparait ni ne se verifiait d'un coup d'oeil. Deux <span> desormais
   (pro.js, lignesProduitsEl), le libelle a gauche qui peut passer a la ligne, le montant a droite qui
   ne le peut pas. Les chiffres tabulaires alignent les unites entre elles, ce qu'une chasse
   proportionnelle ne fait pas.

   « .libelle-ligne » ET NON « .produit », NOM ECARTE APRES MESURE A L'ECRAN : « .produit » existe
   deja dans style.css (section « Les produits »), ou il decrit la RANGEE DE SAISIE d'un produit du
   formulaire de commande, avec son filet, son rembourrage de 12 px et sa hauteur de 60 px. Le
   reprendre ici posait un trait au-dessus de chaque produit d'une commande passee et triplait la
   hauteur de la ligne. Ce fichier se pose PAR DESSUS style.css : tout nom de classe qui y vit deja
   est pris. */
.liste-commandes .lignes-commande li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  border-top: 0;
}
.liste-commandes .lignes-commande .montant-ligne {
  flex: none;
  color: var(--titre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* L'ecran « boulangerie fermee » (decision 4) : le bouton « Voir l'historique » reprend « .envoyer »
   comme un bouton primaire ordinaire, rien a lui ajouter ici. */

/* =================================================================================================
   LA LISIBILITE DE « VOS COMMANDES » ET DE « VOS FACTURES » (22 aout 2026)
   =================================================================================================
   Constat sur capture : dans une rangee, la date d'une commande, le mode de remise, les produits et
   la note s'ecrivaient tous a la meme taille et presque a la meme couleur. Le regard n'avait aucun
   point d'entree, et la rangee se lisait mot a mot au lieu de se balayer.
   ============================================================================================== */

/* LA CAUSE PRECISE, ET C'EST UN DEFAUT ET NON UN GOUT : la regle « .nom » n'existait QUE sous
   « .liste-boulangeries ». Or ligneHistorique et ligneFacture (pro.js) posent la MEME classe sur la
   date d'une commande et sur le numero d'une facture, dans « .liste-commandes », ou aucun selecteur
   ne la ramassait : le titre de chaque rangee tombait donc en corps de texte ordinaire. */
.liste-commandes .nom {
  color: var(--titre);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* Le net a payer est le chiffre pour lequel on ouvre cet ecran, et il portait exactement le meme
   poids que la periode et l'echeance juste au-dessus. Sa marge est posee ici et pas seulement sa
   taille : c'est un <p> nu, qui prenait donc la marge d'un paragraphe de la feuille du navigateur,
   soit un blanc d'une ligne entiere au milieu d'une rangee de liste. */
.liste-commandes p.nom {
  margin: 12px 0 0;
  font-size: 19px;
}

/* Une rangee respire plus qu'un element de formulaire : le filet qui la separe de la suivante ne
   doit jamais etre plus serre que l'espace qui vit dedans, sinon deux commandes se lisent comme
   une seule. */
.liste-commandes li { padding: 18px 0; }
.liste-commandes .ligne-entete {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* Le mode de remise et la note restent discrets, mais se detachent l'un de l'autre : le premier
   appartient a l'en-tete, la seconde ferme la rangee apres les produits. */
.liste-commandes .sous { font-size: 14px; }
.liste-commandes .lignes-commande + .sous { margin-top: 10px; }
.liste-commandes .mention { margin-top: 8px; }

/* LE BLOC « VOS COMMANDES RECURRENTES » (7 septembre 2026, arbitrage A-7). Il s'intercale entre la
   phrase d'annulation et le selecteur de mois, et ses cartes reprennent « .liste-commandes » sans
   rien lui ajouter : une serie se lit comme une commande, avec la meme grammaire de rangee.
   DEUX MARGES ET RIEN D'AUTRE. Le titre se colle a la phrase d'annulation juste au-dessus de lui
   (« .mention » de style.css ferme sa marge basse), et le bas du bloc doit se detacher du selecteur
   de mois, faute de quoi « septembre 2026 » se lit comme le mois DES SERIES, alors qu'elles sont
   justement hors de ce filtre. */
#historique-series { margin-bottom: 14px; }
#historique-series h2 { margin-top: 14px; }

/* « Voir la facture » est la seule action d'une rangee de facture, et c'etait un lien souligne de
   14 px pose contre le bord gauche, haut de 17 px : sous la cible tactile de 44 px que le reste du
   portail respecte deja (voir « .voir-mdp » en tete de ce fichier). Il reprend le second role du
   bouton, deja defini plus haut (« .carte button.envoyer.secondaire ») : rien de neuf a inventer.
   Largeur au contenu et non a la carte, contrairement au bouton d'un formulaire : trois rangees de
   boutons pleine largeur se seraient lues comme trois actions principales concurrentes. */
.liste-commandes li > button.envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  margin-top: 14px;
}

/* =================================================================================================
   LA BARRE DE NAVIGATION DU PORTAIL (22 aout 2026)
   =================================================================================================
   « Mes commandes · Mes factures · Mon compte » est la navigation principale du portail, et elle
   etait traitee en note de bas de carte : centree sous un titre et une liste alignes a gauche, en
   14 px souligne, avec des cibles hautes de 17 px. Trois defauts d'un coup, dont le desalignement,
   deja reconnu comme un defaut d'affichage sur cette page le 22 aout 2026 (voir le filet du lien
   destructif plus haut).
   CE QUI NE CHANGE PAS : les pieds des cartes de FORMULAIRE (« Mot de passe oublie », « Vous avez
   deja un compte ? Se connecter », « Revenir a la connexion »). Ce sont de vraies phrases de bas de
   carte, la grammaire de src/app/onboarding/index.tsx, et elles gardent « .pied-carte » seul.
   ============================================================================================== */
.pied-carte.nav-portail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Mesure a 390 px de large, la largeur d'un iPhone courant : les trois entrees les plus longues
     (« Mes commandes », « Mes factures », « Mon compte ») pesent 310 px pour 326 px disponibles, si
     bien qu'AUCUN ecart ne les tient sur une seule rangee, 8 px compris. Elles passent donc a deux
     lignes sur telephone et a une seule des 700 px, ce qui est le comportement voulu d'une barre qui
     s'adapte, et non un defaut a corriger en resserrant. L'ecart est choisi pour la lecture : assez
     large pour qu'on ne lise pas deux liens voisins comme une seule phrase. */
  column-gap: 20px;
  margin: 18px 0 0;
  border-top: 1px solid var(--trait);
  text-align: left;
}
/* 12 px au-dessus et au-dessous d'une ligne de 21 px : 45 px de haut, la cible tactile de 44 px du
   systeme. Le soulignement permanent est retire, ce qui n'enleve rien a la lisibilite dans une
   rangee dont TOUS les elements sont des liens : il revient au survol et il reste au clavier, ou il
   est la seule marque de position en plus du contour de focus. */
.pied-carte.nav-portail button.lien {
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  text-decoration: none;
}
@media (hover: hover) {
  .pied-carte.nav-portail button.lien:hover { text-decoration: underline; }
}
.pied-carte.nav-portail button.lien:focus-visible { text-decoration: underline; }
/* Deux rangees de navigation qui se suivent (« Mes commandes · Mon compte » puis « Retour », ou la
   paire de liens puis « Changer de boulangerie ») font UNE barre et non deux : un seul filet, et
   pas de blanc entre elles. Vaut aussi quand la seconde est vide, son unique lien etant masque. */
.pied-carte.nav-portail + .pied-carte.nav-portail {
  margin-top: 0;
  border-top: 0;
}

/* =================================================================================================
   LE « RETOUR » COLLANT DES DEUX ECRANS DE LECTURE (3 septembre 2026)
   =================================================================================================
   Il vivait en pied de carte, sous la liste : sur un historique de trente commandes, sortir de
   l'ecran demandait de le parcourir en entier. Il monte donc en haut a gauche et il y reste.

   C'EST LE PREMIER ELEMENT EN PERMANENCE COLLANT DE CE SITE, ET LA DIFFERENCE AVEC L'AUTRE EST
   VOULUE. « .barre » (style.css), la barre d'envoi du formulaire de commande, s'efface au contraire
   tant qu'il reste quelque chose a lire plus bas : demande du 7 aout 2026, « sur un telephone ou
   tout ne tient pas d'un coup, une barre posee en permanence mange un huitieme de l'ecran ». Ce
   qui justifie l'exception ici : cette barre-ci fait 45 px et non 76, elle vit sur un ecran de
   LECTURE et non de saisie, et surtout elle n'existe QUE dans #ecran-historique et
   #ecran-factures, quand « .barre » n'existe QUE dans #ecran-commande. AUCUN ECRAN NE PORTE LES
   DEUX, et c'est ce qu'il fallait verifier.

   Les marges negatives annulent le rembourrage de 20 px de la carte : la bande fait toute sa
   largeur, sans quoi le contenu qui passe dessous se verrait par ses deux cotes.
   ============================================================================================== */
.retour-collant {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -20px -20px 14px;
  padding: 0 20px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--trait);
  border-radius: var(--rayon) var(--rayon) 0 0;
  text-align: left;
  /* ELLE PORTE TROIS LIENS DEPUIS LE 7 SEPTEMBRE 2026 (demande du prospect), et non plus « Retour »
     seul : les raccourcis vers les deux autres ecrans montent du pied de carte, ou il fallait
     parcourir toute la liste pour les atteindre. Meme grammaire exactement que « .pied-carte.
     nav-portail » plus haut, dont ils viennent, ecart de 20 px compris : assez large pour qu'on ne
     lise pas deux liens voisins comme une seule phrase.
     MESURE A 390 px, la largeur d'un iPhone courant, sur la page reelle : « Retour » 46 px, « Mes
     factures » 88 px et « Mon compte » 87 px font 261 px avec les deux ecarts, pour 324 px
     disponibles ; « Retour · Mes commandes · Mon compte », le trio de l'ecran des factures, en fait
     287. LES TROIS TIENNENT DONC SUR UNE SEULE RANGEE des le telephone, contrairement a la barre du
     pied de carte, dont les trois entrees pesaient 310 px sans ecart. Le retour a la ligne reste la
     pour une traduction plus longue, et « align-items » garde alors les deux rangees a hauteur
     egale au lieu de les laisser pendre. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
}
/* 12 px au-dessus et au-dessous d'une ligne de 21 px : 45 px, la cible tactile du systeme. Memes
   valeurs exactement que la barre de navigation ci-dessus, dont c'est le meme genre de lien. */
.retour-collant button.lien {
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  text-decoration: none;
}
@media (hover: hover) {
  .retour-collant button.lien:hover { text-decoration: underline; }
}
.retour-collant button.lien:focus-visible { text-decoration: underline; }

/* =================================================================================================
   LA CARTE « QUAND ET COMMENT ? » CENTREE (7 septembre 2026, demande du prospect)
   =================================================================================================
   « Centre Quand et comment et les composants integres », mot pour mot. Le titre se centre a toutes
   les largeurs, ici ; les controles, eux, ne peuvent se centrer que la ou ils cessent de prendre
   toute la largeur, donc a partir de 700 px, dans le bloc de fin de fichier ou leur borne de 520 px
   est deja posee. Sous 700 px il n'y a rien a centrer, un controle pleine largeur EST centre.

   LE <h2> DE style.css NE BOUGE PAS : il sert les cinq autres cartes de cet ecran (« Vos produits »,
   « Autres produits », « Un mot pour votre boulangerie ») et tout le reste du site. C'est la classe
   posee sur cette carte-la, et elle seule, qui porte la difference.
   ============================================================================================== */
.carte-quand h2 { text-align: center; }
/* La case « Sans date de fin » se centre avec le reste : c'est le seul controle de cette carte sans
   etiquette au-dessus de lui, donc rien a quoi s'aligner a gauche. */
.carte-quand .case-session { justify-content: center; }

/* L'adresse de livraison prend l'ecart des autres rangees de la carte. « .sous » (style.css) vaut
   « margin: 0 », ce qui la collait au « Du » juste dessous, mesure a 390 px : zero pixel entre la
   derniere ligne de l'adresse et l'etiquette du champ suivant, quand tout le reste de la carte se
   separe de 16 px. */
#cmd-adresse-livraison { margin-bottom: 16px; }

/* =================================================================================================
   LE MOIS AFFICHE ET SES DEUX FLECHES (3 septembre 2026)
   =================================================================================================
   Sur « Mes commandes » et sur « Mes factures ». Le libelle au centre, une fleche de chaque cote,
   toutes deux a 44 px de cible tactile comme le reste du portail (voir « .voir-mdp » en tete).
   Une fleche DESACTIVEE et non masquee : une commande qui apparait et disparait selon le mois
   deplacerait le libelle a chaque pas.
   ============================================================================================== */
/* LE GROUPE EST BORNE, ET CENTRE (3 septembre 2026, passe Impeccable). « space-between » sur toute
   la largeur de la carte tenait les deux fleches AUX DEUX BORDS de celle-ci : 236 px d'ecart sur un
   telephone, et 880 px sur un ordinateur, mesures sur capture, avec le nom du mois seul au milieu.
   Trois morceaux qui ne se lisaient plus comme un seul controle mais comme deux marques orphelines.
   320 px n'est pas un chiffre neuf : c'est la largeur que ce groupe a DEJA sur un telephone de
   390 px, la seule ou il ait jamais ete regarde. Borne a cette valeur, il reste identique la ou il
   etait juste et se resserre partout ailleurs. */
.mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 320px;
  margin: 14px auto 4px;
}
.mois-libelle {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--titre);
  font-weight: 600;
  font-size: 16px;
  /* La premiere lettre du mois est en minuscule dans toutes les langues que rend Intl, et une
     capitale ici ne se traduit pas : c'est la feuille de style qui la pose. */
  text-transform: capitalize;
}
button.mois-fleche {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  /* 28 px et non 24 : le chevron simple est un glyphe etroit, et il portait seul l'affordance d'une
     cible de 44 px. Grossir le signe ne change ni la cible ni la couleur, il rend le bouton visible
     de la distance a laquelle on tient un telephone. */
  font-size: 28px;
  line-height: 1;
  /* Meme couleur que « button.lien » plus haut : c'est une commande, elle se lit comme les autres. */
  color: var(--accent-texte);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
@media (hover: hover) {
  button.mois-fleche:not([disabled]):hover { background: var(--creux); }
}
/* Le bout de la fenetre recue. Elle reste LISIBLE et non effacee : un bouton qui disparait laisse
   croire a un defaut d'affichage, un bouton eteint dit qu'il n'y a rien de plus. */
button.mois-fleche[disabled] {
  color: var(--trait-fort);
  cursor: default;
}

/* Une rangee de commande peut desormais porter DEUX pastilles, son statut et la marque de
   livraison. « space-between » sur trois elements les aurait ecartes en trois colonnes egales, le
   statut flottant au milieu de la rangee : la date prend donc toute la place restante, et les deux
   pastilles se suivent a droite, ce qui les lit comme une seule information. Pas de « min-width: 0 »
   avec ce « flex » : la date est ecrite en espaces insecables (voir insecable() dans pro.js), la
   laisser retrecir la ferait deborder de sa rangee au lieu de renvoyer les pastilles a la ligne.

   CE QUI PRECEDE N'ETAIT VRAI QUE TANT QUE TOUT TIENT SUR UNE RANGEE, ET C'EST MESURE SUR CAPTURE A
   390 PX (3 septembre 2026, passe Impeccable). Des que la date ne laisse plus la place, les deux
   pastilles passent a la ligne et « space-between » les jette AUX DEUX BORDS opposes, a 300 px
   l'une de l'autre : exactement le contraire de « une seule information ». Pire, la geometrie
   dependait de la longueur de la date : « mercredi 2 septembre » renvoyait les DEUX pastilles a la
   ligne, « lundi 31 aout » n'en renvoyait qu'UNE. La meme liste montrait donc trois formes pour une
   seule information.
   Sous 700 px la date prend desormais toujours sa rangee entiere et les deux pastilles la suivent,
   collees l'une a l'autre a gauche. Au-dela, tout tient sur une rangee et rien ne change.

   DEUX REGLES ET NON UNE, parce que « .liste-commandes » sert AUSSI « Mes factures » (ligneFacture,
   pro.js), qui n'a pas le meme probleme : mesure a 390 px, un numero de piece et ses une ou deux
   pastilles tiennent sur une rangee, et forcer le retour a la ligne y coutait 89 px de hauteur pour
   trois factures, sans rien resoudre.
   - « flex-start » partout : il ne change RIEN tant que tout tient (« .nom » a « flex-grow: 1 »
     absorbe la place libre et pousse les pastilles a droite, exactement comme « space-between »),
     et il les garde COLLEES ENSEMBLE le jour ou une traduction plus longue les renvoie a la ligne.
     C'est le filet, et il est gratuit.
   - le retour a la ligne systematique, lui, ne vaut que pour l'historique, seul ecran a porter
     TROIS elements dans sa rangee d'en-tete. */
.liste-commandes .ligne-entete { justify-content: flex-start; }
.liste-commandes .ligne-entete .nom { flex: 1 1 auto; }
#ecran-historique .liste-commandes .ligne-entete .nom { flex: 1 0 100%; }

/* =================================================================================================
   LA TABLETTE ET L'ORDINATEUR (3 septembre 2026, passe Impeccable)
   =================================================================================================
   CE FICHIER N'AVAIT AUCUN TRAITEMENT D'ECRAN LARGE, ET C'EST MESURE : sur ses 20 Ko, son seul
   point de rupture de mise en page reglait un « padding-top ». Tout le reste venait de style.css,
   ecrite pour la page de commande a jeton, ou « .enveloppe » passe de 640 a 760 puis 1000 px. Le
   portail en heritait sans que personne ne l'ait jamais regarde entre 700 et 1100 px.

   TROIS DEFAUTS EN SORTAIENT, TOUS MESURES SUR CAPTURE A 1440 PX :
   - le bouton « Se connecter » faisait 926 px de large, et les champs email et mot de passe autant ;
   - sur « Mes commandes », le libelle d'un produit et son montant etaient distants de 870 px, ce
     qui defait la colonne de montants que la mise en page du 22 aout 2026 avait justement batie ;
   - le controle segmente « Livraison / A retirer » faisait 926 px, soit deux options de 460 px : ce
     n'est plus un controle, ce sont deux banderoles.

   LA REGLE TIENT EN UNE PHRASE : le portail garde sur ordinateur la LARGEUR DE LECTURE qu'il a deja
   sur un grand telephone, SAUF l'ecran de commande, le seul dont la largeur serve reellement a
   quelque chose (la liste des produits passe a deux puis trois colonnes, decision motivee en tete de
   style.css, et elle n'est pas touchee). 640 px n'est pas un chiffre neuf : c'est la « max-width »
   de base de « .enveloppe », donc la mesure a laquelle ces ecrans sont deja lus entre 640 et 700 px
   de fenetre. Rien de nouveau n'apparait a 700 px, une croissance s'arrete.
   ============================================================================================== */
@media (min-width: 700px) {
  .enveloppe { padding-top: 32px; }

  /* « > * » et non une liste de seize identifiants : tous les ecrans de cette page sont des enfants
     directs de #contenu, et le message d'erreur commun aussi, qui n'a pas plus de raison qu'eux de
     s'etaler sur 926 px. */
  body.portail #contenu > *:not(#ecran-commande) {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Le « Retour » collant s'accrochait au rembourrage de 20 px de la carte, qui vaut 24 px des
     700 px (style.css). Il laissait donc un liseré de 4 px sur ses deux cotes ET une fente de 4 px
     au-dessus de lui, par ou la liste passait en defilant : une bande opaque qui ne l'est plus. */
  .retour-collant {
    margin: -24px -24px 14px;
    padding: 0 24px;
  }

  /* Les controles de SAISIE de l'ecran de commande, seul ecran qui garde toute la largeur. Le
     catalogue, lui, ne bouge pas : c'est la seule partie dont la longueur depende de la boulangerie.
     520 px est la largeur a laquelle ces quatre controles sont deja lus sur une tablette en portrait
     et en dessous, et aucun d'eux ne gagne quoi que ce soit a s'etirer davantage. */
  body.portail #ecran-commande .segment,
  body.portail #ecran-commande .duo,
  body.portail #ecran-commande #cmd-jours,
  body.portail #ecran-commande #cmd-details {
    max-width: 520px;
  }

  /* LA COLONNE DE 520 px DE « QUAND ET COMMENT ? » SE CENTRE (7 septembre 2026, demande du
     prospect). Ces controles etaient bornes a 520 px depuis le 3 septembre, mais colles au bord
     GAUCHE d'une carte large de 712 px sur une tablette et de 952 px sur un ordinateur, sous un
     titre lui aussi a gauche : le vide etait tout entier a droite, ce qui se lit comme un bloc mal
     pose et non comme une intention.
     TROIS SELECTEURS ET NON LES QUATRE DU BLOC CI-DESSUS : « #cmd-details » vit dans une AUTRE
     carte, sous son propre titre aligne a gauche, et le centrer y aurait pose un champ a 216 px de
     l'etiquette qui le nomme, mesure a 1440 px. C'est le defaut d'alignement que ce fichier a deja
     corrige trois fois (22 aout, 3 septembre) et non un centrage de plus.
     « #cmd-bloc-serie > .champ » PORTE L'ETIQUETTE AVEC SON CONTROLE : centrer « #cmd-jours » seul
     aurait laisse « Jours de la semaine » au bord gauche de la carte pendant que ses sept cases
     glissaient vers le centre. Le « > » ecarte les deux champs du « duo », qui sont des elements
     flex a « flex: 1 1 150px » et n'ont rien a centrer. */
  body.portail .carte-quand .segment,
  body.portail .carte-quand .duo,
  body.portail .carte-quand #cmd-bloc-serie > .champ,
  body.portail .carte-quand #cmd-adresse-livraison,
  body.portail .carte-quand .case-session,
  body.portail .carte-quand #cmd-mention-annulation {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Une rangee de commande tient entiere sur une seule ligne des cette largeur : la date reprend
     donc la place restante et les deux pastilles reviennent a droite d'elles-memes. Voir le motif
     complet au-dessus de « .liste-commandes .ligne-entete ». */
  #ecran-historique .liste-commandes .ligne-entete .nom { flex: 1 1 auto; }
}

/* LE DETAIL D UN PRODUIT (16 septembre 2026, migration 236) : « sans sel » sur dix baguettes.
   Cache tant que la rangee n'a pas de quantite, pour ne pas poser trente champs vides sous trente
   produits ; parait sous le nom et la quantite, sur toute la largeur de la rangee, des qu'elle prend
   la classe « saisi » que pro.js pose deja. « .produit input » de style.css lui donnerait la largeur
   de 92 px et le centrage d'un champ de quantite : les deux sont repris ici, et le hors-catalogue
   partage la meme rangee, donc la meme regle. */
.produit .detail-produit { display: none; }
.produit.saisi { flex-wrap: wrap; }
.produit.saisi .detail-produit {
  display: block;
  flex: 1 0 100%;
  width: 100%;
  text-align: left;
}