/* ══════════════════════════════════════════════════════════════════════════════════════════
   « MOI » EN ÉCRANS, PLUS EN ACCORDÉONS (JM, le 7 octobre 2026).
   ══════════════════════════════════════════════════════════════════════════════════════════

   « Les accordéons sont vilains : fais des wizards, des zones de saisie bien cool, inspire-toi
   des pages de connexion. » La page est une liste de trois lignes ; chacune ouvre SON écran, avec
   son titre en grand, ses champs en pilule comme à la connexion de Manage et dans le panier, et
   « Retour » en bas à gauche. Une chose à la fois, comme les questions du panier.

   Les sections restent dans la page, avec leurs identifiants : les scripts du profil trouvent
   toujours leurs champs. Seul l'affichage change (voir le script en bas de profile.html).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La liste ───────────────────────────────────────────────────────────────────────── */
/* LES MÊMES LIGNES QUE MANAGE (JM, le 7 octobre 2026, deux captures : « les accordéons doivent
   concorder, on doit avoir la même chose que dans Manage ») : une carte blanche sans bord sur le
   fond gris, la pastille de l'icône à gauche, le titre en gras, le chevron à droite. Les couleurs
   sont celles de Plus dans Manage : orange pour le profil, gris ardoise pour l'application. Le
   violet reste à Oufy. */
.bo-moi .bo-pliant { border: 0; border-radius: 18px; box-shadow: 0 1px 3px rgba(24,16,40,.05); }
.bo-moi .bo-pliant-tete { min-height: 72px; justify-content: flex-start; gap: 14px; padding: 14px 16px; }
.bo-moi .bo-pliant-tete h2,
.bo-moi .bo-pliant-tete h3 { flex: 1; font-size: 16.5px; font-weight: 800; letter-spacing: -.1px; }
.bo-moi .bo-pliant-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; line-height: 0; }
.bo-moi .bo-pliant-ic svg { width: 22px; height: 22px; }
.bo-moi .bo-pliant-ic.ic-infos { color: #EA580C; background: #EA580C1A; }
.bo-moi .bo-pliant-ic.ic-adresse { color: #DC2626; background: #DC26261A; }
.bo-moi .bo-pliant-ic.ic-apropos { color: #475569; background: #4755691A; }
.bo-moi .bo-pliant-chev { margin-left: auto; transform: rotate(-90deg); }
/* Sur son écran, la ligne devient un titre : sans pastille. */
.bo-moi.ecran .bo-pliant.actif .bo-pliant-ic { display: none; }
.bo-moi .bo-pliant.open .bo-pliant-tete { box-shadow: none; }
/* Les corps ne se déplient plus : ils s'ouvrent en écran. */
.bo-moi .bo-pliant-corps,
.bo-moi .bo-pliant.open .bo-pliant-corps { max-height: none; display: none; transition: none; }

/* ── Un écran ouvert ────────────────────────────────────────────────────────────────── */
.bo-moi.ecran .bo-pliant:not(.actif) { display: none; }
.bo-moi.ecran .bo-pliant.actif { border: 0; background: transparent; box-shadow: none; overflow: visible; animation: bo-moi-entre .28s ease; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete { pointer-events: none; padding: 4px 0 16px; min-height: 0; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete h2,
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete h3 { font-size: 22px; line-height: 1.25; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-chev { display: none; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-corps { display: block; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-corps > * { padding-left: 0; padding-right: 0; }
/* ══════════════════════════════════════════════════════════════════════════════════════
   CETTE ANIMATION NE DOIT JAMAIS PORTER DE `transform`.
   ══════════════════════════════════════════════════════════════════════════════════════

   JM, le 21 octobre 2026, capture à l'appui : « regarde, ça se passe toutes les fois qu'on
   essaie de rentrer dans la page À propos de l'application […] le bouton Retour et Continuer
   sont d'abord quittés en haut avant de prendre leur place ».

   LA RÈGLE DU NAVIGATEUR, ET C'EST ELLE QUI MORD : un élément `position: fixed` se place par
   rapport à la FENÊTRE — sauf si l'un de ses ancêtres porte un `transform`, un `filter`, une
   `perspective` ou un `contain`. Cet ancêtre devient alors son cadre de référence.

   `bo-moi-entre` posait `translateX(14px)` sur `.bo-pliant.actif`. Pendant les 280 ms de
   l'animation, la barre « Retour / Continuer » — `position: fixed`, collée en bas du cadre du
   téléphone — se plaçait donc par rapport au BLOC, haut de quelques centaines de pixels, et
   non par rapport à l'écran. Elle se dessinait en haut, par-dessus la ligne « Version », puis
   sautait à sa vraie place quand le `transform` disparaissait.

   MESURÉ dans le navigateur avant correction : la barre à `top: 165` pendant six images, puis
   `top: 641` une fois l'animation finie. 476 pixels de saut, à chaque ouverture d'écran.

   L'OPACITÉ SEULE NE CRÉE PAS DE CADRE DE RÉFÉRENCE. L'écran apparaît en fondu, la barre est
   à sa place dès la première image, et plus rien ne saute. Le glissement de 14 px était un
   agrément ; une barre qui traverse l'écran à chaque ouverture n'en est pas un.

   LE GARDE-FOU : manageboutique/src/appareil/ecransSansSaut.test.ts échoue si un `transform`
   revient ici. La panne est invisible à la lecture — la ligne a l'air parfaitement normale. */
@keyframes bo-moi-entre { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bo-moi.ecran .bo-pliant.actif { animation: none; } }

/* ── Les champs, comme à la connexion ───────────────────────────────────────────────── */
.bo-moi .form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-sec); }
.bo-moi input[type="text"],
.bo-moi input[type="tel"] {
  width: 100% !important; height: 54px !important; box-sizing: border-box;
  padding: 0 18px !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: var(--surface); font-size: 16px !important; font-weight: 500 !important; color: var(--text); outline: none;
}
.bo-moi input[type="text"]:focus,
.bo-moi input[type="tel"]:focus { border: 2px solid var(--primary) !important; padding: 0 17px !important; background: var(--primary-bg, #F3E8FF); }
/* EN LECTURE, LES CHAMPS GARDENT LEUR TÊTE : grisés, ils avaient l'air éteints, alors qu'ils
   montrent ce qui est enregistré. C'est « Modifier » qui les ouvre. */
.bo-moi input[readonly] { color: var(--text); background: var(--surface); }

/* LES ADRESSES SANS CADRE (JM, le 7 octobre 2026, deux captures à l'appui : « je ne veux pas
   que le formulaire et les zones de saisie soient comme ça, à la rigueur comme ça »). Chaque
   champ était une pilule dans une case encadrée, dans une carte encadrée : trois bords pour une
   seule réponse, et un double anneau au focus. Comme les informations : un libellé, puis la
   pilule. Deux adresses se séparent d'un trait. Les !important battent le style écrit dans
   renderAddresses(). */
.bo-moi #addressesList > div { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
.bo-moi #addressesList > div + div { border-top: 1px solid var(--border) !important; padding-top: 18px !important; }
.bo-moi #addressesList .form-group,
.bo-moi #addressesList .form-group:focus-within {
  margin-bottom: 14px !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.bo-moi #addressesList .form-group label { text-transform: none; letter-spacing: 0; }
.bo-moi #addressesList button[data-geo] {
  width: 100%; height: 50px; border-radius: 999px; border: 2px solid var(--primary);
  background: var(--primary-bg, #F3E8FF); color: var(--primary-dark); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.bo-moi #addressesList button[data-geo].prise { border-color: #16A34A; background: #DCFCE7; color: #166534; }

/* ── La première fois : barre d'avancement et « Suivant » (voir profile.html) ───────── */
.bo-ecran-avance { display: none; margin-bottom: 14px; }
.bo-moi.ecran.premiere .bo-pliant.actif .bo-ecran-avance { display: block; }
.bo-ecran-avance::before { content: ''; display: block; height: 6px; border-radius: 999px; background: var(--primary-bg, #F3E8FF); }
.bo-ecran-barre { height: 6px; margin-top: -6px; border-radius: 999px; background: var(--primary); transition: width .35s ease; }
.bo-ecran-num { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-sec); }
.bo-ecran-suivant {
  display: none; flex: 1; height: 54px; border: 0; border-radius: 999px; background: var(--primary);
  color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  align-items: center; justify-content: center; gap: 6px;
  /* Le bouton à tranche, comme le panier : voir css/assistant-commande.css. */
  letter-spacing: .7px; text-transform: uppercase;
  box-shadow: inset 0 -4px 0 var(--bo-tranche), 0 10px 12px -8px var(--bo-lueur);
  transition: transform .08s ease, box-shadow .08s ease;
}
.bo-ecran-suivant:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 var(--bo-tranche-appui), 0 4px 6px -4px var(--bo-lueur-appui); }
.bo-moi.ecran.premiere .bo-ecran-suivant { display: flex; }
.bo-ecran-erreur { margin-top: 14px; color: #B91C1C; font-size: 14px; font-weight: 600; text-align: center; }
.bo-ecran-erreur:empty { display: none; }

/* ── Retour : le chevron en haut, ou le wizard en bas ───────────────────────────────── */
/* Déjà remplie : le chevron en haut à gauche, comme à la connexion, et plus rien en bas.
   La première fois (.premiere) : « Retour » et « Continuer » en bas, comme le panier. */
/* Les !important battent le style général des boutons de theme.css, qui en faisait une pilule
   blanche bordée. */
.bo-ecran-chevron { display: none !important; width: auto !important; height: auto !important; min-height: 0 !important;
  margin: 0 0 6px -8px !important; padding: 8px !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--text); cursor: pointer; line-height: 0; }
.bo-moi.ecran:not(.premiere) .bo-pliant.actif .bo-ecran-chevron { display: block !important; }
/* UN SEUL RETOUR À LA FOIS : sur un écran, le chevron ramène à la liste, et « Continuer mes
   achats » au-dessus faisait un second retour, vers ailleurs. Il revient avec la liste. */
body:has(.bo-moi.ecran) #backLink { display: none !important; }
/* LA BARRE DU BAS, DANS LES DEUX CAS (JM, le 9 octobre 2026 : « plutôt Retour et Continuer ;
   pour modifier, elle le fera elle-même et elle continue »). Elle n'apparaissait que la
   première fois ; les fiches déjà remplies n'avaient qu'un « Modifier » pleine largeur, qui
   est parti. Collée en bas du cadre du téléphone, au-dessus de la barre de navigation : sur
   une fiche longue, elle était sous le pli et l'on enregistrait en aveugle. */
.bo-ecran-nav {
  display: none; gap: 12px;
  position: fixed; z-index: 30;
  left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), calc(var(--bo-cadre, 430px) - 32px));
  margin-top: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
}
.bo-moi.ecran .bo-pliant.actif .bo-ecran-nav { display: flex; }
/* « Continuer » prend la place qui reste : « Retour » garde la largeur de son mot. */
.bo-ecran-nav .bo-ecran-suivant { display: flex; flex: 1; }
.bo-ecran-nav .bo-ecran-retour { flex: 0 0 auto; }
/* La fiche garde de l'air sous elle : sans ça, le dernier champ se cache derrière la barre. */
.bo-moi.ecran .bo-pliant.actif .bo-pliant-corps { padding-bottom: 86px; }
/* « RETOUR » EST LE FRÈRE DE « CONTINUER » (JM, le 9 octobre 2026 : « le bouton retour, enlève le
   chevron et fais-le comme Continuer »). Même hauteur, même capitale espacée, même tranche de
   4 px qui s'enfonce à l'appui ; seule la couleur les sépare — l'un est plein, l'autre bordé.
   Avec son chevron, « Retour » se lisait comme un lien posé à côté d'un bouton : deux objets de
   natures différentes sur la même ligne, alors qu'ils font le même geste en sens opposé.
   Sa tranche est un noir translucide : sur un fond blanc, elle donne un gris, et elle suivrait
   n'importe quelle autre couleur de fond sans être réécrite. */
.bo-ecran-retour {
  height: 54px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .7px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.09), 0 10px 12px -8px rgba(0,0,0,.16);
  transition: transform .08s ease, box-shadow .08s ease;
}
.bo-ecran-retour:active {
  transform: translateY(3px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.09), 0 4px 6px -4px rgba(0,0,0,.14);
}
/* Le chevron du haut porte la même classe pour partager le clic : il ne doit rien prendre de
   l'habit du bouton du bas. */
.bo-ecran-chevron.bo-ecran-retour {
  height: auto; padding: 8px; border: 0; background: none; box-shadow: none;
  text-transform: none; letter-spacing: normal;
}
.bo-ecran-chevron.bo-ecran-retour:active { transform: none; box-shadow: none; }

/* LES TROIS LIGNES SONT PAREILLES : le trait violet d'une ancienne règle (theme.css) ne visait que
   deux des trois titres, « À propos » restait sans. Dans la liste, aucun n'en a. */
.bo-moi .bo-pliant-tete h2::before,
.bo-moi .bo-pliant-tete h3::before { display: none !important; }

/* COMME DANS LE PANIER : un libellé, puis la pilule. L'ancien style mettait chaque champ dans sa
   carte encadrée, elle-même dans une carte : trois bords autour d'une seule case à remplir. */
.bo-moi .order-form,
.bo-moi .order-form .form-group { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.bo-moi .order-form .form-group { margin-bottom: 14px !important; }
.bo-moi .order-form .form-group label { text-transform: none; letter-spacing: 0; }

/* ── « PROMOTIONS » : UNE LIGNE QUI MÈNE AILLEURS ───────────────────────────────────────── */
/* JM, le 9 octobre 2026 : « Promotion devient comme le portefeuille dans BoutiqueOuf : quand on
   clique sur le lien, ça ouvre promotion. » Elle a l'habit des autres lignes — carte blanche,
   pastille, titre, chevron — mais c'est un <a> : rien ne se déplie, on quitte la page. Le rose
   la distingue des trois autres pastilles (orange, rouge, ardoise) sans emprunter le violet,
   qui reste à Oufy. */
.bo-moi .bo-pliant-lien {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px;
  margin-bottom: 12px; border-radius: 18px; background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(24,16,40,.05); text-decoration: none; color: inherit;
}
.bo-moi .bo-pliant-lien h3 { flex: 1; margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.1px; color: var(--ink); }
.bo-moi .bo-pliant-lien:active { background: #F7F5FA; }
.bo-moi .bo-pliant-ic.ic-promo { color: #DB2777; background: #DB27771A; }
/* Sur l'écran d'une section, la liste disparaît : le lien part avec elle. */
.bo-moi.ecran .bo-pliant-lien { display: none; }

/* ── LE BIC MAGIQUE : REMPLIR LA FICHE POUR UN ESSAI ──────────────────────────────────── */
/* JM, le 9 octobre 2026 : « mets un petit bouton pour les tests dans la page Plus, à côté du
   nom Mes informations, à droite, tu mets le bic magique. » Posé sur la ligne, juste avant le
   chevron, assez discret pour ne pas appeler le doigt d'une cliente et assez visible pour
   qu'on le trouve sans chercher. Il disparaît avec la liste dès qu'un écran s'ouvre. */
.bo-moi .bo-pliant { position: relative; }
.bo-moi .bo-bic {
  position: absolute; right: 44px; top: 22px;
  width: 30px; height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #ECE9F1); background: var(--surface, #fff);
  color: var(--primary, #6B21A8); cursor: pointer; padding: 0;
}
.bo-moi .bo-bic:active { background: var(--primary-bg, #F3E8FF); transform: scale(.92); }
/* IL RESTE DANS LE WIZARD (JM, le 9 octobre 2026 : « n’oublie pas le petit bic magique ici,
   à droite du texte Mon adresse de livraison, pour remplir automatiquement »). Il partait
   avec les chevrons quand l’accordéon est devenu une suite d’écrans — or c’est précisément
   là qu’on remplit, et retaper une adresse à chaque essai coûte plus que l’essai.
   Les écrans fermés n’ont rien à cacher : ils sont déjà `display: none` en entier.
   Dans un écran, le bic entre DANS la tête (voir profile.html) : le titre descend sous la
   barre d’étape, et un `top` fixe l’aurait laissé en haut, seul au-dessus du mot. */
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete { padding: 4px 42px 16px 0; position: relative; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete .bo-bic {
  right: 0; top: 50%; transform: translateY(-50%); pointer-events: auto;
}
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete .bo-bic:active { transform: translateY(-50%) scale(.92); }

/* Le bic de l'assistant de commande : posé en haut à droite du panneau, hors du flux, pour ne
   pousser aucune étape. Même rond que celui de la page Plus. */
.bo-assistant { position: relative; }
.bo-bic-assistant {
  position: absolute; right: 4px; top: 2px; z-index: 4;
  width: 30px; height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #ECE9F1); background: var(--surface, #fff);
  color: var(--primary, #6B21A8); cursor: pointer; padding: 0;
}
.bo-bic-assistant:active { background: var(--primary-bg, #F3E8FF); transform: scale(.92); }
/* Le titre s'arrête avant le bic : « Mon adresse de livraison » passait dessous. Le chevron,
   lui, est poussé par la marge automatique, donc il suit sans qu'on y touche. */
.bo-moi .bo-pliant:has(.bo-bic) .bo-pliant-tete { padding-right: 58px; }

/* ── PAS DE CHEVRON SUR PROMOTIONS NI SUR À PROPOS (JM, le 9 octobre 2026) ──────────────── */
/* Les deux ne demandent rien : l'une ouvre une page, l'autre une fiche qu'on lit. Le chevron
   est réservé aux lignes qu'on remplit, là où il annonce un formulaire à traverser. */
.bo-moi .bo-pliant-lien .bo-pliant-chev,
.bo-moi #pliantApropos .bo-pliant-chev { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   LE CHEVRON ET LE TITRE SUR UNE SEULE LIGNE (JM, le 21 octobre 2026).
   ══════════════════════════════════════════════════════════════════════════════════════

   « Je t'ai dit de mettre le terme À propos à côté, next to le chevron de sortie, de diminuer
   sa largeur horizontale, de changer le style et le design, et surtout la police de Version. »

   C'est la mise en page de la page Promotions, déjà tranchée le 9 octobre : « le chevron de
   retour est à gauche du texte Promotions, et pas en haut ». Ici il tenait encore sa propre
   ligne et volait quarante pixels de hauteur, alors qu'il se lit comme le début du titre.

   UNE GRILLE, ET NON UN `flex` SUR LE BLOC : le bloc porte quatre enfants — la barre d'étape,
   le chevron, la tête et le corps — et seuls les deux du milieu partagent une ligne. En grille,
   chacun dit sa case sans qu'on touche à l'ordre du balisage, donc sans rien casser du script
   qui remonte au `.bo-pliant` depuis un bouton.

   LE TITRE PERD TROIS PIXELS (22 → 19) et renonce à passer à la ligne : à côté du chevron,
   « À propos de l'application » tenait sur deux lignes et poussait la fiche vers le bas. */
.bo-moi.ecran .bo-pliant.actif {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2px;
}
.bo-moi.ecran .bo-pliant.actif .bo-ecran-avance { grid-column: 1 / -1; }
.bo-moi.ecran:not(.premiere) .bo-pliant.actif .bo-ecran-chevron {
  grid-column: 1; align-self: center; margin: 0 0 0 -8px !important;
  /* `justify-self: start` : une case de grille étire son contenu par défaut, et le chevron
     — un `display: block` sans largeur — prenait 215 px de large, mesurés. Il ne doit faire
     que la taille de son dessin, sinon il mange la place du titre et reste cliquable loin
     de l'icône. */
  justify-self: start;
}
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete { grid-column: 2; padding: 4px 0; }
/* Sans chevron (la première fois, le wizard), le titre reprend toute la largeur. */
.bo-moi.ecran.premiere .bo-pliant.actif .bo-pliant-tete { grid-column: 1 / -1; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-corps { grid-column: 1 / -1; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete h2,
.bo-moi.ecran .bo-pliant.actif .bo-pliant-tete h3 {
  font-size: 19px; line-height: 1.25; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── « VERSION » : UNE FICHE, PAS UNE LIGNE DE FORMULAIRE ──────────────────────────── */
/* Deux mots gris de 13 px posés aux deux bouts d'une ligne vide : l'écran entier ne portait
   que ça, et ça se lisait comme un reste. L'intitulé prend la casse et l'espacement des
   étiquettes de la fiche produit — c'est le même rôle, ça prend le même habit — et le numéro
   passe en chiffres tabulaires de 15 px dans une pastille : une valeur qu'on lit et qu'on
   recopie quand quelque chose cloche, pas une phrase. */
.bo-moi.ecran .bo-apropos { padding: 6px 0 0; }
.bo-moi.ecran .bo-apropos-ligne {
  align-items: center;
  padding: 0;
}
.bo-moi.ecran .bo-apropos-ligne span {
  font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted, #6E6880);
}
.bo-moi.ecran .bo-apropos-ligne strong {
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  color: var(--ink, #16121F);
  font-variant-numeric: tabular-nums;
  padding: 7px 13px; border-radius: 999px;
  background: color-mix(in oklab, var(--muted, #6E6880) 10%, var(--bg, #FAFAFA));
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LA PAGE NE DÉFILE PAS. SEUL SON CONTENU DÉFILE.
   ══════════════════════════════════════════════════════════════════════════════════════

   JM, le 21 octobre 2026, capture à l'appui : « dans l'IPA, dès qu'on clique dans la zone de
   saisie, le contenu monte jusque dans la safe zone, le header n'est pas un sticky header
   […] dans l'iPhone les pages sont toutes scrollables, c'est un bug, on a l'impression
   d'être dans une PWA, surtout quand on ouvre les zones de saisie : tout se gâte, les sticky
   s'envolent. L'application doit être statique, seulement les zones qui sont scrollables
   doivent le devenir. »

   ── POURQUOI L'EN-TÊTE S'ENVOLE, ET CE N'EST PAS LUI LE FAUTIF ──────────────────────

   Sur iPhone, le clavier ne rétrécit pas la fenêtre : il se pose PAR-DESSUS, et le système
   fait glisser LE DOCUMENT vers le haut pour montrer le champ touché. Un en-tête `sticky`
   colle au haut du document, pas au haut de l'écran : le document monte, l'en-tête monte
   avec lui, et il passe sous l'encoche. Il n'a jamais cessé d'être collant — c'est ce à quoi
   il colle qui a bougé.

   LA SEULE FAÇON DE L'EN EMPÊCHER est de ne rien laisser à faire glisser. Un document qui ne
   défile pas ne peut pas être poussé : iOS fait alors défiler la BOÎTE intérieure, celle qui
   porte le formulaire, et l'en-tête comme le pied, posés hors d'elle, ne bougent pas d'un
   pixel.

   ── CE QUE ÇA DONNE ICI ─────────────────────────────────────────────────────────────

   Le corps devient une colonne haute d'un écran : l'en-tête, puis la boîte qui défile. Le
   pied, lui, est `position: fixed` — il reste où il est, et la boîte se réserve sa hauteur
   plus bas.

   ON NE POSE AUCUN `transform` POUR COMPENSER. La page d'arrivée le fait (`index.html`), et
   c'est justifié là-bas : elle n'a ni en-tête collant ni pied fixe. Ici, un `transform` sur
   le corps en ferait le cadre de référence de TOUT ce qui est `position: fixed` — le pied —
   et on retomberait sur la panne du matin même, celle de la barre « Retour / Continuer ».

   `100dvh` et non `100vh` : sur un téléphone, la barre d'adresse se replie et `vh` garde
   l'ancienne hauteur, ce qui laisserait dépasser de quoi faire glisser la page. */
html:has(.bo-moi), body:has(.bo-moi) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body:has(.bo-moi) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
/* `min-height: 0` : sans lui, une boîte flexible refuse de rétrécir sous la hauteur de son
   contenu, et c'est le document qui recommencerait à défiler — la panne qu'on ferme. */
.bo-moi {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* La place du pied fixe, pour que le dernier champ ne se cache pas derrière lui. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.bo-moi::-webkit-scrollbar { width: 0; height: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   PLUS D'ESPACE MORT ENTRE « RETOUR / CONTINUER » ET LE PIED
   ══════════════════════════════════════════════════════════════════════════════════════

   JM, le 21 octobre 2026 : « il y a un espace entre Retour / Continuer de la page À propos de
   l'application et le footer, retire cet espace ».

   TROIS RÉSERVES POUR UN SEUL PIED. Chacune croyait être la seule, et elles s'empilaient :

     style.css      body { padding-bottom: 120px + encart }    → 154 px sur iPhone
     ce fichier     .bo-moi { padding-bottom: 96px + encart }   → 130 px
     ce fichier     .bo-pliant-corps { padding-bottom: 86px }   →  86 px

   Or la pastille du pied mesure 66 px et flotte à `--bo-pastille-bas` (26 px) du bord : sa
   place, c'est `--bo-sur-la-pastille`, soit 100 px. Les 270 px restants étaient du vide —
   d'où les boutons posés loin au-dessus du pied, avec un trou entre eux et lui.

   UNE SEULE RÉSERVE, PRISE PAR LE CORPS DE LA PAGE (style.css : `body { padding-bottom:
   var(--bo-sur-la-pastille) }`). La boîte qui défile s'arrête donc pile au-dessus de la
   pastille, et tout ce qui se colle « en bas » se colle au bon endroit, sans rien calculer.

   DEUX BOÎTES QUI DÉFILENT, C'EST UNE DE TROP. Depuis que `js/header.js` emballe le contenu de
   chaque page dans `.bo-defile`, `.bo-moi` se retrouvait être un second cadre à défilement
   DANS le premier : son `flex: 1 1 auto` ne visait plus rien (son parent n'est plus le corps de
   page), sa hauteur devenait celle de son contenu, et son `overflow-y: auto` ne servait plus
   qu'à ajouter sa propre réserve. C'est la boîte de `header.js` qui défile, et elle seule.

   `min-height: 100%` : sans lui, un écran court — « À propos », deux lignes — ne mesurerait que
   ses deux lignes, et le `margin-top: auto` des boutons n'aurait aucune hauteur à repousser.
   Ils se poseraient sous le titre, au milieu de l'écran. */
body.bo-statique .bo-moi {
  flex: none;
  overflow: visible;
  /* `!important` : le conteneur de profile.html porte un `style="padding: 16px 20px"` ÉCRIT DANS
     LA BALISE, et un style en ligne bat une feuille — sans ce mot, les 16 px du bas restaient et
     repoussaient « Retour / Continuer » de seize pixels de plus au-dessus de la pastille. Mesuré
     dans l'IPA : les boutons se posaient à 752 px du haut au lieu de 768. */
  padding-bottom: 0 !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* L'ÉCRAN OUVERT PREND LA HAUTEUR QUI RESTE, et sa dernière rangée s'étire.
   La grille de l'écran (voir « UNE GRILLE, ET NON UN flex » plus haut) porte `align-items:
   center` : sans `1fr` sur la rangée du corps et `align-self: stretch` sur le corps lui-même,
   la rangée se contentait de la hauteur de la fiche et se centrait dedans — les boutons
   retombaient au milieu de l'écran. */
/* `margin-bottom: 0` : `.bo-pliant` en porte 12 px (theme.css) pour séparer les lignes de la
   LISTE. Ouvert en écran, il est seul : ces 12 px devenaient douze pixels de vide de plus entre
   les boutons et la pastille. Mesuré dans l'IPA : la boîte s'arrête à 774, le bloc s'arrêtait à
   762, la pastille commence à 782. */
.bo-moi.ecran .bo-pliant.actif { flex: 1 1 auto; min-height: 0; grid-template-rows: auto 1fr; margin-bottom: 0; }
.bo-moi.ecran.premiere .bo-pliant.actif { grid-template-rows: auto auto 1fr; }
.bo-moi.ecran .bo-pliant.actif .bo-pliant-corps {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
}

/* LES BOUTONS REVIENNENT DANS LA PAGE (JM, le 21 octobre 2026 : « assure-toi que les boutons
   Retour et Continuer d'À propos de l'application soient en haut du sticky footer »).

   Ils étaient `position: fixed` à une hauteur calculée à la main — `64px + encart + 12px` — qui
   prétendait deviner où se trouve la pastille. Elle se trompait de 36 px sur iPhone, et surtout
   un élément `fixed` se place par rapport à l'ÉCRAN : il partageait le couloir de la pastille et
   passait par-dessus elle, ou se posait dans le vide au-dessus.

   `sticky; bottom: 0` les laisse dans le flux du formulaire — donc derrière le dernier champ sur
   une fiche longue — et les colle au bas de la boîte dès que ce bas est atteint. Et le bas de la
   boîte, c'est exactement le haut de la pastille. Rien à calculer, rien à redire si la pastille
   change de taille.

   Le fond est celui de la page : sans lui, les champs défileraient en transparence sous les deux
   boutons. */
.bo-moi.ecran .bo-pliant.actif .bo-ecran-nav {
  position: sticky;
  bottom: 0;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  /* Rien en bas : la boîte s'arrête déjà huit pixels au-dessus de la pastille (874 − 100 = 774
     contre 782), et c'est l'air qu'il faut. En ajouter ici le rouvrait. */
  padding: 14px 0 0;
  background: var(--bg, #FAFAFA);
}