/* ============================================================ global.css – MeilleurHébergement.ch Chargé en dernier dans pour surcharger les styles inline. ============================================================ */ /* ── Google Fonts : Inter ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ── Variables ── */ :root { --font: 'Inter', system-ui, -apple-system, sans-serif; --navy: #0d1f3c; --shadow-sm: 0 1px 4px rgba(13,31,60,.05), 0 4px 12px rgba(13,31,60,.04); --shadow-md: 0 4px 24px rgba(13,31,60,.09), 0 12px 40px rgba(13,31,60,.05); --shadow-lg: 0 8px 48px rgba(13,31,60,.14), 0 24px 72px rgba(13,31,60,.07); } /* ── Typographie de base ── */ html { font-size: 18px; } body { font-family: var(--font); line-height: 1.8; color: #1a2332; } p { line-height: 1.8; } h1, h2, h3, h4, h5, h6 { font-family: var(--font); line-height: 1.2; } /* ── Navbar – fixes communs ── */ .navbar { font-family: var(--font); } .nav-links a { font-size: 0.9rem; letter-spacing: 0.01em; } /* ── Mobile nav : side-panel uniforme sur toutes les pages ── */ @media (max-width: 768px) { .navbar { left: 10px !important; right: 10px !important; transform: none !important; width: auto !important; border-radius: 14px !important; } .navbar .nav-inner { gap: 0 !important; } .mobile-toggle { display: flex !important; } .nav-links { position: fixed !important; top: 0 !important; right: -100% !important; left: auto !important; width: 280px !important; height: 100vh !important; background: rgba(10, 22, 40, 0.97) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 80px 24px 32px !important; gap: 4px !important; transition: right .38s cubic-bezier(.22,1,.36,1) !important; border-left: 1px solid rgba(255,255,255,.07) !important; z-index: 1002 !important; overflow-y: auto !important; } .nav-links.open { right: 0 !important; } .nav-links li { width: 100%; } .nav-links a { font-size: 1rem !important; padding: 13px 16px !important; width: 100% !important; color: rgba(255,255,255,.82) !important; border-radius: 9px !important; display: block !important; } .nav-links a:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; } .nav-cta { margin-top: 8px !important; background: linear-gradient(135deg, #2563eb, #3b82f6) !important; color: #fff !important; } } /* ── Hero (index.html) ── */ .hero { position: relative; overflow: hidden; padding: 7rem 1.5rem 5.5rem; background: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px), radial-gradient(ellipse 80% 70% at 75% -10%, rgba(59,130,246,.20) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 15% 110%, rgba(99,102,241,.15) 0%, transparent 55%), linear-gradient(170deg, #09192e 0%, #0f2347 45%, #152d5a 100%); background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%, 100% 100%; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 1.25rem; } .hero p { font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.75; max-width: 600px; } .hero-stat strong { font-size: 2.2rem; font-weight: 900; background: linear-gradient(135deg, #93c5fd, #a5f3fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-stat span { font-size: 0.76rem; } /* ── Sections ── */ .section { padding: 5rem 1.5rem; } .section-header { margin-bottom: 3rem; } .section-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; } .section-header p { font-size: 1rem; max-width: 640px; } .section-label { background: linear-gradient(135deg, #dbeafe, #ede9fe); border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; } /* ── Cards ── */ .card { border-radius: 14px; border: 1px solid rgba(0,0,0,.055); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; } .card:hover { transform: translateY(-8px) scale(1.005); box-shadow: var(--shadow-lg); } .card-icon { width: 56px; height: 56px; border-radius: 14px; } .guide-card, .host-card, .host-block { border-radius: 14px; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; } .guide-card:hover, .host-card:hover, .host-block:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } /* ── Boutons ── */ .cta-btn { padding: 0.7rem 1.4rem; border-radius: 10px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 10px rgba(37,99,235,.22); } .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37,99,235,.38); } .nav-cta { letter-spacing: 0.01em; box-shadow: 0 4px 16px rgba(37,99,235,.35) !important; } /* ── Tables ── */ table { font-size: 0.88rem; } td { padding: 1.1rem 1rem; } thead tr { background: linear-gradient(135deg, #0d1f3c, #1e3a6e) !important; } thead th { letter-spacing: 0.05em; } tbody tr:hover { background: #f0f7ff !important; } .host-logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .star { width: 16px; height: 16px; } .rating-num { font-size: 0.82rem; font-weight: 600; } .badge { font-size: 0.75rem; padding: 0.25rem 0.65rem; } .badge-best { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 2px 8px rgba(245,158,11,.28); } /* ── Sidebar cards (review pages) ── */ .sidebar-card { border-radius: 14px; box-shadow: var(--shadow-md); } /* ── Score bars (review pages) ── */ .score-bar-fill { background: linear-gradient(90deg, #2563eb, #60a5fa) !important; border-radius: 100px; box-shadow: 0 2px 8px rgba(37,99,235,.25); } /* ── FAQ ── */ .faq-item details summary { font-size: 0.95rem; } .faq-item details > p { font-size: 0.9rem; line-height: 1.75; } /* ── Footer – canonical CSS overriding all inline variants ── */ footer { background: #0d1f3c !important; color: #94a3b8 !important; padding: 3.5rem 1.5rem 2rem !important; margin-top: 0 !important; } .footer-inner { max-width: 1200px; margin: 0 auto; } .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 3rem !important; margin-bottom: 3rem !important; } .footer-brand .logo { color: #fff !important; font-size: 1.1rem; } .footer-brand p { font-size: 0.83rem !important; margin-top: 0.75rem !important; line-height: 1.7 !important; max-width: 260px; color: #94a3b8; } .footer-sites { font-size: 0.78rem !important; margin-top: 10px !important; color: rgba(255,255,255,.5) !important; } .footer-sites a { color: rgba(255,255,255,.72) !important; } .footer-sites a:hover { color: #fff !important; } footer h4 { color: #fff !important; font-size: 0.82rem !important; font-weight: 700 !important; margin-bottom: 1rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } footer ul { list-style: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } footer ul li a { font-size: 0.875rem !important; color: #94a3b8 !important; transition: color .15s !important; text-decoration: none !important; } footer ul li a:hover { color: #fff !important; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.09) !important; padding-top: 1.5rem !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 1rem !important; font-size: 0.78rem !important; color: rgba(255,255,255,.4) !important; } .footer-affil { font-size: 0.75rem !important; color: #64748b !important; max-width: 580px !important; line-height: 1.55 !important; } /* ── Footer responsive ── */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } .footer-brand { grid-column: 1 / -1 !important; } } @media (max-width: 480px) { html { font-size: 17px; } .footer-grid { grid-template-columns: 1fr !important; } .footer-bottom { flex-direction: column !important; } .section { padding: 3.5rem 1.25rem !important; } .hero { padding: 5rem 1.25rem 4rem !important; } } /* ── Image crédit ── */ .img-credit { font-size: 0.7rem; color: #9ca3af; text-align: right; margin-top: -2rem; margin-bottom: 2.5rem; } .img-credit a { color: #9ca3af; } /* ── Page headers (secondary pages) ── */ .page-header { padding: 7rem 1.5rem 3rem; } .page-header h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); letter-spacing: -0.02em; } .page-header .intro { font-size: 1.05rem; line-height: 1.8; max-width: 680px; margin: 0.75rem auto 0; }