/* Fenêtre de connexion Fiftin — un seul style pour tout le site (accueil,
   Séjours, outil). Fenêtre en surimpression : la page reste visible
   derrière, assombrie et floutée ; la carte est en vert propriétaire
   (#354B38, aplat sans motif), le logo en verre, des champs pilules translucides, « Se connecter » en
   contour blanc et « Créer un compte » en pastille jaune. Seule la mise en
   forme est commune : chaque page garde sa propre logique de connexion.
   Chemins d'images relatifs à ce fichier (assets/). */
@property --iris-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes ffAuthIris{to{--iris-angle:360deg;}}

.ff-auth{position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px));
  background:rgba(16,22,18,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.ff-auth.open{display:flex;}

.ff-auth-card{position:relative; width:100%; max-width:400px; max-height:100%; overflow-y:auto; box-sizing:border-box;
  border-radius:28px; padding:34px 26px 24px; text-align:center; color:#fff; font-family:'Jost',sans-serif;
  background:#354B38;
  box-shadow:0 30px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14);}

.ff-auth-close{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  font:400 20px/1 'Jost',sans-serif; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}

/* Logo en verre (même recette que le grand logo des heros). */
.ff-auth-logo{position:relative; width:84px; height:84px; border-radius:25%; margin:0 auto 18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 26%, rgba(255,255,255,.04) 48%,
      rgba(16,22,18,.1) 68%, rgba(16,22,18,.26) 100%),
    rgba(29,40,32,.14);
  -webkit-backdrop-filter:blur(9px) saturate(1.4); backdrop-filter:blur(9px) saturate(1.4);
  box-shadow:inset 0 3px 5px rgba(255,255,255,.6), inset 3px 0 5px rgba(255,255,255,.3),
    inset 0 -9px 15px rgba(8,13,10,.38), inset -7px 0 13px rgba(8,13,10,.24),
    0 10px 26px rgba(29,40,32,.22), 0 2px 6px rgba(29,40,32,.16);}
.ff-auth-logo::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:conic-gradient(from var(--iris-angle,0deg),
    rgba(255,255,255,0) 0deg, #7B94E8 55deg, rgba(255,255,255,.9) 95deg, #DEEB82 150deg,
    rgba(255,255,255,0) 190deg, rgba(255,255,255,0) 270deg, #8B9D86 320deg, rgba(255,255,255,0) 360deg);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  opacity:.9; animation:ffAuthIris 9s linear infinite; pointer-events:none;}
.ff-auth-logo::after{content:""; position:absolute; left:-10%; top:-8%; width:120%; height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 100%);
  border-radius:50%; filter:blur(1.5px); transform:rotate(-6deg); pointer-events:none;}
.ff-auth-logo img{position:relative; z-index:1; width:61%; height:auto; display:block; transform:translateX(-3%);}

.ff-auth-card .ff-auth-title{margin:0 0 6px; font:600 26px/1.2 'Jost',sans-serif; color:#fff; letter-spacing:-.01em;}
.ff-auth-card .ff-auth-sub{margin:0 auto 22px; max-width:300px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.85); white-space:pre-line;}

.ff-auth-card .ff-auth-input{display:block; width:100%; box-sizing:border-box; margin:0 0 10px; padding:13px 18px;
  border-radius:999px; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.08);
  font:400 16px 'Jost',sans-serif; color:#fff; text-align:center; outline:none; box-shadow:none;}
.ff-auth-card .ff-auth-input::placeholder{color:rgba(255,255,255,.72);}
.ff-auth-card .ff-auth-input:focus{border-color:#fff; background:rgba(255,255,255,.14);}
.ff-auth-card .ff-auth-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.ff-auth-card .ff-auth-submit{display:block; width:100%; margin:6px 0 0; padding:14px; border-radius:999px; cursor:pointer;
  border:1.5px solid #fff; background:transparent; color:#fff; font:600 16px 'Jost',sans-serif;}
.ff-auth-card .ff-auth-submit:hover{background:rgba(255,255,255,.12);}
.ff-auth-card .ff-auth-submit:disabled{opacity:.6; cursor:default;}

.ff-auth-card .ff-auth-err{min-height:18px; margin:10px 0 0; font-size:13.5px; font-weight:400; line-height:1.4; color:#FFE0D8 !important;}
.ff-auth-close{text-decoration:none;}

.ff-auth-card .ff-auth-switch{margin:16px 0 0; font-size:14px; color:rgba(255,255,255,.82);}
.ff-auth-card .ff-auth-pill{display:inline-block; margin-left:6px; padding:6px 14px; border-radius:999px; border:none; cursor:pointer;
  background:#DEEB82; color:#1D2820; font:600 14px 'Jost',sans-serif; text-decoration:none;}
.ff-auth-card .ff-auth-forgot{display:inline-block; margin:10px 0 0; padding:4px; border:none; background:none; cursor:pointer;
  font:500 13.5px 'Jost',sans-serif; color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:3px;}
.ff-auth-card [hidden]{display:none !important;}