/* Operia — ÉCRAN DE CONNEXION, MODÈLE SOBRE.

   L'écran portait un grand hero sombre « Pilotez vos opérations terrain » sur
   la moitié gauche. Le reste du groupe a basculé sur une présentation sobre —
   fond clair, carte blanche centrée, champs soulignés — et deux langages
   visuels pour la même action donnaient l'impression de deux produits sans
   rapport, selon la porte par laquelle on entrait.

   CE FICHIER NE TOUCHE QUE LA PRÉSENTATION. Le balisage et le script restent
   identiques : l'empreinte digitale, « se souvenir de moi », le mot de passe
   oublié, la carte d'inscription et l'entrée par QR code continuent de
   fonctionner sans avoir été retouchés. C'est aussi ce qui rend ce changement
   sûr — il n'y avait aucune raison de risquer ces chemins-là pour une
   question d'apparence.

   Il se charge APRÈS login-unified.css et le neutralise là où il le faut.
   Même spécificité, ordre plus tardif : c'est l'ordre qui tranche, et il doit
   rester tel quel dans le <head>. */

/* Les valeurs viennent de l'écran unifié du site, relevées dans son code —
   pas approchées à l'œil. Deux gris voisins mais differents se verraient au
   premier aller-retour entre les deux écrans. */
.ngl {
  --sob-encre: #0F172A;
  --sob-texte: #475569;
  --sob-doux: #64748B;
  --sob-trait: #E2E8F0;
  --sob-trait-clair: #F1F5F9;
  --sob-fond: #F8FAFC;
  --sob-nuit: #132238;

  display: block !important;
  min-height: 100dvh;
  background: var(--sob-fond) !important;
  overflow: auto !important;
  color: var(--sob-encre);
}

/* ── Le hero devient une simple barre ────────────────────────────────
   On ne le masque pas : il porte « Retour au site » et la marque, les deux
   seuls repères qui disent où l'on est et comment revenir. On lui retire son
   fond sombre, ses textures et son discours, on garde l'essentiel. */
.ngl-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none !important;
  color: var(--sob-encre) !important;
  padding: 26px clamp(18px, 4vw, 54px) 0 !important;
  overflow: visible !important;
  isolation: auto !important;
}
.ngl-hero::before, .ngl-hero::after { display: none !important; }
.ngl-hero > div { display: contents; }

.ngl-h1, .ngl-p, .ngl-feats, .ngl-badges { display: none !important; }

.ngl-brand { order: 1; gap: 11px; }
.ngl-brand .ngl-mark { height: 26px; }
.ngl-name { color: var(--sob-encre) !important; font-size: 17px !important; }
.ngl-by { color: var(--sob-doux) !important; font-size: 9px !important; }

.ngl-back {
  order: 2;
  background: none !important;
  border: 0 !important;
  color: var(--sob-encre) !important;
  font-size: 10.5px !important;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 !important;
}
.ngl-back:hover { background: none !important; opacity: .62; }

/* ── La colonne du formulaire ────────────────────────────────────────── */
.ngl-formwrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: none !important;
  padding: clamp(26px, 5vh, 58px) clamp(18px, 4vw, 54px) 54px !important;
}

.ngl-card {
  max-width: 560px !important;
  width: 100%;
  background: #fff;
  border: 1px solid var(--sob-trait);
  border-radius: 16px;
  box-shadow: 0 4px 25px -4px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
  padding: clamp(26px, 4vw, 48px);
}

/* La marque interne faisait doublon avec celle de la barre : elle n'etait la
   que parce que le hero disparaissait sur mobile. */
.ngl-mbrand { display: none !important; }

.ngl-title {
  font-family: 'Newsreader', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(34px, 4.6vw, 50px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: var(--sob-encre) !important;
  margin: 0 0 12px !important;
}
.ngl-msub {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--sob-texte) !important;
  margin: 0 0 clamp(26px, 3.6vh, 36px) !important;
}

/* ── Champs soulignés ────────────────────────────────────────────────
   Pas de boîte : un trait sous la ligne de saisie. C'est ce qui distingue le
   plus l'ancien écran du nouveau, et ce qu'on reconnaît d'un produit à
   l'autre. */
.ngl-field { margin-bottom: 26px !important; }
.ngl-flabel {
  font-family: inherit !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--sob-texte) !important;
  margin-bottom: 10px !important;
}
.ngl-link {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sob-encre) !important;
}

.ngl-inwrap {
  border-bottom: 1px solid var(--sob-trait);
  transition: border-color .25s ease;
}
.ngl-inwrap:focus-within { border-bottom-color: var(--sob-encre); }
.ngl-ic { display: none !important; }

.ngl-inp {
  width: 100%;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 11px !important;
  height: auto !important;
  font-size: 15px !important;
  color: var(--sob-encre) !important;
  box-shadow: none !important;
}
.ngl-inp:focus { outline: none !important; box-shadow: none !important; }
.ngl-inp::placeholder { color: #94A3B8; }

.ngl-eye {
  right: 0 !important;
  color: var(--sob-doux) !important;
  padding: 4px 0 11px 10px !important;
}
.ngl-eye:hover { color: var(--sob-encre) !important; }

.ngl-row { margin-bottom: 26px; }
.ngl-check { font-size: 12.5px !important; color: var(--sob-texte) !important; }

/* ── Le bouton ───────────────────────────────────────────────────────── */
.ngl-submit {
  background: var(--sob-nuit) !important;
  border: 1px solid var(--sob-nuit) !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 18px 22px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.ngl-submit:hover { background: #1D3454 !important; border-color: #1D3454 !important; }

.ngl-alt {
  border: 1px solid var(--sob-trait) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--sob-encre) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 20px !important;
  margin-top: 12px !important;
}

.ngl-err {
  border-left: 2px solid #E11D48 !important;
  border-radius: 0 6px 6px 0 !important;
  background: #FFF1F3 !important;
  color: #9F1239 !important;
  font-size: 12.5px !important;
}

/* ── Le pied de carte ───────────────────────────────────────────────── */
.ngl-foot {
  margin-top: clamp(26px, 3.4vh, 34px) !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--sob-trait-clair);
  font-size: 12.5px !important;
  color: var(--sob-texte) !important;
}
.ngl-foot a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sob-encre) !important;
  text-decoration: none;
}
.ngl-foot a:hover { opacity: .62; }

/* ── Application native ──────────────────────────────────────────────
   Elle masquait le hero pour ne pas afficher un argumentaire a quelqu'un qui
   a deja installe l'application. Ici la barre ne contient plus que la marque
   et un retour vers le site : c'est le retour qui n'a pas de sens dans
   l'application, pas la barre. */
html.app-native .ngl-hero { display: flex !important; }
html.app-native .ngl-back { display: none !important; }
html.app-native .ngl { grid-template-columns: none !important; }

@media (max-width: 560px) {
  .ngl-hero { padding: 18px 18px 0 !important; }
  .ngl-card { padding: 24px 20px; border-radius: 14px; }
  .ngl-back span { display: none; }
}