/* Bulle « Un souci ? Dites-le » (17/10, maquette docs/maquettes/bulle-remarques/, validée par JB) — « bl- ».
   Grand écran : bouton dégradé violet-bleu en bas à droite, panneau au-dessus. Téléphone : bulle
   ronde compacte au bord droit, au-dessus des barres d'action du bas (jamais sur un bouton). */
.bl{--bl-violet:#7c3aed;--bl-bleu:#1d4ed8;--bl-gris:#64748b;--bl-ligne:#e2e8f0;--bl-vert:#15803d;--bl-vertf:#dcfce7;font-family:Inter,system-ui,sans-serif}
.bl-bouton{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:var(--ap-e2);background:linear-gradient(135deg,var(--bl-violet),var(--bl-bleu));color:#fff;border:0;border-radius:999px;padding:var(--ap-e3) var(--ap-e4);font:var(--ap-g-chiffre) var(--ap-t-xl) Inter,system-ui,sans-serif;box-shadow:var(--ap-ombre-3);cursor:pointer;transition:transform .12s}
.bl-bouton:hover{transform:none}
/* Écran moyen (recette finale 20/10) : à 1440 px, le plein bouton (338 px de large) couvrait le
   coin bas droit de la page (ligne « Freinage » du contrôle de sortie, fiche atelier) tant qu'on ne
   défilait pas — réserver un « espace de fin » ne change rien à ce qui est déjà affiché sans
   défiler (seul le bas du document en profite). Comme au téléphone : la bulle se replie en pastille
   ronde, bien plus petite, dès que l'écran est trop étroit pour qu'elle flotte sans gêner (2560 px
   garde le plein bouton, assez de marge à droite). */
@media (min-width:601px) and (max-width:1700px){
  .bl-bouton{width:48px;height:var(--ap-h-ctrl);padding:0;justify-content:center;font-size:var(--ap-t-xl);gap:0;opacity:.92}
  .bl-txt,.bl-pastille{display:none}
}
.bl-pastille{background:hsl(var(--ap-carte));color:var(--bl-violet);border-radius:999px;font-size:var(--ap-t-s);padding:2px var(--ap-e2)}
.bl-accueil{position:fixed;right:24px;bottom:92px;z-index:70;width:320px;background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));border-radius:var(--ap-r-l);padding:var(--ap-e4);box-shadow:var(--ap-ombre-3);font-size:var(--ap-t-m);line-height:1.45}
.bl-accueil b{display:block;font-size:var(--ap-t-xl);margin-bottom:6px}
.bl-accueil .bl-btn{margin-top:10px}
.bl-fond{position:fixed;inset:0;z-index:68;background:transparent}
.bl-panneau{position:fixed;right:24px;bottom:92px;z-index:71;width:380px;max-height:calc(100vh - 120px);overflow:auto;background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));border-radius:var(--ap-r-l);box-shadow:var(--ap-ombre-3);padding:var(--ap-e4)}
.bl-panneau h3{margin:0 0 4px;font-size:var(--ap-t-xl)}
.bl-panneau p{margin:0 0 12px;color:var(--bl-gris);font-size:var(--ap-t-m)}
.bl-types{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ap-e2);margin-bottom:10px}
.bl-types button{border:2px solid var(--bl-ligne);background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));border-radius:var(--ap-r-s);padding:var(--ap-e2) 6px;font:var(--ap-g-titre) var(--ap-t-m) Inter,system-ui,sans-serif;cursor:pointer}
.bl-types button span{display:block;font-size:var(--ap-t-titre)}
.bl-types button.on{border-color:var(--bl-violet);background:#f5f3ff}
.bl-texte{width:100%;height:90px;border:2px solid var(--bl-ligne);border-radius:var(--ap-r-l);padding:var(--ap-e2);font:var(--ap-t-l) Inter,system-ui,sans-serif;resize:none;box-sizing:border-box;background:hsl(var(--ap-carte));color:hsl(var(--ap-encre))}
.bl-texte:focus{outline:none;border-color:var(--bl-violet)}
.bl-auto{font-size:var(--ap-t-s);color:var(--bl-gris);margin:8px 0 12px}
.bl-auto label{display:flex;gap:6px;align-items:center;color:hsl(var(--ap-encre))}
.bl-btn{border:1px solid var(--bl-ligne);background:hsl(var(--ap-carte));color:hsl(var(--ap-encre));border-radius:999px;padding:var(--ap-e2) var(--ap-e3);font:var(--ap-g-titre) var(--ap-t-m) Inter,system-ui,sans-serif;cursor:pointer}
.bl-btn.pri{background:var(--bl-violet);color:#fff;border-color:var(--bl-violet)}
.bl-btn[disabled]{opacity:.6}
.bl-pied{display:flex;justify-content:space-between;align-items:center;gap:var(--ap-e2);margin-top:12px}
.bl-pied a{font-size:var(--ap-t-m);color:var(--bl-bleu)}
.bl-ko{color:hsl(var(--ap-rouge))!important;font-weight:var(--ap-g-titre)}
.bl-merci{text-align:center;padding:var(--ap-e2) 0 0;font-size:var(--ap-t-m)}
.bl-merci .bl-ok{font-size:40px}
.bl-merci b{display:block;font-size:var(--ap-t-xl);margin:6px 0}
.bl-mes{margin-top:12px;border-top:1px solid var(--bl-ligne);padding-top:var(--ap-e2);font-size:var(--ap-t-m);text-align:left}
.bl-mes div{display:flex;justify-content:space-between;gap:var(--ap-e2);padding:4px 0}
.bl-st{border-radius:999px;padding:1px var(--ap-e2);font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre);background:hsl(var(--ap-trait));white-space:nowrap}
.bl-st.c{background:hsl(var(--ap-action-doux));color:var(--bl-bleu)}.bl-st.v{background:var(--bl-vertf);color:var(--bl-vert)}
.bl-vide{color:var(--bl-gris);font-size:var(--ap-t-m);margin:12px 0 0}
@media print{.bl{display:none}}
/* Téléphone : bulle ronde compacte, au-dessus des barres du bas ; panneau en feuille. */
@media (max-width:600px){
  .bl-bouton{right:10px;bottom:calc(150px + env(safe-area-inset-bottom));width:46px;height:46px;padding:0;justify-content:center;font-size:var(--ap-t-titre);box-shadow:var(--ap-ombre-1);opacity:.92}
  .bl-txt,.bl-pastille{display:none}
  .bl-accueil{left:12px;right:12px;width:auto;bottom:calc(206px + env(safe-area-inset-bottom))}
  .bl-fond{background:rgba(15,23,42,.35)}
  .bl-panneau{left:0;right:0;bottom:0;width:auto;max-height:88vh;border-radius:var(--ap-r-l) var(--ap-r-l) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .bl-types button{padding:9px 4px;font-size:var(--ap-t-s)}
  /* 20/10 (recette finale) : la bulle ne doit jamais recouvrir un bouton en défilant (ex. « Marquer
     urgente » sur la fiche atelier du mécanicien). On réserve en bas de toutes les pages au
     téléphone la hauteur de la bulle (son bas à 150 px + sa hauteur de 46 px + une marge, comme
     « bl-accueil » juste au-dessus à 206 px) ; la fiche voiture s'en passe, la bulle y est déjà
     dans la barre d'action. */
  /* Demandes (21/10) : écran à hauteur fixe, il garde lui-même la place de la bulle (pas de page qui glisse). */
  body:has(.bl-bouton) main.page:not(:has(.pv-tel)):not(:has(.dm)){padding-bottom:calc(206px + env(safe-area-inset-bottom))}
  /* 20/10 : fiche voiture au téléphone (barre d'action du bas, lot B8) — la bulle prend sa place
     DANS la barre, à droite des boutons (la barre lui laisse 62 px) : elle ne recouvre plus aucune
     ligne de la fiche (« Afficher › » de Documents était caché), quelle que soit la position de la
     page ; effacée avec la barre quand le clavier est ouvert. */
  body:has(.pv-tel .pv-basbar) .bl-bouton{bottom:calc(66px + env(safe-area-inset-bottom));right:12px;width:50px;height:50px;opacity:1}
  body:has(.pv-tel .pv-basbar) .bl-accueil{bottom:calc(146px + env(safe-area-inset-bottom))}
  html.pv-clavier body:has(.pv-tel .pv-basbar) .bl-bouton{display:none}
}
/* Écran des demandes (ordinateur) : la bulle passe au-dessus de la zone de réponse, elle couvrait
   « Répondre dans la V1 » (vu le 20/10). */
@media (min-width:761px){
  body:has([data-ecran="demandes"]) .bl-bouton{bottom:150px}
  body:has([data-ecran="demandes"]) .bl-accueil,body:has([data-ecran="demandes"]) .bl-panneau{bottom:212px}
}