/* ========================================================================== SitePourMairies.fr – Landing / pages publiques (vente / auth) Objectif : éviter les collisions avec les thèmes des sites générés. Utilisation : + classes préfixées lp- ========================================================================== */ :root{ /* Bleu (classe, institutionnel) */ --lp-blue-1: #3764c8; --lp-blue-2: #1a41b1; --lp-blue-soft: rgba(55,100,200,.14); /* Rouge (accent) */ --lp-red: #ef4444; --lp-red-dark: #b91c1c; --lp-red-soft: rgba(239,68,68,.14); /* Neutres */ --lp-ink: #0f172a; --lp-ink-2: #334155; --lp-text: #374151; --lp-muted: #6b7280; --lp-border: rgba(15,23,42,.10); /* UI */ --lp-radius: 18px; --lp-shadow: 0 18px 40px rgba(15,23,42,.10); --lp-shadow-2: 0 34px 80px rgba(15,23,42,.45); /* Ancres (header sticky) */ --lp-anchor-offset: 86px; } /* Reset minimal (scope landing) */ html{ scroll-behavior:smooth; scroll-padding-top: var(--lp-anchor-offset); } body.lp{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--lp-ink); background:#f3f4f6; max-width:100%; overflow-x:hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.lp *, body.lp *::before, body.lp *::after{ box-sizing:border-box; } body.lp a{ color:inherit; } /* Layout */ .lp-container{ max-width:1180px; margin:0 auto; padding:0 22px; } .lp-main{ padding-bottom: 56px; } /* Header */ .lp-header{ position: sticky; top: 0; z-index: 60; background: linear-gradient(90deg, var(--lp-blue-1), var(--lp-blue-2)); box-shadow: 0 14px 35px rgba(15,23,42,.12); color: #fff; } .lp-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 18px; padding: 14px 0; } .lp-brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; min-width: 240px; } .lp-logo{ width: 34px; height: 34px; border-radius: 999px; background: #fff; object-fit: contain; box-shadow: 0 10px 18px rgba(15,23,42,.22); } .lp-brand-text{ display:flex; flex-direction:column; line-height:1.1; } .lp-brand-title{ font-weight: 900; letter-spacing: -0.01em; } .lp-brand-tagline{ font-size:.82rem; opacity:.92; } .lp-nav{ display:flex; align-items:center; flex-wrap:wrap; gap: 14px; font-size: .92rem; } .lp-nav a{ text-decoration:none; opacity:.95; } .lp-nav a:hover{ opacity:1; text-decoration:underline; } .lp-main-nav{ margin-left:auto; } .lp-header-controls, .lp-session-actions{ display:flex; align-items:center; gap:10px; } .lp-header-controls{ flex:0 0 auto; } .lp-menu-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.08); cursor:pointer; } .lp-menu-toggle:hover{ background:rgba(255,255,255,.16); } .lp-nav-pill{ padding:.45rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); text-decoration:none !important; } .lp-nav-pill:hover{ background: rgba(15,23,42,.15); } .lp-account-action{ display:inline-flex !important; align-items:center; justify-content:center; gap:7px; } .lp-nav-icon{ width:18px; height:18px; flex:0 0 18px; display:inline-block; background:currentColor; -webkit-mask:var(--lp-icon) center / contain no-repeat; mask:var(--lp-icon) center / contain no-repeat; } .lp-nav-text{ display:inline-block; } .lp-menu-toggle .lp-menu-toggle-close{ display:none; } /* Buttons */ .lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: .9rem 1.15rem; border-radius: var(--lp-radius); border: 0; cursor: pointer; background: linear-gradient(135deg, var(--lp-blue-1), var(--lp-blue-2)); color: #fff; font-weight: 800; text-decoration:none !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .lp-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); box-shadow: 0 12px 20px rgba(55,100,200,.25); } .lp-btn:active{ transform: translateY(0); } .lp-btn--sm{ padding:.7rem 1rem; border-radius: 999px; } .lp-btn--xl{ padding: 1rem 1.35rem; font-size: 1.08rem; border-radius: 18px; } .lp-btn-secondary{ display:inline-flex; align-items:center; justify-content:center; padding: .9rem 1.15rem; border-radius: 18px; background:#fff; border:1px solid rgba(17,24,39,.12); color: var(--lp-ink); font-weight: 800; text-decoration:none !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lp-btn-secondary:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(15,23,42,.06); border-color: rgba(17,24,39,.30); } /* Sections */ .lp-section{ padding: 44px 0; } .lp-section + .lp-section{ border-top: 1px solid rgba(229,231,235,1); } .lp-section--alt{ background:#fff; } .lp-section-head{ margin-bottom: 20px; } .lp-h2{ margin: 0 0 6px; font-size: 2rem; letter-spacing: -0.02em; color: var(--lp-ink); } .lp-subtitle{ margin:0; max-width: 740px; color: var(--lp-muted); line-height: 1.55; font-size: .98rem; } /* Hero */ .lp-hero{ padding: 62px 0 48px; background: radial-gradient(circle at top left, rgba(55,100,200,.16), transparent 55%), radial-gradient(circle at bottom right, rgba(26,65,177,.12), transparent 60%), #f9fafb; } .lp-hero-grid{ display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 34px; align-items:center; min-width:0; } .lp-hero-grid > *{ min-width:0; } .lp-eyebrow{ margin:0 0 10px; font-size:.86rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; color: #0b4aa8; } .lp-title{ margin:0 0 14px; letter-spacing: -0.015em; } .lp-title .h1-strong{ display:block; font-size: 2.35rem; line-height: 1.18; font-weight: 900; } .lp-title .h1-main{ display:block; font-size: 2.35rem; line-height: 1.18; font-weight: 900; } .lp-title .h1-sub{ display:block; margin-top: 6px; font-size: 1.08rem; font-weight: 650; color: var(--lp-ink-2); } .lp-lead{ margin: 0 0 14px; color: var(--lp-text); line-height: 1.6; font-size: 1.05rem; max-width: 740px; } /* Hero lines (prix / promesses) */ .lp-lines{ display:grid; gap:10px; margin: 6px 0 18px; } .lp-line{ display:flex; flex-wrap:wrap; align-items:center; gap: 10px; color: #111827; } .lp-price-pill{ display:inline-flex; align-items:center; gap: 6px; padding: .25rem .65rem; border-radius: 999px; background: var(--lp-blue-soft); border: 1px solid rgba(55,100,200,.25); color: #0b4aa8; font-weight: 900; } .lp-info-badge{ display:inline-flex; align-items:center; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #1e293b; background: #eef2ff; border: 1px solid rgba(55,100,200,.25); white-space:nowrap; } .lp-red-pill{ display:inline-flex; align-items:center; padding: .38rem .75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 900; color: var(--lp-red-dark); background: var(--lp-red-soft); border: 1px solid rgba(239,68,68,.28); } .lp-red-pill--solid{ background: var(--lp-red); color: #fff; border-color: rgba(255,255,255,.25); } /* Device + carousel */ .lp-hero-visual{ width:100%; max-width: 560px; min-width:0; margin: 0 auto; } .lp-device{ position:relative; width:100%; max-width: 560px; min-width:0; margin:0 auto; will-change: transform; } @keyframes lpDeviceFloat{ 0%{ transform: translateY(0) rotate(-.2deg); } 100%{ transform: translateY(-10px) rotate(.2deg); } } .lp-device--laptop{ animation: lpDeviceFloat 8s ease-in-out infinite alternate; } .lp-device-screen{ position:relative; width:100%; max-width:100%; min-width:0; background:#0b1220; border-radius: 28px; padding: 14px; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--lp-shadow-2); overflow:hidden; } .lp-device-screen::before{ content:""; position:absolute; top:10px; left:50%; transform: translateX(-50%); width: 70px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.10); z-index: 6; } .lp-device-screen::after{ content:""; position:absolute; inset:-30%; background: radial-gradient(circle at 30% 20%, rgba(55,100,200,.18), transparent 45%), radial-gradient(circle at 70% 80%, rgba(26,65,177,.14), transparent 50%); transform: rotate(8deg); pointer-events:none; z-index: 0; } .lp-device-base{ width: 84%; height: 18px; margin: -18px auto 0; background: linear-gradient(180deg,#e5e7eb,#cbd5e1); border-radius: 0 0 30px 30px; box-shadow: 0 16px 35px rgba(15,23,42,.16); position:relative; } .lp-device-base::before{ content:""; position:absolute; top:6px; left:50%; transform: translateX(-50%); width: 78px; height: 4px; border-radius: 999px; background: rgba(15,23,42,.18); } /* Carousel */ .lp-carousel{ position:relative; width:100%; max-width:100%; min-width:0; aspect-ratio: 16 / 10; min-height: 260px; border-radius: 20px; overflow:hidden; background:#0f172a; z-index: 2; } .lp-shot{ position:absolute; inset:0; opacity:0; transform: translateX(12px); transition: opacity .6s ease, transform .6s ease; z-index:1; } .lp-shot.is-active{ opacity:1; transform: translateX(0); z-index:2; } /* Carousel dots */ .lp-dots{ position:absolute; left:50%; bottom:10px; transform: translateX(-50%); display:flex; gap: 6px; z-index: 8; background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.10); padding: 6px 8px; border-radius: 999px; backdrop-filter: blur(6px); } .lp-dot{ width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35); } .lp-dot.is-active{ background:#fff; } /* Fake shots (placeholder) */ .lp-shot--site{ background: radial-gradient(circle at 18% 22%, rgba(55,100,200,.22), transparent 42%), radial-gradient(circle at 72% 78%, rgba(26,65,177,.18), transparent 46%), linear-gradient(180deg, #0b1220, #0f172a); color:#e5e7eb; padding: 18px; } .lp-shot-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; font-size: .78rem; color: #cbd5e1; margin-bottom: 12px; } .lp-shot-logo{ display:flex; align-items:center; gap:8px; font-weight:900; color:#fff; } .lp-shot-badge{ padding:.2rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(15,23,42,.55); font-size: .72rem; white-space:nowrap; } .lp-shot-hero{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items:stretch; } .lp-line-1{ height:12px; width:70%; border-radius:999px; background: rgba(255,255,255,.22); } .lp-line-2{ height:8px; width:100%; border-radius:999px; background: rgba(255,255,255,.16); margin-top: 8px; } .lp-line-2.short{ width:72%; } .lp-mini-cta{ height:28px; width:55%; border-radius:999px; background: linear-gradient(135deg, var(--lp-blue-1), var(--lp-blue-2)); margin-top: 12px; } .lp-photo{ border-radius:16px; background: rgba(255,255,255,.10); } .lp-photo.small{ margin-top: 8px; height: 42px; } .lp-shot--prog, .lp-shot--team{ background: linear-gradient(180deg,#0b1220,#0f172a); color:#e5e7eb; padding:18px; } .lp-prog-title{ height:12px; width:52%; border-radius:999px; background: rgba(255,255,255,.22); } .lp-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; } .lp-chip{ height:18px; width:88px; border-radius:999px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); } .lp-prog-cards{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; } .lp-prog-card{ height:58px; border-radius:16px; background: rgba(255,255,255,.10); } .lp-team-title{ height:12px; width:46%; border-radius:999px; background: rgba(255,255,255,.22); } .lp-avatars{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:14px; } .lp-avatar{ height:70px; border-radius:16px; background: rgba(255,255,255,.10); position:relative; overflow:hidden; } .lp-avatar::after{ content:""; position:absolute; inset:auto 12px 12px 12px; height:8px; border-radius:999px; background: rgba(255,255,255,.14); } /* CTA bar under hero */ .lp-hero-cta{ margin-top: 22px; display:grid; gap: 14px; justify-items:center; text-align:center; } .lp-hero-actions{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:center; } .lp-trust{ display:flex; flex-wrap:wrap; gap: 8px; justify-content:center; } .lp-trust-pill{ display:inline-flex; align-items:center; gap: 8px; padding: .35rem .6rem; border-radius: 999px; font-size: .88rem; color: var(--lp-text); background: rgba(17,24,39,.04); border: 1px solid rgba(17,24,39,.08); } .lp-tick{ width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: #ecfdf5; color: #16a34a; font-weight: 900; font-size: .75rem; } .lp-note{ margin: 0; color: var(--lp-muted); font-size: .9rem; } /* Cards + grids (réutilisables pour pages publiques) */ .lp-card{ background:#fff; border: 1px solid rgba(17,24,39,.08); border-radius: 16px; box-shadow: 0 12px 25px rgba(15,23,42,.06); padding: 18px; } .lp-grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 24px; } .lp-card h3{ margin:0 0 6px; font-size: 1.06rem; color: var(--lp-ink); } .lp-card p{ margin:0; color: var(--lp-muted); line-height: 1.45; font-size: .95rem; } /* Steps */ .lp-steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 24px; } .lp-step{ position:relative; overflow:hidden; padding: 18px; } .lp-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width: 4px; background: linear-gradient(180deg, var(--lp-blue-1), var(--lp-blue-2)); opacity:.9; } .lp-step-num{ position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:999px; background: rgba(55,100,200,.14); color: #0b4aa8; border:1px solid rgba(55,100,200,.28); font-size:.95rem; font-weight: 900; display:flex; align-items:center; justify-content:center; } .lp-step h3{ margin:0 0 6px; padding-left: 46px; } .lp-step p{ padding-left: 46px; } /* FAQ */ .lp-faq{ display:grid; gap: 12px; margin-top: 24px; } /* Footer */ .lp-footer{ background: linear-gradient(90deg, var(--lp-blue-1), var(--lp-blue-2)); color:#fff; padding: 16px 0; } .lp-footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 12px; font-size: .85rem; } .lp-footer a{ opacity:.9; text-decoration:none; } .lp-footer a:hover{ opacity:1; text-decoration:underline; } /* Auth pages (login / inscription) */ .lp-auth-wrap{ min-height: calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding: 28px 0 44px; } .lp-auth-card{ max-width: 440px; width: 100%; } .lp-form{ margin-top: 6px; } .lp-label{ display:flex; flex-direction:column; gap: 6px; margin: 10px 0; font-size: .9rem; font-weight: 650; color: var(--lp-ink); } .lp-input{ padding: .75rem .8rem; border: 1px solid #d1d5db; border-radius: 12px; font-size: .95rem; font-weight: 500; } .lp-input:focus{ outline:none; border-color: var(--lp-blue-1); box-shadow: 0 0 0 1px rgba(55,100,200,.25); } .lp-help{ font-size: .85rem; color: var(--lp-muted); margin-top: 8px; } .lp-help a{ color: #0b4aa8; text-decoration:none; font-weight: 800; } .lp-help a:hover{ text-decoration:underline; } /* Modals (si réutilisé) */ .lp-modal{ position:fixed; inset:0; background: rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding: 16px; z-index: 80; opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease; } .lp-modal.is-open{ opacity:1; visibility:visible; } .lp-modal-dialog{ background:#fff; border-radius: 18px; max-width: 440px; width:100%; box-shadow: 0 24px 60px rgba(15,23,42,.38); transform: translateY(10px); transition: transform .2s ease; } .lp-modal.is-open .lp-modal-dialog{ transform: translateY(0); } .lp-modal-head{ padding: 16px 18px 0; display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .lp-modal-title{ margin:0 0 4px; font-size: 1.25rem; letter-spacing: -0.01em; } .lp-modal-sub{ margin:0 0 6px; font-size: .9rem; color: var(--lp-muted); line-height: 1.45; } .lp-modal-close{ border:0; background:transparent; color: var(--lp-muted); cursor:pointer; font-size: 1.2rem; padding: 4px; border-radius: 999px; } .lp-modal-close:hover{ background:#f3f4f6; color: var(--lp-ink); } .lp-modal-body{ padding: 6px 18px 18px; } /* Responsive */ @media (max-width: 920px){ .lp-header-inner{ flex-direction:column; align-items:flex-start; } .lp-nav{ width:100%; justify-content:flex-start; } .lp-hero-grid{ grid-template-columns: 1fr; } .lp-hero-visual{ order:-1; } .lp-title .h1-strong, .lp-title .h1-main{ font-size: 2.15rem; } .lp-btn--xl{ width:100%; max-width: 420px; } .lp-grid-3, .lp-steps{ grid-template-columns: 1fr; } .lp-prog-cards{ grid-template-columns: 1fr; } } @media (max-width: 760px){ .lp-header-inner{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; position:relative; gap:8px; padding:9px 0 8px; } .lp-brand{ order:1; flex:1 1 auto; min-width:0; gap:9px; } .lp-logo{ width:32px; height:32px; } .lp-brand-title{ font-size:.98rem; } .lp-brand-tagline{ max-width:260px; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lp-nav{ font-size:.84rem; } .lp-nav::-webkit-scrollbar{ display:none; } .lp-nav a{ flex:0 0 auto; white-space:nowrap; } .lp-nav-pill{ padding:.45rem .7rem; } .lp-nav .lp-btn--sm{ padding:.56rem .82rem; } .lp-header-controls{ order:2; margin-left:auto; gap:6px; } .lp-session-actions{ gap:6px; } .lp-menu-toggle{ display:inline-flex; } .lp-header.is-menu-open .lp-menu-toggle-open{ display:none; } .lp-header.is-menu-open .lp-menu-toggle-close{ display:inline-block; } .lp-main-nav{ order:3; display:none; width:100%; margin:6px 0 0; padding:8px; gap:7px; grid-template-columns:repeat(2, minmax(0, 1fr)); border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(11,31,58,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); overflow:visible; scrollbar-width:auto; } .lp-header.is-menu-open .lp-main-nav{ display:grid; } .lp-main-nav a{ flex:initial; min-width:0; padding:10px 8px; border-radius:12px; background:rgba(255,255,255,.09); text-align:center; white-space:normal; line-height:1.15; text-decoration:none; } .lp-main-nav a:hover{ background:rgba(255,255,255,.16); text-decoration:none; } .lp-account-action{ width:40px; height:40px; padding:0 !important; border-radius:999px !important; gap:0; } .lp-account-action .lp-nav-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; } .lp-account-action .lp-nav-icon{ width:20px; height:20px; flex-basis:20px; } } @media (max-width: 560px){ .lp-container{ padding-left:16px; padding-right:16px; } .lp-hero{ padding-top:20px; overflow:hidden; } .lp-hero-visual{ width:100%; max-width:100%; justify-self:stretch; overflow:visible; } .lp-device{ width:100%; max-width:100%; transform:none; } .lp-device--laptop{ animation:none; } .lp-device-screen{ width:100%; padding:10px; border-radius:22px; } .lp-device-screen::before{ top:7px; width:52px; height:8px; } .lp-carousel{ min-height:0; aspect-ratio:16 / 10; border-radius:16px; } .lp-device-base{ width:78%; height:12px; margin-top:-12px; border-radius:0 0 22px 22px; } .lp-title .h1-strong, .lp-title .h1-main{ font-size:clamp(1.9rem, 9vw, 2.15rem); overflow-wrap:normal; } .lp-title .h1-sub{ font-size:1rem; line-height:1.35; } } @media (prefers-reduced-motion: reduce){ body.lp *{ animation:none !important; transition:none !important; } .lp-device--laptop{ animation:none !important; } } /* ===== Alerts (success / error) ===== */ .lp-alert{ display:flex; gap:10px; align-items:flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(15,23,42,.10); background:#fff; color: var(--lp-ink); box-shadow: 0 12px 25px rgba(15,23,42,.06); margin: 0 0 14px; line-height: 1.45; } .lp-alert--success{ background:#ecfdf5; border-color:#bbf7d0; color:#166534; } .lp-alert--error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; } .lp-alert strong{ font-weight: 900; } /* ===== Client-side validation ===== */ .lp-input.is-invalid{ border-color: #ef4444 !important; box-shadow: 0 0 0 1px rgba(239,68,68,.28) !important; background: #fff; } .lp-field-error{ margin: 6px 0 0; font-size: .85rem; color: #991b1b; line-height: 1.35; } /* ===== Galleries + visionneuse (captures public + admin) ===== */ .lp-gallery-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; } .lp-gallery-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } @media (max-width: 980px){ .lp-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .lp-gallery-grid{ grid-template-columns: 1fr; } } .lp-shot-card{ position:relative; display:block; border-radius: 16px; overflow:hidden; background:#fff; border:1px solid rgba(17,24,39,.10); box-shadow: 0 12px 25px rgba(15,23,42,.06); text-decoration:none !important; transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lp-shot-card:hover{ transform: translateY(-2px); border-color: rgba(17,24,39,.18); box-shadow: 0 18px 40px rgba(15,23,42,.10); } .lp-shot-thumb{ display:block; width:100%; aspect-ratio: 16 / 10; height:auto; object-fit: cover; background: #e5e7eb; } .lp-shot-meta{ display:flex; justify-content:space-between; align-items:center; gap: 12px; padding: 10px 12px; } .lp-shot-title{ font-weight:900; color: var(--lp-ink); } .lp-shot-tag{ font-size:.78rem; color: var(--lp-muted); white-space:nowrap; } .lp-shot-badge2{ position:absolute; top: 10px; right: 10px; z-index: 2; padding: .22rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(15,23,42,.60); color:#fff; font-size: .74rem; font-weight: 800; backdrop-filter: blur(6px); } /* Hero carousel : image réelle */ .lp-shot-img{ width:100%; height:100%; object-fit: cover; display:block; } /* Visionneuse */ .lp-lightbox{ position:fixed; inset:0; z-index: 120; background: rgba(15,23,42,.78); display:none; align-items:center; justify-content:center; padding: 16px; } .lp-lightbox.is-open{ display:flex; } .lp-lightbox-dialog{ position:relative; width: min(1100px, 96vw); max-height: 90vh; } .lp-lightbox-figure{ margin:0; border-radius: 18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0b1220; box-shadow: 0 24px 60px rgba(15,23,42,.55); } .lp-lightbox-img{ display:block; width:100%; height: auto; max-height: 76vh; object-fit: contain; background:#0b1220; } .lp-lightbox-caption{ padding: 10px 12px; color:#e5e7eb; font-size: .9rem; line-height: 1.35; background: rgba(15,23,42,.55); border-top: 1px solid rgba(255,255,255,.10); } .lp-lightbox-close, .lp-lightbox-prev, .lp-lightbox-next{ position:absolute; top: 10px; border:0; cursor:pointer; color:#fff; background: rgba(15,23,42,.65); border:1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 10px; backdrop-filter: blur(6px); } .lp-lightbox-close{ right: 10px; font-size: 1.15rem; line-height: 1; } .lp-lightbox-prev{ left: 10px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; } .lp-lightbox-next{ right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; } .lp-lightbox-close:hover, .lp-lightbox-prev:hover, .lp-lightbox-next:hover{ background: rgba(15,23,42,.85); } @media (max-width: 620px){ .lp-lightbox-prev, .lp-lightbox-next{ display:none; } } .lp-usecases{ margin:12px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--lp-muted); line-height:1.45; font-size:.95rem; } .lp-usecases li{ list-style:disc; }