/* web/formation.css — l'onglet Formation. Voir web/formation.js.

   Tout est préfixé « fo- » : app.css a déjà pris les mots courts (.vide,
   .case, .grille, .memo, .muet…), et en réutiliser un gonfle la mise en page
   sans un message.

   Le téléphone et le PC sont à égalité : une colonne sous 700 px, des
   colonnes au-delà. Aucune largeur fixe, aucun défilement horizontal — sauf
   le rail des volets, qui défile en lui-même. */

.fo { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.fo .entete-page { margin-bottom: 0; }

/* --- où j'en suis ---------------------------------------------------------- */

.fo-resume { display: flex; flex-direction: column; gap: var(--e3); }
.fo-resume-txt { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.fo-resume-txt > b { font-size: 26px; font-variant-numeric: tabular-nums; }
.fo-resume-txt > span:not(.fo-marque) { color: var(--txt-2); font-size: 13.5px; }

.fo-jauge {
  display: block; height: 6px; border-radius: var(--r-p);
  background: var(--surf-3); overflow: hidden; min-width: 48px;
}
.fo-jauge > i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--acc-vif); transition: width .4s var(--ressort);
}

/* --- les marques ------------------------------------------------------------ */

.fo-marque, .fo-genre {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-p);
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--bord-fort); color: var(--txt-2); font-style: normal;
}
.fo-marque .ico { width: 12px; height: 12px; }
.fo-genre { border-color: var(--acc-bord); color: var(--acc-vif); background: var(--acc-sourd); }
.fo-a-lire { border-color: transparent; background: var(--alerte); color: #1b1400; }
.fo-neuf { border-color: transparent; background: var(--info); color: #04202c; }
.fo-lu { border-color: transparent; color: var(--bon); background: rgba(34, 197, 94, .14); }
.fo-etat-brouillon { color: var(--txt-3); }
.fo-etat-propose { border-color: transparent; background: var(--acc-sourd); color: var(--acc-vif); }
.fo-etat-refuse { border-color: transparent; background: rgba(239, 68, 68, .16); color: var(--danger); }
.fo-etat-publie { border-color: transparent; color: var(--bon); background: rgba(34, 197, 94, .14); }

/* --- les volets -------------------------------------------------------------- */

.fo-volets {
  display: flex; gap: var(--e1); overflow-x: auto; scrollbar-width: none;
  padding: 4px; border-radius: var(--r-p);
  background: var(--surf-1); border: 1px solid var(--bord);
  align-self: flex-start; max-width: 100%;
}
.fo-volets::-webkit-scrollbar { display: none; }
.fo-volets > button {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px; border-radius: var(--r-p); border: 0;
  background: none; color: var(--txt-2); font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; min-height: 38px;
}
.fo-volets > button:hover { color: var(--txt); }
.fo-volets > button.actif { background: var(--acc); color: var(--sur-acc); }
.fo-nb {
  min-width: 18px; padding: 0 5px; border-radius: var(--r-p);
  background: var(--surf-3); color: var(--txt); font-size: 11px; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.fo-volets > button.actif .fo-nb { background: rgba(255, 255, 255, .22); color: inherit; }

/* --- le parcours ------------------------------------------------------------- */

.fo-parcours { display: flex; flex-direction: column; gap: var(--e3); }
.fo-etape {
  border: 1px solid var(--bord); border-radius: var(--r); background: var(--surf-1);
  overflow: hidden;
}
.fo-etape > summary {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4); cursor: pointer; list-style: none;
}
.fo-etape > summary::-webkit-details-marker { display: none; }
.fo-etape > summary:hover { background: var(--surf-2); }
.fo-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acc-sourd); color: var(--acc-vif);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.fo-num .ico { width: 18px; height: 18px; }
.fo-etape-finie .fo-num { background: rgba(34, 197, 94, .16); color: var(--bon); }
.fo-etape-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fo-etape-txt > b { font-size: 15.5px; }
.fo-directive { color: var(--txt-2); font-size: 13px; line-height: 1.5; }
.fo-etape-compte {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  color: var(--txt-3); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.fo-etape-compte .fo-jauge { width: 56px; }
.fo-etape > .fo-cartes { padding: 0 var(--e4) var(--e4); }
.fo-etape-vide {
  margin: 0; color: var(--txt-3); font-size: 13px;
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}

/* --- les cartes de fiche ------------------------------------------------------ */

.fo-cartes {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.fo-carte {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  padding: var(--e3) var(--e4); border-radius: var(--r-s);
  border: 1px solid var(--bord); background: var(--surf-2); color: var(--txt);
  font: inherit; cursor: pointer; min-width: 0; width: 100%;
  transition: border-color .15s, transform .15s var(--ressort);
}
.fo-carte:hover { border-color: var(--acc-bord); transform: translateY(-1px); }
.fo-carte:focus-visible { outline: 2px solid var(--acc-vif); outline-offset: 2px; }
.fo-carte[hidden] { display: none; }
.fo-carte-haut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fo-carte-haut .espace { flex: 1; }
.fo-etoile { color: var(--alerte); display: inline-flex; }
.fo-etoile .ico { width: 15px; height: 15px; fill: currentColor; }
.fo-carte-titre { font-size: 14.5px; line-height: 1.35; }
.fo-carte-extrait { color: var(--txt-2); font-size: 12.5px; line-height: 1.5; }
.fo-carte-etiqs { display: flex; gap: 5px; flex-wrap: wrap; }
.fo-carte-etiqs > i {
  font-style: normal; font-size: 11px; color: var(--txt-3);
  padding: 1px 7px; border-radius: var(--r-p); background: var(--surf-3);
}
.fo-carte-lue { background: var(--surf-1); }
.fo-carte-lue .fo-carte-titre { color: var(--txt-2); }

.fo-pile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fo-motif {
  margin: 0; padding: var(--e2) var(--e3); border-radius: var(--r-xs);
  background: rgba(239, 68, 68, .12); color: var(--txt); font-size: 12.5px; line-height: 1.5;
}

/* --- la bibliothèque ----------------------------------------------------------- */

.fo-biblio { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.fo-outils { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.fo-recherche {
  flex: 1 1 240px; display: flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e3); min-height: 42px; border-radius: var(--r-p);
  background: var(--surf-1); border: 1px solid var(--bord-fort); color: var(--txt-3);
}
.fo-recherche:focus-within { border-color: var(--acc-vif); }
.fo-recherche > input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--txt);
  font: inherit; outline: none; padding: 0; min-height: 40px;
}
.fo-etiqs { display: flex; gap: 6px; flex-wrap: wrap; }
.fo-puce {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; min-height: 34px; border-radius: var(--r-p);
  border: 1px solid var(--bord-fort); background: none; color: var(--txt-2);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fo-puce .ico { width: 14px; height: 14px; }
.fo-puce:hover { color: var(--txt); border-color: var(--acc-bord); }
.fo-puce.actif { background: var(--acc); border-color: var(--acc); color: var(--sur-acc); }

.fo-rien {
  padding: var(--e6) var(--e4); text-align: center; border-radius: var(--r);
  border: 1px dashed var(--bord-fort); color: var(--txt-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--e2);
}
.fo-rien[hidden] { display: none; }
.fo-rien > b { color: var(--txt); font-size: 15px; }
.fo-rien > p { margin: 0; font-size: 13px; line-height: 1.6; max-width: 46ch; }
.fo-rien > .btn { margin-top: var(--e2); }

/* --- l'équipe -------------------------------------------------------------------- */

.fo-equipe { display: flex; flex-direction: column; gap: var(--e3); }
.fo-equipe > p { margin: 0; }
.fo-rangs { display: flex; flex-direction: column; }
.fo-rang {
  display: grid; align-items: center; gap: var(--e3);
  grid-template-columns: 26px minmax(90px, 1.1fr) minmax(60px, 2fr) auto auto;
  padding: 10px var(--e2); border-top: 1px solid var(--bord); font-size: 13.5px;
}
.fo-rang:first-child { border-top: 0; }
.fo-moi { background: var(--acc-sourd); border-radius: var(--r-xs); border-top-color: transparent; }
.fo-place { color: var(--txt-3); font-variant-numeric: tabular-nums; text-align: center; }
.fo-rang-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-rang-nom > i { font-style: normal; color: var(--acc-vif); font-size: 11.5px; }
.fo-rang-n { color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* --- à valider -------------------------------------------------------------------- */

.fo-attente { display: flex; flex-direction: column; gap: var(--e3); }
.fo-attente > p { margin: 0; }
.fo-ligne { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fo-ligne-txt {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
}
.fo-ligne-gestes { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- lire une fiche ---------------------------------------------------------------- */

.fo-fiche { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.fo-fiche-tete { display: flex; gap: 6px; flex-wrap: wrap; }
.fo-prose {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.65; font-size: 14.5px; color: var(--txt); max-width: 70ch;
}
.fo-intro { color: var(--txt-2); }
.fo-bloc {
  padding: var(--e3) var(--e4); border-radius: var(--r-s);
  background: var(--surf-2); border-left: 3px solid var(--bord-fort);
}
.fo-bloc > h3 {
  margin: 0 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-3);
}
.fo-bloc-dire { border-left-color: var(--acc-vif); }
.fo-bloc-dire > h3 { color: var(--acc-vif); }
.fo-bloc-oublier { border-left-color: var(--alerte); }
.fo-bloc-oublier > h3 { color: var(--alerte); }
.fo-bloc-erreur { border-left-color: var(--danger); }
.fo-bloc-erreur > h3 { color: var(--danger); }

.fo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.fo-points > li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3); border-radius: var(--r-xs); background: var(--surf-2);
  line-height: 1.55; font-size: 14.5px;
}
.fo-points > li > .ico { flex: none; width: 18px; height: 18px; color: var(--bon); margin-top: 2px; }
.fo-points > li > span { min-width: 0; overflow-wrap: anywhere; }

.fo-branches { display: flex; flex-direction: column; gap: var(--e3); }
.fo-branche { border-radius: var(--r-s); border: 1px solid var(--bord); overflow: hidden; }
.fo-si, .fo-alors { display: flex; gap: var(--e3); padding: var(--e3) var(--e4); align-items: baseline; }
.fo-si { background: var(--surf-3); font-weight: 600; }
.fo-alors { background: var(--surf-2); }
.fo-si > i, .fo-alors > i {
  flex: none; width: 44px; font-style: normal; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3);
}
.fo-alors > i { color: var(--acc-vif); }
.fo-si > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }

.fo-images { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.fo-images > img { width: 100%; height: auto; border-radius: var(--r-s); border: 1px solid var(--bord); }
.fo-signature { margin: 0; color: var(--txt-3); font-size: 12px; line-height: 1.5; }

.fo-pied { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; width: 100%; }
.fo-pied > .espace { flex: 1; }
.fo-fav-on { color: var(--alerte); }
.fo-fav-on .ico { fill: currentColor; }

/* --- écrire une fiche ---------------------------------------------------------------- */

.fo-saisie { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.fo-saisie textarea { resize: vertical; min-height: 44px; line-height: 1.5; }
#fo-champs { display: flex; flex-direction: column; gap: var(--e4); }
.fo-genres { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.fo-choix-genre {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--e3); border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--bord-fort); background: none; color: var(--txt); font: inherit;
}
.fo-choix-genre > span { color: var(--txt-3); font-size: 12px; line-height: 1.45; }
.fo-choix-genre.actif { border-color: var(--acc-vif); background: var(--acc-sourd); }
.fo-dictee { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fo-en-cours { border-color: var(--danger); color: var(--danger); }
.fo-branche-saisie {
  display: grid; gap: var(--e2); grid-template-columns: 1fr auto; align-items: start;
  padding: var(--e3); margin-bottom: var(--e2);
  border-radius: var(--r-s); border: 1px solid var(--bord);
}
.fo-branche-saisie > input { grid-column: 1; }
.fo-branche-saisie > textarea { grid-column: 1 / -1; }
.fo-branche-saisie > button { grid-column: 2; grid-row: 1; }
.fo-nouvelle-etiq { display: flex; gap: var(--e2); margin-top: var(--e2); }
.fo-nouvelle-etiq > input { flex: 1; min-width: 0; }
.fo-vignettes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.fo-vignettes:empty { display: none; }
.fo-vignette { position: relative; display: inline-flex; }
.fo-vignette > img {
  width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-xs);
  border: 1px solid var(--bord-fort);
}
.fo-vignette > button {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bord-fort); background: var(--surf-3); color: var(--txt);
}
.fo-vignette > button .ico { width: 13px; height: 13px; }
.fo-joindre { align-self: flex-start; cursor: pointer; }
.fo-joindre[hidden] { display: none; }
.fo-coche {
  display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer;
  font-size: 13.5px; line-height: 1.5; color: var(--txt-2);
}
.fo-coche > input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acc); }

/* --- la pastille de l'onglet --------------------------------------------------------

   Un point, sans nombre : il dit « il y a quelque chose pour toi », et le
   détail est sur l'écran. Posé hors du flux (position absolue) pour ne rien
   changer à la largeur du bouton — ajusterNav() mesure la capsule, et un
   bouton qui s'élargit la ferait osciller. */
#nav button[data-fo-n], #nav-bas button[data-fo-n] { position: relative; }
#nav button[data-fo-n]::after, #nav-bas button[data-fo-n]::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--alerte); box-shadow: 0 0 0 2px var(--chrome);
  pointer-events: none;
}

/* --- téléphone ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .fo .entete-page .actions { width: 100%; }
  .fo .entete-page .actions > .btn { flex: 1; justify-content: center; }
  .fo-volets { align-self: stretch; }
  .fo-etape > summary { align-items: flex-start; padding: var(--e3); }
  .fo-etape > .fo-cartes { padding: 0 var(--e3) var(--e3); }
  .fo-rang { grid-template-columns: 22px 1fr auto; row-gap: 6px; }
  .fo-rang > .fo-jauge { grid-column: 2 / -1; grid-row: 2; }
  .fo-rang > .fo-marque { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  .fo-ligne-gestes { width: 100%; }
  .fo-ligne-gestes > .btn { flex: 1; justify-content: center; }
  .fo-pied > .btn { flex: 1 1 auto; justify-content: center; }
  .fo-pied > .espace { display: none; }
  .fo-si, .fo-alors { flex-direction: column; gap: 4px; padding: var(--e3); }
}

@media (prefers-reduced-motion: reduce) {
  .fo-carte, .fo-jauge > i { transition: none; }
  .fo-carte:hover { transform: none; }
}

/* --- à savoir absolument ------------------------------------------------------------

   Le bandeau en tête du parcours : les fiches étiquetées « Essentiel ». */
.fo-essentiel {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); border-radius: var(--r-s);
  border: 1px solid var(--acc-bord); border-left: 4px solid var(--acc-vif);
  background: var(--acc-sourd);
}
.fo-essentiel-tete { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.fo-essentiel-tete > b { font-size: 15px; }
.fo-essentiel-tete > span { color: var(--txt-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* --- questions-réponses -------------------------------------------------------------- */

.fo-faq { display: flex; flex-direction: column; gap: var(--e2); }
.fo-qr { border-radius: var(--r-s); border: 1px solid var(--bord); background: var(--surf-2); overflow: hidden; }
.fo-qr > summary {
  display: flex; align-items: baseline; gap: var(--e2); cursor: pointer; list-style: none;
  padding: var(--e3) var(--e4); font-weight: 600; line-height: 1.45;
}
.fo-qr > summary::-webkit-details-marker { display: none; }
.fo-qr > summary::before {
  content: "+"; flex: none; width: 1em; color: var(--acc-vif); font-weight: 700;
}
.fo-qr[open] > summary::before { content: "−"; }
.fo-qr > summary > span { min-width: 0; overflow-wrap: anywhere; }
.fo-qr > p { margin: 0; padding: 0 var(--e4) var(--e3) calc(var(--e4) + 1em + var(--e2)); }

/* --- le savais-tu ? -------------------------------------------------------------------

   Rangée avec les actions de l'en-tête de la page (.fo-bulle-amarree), voir
   foBulleAmarrer(). Sans en-tête, et sur le téléphone, elle flotte dans le
   coin en bas à gauche — plus décalée de --lateral, la largeur d'un volet
   qui n'existe plus. Le coin droit est à « Revenir à la fiche » et aux
   messages. Sous le voile des fenêtres (70) : jamais devant ce qu'on
   remplit. */
.fo-bulle {
  position: fixed; z-index: 58;
  left: var(--e5); bottom: var(--e5);
  max-width: min(380px, calc(100vw - 2 * var(--e5)));
}
.fo-bulle .fo-bulle-carte { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(380px, calc(100vw - 2 * var(--e5))); }

/* DANS L'EN-TÊTE. Un bouton rond de la hauteur des autres ; la question et
   la réponse s'ouvrent en bulle SOUS lui, alignées sur sa droite, sans rien
   pousser dans la rangée. */
.fo-bulle.fo-bulle-amarree {
  position: relative; z-index: 40; left: auto; bottom: auto;
  flex: none; width: 44px; height: 44px; max-width: none;
}
.fo-bulle-amarree .fo-bulle-pastille {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  box-shadow: none; animation: none;
}
.fo-bulle-amarree .fo-bulle-texte {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: max-content; max-width: 320px; white-space: normal;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--acc-bord); background: var(--surf-2); color: var(--txt);
  box-shadow: var(--ombre-flottante); line-height: 1.4;
  animation: apparait calc(.2s * var(--anim-vit, 1)) var(--ressort);
}
.fo-bulle-amarree.fo-bulle-repliee .fo-bulle-texte,
.fo-bulle-amarree.fo-bulle-ouverte .fo-bulle-texte { display: none; }
.fo-bulle-amarree .fo-bulle-carte {
  top: calc(100% + 8px); bottom: auto; left: auto; right: 0;
  width: min(380px, calc(100vw - 32px)); text-align: left;
}
.fo-bulle[hidden] { display: none; }
.fo-bulle-pastille {
  display: inline-flex; align-items: center; gap: var(--e2); max-width: 100%;
  padding: 9px 14px 9px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--acc-bord); background: var(--surf-2); color: var(--txt);
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
  box-shadow: var(--ombre-flottante);
  animation: apparait calc(.2s * var(--anim-vit, 1)) var(--ressort);
}
.fo-bulle-pastille:hover { border-color: var(--acc-vif); }
.fo-bulle-ampoule { flex: none; font-size: 17px; line-height: 1; }
.fo-bulle-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rangée : l'ampoule seule, ronde. */
.fo-bulle-repliee .fo-bulle-pastille { padding: 9px; }
.fo-bulle-repliee .fo-bulle-texte { display: none; }

.fo-bulle-carte {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3) var(--e4) var(--e4); border-radius: var(--r-s);
  border: 1px solid var(--acc-bord); background: var(--surf-2);
  box-shadow: var(--ombre-flottante);
  animation: apparait calc(.16s * var(--anim-vit, 1)) var(--ressort);
}
.fo-bulle-tete { display: flex; align-items: center; gap: var(--e2); }
.fo-bulle-tete > b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-vif); }
.fo-bulle-x {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: none; color: var(--txt-2); cursor: pointer;
}
.fo-bulle-x:hover { background: var(--surf-3); color: var(--txt); }
.fo-bulle-x .ico { width: 14px; height: 14px; }
.fo-bulle-q { margin: 0; font-weight: 650; line-height: 1.45; }
.fo-bulle-r { margin: 0; color: var(--txt-2); line-height: 1.55; white-space: pre-line; max-height: 40vh; overflow-y: auto; }
.fo-bulle-gestes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-top: var(--e1); }

@media (max-width: 700px) {
  .fo-bulle {
    left: 12px; bottom: calc(80px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }
  .fo-bulle .fo-bulle-carte { width: calc(100vw - 24px); }
  .fo-essentiel { padding: var(--e3); }
  .fo-qr > p { padding-left: var(--e4); }
}
body.au-seuil .fo-bulle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fo-bulle-pastille, .fo-bulle-carte { animation: none; }
}