/* ========================================================= Landing « Offre Grand Été » — smartduck Charte graphique 2026 : violet #5B2D8B / blanc chaud #F7F5F0 Typo : Segoe UI (courant) + Neulis Cursive (accroches) Mobile-first (95-99% trafic mobile) ========================================================= */ .grand-ete-page, .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: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ge-font-display: "Neulis Cursive", 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 ---- */ .grand-ete-page { 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(.grand-ete-page) { scroll-behavior: auto !important; } .grand-ete-page * { 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…). */ .grand-ete-page { font-family: var(--ge-font); } .grand-ete-page p, .grand-ete-page li, .grand-ete-page .ge-lead, .grand-ete-page .ge-btn, .grand-ete-page .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 */ .grand-ete-page p, .grand-ete-page 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. */ .grand-ete-page h1, .grand-ete-page h2, .grand-ete-page h3, .grand-ete-page h4 { text-transform: none; } .ge-h1 { font-family: var(--ge-font-display); font-weight: 500; /* Medium, comme les créas (pas de bold) */ font-size: clamp(1.95rem, 7vw, 3.4rem); line-height: 1.14; letter-spacing: -0.005em; text-transform: none; color: var(--ge-anthracite); } .ge-h2 { font-family: var(--ge-font-display); font-weight: 500; /* Medium */ font-size: clamp(1.55rem, 5vw, 2.4rem); line-height: 1.16; 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 ---- */ .ge-hero { text-align: left; padding-top: 36px; padding-bottom: clamp(40px, 5vw, 72px); min-height: 0; } .ge-hero__inner { flex-direction: row; align-items: center; /* centrage vertical des 2 colonnes */ gap: clamp(48px, 5vw, 80px); } .ge-hero__col { flex: 1 1 60%; 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-s4); } .ge-hero__note { display: none; } /* astérisque déjà expliqué dans le footer légal */ .ge-btns { 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; } }