/* ==========================================================================
   auth-dark.css — v2.70.0 (2026-09-15)
   Habillage « verre sombre » des pages d'authentification de l'espace client
   (client_login, client_register, client_forgot, client_reset).

   Chargé EN DERNIER, uniquement quand la page pose $authDark = true avant
   client_header.php (body.auth-dark). Seule source de vérité pour ces pages :
   tout ce qui concerne la carte .login-box sur fond sombre vit ici. Les
   sélecteurs sont volontairement précis (html body.client-app.auth-dark …)
   pour passer devant la couche claire « HARMONY » de mobile.css.
   ========================================================================== */

html body.client-app.auth-dark {
  --auth-bg: #0b1310;
  --auth-bg-2: #12201b;
  --auth-accent: #568674;          /* vert 2DA */
  --auth-accent-2: #7fb59d;        /* vert clair : titres, liens, focus */
  --auth-accent-glow: rgba(86, 134, 116, .55);
  --auth-glass: rgba(14, 24, 20, .66);
  --auth-glass-border: rgba(255, 255, 255, .12);
  --auth-text: #f2f7f4;
  --auth-text-2: rgba(236, 244, 240, .68);
  --auth-text-3: rgba(236, 244, 240, .46);
  --auth-field: rgba(255, 255, 255, .06);
  --auth-field-border: rgba(255, 255, 255, .14);
  --auth-field-fill: #17231e;      /* fond opaque pour l'autofill Chrome */
  color-scheme: dark;
}

/* ---------- Fond : nuit verte + rubans lumineux -------------------------- */
html body.client-app.auth-dark {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(60rem 34rem at 8% -10%, rgba(86, 134, 116, .28), transparent 60%),
    radial-gradient(48rem 30rem at 100% 110%, rgba(127, 181, 157, .22), transparent 60%),
    linear-gradient(160deg, var(--auth-bg-2) 0%, var(--auth-bg) 55%, #070c0a 100%) !important;
  color: var(--auth-text) !important;
}
html body.client-app.auth-dark::before,
html body.client-app.auth-dark::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  left: -30vw; right: -30vw;
  height: 22vh;
  transform: rotate(-24deg);
  filter: blur(6px);
  opacity: .9;
}
html body.client-app.auth-dark::before {
  top: 18vh;
  background: linear-gradient(90deg,
    transparent 0%, rgba(127, 181, 157, .06) 22%, rgba(127, 181, 157, .30) 46%,
    rgba(200, 232, 218, .55) 50%, rgba(127, 181, 157, .30) 54%, rgba(127, 181, 157, .06) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
html body.client-app.auth-dark::after {
  top: 62vh;
  height: 14vh;
  background: linear-gradient(90deg,
    transparent 0%, rgba(86, 134, 116, .05) 25%, rgba(86, 134, 116, .32) 50%, rgba(86, 134, 116, .05) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 45%, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 55%, transparent);
}
html body.client-app.auth-dark > * { position: relative; z-index: 1; }

/* ---------- En-tête et pied transparents -------------------------------- */
html body.client-app.auth-dark .client-header {
  position: static;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
html body.client-app.auth-dark .client-brand strong { color: var(--auth-text); }
html body.client-app.auth-dark .client-brand small { color: var(--auth-text-3) !important; }
html body.client-app.auth-dark .client-brand-mark {
  background: linear-gradient(145deg, var(--auth-accent), var(--auth-accent-2)) !important;
  box-shadow: 0 8px 22px var(--auth-accent-glow) !important;
}
html body.client-app.auth-dark .client-header-actions { display: none; }
html body.client-app.auth-dark footer { color: var(--auth-text-3) !important; }
html body.client-app.auth-dark .skip-link { background: var(--auth-field-fill); color: var(--auth-text) !important; }

/* ---------- Mise en page ------------------------------------------------ */
html body.client-app.auth-dark .client-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 76px - 78px);
  padding: 12px 0 28px;
}

/* ---------- La carte en verre ------------------------------------------- */
html body.client-app.auth-dark .login-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto !important;
  padding: 36px 34px 30px !important;
  border: 1px solid var(--auth-glass-border) !important;
  border-radius: 24px !important;
  background: var(--auth-glass) !important;
  color: var(--auth-text) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  animation: auth-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
/* Coins « taillés » discrets, en écho aux angles de la maquette */
html body.client-app.auth-dark .login-box::before,
html body.client-app.auth-dark .login-box::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border: 2px solid rgba(127, 181, 157, .55);
  pointer-events: none;
}
html body.client-app.auth-dark .login-box::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 24px; }
html body.client-app.auth-dark .login-box::after  { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 24px; }

html body.client-app.auth-dark .login-box h1 {
  margin: 0 0 6px !important;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--auth-text) !important;
}
html body.client-app.auth-dark .login-box h1 .accent { color: var(--auth-accent-2); }
html body.client-app.auth-dark .login-box p.sub {
  margin: 0 0 22px !important;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--auth-text-2) !important;
}

/* ---------- Champs ------------------------------------------------------ */
html body.client-app.auth-dark .login-box .field { margin: 0 0 15px; }
html body.client-app.auth-dark .login-box .field label,
html body.client-app.auth-dark .login-box .field > label:not(.client-upload-zone) {
  display: block;
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #cfe0d7 !important;
}
html body.client-app.auth-dark .login-box .in,
html body.client-app.auth-dark .login-box .pass-field { position: relative; }
html body.client-app.auth-dark .login-box .fi {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 0;
  color: var(--auth-text-3);
  pointer-events: none;
  transition: color .18s ease;
}
html body.client-app.auth-dark .login-box .in:focus-within .fi,
html body.client-app.auth-dark .login-box .pass-field:focus-within .fi { color: var(--auth-accent-2); }

html body.client-app.auth-dark .login-box .field input:not([type="checkbox"]):not([type="radio"]),
html body.client-app.auth-dark .login-box .field textarea,
html body.client-app.auth-dark .login-box .field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--auth-field-border) !important;
  border-radius: 13px !important;
  background: var(--auth-field) !important;
  color: var(--auth-text) !important;
  -webkit-text-fill-color: var(--auth-text) !important;
  caret-color: var(--auth-accent-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html body.client-app.auth-dark .login-box .field .pass-field input { padding-right: 46px !important; }
html body.client-app.auth-dark .login-box .field input::placeholder,
html body.client-app.auth-dark .login-box .field textarea::placeholder {
  color: rgba(236, 244, 240, .38) !important;
  -webkit-text-fill-color: rgba(236, 244, 240, .38) !important;
  opacity: 1;
}
html body.client-app.auth-dark .login-box .field input:hover:not(:focus):not([readonly]) { border-color: rgba(255, 255, 255, .24) !important; }
html body.client-app.auth-dark .login-box .field input:focus,
html body.client-app.auth-dark .login-box .field textarea:focus,
html body.client-app.auth-dark .login-box .field select:focus {
  outline: none;
  border-color: var(--auth-accent-2) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 0 0 4px rgba(127, 181, 157, .22) !important;
}
html body.client-app.auth-dark .login-box .field input[readonly] {
  background: rgba(255, 255, 255, .03) !important;
  color: var(--auth-text-2) !important;
  -webkit-text-fill-color: var(--auth-text-2) !important;
  border-style: dashed !important;
  cursor: default;
}
/* Remplissage automatique : Chrome impose son fond clair → masque opaque */
html body.client-app.auth-dark .login-box .field input:-webkit-autofill,
html body.client-app.auth-dark .login-box .field input:-webkit-autofill:hover,
html body.client-app.auth-dark .login-box .field input:-webkit-autofill:focus,
html body.client-app.auth-dark .login-box .field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--auth-text) !important;
  caret-color: var(--auth-accent-2) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field-fill) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-field-fill) inset !important;
  transition: background-color 99999s ease-out 0s;
}
html body.client-app.auth-dark .login-box .field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field-fill) inset, 0 0 0 4px rgba(127, 181, 157, .22) !important;
  box-shadow: 0 0 0 1000px var(--auth-field-fill) inset, 0 0 0 4px rgba(127, 181, 157, .22) !important;
}
html body.client-app.auth-dark .login-box .field input:autofill {
  background-color: var(--auth-field-fill) !important;
  color: var(--auth-text) !important;
}
html body.client-app.auth-dark .login-box .pass-toggle {
  color: var(--auth-text-3) !important;
  right: 8px;
}
html body.client-app.auth-dark .login-box .pass-toggle:hover { color: var(--auth-text) !important; }
html body.client-app.auth-dark .login-box .pass-toggle:focus-visible { outline: 2px solid var(--auth-accent-2); outline-offset: 2px; }

html body.client-app.auth-dark .login-box .hint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--auth-text-3) !important;
}
html body.client-app.auth-dark .login-box .hint.is-ok { color: var(--auth-accent-2) !important; }

/* ---------- Onglets Entreprise / Particulier ---------------------------- */
html body.client-app.auth-dark .login-box .reg-tabs {
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--auth-field-border);
  border-radius: 13px;
  background: var(--auth-field);
}
html body.client-app.auth-dark .login-box .reg-tab {
  border-radius: 10px;
  color: var(--auth-text-2);
  transition: background-color .18s ease, color .18s ease;
}
html body.client-app.auth-dark .login-box .reg-tab:hover { color: var(--auth-text); }
html body.client-app.auth-dark .login-box .reg-tab.is-on {
  background: linear-gradient(135deg, var(--auth-accent), #6b9f88) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--auth-accent-glow);
}
html body.client-app.auth-dark .login-box .reg-tab:focus-visible { outline: 2px solid var(--auth-accent-2); outline-offset: 2px; }

/* ---------- Bouton principal -------------------------------------------- */
html body.client-app.auth-dark .login-box .btn.btn-rouge,
html body.client-app.auth-dark .login-box .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #5f957f 0%, var(--auth-accent) 55%, #46705f 100%) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 12px 28px var(--auth-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
html body.client-app.auth-dark .login-box .btn.btn-rouge::after {
  content: "\2192";           /* flèche → */
  font-weight: 700;
  transition: transform .18s ease;
}
html body.client-app.auth-dark .login-box .btn.btn-rouge:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 16px 34px var(--auth-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
html body.client-app.auth-dark .login-box .btn.btn-rouge:hover::after { transform: translateX(3px); }
html body.client-app.auth-dark .login-box .btn.btn-rouge:active { transform: translateY(0) scale(.99); }
html body.client-app.auth-dark .login-box .btn:focus-visible { outline: 2px solid var(--auth-accent-2); outline-offset: 3px; }

/* ---------- Liens sous le formulaire ------------------------------------ */
html body.client-app.auth-dark .login-box > p {
  margin: 16px 0 0 !important;
  text-align: center;
  font-size: 13.5px;
  color: var(--auth-text-2) !important;
}
html body.client-app.auth-dark .login-box > p + p { margin-top: 8px !important; }
html body.client-app.auth-dark .login-box p a,
html body.client-app.auth-dark .login-box .hint a {
  color: var(--auth-accent-2) !important;
  font-weight: 650;
  text-decoration: none;
  padding: 6px 2px;
}
html body.client-app.auth-dark .login-box p a:hover { color: #a9d6c3 !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Messages ----------------------------------------------------- */
html body.client-app.auth-dark .login-box .flash,
html body.client-app.auth-dark .login-box .alert-success {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
}
html body.client-app.auth-dark .login-box .flash-err {
  background: rgba(134, 86, 86, .22) !important;
  border: 1px solid rgba(220, 150, 150, .35) !important;
  color: #f4c9c9 !important;
}
html body.client-app.auth-dark .login-box .flash-ok,
html body.client-app.auth-dark .login-box .alert-success {
  background: rgba(86, 134, 116, .22) !important;
  border: 1px solid rgba(127, 181, 157, .45) !important;
  border-left-width: 4px !important;
  color: #cfeadd !important;
}
html body.client-app.auth-dark .login-box .flash-info {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--auth-field-border) !important;
  color: var(--auth-text-2) !important;
}
html body.client-app.auth-dark .login-box .flash strong,
html body.client-app.auth-dark .login-box .alert-success strong { color: #fff; }

html body.client-app.auth-dark ::selection { background: rgba(127, 181, 157, .45); color: #fff; }

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width: 760px) {
  html body.client-app.auth-dark .client-main { min-height: calc(100dvh - 64px - 70px); padding: 6px 0 18px; }
  html body.client-app.auth-dark .login-box {
    max-width: 100%;
    margin: 0 !important;
    padding: 28px 20px 24px !important;
    border-radius: 20px !important;
  }
  html body.client-app.auth-dark .login-box::before,
  html body.client-app.auth-dark .login-box::after { width: 26px; height: 26px; }
  html body.client-app.auth-dark .login-box::before { border-top-left-radius: 20px; }
  html body.client-app.auth-dark .login-box::after { border-bottom-right-radius: 20px; }
  html body.client-app.auth-dark .login-box h1 { font-size: 24px; }
  html body.client-app.auth-dark .login-box .field input:not([type="checkbox"]):not([type="radio"]) { font-size: 16px; } /* évite le zoom iOS */
  html body.client-app.auth-dark::before { top: 12vh; height: 28vh; }
}

/* ---------- Animation / accessibilité ----------------------------------- */
@keyframes auth-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body.client-app.auth-dark .login-box { animation: none; }
  html body.client-app.auth-dark .login-box .btn.btn-rouge,
  html body.client-app.auth-dark .login-box .btn.btn-rouge::after,
  html body.client-app.auth-dark .login-box .field input { transition: none; }
}
@media (forced-colors: active) {
  html body.client-app.auth-dark .login-box { border: 1px solid CanvasText !important; }
}