/* Theme Name: lespotentiels-child Template: astra Version: 1.0.1 Text Domain: lespotentiels-child */ /* ========================================================================== TABLE OF CONTENTS 1. Design tokens 2. Base and resets 3. Layout helpers (reading width, full-bleed) 4. Typography 5. Badges (pastilles) 6. Buttons 7. Header / sticky menu 8. Cards and sections shared 9. Hero (bloc 1) 10. Vos enjeux (bloc 2) 11. Notre methode / timeline (bloc 3) 12. Nos offres (bloc 4) 13. Les resultats (bloc 5) 14. Pourquoi Les Potentiels (bloc 6) 15. A propos / sticky stack (bloc 7) 16. Ressources et webinaires (bloc 8) 17. Contact (bloc 9) 18. Footer 19. Magnetic scroll snap 20. Reduced motion ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Semantic aliases over Astra's global palette (regime A). The 9 slots * carry the trio + derivees; anything the brand needs beyond those 9 * lives here as its own variable, never as a raw hex in a rule below. */ --color-primary: var(--ast-global-color-0); /* #1F5C4C vert profond */ --color-primary-dark: var(--ast-global-color-1); /* #1A4E41 */ --color-ink: var(--ast-global-color-2); /* #1C2B28 encre */ --color-ink-soft: var(--ast-global-color-3); /* #4B5C58 encre douce */ --color-surface: var(--ast-global-color-4); /* #FFFFFF cartes, menu */ --color-surface-alt: var(--ast-global-color-5); /* #F1ECE2 beige */ --color-accent: var(--ast-global-color-8); /* #EB9770 orange */ /* Hors des 9 emplacements Astra : couleurs de marque supplementaires. */ --color-mint: #E8F3F0; /* vert clair */ --color-honey: #DFB368; /* jaune miel */ --color-honey-light: #F4E9D7; /* jaune miel clair */ --color-cream: #FAF7F2; /* fond general des pages */ --color-line: #E2DCCF; /* gris ligne, bordures discretes */ --color-action: var(--color-primary); --color-action-hover: var(--color-primary-dark); --color-text-primary: var(--color-ink); --color-border: var(--color-line); --radius: 14px; --font-base: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --content-width: 1180px; --side-pad: 6vw; --menu-height: 76px; } /* -------------------------------------------------------------------------- 2. Base and resets -------------------------------------------------------------------------- */ body { background-color: var(--color-cream); color: var(--color-ink-soft); font-family: var(--font-base); } /* Astra sets `overflow-x: hidden` on to contain full-bleed blocks. * Per the CSS Overflow spec, `overflow-x: hidden` with no explicit * `overflow-y` forces the COMPUTED overflow-y to `auto` regardless of what * is written here (the visible/auto aliasing rule) -- so `overflow-y: * visible` alone cannot undo it, body still becomes a scroll container. * Any non-visible overflow on an ancestor turns it into the containing * block for `position: sticky` descendants, which breaks the sticky menu * and the a-propos stack: they stick relative to body's own (stationary) * scrollport instead of the viewport. This theme does not use negative- * margin full-bleed tricks that would need the horizontal clip, so drop it * entirely rather than fight the spec. */ body { overflow: visible !important; } /* Site one-page : le menu collant et le pied de page sont construits dans * le contenu de la page elle-meme (section 7 et 18). Le chrome natif * d'Astra est masque pour eviter un double en-tete / double pied de page. */ header.site-header, #masthead, footer.site-footer, #colophon { display: none !important; } .ast-container { max-width: none !important; padding: 0 !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); } .wp-block-button__link, .woocommerce a.button { text-decoration: none !important; } img { border-radius: var(--radius); } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .lp-inner { max-width: var(--content-width); margin-left: auto; margin-right: auto; padding-left: var(--side-pad); padding-right: var(--side-pad); box-sizing: border-box; } .lp-section { padding-top: 72px; padding-bottom: 72px; } .lp-section--alt { background-color: var(--color-surface-alt); } .lp-section--center .lp-section__head { text-align: center; } .lp-section__head { margin-bottom: 40px; } /* -------------------------------------------------------------------------- 4. Typography -------------------------------------------------------------------------- */ .lp-h1 { color: var(--color-primary); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin: 20px 0 16px; } .lp-h2 { color: var(--color-ink); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 8px 0 0; } .lp-h3 { color: var(--color-ink); font-size: 1.15rem; margin: 0 0 8px; } .lp-lead { color: var(--color-ink-soft); font-size: 1.1rem; max-width: 62ch; } .lp-section--center .lp-lead { margin-left: auto; margin-right: auto; } .lp-italic-transition { text-align: center; font-style: italic; color: var(--color-ink-soft); max-width: 56ch; margin: 40px auto 0; } /* -------------------------------------------------------------------------- 5. Badges (pastilles) -------------------------------------------------------------------------- */ .lp-badge { display: inline-block; background: var(--color-primary); color: #FFFFFF; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 20px; border-radius: 999px; } .lp-badge--inverted { background: #FFFFFF; color: var(--color-primary); } .lp-eyebrow { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .lp-pill-title { display: inline-block; border-radius: 999px; padding: 6px 18px; font-weight: 700; margin-bottom: 16px; } .lp-pill-title--mint { background: var(--color-mint); color: var(--color-ink); } .lp-pill-title--honey { background: var(--color-honey-light); color: var(--color-ink); } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; padding: 14px 32px; text-decoration: none !important; border: none; cursor: pointer; font-family: var(--font-base); font-size: 1rem; } /* Accessibilite : l'orange et le jaune miel sont trop clairs pour du texte * blanc. Seul le vert profond porte du texte blanc en fond plein. */ .lp-btn--accent { background: var(--color-accent); color: var(--color-ink); box-shadow: 0 10px 24px rgba(235, 151, 112, 0.35); } .lp-btn--accent:hover { background: #e08a5f; color: var(--color-ink); } .lp-btn--primary { background: var(--color-primary); color: #FFFFFF; } .lp-btn--primary:hover { background: var(--color-primary-dark); color: #FFFFFF; } .lp-btn--on-primary { background: #FFFFFF; color: var(--color-primary); } /* -------------------------------------------------------------------------- 7. Header / sticky menu -------------------------------------------------------------------------- */ .lp-menu { position: sticky; top: 0; z-index: 1000; height: var(--menu-height); background: var(--color-surface); border-bottom: 1px solid var(--color-line); } .lp-menu .lp-inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .lp-logo { font-weight: 800; font-size: 1.15rem; white-space: nowrap; } .lp-logo__a { color: var(--color-primary); } .lp-logo__b { color: var(--color-accent); } .lp-menu__nav { display: flex; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .lp-menu__nav a { color: var(--color-ink); font-weight: 700; font-size: 15px; text-decoration: none; } .lp-menu__nav a:hover { color: var(--color-primary); } .lp-menu__cta { white-space: nowrap; padding: 10px 24px; font-size: 0.9rem; } @media (max-width: 780px) { .lp-menu__nav { display: none; } .lp-menu .lp-inner { grid-template-columns: auto auto; justify-content: space-between; } } /* -------------------------------------------------------------------------- 8. Cards and sections shared -------------------------------------------------------------------------- */ .lp-card { background: var(--color-surface); border-radius: var(--radius); padding: 32px; box-shadow: 0 12px 30px rgba(28, 43, 40, 0.06); } .lp-card--border-top-primary { border-top: 4px solid var(--color-primary); } .lp-card--border-top-accent { border-top: 4px solid var(--color-accent); } .lp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .lp-grid-2--center-content .lp-pill-title, .lp-grid-2--center-content h3, .lp-grid-2--center-content p { text-align: center; } @media (max-width: 780px) { .lp-grid-2 { grid-template-columns: 1fr; } .lp-grid-2--center-content .lp-pill-title, .lp-grid-2--center-content h3, .lp-grid-2--center-content p { text-align: left; } } /* Mobile: pastilles+texte des cartes passent a gauche partout (regle * transversale 1). Desktop: centres par defaut via *--center-content. */ @media (max-width: 780px) { .lp-section__head { text-align: left !important; } .lp-section__head .lp-lead { margin-left: 0; } } /* -------------------------------------------------------------------------- 9. Hero (bloc 1) -------------------------------------------------------------------------- */ .lp-hero { background: linear-gradient(180deg, var(--color-mint) 0%, var(--color-cream) 100%); text-align: center; scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-hero .lp-inner { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; } .lp-hero__desc { max-width: 62ch; color: var(--color-ink-soft); font-size: 1.1rem; margin-bottom: 32px; } .lp-hero__quote { border: 2px dashed var(--color-accent); border-radius: var(--radius); padding: 24px 32px; max-width: 62ch; font-weight: 600; color: var(--color-ink); margin-bottom: 32px; } /* -------------------------------------------------------------------------- 10. Vos enjeux (bloc 2) -------------------------------------------------------------------------- */ #vos-enjeux { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } /* -------------------------------------------------------------------------- 11. Notre methode / timeline (bloc 3) -------------------------------------------------------------------------- */ #notre-methode { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-methode__desc { text-align: center; max-width: 62ch; margin: 0 auto 48px; white-space: nowrap; color: var(--color-ink-soft); } @media (max-width: 780px) { .lp-methode__desc { white-space: normal; text-align: left; margin-left: 0; } } .timeline { position: relative; } .timeline-svg { position: absolute; left: 0; top: 0; width: 48px; height: 0; overflow: visible; pointer-events: none; } .timeline-track { stroke: var(--color-line); stroke-width: 2px; } .timeline-draw { fill: none; stroke: var(--color-primary); stroke-width: 4px; } .timeline-steps { display: flex; flex-direction: column; gap: 48px; padding-left: 64px; } .step { display: flex; align-items: flex-start; gap: 24px; } .step-marker { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .step-marker.is-active { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); } .step-content h3 { margin: 6px 0 8px; } .step-content p { margin: 0; color: var(--color-ink-soft); } /* -------------------------------------------------------------------------- 12. Nos offres (bloc 4) -------------------------------------------------------------------------- */ #nos-offres { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-offer h4 { margin: 20px 0 6px; color: var(--color-ink); } .lp-offer p { margin: 0 0 4px; color: var(--color-ink-soft); } /* -------------------------------------------------------------------------- 13. Les resultats (bloc 5) -------------------------------------------------------------------------- */ #les-resultats { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-conclusion { text-align: center; font-weight: 700; font-size: 1.4rem; color: var(--color-ink); max-width: 50ch; margin: 48px auto 0; } /* -------------------------------------------------------------------------- 14. Pourquoi Les Potentiels (bloc 6) -------------------------------------------------------------------------- */ #pourquoi { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .lp-why-card { text-align: center; } .lp-why-card__icon-slot { height: 32px; } .lp-why-card h3 { margin: 8px 0 0; } .lp-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .lp-values-banner { background: var(--color-primary); color: #FFFFFF; border-radius: var(--radius); padding: 32px 40px; margin-top: 48px; text-align: center; } .lp-values-banner strong { display: block; margin-bottom: 6px; } @media (max-width: 780px) { .lp-grid-3, .lp-principles { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 15. A propos / sticky stack (bloc 7) -------------------------------------------------------------------------- */ .lp-apropos { background: var(--color-surface-alt); scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-apropos .lp-inner { padding-top: 72px; padding-bottom: 72px; } .lp-apropos__grid { display: flex; align-items: flex-start; gap: 48px; margin-top: 40px; } .lp-apropos__right { flex: 0 0 38%; position: sticky; top: calc(var(--menu-height) + 24px); } .lp-photo-placeholder { width: 60%; max-width: 280px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--radius); border: 2px dashed var(--color-line); display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); font-size: 0.9rem; text-align: center; background: var(--color-surface); } .lp-apropos__photo img { width: 60%; max-width: 280px; border-radius: var(--radius); display: block; margin: 0 auto; } .lp-apropos__quote { background: var(--color-mint); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 24px; font-style: italic; color: var(--color-ink); margin-top: 24px; } .lp-apropos__quote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 700; color: var(--color-primary); } .lp-apropos__left { flex: 1 1 auto; display: grid; grid-template-rows: repeat(3, minmax(260px, auto)); } .lp-stack-item { position: sticky; top: calc(var(--menu-height) + 24px); } .lp-stack-item .lp-card { height: 100%; box-sizing: border-box; } .lp-stack-item:nth-child(1) { z-index: 1; } .lp-stack-item:nth-child(2) { z-index: 2; } .lp-stack-item:nth-child(3) { z-index: 3; } @media (max-width: 900px) { .lp-apropos__grid { flex-direction: column; } .lp-apropos__right { position: static; flex-basis: auto; } .lp-apropos__left { grid-template-rows: none; gap: 24px; } .lp-stack-item { position: sticky; top: calc(var(--menu-height) + 12px); } } /* -------------------------------------------------------------------------- 16. Ressources et webinaires (bloc 8) -------------------------------------------------------------------------- */ .lp-webinaires { background: var(--color-primary); color: #FFFFFF; scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-webinaires .lp-inner { padding-top: 72px; padding-bottom: 72px; text-align: center; } .lp-webinaires .lp-h2 { color: #FFFFFF; } .lp-webinaires__panel { background: #FFFFFF; color: var(--color-ink-soft); border-radius: var(--radius); padding: 40px; margin-top: 32px; text-align: center; } .lp-webinaires__panel p { max-width: 68ch; margin: 0 auto 24px; } @media (max-width: 780px) { .lp-webinaires .lp-section__head, .lp-webinaires__panel { text-align: left; } .lp-webinaires__panel p { margin-left: 0; } } /* -------------------------------------------------------------------------- 17. Contact (bloc 9) -------------------------------------------------------------------------- */ #contact { scroll-margin-top: var(--menu-height); scroll-snap-align: start; } .lp-contact-card { background: var(--color-primary); color: #FFFFFF; border-radius: var(--radius); padding: 56px 40px; text-align: center; } .lp-contact-card .lp-h2 { color: #FFFFFF; margin-top: 16px; } .lp-contact-card .lp-lead { color: #FFFFFF; margin: 12px auto 32px; } .lp-form { max-width: 560px; margin: 0 auto; text-align: left; } .lp-form input, .lp-form textarea { width: 100%; box-sizing: border-box; border-radius: 999px; border: 2px solid transparent; background: var(--color-cream); color: var(--color-ink); padding: 14px 22px; margin-bottom: 16px; font-family: var(--font-base); font-size: 1rem; } .lp-form textarea { border-radius: var(--radius); min-height: 140px; resize: vertical; } .lp-form input:focus, .lp-form textarea:focus { outline: none; border-color: #FFFFFF; } .lp-form button { width: 100%; } /* -------------------------------------------------------------------------- 18. Footer -------------------------------------------------------------------------- */ .lp-footer { background: var(--color-surface-alt); scroll-snap-align: end; } .lp-footer .lp-inner { padding-top: 32px; padding-bottom: 32px; text-align: center; color: var(--color-ink-soft); font-size: 0.9rem; } .lp-footer a { color: var(--color-ink); } .lp-footer__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .lp-footer__row span:not(:last-child)::after { content: "\00B7"; margin-left: 8px; color: var(--color-line); } /* -------------------------------------------------------------------------- 19. Magnetic scroll snap -------------------------------------------------------------------------- */ html { scroll-snap-type: y proximity; } /* -------------------------------------------------------------------------- 20. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } .lp-apropos__right, .lp-stack-item { position: static !important; } }