/* ============================================================ ELITE AUTO — style.css (CLEAN, NO SYSTEME.IO) Ciblé sur TON HTML actuel (index) Font : Poppins (loaded in ) ============================================================ */ /* ========================= TOKENS ========================= */ :root{ --ea-bg0:#050a14; --ea-bg1:#07142a; --ea-card:rgba(255,255,255,.06); --ea-line:rgba(255,255,255,.12); --ea-text:#eaf0ff; --ea-muted:rgba(234,240,255,.74); --ea-soft:rgba(234,240,255,.58); --ea-accent:#2aa7ff; --ea-accent2:#6a5cff; --ea-radius:22px; --ea-radius2:18px; --ea-shadow:0 18px 60px rgba(0,0,0,.45); --ea-field-bg:rgba(0,0,0,.22); --ea-field-border:rgba(255,255,255,.14); --ea-success:rgba(72, 255, 180, .16); --ea-successLine:rgba(72, 255, 180, .35); --container:1180px; } /* ========================= RESET / BASE ========================= */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ea-text); background: radial-gradient(1200px 700px at 50% -10%, rgba(42,167,255,.14), transparent 60%), linear-gradient(180deg, var(--ea-bg0) 0%, var(--ea-bg1) 40%, var(--ea-bg0) 100%); } img{ max-width:100%; display:block; } a{ color:inherit; } ::selection{ background: rgba(42,167,255,.22); } .ea-container{ width:100%; max-width:var(--container); margin:0 auto; padding: 0 16px; } .lead{ margin: 10px auto 0; max-width: 920px; color: var(--ea-muted); font-weight: 650; line-height: 1.6; } .lead strong{ font-weight: 900; color: rgba(234,240,255,.92); } /* ========================= HERO ========================= */ .ea-hero{ position:relative; overflow:hidden; min-height: 82vh; padding: 26px 0 32px; } .ea-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.02); filter: saturate(1.08) contrast(1.02); opacity: .92; } .ea-hero__vignette{ position:absolute; inset:0; background: radial-gradient(900px 520px at 20% 0%, rgba(106,92,255,.22), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(42,167,255,.18), transparent 55%), linear-gradient(180deg, rgba(5,10,20,.82) 0%, rgba(5,10,20,.62) 45%, rgba(5,10,20,.86) 100%); } .ea-hero__inner{ position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items:center; padding-top: 10px; } .ea-hero__fade{ position:absolute; left:0; right:0; bottom:0; height: 110px; background: linear-gradient( 180deg, rgba(5,10,20,0) 0%, rgba(5,10,20,.65) 60%, rgba(5,10,20,1) 100% ); z-index: 0; /* IMPORTANT */ pointer-events: none; } /* ========================= FIX LOGO VISIBILITÉ + TAILLE ========================= */ .ea-brand img, .ea-brandRow img{ width: auto !important; max-width: 220px; height: 52px; object-fit: contain; display: block; opacity: 1; } .ea-brandRow{ display:flex; justify-content:flex-start; align-items:center; gap:12px; margin-bottom: 6px; } .ea-brandRow img{ width: 168px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); } /* Badge mobile (Service premium) */ .ea-badge{ display:inline-flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(234,240,255,.90); font-weight: 900; font-size: 12.5px; box-shadow: 0 16px 45px rgba(0,0,0,.35); } .ea-badgeDot{ width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--ea-accent), var(--ea-accent2)); box-shadow: 0 0 0 5px rgba(42,167,255,.12); } /* ========================= TYPO — TITRES PLUS FINS + PLUS PETITS (à coller tout en bas) ========================= */ /* HERO H1 */ .ea-title{ font-weight: 520 !important; /* plus fin */ letter-spacing: -0.8px !important; font-size: clamp(28px, 3.6vw, 44px) !important; /* plus petit */ line-height: 1.06 !important; } /* Sous-titre (PVU) */ .ea-pvu{ font-weight: 360 !important; /* plus fin */ font-size: clamp(16px, 1.9vw, 20px) !important; } /* Titres des sections (H2) */ .ea-section h2{ font-weight: 760 !important; /* moins “bloc” */ letter-spacing: -0.5px !important; font-size: clamp(20px, 2.1vw, 30px) !important; /* plus petit */ line-height: 1.15 !important; } /* Titres des cartes véhicules + features (optionnel mais souvent nécessaire) */ .ea-vehicle__title, .ea-feature__t{ font-weight: 850 !important; /* au lieu de 950 */ font-size: 16px !important; /* réduit */ letter-spacing: -0.2px !important; } .ea-hero-desc .line{ display:block; } .ea-mark{ color: rgba(234,240,255,.96); background: rgba(42,167,255,.14); border: 1px solid rgba(42,167,255,.18); padding: 0 8px; border-radius: 999px; font-weight: 900; } /* Actions — desktop = row, mobile = column */ .ea-actions{ display:flex; flex-wrap:wrap; gap: 12px; max-width: 520px; } .ea-hero__quicklink{ margin-top: 12px; display:flex; align-items:center; justify-content:flex-start; } .ea-link{ display:inline-flex; align-items:center; gap: 8px; text-decoration:none; font-weight: 900; color: rgba(234,240,255,.92); opacity: .92; transition: transform .18s ease, opacity .18s ease, color .18s ease; } .ea-link:hover{ transform: translateY(-1px); opacity: 1; color: rgba(42,167,255,.95); } /* ===== Boutons (ORIGINE + sobre) ===== */ .ea-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 14px 18px; border-radius: 999px; text-decoration:none; user-select:none; -webkit-tap-highlight-color: transparent; font-weight:750; font-size:16px; line-height:1.15; color:#fff; background: linear-gradient(90deg, rgba(42,167,255,.06) 0%, rgba(42,167,255,.18) 36%, rgba(42,167,255,.62) 72%, rgba(29,92,255,.88) 100% ); border:1px solid rgba(255,255,255,.16); box-shadow: 0 18px 55px rgba(0,0,0,.32); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; min-width: 310px; max-width: 420px; } .ea-btn:hover{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(0,0,0,.38); filter: brightness(1.03); } .ea-btn__lines{ display:flex; flex-direction:column; gap:4px; text-align:center; } .ea-btn__line1{ font-size:18px; font-weight:760; } .ea-btn__line2{ font-size:15px; font-weight:650; opacity:.95; } /* ✅ Ghost : vrai bouton secondaire (sobre) */ .ea-btn--ghost{ background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.16); box-shadow: none; color: rgba(234,240,255,.92); } .ea-btn--ghost:hover{ background: rgba(0,0,0,.24); transform: translateY(-1px); filter:none; } /* Pills (mobile) */ .ea-pills{ margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; } .ea-pill{ padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); box-shadow: 0 14px 40px rgba(0,0,0,.24); color: rgba(234,240,255,.78); font-weight: 650; line-height: 1.45; } .ea-pill strong{ display:block; color: rgba(234,240,255,.94); font-weight: 950; margin-bottom: 2px; } /* Desktop/Mobile switches (TON HTML : desktop >= 981px) */ .ea-hero--mobile{ display:none; } .ea-hero--desktop{ display:block; } /* ========================= SECTIONS ========================= */ .ea-section{ padding: 62px 0; position:relative; } .ea-section h2{ margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 950; letter-spacing: -.4px; text-shadow: 0 14px 40px rgba(0,0,0,.38); } /* ========================= GRID SYSTEM ========================= */ .ea-grid{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .ea-col-4{ grid-column: span 4; } .ea-col-6{ grid-column: span 6; } /* ========================= CARD BASE ========================= */ .ea-card{ border-radius: var(--ea-radius2); background: var(--ea-card); border: 1px solid var(--ea-line); box-shadow: var(--ea-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow:hidden; } /* ========================= VEHICLES (gammes) ========================= */ .ea-vehicle{ display:flex; flex-direction:column; min-height: 340px; } .ea-vehicle__img{ height: 178px; background-size: cover; background-position: center; filter: saturate(1.06); } .ea-vehicle__body{ padding: 14px 14px 16px; display:flex; flex-direction:column; gap: 8px; } .ea-vehicle__title{ font-weight: 950; letter-spacing: -.2px; color: rgba(234,240,255,.95); } .ea-vehicle__meta{ margin:0; color: rgba(234,240,255,.72); font-weight: 650; line-height: 1.55; font-size: 13px; } .ea-vehicle__meta span{ color: rgba(234,240,255,.92); font-weight: 900; } .ea-priceRow{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: 10px; padding-top: 10px; } .ea-price{ font-weight: 950; color: rgba(234,240,255,.92); background: rgba(42,167,255,.10); border: 1px solid rgba(42,167,255,.22); padding: 8px 10px; border-radius: 999px; white-space:nowrap; } /* ========================= MINI BTN "JE RÉSERVE" — DEGRADÉ PRO ========================= */ .ea-miniBtn{ padding: 10px 12px; border-radius: 999px; font-weight: 850; /* 950 -> 850 */ font-size: 12.6px; letter-spacing: .2px; color: rgba(234,240,255,.96); border: 1px solid rgba(255,255,255,.14); background: radial-gradient(240px 120px at 20% 20%, rgba(42,167,255,.20), transparent 60%), linear-gradient(135deg, rgba(42,167,255,.86), rgba(106,92,255,.74)); box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .ea-miniBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 44px rgba(0,0,0,.34); } /* ========================= FEATURES (cequevousgagnez) ========================= */ .ea-feature__row{ display:flex; gap: 12px; align-items:flex-start; } .ea-icon{ width: 42px; height: 42px; border-radius: 16px; display:grid; place-items:center; background: rgba(42,167,255,.10); border: 1px solid rgba(42,167,255,.18); flex: 0 0 auto; box-shadow: 0 14px 40px rgba(0,0,0,.28); } .ea-icon svg{ width: 22px; height: 22px; fill: none; stroke: rgba(234,240,255,.92); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ea-feature__t{ font-weight: 950; letter-spacing: -.2px; color: rgba(234,240,255,.95); margin-bottom: 6px; } .ea-feature__d{ margin:0; color: rgba(234,240,255,.74); font-weight: 650; line-height: 1.6; } /* ========================= AVANTAGES MEMBRES ========================= */ .ea-free{ display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(234,240,255,.92); font-weight: 950; box-shadow: 0 16px 45px rgba(0,0,0,.35); } .ea-member-item{ display:flex; gap: 12px; align-items:flex-start; padding: 16px; } .ea-check{ width: 34px; height: 34px; border-radius: 14px; display:grid; place-items:center; background: rgba(42,167,255,.12); border: 1px solid rgba(42,167,255,.22); box-shadow: 0 14px 40px rgba(0,0,0,.25); flex: 0 0 auto; } .ea-check svg{ width: 20px; height: 20px; } .ea-member-item strong{ display:block; font-weight: 950; color: rgba(234,240,255,.95); margin-bottom: 4px; } .ea-member-item span{ display:block; color: rgba(234,240,255,.74); font-weight: 650; line-height: 1.55; } /* ========================= TAGS / STATUS ========================= */ .ea-tag{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); color: rgba(234,240,255,.82); font-weight: 850; font-size: 12px; } .ea-status{ display:inline-flex; align-items:center; justify-content:center; min-width: 54px; height: 32px; padding: 0 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-weight: 950; letter-spacing:.2px; font-size: 13px; } .ea-ok{ border-color: rgba(106,92,255,.35); background: linear-gradient(135deg, rgba(42,167,255,.95), rgba(106,92,255,.95)); color: #06101f; } .ea-no{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(234,240,255,.65); } /* ========================= COMPARATEUR (TABLE) ========================= */ .ea-compare{ padding: 0; } .ea-compare__wrap{ overflow:auto; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); } table.ea-compare__table{ width:100%; border-collapse:collapse; min-width: 760px; background: rgba(0,0,0,.14); } .ea-compare__table th, .ea-compare__table td{ padding: 14px 14px; border-bottom:1px solid rgba(255,255,255,.10); vertical-align:middle; text-align:left; } .ea-compare__table th{ position:sticky; top:0; background: rgba(5,10,20,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index:1; font-size:13px; color: rgba(234,240,255,.92); font-weight:900; } .ea-compare__table td{ font-size:14.5px; color: rgba(234,240,255,.88); font-weight:700; line-height:1.45; } .ea-compare__table td:nth-child(2), .ea-compare__table td:nth-child(3){ text-align:center; width: 170px; white-space: nowrap; } /* ========================= FAQ (details) ========================= */ .ea-faq details{ border:1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 12px 14px; background: rgba(0,0,0,.18); margin-top: 10px; } .ea-faq summary{ cursor:pointer; list-style:none; font-weight:900; color: rgba(234,240,255,.92); } .ea-faq summary::-webkit-details-marker{ display:none; } .ea-faq p{ margin:10px 0 0; color: var(--ea-muted); line-height:1.65; font-weight:650; font-size: 14.5px; } /* ========================= REVIEWS ========================= */ .ea-reviews .ea-card{ padding: 18px; } .ea-stars{ font-weight: 950; letter-spacing: 2px; color: rgba(255, 214, 118, .95); text-shadow: 0 12px 30px rgba(255, 214, 118, .14); margin-bottom: 10px; } .ea-quote{ margin:0 0 10px; color: rgba(234,240,255,.78); font-weight: 650; line-height: 1.6; } .ea-who{ color: rgba(234,240,255,.88); font-weight: 900; } /* ========================= FOOTER ========================= */ .ea-footer{ padding: 46px 0 30px; border-top: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); } .ea-footer a.ea-link{ font-weight: 850; } /* ========================= MODAL (Member popup) ========================= */ body.ea-noScroll{ overflow:hidden; } #eaMemberOverlay{ position:fixed; inset:0; display:none; z-index: 9999; } #eaMemberOverlay.is-open{ display:block; } .ea-overlayHit{ position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ea-modal{ position:relative; max-width: 680px; width: calc(100% - 28px); margin: 6vh auto; border-radius: var(--ea-radius); border: 1px solid rgba(255,255,255,.14); background: radial-gradient(900px 520px at 20% 0%, rgba(106,92,255,.20), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(42,167,255,.16), transparent 55%), rgba(0,0,0,.22); box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow:hidden; animation: eaModalIn .18s ease; } @keyframes eaModalIn{ from{ opacity:0; transform: translateY(10px) scale(.99); } to{ opacity:1; transform: translateY(0) scale(1); } } .ea-modal__top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); } .ea-modal__brand{ display:flex; align-items:center; gap: 12px; } .ea-modal__logo{ width: 62px; height: 62px; object-fit:contain; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.12); padding: 8px; } .ea-modal__title{ margin:0; font-weight: 950; letter-spacing:-.3px; } .ea-modal__sub{ margin: 2px 0 0; color: rgba(234,240,255,.68); font-weight: 650; font-size: 13px; } .ea-modal__close{ border:none; width: 40px; height: 40px; border-radius: 14px; cursor:pointer; color: rgba(234,240,255,.92); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: transform .18s ease, background .18s ease, border-color .18s ease; } .ea-modal__close:hover{ transform: translateY(-1px); background: rgba(42,167,255,.10); border-color: rgba(42,167,255,.28); } .ea-modal__body{ padding: 16px 16px 18px; } .ea-modal__text{ margin: 0 0 14px; color: rgba(234,240,255,.78); font-weight: 650; line-height: 1.6; } .ea-formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ea-formGrid > div:last-child{ grid-column: 1 / -1; } .ea-formGrid label{ display:block; margin-bottom: 8px; font-weight: 900; font-size: 13px; color: rgba(234,240,255,.90); } .ea-input{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--ea-field-border); background: var(--ea-field-bg); color: rgba(234,240,255,.92); font-size: 14px; font-weight: 650; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .ea-input::placeholder{ color: rgba(234,240,255,.45); } .ea-input:focus{ border-color: rgba(42,167,255,.45); box-shadow: 0 0 0 6px rgba(42,167,255,.12); background: rgba(0,0,0,.26); } .ea-hint{ margin-top: 6px; color: rgba(234,240,255,.58); font-weight: 650; font-size: 12px; line-height: 1.45; } .ea-modal__actions{ grid-column: 1 / -1; display:flex; gap: 10px; align-items:center; justify-content:flex-start; margin-top: 6px; } .ea-btnSmall{ border:none; cursor:pointer; padding: 12px 14px; border-radius: 999px; font-weight: 950; color:#06101f; background: linear-gradient(135deg, var(--ea-accent), var(--ea-accent2)); box-shadow: 0 18px 55px rgba(42,167,255,.18); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .ea-btnSmall:hover{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(42,167,255,.26); filter: brightness(1.03); } .ea-btnSmall--ghost{ background: rgba(255,255,255,.06); color: rgba(234,240,255,.94); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 55px rgba(0,0,0,.28); } #eaMemberSuccess{ grid-column: 1 / -1; display:none; margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--ea-success); border: 1px solid var(--ea-successLine); color: rgba(234,240,255,.92); font-weight: 850; line-height: 1.5; } /* ========================= WhatsApp Floating ========================= */ .ea-waFloat{ position: fixed; right: 16px; bottom: 16px; z-index: 9998; display:flex; align-items:center; gap: 10px; text-decoration:none; user-select:none; } .ea-waFloat__bubble{ display:none; padding: 10px 12px; border-radius: 999px; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.14); color: rgba(234,240,255,.92); font-weight: 900; box-shadow: 0 18px 55px rgba(0,0,0,.45); white-space:nowrap; } .ea-waFloat__btn{ width: 56px; height: 56px; display:grid; place-items:center; border-radius: 18px; background: linear-gradient(135deg, rgba(42,167,255,.95), rgba(106,92,255,.95)); border: 1px solid rgba(255,255,255,.14); color: #06101f; box-shadow: 0 18px 60px rgba(42,167,255,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .ea-waFloat:hover .ea-waFloat__btn{ transform: translateY(-1px); box-shadow: 0 22px 80px rgba(42,167,255,.30); filter: brightness(1.03); } @media (min-width: 980px){ .ea-waFloat__bubble{ display:inline-flex; } } /* ========================= RESPONSIVE ========================= */ @media (max-width: 980px){ .ea-hero__inner{ grid-template-columns: 1fr; gap: 16px; } .ea-actions{ flex-direction: column; align-items:flex-start; } .ea-btn{ width: min(250px, 55%); min-width: 0; } .ea-pills{ grid-template-columns: 1fr; } } @media (max-width: 860px){ .ea-grid{ gap: 12px; } .ea-col-4, .ea-col-6{ grid-column: span 12; } .ea-vehicle{ min-height: unset; } .ea-vehicle__img{ height: 190px; } } @media (max-width: 780px){ .ea-hero{ min-height: 80vh; padding-top: 10px; } .ea-title{ letter-spacing: -0.6px; } /* modal */ .ea-formGrid{ grid-template-columns: 1fr; } } /* Switch hero blocks — EXACT HTML spec */ @media (max-width: 980px){ .ea-hero--desktop{ display:none; } .ea-hero--mobile{ display:block; } } @media (min-width: 981px){ .ea-hero--desktop{ display:block; } .ea-hero--mobile{ display:none; } } /* ========================= FINESSE PREMIUM — OVERRIDES (PROPRE) (à placer TOUT en bas du fichier) ========================= */ /* rendu typographique plus net */ html, body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Base globale (sans tout écraser) */ body{ letter-spacing: .08px; } /* HERO H1 (ta finesse origine) */ .ea-title{ font-weight: 560; /* <- important : plus fin */ letter-spacing: -0.6px; } /* PVU et description */ .ea-pvu{ font-weight: 420; } .ea-hero-desc{ font-weight: 520; } /* Section titles (H2) : ton souci principal = 950 trop “béton” */ .ea-section h2{ font-weight: 800; /* 950 -> 800 (premium sans être gras) */ letter-spacing: -0.35px; } /* Lead : tu l’as mis à 650, trop “dense” */ .lead{ font-weight: 520; /* 650 -> 520 */ } .lead strong{ font-weight: 800; /* 900 -> 800 */ } /* Liens/badges trop gras */ .ea-link{ font-weight: 750; } /* 900 -> 750 */ .ea-badge{ font-weight: 800; } /* 900 -> 800 */ .ea-free{ font-weight: 800; } /* 950 -> 800 */ /* Titres de cards (gammes + features) */ .ea-vehicle__title{ font-weight: 850; } /* 950 -> 850 */ .ea-feature__t{ font-weight: 850; } /* 950 -> 850 */ .ea-member-item strong{ font-weight: 850; } /* 950 -> 850 */ /* FAQ summary (trop gras) */ .ea-faq summary{ font-weight: 850; } /* 900 -> 850 */ /* Reviews */ .ea-stars{ font-weight: 850; } /* 950 -> 850 */ .ea-who{ font-weight: 850; } /* 900 -> 850 */ /* ========================= PRICE BADGE — FIN & PREMIUM ========================= */ .ea-price{ font-weight: 800; /* 950 -> 800 */ font-size: 12.6px; letter-spacing: .18px; padding: 7px 10px; background: rgba(42,167,255,.08); border: 1px solid rgba(42,167,255,.20); box-shadow: none; } /* ========================= PRICE BADGE (FIN & PREMIUM) ========================= */ .ea-price{ font-weight: 760; /* au lieu de 950 */ font-size: 12.8px; letter-spacing: .2px; padding: 7px 10px; border-radius: 999px; background: rgba(42,167,255,.08); border: 1px solid rgba(42,167,255,.20); color: rgba(234,240,255,.92); box-shadow: none; /* important pour le côté “sobre” */ } /* ========================= FIX ALIGNEMENT HERO (titre + sous-titres) ========================= */ .ea-hero__inner > div{ padding-left: 0 !important; margin-left: 0 !important; } .ea-title, .ea-pvu, .ea-hero-desc, .ea-hero__quicklink, .ea-actions{ margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; text-align: left; } #eaApp p{ margin-left: 0; padding-left: 0; text-indent: 0; } html, body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ========================================================= HERO — ajustements premium (PVU + surlignage + quicklink) A COLLER TOUT EN BAS DU CSS ========================================================= */ /* PVU moins blanc, plus “gris premium” */ .ea-pvu{ color: rgba(234,240,255,.78) !important; /* au lieu de .92 */ font-weight: 420 !important; } /* Mots mis en valeur : blanc + surlignage fin dégradé discret */ .ea-mark{ position: relative; display: inline-block; padding: 0 .10em; /* très fin */ color: rgba(234,240,255,.98) !important; font-weight: 800 !important; background: transparent !important; border: 0 !important; } .ea-mark::after{ content:""; position:absolute; left: .06em; right: .06em; bottom: .10em; height: .40em; /* surlignage fin */ border-radius: 999px; background: linear-gradient( 90deg, rgba(42,167,255,.18), rgba(106,92,255,.14) ); z-index: -1; filter: blur(.1px); } /* Quicklink “Voir les avantages” : souligné + flèche premium */ .ea-hero__quicklink{ margin-top: 10px; } .ea-hero__quicklink .ea-link{ display:inline-flex; align-items:center; gap:8px; font-weight: 750; color: rgba(234,240,255,.88); border-bottom: 1px solid rgba(234,240,255,.22); /* compréhension cliquable */ padding-bottom: 2px; opacity: .95; transform: none; } .ea-hero__quicklink .ea-link:hover{ color: rgba(234,240,255,.98); border-bottom-color: rgba(42,167,255,.45); } /* Ajout flèche (sans toucher ton HTML si tu veux) */ .ea-hero__quicklink .ea-link::after{ content: "→"; font-weight: 800; opacity: .75; transform: translateY(-.5px); } /* Bouton “Réserver directement” = même dégradé que le bouton principal */ .ea-btn--ghost{ background: linear-gradient(90deg, rgba(42,167,255,.06) 0%, rgba(42,167,255,.18) 36%, rgba(42,167,255,.62) 72%, rgba(29,92,255,.88) 100% ) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: 0 18px 55px rgba(0,0,0,.32) !important; } .ea-btn--ghost:hover{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(0,0,0,.38) !important; filter: brightness(1.03); } .ea-socialGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .ea-socialCard{ display:flex; align-items:center; gap: 12px; padding: 16px 16px; border-radius: 18px; text-decoration:none; background: radial-gradient(520px 240px at 18% 0%, rgba(106,92,255,.16), transparent 62%), radial-gradient(520px 240px at 92% 12%, rgba(42,167,255,.14), transparent 58%), rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 55px rgba(0,0,0,.28); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .ea-socialCard:hover{ transform: translateY(-1px); border-color: rgba(42,167,255,.28); background: radial-gradient(520px 240px at 18% 0%, rgba(106,92,255,.18), transparent 62%), radial-gradient(520px 240px at 92% 12%, rgba(42,167,255,.18), transparent 58%), rgba(0,0,0,.18); } .ea-socialIcon{ width: 44px; height: 44px; border-radius: 16px; display:grid; place-items:center; background: rgba(42,167,255,.10); border: 1px solid rgba(42,167,255,.18); flex: 0 0 auto; } .ea-socialIcon svg{ width: 22px; height: 22px; fill: rgba(234,240,255,.92); } .ea-socialText{ min-width:0; } .ea-socialText strong{ display:block; font-weight: 950; letter-spacing: -.2px; color: rgba(234,240,255,.96); } .ea-socialText span{ display:block; margin-top: 4px; color: rgba(234,240,255,.72); font-weight: 650; font-size: 13.4px; line-height: 1.35; } .ea-socialArrow{ margin-left:auto; opacity: .75; font-weight: 900; } @media (max-width: 860px){ .ea-socialGrid{ grid-template-columns: 1fr; } }