/* Vitrine MEGGA — retouches manuscrites des écrans d'authentification :
 * le modal « mot de passe oublié » (login.html) et la grille du formulaire
 * d'inscription (signup.html).
 *
 * Pour le modal, ce fichier ne contient QUE le chrome du dialogue : voile,
 * cadre, bouton de fermeture, animations. Tout ce qui est à l'intérieur
 * réutilise les classes de la vitrine (card sign-in-card, input,
 * primary-button, display-*, w-form-*) — aucune couleur ni typo n'est
 * réinventée, on lit les variables de :root.
 *
 * Fichier SÉPARÉ de css/styles.css à dessein : styles.css est l'export Webflow
 * et sert de source à la transcription de l'app (scripts/build-megga-x-css.mjs).
 * Y écrire à la main polluerait le design system côté CRM.
 */

/* La case elle-même ne se laisse pas écraser.
   `.checkbox-field` est un conteneur flex et `.checkbox` un carré de 18 px sans
   `flex-shrink` : dès que le libellé passe à la ligne — donc sur mobile, et sur
   l'inscription où le texte est long — la case est comprimée à ~12,8 px de large
   pour 18 de haut, et se lit comme un trait vertical. Le carré est un dessin,
   pas une colonne de texte : il ne rétrécit jamais. */
.checkbox-field .w-checkbox-input {
  flex-shrink: 0;
}

/* signup.html — la case de consentement occupe sa propre ligne sous les quatre
   champs (Nom | E-mail / Mot de passe | Agence). `1 / -1` plutôt que `span 2` :
   sous 767px la grille passe à une colonne, et un `span 2` y créerait une
   colonne implicite qui rétrécirait tous les autres champs de moitié. */
.megga-signup__consent {
  grid-column: 1 / -1;
}

/* Écran de confirmation des pages d'authentification (.w-form-done).
   Le gabarit Webflow neutralise le fond ET la bordure de cette carte
   (`.success-message-card.sign-up-form` et `.sign-in-form` posent
   `--transparent` et `border-style: none`), puis lui réserve 613 px de haut
   pour occuper la place du formulaire masqué. Une fois le compte créé, il ne
   restait donc qu'un paragraphe flottant au milieu du noir, sans rien qui le
   tienne. On lui rend le cadre des cartes de la vitrine — les variables de
   `.card`, aucune couleur inventée — et il épouse son contenu.

   Trois classes pour peser autant que la règle du gabarit : cette feuille est
   chargée après styles.css, donc à poids égal c'est elle qui tranche. */
.card.success-message-card.megga-auth__done {
  background-color: var(--neutral-colors--300);
  border: 1px solid var(--neutral-colors--400);
  border-radius: var(--main-border-radius--br-large);
  min-height: 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Sauf quand elle est DÉJÀ dans une carte — c'est le cas de reset-password,
   dont le formulaire vit au centre d'un `sign-in-card`. Un cadre dans un cadre
   se lit comme une erreur de gabarit ; la carte n'y garde que ce qui manquait,
   à savoir cesser de réserver 613 px de vide sous quatre lignes de texte. */
.card .card.success-message-card.megga-auth__done {
  background-color: var(--transparent);
  border-style: none;
}

/* …et la page cesse de se décoller de son pied.

   `signup.html` est la seule page d'authentification en `.full-height-page` :
   `min-height: 100vh` + `justify-content: space-between` sur trois blocs
   (en-tête, section, pied). Tant que le formulaire dépassait la fenêtre, il n'y
   avait rien à répartir et le dégradé du bas de section arrivait pile sur le
   filet du pied de page. Dès que le contenu devient plus court que la fenêtre —
   confirmation « Compte créé », ou simplement un grand écran — `space-between`
   distribue le vide ENTRE les blocs : une bande noire s'ouvre entre le dégradé
   et le filet, et la section trop courte écrase au passage la capture du
   tableau de bord qu'elle étire sur toute sa hauteur.

   C'est la section qui doit absorber ce vide, pas les intervalles : elle
   grandit, il ne reste plus rien à répartir, et le dégradé redescend jusqu'au
   filet quelle que soit la hauteur du contenu. */
.page-wrapper.full-height-page > .section {
  flex-grow: 1;
}

/* Le message d'erreur vit DANS la grille des champs, juste au-dessus du bouton
   d'envoi. Webflow le pose après le formulaire entier — sous les boutons OAuth
   et le lien « Se connecter » — donc hors de l'écran sur l'inscription : la
   page devait sauter jusqu'à lui, l'utilisateur perdait ses champs de vue et se
   retrouvait au bas d'une page qu'il n'avait pas demandé à quitter.
   `1 / -1` comme la ligne de consentement : en une colonne (< 767 px), un
   `span 2` créerait une colonne implicite qui rétrécirait tous les champs. */
.megga-form-error {
  grid-column: 1 / -1;
}

.megga-modal[hidden] {
  display: none;
}

.megga-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.megga-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: meggaModalFade 0.2s ease both;
}

/* Porte aussi les classes `card sign-in-card` : le fond translucide, le flou,
   la bordure et le rayon viennent de la feuille vitrine, pas d'ici. */
.megga-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  animation: meggaModalRise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.megga-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--neutral-colors--400);
  border-radius: 100%;
  background: transparent;
  color: var(--neutral-colors--700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
}

/* La croix est un SVG, plus le caractère « × ».
   Centrer un glyphe ne centre que sa BOÎTE : l'encre du signe multiplication
   se pose sur l'axe mathématique de la police, au-dessus du milieu de la ligne,
   d'où une croix visiblement décalée dans un bouton rond. Deux traits
   symétriques dans un viewBox carré n'ont pas ce biais. */
.megga-modal__close svg {
  display: block;
}

.megga-modal__close:hover {
  color: var(--neutral-colors--1000);
  border-color: var(--neutral-colors--600);
}

/* Le fond ne défile pas pendant que le dialogue est ouvert. */
body.megga-modal-open {
  overflow: hidden;
}

@keyframes meggaModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes meggaModalRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .megga-modal__backdrop,
  .megga-modal__dialog {
    animation: none;
  }
}

@media screen and (max-width: 479px) {
  .megga-modal {
    padding: 16px;
  }

  .megga-modal__close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}