/* ============================================================
   JustBillItt — theme.css
   Feuille commune chargée par TOUTES les pages (après leur <style> inline).
   Rôle : harmoniser l'identité visuelle avec la page d'accueil
   (polices, nav blanche, pied de page encre, boutons pilule, couleurs)
   SANS toucher aux formulaires, aux IDs ni au JavaScript.
   ============================================================ */

:root{
  --green:#12B886; --green-dark:#0EA575; --green-light:#E3F7F0;
  --black:#0B1211; --ink:#0B1211; --ink-soft:#12201E;
  --gold:#C9A227;
  --green-text:#0B5C46; /* vert lisible en PETIT texte sur fond clair (contraste AA ≈ 7:1) */
  --gray-50:#F7F8F8; --gray-100:#F1F3F2; --gray-200:#E3E7E5;
  --gray-400:#8B9490; --gray-600:#4A5654; --gray-800:#1E2624;
  --fdisp:'Bricolage Grotesque',system-ui,sans-serif;
  --ftext:'Inter Tight',system-ui,sans-serif;
  --fmono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- Typographie ---------- */
body{font-family:var(--ftext) !important;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,
.nav-logo span,.page-title,.stat-card .value,.section h2,.client-total,.taux-circle .pct,
.fact-amount,.modal h2,.plan-box .plan-name,.plan-card .price,.pay-amount-row strong,
.mobile-menu-head .title{
  font-family:var(--fdisp) !important;letter-spacing:-.02em;
}
h1,h2{font-weight:800}
h3,h4{font-weight:700}

/* ---------- Barre de navigation (blanche) ---------- */
.nav{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(11,18,17,.10) !important;
  height:64px !important;
}
.nav .nav-logo,.nav .nav-logo span{color:var(--ink) !important;font-weight:800 !important}
.nav .nav-logo{gap:0 !important}
.nav .nav-logo > svg{margin-right:8px}
.nav-logo span{font-family:var(--fdisp) !important;font-weight:800 !important}
.nav-logo span em{color:var(--green) !important}
.nav-right{gap:8px !important}
.nav-link{color:var(--ink) !important;font-size:13.5px !important;font-weight:500 !important;border-radius:9px !important;padding:6px 10px !important;white-space:nowrap}
@media (max-width:1180px){
  .nav-link{font-size:12.5px !important;padding:6px 8px !important}
  .nav-right{gap:6px !important}
  .lang-btn{padding:5px 8px !important}
}
@media (max-width:1180px){
  /* Sur les pages qui ont un menu mobile, on bascule plus tôt vers le burger */
  .nav-right:has(.burger-btn) .nav-link,.nav-right:has(.burger-btn) .btn-logout{display:none !important}
  .nav-right:has(.burger-btn) .burger-btn{display:flex !important}
}
.nav-link:hover{background:rgba(11,18,17,.05) !important;color:var(--ink) !important}
.nav-link.active{color:var(--green-text) !important;background:rgba(18,184,134,.12) !important}
.lang-btn{
  border:1px solid rgba(11,18,17,.2) !important;color:var(--gray-600) !important;
  border-radius:999px !important;font-family:var(--fmono) !important;font-size:11px !important;
  font-weight:500 !important;letter-spacing:0 !important;padding:6px 9px !important;background:none !important;
}
.lang-btn.active{background:var(--green) !important;border-color:var(--green) !important;color:var(--ink) !important}
.lang-btn:hover:not(.active){color:var(--ink) !important;border-color:rgba(11,18,17,.45) !important}
.btn-logout{
  background:transparent !important;border:1px solid rgba(11,18,17,.18) !important;color:var(--ink) !important;
  border-radius:999px !important;font-family:var(--ftext) !important;padding:7px 14px !important;
}
.btn-logout:hover{background:rgba(11,18,17,.05) !important;color:var(--ink) !important}
.nav-cta{
  background:var(--green) !important;color:var(--ink) !important;border-radius:999px !important;
  font-weight:500 !important;padding:9px 18px !important;
}
.nav-cta:hover{background:var(--green-dark) !important;color:var(--ink) !important}
.burger-btn span,.burger span{background:var(--ink) !important}

/* Menu mobile (tiroir) : reste sombre, couleurs de marque */
.mobile-menu{background:var(--ink) !important}
.mobile-menu a:hover,.mobile-menu a.active{background:rgba(18,184,134,.15) !important;color:var(--green) !important}

/* ---------- Boutons ---------- */
.btn-primary,.btn-cta,.wa-cta,.wa-btn,.btn-add,.btn-save{
  background:var(--green) !important;color:var(--ink) !important;border:none !important;
  border-radius:999px !important;font-family:var(--ftext) !important;font-weight:500 !important;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-primary:hover,.btn-cta:hover,.wa-cta:hover,.wa-btn:hover,.btn-add:hover,.btn-save:hover{
  background:var(--green-dark) !important;color:var(--ink) !important;transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(18,184,134,.28) !important;
}
.btn-secondary,.btn-cancel,.btn-upload{
  background:#fff !important;color:var(--ink) !important;border:1px solid rgba(11,18,17,.18) !important;
  border-radius:999px !important;font-family:var(--ftext) !important;font-weight:500 !important;
}
.btn-secondary:hover,.btn-cancel:hover,.btn-upload:hover{background:rgba(11,18,17,.04) !important;border-color:rgba(11,18,17,.32) !important}
.btn-danger{border-radius:999px !important;font-family:var(--ftext) !important;font-weight:500 !important}
.btn-primary:disabled,.btn-cta:disabled,.wa-cta:disabled,.btn-save:disabled{opacity:.55;transform:none;box-shadow:none !important}

/* ---------- Pied de page (encre, comme l'accueil) ---------- */
.site-footer{
  background:var(--ink) !important;color:rgba(247,245,240,.66) !important;
  border-top:none !important;padding:44px 20px 36px !important;margin-top:56px !important;
  font-family:var(--fmono) !important;font-size:12px !important;letter-spacing:.04em;
  text-align:center;
}
.site-footer .footer-links{width:100%;margin-bottom:14px !important}
/* Variante compacte : barre fixée en bas (connexion, inscription, mot de passe) */
.site-footer.slim{padding:10px 16px !important;margin-top:0 !important;gap:4px 10px !important;font-size:11px !important}
.site-footer.slim .footer-links{margin-bottom:2px !important}
.site-footer.slim .footer-links a{font-size:12.5px !important;margin:0 7px !important}
.site-footer .footer-links a{
  color:rgba(247,245,240,.7) !important;font-family:var(--ftext) !important;font-size:14px !important;
  letter-spacing:0;margin:0 11px !important;text-decoration:none;
}
.site-footer .footer-links a:hover{color:var(--green) !important}
.site-footer .footer-mail{color:var(--green) !important;text-decoration:none}
.site-footer .footer-sep{color:rgba(247,245,240,.15) !important}

/* ---------- Bannières cookies / acceptation CGU ---------- */
#cookie-banner,#acceptBar{font-family:var(--ftext) !important;background:var(--ink) !important}
#cookie-banner button,#acceptBar button{border-radius:999px !important;font-family:var(--ftext) !important;font-weight:500 !important}
/* Bouton « Accepter » (vert) : texte encre, pas blanc (contraste blanc/vert insuffisant) */
#cookie-banner button:last-child,#acceptBar button{background:var(--green) !important;color:var(--ink) !important}
#cookie-banner a{color:var(--green) !important}
/* Liens verts en petit texte sur fond clair → vert foncé lisible */
.legal a,.forgot-link,.signup-link a,.plan .btn-out{color:var(--green-text) !important}

/* ---------- Page Sécurité : blocs sans style dans la page d'origine ---------- */
.sec-badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 26px}
.sec-badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);color:#0B5C46;border:1px solid rgba(18,184,134,.35);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500}
.sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0 30px}
.sec-card{background:#fff;border:1px solid rgba(11,18,17,.10);border-radius:16px;padding:22px;box-shadow:0 6px 24px rgba(11,18,17,.05)}
.sec-card .ico{width:44px;height:44px;border-radius:12px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.sec-card h3{font-size:16px;margin:0 0 6px;color:var(--ink)}
.sec-card p{font-size:14px;margin:0;color:var(--gray-600)}
@media (max-width:640px){.sec-grid{grid-template-columns:1fr}}

/* ---------- Petits raffinements ---------- */
::selection{background:rgba(18,184,134,.28)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green-text) !important;outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto !important}
}