/* =====================================================================
   VIGIE — feuille de style commune
   Deilex Audit & Conseils

   Un seul fichier pour toute l'identité : les couleurs, les boutons, les
   champs, les messages. Un composant se corrige ICI et partout à la fois.
   Ne recopiez pas un bouton dans un écran : utilisez la classe.

   Couleurs de la marque : le noir #000000 et le vert #88c73b.
   ===================================================================== */

:root {
  /* --- la marque */
  --noir: #000000;
  --vert: #88c73b;
  --vert-clair: #a5db60;
  --vert-sombre: #6ba32c;
  --vert-voile: rgba(136, 199, 59, 0.12);

  /* --- surfaces sombres (écran de connexion, futurs écrans sombres) */
  --nuit: #0a0c08;
  --nuit-carte: rgba(255, 255, 255, 0.04);
  --nuit-bord: rgba(255, 255, 255, 0.10);
  --nuit-bord-vif: rgba(136, 199, 59, 0.55);
  --nuit-texte: #f4f6f1;
  --nuit-texte-2: rgba(244, 246, 241, 0.62);
  --nuit-texte-3: rgba(244, 246, 241, 0.38);

  /* --- surfaces claires (le logiciel au quotidien : tableaux denses) */
  --fond: #f6f7f3;
  --carte: #ffffff;
  --bord: #e2e5db;
  --texte: #14170f;
  --texte-2: #5f6656;
  --texte-3: #8f9686;

  /* --- couleurs de sens */
  --succes: #4a7c1f;
  --succes-fond: #eef7e0;
  --alerte: #a32d2d;
  --alerte-fond: #fcebeb;
  --info: #2f5d8a;
  --info-fond: #e9f1f8;

  --rayon: 10px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgba(20, 23, 15, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   L'ARRIÈRE-PLAN VIVANT
   Trois halos verts qui dérivent lentement sur le noir. Lent et discret :
   un logiciel de travail ne doit pas fatiguer l'œil. Respecte le réglage
   « réduire les animations » du système.
   ===================================================================== */

.scene {
  position: fixed;
  inset: 0;
  background: var(--noir);
  overflow: hidden;
  z-index: -1;
}

.scene::before,
.scene::after,
.scene > .halo {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.scene::before {
  width: 62vw; height: 62vw;
  left: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(136, 199, 59, 0.34), transparent 68%);
  animation: derive-a 26s ease-in-out infinite alternate;
}

.scene::after {
  width: 54vw; height: 54vw;
  right: -12vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(136, 199, 59, 0.26), transparent 70%);
  animation: derive-b 34s ease-in-out infinite alternate;
}

.scene > .halo {
  width: 40vw; height: 40vw;
  left: 42%; top: 44%;
  background: radial-gradient(circle, rgba(107, 163, 44, 0.22), transparent 72%);
  animation: derive-c 44s ease-in-out infinite alternate;
}

@keyframes derive-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, 10vh, 0) scale(1.18); }
}
@keyframes derive-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-14vw, -12vh, 0) scale(0.92); }
}
@keyframes derive-c {
  from { transform: translate3d(-6vw, 4vh, 0) scale(0.9); }
  to   { transform: translate3d(8vw, -8vh, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .scene::before, .scene::after, .scene > .halo { animation: none; }
}

/* =====================================================================
   LES COMPOSANTS COMMUNS
   ===================================================================== */

/* --- boutons -------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--rayon-pilule);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, opacity .15s;
}
.bouton:disabled { opacity: .5; cursor: default; }

.bouton-principal { background: var(--vert); color: var(--noir); }
.bouton-principal:hover:not(:disabled) { background: var(--vert-clair); }

.bouton-contour {
  background: transparent;
  color: var(--nuit-texte);
  border-color: var(--nuit-bord);
}
.bouton-contour:hover:not(:disabled) {
  border-color: var(--nuit-bord-vif);
  background: var(--vert-voile);
}

.bouton-large { width: 100%; }

.bouton-discret {
  background: transparent;
  border: none;
  color: var(--nuit-texte-2);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: var(--rayon);
}
.bouton-discret:hover { color: var(--nuit-texte); background: rgba(255,255,255,.06); }

/* Les mêmes boutons sur fond clair (le logiciel au quotidien) */
.clair .bouton-contour { color: var(--texte); border-color: var(--bord); }
.clair .bouton-contour:hover:not(:disabled) {
  border-color: var(--vert-sombre); background: var(--vert-voile);
}
.clair .bouton-discret { color: var(--texte-2); }
.clair .bouton-discret:hover { color: var(--texte); background: var(--fond); }

/* --- champs --------------------------------------------------------- */

.champ {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  padding: 14px 18px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--nuit-bord);
  background: var(--nuit-carte);
  color: var(--nuit-texte);
  transition: border-color .15s, background .15s;
}
.champ::placeholder { color: var(--nuit-texte-3); }
.champ:hover { border-color: rgba(255, 255, 255, 0.18); }
.champ:focus {
  outline: none;
  border-color: var(--nuit-bord-vif);
  background: rgba(136, 199, 59, 0.07);
}
.champ:disabled { opacity: .55; }

.champ-code {
  text-align: center;
  letter-spacing: .55em;
  font-size: 19px;
  font-weight: 600;
  padding-left: 18px;
}

.clair .champ {
  border-color: var(--bord); background: var(--carte); color: var(--texte);
  border-radius: var(--rayon);
}
.clair .champ::placeholder { color: var(--texte-3); }
.clair .champ:focus { border-color: var(--vert-sombre); background: var(--carte); }

/* --- séparateur « ou » ---------------------------------------------- */

.separateur {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--nuit-texte-3);
  font-size: 13px;
}
.separateur::before, .separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nuit-bord);
}

/* --- messages passagers (toasts) ------------------------------------ */

.toasts {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 12px 18px;
  border-radius: var(--rayon-pilule);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nuit-texte);
  background: rgba(14, 16, 11, 0.92);
  border: 1px solid var(--nuit-bord);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: toast-entre .25s ease-out;
  pointer-events: auto;
}
.toast::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vert);
  flex-shrink: 0;
}
.toast-erreur { border-color: rgba(220, 90, 90, 0.5); }
.toast-erreur::before { background: #dc5a5a; }
.toast-sortant { animation: toast-sort .25s ease-in forwards; }

@keyframes toast-entre {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-sort {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* --- choix de la langue --------------------------------------------- */

.langue {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 50;
}
.langue-choix {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(14, 16, 11, 0.94);
  border: 1px solid var(--nuit-bord);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  display: none;
}
.langue.ouverte .langue-choix { display: block; }
.langue-choix a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--nuit-texte-2);
  text-decoration: none;
  font-size: 13.5px;
}
.langue-choix a:hover { background: rgba(255,255,255,.06); color: var(--nuit-texte); }
.langue-choix a[aria-current="true"] { color: var(--vert); }

.chevron { transition: transform .18s; }
.langue.ouverte .chevron { transform: rotate(180deg); }

/* --- liens ---------------------------------------------------------- */

.lien { color: var(--vert); text-decoration: none; }
.lien:hover { text-decoration: underline; }
.lien-sobre { color: inherit; text-decoration: underline; text-underline-offset: 2px; }