/* ================================================================ lebanim-design.css — Design system partagé Lebanim (staging4) Chargé par toutes les pages publiques. Contient : tokens CSS, reset minimal, topbar, footer, composants communs (boutons, pills, FAQ, pricing-card, seal…) ================================================================ */ /* ── TOKENS ──────────────────────────────────────────────────── */ :root { --bg: #FFFFFF; --bg-soft: #F7F5F0; --cream: #FAF7F0; --paper: #FAF6EC; --ink-deep: #0F1620; --ink: #1F2937; --ink-soft: #4B5563; --ink-muted: #6B7280; --cta: #1E5AA8; --cta-hover: #15457F; --gold: #C9A84C; --gold-dark: #8B6914; --gold-soft: #F2EDE0; --success: #2E7D32; --border: #E5E7EB; --line-soft: #EFEAE0; --ff-serif: 'Cormorant Garamond', Georgia, serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --ff-he: 'Frank Ruhl Libre', serif; --ff-hand: 'Caveat', cursive; --max-w: 1200px; --r: 8px; --r-lg: 12px; } /* ── RESET ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--ff-sans); background: var(--bg); color: var(--ink); font-size: 19px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } body a { color: inherit; } body img { max-width: 100%; display: block; } body button { cursor: pointer; font-family: inherit; } body p, body li, body dd, body blockquote { font-family: var(--ff-sans); color: var(--ink); font-size: 19px; line-height: 1.65; } body p a, body .lead a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } /* ── TOPBAR ──────────────────────────────────────────────────── */ .topbar { display: flex; align-items: stretch; height: 64px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; } /* Topbar fixe au scroll — DESKTOP uniquement (≥901px). Le `position:sticky` posé sur .topbar/.co-bar ne « colle » pas : leur parent

a exactement la hauteur de la barre (64px), donc le sticky défile avec son conteneur. On rend

lui-même sticky : enfant direct de , il colle sur toute la hauteur de la page. Couvre toutes les barres publiques (.topbar et la .co-bar du checkout). En responsive (≤900px, passage hamburger) on NE touche à rien — la barre défile comme avant. */ @media (min-width: 901px) { header { position: sticky; top: 0; z-index: 1000; } } .topbar-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 20px; border-right: 1px solid var(--border); text-decoration: none; } .logo-he { font-size: 32px; font-weight: 700; color: var(--cta); font-family: var(--ff-he); line-height: 1; } .logo-text { display: flex; flex-direction: column; line-height: 1.2; } .logo-name { font-size: 16px; font-weight: 700; color: var(--ink); } .logo-tag { font-size: 9px; letter-spacing: .12em; color: var(--ink-muted); text-transform: uppercase; margin-top: 2px; } .topbar-nav { display: flex; align-items: stretch; } .ni { display: flex; align-items: center; gap: 4px; padding: 0 20px; font-size: 17px; font-weight: 500; color: var(--ink); background: none; border: none; border-bottom: 3px solid transparent; height: 64px; cursor: pointer; white-space: nowrap; font-family: var(--ff-sans); text-decoration: none; } .ni:hover { color: var(--cta); } .ni.active { color: var(--cta); border-bottom-color: var(--gold); font-weight: 600; } .nav-dropdown { position: relative; } .nav-arrow { width: 18px; height: 18px; transition: transform .2s; vertical-align: middle; margin-left: 4px; } .ni.open .nav-arrow { transform: rotate(180deg); } /* ── Nav plate (header flat unifié) — partagé (était inline dans index.html) ── */ .topbar-flat-nav { display: flex; align-items: center; gap: 4px; margin-left: 24px; flex-shrink: 0; } .flat-link { font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 6px 14px; border-radius: 6px; position: relative; transition: color .15s, background .15s; white-space: nowrap; } .flat-link:hover { color: var(--cta); background: var(--gold-soft); } .flat-link.active { color: var(--cta); font-weight: 600; } .flat-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); border-radius: 2px; } .topbar-spacer { flex: 1; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .lang-sw { position: relative; display: flex; align-items: center; gap: 4px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; user-select: none; } .lang-dd { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 200; } .lang-sw.open .lang-dd { display: block; } .lang-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; font-size: 16px; color: var(--ink); text-decoration: none; font-family: var(--ff-sans); border-radius: 6px; cursor: pointer; } .lang-item:not(.lang-item-disabled):hover { background: var(--gold-soft); } .lang-item.active { font-weight: 600; } .lang-item-disabled { opacity: 0.5; pointer-events: none; cursor: default; } .lang-soon { font-size: 11px; color: var(--ink-muted); } .help-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-soft); font-weight: 600; text-decoration: none; transition: border-color .2s; } .help-btn:hover { border-color: var(--cta); color: var(--cta); } .nav-login-link { font-size: 14px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; padding: 6px 12px; border-radius: 6px; transition: color .15s; } .nav-login-link:hover { color: var(--cta); } .btn-offrir { background: var(--cta); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 7px; white-space: nowrap; text-decoration: none; font-family: var(--ff-sans); transition: background .15s; } .btn-offrir:hover { background: var(--cta-hover); } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); min-width: 280px; z-index: 1000; padding: 6px; } .dropdown-menu.open { display: block; } .dropdown-item { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 6px; text-decoration: none; color: var(--ink); transition: background .15s; } .dropdown-item:hover { background: var(--gold-soft); } .item-title { font-size: 17px; font-weight: 600; line-height: 1.4; } .item-sub { font-size: 14px; color: var(--ink-muted); margin-top: 4px; line-height: 1.5; } .mobile-menu { display: none; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 16px 24px 28px; z-index: 999; box-shadow: 0 4px 16px rgba(0,0,0,.08); max-height: calc(100vh - 64px); overflow-y: auto; } .mobile-menu.open { display: flex; } .mm-section { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; padding: 12px 0 4px; } .mm-link { font-size: 17px; color: var(--ink); padding: 12px 0; text-decoration: none; border-bottom: 0.5px solid #F3F4F6; } .mm-sep { height: 1px; background: var(--border); margin: 8px 0; } /* ── SECTION LAYOUT ──────────────────────────────────────────── */ .section { padding: 100px 32px; } .section-inner { max-width: var(--max-w); margin: 0 auto; } .sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--cta); text-transform: uppercase; margin-bottom: 14px; display: block; } .sec-h2 { font-family: var(--ff-serif); font-size: clamp(36px, 4vw, 52px); font-weight: 600; color: var(--ink-deep); line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.005em; } .sec-h2 em { font-style: italic; color: var(--cta); } .sec-lead { font-size: 19px; color: var(--ink); max-width: 680px; margin-bottom: 56px; line-height: 1.65; } .section-header-center { text-align: center; max-width: 720px; margin: 0 auto 56px; } .section-header-center .sec-lead { margin: 0 auto; max-width: 620px; } /* ── BOUTONS COMMUNS ─────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--cta); color: #fff; padding: 14px 28px; border-radius: var(--r); font-size: 16px; font-weight: 600; font-family: var(--ff-sans); border: none; text-decoration: none; cursor: pointer; transition: background .15s; min-height: 50px; } .btn-primary:hover { background: var(--cta-hover); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--cta); color: var(--cta); padding: 14px 28px; border-radius: var(--r); font-size: 16px; font-weight: 600; font-family: var(--ff-sans); background: none; text-decoration: none; cursor: pointer; transition: all .15s; min-height: 50px; } .btn-outline:hover { background: var(--cta); color: #fff; } .btn-gold { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--gold); color: var(--gold-dark); padding: 14px 28px; border-radius: var(--r); font-size: 16px; font-weight: 600; font-family: var(--ff-sans); background: none; text-decoration: none; cursor: pointer; transition: all .15s; min-height: 50px; } .btn-gold:hover { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); } /* ── TRUST PILLS ─────────────────────────────────────────────── */ .trust-pills { display: flex; flex-wrap: wrap; gap: 10px; } .pill { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; padding: 7px 16px; } .pill .ok { color: var(--success); font-weight: 700; } /* ── PRICING CARDS ───────────────────────────────────────────── */ .pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--max-w); margin: 0 auto; } .price-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 32px 32px; position: relative; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; } .price-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.06); } .price-card.is-featured { border-color: var(--cta); box-shadow: 0 0 0 2px var(--cta); } .price-card.is-featured:hover { box-shadow: 0 0 0 2px var(--cta), 0 12px 30px rgba(30,90,168,.12); } .price-card.is-prestige { border-top: 4px solid var(--gold); } .price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--cta); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; padding: 5px 18px; border-radius: 100px; text-transform: uppercase; white-space: nowrap; } .price-name { font-family: var(--ff-serif); font-size: 26px; font-weight: 600; color: var(--ink-deep); margin-bottom: 6px; } .price-meta { font-size: 15px; color: var(--ink-soft); margin-bottom: 28px; line-height: 1.5; } .price-amount { font-family: var(--ff-serif); font-size: 58px; font-weight: 600; color: var(--ink-deep); line-height: 1; margin-bottom: 4px; display: flex; align-items: baseline; gap: 2px; } .price-amount .currency { font-size: 28px; font-weight: 500; color: var(--ink-soft); margin-right: 2px; } .price-amount-ils { font-family: var(--ff-serif); font-size: 22px; color: var(--cta); margin-bottom: 24px; font-weight: 400; } .price-amount-ils .he { font-family: var(--ff-he); font-size: 18px; margin-left: 4px; } .price-features { list-style: none; margin-bottom: 32px; flex: 1; } .price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--ink); margin-bottom: 12px; line-height: 1.5; } .price-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; font-size: 16px; } .price-features li.no::before { content: '–'; color: var(--ink-muted); } .price-cta { display: flex; width: 100%; padding: 14px 20px; border-radius: var(--r); font-size: 16px; font-weight: 600; text-align: center; border: 2px solid var(--cta); color: var(--cta); background: none; transition: all .15s; text-decoration: none; cursor: pointer; min-height: 50px; align-items: center; justify-content: center; } .price-cta:hover { background: var(--cta); color: #fff; } .price-card.is-featured .price-cta { background: var(--cta); color: #fff; } .price-card.is-featured .price-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); } .price-card.is-prestige .price-cta { border-color: var(--gold); color: var(--gold-dark); } .price-card.is-prestige .price-cta:hover { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); } .pricing-foot { text-align: center; margin-top: 36px; font-size: 16px; color: var(--ink-muted); } .pricing-foot a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } /* ── FAQ ACCORDÉON ───────────────────────────────────────────── */ .faq-list { border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-btn { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; text-align: left; gap: 24px; min-height: 56px; } .faq-q { font-family: var(--ff-sans); font-size: 20px; font-weight: 600; color: var(--ink-deep); line-height: 1.4; } .faq-chev { flex-shrink: 0; width: 28px; height: 28px; border: 2px solid var(--cta); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cta); transition: transform .2s; font-size: 14px; font-weight: 600; } .faq-item.is-open .faq-chev { transform: rotate(180deg); } .faq-ans { font-size: 18px; color: var(--ink); line-height: 1.7; padding: 0 32px 24px 0; display: none; max-width: 720px; } .faq-item.is-open .faq-ans { display: block; } .faq-foot { text-align: center; margin-top: 36px; font-size: 16px; color: var(--ink-muted); } .faq-foot a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } /* ── SEAL (bande sombre hébraïque) ──────────────────────────── */ .seal { background: var(--ink-deep); color: #fff; padding: 64px 32px; text-align: center; position: relative; overflow: hidden; } .seal::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gold); } .seal-he { font-family: var(--ff-he); font-size: clamp(48px, 6vw, 72px); color: var(--gold); font-weight: 700; direction: rtl; line-height: 1; margin-bottom: 16px; letter-spacing: .02em; } .seal-translit { font-family: var(--ff-serif); font-style: italic; font-size: 22px; color: rgba(255,255,255,.6); margin-bottom: 8px; } .seal-fr { font-size: 16px; color: rgba(255,255,255,.45); letter-spacing: .14em; text-transform: uppercase; } /* ── CTA FINAL ───────────────────────────────────────────────── */ .final-cta { background: var(--bg-soft); padding: 96px 32px; text-align: center; position: relative; overflow: hidden; border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); } .final-cta-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--ff-he); font-size: 240px; font-weight: 700; color: var(--cta); opacity: .06; pointer-events: none; user-select: none; white-space: nowrap; } .final-cta h2 { font-family: var(--ff-serif); font-size: clamp(36px, 4vw, 52px); font-style: italic; font-weight: 500; color: var(--ink-deep); margin-bottom: 18px; position: relative; line-height: 1.15; } .final-cta h2 em { font-style: italic; color: var(--gold-dark); } .final-cta p { font-size: 19px; color: var(--ink-soft); margin-bottom: 36px; position: relative; } .final-cta-trust { display: flex; gap: 32px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; position: relative; } .final-cta-trust span { font-size: 15px; color: var(--ink-soft); } .final-cta-trust span .ok { color: var(--success); font-weight: 700; margin-right: 6px; } .final-cta-btns { display: flex; gap: 16px; justify-content: center; position: relative; flex-wrap: wrap; } .btn-final { background: var(--cta); color: #fff; padding: 16px 32px; border-radius: var(--r); font-size: 17px; font-weight: 600; border: none; transition: background .15s; min-height: 56px; text-decoration: none; display: inline-flex; align-items: center; } .btn-final:hover { background: var(--cta-hover); } .btn-final-out { border: 1.5px solid var(--cta); color: var(--cta); background: none; padding: 16px 32px; border-radius: var(--r); font-size: 17px; font-weight: 600; min-height: 56px; transition: all .15s; text-decoration: none; display: inline-flex; align-items: center; } .btn-final-out:hover { background: var(--cta); color: #fff; } /* ── FOOTER ──────────────────────────────────────────────────── */ .footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 56px 32px 0; color: var(--ink); font-size: 16px; } .footer-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 0 0 44px; align-items: start; } .footer-grid > div:first-child { align-self: start; } .f-logo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; margin-bottom: 14px; } /* Logo footer = markup identique a la topbar (.topbar-logo). On neutralise le separateur vertical propre a la topbar et on conserve l'espace sous le logo. */ .footer .topbar-logo { display: flex; flex-direction: row; align-items: center; gap: 10px; border-right: none; padding-right: 0; margin-bottom: 14px; } .f-logo-he { font-family: var(--ff-he); color: var(--cta); font-size: 24px; line-height: 1.1; } .f-name { font-family: var(--ff-sans); font-size: 17px; font-weight: 600; color: var(--ink-deep); } .f-tag { font-size: 16px; color: var(--ink-muted); line-height: 1.55; max-width: 280px; } .f-tag-he { font-size: 15px; direction: rtl; color: var(--cta); font-family: var(--ff-he); margin-top: 6px; } .f-col-t { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; } .footer-grid a { display: block; color: var(--ink); text-decoration: none; line-height: 2.1; transition: color .15s; font-size: 17px; } .footer-grid a:hover { color: var(--cta); } .f-bottom { max-width: var(--max-w); margin: 0 auto; padding: 22px 0; border-top: .5px solid var(--line-soft); font-size: 13px; color: var(--ink-muted); display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; text-align: center; } .f-bottom-he { font-family: var(--ff-he); color: var(--cta); direction: rtl; font-size: 15px; } /* ── JS TOPBAR (inline dans chaque page) ─────────────────────── */ /* Les fonctions toggleDropdown / closeAllDropdowns / toggleMobile sont définies inline dans chaque page — pas de dépendance JS ici */ /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 900px) { .topbar-nav, .topbar-flat-nav, .topbar-right, .topbar-spacer { display: none; } .hamburger { display: flex; } .topbar { padding: 0 20px; } .section { padding: 72px 24px; } .pricing-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 28px; } .price-card.is-featured { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 767px) { body { font-size: 18px; } body p, body li { font-size: 18px; } .sec-h2 { font-size: 30px; } .faq-q { font-size: 17px; } .faq-ans { font-size: 16px; } .final-cta-btns { flex-direction: column; align-items: stretch; } .footer-grid { grid-template-columns: 1fr; } .section { padding: 56px 16px; } }