/* ===== Global overrides ===== */
html { scroll-behavior: smooth; }
html, body { overflow-y: auto; }
header.header { position: sticky; top: 0; z-index: 1000; }
.about-area2 { isolation: isolate; }
.whity { color: whitesmoke !important; font-weight: bold !important; text-shadow: 2px 2px 4px #000; }

/* ===== Product Visuals (laptop mockups) ===== */
.pv-wrap{position:relative;padding:10px 15px 20px 0}
.pv-laptop{width:100%;position:relative}
.pv-screen{border-radius:14px 14px 0 0;padding:8px 8px 0;border:2px solid;box-shadow:0 20px 55px rgba(0,0,0,0.13)}
.pv-cam-bar{height:16px;display:flex;align-items:center;justify-content:center;margin-bottom:3px;border-radius:6px 6px 0 0}
.pv-cam{width:6px;height:6px;border-radius:50%}
.pv-inner{border-radius:3px 3px 0 0;overflow:hidden;height:210px}
.pv-mini{display:flex;height:100%}
.pv-side{width:36px;display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:5px}
.pv-slogo{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pv-dot{width:20px;height:16px;border-radius:5px;background:rgba(255,255,255,.06)}
.pv-dot.act{background:rgba(255,255,255,.25)}
.pv-body{flex:1;display:flex;flex-direction:column}
.pv-top{height:28px;background:#fff;display:flex;align-items:center;padding:0 6px;gap:3px;border-bottom:2px solid}
.pv-logtxt{font-size:8px;font-weight:900;margin-right:4px;flex-shrink:0}
.pv-nav{display:flex;gap:1px}
.pv-nb{height:20px;border-radius:5px;padding:0 5px;font-size:7px;font-weight:600;display:flex;align-items:center;white-space:nowrap}
.pv-nb.ghost{color:#6b7280}
.pv-ava{width:18px;height:18px;border-radius:50%;margin-left:auto}
.pv-crumb{height:18px;background:#fff;display:flex;align-items:center;padding:0 8px;gap:4px;border-bottom:1px solid}
.pv-ci{height:5px;border-radius:3px}
.pv-actions{margin-left:auto;width:35px;height:10px;border-radius:4px}
.pv-content{flex:1;padding:6px;display:flex;flex-direction:column;gap:5px}
.pv-table{background:#fff;border-radius:6px;border:1px solid;overflow:hidden;flex:1}
.pv-thead{height:18px;display:flex;align-items:center;padding:0 8px;gap:6px}
.pv-th{height:5px;border-radius:2px;background:rgba(255,255,255,.55)}
.pv-tr{height:16px;display:flex;align-items:center;padding:0 8px;gap:6px;border-bottom:1px solid}
.pv-td{height:5px;border-radius:2px;background:#e5e7eb}
.pv-td.hi{background:var(--pv-hi)}
.pv-td.ok{background:#bbf7d0}
.pv-base{height:10px;border-radius:0 0 5px 5px;border:2px solid;border-top:none}
.pv-stand{width:100px;height:6px;margin:0 auto;border-radius:0 0 6px 6px}
.pv-foot{width:190px;height:4px;margin:0 auto;border-radius:3px}
.pv-float{position:absolute;background:#fff;border-radius:10px;padding:7px 11px;box-shadow:0 6px 24px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.08);z-index:5}
.pv-fi{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px}
.pv-lbl{font-size:9px;color:#9ca3af;font-weight:500}
.pv-val{font-size:12px;font-weight:800;line-height:1.1}

/* Attendance cells */
.pv-att-grid{display:grid;grid-template-columns:40px repeat(7,1fr);gap:3px;padding:6px}
.pv-att-row{display:contents}
.pv-att-cell{height:14px;border-radius:3px;background:#e5e7eb}
.pv-att-cell.p{background:#bbf7d0}
.pv-att-cell.a{background:#fecaca}
.pv-att-cell.h{background:#fef08a}
.pv-att-head{background:var(--pv-main);height:5px;border-radius:2px}
.pv-att-name{background:#d1d5db;height:6px;border-radius:3px;margin-top:4px}

/* POS grid */
.pv-pos-body{flex:1;display:grid;grid-template-columns:1fr 100px;gap:5px;padding:6px}
.pv-pos-prods{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pv-pos-card{background:#fff;border-radius:6px;border:1px solid var(--pv-border);padding:5px}
.pv-pos-img{height:24px;background:var(--pv-light);border-radius:4px;margin-bottom:3px}
.pv-pos-name{height:5px;background:#d1d5db;border-radius:2px;width:70%}
.pv-pos-price{height:6px;background:var(--pv-hi);border-radius:2px;width:50%;margin-top:3px}
.pv-pos-cart{background:#fff;border-radius:6px;border:1px solid var(--pv-border);display:flex;flex-direction:column;overflow:hidden}
.pv-pos-chead{height:18px;background:var(--pv-main)}
.pv-pos-citem{padding:3px 5px;border-bottom:1px solid var(--pv-light);display:flex;gap:4px}
.pv-pos-cname{height:5px;background:#e5e7eb;border-radius:2px;flex:1}
.pv-pos-cprice{height:5px;background:var(--pv-hi);border-radius:2px;width:22px}
.pv-pos-ctotal{margin-top:auto;padding:4px 5px;background:var(--pv-light)}
.pv-pos-btn{margin:4px;height:16px;background:var(--pv-main);border-radius:5px}

/* Browser (WebAgency) */
.pv-browser{flex:1;display:flex;flex-direction:column}
.pv-bbar{height:20px;background:#fff;display:flex;align-items:center;padding:0 6px;gap:4px;border-bottom:1px solid var(--pv-border)}
.pv-bdot{width:7px;height:7px;border-radius:50%}
.pv-burl{flex:1;height:13px;background:var(--pv-light);border-radius:20px;margin:0 6px}
.pv-bhero{height:65px;background:linear-gradient(135deg,var(--pv-main),var(--pv-sec));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.pv-bh-title{height:9px;background:rgba(255,255,255,.9);border-radius:3px;width:120px}
.pv-bh-sub{height:5px;background:rgba(255,255,255,.5);border-radius:2px;width:80px}
.pv-bh-btn{height:14px;background:#fff;border-radius:4px;width:50px}
.pv-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:6px;background:var(--pv-bg)}
.pv-card{background:#fff;border-radius:6px;border:1px solid var(--pv-border);overflow:hidden}
.pv-card-img{height:30px;background:linear-gradient(135deg,var(--pv-light),var(--pv-hi))}
.pv-card-body{padding:5px;display:flex;flex-direction:column;gap:3px}
.pv-card-title{height:5px;background:#1e3a5f;border-radius:2px;width:70%}
.pv-card-txt{height:4px;background:#d1d5db;border-radius:2px}
.pv-card-btn{height:10px;background:var(--pv-main);border-radius:3px;width:50%;margin-top:2px}

/* Color themes via CSS vars */
.pv-erp{--pv-main:#7c3aed;--pv-sec:#6366f1;--pv-hi:#c4b5fd;--pv-light:#ede9fe;--pv-bg:#f8f7ff;--pv-border:#ede9fe;--pv-side:#1e1b4b;--pv-screen:#e8e8f8;--pv-cambar:#d8d0f8;--pv-cam:#b8b0e8;--pv-inner:#f5f5fb;--pv-base:#c4b5fd}
.pv-pos{--pv-main:#16a34a;--pv-sec:#22c55e;--pv-hi:#86efac;--pv-light:#dcfce7;--pv-bg:#f0fdf4;--pv-border:#dcfce7;--pv-side:#14532d;--pv-screen:#d1fae5;--pv-cambar:#a7f3d0;--pv-cam:#6ee7b7;--pv-inner:#f0fdf4;--pv-base:#86efac}
.pv-ptg{--pv-main:#1d4ed8;--pv-sec:#3b82f6;--pv-hi:#93c5fd;--pv-light:#dbeafe;--pv-bg:#eff6ff;--pv-border:#dbeafe;--pv-side:#1e3a5f;--pv-screen:#dbeafe;--pv-cambar:#bfdbfe;--pv-cam:#93c5fd;--pv-inner:#eff6ff;--pv-base:#93c5fd}
.pv-eco{--pv-main:#0d9488;--pv-sec:#14b8a6;--pv-hi:#5eead4;--pv-light:#ccfbf1;--pv-bg:#f0fdfa;--pv-border:#ccfbf1;--pv-side:#134e4a;--pv-screen:#ccfbf1;--pv-cambar:#99f6e4;--pv-cam:#5eead4;--pv-inner:#f0fdfa;--pv-base:#5eead4}
.pv-web{--pv-main:#0284c7;--pv-sec:#0ea5e9;--pv-hi:#7dd3fc;--pv-light:#e0f2fe;--pv-bg:#f0f9ff;--pv-border:#e0f2fe;--pv-side:#0c2d48;--pv-screen:#e0f2fe;--pv-cambar:#bae6fd;--pv-cam:#7dd3fc;--pv-inner:#f0f9ff;--pv-base:#7dd3fc}

.pv-wrap .pv-side{background:var(--pv-side)}
.pv-wrap .pv-slogo{background:linear-gradient(135deg,var(--pv-main),var(--pv-sec))}
.pv-wrap .pv-screen{background:var(--pv-screen);border-color:var(--pv-hi)}
.pv-wrap .pv-cam-bar{background:var(--pv-cambar)}
.pv-wrap .pv-cam{background:var(--pv-cam)}
.pv-wrap .pv-inner{background:var(--pv-inner)}
.pv-wrap .pv-top{border-bottom-color:var(--pv-light)}
.pv-wrap .pv-logtxt{color:var(--pv-side)}
.pv-wrap .pv-nb.act{background:var(--pv-main);color:#fff}
.pv-wrap .pv-ava{background:linear-gradient(135deg,var(--pv-main),var(--pv-sec))}
.pv-wrap .pv-crumb{border-bottom-color:var(--pv-bg)}
.pv-wrap .pv-actions{background:var(--pv-light)}
.pv-wrap .pv-content{background:var(--pv-bg)}
.pv-wrap .pv-table{border-color:var(--pv-border)}
.pv-wrap .pv-thead{background:var(--pv-main)}
.pv-wrap .pv-tr{border-bottom-color:var(--pv-bg)}
.pv-wrap .pv-td.hi{background:var(--pv-hi)}
.pv-wrap .pv-base{background:linear-gradient(to bottom,var(--pv-cambar),var(--pv-hi));border-color:var(--pv-hi)}
.pv-wrap .pv-stand{background:var(--pv-cam)}
.pv-wrap .pv-foot{background:linear-gradient(to right,transparent,var(--pv-hi),transparent)}

/* ---- Couleurs par produit : texte gras, check, bouton ---- */
#detail-aladin-erp .site-title span,
#detail-aladin-erp .site-title-tagline,
#detail-aladin-erp .about-list li i { color:#7c3aed!important }
#detail-aladin-erp .theme-btn { background:#7c3aed; border-color:#7c3aed }
#detail-aladin-erp .theme-btn:hover { background:#6d28d9; border-color:#6d28d9 }

#detail-aladin-pos .site-title span,
#detail-aladin-pos .site-title-tagline,
#detail-aladin-pos .about-list li i { color:#16a34a!important }
#detail-aladin-pos .theme-btn { background:#16a34a; border-color:#16a34a }
#detail-aladin-pos .theme-btn:hover { background:#15803d; border-color:#15803d }

#detail-aladin-pointage .site-title span,
#detail-aladin-pointage .site-title-tagline,
#detail-aladin-pointage .about-list li i { color:#1d4ed8!important }
#detail-aladin-pointage .theme-btn { background:#1d4ed8; border-color:#1d4ed8 }
#detail-aladin-pointage .theme-btn:hover { background:#1e40af; border-color:#1e40af }

#detail-ecopower .site-title span,
#detail-ecopower .site-title-tagline,
#detail-ecopower .about-list li i { color:#0d9488!important }
#detail-ecopower .theme-btn { background:#0d9488; border-color:#0d9488 }
#detail-ecopower .theme-btn:hover { background:#0f766e; border-color:#0f766e }

#detail-webagency .site-title span,
#detail-webagency .site-title-tagline,
#detail-webagency .about-list li i { color:#0284c7!important }
#detail-webagency .theme-btn { background:#0284c7; border-color:#0284c7 }
#detail-webagency .theme-btn:hover { background:#0369a1; border-color:#0369a1 }

/* ---- Grand nom produit ---- */
.prod-header { margin-bottom:1.5rem }
.prod-icon-box { width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:10px; }
.prod-big-name { font-size:2.4rem;font-weight:800;line-height:1.1;margin:0 0 6px;color:#1a1a2e; }
.prod-big-sub { font-size:1.05rem;color:#64748b;margin:0;font-weight:500;line-height:1.4 }
#detail-aladin-erp .prod-icon-box { background:linear-gradient(135deg,#7c3aed,#6366f1) }
#detail-aladin-erp .prod-big-name span { color:#7c3aed }
#detail-aladin-pos .prod-icon-box { background:linear-gradient(135deg,#16a34a,#22c55e) }
#detail-aladin-pos .prod-big-name span { color:#16a34a }
#detail-aladin-pointage .prod-icon-box { background:linear-gradient(135deg,#1d4ed8,#3b82f6) }
#detail-aladin-pointage .prod-big-name span { color:#1d4ed8 }
#detail-ecopower .prod-icon-box { background:linear-gradient(135deg,#0d9488,#14b8a6) }
#detail-ecopower .prod-big-name span { color:#0d9488 }
#detail-webagency .prod-icon-box { background:linear-gradient(135deg,#0284c7,#0ea5e9) }
#detail-webagency .prod-big-name span { color:#0284c7 }

/* ---- Smartphone mockup ---- */
.ph-outer { display:flex;justify-content:center;padding:30px 0 10px }
.ph-device { width:210px;background:#0d1117;border-radius:38px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 2px #1e293b; }
.ph-pill { width:60px;height:5px;background:#1a202c;border-radius:10px;margin:0 auto 8px }
.ph-content { background:#0d1117;border-radius:28px;overflow:hidden }
.ph-app-bar { background:#111827;padding:10px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1e293b }
.ph-app-back { width:24px;height:24px;background:#1e293b;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#22c55e;font-size:10px;flex-shrink:0 }
.ph-app-title { flex:1;text-align:center;color:#f8fafc;font-size:11px;font-weight:700 }
.ph-app-btn { background:#22c55e;border-radius:8px;padding:4px 9px;color:#fff;font-size:8px;font-weight:700;white-space:nowrap }
.ph-sub-bar { background:#111827;padding:2px 12px 8px;border-bottom:1px solid #1e293b }
.ph-list { padding:8px;display:flex;flex-direction:column;gap:6px;background:#0d1117 }
.ph-card { background:#1e293b;border-radius:10px;padding:10px 12px;display:flex;align-items:flex-start;justify-content:space-between }
.ph-cname { color:#f1f5f9;font-size:9.5px;font-weight:700;margin-bottom:2px }
.ph-caddr { color:#64748b;font-size:7.5px;line-height:1.5 }
.ph-cgps { color:#22c55e;font-size:7.5px;margin-top:3px }
.ph-cwarn { color:#f59e0b;font-size:7.5px;margin-top:3px }
.ph-edit { width:26px;height:26px;background:#0f172a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fbbf24;font-size:11px;flex-shrink:0;margin-left:8px }

/* ---- iPhone-style frames ---- */
.iph-wrap { display:flex;justify-content:center;align-items:flex-end;padding:50px 10px 20px;position:relative }
.iph-l { transform:rotate(-9deg) translateY(30px);transform-origin:bottom center;z-index:1;margin-right:-32px }
.iph-c { z-index:3 }
.iph-r { transform:rotate(9deg) translateY(30px);transform-origin:bottom center;z-index:2;margin-left:-32px }
.iph { position:relative;background:linear-gradient(160deg,#e8e8e8,#d0d0d0);border-radius:46px;padding:11px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 0 0 1.5px #aaa,0 28px 60px rgba(0,0,0,.38),0 8px 20px rgba(0,0,0,.18); }
.iph::before { content:'';position:absolute;left:-3.5px;top:88px;width:3.5px;height:26px;background:#b0b0b0;border-radius:3px 0 0 3px;box-shadow:0 38px 0 #b0b0b0; }
.iph::after { content:'';position:absolute;right:-3.5px;top:118px;width:3.5px;height:50px;background:#b0b0b0;border-radius:0 3px 3px 0; }
.iph-inner { background:#0d1117;border-radius:36px;overflow:hidden;width:130px }
.iph-island-bar { height:24px;background:#0d1117;display:flex;align-items:center;justify-content:center }
.iph-island { width:68px;height:16px;background:#000;border-radius:0 0 10px 10px }
.iph-status { display:flex;justify-content:space-between;align-items:center;padding:2px 14px 3px;font-size:7px;font-weight:700;color:rgba(255,255,255,.88) }
.iph-home { width:55px;height:3.5px;background:rgba(255,255,255,.22);border-radius:10px;margin:5px auto 5px }