/* app-portail-client.css — compléments du portail donneur d'ordre (chantier 5).
   Base commune : app-bons.css (charte Altitude). Ici : accueil (KPI + courbe
   qualité), notes de contrôle, statuts des demandes portail, pastilles d'icônes. */

/* ── Accueil : compteurs + courbe qualité ── */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
       box-shadow: var(--shadow); padding: 13px 14px; }
.kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--text2); }
.kpi.hero { grid-column: 1 / -1; background: var(--blue); color: var(--white); border-color: var(--blue); }
.kpi.hero span { color: #b6c4e8; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 8px; }
.spark i { flex: 1; background: rgba(255, 255, 255, .28); border-radius: 3px 3px 0 0; min-height: 3px; }
.spark i.dernier { background: #4ade80; }
.spark-l { display: flex; justify-content: space-between; font-size: 10px; color: #b6c4e8; margin-top: 4px; }

/* ── Note de contrôle qualité (colonne de droite des lignes) ── */
.note { font-size: 16px; font-weight: 800; color: var(--green); flex: 0 0 auto;
        font-variant-numeric: tabular-nums; }

/* ── Statuts des demandes portail ── */
.st-ENVOYEE        { background: #ecfeff; color: var(--cyan); }
.st-DEVIS_TRANSMIS { background: var(--yellow-bg); color: var(--yellow); }
/* ACCEPTEE / REFUSEE / REALISEE : déjà dans app-bons.css */
.st-ANNULEE        { background: var(--gray-bg); color: var(--text2); }

/* ── Pastilles d'icônes colorées (familles) ── */
.ico-bleu   { background: #eff6ff; color: var(--blue); }
.ico-vert   { background: var(--green-bg); color: var(--green); }
.ico-jaune  { background: var(--yellow-bg); color: var(--yellow); }
.ico-violet { background: var(--purple-bg); color: var(--purple); }
.ico-orange { background: var(--orange-bg); color: var(--orange); }

/* Les lignes du portail sont cliquables */
button.ligne { width: 100%; text-align: left; }

/* ── Remède iOS 26 « ancrage-tabs » (CLAUDE.md, gotcha 24/08/2026) : colonne
   dont la hauteur est posée en dur par JS sur innerHeight ; la barre .tabs
   devient un élément de FLUX en bas — en bas par construction, plus de fixed
   qui flotte au-dessus du bord. Porté depuis app-hotel.css. ── */
body.ancrage-tabs { height: 100%; min-height: 0; overflow: hidden; padding-bottom: 0; }
body.ancrage-tabs.vp-inset-exclu .tabs { padding-bottom: 0; }
body.ancrage-tabs #app { height: 100%; display: flex; flex-direction: column; }
/* min-width:0 : sans lui, un enfant large (la rangée de pastilles) élargit
   l'élément flex au lieu de défiler dedans, et TOUTE la page part en scroll
   horizontal — en-tête et barre d'onglets rognés (constat 30/08). */
/* width:100% indispensable : .wrap porte « margin: 0 auto », or un élément
   flex à marges auto ne s'étire PAS — il prend la largeur de son contenu.
   Sans ça, une rangée de pastilles large fait déborder toute la page. */
body.ancrage-tabs .zone-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.ancrage-tabs #app { min-width: 0; max-width: 100%; }
.chips { max-width: 100%; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
body.ancrage-tabs .tabs { position: static; flex: 0 0 auto; transform: none; }
body.ancrage-tabs .avec-tabs { padding-bottom: 24px; }

/* ── Bandeau d'onglets plus compact (recette 30/08 : trop d'air SOUS les
   libellés — hors zone réservée iOS). Le padding généreux d'app-bons.css
   (10px haut / 12px bas) est resserré, la safe-area reste gérée à part. ── */
/* Contenu centré verticalement dans une barre compacte : padding symétrique
   sur les boutons, et la réserve du geste d'accueil iOS réduite au minimum
   utile (la barre système se superpose sans gêner le tap). La règle
   .vp-inset-exclu (double comptage iOS 26) reste prioritaire et la met à 0. */
.tabs button { padding: 7px 4px; }
body.ancrage-tabs .avec-tabs { padding-bottom: 16px; }
.tabs { padding-bottom: max(calc(env(safe-area-inset-bottom) - 28px), 4px); }

/* ── Contacts de l'accueil : téléphone et mail cliquables ── */
.contact-ligne { align-items: flex-start; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contact-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-full);
  background: #eff6ff; color: var(--blue); text-decoration: none;
  font-size: 13px; font-weight: 700;
}
.contact-action:active { background: #dbeafe; }

/* ── Écran de connexion (calqué sur l'app Manager, demande du 30/08) :
   carte centrée verticalement, logo en médaillon, libellés en capitales,
   et deux cercles décoratifs en fond. ── */
.login-wrap {
  min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  position: relative; overflow: hidden;
}
.login-wrap::before, .login-wrap::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.login-wrap::before { top: -100px; right: -100px; width: 300px; height: 300px; background: var(--blue-glow); opacity: .08; }
.login-wrap::after { bottom: -80px; left: -80px; width: 250px; height: 250px; background: var(--cyan); opacity: .08; }
.login-carte {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 36px 28px 28px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .12);
}
.login-logo {
  width: 72px; height: 72px; border-radius: var(--r-md); margin: 0 auto 18px; display: block;
  box-shadow: 0 8px 24px rgba(30, 58, 138, .35);
}
.login-titre { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 4px; }
.login-sous { text-align: center; font-size: 13px; color: var(--text2); margin-bottom: 28px; }
.login-carte .champ label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 7px;
}
.login-carte .btn { margin-top: 4px; }

/* ── Visionneuse de document (PDF) ──
   Barre d'actions maison : l'app installée n'a plus celle de Safari. */
.visionneuse {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column;
}
.vis-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  background: var(--blue); color: var(--white);
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
}
.vis-titre {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vis-btn {
  width: 42px; height: 42px; border-radius: var(--r-full); flex: 0 0 auto;
  background: rgba(255, 255, 255, .14); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.vis-btn:active { background: rgba(255, 255, 255, .26); }
.vis-corps {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.vis-cadre { flex: 1 1 auto; width: 100%; border: none; background: var(--surface); }
.vis-aide {
  flex: 0 0 auto; font-size: 12.5px; color: var(--text3);
  text-align: center; padding: 10px 16px;
}

/* ── Le PDF sur WebKit mobile ──
   iOS ne fournit pas de lecteur pour un PDF en cadre intégré : il dessine
   la page à sa taille naturelle (595 px pour une A4) sans l'ajuster au
   cadre et sans ascenseur — dans une fenêtre de 440 px, un quart de la
   facture, bloc des totaux compris, devenait inatteignable (capture client
   du 30/08). On dessine donc nous-mêmes sur canvas (pdf.js), avec repli
   sur un cadre à la taille naturelle dans un conteneur défilant.
   min-width:0 est obligatoire ici comme sur les sous-onglets : sans lui,
   un cadre de 595 px élargit toute la colonne flex. */
.vis-corps { position: relative; }          /* ancre de la barre de zoom */
.vis-zone {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow: auto; overscroll-behavior: contain;
  background: var(--bg);
}
.vis-boite { position: relative; margin: 0 auto; }
/* Pas d'overflow:hidden sur .vis-boite, volontairement : si WebKit ignorait
   le transform, le cadre déborderait dans .vis-zone et resterait atteignable
   par défilement latéral, au lieu d'être coupé net. La panne se dégrade en
   gêne, jamais en contenu inaccessible.
   pointer-events:none : sans lui, le doigt reste pris par la sous-frame PDF
   et le conteneur ne défile pas. Le document n'a ni lien ni champ à toucher.
   Pas de -webkit-overflow-scrolling:touch ici, contrairement au reste du
   dépôt : sans effet depuis iOS 13, il force une couche de composition
   séparée et figure dans les familles de bugs « iframe blanche sous
   transform ». */
.vis-boite > .vis-cadre-nat {
  position: absolute; top: 0; left: 0;
  border: none; display: block; background: var(--surface);
  transform-origin: 0 0; pointer-events: none;
}
.vis-img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.vis-btn-txt { width: auto; min-width: 44px; padding: 0 10px; font-size: 12.5px; font-weight: 800; }

/* Rendu maison : une pile de pages dessinées sur <canvas>. C'est
   afficherPdfCanvas() qui fixe l'échelle — iOS n'ajustant pas un PDF en
   cadre intégré, on lui retire la décision. */
.vis-pile { transform-origin: 50% 0; }   /* will-change posé en JS pendant le pinch seulement */
.vis-page { margin: 0 auto 10px; background: var(--white); box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.vis-page canvas { display: block; width: 100%; height: 100%; }
.vis-zoom {
  position: absolute; right: 12px; bottom: calc(52px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 2px;
  background: rgba(0, 0, 0, .58); border-radius: var(--r-full); padding: 3px;
}
.vis-zbtn {
  width: 38px; height: 38px; border-radius: var(--r-full); color: var(--white);
  font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.vis-zpct { color: var(--white); font-size: 12.5px; font-weight: 700; padding: 0 8px; min-width: 52px; text-align: center; }
.vis-zbtn:active, .vis-zpct:active { background: rgba(255, 255, 255, .22); }