/* ═══════════════════════════════════════════════════════════════
   Carré — identité visuelle « marbre bleu » (v71)
   Chargé EN DERNIER dans chaque page : il complète les variables de couleur
   (déjà changées dans chaque page) avec le marbre, les carrés du logo et la typographie.
   Les thèmes par magasin (carre-theme.js) continuent de remplacer --gold, --dark, etc.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --marbre: url('carre-marbre.jpg');
  --font-titre: 'Inter', sans-serif;
}
body { font-weight: 400; }
h1, h2, h3, .card-title, .topbar-title, .panel-title, .dash-greeting, .resultats-titre { font-weight: 700; letter-spacing: -0.02em; }

/* ── Logo : deux carrés (marbre + béton) devant le mot « carré » ── */
.sidebar-brand-name::before, .brand-name::before {
  content: ''; display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.35em; vertical-align: -0.3em;
  background: url('carre-logo.png') center / contain no-repeat;
}
.wrapper .brand-name::before { display: block; width: 4rem; height: 4rem; margin: 0 auto 10px; }
.sidebar-brand-name, .brand-name { font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.16em !important; }
.sidebar-brand-name { font-size: 1.35rem !important; }

/* ── Menu latéral (patron et super admin) ── */
.sidebar {
  background: linear-gradient(180deg, rgba(7,42,75,0.55), rgba(7,42,75,0.9)), var(--marbre) left top / cover !important;
}
.sidebar-brand, .sidebar-footer { border-color: rgba(255,255,255,0.22) !important; }
.sidebar-brand-sub { color: rgba(255,255,255,0.72) !important; }
.nav-label { color: rgba(255,255,255,0.6) !important; }
.nav-item { color: rgba(255,255,255,0.86) !important; font-weight: 500 !important; }
.nav-item:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; }
.nav-item.active { background: rgba(255,255,255,0.96) !important; color: var(--dark) !important; font-weight: 800 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.nav-item.active .nav-icon { color: var(--dark) !important; }
.user-avatar { background: rgba(255,255,255,0.2) !important; border: 1.5px solid rgba(255,255,255,0.5); color: #fff !important; }
.user-name { color: #fff !important; }
.user-role { color: rgba(255,255,255,0.72) !important; }

/* ── Tableau de bord patron ── */
.ca-hero {
  background: linear-gradient(100deg, rgba(7,42,75,0.78), rgba(7,42,75,0.15) 70%), var(--marbre) center / cover !important;
  box-shadow: 0 18px 40px rgba(7,42,75,0.35); min-height: 190px;
}
.ca-hero::before { display: none !important; }
.ca-hero-label { color: #fff !important; font-weight: 700; opacity: 0.92; }
.ca-hero-amount { font-weight: 800 !important; letter-spacing: -0.04em; text-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.ca-hero-action { background: #fff !important; color: var(--dark) !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.kpi-card::after { height: 7px !important; background: var(--marbre) center / cover !important; opacity: 1 !important; }
.kpi-card, .panel { box-shadow: 0 4px 18px rgba(7,42,75,0.08); }
.devis-table th {
  color: #fff !important; font-weight: 700 !important;
  background: linear-gradient(90deg, rgba(7,42,75,0.9), rgba(7,42,75,0.78)), var(--marbre) center / cover !important;
}
.tile-rank, .rank { color: var(--gold) !important; font-weight: 800; }

/* ── Accueil vendeur ── */
.dash-header {
  background: linear-gradient(180deg, rgba(7,42,75,0.30), rgba(7,42,75,0.68)), var(--marbre) center / cover;
  color: #fff; padding: 22px 22px 24px; border-radius: 22px; margin-bottom: 18px !important;
  box-shadow: 0 12px 28px rgba(7,42,75,0.3);
}
.dash-greeting { color: #fff !important; font-weight: 800 !important; }
.dash-date { color: rgba(255,255,255,0.82) !important; }
.btn-new-client { background: #fff !important; color: var(--dark) !important; font-weight: 800 !important; box-shadow: 0 16px 34px rgba(7,42,75,0.3); }
.btn-new-client svg { color: var(--gold) !important; }
.resultats {
  background: linear-gradient(180deg, rgba(7,42,75,0.30), rgba(7,42,75,0.68)), var(--marbre) center / cover !important;
  border: none !important; color: #fff; box-shadow: 0 12px 28px rgba(7,42,75,0.3);
}
.resultats-titre, .resultats-chiffres strong, .resultats-phrase { color: #fff !important; }
.resultats-chiffres strong { font-weight: 800 !important; }
.resultats-chiffres span { color: rgba(255,255,255,0.82) !important; }
.resultats-lien { color: #fff !important; font-weight: 700; }
.resultats-select { background: rgba(255,255,255,0.18) !important; color: #fff !important; border-color: rgba(255,255,255,0.45) !important; }
.resultats-select option { color: #0E1B26; }
.metric-count { font-weight: 800 !important; color: var(--dark) !important; letter-spacing: -0.03em; }
.metric-row:hover { background: #F1F4F6; }
.dash-brand { color: #AEB6BC !important; font-weight: 800; letter-spacing: 0.2em; }

/* ── Connexion ── */
.wrapper ~ .page-footer { color: rgba(255,255,255,0.7) !important; }
body:has(.wrapper .card-top-bar) {
  background: linear-gradient(180deg, rgba(7,42,75,0.2), rgba(7,42,75,0.72)), var(--marbre) center / cover fixed !important;
}
body:has(.wrapper .card-top-bar)::before { display: none; }
.wrapper .brand-name { color: #fff !important; font-size: 2.2rem !important; }
.wrapper .brand-tagline { color: rgba(255,255,255,0.85) !important; }
.wrapper .card {
  --card: #fff; --text: #0E1B26; --muted: #66727B; --border: #D7DAD8;
  background: rgba(255,255,255,0.97) !important; border: none !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0,10,30,0.45) !important;
}
.wrapper .card input[type="text"], .wrapper .card input[type="email"], .wrapper .card input[type="password"] { background: #fff !important; color: #0E1B26 !important; font-weight: 400; }
.wrapper .card input::placeholder { color: #9AA3A9; }
.wrapper .card .card-top-bar { display: none; }
.wrapper .card .btn-primary {
  background: linear-gradient(180deg, rgba(7,42,75,0.55), rgba(7,42,75,0.8)), var(--marbre) center / cover !important;
  color: #fff !important; font-weight: 700 !important; box-shadow: 0 10px 22px rgba(7,42,75,0.4);
}
.wrapper .card .btn-secondary { color: var(--gold-dim) !important; border-color: var(--gold-dim) !important; font-weight: 700; }
.wrapper .card .footer-note { color: #7A8389 !important; }
.wrapper .card .forgot { color: var(--gold-dim) !important; font-weight: 700; }

/* ── Boutons principaux génériques (fond --dark ou --gold avec texte noir) ── */
.btn-primary, .btn-save, .btn-confirm, .btn-add, .btn-invite, .btn-send, .btn-submit, .btn-upgrade, .btn-add-magasin, .btn-add-gabarit {
  font-weight: 700;
}
[class*="btn"][style*="color:#0A0A0A"], .btn-primary { text-shadow: none; }

/* ── Corrections de lisibilité sur marbre ── */
.page-footer { color: rgba(255,255,255,0.75) !important; }
.checkbox-wrap, .checkbox-wrap span { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.forgot { white-space: nowrap; }
.sidebar a[href*="login"], .sidebar .btn-logout, .sidebar [id*="logout"], .sidebar [onclick*="deconnexion" i], .sidebar [onclick*="logout" i] { color: rgba(255,255,255,0.8) !important; }
.dash-header a, .dash-header button, .dash-header [onclick*="onnexion"], .dash-header [id*="logout"] { color: rgba(255,255,255,0.88) !important; }

/* ── Magasin avec thème personnalisé (ex. rouge et anthracite) : pas de marbre bleu ── */
html[data-theme]:not([data-theme="carre"]) .sidebar,
html[data-theme]:not([data-theme="carre"]) .ca-hero,
html[data-theme]:not([data-theme="carre"]) .dash-header,
html[data-theme]:not([data-theme="carre"]) .resultats,
html[data-theme]:not([data-theme="carre"]) .devis-table th { background: var(--dark) !important; }
html[data-theme]:not([data-theme="carre"]) .kpi-card::after { background: var(--gold) !important; height: 2px !important; }
html[data-theme]:not([data-theme="carre"]) .sidebar-brand-name::before { display: none; }
.private-banner { background: var(--dark) !important; }

/* ═══════════════════════════════════════════════════════════════
   v71b — Espace de travail aéré (clair) / pages vitrine spectaculaires
   ═══════════════════════════════════════════════════════════════ */

/* ── Menu latéral CLAIR : seul le bloc du logo est en marbre ── */
.sidebar { background: #FFFFFF !important; border-right: 1px solid #E3E6E8; box-shadow: 4px 0 30px rgba(7,42,75,0.05); }
.sidebar-brand {
  margin: 0 14px 18px; padding: 20px 18px 16px !important; border: none !important; border-radius: 16px;
  background: linear-gradient(135deg, rgba(7,42,75,0.62), rgba(7,42,75,0.9)), var(--marbre) center / cover;
  box-shadow: 0 10px 24px rgba(7,42,75,0.25);
}
.sidebar-brand-name { color: #fff !important; }
.sidebar-brand-sub { color: rgba(255,255,255,0.78) !important; }
.nav-label { color: #9AA3A9 !important; }
.nav-item { color: #3B434A !important; font-weight: 500 !important; border-radius: 10px; transition: background .18s, color .18s, transform .18s; }
.nav-item:hover { background: #F0F4F7 !important; color: #072A4B !important; transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(7,42,75,0.78), rgba(19,70,122,0.9)), var(--marbre) center / cover !important;
  color: #fff !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(7,42,75,0.28);
}
.nav-item.active .nav-icon { color: #fff !important; }
.sidebar-footer { border-top: 1px solid #E3E6E8 !important; }
.user-avatar { background: #E2ECF3 !important; border: none !important; color: #072A4B !important; font-weight: 700; }
.user-name { color: #1F2326 !important; font-weight: 600; }
.user-role { color: #7A858C !important; }
.sidebar [class*="logout"], .sidebar a[href*="login"] { color: #66727B !important; }

/* ── Zone de travail qui respire ── */
.content { padding: 36px 44px 60px !important; }
.topbar { background: #fff; border-bottom: none !important; box-shadow: 0 1px 0 #E3E6E8, 0 3px 0 -1px transparent; position: sticky; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marbre) center / cover; opacity: .9; }
.kpi-card, .panel { border-radius: 18px !important; border: 1px solid #E8EBED !important; box-shadow: 0 6px 26px rgba(7,42,75,0.06) !important; transition: transform .2s, box-shadow .2s; }
.kpi-card:hover, .panel:hover { box-shadow: 0 12px 34px rgba(7,42,75,0.1) !important; }
.kpi-card:hover { transform: translateY(-2px); }
.kpi-card { padding: 26px 28px !important; }
.kpi-card::after { height: 4px !important; }
.panel-header { padding: 22px 28px !important; }
.devis-table th {
  background: #F4F6F7 !important; color: #5A646B !important; font-weight: 700 !important;
  border-bottom: 2px solid transparent; border-image: var(--marbre) 1; border-image-slice: 1;
}
.devis-table td { padding-top: 18px; padding-bottom: 18px; }
.ca-hero { padding: 40px 44px !important; border-radius: 22px !important; }
.ca-hero-amount { font-size: clamp(2.6rem, 6vw, 4.2rem) !important; }
.tile-rank { background: none; }

/* ── Accueil patron : cartes d'entrée avec filet marbre au survol ── */
.menu-card, .accueil-card, a[class*="card"] { transition: transform .22s, box-shadow .22s; }
.menu-card:hover, .accueil-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(7,42,75,0.14); }

/* ── Accueil vendeur : en-tête marbre conservé, résultats en blanc aéré ── */
.resultats {
  background: #fff !important; color: var(--text) !important; border: 1px solid #E8EBED !important; position: relative; overflow: hidden;
  box-shadow: 0 6px 26px rgba(7,42,75,0.07) !important;
}
.resultats::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--marbre) center / cover; }
.resultats-titre, .resultats-chiffres strong, .resultats-phrase { color: #1F2326 !important; }
.resultats-chiffres span { color: #66727B !important; }
.resultats-lien { color: #13467A !important; }
.resultats-select { background: #F4F6F7 !important; color: #1F2326 !important; border-color: #D7DAD8 !important; }
.metrics-list { box-shadow: 0 6px 26px rgba(7,42,75,0.06); border-color: #E8EBED !important; }
.metric-row { padding: 22px 28px !important; }

/* ── Pages « vitrine » : connexion, devis client, aperçus ── */
@keyframes marbreRespire { 0% { background-size: 112% auto; background-position: 0% 0%; } 100% { background-size: 125% auto; background-position: 100% 100%; } }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
body:has(.wrapper .card-top-bar) { background-size: cover !important; background-attachment: fixed !important; }
.wrapper .brand { animation: monte .8s .1s both; }
.wrapper .card { animation: monte .9s .3s both; backdrop-filter: blur(6px); }
.wrapper .brand-name::before { width: 5rem !important; height: 5rem !important; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.wrapper .brand-name { font-size: 2.8rem !important; text-shadow: 0 6px 28px rgba(0,0,0,.4); }

.devis-header, .overview-panel {
  background: linear-gradient(135deg, rgba(7,42,75,0.7), rgba(7,42,75,0.92)), var(--marbre) center / cover !important;
  box-shadow: 0 18px 44px rgba(7,42,75,0.32);
}
.overview-btn { background: #fff !important; color: #072A4B !important; font-weight: 800 !important; }
.overview-panel, .devis-header { animation: monte .7s both; }

@media (max-width: 760px) {
  .content { padding: 22px 16px 40px !important; }
  .ca-hero { padding: 28px 24px !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Thème personnalisé (ex. rouge et anthracite) : même structure claire, sans marbre */
html[data-theme]:not([data-theme="carre"]) .sidebar { background: #fff !important; }
html[data-theme]:not([data-theme="carre"]) .sidebar-brand,
html[data-theme]:not([data-theme="carre"]) .nav-item.active { background: var(--dark) !important; }
html[data-theme]:not([data-theme="carre"]) .topbar::after,
html[data-theme]:not([data-theme="carre"]) .resultats::before { background: var(--gold) !important; }
html[data-theme]:not([data-theme="carre"]) .devis-table th { background: #F4F6F7 !important; }
html[data-theme]:not([data-theme="carre"]) .devis-header,
html[data-theme]:not([data-theme="carre"]) .overview-panel { background: var(--dark) !important; }

/* Lisibilité sur marbre (devis) */
.devis-header .total-label, .devis-header .devis-ref-sub, .devis-header [class*="label"], .overview-sub { color: rgba(255,255,255,0.82) !important; }
.devis-header [class*="total"][class*="amount"], .devis-header [class*="total-val"], .devis-header .total-amount { color: #fff !important; font-weight: 800 !important; }
.overview-thumb { border-color: rgba(255,255,255,0.5) !important; }
.devis-header .total-value { color: #fff !important; font-weight: 800 !important; }
.devis-header .total-tva-note { color: rgba(255,255,255,0.78) !important; }

/* ── Adaptation tous écrans : rien ne dépasse, l'espace est utilisé ── */
html, body { max-width: 100%; }
.main { min-width: 0; max-width: 100%; }
.content, .panel, .kpi-card, .ca-hero { min-width: 0; }
@media (max-width: 760px) {
  .topbar { height: auto !important; min-height: 60px; padding: 10px 16px !important; flex-wrap: wrap; gap: 6px; }
  .topbar-right { flex-wrap: wrap; gap: 4px 12px !important; }
  .topbar-date { display: none; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .bottom-grid { grid-template-columns: 1fr !important; }
  .panel { overflow-x: auto; }
}

/* ═══ Tablette / ordinateur : le logiciel occupe la place disponible ═══ */

/* Menu patron et super admin : visible dès la tablette portrait (≥ 701 px) */
@media (min-width: 701px) and (max-width: 1100px) {
  :root { --sidebar-w: 212px; }
  .sidebar { transform: none !important; width: 212px !important; }
  .main { margin-left: 212px !important; }
  .content { padding: 28px 28px 48px !important; }
  .nav-item { font-size: .8rem; padding: 10px 10px; }
  .sidebar-brand { margin: 0 10px 14px; padding: 16px 14px 14px !important; }
  .sidebar-brand-name { font-size: 1.15rem !important; }
}
/* Très grands écrans : contenu centré et plafonné pour rester lisible */
@media (min-width: 1500px) {
  .content { max-width: 1560px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Accueil vendeur : s'élargit sur tablette et ordinateur */
@media (min-width: 768px) {
  #screen-dashboard { max-width: 920px !important; padding: 28px 0; }
  .dash-header { padding: 28px 32px !important; }
  .dash-greeting { font-size: 2.4rem !important; }
  .btn-new-client { padding: 26px !important; font-size: 1.1rem !important; }
  .metrics-list:not(#notifications-list) { display: grid; grid-template-columns: 1fr 1fr; }
  .metrics-list:not(#notifications-list) .metric-row { border-right: 1px solid var(--border); }
  .metrics-list:not(#notifications-list) .metric-row:nth-child(2n) { border-right: none; }
  .resultats { padding: 28px 34px !important; }
  .resultats-chiffres { gap: 40px !important; }
  #screen-list { max-width: 820px !important; }
}
@media (min-width: 1200px) {
  #screen-dashboard { max-width: 1040px !important; }
  #screen-catalogue { max-width: 1240px !important; }
  #screen-catalogue .tiles-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
}

/* v71d — lisibilité titres sur marbre (devis vendeur) */
.devis-header .devis-ref, .devis-header .header-top-row > div:first-child > div:first-child,
.overview-panel .overview-title, .overview-panel [class*="title"], .overview-panel [class*="name"] { color:#fff !important; }
.private-banner { background:#0E1B26 !important; color:#CFE3EC !important; }
.private-banner .preview-link, .private-banner a, .private-banner svg { color:#9FD0DE !important; }