/* POPS Enterprise — Squelette commun (fidèle à l'index) Contient: Header + Modal Menu + Footer + Thème clair/sombre via */ /* ========================= Variables ========================= */ :root{ --bg:#0f1117; --panel:#151923; --card:#1b2030; --text:#e8eaf0; --muted:#aab0c0; --accent:#4da3ff; --accent2:#2b6cb0; --border:#2a3042; --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow2: 0 14px 40px rgba(0,0,0,.42); --maxw: 1100px; --r: 16px; } html[data-theme="light"]{ --bg:#f4f6fb; --panel:#eef2f8; --card:#ffffff; --text:#0f1624; --muted:#425066; --accent:#1d6cff; --accent2:#0ea5e9; --border:#d7deea; --shadow: 0 10px 26px rgba(15,22,36,.10); --shadow2: 0 14px 34px rgba(15,22,36,.12); } /* ========================= Base ========================= */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; } a{color:inherit} img{max-width:100%; height:auto; display:block} /* Zone centrale neutre */ .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 22px 16px 60px; } /* ========================= Header (fidèle) ========================= */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(15,17,23,.78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } html[data-theme="light"] .site-header{ background: rgba(244,246,251,.78); } .header-inner{ max-width: var(--maxw); margin: 0 auto; padding: 12px 16px; display:flex; align-items:center; gap: 10px; } .brand{ display:inline-flex; align-items:center; font-weight: 950; letter-spacing: .6px; text-decoration:none; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; } .brand:hover{ border-color: var(--border); background: rgba(27,32,48,.45); } .header-spacer{ flex: 1; } .btn1{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(27,32,48,.7); color: var(--text); cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, border-color .15s ease, background .15s ease; font-weight: 850; } .btn1:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .btn1:active{ transform: translateY(0px); } .btn1-icon{ width: 42px; height: 42px; padding: 0; } .btn1-primary{ border: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); } .btn1-primary span{ font-weight: 950; } /* ========================= Modal Menu (fidèle) ========================= */ .odw-modal{ position: fixed; inset: 0; display:none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); z-index: 1000; } .odw-modal[aria-hidden="false"]{ display:flex; } html[data-theme="light"] .odw-modal{ background: rgba(15,22,36,.35); } .odw-modal-card{ width: min(980px, 100%); max-height: min(86vh, 820px); overflow:hidden; border-radius: 22px; border: 1px solid var(--border); background: rgba(21,25,35,.92); box-shadow: var(--shadow2); } html[data-theme="light"] .odw-modal-card{ background: rgba(255,255,255,.92); } .odw-modal-top{ display:flex; align-items:center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); } .odw-modal-top h2{ margin:0; font-size: 16px; font-weight: 950; } #toolSearch{ flex: 1; min-width: 180px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(27,32,48,.7); color: var(--text); outline:none; font-weight: 750; } html[data-theme="light"] #toolSearch{ background: rgba(245,247,252,.92); } .toolbox{ padding: 14px; overflow:auto; max-height: calc(86vh - 72px); } .tool-section{ border: 1px solid var(--border); background: rgba(27,32,48,.45); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); margin-bottom: 10px; } html[data-theme="light"] .tool-section{ background: rgba(255,255,255,.75); } .tool-section-title{ margin: 0 0 8px; font-size: 13px; font-weight: 950; } .tool-section a{ display:inline-flex; margin: 6px 8px 0 0; padding: 9px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(15,17,23,.25); text-decoration:none; color: var(--text); font-weight: 850; font-size: 12px; } html[data-theme="light"] .tool-section a{ background: rgba(245,247,252,.92); } .tool-section a:hover{ border-color: rgba(77,163,255,.35); } /* ========================= Footer (fidèle) ========================= */ .site-footer{ border-top: 1px solid var(--border); background: rgba(15,17,23,.9); } html[data-theme="light"] .site-footer{ background: rgba(244,246,251,.9); } .footer-inner{ max-width: var(--maxw); margin: 0 auto; padding: 18px 16px; display:flex; align-items:center; justify-content: space-between; gap: 14px; flex-wrap:wrap; } .footer-brand{ display:flex; align-items:center; gap: 10px; text-decoration:none; font-weight: 950; } .footer-logo{ border-radius: 10px; } .footer-links{ display:flex; gap: 10px; flex-wrap:wrap; } .footer-links a{ display:inline-flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(27,32,48,.45); text-decoration:none; font-weight: 850; } html[data-theme="light"] .footer-links a{ background: rgba(255,255,255,.75); } .footer-links a:hover{ border-color: rgba(77,163,255,.35); } .footer-social{ display:flex; gap: 10px; } .footer-social a{ width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; border: 1px solid var(--border); background: rgba(27,32,48,.45); text-decoration:none; } html[data-theme="light"] .footer-social a{ background: rgba(255,255,255,.75); } .footer-social a:hover{ border-color: rgba(77,163,255,.35); } .footer-meta{ width: 100%; color: var(--muted); font-weight: 650; font-size: 12px; } /* Mobile */ @media (max-width:700px){ .header-inner{ gap: 8px; } } /* ========================= HERO CARD (logo + texte haut) ========================= */ .hero-card{ margin: 18px auto 10px; max-width: var(--maxw); display:flex; gap: 14px; align-items:center; padding: 16px; border-radius: 22px; border: 1px solid var(--border); background: rgba(27,32,48,.55); box-shadow: var(--shadow2); } html[data-theme="light"] .hero-card{ background: rgba(255,255,255,.85); } .hero-logo{ width: 180px; max-width: 46vw; height:auto; } .hero-text{ flex: 1; } .hero-title{ margin: 0; font-size: 20px; font-weight: 950; letter-spacing:.2px; } .hero-sub{ margin: 8px 0 0; color: var(--muted); font-weight: 650; } /* Mobile */ @media (max-width:700px){ .hero-card{ flex-direction: column; align-items:flex-start; } .hero-logo{ width: 220px; max-width: 72vw; } }