/* =============================================================================
 * fullscreen.css — convention plein écran UNIFORME (cahier plein_ecran_plan, P0)
 * FICHIER NEUF, additif. Aucun sélecteur existant n'est modifié.
 * -----------------------------------------------------------------------------
 * Une SEULE convention partagée : la classe `.op-fs` reproduit EXACTEMENT le
 * gabarit du plein écran canonique `#opsr-root` (secteur-reel.ui.js z11200,
 * position:fixed inset:0 flex column, header/body/footer safe-area). Tout écran
 * dense (wizard, vue immeuble, stats, abonnement, onboarding) peut adopter
 * `.op-fs` et obtenir le MÊME rendu, sans réinventer son z-index/ses marges.
 *
 * Pas l'API native requestFullscreen (incohérente iOS, perd les contrôles) :
 * overlay DOM, comme l'existant.
 *
 * Couleurs : tokens canoniques de :root (map.css) — --bg, --ink, --line, --tap.
 * Aucune couleur métier carte (violet/rose/orange/bordeaux) introduite.
 * =========================================================================== */

/* conteneur plein écran (= clone du gabarit #opsr-root) */
.op-fs {
  position: fixed;
  inset: 0;
  z-index: 11200;                 /* MÊME plan que #opsr-root — jamais 2 .op-fs empilés */
  display: flex;
  flex-direction: column;
  background: var(--bg, #f6f7fb);
  color: var(--ink, #0f172a);
  height: 100dvh;                 /* dvh = clavier/barre mobile pris en compte */
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* repli navigateurs sans dvh */
@supports not (height: 100dvh) {
  .op-fs { height: 100vh; }
}
.op-fs[hidden] { display: none; }

/* header : hauteur fixe, contient le bouton fermer 44px */
.op-fs-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 12px;
  background: #0f172a;            /* encre slate = neutre navigation (code_couleur) */
  color: #fff;
}
.op-fs-head .op-fs-ttl {
  font-size: 16px;
  font-weight: 800;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-fs-close {
  flex: 0 0 auto;
  width: 44px;                    /* --tap, touch target terrain */
  height: 44px;
  min-width: 44px;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-fs-close:active { background: rgba(255, 255, 255, .22); }

/* body : prend tout l'espace, scroll interne, scroll containé (pas de
   propagation à la carte derrière) */
.op-fs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* footer optionnel (CTA collant) avec safe-area iPhone */
.op-fs-foot {
  flex: 0 0 auto;
  padding: 11px 14px calc(env(safe-area-inset-bottom, 0px) + 11px);
  background: #fff;
  border-top: 1px solid var(--line, rgba(15, 23, 42, .1));
}

/* quand un plein écran est ouvert, on verrouille le scroll du fond */
body.op-fs-lock { overflow: hidden !important; }