/* ========================================================= MENAGER.CA — ULTRA PRO (LIGHT) — unified premium skin Goal: consistent UI across pages WITHOUT changing PHP/SQL. Usage: add and ========================================================= */ :root{ --bg0:#f6fbff; --bg1:#eef7ff; --card:#ffffff; --card2:#fbfdff; --stroke:#d9e7f3; --stroke2:#c8dced; --txt:#072335; --muted:#4f6f86; --muted2:#6f8ea3; --brand:#0ea5e9; --brand2:#0284c7; --brand3:#22c55e; --warn:#f59e0b; --danger:#ef4444; --shadow:0 18px 50px rgba(2,132,199,.12); --shadow2:0 10px 28px rgba(2,132,199,.10); --radius:18px; --radius2:14px; --pad:14px; --max:1180px; } *{box-sizing:border-box} html,body{height:100%} body.menager-pro{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--txt); background: radial-gradient(900px 520px at 10% -10%, rgba(14,165,233,.16), transparent 60%), radial-gradient(850px 520px at 95% 0%, rgba(2,132,199,.12), transparent 60%), radial-gradient(900px 520px at 55% 120%, rgba(34,197,94,.08), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit} a:hover{opacity:.92} img{max-width:100%;height:auto} .container,.wrap,.inner,.page,.content,.main{ max-width:var(--max); margin:0 auto; } /* Typography */ h1,h2,h3{letter-spacing:-.02em;margin:0 0 10px;color:var(--txt)} h1{font-size:clamp(22px,2.5vw,34px);font-weight:900} h2{font-size:clamp(18px,2.0vw,26px);font-weight:900} p,li{color:var(--muted);line-height:1.65} small{color:var(--muted2)} hr{border:0;border-top:1px solid rgba(7,35,53,.10);margin:16px 0} :focus-visible{outline:3px solid rgba(14,165,233,.35);outline-offset:3px;border-radius:12px} /* Header / nav */ header,.topnav,.navbar,nav{ backdrop-filter: blur(10px); } /* Cards */ .card,.panel,.box,.w3-card,.w3-card-2,.w3-card-4,.w3-panel{ background: linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--stroke); box-shadow: var(--shadow2); border-radius: var(--radius); } .card,.panel,.box,.w3-panel{padding:var(--pad)} section,.section{padding:14px 0} /* Chips / badges */ .badge,.tag,.pill,.chip{ display:inline-flex;align-items:center;gap:6px; padding:6px 10px;border-radius:999px; border:1px solid var(--stroke); background: rgba(14,165,233,.08); color: rgba(7,35,53,.90); font-size:12px;font-weight:800; } .badge.success,.pill.success{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.25)} .badge.warn,.pill.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.30)} .badge.danger,.pill.danger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25)} /* Forms */ form{ background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow2); } label{display:block;margin:10px 0 6px;color:var(--muted);font-weight:650} input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea, .w3-input, .w3-select{ width:100%; box-sizing:border-box; color:var(--txt); background:#fff; border:1px solid var(--stroke); border-radius: 14px; padding:12px 12px; outline:none; } textarea{min-height:110px;resize:vertical} input::placeholder, textarea::placeholder{color:rgba(79,111,134,.70)} input:focus,select:focus,textarea:focus,.w3-input:focus,.w3-select:focus{ border-color: rgba(14,165,233,.70); box-shadow: 0 0 0 4px rgba(14,165,233,.16); } /* Buttons */ button,.btn,.w3-button,input[type="submit"],input[type="button"]{ appearance:none; border:1px solid rgba(2,132,199,.25); background: linear-gradient(180deg, rgba(14,165,233,1), rgba(2,132,199,1)); color:#ffffff; font-weight:900; border-radius: 999px; padding:11px 14px; cursor:pointer; box-shadow: 0 14px 30px rgba(2,132,199,.18); } button:hover,.btn:hover,.w3-button:hover,input[type="submit"]:hover,input[type="button"]:hover{ filter:saturate(1.04); transform:translateY(-1px); } button:active,.btn:active,.w3-button:active,input[type="submit"]:active,input[type="button"]:active{transform:translateY(0px)} button.secondary,.btn.secondary,.w3-button.w3-white{ background:#ffffff; color:var(--txt); border:1px solid var(--stroke2); box-shadow: 0 10px 24px rgba(2,132,199,.10); } button.danger,.btn.danger{ background: linear-gradient(180deg, rgba(239,68,68,1), rgba(220,38,38,1)); border-color: rgba(220,38,38,.35); } /* Tables */ table,.w3-table,.w3-table-all{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius: var(--radius); border:1px solid var(--stroke); background:#fff; } th,td{ padding:12px 10px; border-bottom:1px solid rgba(7,35,53,.08); vertical-align:top; } th{ text-align:left; color:rgba(7,35,53,.92); background: rgba(14,165,233,.08); font-weight:900; } tr:hover td{background: rgba(14,165,233,.05)} /* Pagination */ .pagination,.pager,.w3-pagination{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:12px 0; } .pagination a,.pager a,.w3-pagination a{ text-decoration:none; padding:9px 12px; border-radius:999px; border:1px solid var(--stroke); background:#fff; color:var(--txt); box-shadow: 0 10px 20px rgba(2,132,199,.08); } .pagination a:hover,.pager a:hover,.w3-pagination a:hover{background: rgba(14,165,233,.06)} .pagination a.active,.pager a.active,.w3-pagination a.w3-blue,.w3-pagination a.w3-theme{ background: linear-gradient(180deg, rgba(14,165,233,1), rgba(2,132,199,1)); color:#fff; border-color: rgba(2,132,199,.35); box-shadow: 0 14px 28px rgba(2,132,199,.18); } /* Footer / bottom nav */ footer.footer,.footer{ position:sticky; bottom:0; z-index:50; backdrop-filter: blur(14px); background: rgba(255,255,255,.90); border-top:1px solid var(--stroke); box-shadow: 0 -10px 30px rgba(2,132,199,.10); } .footer a{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 10px; color:rgba(7,35,53,.78); } .footer a:hover{color:rgba(7,35,53,.95)} /* HERO helpers: ensure white text on image heroes if page uses .hero */ .hero h1,.hero .hero-title{color:#fff !important} .hero p,.hero .hero-sub{color:rgba(255,255,255,.92) !important} .hero p b,.hero b{color:#fff !important} /* W3 tweaks */ .w3-round,.w3-round-large,.w3-round-xlarge,.w3-round-xxlarge{border-radius:var(--radius2) !important} .w3-border{border-color:var(--stroke) !important} .w3-white{background:#fff !important} .w3-light-grey,.w3-sand{background:rgba(14,165,233,.06) !important} .w3-blue,.w3-theme,.w3-teal{background:var(--brand2) !important;color:#fff !important} /* Reduce motion */ @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important} button:hover,.btn:hover,.w3-button:hover,input[type="submit"]:hover{transform:none} } /* Mobile polish */ @media (max-width:640px){ form{padding:12px} th,td{padding:10px 8px} } /* ===== MENAGER Header ===== */ .mc-header{ position:sticky; top:0; z-index:999; background:rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom:1px solid rgba(148,163,184,.25); box-shadow:0 10px 26px rgba(15,23,42,.08); } .mc-inner{ max-width:1240px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .mc-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; } .mc-logo .logo-img{border-radius:14px; box-shadow:0 10px 22px rgba(2,136,209,.18); background:#fff} .mc-logo .logo-text{font-weight:900; color:#0f172a; line-height:1.1} .mc-logo .logo-text small{display:block; font-weight:700; opacity:.75; font-size:12px; margin-top:3px} .mc-nav{ display:flex; align-items:center; gap:12px; } .mc-nav a{ text-decoration:none; font-weight:900; color:#0b2230; font-size:13px; padding:10px 10px; border-radius:999px; } .mc-nav a:hover{ background:rgba(2,136,209,.08); } .mc-nav .cta{ background:linear-gradient(45deg,#0288d1,#03a9f4); color:#fff !important; box-shadow:0 12px 24px rgba(2,136,209,.22); } .mc-actions{display:flex; align-items:center; gap:10px;} .mc-actions .call{ text-decoration:none; font-weight:950; font-size:13px; padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(2,136,209,.14); } /* Burger */ .mc-burger{ width:44px;height:44px; border-radius:14px; border:1px solid rgba(2,136,209,.14); background:rgba(255,255,255,.85); cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .mc-burger span{ width:18px; height:2px; background:#0b2230; border-radius:99px; transition:transform .2s ease, opacity .2s ease; } /* Drawer */ .mc-drawer{ max-width:1240px; margin:0 auto; padding:10px 14px 14px; display:flex; flex-direction:column; gap:8px; } .mc-drawer a{ text-decoration:none; font-weight:900; color:#0b2230; padding:12px 12px; border-radius:16px; background:rgba(255,255,255,.75); border:1px solid rgba(2,136,209,.10); } .mc-drawer a:hover{ background:rgba(2,136,209,.08); } .mc-drawer .drawer-cta{ background:#ec4899; color:#fff; box-shadow:0 12px 26px rgba(236,72,153,.25); border:none; } .mc-drawer .drawer-call{ background:linear-gradient(45deg,#0288d1,#03a9f4); color:#fff; border:none; } /* Responsive behavior */ @media (min-width: 980px){ .mc-burger{ display:none; } .mc-drawer{ display:none !important; } } @media (max-width: 979px){ .mc-nav{ display:none; } .mc-actions .call{ display:none; } /* optionnel */ }