/* ============================================================================
   ZCA SUITE — LIQUID GLASS · STANDALONE / PUBLIC
   ----------------------------------------------------------------------------
   Mises en page pour les pages SANS shell applicatif : authentification,
   flux publics (lien de réservation RDV, dépôt de pièces, confirmation 2FA),
   documents imprimables, et cadres « device » pour les vues mobiles.
   S'appuie EXCLUSIVEMENT sur les tokens et composants de liquid-glass.css
   (importer liquid-glass.css AVANT ce fichier). Aucune couleur redéfinie ici.
   ========================================================================== */

/* ---- Accent par app SANS la grille .app (pages standalone) -------------
   Hub = ember (défaut, rien à faire). On rejoue les overrides de couleur
   d'action sur les conteneurs standalone afin que les pages compta/crm/portail
   adoptent leur teinte (azur / violet / vert) sans hériter de .app{display:grid}. */
.pub[data-app="compta"],.device-stage[data-app="compta"],.print[data-app="compta"]{--acc:var(--azure);--acc-3:#9FC8F2;--acc-grad:var(--grad-azure);--acc-glow:var(--glow-azure);--acc-sh:var(--sh-azure);--acc-ink:#06121f;}
.pub[data-app="crm"],.device-stage[data-app="crm"],.print[data-app="crm"]{--acc:var(--violet);--acc-3:#C9B4F0;--acc-grad:var(--grad-violet);--acc-glow:177,151,224;--acc-sh:0 10px 30px -8px rgba(91,68,136,.55);--acc-ink:#1c0f33;}
.pub[data-app="portail"],.device-stage[data-app="portail"],.print[data-app="portail"]{--acc:var(--valide);--acc-3:#8FE0B6;--acc-grad:linear-gradient(135deg,#86E6B6,#3FA98C);--acc-glow:95,192,140;--acc-sh:0 10px 30px -8px rgba(47,125,94,.55);--acc-ink:#06241a;}

/* ---- Conteneur centré (auth / 2FA / petites pages) --------------------- */
.pub{min-height:100vh;display:flex;flex-direction:column;}
.pub-top{
  display:flex;align-items:center;gap:12px;padding:18px 26px;
  border-bottom:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(10,14,24,.55),transparent);
  -webkit-backdrop-filter:var(--lg-frost-lg);backdrop-filter:var(--lg-frost-lg);
}
.pub-top .brand{padding:0;}
.pub-top .sp{flex:1;}
.pub-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;}
.pub-foot{text-align:center;font-size:11.5px;color:var(--ink-4);letter-spacing:.04em;padding:18px;}
.pub-foot .souv{color:var(--ink-3);}

/* carte d'auth centrée */
.auth{width:100%;max-width:420px;}
.auth.wide{max-width:560px;}
.auth-card{padding:30px 30px 26px;border-radius:var(--r-xl);}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:22px;}
.auth-brand .mark{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--acc-grad);box-shadow:var(--acc-sh);color:var(--acc-ink);font-weight:800;font-size:23px;
}
.auth-brand h1{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;letter-spacing:-.01em;}
.auth-brand .sub{font-size:13px;color:var(--ink-3);}
.auth-title{font-size:17px;font-weight:600;margin-bottom:6px;}
.auth-lead{font-size:13.5px;color:var(--ink-2);margin:0 0 20px;line-height:1.55;}

/* ---- Champs de formulaire (absents de liquid-glass.css) ---------------- */
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.fld>label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);}
.fld .hint{font-size:11.5px;color:var(--ink-4);}
.input,.fld input,.fld select,.fld textarea{
  all:unset;box-sizing:border-box;width:100%;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);font-size:14px;
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);transition:.16s;
}
.fld textarea{min-height:96px;line-height:1.5;resize:vertical;}
.input:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:rgba(var(--acc-glow),.55);background:var(--glass-2);
  box-shadow:0 0 0 3px rgba(var(--acc-glow),.16);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4);}
.btn.block{width:100%;justify-content:center;padding:12px 16px;font-size:14.5px;}

/* ---- Saisie OTP (6 cases) / TOTP --------------------------------------- */
.otp{display:flex;gap:10px;justify-content:center;margin:6px 0 18px;}
.otp .box{
  width:46px;height:56px;border-radius:13px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);
  font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;color:var(--ink);
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);
}
.otp .box.on{border-color:rgba(var(--acc-glow),.6);background:var(--glass-2);box-shadow:0 0 0 3px rgba(var(--acc-glow),.16);}
.otp .box.cursor{border-color:rgba(var(--acc-glow),.8);}

/* séparateur « ou » */
.orline{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-4);font-size:12px;font-weight:600;}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--glass-line);}

/* ---- Page publique large (RDV public, dépôt, document) ----------------- */
.pub-wrap{width:100%;max-width:760px;margin:0 auto;}
.pub-wrap.lg{max-width:920px;}
.pub-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.pub-head .mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--acc-grad);box-shadow:var(--acc-sh);color:var(--acc-ink);font-weight:800;font-size:18px;flex:0 0 auto;}
.pub-head .ttl{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;line-height:1.05;}
.pub-head .by{font-size:12.5px;color:var(--ink-3);}

/* créneaux de réservation (RDV public) */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;}
.slot{padding:10px 0;text-align:center;border-radius:var(--r-sm);background:var(--glass);
  border:1px solid var(--glass-line);font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-2);transition:.14s;}
.slot:hover{background:var(--glass-2);color:var(--ink);}
.slot.on{background:var(--acc-grad);border-color:transparent;color:var(--acc-ink);box-shadow:var(--acc-sh);}
.slot.off{opacity:.35;pointer-events:none;text-decoration:line-through;}

/* gros pictogramme de statut (confirmation / erreur / expiré) */
.bigico{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;margin:0 auto 18px;
  background:var(--acc-grad);box-shadow:var(--acc-sh);color:var(--acc-ink);}
.bigico svg{width:40px;height:40px;}
.bigico.ok{background:linear-gradient(135deg,#86E6B6,#3FA98C);color:#06241a;box-shadow:0 10px 30px -8px rgba(47,125,94,.55);}
.bigico.warn{background:var(--grad-ember);color:#2a0f04;}
.bigico.err{background:linear-gradient(135deg,#FF6B74,#E5343F);color:#fff;box-shadow:0 10px 30px -8px rgba(176,37,47,.5);}
.bigico.frost{background:linear-gradient(160deg,#bfe0ff,#7fb0e8);color:#06243f;}

/* ---- Cadre « device » pour les vues mobiles --------------------------- */
.device-stage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px;}
.device-cap{text-align:center;max-width:420px;}
.device-cap h1{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;}
.device-cap p{font-size:13px;color:var(--ink-2);margin:6px 0 0;}
.device{
  width:390px;max-width:calc(100vw - 36px);height:800px;max-height:calc(100vh - 120px);
  border-radius:46px;padding:13px;flex:0 0 auto;position:relative;
  background:var(--glass-deep);border:1px solid var(--glass-line);box-shadow:var(--sh-2);
  -webkit-backdrop-filter:var(--lg-frost-lg);backdrop-filter:var(--lg-frost-lg);
}
.device::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:118px;height:30px;border-radius:999px;background:#05070d;z-index:5;}
.device-screen{
  width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-0));border:1px solid var(--glass-line);
  display:flex;flex-direction:column;
}
.device-screen .m-top{padding:34px 16px 12px;display:flex;align-items:center;gap:10px;flex:0 0 auto;
  border-bottom:1px solid var(--glass-line);}
.device-screen .m-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
.device-screen .m-tabbar{flex:0 0 auto;display:flex;border-top:1px solid var(--glass-line);
  background:var(--glass-deep);padding:8px 6px 16px;}
.device-screen .m-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--ink-3);padding:5px 0;}
.device-screen .m-tab.on{color:var(--ink);}
.device-screen .m-tab svg{width:21px;height:21px;}
/* barre d'action collante (mobile) */
.device-screen .m-sticky{flex:0 0 auto;padding:10px 14px;border-top:1px solid var(--glass-line);
  background:var(--glass-deep);display:flex;gap:9px;}

/* ---- Bandeau « rendu pixel » (souveraineté) --------------------------- */
.pixel-band{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:var(--r-sm);
  background:var(--tint-azure);border:1px solid rgba(var(--glow-azure),.30);font-size:12px;color:var(--ink-2);}

@media (max-width:560px){
  .auth-card{padding:24px 20px;}
  .otp .box{width:40px;height:50px;font-size:21px;}
  .pub-main{padding:20px 14px;}
}