/* CoordSecours — écran « Partager aux renforts » (QR plein écran), terrain + PC.
   Conforme à la maquette validée le 2026-08-07 : fond blanc pur (contraste maximal pour un scan
   en plein soleil), le QR occupe la largeur, le reste tient dessous.
   CSP stricte : aucune règle inline, tout par classes (seule la largeur de la jauge est posée par
   CSSOM, valeur continue). */

/* color OBLIGATOIRE : sans elle, l'écran hérite de la couleur de texte du terrain (claire, prévue
   pour le fond bleu foncé) et le contenu devient INVISIBLE sur ce fond blanc — c'est ce qui
   effaçait le code à dicter. Tout ce qui s'affiche ici pose donc sa couleur explicitement. */
.pq{position:fixed;inset:0;z-index:9500;background:#fff;color:#15233f;display:flex;flex-direction:column;
  overflow:auto;-webkit-overflow-scrolling:touch}
body.pq-lock{overflow:hidden}

/* En-tête : on rappelle DE QUELLE fiche il s'agit — on partage une victime, pas « un document ». */
.pq-top{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid #e8ecf3;flex:none}
.pq-badge{flex:none;font-weight:800;font-size:.66rem;letter-spacing:.06em;background:#0b3b50;color:#fff;
  border-radius:6px;padding:.28rem .55rem}
.pq-titre{flex:1;min-width:0;font-size:.98rem;color:#15233f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-x{flex:none;width:40px;height:40px;border:0;border-radius:10px;background:#eef1f8;color:#15233f;
  font-size:1.05rem;font-family:inherit;cursor:pointer}

.pq-corps{flex:1;padding:14px 16px 26px;text-align:center;max-width:520px;margin:0 auto;width:100%}
.pq-sub{margin:0 0 12px;color:#5b667f;font-size:.82rem}

/* Emplacement du QR : hauteur réservée dès la génération → aucun saut de mise en page à l'arrivée. */
.pq-zone{min-height:300px;display:grid;place-items:center;line-height:0}
.pq-zone-qr svg{display:block;width:min(306px,78vw);height:auto}
.pq-zone-off{border:2px dashed #c9d3e0;border-radius:14px;background:#f7f9fc;line-height:1.4}
.pq-zone-t{color:#5b667f;font-weight:700;font-size:.95rem}
.pq-spin{width:58px;height:58px;border-radius:50%;border:6px solid #e3e9f2;border-top-color:#5BB5D0;
  animation:pq-tourne 1s linear infinite}
@keyframes pq-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pq-spin{animation:none}}

/* Les deux chiffres qui décident du succès : temps restant et ouvertures restantes. */
.pq-meta{display:flex;justify-content:space-between;align-items:flex-end;margin:14px 2px 7px;text-align:left}
.pq-meta-c{display:flex;flex-direction:column}
.pq-meta-r{text-align:right}
.pq-big{font-size:2rem;font-weight:800;line-height:1;color:#15233f;font-variant-numeric:tabular-nums}
.pq-sm{font-size:.7rem;color:#5b667f;font-weight:600}
.pq-bar{height:7px;border-radius:99px;background:#e3e9f2;overflow:hidden;margin:0 2px}
.pq-bar i{display:block;height:100%;background:#5BB5D0;border-radius:99px;transition:width .9s linear}
.pq-bar i.pq-bas{background:#E08A1E}

/* Adresse dictable : lisible à voix haute par radio quand le scan ne passe pas. */
.pq-dict{background:#f3f6fb;border-radius:10px;padding:9px 11px;margin:13px 2px 0;text-align:left;
  display:flex;flex-direction:column;gap:1px}
.pq-dict-k{font-size:.62rem;font-weight:800;letter-spacing:.06em;color:#5b667f;text-transform:uppercase}
.pq-dict-u{font-size:.74rem;color:#5b667f}
.pq-dict-c{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.02rem;font-weight:700;
  letter-spacing:.05em;color:#15233f}

.pq-btn{width:100%;min-height:52px;border:0;border-radius:12px;background:#5BB5D0;color:#0b3b50;
  font-family:inherit;font-weight:800;font-size:1rem;margin-top:14px;cursor:pointer}
.pq-btn:active{transform:translateY(1px)}
.pq-btn-ok{background:#2e9e5b;color:#fff}

.pq-legal{font-size:.68rem;color:#8a97a6;margin:9px 2px 0;line-height:1.35}
.pq-err{color:#a11212;font-weight:700;font-size:.88rem;margin:12px 2px 0}

/* Confirmation temps réel : le secouriste sait qu'il peut ranger son téléphone. */
.pq-ok{background:#e6f4ea;border:1px solid #9ed3b3;color:#116329;border-radius:10px;padding:9px 11px;
  font-size:.85rem;font-weight:700;margin:0 2px 10px}
.pq-warn{background:#fdf3d7;border:1px solid #e5c777;color:#8a5a00;border-radius:10px;padding:9px 11px;
  font-size:.85rem;font-weight:700;margin:0 2px 10px}
.pq-replis{background:#f3f6fb;border-radius:10px;padding:10px 12px;margin:12px 2px 0;text-align:left;
  display:flex;flex-direction:column;gap:3px;font-size:.83rem;color:#15233f}
.pq-replis-k{font-size:.62rem;font-weight:800;letter-spacing:.06em;color:#5b667f;text-transform:uppercase}

/* Sur grand écran (PC), l'écran reste une carte centrée plutôt qu'un plein écran étiré. */
@media (min-width:820px){
  .pq{background:rgba(15,24,48,.72);padding:26px;align-items:center;justify-content:center}
  .pq-top,.pq-corps{background:#fff}
  .pq-top{width:min(520px,100%);border-radius:14px 14px 0 0;flex:none}
  .pq-corps{border-radius:0 0 14px 14px;flex:none}
}