:root{
  --blue:#A0EFF2; --violet:#E3B0F0; --green:#85C7B7; --pink:#E38F80; --dark:#0D0D0D;
  --field-h:48px; --radius:12px; --gap:16px; --card-alpha:.06; --card-stroke:.14;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:#f2f2f2;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Lemon Milk",sans-serif;
  background:#0D0D0D;
  background-image:
    linear-gradient(135deg,rgba(160,239,242,.09),rgba(227,176,240,.09)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.015)0 2px,transparent 2px 6px);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(50vw 50vh at 25% 20%,rgba(160,239,242,.18),transparent 55%),
    radial-gradient(50vw 50vh at 75% 80%,rgba(227,176,240,.18),transparent 55%);
}

/* Header (ancien système contact) */
.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:linear-gradient(90deg,var(--blue),var(--violet));
  box-shadow:0 4px 24px rgba(0,0,0,.25)
}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-wrap img{height:46px;width:auto}
.logo-wrap .brand{font-size:1.5rem;color:#0D0D0D;font-weight:800}
.main-nav a{color:#0D0D0D;font-weight:700;margin-left:18px;text-decoration:none}
.main-nav a:hover{color:var(--pink)}
.main-nav a.active{text-decoration:underline}

/* Header global : logo cliquable AETHORA (index, vote, wiki, profil, etc.) */
.logo-container{
  display:flex;
  align-items:center;
  gap:12px;
}
/* taille du logo dans le header global */
.logo-container img{
  height:46px;
  width:auto;
}
/* supprime tout soulignement sous le lien-logo et le texte AETHORA */
.logo-container,
.logo-container:link,
.logo-container:visited,
.logo-container:hover,
.logo-container:active,
.logo-container *{
  text-decoration:none !important;
}

/* ===== STICKY FOOTER FIX ===== */
.page{
  min-height:100vh;                /* prend toute la hauteur */
  display:flex;
  flex-direction:column;           /* empile header, contenu, footer */
  align-items:initial;             /* stop le centrage vertical */
  justify-content:initial;
}
main{
  flex:1;                          /* pousse le footer en bas */
}

/* Footer */
.site-footer{
  margin-top:auto;
  text-align:center;
  padding:18px;
  color:#9aa;
  background:rgba(17,17,17,.85);
  backdrop-filter:blur(5px);
  width:100%;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer a{color:var(--blue)}
.site-footer a:hover{color:var(--pink)}

/* Page */
.page.contact{padding:38px 16px 28px}
.container{width:100%;max-width:980px;margin:auto}
h1{text-align:center;margin:0 0 10px;letter-spacing:.5px}
.help{text-align:center;color:#cbd;margin:0 0 18px}

/* Card */
.card{
  background:rgba(255,255,255,var(--card-alpha));
  border:1px solid rgba(255,255,255,var(--card-stroke));
  border-radius:16px;backdrop-filter:blur(6px);
  padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== GRID 2x2 PAR LIGNE (corrigé avec :nth-child) ===== */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto var(--field-h);
  grid-template-areas:
    "l1 l2"
    "c1 c2";
  column-gap:var(--gap);
  row-gap:8px;
  margin-bottom:14px;
}

/* Labels (même rangée, pas d’influence sur la hauteur des champs) */
.row .lbl{align-self:end;color:var(--blue);font-weight:800;letter-spacing:.3px}
.row > .lbl:nth-child(1){grid-area:l1} /* label gauche */
.row > .lbl:nth-child(2){grid-area:l2} /* label droite */

/* Contrôles */
.ctrl{
  width:100%;height:var(--field-h);padding:0 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.36);
  color:#f2f2f2;font-size:16px;outline:none;
  transition:border .2s,box-shadow .2s,background .2s;
}
.row > .ctrl:nth-child(3){grid-area:c1} /* champ gauche (3e enfant de la ligne) */
.row > .ctrl:nth-child(4){grid-area:c2} /* champ droite (4e enfant de la ligne) */

/* Select identique aux inputs (flèche seulement sur select) */
select.ctrl{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:44px;
  background-image:
    linear-gradient(90deg,rgba(160,239,242,.12),rgba(227,176,240,.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23A0EFF2' d='M0 0l6 7 6-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:right 14px center,right 14px center;
  background-size:auto,12px 7px;
}

/* Ligne pleine largeur (message) */
.row-full{
  display:grid;grid-template-columns:1fr;
  grid-template-rows:auto minmax(180px,auto);
  grid-template-areas:"l1" "c1";margin-top:6px
}
.row-full .lbl{grid-area:l1;align-self:end}
.row-full .area{grid-area:c1;height:auto;min-height:200px;resize:vertical;padding:14px;line-height:1.4}

/* Focus */
.ctrl:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(227,176,240,.25);background:rgba(0,0,0,.45)}

/* Boutons */
.actions{display:flex;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.btn{
  display:inline-block;min-width:160px;text-align:center;padding:14px 30px;border-radius:12px;
  background:linear-gradient(90deg,var(--blue),var(--violet));color:#0D0D0D;font-weight:800;text-decoration:none;
  box-shadow:0 0 10px rgba(160,239,242,.3);transition:.2s
}
.btn:hover{transform:scale(1.05);filter:brightness(1.1);box-shadow:0 0 16px rgba(227,176,240,.45)}

/* Copier IP */
.copyable{
  color:#fff;font-weight:800;cursor:pointer;padding:3px 8px;border-radius:8px;
  background:#ffffff13;border:1px solid #ffffff22;margin:0 6px;
}
.copyable:hover{ background:#ffffff22; }

/* Responsive */
@media (max-width:860px){
  .row{
    grid-template-columns:1fr;
    grid-template-areas:"l1" "c1" "l2" "c2";
    grid-template-rows:auto var(--field-h) auto var(--field-h);
  }
  .row > .lbl:nth-child(1){grid-area:l1}
  .row > .lbl:nth-child(2){grid-area:l2}
  .row > .ctrl:nth-child(3){grid-area:c1}
  .row > .ctrl:nth-child(4){grid-area:c2}
}

/* ===================== AUTH MODAL ===================== */

/* Zone Auth globale */
#auth-area{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Bouton Connexion / Déconnexion dans le header */
.login-btn{
  display:inline-block;
  padding:8px 16px;
  font-size:0.85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.28);
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  background:linear-gradient(145deg,
    #f5f5f5,
    #d3d3d3 35%,
    #b0b0b0 70%,
    #dcdcdc
  );
  color:#0D0D0D;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.8),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 0 10px rgba(255,255,255,0.15);
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}
.login-btn:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.15);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    0 0 14px rgba(255,255,255,0.25);
}
.login-btn.logout-btn{
  background:linear-gradient(145deg,#e0e0e0,#b8b8b8 40%,#8f8f8f 80%);
}
#user-label{
  font-size:0.8rem;
  color:#dddddd;
}

/* Overlay */
.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.auth-modal.open { display:flex; }

.auth-modal-content {
  background: #111;
  border-radius: 18px;
  padding: 20px 24px 22px;
  max-width: 420px;
  width: 100%;
  color: #F2F2F2;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  position: relative;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.auth-modal-content h2 {
  margin-top: 0;
  color: #E3B0F0;
  font-size: 1.4rem;
}
.auth-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: #999;
  font-size: 1.6rem;
  cursor: pointer;
}

/* Formulaires dans la modale */
.auth-modal form { margin-bottom: 12px; }
.auth-modal label {
  display: block;
  font-size: 0.85rem;
  margin: 6px 0 2px;
}
.auth-modal input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #1b1b1b;
  color: #F2F2F2;
  font-family: inherit;
}
.auth-modal input:focus {
  outline: none;
  border-color: #A0EFF2;
}
.auth-submit {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg,#A0EFF2,#E3B0F0);
  color: #0D0D0D;
  font-weight: 700;
}

/* Ligne code de vérification / actions supplémentaires */
.auth-inline-row{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.auth-inline-row .auth-code-input{
  flex:1 1 150px;
}
.auth-inline-row .auth-submit{
  flex:0 0 auto;
}

/* Liens type "Mot de passe oublié" / "Renvoyer le code" */
.auth-link-btn{
  margin-top:6px;
  padding:0;
  border:none;
  background:none;
  color:var(--blue);
  font-size:0.8rem;
  cursor:pointer;
  text-decoration:underline;
}
.auth-link-btn:hover{
  color:var(--violet);
}

/* Message d’état (succès / erreur) */
#auth-message{
  font-size:0.85rem;
  min-height:20px;
  margin-top:8px;
  color:#e0e0e0;
  transition:color .15s, background .15s;
}
#auth-message[data-type="ok"]{
  color:#7dffaf;
  background:rgba(16,120,60,.35);
  border-radius:8px;
  padding:6px 8px;
}
#auth-message[data-type="error"]{
  color:#ff8b9a;
  background:rgba(160,20,40,.35);
  border-radius:8px;
  padding:6px 8px;
}