/* Porte d'entrée : création de compte, connexion, mot de passe oublié.
   Elle prend tout l'écran — ni en-tête, ni barre du bas — pour qu'il n'y ait
   qu'une chose à faire à la fois. */

body.inauth .top,
body.inauth #nav { display:none }
body.inauth main { padding:0 }

.authwrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:26px 18px calc(30px + env(safe-area-inset-bottom,0px))}
.authcard{width:100%;max-width:400px;text-align:center}
.authlogo{height:clamp(52px,17vw,74px);width:auto;margin-bottom:22px;filter:drop-shadow(0 0 26px rgba(169,92,242,.45))}
.authtitle{font-family:var(--display);font-stretch:112%;font-weight:900;font-style:italic;font-size:26px;
  letter-spacing:-.025em;line-height:1.08;margin:0 0 8px}
.authcard>p{margin:0 auto 18px;max-width:34ch}

.field{display:block;text-align:left;margin:0 0 12px}
.field>span{display:block;font-size:12.5px;font-weight:800;color:var(--subtle);margin:0 0 6px;letter-spacing:.02em}
.field input,.findrow input,.compose input,.panel input[type=text]{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:16px;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.findrow input:focus,.compose input:focus,.panel input[type=text]:focus{
  outline:0;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(137,54,255,.22)}
.field input::placeholder,.findrow input::placeholder,.compose input::placeholder{color:var(--muted)}

.authacts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.autherr{background:rgba(238,0,115,.12);border:1px solid rgba(238,0,115,.4);color:#ffc2dd;
  border-radius:var(--radius-sm);padding:10px 13px;font-size:13.5px;font-weight:600;text-align:left;margin:0 0 14px}

/* Le bouton Discord garde la couleur de la marque : on la reconnaît d'un coup d'œil. */
.btn.discord{background:linear-gradient(180deg,#6c7ef4,#5865f2);box-shadow:0 5px 0 #3c45ad,0 12px 22px rgba(88,101,242,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.discord:active:not(:disabled){box-shadow:0 0 0 #3c45ad,0 4px 10px rgba(88,101,242,.24),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.discord svg{width:22px;height:17px}

.authsep{position:relative;margin:20px 0 14px;color:var(--muted);font-size:12px;font-weight:700}
.authsep::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.authsep span{position:relative;background:var(--bg);padding:0 12px}

/* ============ Écran d'attente ============ */
/* Le site est en ligne mais fermé : on montre l'objet, pas le contenu.
   Un paquet fermé qui flotte, rien de plus — ça suffit à donner envie. */
body.inlock .top,
body.inlock #nav { display:none }
body.inlock main { padding:0 }

.lockwrap{min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:26px 18px calc(30px + env(safe-area-inset-bottom,0px))}
.lockcard{width:100%;max-width:420px;text-align:center}
.locklogo{height:clamp(46px,15vw,64px);width:auto;margin-bottom:6px;
  filter:drop-shadow(0 0 26px rgba(169,92,242,.45))}

/* Le paquet, en lévitation lente. */
/* Flex, et non grille : la ligne d'une grille se dimensionne sur l'image, si bien
   que `height:100%` s'y résolvait à la hauteur naturelle du paquet — 500 pixels
   qui débordaient sur tout le reste de l'écran. */
.lockart{position:relative;height:clamp(200px,44vw,264px);margin:10px auto 20px;
  display:flex;align-items:center;justify-content:center}
.lockglow{position:absolute;width:min(360px,88%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(169,92,242,.34),rgba(137,54,255,.12) 42%,transparent 68%);
  animation:lockpulse 5s ease-in-out infinite}
.lockpack{position:relative;height:100%;width:auto;max-width:none;flex:0 0 auto;border-radius:6px;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(169,92,242,.32));
  animation:lockfloat 6s ease-in-out infinite}
.lockshadow{position:absolute;bottom:2px;width:46%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);
  animation:lockshade 6s ease-in-out infinite}
@keyframes lockfloat{50%{transform:translateY(-14px) rotate(1.2deg)}}
@keyframes lockpulse{50%{opacity:.62;transform:scale(1.06)}}
@keyframes lockshade{50%{transform:scaleX(.84);opacity:.66}}

.locktag{display:inline-block;background:rgba(137,54,255,.2);color:var(--accent-soft);
  border-radius:999px;padding:5px 15px;font-size:11px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(137,54,255,.42)}
.locktitle{font-family:var(--display);font-stretch:114%;font-weight:900;font-style:italic;
  font-size:clamp(34px,11vw,46px);letter-spacing:-.035em;line-height:1;margin:12px 0 10px}
.lockdit{margin:0 auto;max-width:34ch}
.lockdit b{color:var(--text)}

/* Compte à rebours, quand une date d'ouverture est fixée. */
.compte{display:flex;justify-content:center;gap:8px;margin:22px 0 4px}
.compte>div{flex:1;max-width:82px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 4px}
.compte b{display:block;font-family:var(--display);font-stretch:106%;font-weight:900;
  font-size:23px;line-height:1.05}
.compte span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lockpret{color:#55e6a6;font-weight:700;margin:20px 0 0}

/* Le champ de code reste replié : discret pour le public, à portée pour toi. */
.lockcode{background:none;border:0;padding:0;margin:26px 0 0;text-align:left}
.lockcode summary{list-style:none;text-align:center;color:var(--muted);font-size:12.5px;
  font-weight:700;padding:8px;border-radius:8px;transition:color .15s}
.lockcode summary::-webkit-details-marker{display:none}
.lockcode summary:hover{color:var(--subtle)}
.lockcode[open] summary{color:var(--subtle);margin-bottom:6px}
.lockcode .findrow{margin-top:4px}
.lockcode .autherr{margin:0 0 10px}