/* ==========================================================
   Pages publiques du parcours d'accès (users/access_page.html) — 2026-10-07
   Variables posées par le gabarit depuis les réglages du studio :
   --uap-primary, --uap-accent, --uap-radius, --uap-overlay (0-85), --uap-image.
   Dispositions : split (visuel + carte), minimal (carte centrée),
   glass (image plein écran + carte translucide), executive (visuel sombre).
   ========================================================== */
.uap{--uap-ink:#172033;--uap-muted:#64748b;--uap-line:#dbe3ed;--uap-surface:#fff;--uap-bg:#f4f7fb;display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;background:var(--uap-bg);color:var(--uap-ink)}
:where(.uap) section{padding-top:0;padding-bottom:0}/* neutralise le padding global Phoenix des <section> sans écraser les classes */

/* ---------- Volet visuel ---------- */
.uap__visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:48px;overflow:hidden;color:#fff;background:linear-gradient(145deg,var(--uap-primary),var(--uap-accent))}
.uap__visual:before{content:"";position:absolute;inset:0;background:var(--uap-image,none) center/cover;opacity:calc(1 - var(--uap-overlay) / 100)}
.uap__visual:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--uap-primary) 70%,transparent),transparent 70%)}
.uap__brand,.uap__visual-foot{position:relative;z-index:1}
.uap__brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.18em}
.uap__brand img{width:40px;height:40px;object-fit:contain}
/* Pied du volet (2026-10-10) : icône + légende, posées sur un dégradé qui assombrit le bas de l'image
   (le ::after du pied déborde jusqu'aux bords du volet, d'où les marges négatives égales au padding). */
.uap__visual-foot{display:flex;align-items:center;gap:18px}
.uap__visual-foot:after{content:"";position:absolute;z-index:-1;inset:-120px -48px -48px;background:linear-gradient(to top,rgba(8,20,40,.72),rgba(8,20,40,.28) 55%,transparent);pointer-events:none}
.uap__visual-caption{display:flex;flex-direction:column;gap:4px;max-width:420px;text-shadow:0 1px 10px rgba(8,20,40,.45)}
.uap__visual-caption strong{font-size:.72rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.uap__visual-caption span{font-size:1.25rem;font-weight:700;line-height:1.35}
.uap__visual-icon{flex:none;display:grid;width:72px;height:72px;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:22px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:1.8rem}

/* ---------- Carte ---------- */
.uap__panel{display:grid;place-items:center;padding:32px 16px}
.uap__card{display:flex;flex-direction:column;gap:12px;width:min(440px,100%);padding:38px;border:1px solid #e1e8f0;border-radius:var(--uap-radius);background:var(--uap-surface)}
.uap--shadow-soft .uap__card{box-shadow:0 22px 60px rgba(15,23,42,.1)}
.uap--shadow-deep .uap__card{box-shadow:0 34px 90px rgba(15,23,42,.24)}
.uap--shadow-glow .uap__card{box-shadow:0 0 0 6px color-mix(in srgb,var(--uap-primary) 12%,transparent),0 24px 70px color-mix(in srgb,var(--uap-primary) 28%,transparent)}
.uap--align-center .uap__card{text-align:center}
.uap--align-right .uap__card{text-align:right}
.uap__logo img{height:56px;object-fit:contain}
.uap--align-center .uap__logo,.uap--align-center .uap__avatar{margin-inline:auto}
.uap__avatar{position:relative;width:88px;height:88px}
.uap__avatar-face{display:grid;width:100%;height:100%;place-items:center;overflow:hidden;border:4px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--uap-primary),var(--uap-accent));box-shadow:0 0 0 4px #e8eef6;font-size:1.8rem}
.uap__avatar img{width:100%;height:100%;object-fit:cover;background:#fff}
.uap__initials{font-size:1.9rem;font-weight:800;letter-spacing:.02em}
.uap__avatar-badge{position:absolute;right:-2px;bottom:-2px;display:grid;width:32px;height:32px;place-items:center;border:3px solid var(--uap-surface);border-radius:50%;color:#fff;background:var(--uap-primary);font-size:.8rem;box-shadow:0 4px 10px rgba(15,23,42,.18)}
.uap__identity strong{display:block;font-size:1.1rem}
.uap__identity small,.uap__text,.uap__hint{color:var(--uap-muted)}
.uap__title{margin:0;color:var(--uap-ink);font-size:1.55rem;font-weight:800;line-height:1.25}
.uap__text{margin:0;font-size:.9rem;line-height:1.6}
.uap__fields{display:flex;flex-direction:column;gap:6px;text-align:left}
.uap__label{margin-top:4px;color:#334155;font-size:.75rem;font-weight:800}
.uap__input{display:grid;grid-template-columns:36px 1fr auto;align-items:center;min-height:46px;border:1px solid var(--uap-line);border-radius:12px;background:#f8fafc}
.uap__input:focus-within{border-color:var(--uap-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--uap-primary) 15%,transparent)}
.uap__input>svg,.uap__input>i{justify-self:center;color:#94a3b8}
.uap__input input{min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--uap-ink);font-size:.9rem}
.uap__input button{height:36px;padding:0 12px;border:0;color:#64748b;background:transparent}
.uap__hint{font-size:.72rem}
.uap__input--error{border-color:#f87171;background:#fff7f7;animation:uap-shake .32s ease}
@keyframes uap-shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.uap__capslock{display:flex;align-items:center;gap:6px;margin:2px 0 0;color:#b45309;font-size:.72rem;font-weight:700}
.uap__capslock[hidden]{display:none}
.uap__resume{display:flex;align-items:center;gap:6px;margin:2px 0 0}
.uap__alert{display:flex;gap:8px;align-items:flex-start;padding:11px 13px;border-radius:12px;font-size:.82rem;line-height:1.5;text-align:left}
.uap__alert--error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}
.uap__alert--success{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}
.uap__alert--disabled,.uap__alert--info{color:#1e3a8a;background:#eff6ff;border:1px solid #bfdbfe}
.uap__button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;padding:13px;border:0;border-radius:12px;color:#fff;background:var(--uap-primary);font-weight:800;text-decoration:none;cursor:pointer}
.uap__button:hover{color:#fff;filter:brightness(1.08)}
.uap__button:focus-visible{outline:3px solid color-mix(in srgb,var(--uap-primary) 35%,transparent);outline-offset:2px}
.uap__button.is-busy{cursor:progress;opacity:.85}
.uap__button.is-busy>svg,.uap__button.is-busy>i{display:none}
.uap__button.is-busy:before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:uap-spin .7s linear infinite}
@keyframes uap-spin{to{transform:rotate(360deg)}}
.uap--button-gradient .uap__button{background:linear-gradient(135deg,var(--uap-primary),var(--uap-accent))}
.uap--button-outline .uap__button{color:var(--uap-primary);background:transparent;border:2px solid var(--uap-primary)}
.uap--button-pill .uap__button{border-radius:999px}
.uap__help{color:var(--uap-primary);font-size:.8rem;font-weight:800;text-decoration:none}
.uap__divider{margin:4px 0;border-color:var(--uap-line)}
.uap__security{padding-top:12px;border-top:1px solid #edf1f5;color:#94a3b8;font-size:.7rem}

/* ---------- Session verrouillée (2026-10-08) ----------
   Écran de reprise centré, comme un écran de verrouillage de poste : l'identité est
   le repère principal ; le réglage d'alignement du studio vaut pour les autres pages. */
.uap[data-access-page="session_lock"] .uap__card{gap:10px;text-align:center}
.uap[data-access-page="session_lock"] .uap__logo{margin-inline:auto;margin-bottom:4px}
.uap[data-access-page="session_lock"] .uap__logo img{height:40px}
.uap[data-access-page="session_lock"] .uap__avatar{width:104px;height:104px;margin:6px auto 4px}
.uap[data-access-page="session_lock"] .uap__avatar-face{box-shadow:0 0 0 4px color-mix(in srgb,var(--uap-primary) 14%,#fff),0 14px 30px rgba(15,23,42,.14)}
.uap[data-access-page="session_lock"] .uap__title{font-size:1.4rem}
.uap[data-access-page="session_lock"] .uap__identity{display:flex;flex-direction:column;align-items:center;gap:3px}
.uap[data-access-page="session_lock"] .uap__identity strong{font-size:1.05rem}
.uap[data-access-page="session_lock"] .uap__identity small{font-size:.82rem}
.uap__since{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 10px;border-radius:999px;color:var(--uap-muted);background:#f1f5f9;font-size:.7rem;font-weight:700}
.uap[data-access-page="session_lock"] .uap__text{margin-bottom:6px;font-size:.86rem}
.uap[data-access-page="session_lock"] .uap__help{align-self:center;margin-top:4px}
.uap[data-access-page="session_lock"] .uap__security{display:flex;align-items:center;justify-content:center;gap:6px}

/* ---------- Dispositions ---------- */
.uap--no-visual,.uap--minimal{grid-template-columns:1fr}
.uap--minimal .uap__visual{display:none}
.uap--minimal{background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--uap-accent) 18%,transparent),transparent 45%),var(--uap-bg)}
.uap--glass{grid-template-columns:1fr;background:linear-gradient(145deg,var(--uap-primary),var(--uap-accent))}
.uap--glass .uap__visual{position:fixed;inset:0}
.uap--glass .uap__panel{position:relative;z-index:1;min-height:100vh}
.uap--glass .uap__card{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.82);backdrop-filter:blur(16px)}
.uap--glass .uap__visual-foot{display:none}
.uap--executive{--uap-bg:#0f172a}
.uap--executive .uap__visual{background:linear-gradient(160deg,#0b1220,var(--uap-primary))}

@media (max-width:900px){
  .uap{grid-template-columns:1fr}
  .uap:not(.uap--glass) .uap__visual{display:none}
  .uap__card{padding:28px 20px}
}