/* ===== Identite Gaby =====
   Les couleurs viennent du logo : marine pour le fond, sarcelle pour
   l'action. Cette feuille habille les pages publiques (connexion,
   inscription, administration) ; l'interieur des boutiques garde la
   couleur choisie par chaque commerce. */
:root{
  --g-marine:#0A2240;
  --g-marine-sombre:#07182D;
  --g-marine-clair:#163C4E;
  --g-sarcelle:#00A0A5;
  --g-sarcelle-vif:#16BCC1;
  --g-craie:#F2F7F8;
  --g-gris:#8FA6AF;
}

/* ---------- Connexion ---------- */
#connexion{
  background:radial-gradient(1000px 520px at 50% -8%, #123255 0%, var(--g-marine) 52%, var(--g-marine-sombre) 100%);
  min-height:100vh;display:grid;place-items:center;padding:24px}
.carte-connexion{
  width:100%;max-width:400px;padding:34px 32px 30px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65);backdrop-filter:blur(6px)}
.carte-connexion::before{
  content:"";display:block;width:62px;height:62px;margin:0 auto 20px;
  border-radius:18px;background:url('/icones/512.png') center/cover no-repeat;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.carte-connexion .marque{
  text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-sarcelle);font-weight:700;margin-bottom:4px}
.carte-connexion h1{
  text-align:center;font-size:23px;font-weight:700;letter-spacing:-.3px;
  color:#fff;margin:0 0 22px}
.carte-connexion label{font-size:12.5px;color:var(--g-gris);font-weight:500}
.carte-connexion input{
  width:100%;margin-top:6px;padding:12px 14px;border-radius:11px;font-size:14.5px;
  color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);transition:border-color .15s,box-shadow .15s}
.carte-connexion input:focus{
  outline:none;border-color:var(--g-sarcelle);
  box-shadow:0 0 0 3px rgba(0,160,165,.22);background:rgba(255,255,255,.07)}
.carte-connexion .champ{margin-bottom:14px}
.carte-connexion .bouton{
  width:100%;margin-top:6px;padding:13px;border:0;border-radius:11px;cursor:pointer;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;color:#04252B;
  background:linear-gradient(180deg,var(--g-sarcelle-vif),var(--g-sarcelle));
  box-shadow:0 10px 24px -12px rgba(0,160,165,.9);transition:filter .15s}
.carte-connexion .bouton:hover{filter:brightness(1.07)}
.carte-connexion .erreur{
  margin-bottom:14px;padding:10px 12px;border-radius:10px;font-size:13px;
  background:rgba(203,74,58,.14);border:1px solid rgba(203,74,58,.35);color:#FFC9C0}

/* ---------- Pages publiques (inscription, admin) ----------
   Ces pages ont leur propre palette verte : on la ramene au sarcelle du
   logo, sans toucher a leur mise en page. */
:root{
  --vert:#00A0A5;
  --vert-f:#007E82;
  --vert-p:#E3F6F7;
}
.logo i{
  background:url('/icones/512.png') center/cover no-repeat !important;
  width:24px;height:24px;border-radius:7px}

/* ---------- Le logo rectangulaire ---------- */
.carte-connexion::before{
  width:168px;height:62px;border-radius:14px;
  background:url('/icones/logo.png') center/contain no-repeat;
  box-shadow:none}
.logo{font-size:0 !important;gap:0 !important}
.logo i{
  width:108px !important;height:34px !important;border-radius:9px !important;
  background:url('/icones/logo.png') center/contain no-repeat !important}

/* ---------- Console d'administration ---------- */
.login .logo{
  width:152px !important;height:48px !important;border-radius:0 !important;
  margin:0 auto 18px !important;
  background:url('/icones/logo.png') center/contain no-repeat !important}
.login h1{text-align:center;font-size:21px;letter-spacing:-.3px}
.login h1 + p, .login .sous{text-align:center}
.login{border-radius:20px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  padding:32px 30px 28px}
.login button{
  background:linear-gradient(180deg,var(--g-sarcelle-vif),var(--g-sarcelle)) !important;
  color:#04252B !important;font-weight:700;border:0;border-radius:11px}
.login input:focus{border-color:var(--g-sarcelle) !important;
  box-shadow:0 0 0 3px rgba(0,160,165,.22) !important}

/* Le fond reprend exactement le marine du logo. */
#connexion{background:
  radial-gradient(760px 420px at 50% -6%, rgba(0,163,168,.20), transparent 62%),
  linear-gradient(180deg,#123255 0%,#0A2240 48%,#07182D 100%) !important}
.carte-connexion::before{
  width:190px !important;height:62px !important;border-radius:0 !important;
  margin:0 auto 22px !important;box-shadow:none !important;
  background:url('/icones/logo.png') center/contain no-repeat !important}

/* ---------- Etats comptables : le resultat en un coup d'oeil ---------- */
.bandeau-resultat{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;border-radius:12px;padding:14px 18px;font-size:15px}
.bandeau-resultat strong{font-size:22px;font-weight:700;letter-spacing:-.01em}
.bandeau-resultat.ok{background:#E2EFED;color:#0F5F56;border:1px solid #BFDDD8}
.bandeau-resultat.ko{background:#FBE9E7;color:#8C2F26;border:1px solid #F0C8C3}