/* ═══════════════════════════════════════════════════════════════════════════
   🔧 V4.037 — HABILLAGE « MY HOME IT » DE L'ESPACE CLIENT (demande Alex 29/09)
   RÈGLE : uniquement de l'habillage (couleurs, polices, arrondis, espacements).
   AUCUNE structure, AUCUN élément, AUCUNE fonction modifiés — même architecture au poil près.
   Tout est limité à #tab-espaceclient : le reste d'Alfred ne bouge pas.
   Couleurs et polices = celles du site my-home-it (bleu nuit, or, crème ; Bricolage Grotesque + DM Sans).
   Pour revenir en arrière : retirer la ligne <link …theme-espace-client.css> d'index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'MHI Bricolage'; src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face{ font-family:'MHI DM Sans'; src:url('fonts/dm-sans-latin.woff2') format('woff2'); font-weight:100 1000; font-display:swap; }

/* 1. Palette du site, appliquée par les variables d'Alfred (les styles existants les utilisent déjà) */
#tab-espaceclient{
  --bg:#0A1330; --bg2:#0D1839; --bg3:#121F48; --bg4:#18285A;
  --border:rgba(170,190,255,.14); --border2:rgba(170,190,255,.26);
  --text:#F3F0E8; --text2:#C9CEDE; --text3:#AEB7D3;
  --accent:#D4AF6A; --accent2:#9C7A3C; --accent-bg:rgba(212,175,106,.14); --accent-text:#F0D59C;
  --green:#5FD9A6; --green-bg:rgba(95,217,166,.13); --green-text:#7FE3B9;
  --amber:#F2B84B; --amber-bg:rgba(242,184,75,.14); --amber-text:#F6CD7A;
  --blue-bg:rgba(76,141,255,.14); --blue-text:#8CB4FF;
  --radius:14px; --radius-lg:18px; --radius-xl:22px;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 6px 20px rgba(3,8,26,.35);
  --shadow-glow:0 0 0 1px rgba(212,175,106,.25), 0 6px 22px rgba(212,175,106,.12);
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(76,141,255,.10), transparent 60%),
    radial-gradient(900px 380px at -10% 110%, rgba(212,175,106,.07), transparent 60%),
    #0A1330;
  color:var(--text);
  font-family:'MHI DM Sans','DM Sans','Segoe UI',system-ui,sans-serif;
  border-radius:22px;
  padding:22px 22px 26px;
}

/* 2. Titres : police du site */
#tab-espaceclient .page-title{
  font-family:'MHI Bricolage','Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  font-weight:700; font-size:26px; letter-spacing:-.035em; color:#F3F0E8;
}
#tab-espaceclient .page-sub{ color:#AEB7D3; font-size:13px; }

/* 3. Cartes chiffres (KPIs) : cartes nuit, chiffre en or, arrondis doux */
#tab-espaceclient .stat{
  background:linear-gradient(160deg, #121F48 0%, #0D1839 100%);
  border:1px solid rgba(170,190,255,.14);
  border-radius:18px;
}
#tab-espaceclient .stat-label{ color:#AEB7D3; letter-spacing:.02em; }
#tab-espaceclient .stat-val{ font-family:'MHI Bricolage','Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.03em; }

/* 4. Rubriques : pastilles « pilule », la rubrique ouverte en or */
#tab-espaceclient .ec-subtab{ border-radius:100px; color:#C9CEDE; }
#tab-espaceclient .ec-subtab:hover{ background:rgba(170,190,255,.08); color:#F3F0E8; }
#tab-espaceclient .ec-subtab.active{
  background:linear-gradient(135deg,#F0D59C 0%,#D4AF6A 55%,#9C7A3C 100%);
  color:#1A1405; font-weight:600; box-shadow:0 4px 14px rgba(212,175,106,.25);
}

/* 5. Boutons : bouton principal doré en pilule, comme « Estimer » sur le site */
#tab-espaceclient .btn{ border-radius:100px; }
#tab-espaceclient .btn-accent{
  background:linear-gradient(135deg,#F0D59C 0%,#D4AF6A 55%,#9C7A3C 100%);
  color:#1A1405; border-color:transparent; box-shadow:0 4px 14px rgba(212,175,106,.22);
}
#tab-espaceclient .btn-accent:hover{
  background:linear-gradient(135deg,#F6E2B5 0%,#DDBB7C 55%,#A8864A 100%);
  color:#1A1405; box-shadow:0 6px 18px rgba(212,175,106,.32);
}

/* 6. Cartes de contenu génériques des rubriques */
#tab-espaceclient .chart-card{ border-radius:18px; }

/* 7. Téléphone : un peu moins de marge */
@media (max-width:640px){
  #tab-espaceclient{ border-radius:16px; padding:14px 12px 18px; }
  #tab-espaceclient .page-title{ font-size:22px; }
}