/* =============================================================================
 * feedback-beta.css  —  Retour bêta (bouton flottant + modale de commentaire)
 * -----------------------------------------------------------------------------
 * Fonctionnalité PROVISOIRE (mode bêta). 100 % additive, scope .opfb-* / #opfb-*.
 * Aucune couleur métier carte (rose annonces / violet boîtage préservés).
 * Rollback = retirer ce <link> + les 2 <script> (le module s'auto-borne au flag).
 * Zéro emoji / pictogramme unicode (EMOJIGATE). Icônes = SVG inline.
 * =========================================================================== */

/* ── Bouton flottant permanent (bas-droite, au-dessus du bouton de boîtage) ─── */
#opfb-fab {
  position: fixed;
  /* Nicolas 13-07 : descendu + à GAUCHE pour ne pas gêner la légende « point chaud »
     (bandeau vertical en bas-DROITE). Coin bas-gauche = dégagé des contrôles de droite. */
  left: 14px;
  /* Nicolas 14-07 : remonté d'~3 cm (bottom 18px -> 131px) — le FAB bas-gauche
     recouvrait la rangée d'actions du bas (Flyer / Y aller) et les tuiles. */
  /* Nicolas 16-07 : remonté d'~2,6 cm de plus (131px -> 230px) — la miniature
     de capture d'écran iPhone (coin bas-gauche, ~200px de haut) masquait le FAB
     quelques secondes après une capture. À 230px il passe au-dessus de la vignette
     tout en restant sous la rangée d'actions (Flyer / Y aller) déjà dégagée. */
  bottom: calc(230px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000; /* AU-DESSUS DE TOUT (Nicolas 13-07) : menus/drawers/overlays/modales — accessible depuis n'importe quel écran pour capturer + remonter */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #0f172a; /* charbon slate — neutre, lisible */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .35), 0 1px 3px rgba(0, 0, 0, .25);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#opfb-fab:hover { background: #1e293b; }
#opfb-fab:active { transform: scale(.94); }
#opfb-fab:focus-visible { outline: 2px solid #b8860b; outline-offset: 2px; }
#opfb-fab svg { width: 24px; height: 24px; display: block; pointer-events: none; }
#opfb-fab[disabled] { cursor: default; }
#opfb-fab.opfb-fab--busy {
  animation: opfb-pulse 1s ease-in-out infinite;
  cursor: default;
}
/* Anti-occlusion (porte occlusion 13-07) : quand une surface de DÉCISION est ouverte
   (flytype / feuille détailler / toast immeuble / modale de boîtage), le FAB s'efface
   pour ne jamais rogner un bouton d'action (« Annuler »/« Arrêter »). Il réapparaît
   à la fermeture (classe posée/retirée par feedback-beta.ui.js). */
#opfb-fab.opfb-fab--suppressed { display: none !important; }
@keyframes opfb-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 6px 18px rgba(15, 23, 42, .35); }
  50%      { transform: scale(.9);  box-shadow: 0 3px 10px rgba(15, 23, 42, .25); }
}

/* ── Overlay + carte modale ─────────────────────────────────────────────────── */
#opfb-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483001; /* au-dessus du FAB (qui est deja au-dessus de tout) */
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(20px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: opfb-fade .14s ease;
}
@keyframes opfb-fade { from { opacity: 0; } to { opacity: 1; } }

.opfb-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  box-sizing: border-box;
}

.opfb-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.opfb-close:hover { color: #0f172a; background: #f1f5f9; }

.opfb-title {
  margin: 2px 40px 4px 2px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.3px;
}
.opfb-subtitle {
  margin: 0 2px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

.opfb-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #0f172a;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.opfb-textarea:focus { border-color: #0f172a; }

.opfb-inline-err {
  display: none;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
}
.opfb-inline-err.opfb-show { display: block; }

/* ── Galerie des captures JOINTES (natives, prises AVANT — Nicolas 13-07) ────── */
.opfb-shotsgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.opfb-shotsgrid:empty { margin: 0; }
.opfb-thumb-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  flex: 0 0 auto;
}
.opfb-thumb-sm {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.opfb-thumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.opfb-thumb-x:hover { background: rgba(15, 23, 42, .9); }

.opfb-shotsnote {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}
.opfb-shotsnote:empty { display: none; margin: 0; }

.opfb-addshots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.opfb-addshots:hover { background: #f1f5f9; border-color: #94a3b8; }
.opfb-addshots:disabled { opacity: .55; cursor: default; }
.opfb-addshots svg { flex: 0 0 auto; }

.opfb-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.opfb-btn {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.opfb-btn--secondary {
  background: #f1f5f9;
  color: #475569;
}
.opfb-btn--secondary:hover { background: #e2e8f0; }
.opfb-btn--primary {
  background: #0f172a;
  color: #fff;
}
.opfb-btn--primary:hover { background: #1e293b; }
.opfb-btn:disabled { opacity: .5; cursor: default; }

/* ── Mini-toast interne (autonome, sans dépendance à un autre module) ───────── */
#opfb-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147483002;
  max-width: 88vw;
  background: rgba(15, 23, 42, .96);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: opfb-toastin .2s ease;
  pointer-events: none;
}
#opfb-toast.opfb-toast--out { animation: opfb-toastout .3s ease forwards; }
@keyframes opfb-toastin {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes opfb-toastout {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 8px); }
}

/* ============================================================================
 * [PCSHELL 2026-07-24] Repositionnement DESKTOP UNIQUEMENT (html.op-desktop).
 * Mobile INCHANGÉ (bas-gauche, z-index 2147483000, tout ce qui précède).
 * -----------------------------------------------------------------------------
 * Constat (état des lieux 23-07) : à sa position mobile (left:14, bottom:230)
 * ET son z-index « au-dessus de tout », le FAB recouvrait de la donnée sur 3
 * écrans desktop (tuile « à relancer » des Statistiques totalement cachée,
 * tuile « Passer en agence » de Mon compte partiellement cachée, libellé
 * « Rues chaudes » des filtres mangé) — sa position tombait dans la colonne du
 * rail (0-264px) et son z-index le plaçait AU-DESSUS des panneaux plein écran.
 * Corrigé : coin bas-DROITE (loin du rail et de toute colonne de liste/fiche
 * bureau), décalé de la légende « point chaud » (bandeau vertical
 * bottom:16/right:8, jusqu'à ~196px de haut, #hotspot-legend) et du bouton
 * « Valider le boîtage » (bottom:12/right:12, jusqu'à ~50px de haut,
 * #boitage-validate) : bottom:220px passe au-dessus des deux dans TOUS les
 * états, quelle que soit la commune/le mode. z-index abaissé SOUS le rail
 * (9998) et sous tous les panneaux desktop (>=10000, cf. desktop-shell.css) :
 * le FAB ne recouvre plus jamais une donnée — il reste joignable dès que rien
 * n'est ouvert par-dessus la carte (écran 00 et toute zone carte visible du
 * triptyque), et s'efface proprement DERRIÈRE un panneau plein écran ouvert
 * (au lieu de flotter par-dessus son contenu). #opfb-modal / #opfb-toast
 * INCHANGÉS (dialogues actifs, restent au-dessus de tout, desktop et mobile).
 * ========================================================================= */
html.op-desktop #opfb-fab {
  left: auto;
  right: 20px;
  bottom: 220px;
  z-index: 9000;
}

/* ============================================================================
 * [FAB-TAB 2026-07-26] Le FAB ne recouvre JAMAIS le contenu — SUR TOUS LES ÉCRANS.
 * Patron statusdock (25-07) : s'ÉCARTER, pas masquer — le canal de retour reste
 * ATTEIGNABLE (Nicolas envoie ses retours DEPUIS n'importe quel écran). La classe
 * .opfb-fab--tab est posée par feedback-beta.ui.js sur MOBILE en permanence.
 * -----------------------------------------------------------------------------
 * REMONTÉE #162b : le fix FICHE-AVOID (26-07) était conditionné à #feature-panel,
 * donc INERTE hors fiche — sur « Mon rythme de travail » et « Ma semaine terrain »
 * (et planning/veille) le FAB restait à sa position d'origine (left:14/bottom:230)
 * POSÉ SUR LE TEXTE (captures Nicolas). On généralise la languette validée : elle
 * devient le placement mobile PAR DÉFAUT, sur tous les écrans.
 *
 * MOBILE : LANGUETTE fine ancrée au bord DROIT, centrée verticalement. Le contenu
 * de l'app vit à gauche / bord-à-bord ; la languette ne couvre que la gouttière
 * droite (jamais un contrôle ni du texte — prouvé par fab_occlusion_probe). Cible
 * haute (60px) pour rester atteignable au pouce ; z-index max préservé (au-dessus
 * de tout, joignable partout).
 * DESKTOP : aucune règle ici — le FAB desktop garde son placement mesuré (JS) : sur
 * la carte à gauche du dock quand la fiche est ouverte, sinon tuck derrière les
 * panneaux (z:9000). Il ne recouvre déjà jamais de contenu. ==================== */
html:not(.op-desktop) #opfb-fab.opfb-fab--tab {
  left: auto;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 22px;
  min-width: 22px;
  height: 60px;
  min-height: 60px;
  border-radius: 13px 0 0 13px;
  box-shadow: -4px 0 14px rgba(15, 23, 42, .28), 0 1px 3px rgba(0, 0, 0, .25);
}
html:not(.op-desktop) #opfb-fab.opfb-fab--tab svg { width: 16px; height: 16px; }
html:not(.op-desktop) #opfb-fab.opfb-fab--tab:active { transform: translateY(-50%) scale(.96); }