/* Page de connexion — Hôtel Ariane. Polices auto-hébergées (aucun appel externe, CSP default-src 'self'). */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/fonts/manrope-latin-wght-normal.woff2) format("woff2")}

:root{--nuit:#0F1B2D;--nuit-deep:#0A1220;--or:#BFA373;--or-clair:#D8C49A;--sable:#EFE9E2;--blanc:#FFFFFF}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.connexion{background:var(--nuit-deep);color:var(--blanc);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}

.heros{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;isolation:isolate}
.heros__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.06);animation:respire 22s ease-in-out infinite alternate}
.heros__voile{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 45%,rgba(10,18,32,.25) 0%,rgba(10,18,32,.65) 60%,rgba(10,18,32,.9) 100%),
             linear-gradient(180deg,rgba(15,27,45,.45) 0%,rgba(15,27,45,.22) 38%,rgba(10,18,32,.9) 100%)}
@keyframes respire{from{transform:scale(1.06)}to{transform:scale(1.13) translateY(-1.2%)}}

.heros__haut{display:flex;align-items:center;padding:26px clamp(16px,4vw,48px)}
.heros__logo{height:clamp(24px,3.2vw,34px);width:auto;display:block}

.heros__centre{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
.titre{margin:0;text-wrap:balance;font-family:"EB Garamond",Georgia,serif;font-weight:400;font-size:clamp(2.8rem,8vw,6rem);line-height:1.02;letter-spacing:.005em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.titre em{font-style:italic;color:var(--or-clair)}

/* Barre de connexion, collée en bas de l'écran */
.barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:18px clamp(16px,4vw,48px) calc(18px + env(safe-area-inset-bottom));
  background:rgba(10,18,32,.78);border-top:1px solid rgba(191,163,115,.3);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.champ{display:block;flex:1 1 220px;max-width:300px}
.champ input{width:100%;padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--blanc);
  font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.champ input::placeholder{color:rgba(255,255,255,.55)}
.champ input:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(191,163,115,.28);background:rgba(255,255,255,.12)}
.bouton{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 28px;border:0;border-radius:999px;
  background:var(--blanc);color:var(--nuit);font:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.55);transition:transform .2s,box-shadow .2s,background .2s}
.bouton:hover{transform:translateY(-1px);background:var(--sable)}
.bouton:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.bouton span{transition:transform .2s}.bouton:hover span{transform:translateX(3px)}
.erreur{flex:1 0 100%;margin:0;text-align:center;font-size:14px;color:#FFD5D0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){.barre{flex-direction:column;align-items:stretch}.champ{max-width:none;flex-basis:auto}.bouton{width:100%}}
@media (prefers-reduced-motion:reduce){.heros__photo{animation:none}.bouton,.bouton span{transition:none}}