/* ========================================================= Landing AdWords Paris (DA Grand Été) — smartduck Charte graphique 2026 : violet #5B2D8B / blanc chaud #F7F5F0 Typo : Selawik = clone open-source officiel Microsoft de Segoe UI (métriquement compatible, licence SIL OFL). Garantit le rendu Segoe UI pour TOUS les visiteurs (Windows, Mac, iOS), pas seulement Windows. Mobile-first (95-99% trafic mobile) ========================================================= */ /* ---- Polices Selawik (équivalent Segoe UI) — woff2 officiels Microsoft ---- */ @font-face { font-family: "Selawik"; src: url("../../font/selawik/Selawik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Selawik"; src: url("../../font/selawik/Selawik-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Selawik"; src: url("../../font/selawik/Selawik-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } .lp-paris-pro, .ge-sticky-cta, .ge-footer { /* Couleurs extraites des créas (affiches campagne) */ --ge-violet: #5B2D8B; /* violet foncé charte — accents/CTA, lisibilité */ --ge-violet-d: #4A2473; --ge-lavande: #9C80B7; /* violet lavande des créas — grandes surfaces (bande, vague, arc) */ --ge-lavande-d: #8A6FA6; --ge-violet-soft: rgba(156, 128, 183, 0.14); /* lavande très dilué */ --ge-violet-soft2: rgba(156, 128, 183, 0.22); --ge-bg: #FCFBF8; /* blanc cassé des créas */ --ge-anthracite: #282828; /* le vrai noir des titres créas (pas brun) */ --ge-grey: #6D6A66; --ge-beige: #E7E2D9; --ge-taupe: #D8CEC8; --ge-white: #FFFFFF; --ge-radius: 22px; --ge-radius-lg: 28px; --ge-radius-sm: 14px; --ge-shadow: 0 8px 30px rgba(47, 45, 43, 0.08); --ge-shadow-violet: 0 10px 30px rgba(91, 45, 139, 0.22); --ge-font: "Selawik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Charte §5 : Segoe UI = police officielle (titres + texte). Pas de police décorative, pas de mélange typo. Les titres = Segoe UI Bold (pas Neulis). */ --ge-font-display: var(--ge-font); /* Échelle d'espacement (base 4px) — espacements conformes & cohérents */ --ge-s1: 4px; --ge-s2: 8px; --ge-s3: 12px; --ge-s4: 16px; --ge-s5: 20px; --ge-s6: 24px; --ge-s8: 32px; --ge-s10: 40px; --ge-s12: 48px; --ge-s16: 64px; --ge-s20: 80px; /* Padding vertical des sections (responsive, multiple de l'échelle) */ --ge-section-pad: clamp(48px, 9vw, 88px); /* Gouttière de grille standard */ --ge-gutter: 20px; /* Hauteur du header fixe global (banner promo + nav) pour dégager le hero */ --ge-header-h: 112px; } /* ---- Base ---- */ .lp-paris-pro { background: var(--ge-bg); color: var(--ge-anthracite); font-family: var(--ge-font); line-height: 1.55; overflow-x: hidden; } /* FIX SCROLL : le thème global met scroll-behavior:smooth sur , ce qui entre en conflit avec le scroll-snap des carrousels et bloque le scroll vertical. On le neutralise sur cette LP (le smooth au clic est géré par le JS). */ html:has(.lp-paris-pro) { scroll-behavior: auto !important; } .lp-paris-pro * { box-sizing: border-box; } /* Charte 2026 : texte courant en Segoe UI (écrase le Montserrat global de _base.css). Les titres gardent Neulis via leurs classes (.ge-h1, .ge-h2, .ge-offer__main…). */ .lp-paris-pro { font-family: var(--ge-font); } .lp-paris-pro p, .lp-paris-pro li, .lp-paris-pro .ge-lead, .lp-paris-pro .ge-btn, .lp-paris-pro .ge-tag { font-family: var(--ge-font); } /* _base.css force p,a,li { font-size:14px } — on rétablit une taille lisible par défaut */ .lp-paris-pro p, .lp-paris-pro li { font-size: 1rem; } .ge-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 20px; } /* ---- Typo ---- Charte 2026 : PAS de capitales intégrales (règle §5.4). On neutralise le text-transform:uppercase imposé globalement par _base.css sur h1..h4, uniquement sur cette page. */ .lp-paris-pro h1, .lp-paris-pro h2, .lp-paris-pro h3, .lp-paris-pro h4, .lp-paris-pro h5, .lp-paris-pro h6 { text-transform: none; /* Charte §5 : Segoe UI partout, aucune police décorative. On écrase tout forçage Neulis hérité du thème global sur les titres de cette LP. */ font-family: var(--ge-font) !important; } /* Idem pour les éléments de marque qui pointaient sur Neulis Cursive */ .lp-paris-pro .ge-signature__title, .lp-paris-pro .lpp-script, .lp-paris-pro .ge-offer__main { font-family: var(--ge-font) !important; } .ge-h1 { font-family: var(--ge-font-display); font-weight: 700; /* Charte §5.3 : Titre = Segoe UI Bold */ font-size: clamp(1.95rem, 7vw, 3.4rem); line-height: 1.12; letter-spacing: -0.01em; text-transform: none; color: var(--ge-anthracite); } .ge-h2 { font-family: var(--ge-font-display); font-weight: 700; /* Segoe UI Bold */ font-size: clamp(1.55rem, 5vw, 2.4rem); line-height: 1.16; letter-spacing: -0.01em; text-transform: none; } .ge-accent { color: var(--ge-lavande-d); } .ge-lead { font-size: clamp(1.04rem, 2.7vw, 1.22rem); color: var(--ge-grey); margin-top: var(--ge-s4); max-width: 40ch; } .ge-lead strong { color: var(--ge-anthracite); font-weight: 700; } .ge-eyebrow { letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 600; color: var(--ge-lavande-d); margin: 0; } /* ---- En-tête de section homogène (eyebrow + titre) ---- */ .ge-section-head { display: flex; flex-direction: column; gap: var(--ge-s2); margin-bottom: var(--ge-s8); } .ge-section-head--center { align-items: center; text-align: center; } .ge-section-head .ge-h2 { margin: 0; } /* Le H2/eyebrow suivent l'alignement de leur section-head (le thème global force center sinon) */ .ge-section-head--center .ge-h2, .ge-section-head--center .ge-eyebrow { text-align: center; } /* ---- Tag ---- */ .ge-tag { display: inline-flex; align-items: center; gap: var(--ge-s2); background: var(--ge-violet-soft); color: var(--ge-lavande-d); font-weight: 600; font-size: 0.88rem; padding: var(--ge-s2) var(--ge-s4); border-radius: 999px; margin-bottom: var(--ge-s5); } .ge-tag i { font-size: 1.05rem; } /* ---- Boutons (CTA = modale Booker via .centersRdvBtn) ---- */ .ge-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ge-s2); font-weight: 600; font-size: 1.05rem; min-height: 54px; /* zone tactile mobile (reco UI/UX ≥48px) */ padding: var(--ge-s4) var(--ge-s8); border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; line-height: 1; } .ge-btn:active { transform: scale(.98); } .ge-btn i { font-size: 1.2rem; } .ge-btn--primary { background: var(--ge-violet); color: var(--ge-white); box-shadow: var(--ge-shadow-violet); } .ge-btn--primary:hover { transform: translateY(-2px); background: var(--ge-violet-d); } .ge-btn--ghost { background: transparent; color: var(--ge-anthracite); border: 1.5px solid var(--ge-taupe); } .ge-btn--ghost:hover { background: var(--ge-white); border-color: var(--ge-violet); color: var(--ge-violet); } .ge-btn--lg { font-size: 1.12rem; padding: var(--ge-s5) var(--ge-s8); } .ge-btn--block { width: 100%; } /* ---- Rythme sections ---- */ .ge-section { padding-block: var(--ge-section-pad); } /* Décalage d'ancrage pour que les cibles de scroll ne passent pas sous le header fixe */ #geCampagne, #geEdu { scroll-margin-top: calc(var(--ge-header-h) + 16px); } /* ========================================================= HERO ========================================================= */ .ge-hero { position: relative; /* Header fixe + petit espace. Réduit sur mobile pour garder le H1+offre+CTA above-the-fold. */ padding-top: calc(var(--ge-header-h) + var(--ge-s4)); padding-bottom: clamp(56px, 12vw, 120px); /* place pour la vague */ background: var(--ge-bg); /* blanc cassé des créas, plat (pas de texture) */ overflow: hidden; text-align: center; } /* Bande lavande horizontale en haut (comme la créa) */ .ge-hero__band { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--ge-lavande); } .ge-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--ge-s6); position: relative; z-index: 1; } /* Mobile : le visuel (photo + jackpot) passe EN HAUT du hero (avant le texte) */ .ge-hero__visual { order: -1; width: 100%; display: flex; flex-direction: column; gap: var(--ge-s4); } .ge-hero__col { order: 0; } .ge-hero__col { display: flex; flex-direction: column; align-items: center; width: 100%; } .ge-hero .ge-tag { margin-bottom: var(--ge-s4); } .ge-h1 { text-align: center; max-width: 16ch; margin: 0; } .ge-hero .ge-lead { margin-top: var(--ge-s3); margin-bottom: var(--ge-s5); max-width: 38ch; } .ge-hero .ge-offer { margin-bottom: var(--ge-s5); } .ge-btns { display: flex; flex-wrap: wrap; gap: var(--ge-s3); justify-content: center; width: 100%; margin-top: var(--ge-s6); } .ge-trust-hero { margin-top: var(--ge-s6); } .ge-hero__note { font-size: 0.78rem; color: var(--ge-grey); margin-top: var(--ge-s5); } /* Média hero — mobile : dessous, ratio paysage compact (ne pousse pas le fold) */ .ge-hero__media { margin: 0; width: 100%; max-width: 420px; border-radius: var(--ge-radius-lg); overflow: hidden; box-shadow: var(--ge-shadow); } .ge-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; /* accroche visuelle en haut du hero mobile */ object-fit: cover; object-position: center 25%; } /* Vague lavande organique en bas (élément de marque créa) */ .ge-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(80px, 13vw, 150px); z-index: 0; display: block; } /* ---- Bloc signature "le bel été" + arc (déplacé en section campagne) ---- */ .ge-signature { display: flex; flex-direction: column; align-items: center; gap: 2px; } .ge-signature__title { font-family: var(--ge-font-display); font-weight: 500; /* fin, comme la créa */ font-size: clamp(1.7rem, 6vw, 2.3rem); color: var(--ge-anthracite); line-height: 1; } .ge-signature__arc { width: clamp(160px, 60%, 240px); height: 14px; color: var(--ge-lavande); /* arc lavande */ margin-bottom: var(--ge-s2); } .ge-signature__brand { font-family: var(--ge-font-display); font-weight: 500; font-size: clamp(1.05rem, 3.5vw, 1.3rem); color: var(--ge-anthracite); } /* ---- Micro-réassurance hero (note réelle Google) ---- */ .ge-trust-hero { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--ge-s2) var(--ge-s3); margin-top: var(--ge-s2); } .ge-trust-hero__stars { display: inline-flex; gap: 2px; color: #E5B53D; /* étoiles dorées sobres — hors palette violet, usage iconographique réassurance */ font-size: 1rem; } .ge-trust-hero__txt { font-size: 0.92rem; color: var(--ge-grey); } .ge-trust-hero__txt strong { color: var(--ge-anthracite); } /* ---- Énoncé de l'offre (texte exact CDC) — carte mise en avant ---- */ .ge-offer { text-align: center; background: var(--ge-white); border: 1.5px solid var(--ge-violet-soft2); border-radius: var(--ge-radius-lg); padding: clamp(26px, 6vw, 38px) clamp(20px, 5vw, 40px); box-shadow: 0 12px 34px rgba(91, 45, 139, 0.14); /* ombre violette = point focal */ position: relative; max-width: 480px; width: 100%; } /* Liseré lavande marqué en haut de la carte (accent forme) */ .ge-offer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90px; height: 5px; border-radius: 0 0 999px 999px; background: var(--ge-lavande); } .ge-offer__visual { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto var(--ge-s4); border-radius: var(--ge-radius-sm); } .ge-offer__main { display: flex; flex-direction: row; /* sur une ligne : gagne de la hauteur, occupe la largeur */ flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--ge-s3); font-family: var(--ge-font-display); font-weight: 600; /* marqué : c'est L'offre mise en avant */ color: var(--ge-violet); /* couleur identitaire = ressort fort */ margin: 0; line-height: 1.05; letter-spacing: -0.01em; } .ge-offer__line { font-size: clamp(1.5rem, 4.5vw, 2.2rem); white-space: nowrap; } .ge-offer__eq { font-size: clamp(1.3rem, 3.5vw, 1.8rem); color: var(--ge-lavande); } .ge-offer__main sup { color: var(--ge-lavande); font-size: 0.35em; vertical-align: super; } /* Faits de l'offre : liste à pictos (remplace le texte brut) */ .ge-offer__facts { list-style: none; margin: var(--ge-s5) 0 0; padding: var(--ge-s5) 0 0; border-top: 1px solid var(--ge-beige); display: flex; flex-direction: column; gap: var(--ge-s3); text-align: left; } .ge-offer__fact { display: flex; align-items: center; gap: var(--ge-s3); font-size: clamp(0.9rem, 2.4vw, 0.98rem); color: var(--ge-grey); line-height: 1.35; } .ge-offer__fact i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--ge-violet-soft); color: var(--ge-violet); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .ge-offer__fact strong { color: var(--ge-anthracite); font-weight: 600; } .ge-offer__fact:first-child strong { color: var(--ge-violet); } /* ---- Bandeau jackpot (jeu concours) ---- */ .ge-jackpot { display: flex; flex-direction: column; align-items: center; /* mobile : tag + texte + CTA centrés */ text-align: center; gap: var(--ge-s3); background: linear-gradient(120deg, var(--ge-violet) 0%, #7A47B0 100%); color: #fff; border-radius: var(--ge-radius); padding: var(--ge-s5) var(--ge-s6); max-width: 480px; width: 100%; box-shadow: 0 12px 30px rgba(91, 45, 139, 0.28); } .ge-jackpot__tag { display: inline-flex; align-items: center; gap: var(--ge-s2); background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; padding: var(--ge-s1) var(--ge-s3); border-radius: 999px; } .ge-jackpot__tag i { font-size: 1rem; } .ge-jackpot__lead { margin: 0; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.95); } .ge-jackpot__lead strong { color: #fff; font-weight: 700; } .ge-jackpot__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--ge-s2); background: #fff; color: var(--ge-violet); font-weight: 600; font-size: 1rem; min-height: 48px; padding: var(--ge-s3) var(--ge-s6); border-radius: 999px; text-decoration: none; transition: transform .15s ease, background .2s ease; } .ge-jackpot__cta i { font-size: 1.2rem; } .ge-jackpot__cta:hover { transform: translateY(-2px); background: var(--ge-bg); } .ge-jackpot__cta:active { transform: scale(.98); } /* ========================================================= STATS BAR ========================================================= */ .ge-stats { padding-block: var(--ge-s6); } .ge-stats__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-gutter); } .ge-stat { display: flex; align-items: center; gap: var(--ge-s4); background: var(--ge-white); border: 1px solid var(--ge-beige); border-radius: var(--ge-radius); padding: var(--ge-s5) var(--ge-s6); } .ge-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--ge-violet-soft); color: var(--ge-lavande-d); } .ge-stat__icon i { font-size: 1.5rem; } .ge-stat__value { font-family: var(--ge-font-display); font-weight: 500; font-size: 1.18rem; color: var(--ge-anthracite); line-height: 1.1; } .ge-stat__label { font-size: 0.82rem; color: var(--ge-grey); } .ge-stat__value, .ge-stat__label { display: block; } /* ========================================================= ARGUMENT CLÉ (édu) ========================================================= */ /* En-tête de section (fond clair, pas de violet dominant — quota ≤15%) */ .ge-edu__head { text-align: center; max-width: 24ch; margin: 0 auto var(--ge-s8); display: flex; flex-direction: column; align-items: center; gap: var(--ge-s3); } /* Section edu : 2 colonnes texte / visuel (mobile = empilé) */ .ge-edu__cols { display: flex; flex-direction: column; gap: var(--ge-s8); align-items: center; } .ge-edu__visual { margin: 0; width: 100%; max-width: 460px; border-radius: var(--ge-radius-lg); overflow: hidden; box-shadow: var(--ge-shadow); } .ge-edu__visual img { display: block; width: 100%; height: auto; } /* Encart "règle" mis en avant */ .ge-rule { background: var(--ge-violet-soft); border-left: 4px solid var(--ge-violet); border-radius: 0 var(--ge-radius-sm) var(--ge-radius-sm) 0; padding: var(--ge-s4) var(--ge-s5); margin: var(--ge-s5) 0; } .ge-rule__badge { display: inline-flex; align-items: center; gap: var(--ge-s2); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--ge-violet); margin-bottom: var(--ge-s2); } .ge-rule__badge i { font-size: 1.1rem; color: #E5B53D; } .ge-rule__txt { margin: 0 !important; font-size: clamp(0.98rem, 2.4vw, 1.08rem) !important; line-height: 1.5 !important; color: var(--ge-anthracite) !important; text-align: left !important; } .ge-rule__txt strong { color: var(--ge-violet); font-weight: 700; } .ge-edu__head .ge-eyebrow { display: inline-flex; align-items: center; gap: var(--ge-s2); } /* Corps de texte long rendu lisible (chapô + intertitres + pull-quote) */ .ge-prose { max-width: 46ch; /* largeur de lecture mobile-confort (reco 30-50ch) */ margin-inline: auto; } .ge-prose p { font-size: clamp(1rem, 2.4vw, 1.06rem); line-height: 1.68; color: var(--ge-grey); margin: 0 0 1.25em; text-align: justify; text-wrap: pretty; } .ge-prose strong { color: var(--ge-anthracite); font-weight: 600; } /* Chapô : intro mise en relief */ .ge-prose__lead { font-size: clamp(1.08rem, 2.8vw, 1.2rem) !important; line-height: 1.55 !important; color: var(--ge-anthracite) !important; } /* Intertitres : repères de lecture, accent lavande discret */ .ge-prose__subhead { font-family: var(--ge-font-display); font-weight: 500; font-size: clamp(1.15rem, 3.4vw, 1.35rem); line-height: 1.25; color: var(--ge-anthracite); text-transform: none; margin: 2em 0 0.6em; padding-left: var(--ge-s4); border-left: 3px solid var(--ge-lavande); } /* Pull-quote : phrase de synthèse mise en valeur sur fond beige */ .ge-pullquote { margin: var(--ge-s8) 0 0; background: var(--ge-beige); border-left: 4px solid var(--ge-violet); border-radius: 0 var(--ge-radius-sm) var(--ge-radius-sm) 0; padding: var(--ge-s6) var(--ge-s6); font-family: var(--ge-font-display); font-weight: 500; font-size: clamp(1.1rem, 2.9vw, 1.28rem); line-height: 1.45; color: var(--ge-anthracite); } /* ========================================================= BÉNÉFICES ========================================================= */ .ge-benefits__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-gutter); } .ge-card { background: var(--ge-white); border-radius: var(--ge-radius); padding: var(--ge-s8) var(--ge-s6); box-shadow: 0 2px 14px rgba(47, 45, 43, 0.06); /* ombre douce, pas de bordure dure (reco UI/UX) */ transition: transform .2s ease, box-shadow .2s ease; } .ge-card:hover { transform: translateY(-3px); box-shadow: var(--ge-shadow); } .ge-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ge-violet-soft); color: var(--ge-lavande-d); margin-bottom: var(--ge-s4); } .ge-card__icon i { font-size: 1.75rem; } .ge-card h3 { font-family: var(--ge-font-display); font-weight: 500; font-size: 1.18rem; margin-bottom: var(--ge-s2); text-transform: none; } .ge-card p { color: var(--ge-grey); font-size: 0.95rem; } /* ========================================================= CAMPAGNE (affiche) ========================================================= */ .ge-campaign__intro { text-align: center; color: var(--ge-grey); font-size: 1.02rem; margin: var(--ge-s4) 0 var(--ge-s8); } .ge-campaign__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-gutter); max-width: 440px; margin-inline: auto; } .ge-campaign__item { margin: 0; border-radius: var(--ge-radius-lg); overflow: hidden; box-shadow: var(--ge-shadow); background: var(--ge-white); border: 1px solid var(--ge-beige); } .ge-campaign__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* ========================================================= BANDEAU RÉASSURANCE (pictos sobres) ========================================================= */ .ge-section--tight { padding-block: clamp(28px, 5vw, 40px); } .ge-reassure { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ge-s4); } .ge-reassure li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ge-s2); font-size: 0.92rem; color: var(--ge-anthracite); } .ge-reassure i { font-size: 1.65rem; color: var(--ge-lavande-d); /* accent forme, monochrome */ } /* ========================================================= CTA FINAL ========================================================= */ .ge-final { background: var(--ge-beige); } .ge-final__inner { text-align: center; display: flex; flex-direction: column; align-items: center; } .ge-final__sub { color: var(--ge-grey); margin: var(--ge-s4) 0 var(--ge-s8); font-size: 1.05rem; max-width: 46ch; } .ge-final__reassure { display: inline-flex; align-items: center; gap: var(--ge-s2); flex-wrap: wrap; justify-content: center; margin-top: var(--ge-s5); font-size: 0.86rem; color: var(--ge-grey); } .ge-final__reassure i { color: var(--ge-lavande-d); } /* ========================================================= STICKY CTA ========================================================= */ .ge-sticky-cta { position: fixed; left: 50%; bottom: var(--ge-s5); transform: translateX(-50%) translateY(140%); z-index: 90; display: inline-flex; align-items: center; gap: var(--ge-s2); background: var(--ge-violet); color: #fff; font-weight: 600; font-size: 1rem; padding: var(--ge-s4) var(--ge-s6); border-radius: 999px; text-decoration: none; box-shadow: var(--ge-shadow-violet); transition: transform .3s ease, opacity .3s ease; opacity: 0; white-space: nowrap; } .ge-sticky-cta.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .ge-sticky-cta i { font-size: 1.25rem; } /* ========================================================= FOOTER ========================================================= */ .ge-footer { background: var(--ge-anthracite); color: var(--ge-bg); padding-block: var(--ge-s10) var(--ge-s8); text-align: center; font-family: var(--ge-font); } .ge-footer__signature { font-size: 1.05rem; } .ge-footer__signature strong { color: #fff; } .ge-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ge-s3); margin: var(--ge-s4) 0; font-size: 0.9rem; } .ge-footer__links a { color: var(--ge-taupe); text-decoration: none; } .ge-footer__links a:hover { color: #fff; text-decoration: underline; } .ge-footer__links span { color: var(--ge-grey); } .ge-footer__legal { font-size: 0.76rem; color: var(--ge-taupe); max-width: 58ch; margin-inline: auto; line-height: 1.5; } /* ========================================================= AVIS CLIENTS (carrousel Google) ========================================================= */ .ge-reviews { background: var(--ge-bg); } .ge-reviews__viewport { overflow: hidden; margin-inline: calc(var(--ge-gutter) * -1); padding-inline: var(--ge-gutter); } .ge-reviews__track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ge-gutter); touch-action: pan-x; /* le carrousel ne gère que l'horizontal */ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ge-reviews__track::-webkit-scrollbar { display: none; } .ge-review { flex: 0 0 86%; display: flex; flex-direction: column; gap: var(--ge-s3); background: var(--ge-white); border-radius: var(--ge-radius); padding: var(--ge-s6); box-shadow: 0 2px 14px rgba(47, 45, 43, 0.06); } .ge-review__stars { color: #E5B53D; font-size: 1rem; display: inline-flex; gap: 1px; } .ge-review__txt { font-size: 1rem; line-height: 1.6; color: var(--ge-anthracite); margin: 0; flex: 1; } .ge-review__author { display: flex; align-items: center; justify-content: space-between; gap: var(--ge-s3); margin: 0; font-weight: 600; font-size: 0.92rem; color: var(--ge-anthracite); } .ge-review__src { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 0.82rem; color: var(--ge-grey); } .ge-review__src i { font-size: 1rem; color: var(--ge-lavande-d); } .ge-reviews__nav, .ge-ugc__nav { display: flex; justify-content: center; gap: var(--ge-s3); margin-top: var(--ge-s6); } .ge-reviews__btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ge-taupe); background: var(--ge-white); color: var(--ge-anthracite); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: border-color .2s ease, color .2s ease, transform .15s ease; } .ge-reviews__btn:hover { border-color: var(--ge-violet); color: var(--ge-violet); } .ge-reviews__btn:active { transform: scale(.94); } /* ========================================================= UGC VIDÉOS (reels verticaux) ========================================================= */ .ge-ugc__viewport { overflow: hidden; margin-inline: calc(var(--ge-gutter) * -1); padding-inline: var(--ge-gutter); } .ge-ugc__track { list-style: none; margin: 0; padding: var(--ge-s2) 0; display: flex; gap: var(--ge-gutter); overflow-x: auto; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ge-ugc__track::-webkit-scrollbar { display: none; } .ge-ugc__item { flex: 0 0 70%; position: relative; aspect-ratio: 9 / 16; border-radius: var(--ge-radius); overflow: hidden; background: var(--ge-anthracite); box-shadow: var(--ge-shadow); } .ge-ugc__video { display: block; width: 100%; height: 100%; object-fit: cover; } .ge-ugc__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 50%; background: var(--ge-violet); /* fond violet contrasté (charte) */ color: #fff; /* triangle play blanc, bien visible */ font-size: 1.85rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(47, 45, 43, 0.4); transition: transform .18s ease, background .18s ease; } /* Triangle play en CSS pur (indépendant de la police d'icônes) */ .ge-ugc__play-tri { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; /* triangle blanc pointant à droite */ margin-left: 4px; /* recentrage optique */ } .ge-ugc__play:hover { transform: scale(1.08); background: var(--ge-violet-d); } .ge-ugc__play.is-hidden { opacity: 0; visibility: hidden; } /* léger voile pour faire ressortir le bouton sur le poster */ .ge-ugc__item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,40,40,0) 40%, rgba(40,40,40,0.35) 100%); pointer-events: none; transition: opacity .3s ease; } .ge-ugc__item.is-playing::before { opacity: 0; } /* ========================================================= GALERIE « DANS NOS CENTRES » ========================================================= */ .ge-places__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-gutter); } .ge-places__item { margin: 0; border-radius: var(--ge-radius); overflow: hidden; box-shadow: var(--ge-shadow); } .ge-places__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; } .ge-places__item:hover img { transform: scale(1.03); } /* ========================================================= REVEAL — DÉSACTIVÉ (tout visible, aucune animation au scroll) ========================================================= */ [data-reveal], [data-reveal].is-revealed { opacity: 1; transform: none; } /* ========================================================= TABLETTE (≥720px) ========================================================= */ @media (min-width: 720px) { .ge-stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--ge-gutter); } .ge-stat { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--ge-s3); } .ge-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: var(--ge-gutter); } .ge-reassure { grid-template-columns: repeat(4, 1fr); gap: var(--ge-s6); } .ge-places__grid { grid-template-columns: repeat(3, 1fr); gap: var(--ge-gutter); } .ge-campaign__grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; } .ge-prose { max-width: 62ch; } .ge-edu__head { max-width: 30ch; } .ge-review { flex-basis: 46%; } .ge-ugc__item { flex-basis: 30%; } } /* ========================================================= DESKTOP — grille Swiss (≥980px) Container élargi, alignements à gauche, asymétrie maîtrisée. ========================================================= */ @media (min-width: 980px) { .ge-container { max-width: 1350px; padding-inline: 40px; } /* ---- HERO asymétrique : texte à gauche, photo à droite ---- Contrairement à Grand Été (pas de header fixe), notre LP Paris a un header light fixe (.lpp-header) : on dégage le hero sous lui pour ne pas masquer le tag. */ .ge-hero { text-align: left; padding-top: calc(var(--ge-header-h) + var(--ge-s5)); padding-bottom: clamp(40px, 5vw, 72px); min-height: 0; } .ge-hero__inner { flex-direction: row; align-items: center; /* colonnes centrées verticalement l'une vs l'autre */ justify-content: space-between; gap: clamp(40px, 4vw, 72px); padding-top: var(--ge-s8); } .ge-hero__col { flex: 1 1 56%; align-items: flex-start; text-align: left; } /* H1 sur 2 lignes : largeur pleine de la colonne + fonte ajustée */ .ge-h1 { text-align: left; font-size: clamp(2.2rem, 2.9vw, 2.8rem); max-width: none; width: 100%; } .ge-hero .ge-lead { margin-top: var(--ge-s4); margin-bottom: var(--ge-s5); margin-inline: 0; max-width: none; font-size: 1.05rem; } .ge-hero .ge-offer { margin-inline: 0; margin-bottom: var(--ge-s5); align-self: stretch; max-width: none; } .ge-hero .ge-btns { margin-top: var(--ge-s4); } .ge-hero .ge-trust-hero { margin-top: var(--ge-s5); } .ge-hero__note { display: none; } /* astérisque déjà expliqué dans le footer légal */ .ge-btns { justify-content: flex-start; } /* Benefits alignés à gauche dans la colonne (cf. maquette client) */ .ge-hero__benefits { margin-left: 0 !important; margin-right: 0 !important; } .ge-trust-hero { justify-content: flex-start; } /* Colonne droite = photo + jackpot empilés, hauteur proche de la gauche (comble le trou) */ .ge-hero__visual { order: 0; /* desktop : ordre DOM normal → à droite */ flex: 1 1 40%; gap: var(--ge-s4); } .ge-hero .ge-offer__line { font-size: clamp(1.5rem, 2.1vw, 1.9rem); } .ge-hero .ge-offer { padding: var(--ge-s5) var(--ge-s6); } .ge-hero__media { margin: 0; max-width: none; overflow: hidden; border-radius: var(--ge-radius-lg); box-shadow: var(--ge-shadow); } .ge-hero__media img { aspect-ratio: 5 / 4; width: 100%; height: auto; object-fit: cover; object-position: center 25%; } .ge-hero .ge-jackpot { margin: 0; max-width: none; } /* ---- EDU : titre centré au-dessus, puis 2 colonnes texte / visuel ---- */ .ge-edu__head { text-align: center; align-items: center; max-width: none; margin: 0 auto var(--ge-s10); } .ge-edu__head .ge-h2 { max-width: 26ch; margin-inline: auto; } .ge-edu__head .ge-h2, .ge-edu__head .ge-eyebrow { text-align: center; } .ge-edu__cols { flex-direction: row; align-items: center; gap: clamp(40px, 5vw, 72px); } .ge-edu__cols .ge-prose { flex: 1 1 56%; margin: 0; max-width: none; } .ge-edu__visual { flex: 1 1 44%; max-width: 480px; align-self: center; } /* ---- BÉNÉFICES : 4 colonnes alignées, séparées par filets fins ---- */ .ge-benefits__grid { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ge-beige); } .ge-benefits .ge-card { box-shadow: none; background: transparent; border-radius: 0; border-right: 1px solid var(--ge-beige); border-bottom: 1px solid var(--ge-beige); padding: var(--ge-s8) var(--ge-s6); } .ge-benefits .ge-card:last-child { border-right: none; } .ge-benefits .ge-card:hover { transform: none; background: var(--ge-white); } /* Sections centrées : restent centrées (titre + sous-texte cohérents) */ /* ---- AVIS : 3 colonnes, on masque les flèches (tout visible) ---- */ .ge-reviews__track { overflow-x: visible; flex-wrap: wrap; } .ge-review { flex: 1 1 calc(33.333% - var(--ge-gutter)); } .ge-reviews__nav { display: none; } /* ---- CAMPAGNE ---- */ .ge-campaign__grid { max-width: none; } /* ---- CTA final : garde le centrage (point focal) ---- */ } @media (min-width: 1200px) { .ge-benefits__grid { gap: 0; } } /* ========================================================= RESKIN DA du funnel Booker forké (lead-first) — scope LP Le fork réutilise les classes sd-booker-* (CSS booker-funnel.css). On repasse les accents charte 2026 (violet) sur la LP uniquement. ========================================================= */ html.lpp-page .sd-booker-modal { --color-primary: #5B2D8B; } html.lpp-page .sd-booker-progress__fill { background: linear-gradient(90deg, #5B2D8B 0%, #8B5FBF 100%) !important; } html.lpp-page .sd-booker-btn--primary, html.lpp-page .sd-booker-trt-cta, html.lpp-page .sd-booker-slots-confirm, html.lpp-page .sd-booker-submit { background: #5B2D8B !important; border-color: #5B2D8B !important; color: #fff !important; } html.lpp-page .sd-booker-btn--primary:hover, html.lpp-page .sd-booker-trt-cta:hover, html.lpp-page .sd-booker-slots-confirm:hover { background: #4A2473 !important; } html.lpp-page .sd-booker-slot-btn.is-selected, html.lpp-page .sd-booker-slot-btn.is-selected:hover { background: #5B2D8B !important; box-shadow: inset 0 0 0 1.5px #5B2D8B !important; } html.lpp-page .sd-booker-slot-btn:focus-visible { box-shadow: inset 0 0 0 2px #5B2D8B, 0 0 0 3px rgba(91,45,139,.18) !important; } html.lpp-page .sd-booker-cal-cell--selected { background: #5B2D8B !important; border-color: #5B2D8B !important; color: #fff !important; } html.lpp-page .sd-booker-input.is-valid { border-color: #5B2D8B !important; } /* ========================================================= COMPOSANTS SPÉCIFIQUES LP PARIS (header/footer light, cartes centres) ========================================================= */ /* Header light fixe */ .lpp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(252, 251, 248, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--ge-beige); } .lpp-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-block: 8px; } .lpp-logo img { height: 34px; width: auto; display: block; } .lpp-header__cta { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; } /* Le hero compense déjà via --ge-header-h ; on réduit le header fixe sur cette LP */ .lp-paris-pro { --ge-header-h: 72px; } /* Offre : en-tête signature dans la carte */ .ge-offer__head { display: flex; align-items: baseline; justify-content: center; gap: var(--ge-s3); margin-bottom: var(--ge-s4); flex-wrap: wrap; } .ge-offer__head .ge-signature__title { font-family: var(--ge-font-display); font-size: 1.6rem; color: var(--ge-anthracite); } .ge-offer__eyebrow { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ge-lavande-d); font-weight: 600; text-transform: uppercase; } /* Boutons petits (cartes centres) */ .ge-btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.95rem; } /* Réassurance en colonne (section édu) */ .ge-reassure--col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ge-s3); } .ge-reassure--col li { display: flex; align-items: center; gap: var(--ge-s3); background: var(--ge-white); border: 1px solid var(--ge-beige); border-radius: var(--ge-radius-sm); padding: var(--ge-s4) var(--ge-s5); font-weight: 600; color: var(--ge-anthracite); } .ge-reassure--col li i { color: var(--ge-violet); font-size: 1.3rem; } /* Grille des 3 centres */ .ge-centres__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-s5); } .ge-centre-card { background: var(--ge-white); border: 1px solid var(--ge-beige); border-radius: var(--ge-radius); overflow: hidden; box-shadow: var(--ge-shadow); display: flex; flex-direction: column; } .ge-centre-card__photo { aspect-ratio: 16/10; overflow: hidden; background: var(--ge-beige); } .ge-centre-card__photo img { width: 100%; height: 100%; object-fit: cover; } .ge-centre-card__body { padding: var(--ge-s5); display: flex; flex-direction: column; gap: var(--ge-s3); } .ge-centre-card__name { font-family: var(--ge-font-display); font-weight: 500; font-size: 1.3rem; } .ge-centre-card__adr { display: flex; align-items: flex-start; gap: 6px; color: var(--ge-grey); font-size: 0.92rem; } .ge-centre-card__adr i { color: var(--ge-lavande-d); margin-top: 2px; } .ge-centre-card__actions { display: flex; gap: var(--ge-s3); margin-top: auto; } .ge-centre-card__actions .ge-btn { flex: 1; } /* Footer : centres + tels */ .ge-footer__centres { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ge-s4); margin: var(--ge-s4) 0; font-size: 0.9rem; } .ge-footer__centres a { color: var(--ge-lavande); text-decoration: none; } .ge-footer__centres a:hover { text-decoration: underline; } @media (min-width: 768px) { .ge-centres__grid { grid-template-columns: repeat(3, 1fr); } .lpp-header__inner { min-height: 70px; } .lpp-logo img { height: 40px; } .lp-paris-pro { --ge-header-h: 84px; } } /* Bannière cookies du site : restylée charte sur la LP (scopé .lpp-page) */ html.lpp-page #cookie-notice { background: #282828 !important; background-image: none !important; } html.lpp-page #cookie-notice #cn-accept-cookie, html.lpp-page #cookie-notice .cn-button { background: #5B2D8B !important; border-color: #5B2D8B !important; color: #fff !important; border-radius: 999px !important; } html.lpp-page #cookie-notice .cn-text-container { color: #fff !important; } /* Masquer les barres flottantes résiduelles du lead-form global */ html.lpp-page .sd-mobile-bar, html.lpp-page #smartduck-inline-form, html.lpp-page #smartduck-rdv-modal { display: none !important; } /* Expression d'offre insécable (ne jamais couper "1 zone achetée = 1 zone offerte") */ .lp-paris-pro .ge-nowrap { white-space: nowrap; } /* ========================================================= PAGE DE CONFIRMATION (réservation aboutie) — /epilation-laser-paris-merci ========================================================= */ .ge-thanks { padding-top: calc(var(--ge-header-h) + var(--ge-s12)); padding-bottom: var(--ge-s20); } .ge-thanks__inner { max-width: 600px; display: flex; flex-direction: column; align-items: center; text-align: center; } .ge-thanks__check { width: 84px; height: 84px; border-radius: 50%; background: var(--ge-violet); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: var(--ge-s6); box-shadow: var(--ge-shadow-violet); } .ge-thanks__check svg { width: 42px; height: 42px; } .ge-thanks__title { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0; } .ge-thanks__sub { margin-top: var(--ge-s5); font-size: 1.08rem; color: var(--ge-grey); line-height: 1.6; max-width: 46ch; } .ge-thanks__sub strong { color: var(--ge-anthracite); } .ge-thanks__offer { margin-top: var(--ge-s8); width: 100%; display: flex; align-items: flex-start; gap: var(--ge-s4); text-align: left; background: var(--ge-beige); border-radius: var(--ge-radius); padding: var(--ge-s5) var(--ge-s6); } .ge-thanks__offer-badge { flex-shrink: 0; align-self: flex-start; margin-top: 2px; background: var(--ge-violet); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; } .ge-thanks__offer-body { display: flex; flex-direction: column; gap: 4px; } .ge-thanks__offer-title { font-size: 1.05rem; color: var(--ge-violet); } .ge-thanks__offer-sub { color: var(--ge-grey); font-size: 0.92rem; line-height: 1.5; } .ge-thanks__back { margin-top: var(--ge-s8); } /* ========================================================= RETOURS CLIENT 2026-06-23 — Segoe UI, form hero, steps, tarifs, été violet ========================================================= */ /* ---- Hero : benefits + colonne formulaire ---- */ /* Liste benefits : items alignés à gauche, bloc centré sur mobile (cohérent avec le hero centré) puis aligné à gauche en desktop. */ .ge-hero__benefits { list-style: none; margin: var(--ge-s5) auto 0; padding: 0; display: flex; flex-direction: column; gap: var(--ge-s2); width: fit-content; max-width: 100%; } .ge-hero__benefits li { display: flex; align-items: center; gap: var(--ge-s3); font-size: 1rem; color: var(--ge-anthracite); font-weight: 600; text-align: left; } .ge-hero__benefits i { color: var(--ge-violet); font-size: 1.3rem; flex-shrink: 0; line-height: 1; } /* Carte formulaire (lead capture) */ .ge-leadcard { background: var(--ge-white); border-radius: var(--ge-radius-lg); box-shadow: var(--ge-shadow); padding: var(--ge-s8) var(--ge-s6) var(--ge-s6); border: 1px solid var(--ge-beige); position: relative; } .ge-leadcard__badge { display: inline-flex; align-items: center; gap: var(--ge-s2); background: var(--ge-violet); color: #fff; font-weight: 700; font-size: 0.82rem; padding: 8px 16px; border-radius: 999px; margin: 0 auto var(--ge-s4); line-height: 1.2; } .ge-leadcard__badge i { font-size: 1rem; flex-shrink: 0; } .ge-leadcard__title { font-size: 1.3rem; font-weight: 700; color: var(--ge-anthracite); margin: 0 0 var(--ge-s2); text-align: center; } .ge-leadcard__sub { font-size: 0.92rem; color: var(--ge-grey); margin: 0 0 var(--ge-s5); line-height: 1.5; text-align: center; } /* En-tête de carte centré (badge + titre + sous-titre) */ .ge-leadcard { text-align: center; } .ge-leadcard .ge-leadform { text-align: left; } /* mais les champs restent alignés à gauche */ .ge-leadform__row { display: flex; gap: var(--ge-s3); } .ge-leadform__row .ge-field { flex: 1; } .ge-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--ge-s4); } .ge-field label { font-size: 0.85rem; font-weight: 600; color: var(--ge-anthracite); } .ge-field input, .ge-field select { width: 100%; padding: 12px 14px; font-size: 16px; font-family: var(--ge-font); color: var(--ge-anthracite); background: var(--ge-white); border: 1.5px solid var(--ge-taupe); border-radius: var(--ge-radius-sm); transition: border-color .15s; } .ge-field input:focus, .ge-field select:focus { outline: none; border-color: var(--ge-violet); } .ge-field input.has-error, .ge-field select.has-error { border-color: #c0392b; } .ge-field__err { font-size: 0.78rem; color: #c0392b; min-height: 1px; } .ge-leadform__submit { margin-top: var(--ge-s2); } .ge-leadform__trust { list-style: none; margin: var(--ge-s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ge-s4); font-size: 0.8rem; color: var(--ge-grey); } .ge-leadform__trust li { display: flex; align-items: center; gap: 5px; } .ge-leadform__trust i { color: var(--ge-violet); } .ge-leadform__legal { margin-top: var(--ge-s3); font-size: 0.74rem; color: var(--ge-grey); text-align: center; line-height: 1.5; } /* ---- Section "Comment ça se passe" (parcours 4 étapes) — fond beige ---- */ .ge-steps { background: var(--ge-beige); } .ge-section-sub { font-size: 1.02rem; color: var(--ge-grey); margin: var(--ge-s2) 0 0; } .ge-section-head--center .ge-section-sub { text-align: center; } .ge-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--ge-s4); } .ge-step-card { background: var(--ge-white); border-radius: var(--ge-radius); padding: var(--ge-s6) var(--ge-s5); box-shadow: var(--ge-shadow-sm, 0 4px 16px rgba(47,45,43,.06)); } .ge-step-card__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ge-violet); color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: var(--ge-s3); } .ge-step-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--ge-anthracite); margin: 0 0 var(--ge-s2); } .ge-step-card p { font-size: 0.94rem; color: var(--ge-grey); line-height: 1.5; } .ge-steps__note { margin-top: var(--ge-s6); background: var(--ge-white); border-radius: var(--ge-radius); padding: var(--ge-s5) var(--ge-s6); text-align: center; color: var(--ge-grey); font-size: 0.98rem; line-height: 1.6; box-shadow: var(--ge-shadow-sm, 0 4px 16px rgba(47,45,43,.06)); } .ge-steps__note strong { color: var(--ge-violet); } /* ---- Section Tarifs ---- */ .ge-tarifs__grid { display: grid; grid-template-columns: 1fr; gap: var(--ge-s6); } .ge-tarifs__col { background: var(--ge-white); border: 1px solid var(--ge-beige); border-radius: var(--ge-radius); padding: var(--ge-s5); box-shadow: var(--ge-shadow-sm, 0 4px 16px rgba(47,45,43,.06)); } .ge-tarifs__col-title { display: flex; align-items: center; gap: var(--ge-s2); font-size: 1.2rem; font-weight: 700; color: var(--ge-anthracite); margin: 0 0 var(--ge-s4); } .ge-tarifs__col-title i { color: var(--ge-violet); font-size: 1.4rem; } .ge-tarifs__table { width: 100%; border-collapse: collapse; } .ge-tarifs__table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ge-grey); font-weight: 600; padding: 0 0 var(--ge-s3); border-bottom: 1px solid var(--ge-beige); } .ge-tarifs__table th:not(:first-child), .ge-tarifs__table td:not(:first-child) { text-align: right; } .ge-tarifs__table td { padding: var(--ge-s3) 0; font-size: 0.95rem; color: var(--ge-anthracite); border-bottom: 1px solid var(--ge-beige); } .ge-tarifs__table tr:last-child td { border-bottom: none; } .ge-tarifs__forfait { font-weight: 700; color: var(--ge-violet); white-space: nowrap; } .ge-tarifs__unite { color: var(--ge-grey); white-space: nowrap; } /* Paiement en 2/3/4 fois : mis en avant (gras + violet + pastille douce) */ .ge-tarifs__highlight { display: inline-block; font-weight: 700; color: var(--ge-violet); background: var(--ge-violet-soft); padding: 0.12em 0.6em; border-radius: 999px; white-space: nowrap; } .ge-tarifs__note { text-align: center; font-size: 0.88rem; color: var(--ge-grey); margin-top: var(--ge-s5); } .ge-tarifs__cta { display: flex; justify-content: center; margin-top: var(--ge-s5); } /* ---- Section "Oui on s'épile l'été" (fond violet, pub = exception charte §4.1) ---- */ .ge-summer { background: var(--ge-violet); color: #fff; padding-block: var(--ge-section-pad); } .ge-summer__inner { display: flex; flex-direction: column; gap: var(--ge-s6); } .ge-summer__eyebrow { display: inline-block; background: rgba(255,255,255,.16); color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: var(--ge-s4); } .ge-summer__title { color: #fff; text-align: left; } .ge-summer__main { text-align: left; } .ge-summer__lead { color: rgba(255,255,255,.9); font-size: 1.08rem; line-height: 1.6; margin: var(--ge-s4) 0 0; max-width: 46ch; } .ge-summer__rule { margin-top: var(--ge-s5); background: rgba(255,255,255,.12); border-radius: var(--ge-radius); padding: var(--ge-s4) var(--ge-s5); font-size: 0.98rem; line-height: 1.6; color: #fff; } .ge-summer__rule strong { color: #fff; } .ge-summer__cta { background: #fff; color: var(--ge-violet); margin-top: var(--ge-s5); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .ge-summer__cta:hover { background: #fff; color: var(--ge-violet-d); transform: translateY(-2px); } .ge-summer__aside { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--ge-radius-lg); padding: var(--ge-s6); } .ge-summer__aside h3 { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 var(--ge-s3); line-height: 1.15; } .ge-summer__aside p { color: rgba(255,255,255,.9); line-height: 1.6; } /* ---- Desktop ---- */ @media (min-width: 980px) { .ge-hero__form-col { flex: 1 1 46%; min-width: 420px; max-width: 540px; } .ge-steps__grid { grid-template-columns: repeat(4, 1fr); } .ge-tarifs__grid { grid-template-columns: 1fr 1fr; } .ge-summer__inner { flex-direction: row; align-items: stretch; } .ge-summer__main { flex: 1.1; } .ge-summer__aside { flex: 0.9; display: flex; flex-direction: column; justify-content: center; } } /* ========================================================= RETOURS PATRON 2026-06-23 — paragraphe justifié, carte avis, tarifs forfait ========================================================= */ /* Paragraphe hero justifié (demande patron) */ .ge-lead--justify { text-align: justify; text-justify: inter-word; hyphens: auto; } /* Carte preuve sociale aérée (remplace .ge-trust-hero collé) */ .ge-trust-card { margin-top: var(--ge-s6); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ge-s2) var(--ge-s4); background: var(--ge-white); border: 1px solid var(--ge-beige); border-radius: 999px; padding: 10px 20px; box-shadow: var(--ge-shadow-sm, 0 4px 16px rgba(47,45,43,.06)); } .ge-trust-card__stars { color: #E5B53D; font-size: 1.15rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; } .ge-trust-card__rating { font-size: 1.05rem; color: var(--ge-anthracite); } .ge-trust-card__rating strong { font-size: 1.3rem; font-weight: 700; } .ge-trust-card__meta { font-size: 0.9rem; color: var(--ge-grey); display: inline-flex; align-items: center; gap: 5px; } .ge-trust-card__meta i { color: var(--ge-violet); font-size: 1rem; } /* Mobile : carte avis centrée et bien détachée du form */ @media (max-width: 979px) { /* Demande client : sur mobile, masquer le badge « Épilation laser · Paris » et faire remonter le Titre 1 tout en haut du hero. */ .ge-hero .ge-tag { display: none; } .ge-hero { padding-top: calc(var(--ge-header-h) + var(--ge-s2)); } .ge-trust-card { display: flex; justify-content: center; margin: var(--ge-s6) auto var(--ge-s2); } /* paragraphe : justifié rend mal sur écran très étroit → on garde justify mais on évite les trous via une largeur de ligne raisonnable */ .ge-lead--justify { text-align: justify; } } /* Tarifs : forfait en colonne unique, mise en avant */ .ge-tarifs__table th:last-child, .ge-tarifs__table td:last-child { text-align: right; } .ge-tarifs__sup, .ge-tarifs__table sup, .ge-section-sub sup { color: var(--ge-violet); font-weight: 700; }