/* ==========================================================================
   NÉOVIA — activation.css
   Le style de l'écran d'activation. Doux, premium, dans l'esprit Néovia.
   Vous pouvez modifier librement les couleurs : elles sont regroupées
   ci-dessous dans des "variables" pour être faciles à retrouver.
   ========================================================================== */

/* --- Les couleurs Néovia (modifiez ici pour changer toute la palette) ----- */
:root {
  --neovia-fond:        #f4f1ec;  /* fond beige doux              */
  --neovia-carte:       #ffffff;  /* fond de la carte blanche     */
  --neovia-texte:       #3a3a3a;  /* texte principal              */
  --neovia-texte-doux:  #9a9a9a;  /* texte secondaire, discret    */
  --neovia-accent:      #b89a7e;  /* couleur des boutons          */
  --neovia-accent-fonce:#a3856a;  /* bouton au survol             */
  --neovia-erreur:      #c0705f;  /* messages d'erreur (doux)     */
  --neovia-bordure:     #e5e0d8;  /* bordures des champs          */
}

/* --- L'écran d'activation : occupe tout l'écran -------------------------- */
.neovia-activation {
  position: fixed;
  inset: 0;                       /* haut/bas/gauche/droite = 0   */
  background: var(--neovia-fond);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Helvetica, Arial, sans-serif;
  z-index: 9999;                  /* au-dessus de tout            */
}

/* --- La carte blanche centrale ------------------------------------------ */
.neovia-card {
  background: var(--neovia-carte);
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* --- Le logo / nom Néovia ----------------------------------------------- */
.neovia-logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--neovia-texte);
  margin-bottom: 24px;
}

/* --- Titre et sous-titre ------------------------------------------------- */
.neovia-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--neovia-texte);
  margin: 0 0 8px;
}

.neovia-subtitle {
  font-size: 14px;
  color: var(--neovia-texte-doux);
  line-height: 1.5;
  margin: 0 0 24px;
}

/* --- Les étiquettes des champs ------------------------------------------ */
.neovia-label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--neovia-texte);
  margin: 16px 0 6px;
}

/* --- Les champs de saisie ----------------------------------------------- */
.neovia-input {
  width: 100%;
  box-sizing: border-box;         /* la bordure ne déborde pas    */
  padding: 13px 14px;
  font-size: 15px;
  color: var(--neovia-texte);
  background: var(--neovia-fond);
  border: 1px solid var(--neovia-bordure);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
}

.neovia-input:focus {
  border-color: var(--neovia-accent);
}

/* Le champ de la clé : police à chasse fixe, lettres espacées (lisibilité) */
#neovia-key {
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Le bouton principal ------------------------------------------------ */
.neovia-button {
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: var(--neovia-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.neovia-button:hover {
  background: var(--neovia-accent-fonce);
}

/* Bouton désactivé (pendant la vérification) : grisé, non cliquable */
.neovia-button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- La zone de message (erreur douce ou confirmation) ------------------ */
.neovia-message {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* Variante erreur : fond et texte dans une teinte douce, jamais agressive */
.neovia-message.is-error {
  background: #f7ece9;
  color: var(--neovia-erreur);
}

/* Variante succès */
.neovia-message.is-success {
  background: #ecf3ec;
  color: #5a7d5a;
}

/* --- Le texte d'aide en bas --------------------------------------------- */
.neovia-help {
  margin-top: 20px;
  font-size: 12px;
  color: var(--neovia-texte-doux);
  line-height: 1.5;
}

/* --- Le "spinner" de chargement (le petit rond qui tourne) -------------- */
.neovia-spinner {
  width: 36px;
  height: 36px;
  margin: 30px auto 16px;
  border: 3px solid var(--neovia-bordure);
  border-top-color: var(--neovia-accent);
  border-radius: 50%;
  animation: neovia-rotation 0.8s linear infinite;
}

@keyframes neovia-rotation {
  to { transform: rotate(360deg); }
}