/* ===================================================================== Lipo & Moi — Accueil v2 (refonte « Douceur éditoriale ») Mobile-first. Autonome (ne dépend pas de design-tokens.css). Palette & typo figées par la marque ; craft élevé : hiérarchie éditoriale, rythme botanique, héros photographique plein cadre. ===================================================================== */ /* Polices SELF-HÉBERGÉES (woff2, latin + latin-ext). Plus aucune requête Google Fonts. Fraunces & Inter sont VARIABLES : un seul fichier par style/sous-ensemble couvre 400→600 via `font-weight: 400 600`. Les 3 woff2 critiques sont préchargés dans le . */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/fraunces-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/fraunces-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/brand/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Couleurs — DA Douceur (figées) */ --sable: #F5ECE3; --creme: #FBF5EF; --argile: #C98A7A; --argile-clair: #F0DED4; --argile-fonce: #974F3D; /* texte eyebrow : AA sur sable 5,14:1 / crème 5,54:1 / argile-clair 4,60:1 */ --prune: #5B3A4B; --prune-fonce: #4A2F3D; --sauge: #9CA98C; --sauge-fonce: #6E7E5E; --encre: #382A2E; --encre-doux: #6F5F59; --ligne: #E3D6CA; /* Typo */ --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; /* Rythme & rayons */ --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px; --ombre-douce: 0 10px 30px rgba(91, 58, 75, 0.08); --ombre-carte: 0 18px 46px rgba(91, 58, 75, 0.13); /* Échelle d'espacement (rythme vertical cohérent) */ --pad-x: clamp(20px, 5vw, 32px); --section-y: clamp(56px, 9vw, 104px); --max: 1120px; --max-texte: 62ch; } * { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; background: var(--sable); color: var(--encre); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Typographie éditoriale -------------------------------------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--prune); line-height: 1.08; margin: 0; text-wrap: balance; font-optical-sizing: auto; } /* L'accroche traitée comme une « cover line » de magazine calme : grande, fine, italique sur les mots-clés. Tracking légèrement serré. */ h1 { font-size: clamp(38px, 7.4vw, 78px); font-weight: 400; letter-spacing: -0.018em; } h2 { font-size: clamp(27px, 4.2vw, 42px); letter-spacing: -0.012em; } h3 { font-size: clamp(20px, 2.4vw, 25px); } em, .it { font-style: italic; } p { margin: 0; } a { color: var(--prune); } /* Marque / wordmark canonique : Lipo + Moi en Fraunces italique prune, « & » romane (non-italique) couleur argile = élément signature. */ .amp { font-style: normal; color: var(--argile); padding: 0 0.04em; } ::selection { background: var(--argile-clair); color: var(--encre); } /* ---- Lien d'évitement (a11y) ------------------------------------- */ .skip { position: absolute; left: -999px; top: 0; background: var(--prune); color: var(--sable); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; z-index: 100; text-decoration: none; font-weight: 500; } .skip:focus { left: 0; } /* ---- Conteneurs -------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); } .measure { max-width: var(--max-texte); } /* ---- Boutons ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--prune); color: var(--sable); font-family: var(--sans); font-weight: 500; font-size: 16px; padding: 15px 28px; min-height: 50px; border: none; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .btn:hover { background: var(--prune-fonce); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(91,58,75,.22); } .btn:active { transform: translateY(0); } .btn-argile { background: var(--argile); color: #3D1407; } .btn-argile:hover { background: #b87766; } .btn-fantome { background: transparent; color: var(--prune); box-shadow: inset 0 0 0 1.5px var(--ligne); } .btn-fantome:hover { background: rgba(91,58,75,.05); box-shadow: inset 0 0 0 1.5px var(--argile); transform: translateY(-2px); } /* Focus clavier visible partout (WCAG 2.4.7) */ :where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--prune); outline-offset: 3px; border-radius: var(--r-sm); } .hero :where(a, button):focus-visible { outline-color: var(--sable); } /* ---- Eyebrow / kicker (structure = sens) ------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--argile-fonce); } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--argile); display: inline-block; } /* Séparateur botanique récurrent (vrai à la marque, pas décoratif gratuit) */ .brin { width: 168px; height: 30px; display: block; margin: 14px 0 0; background: url('img/brin-h.svg') left center/contain no-repeat; } .brin.center { margin-inline: auto; background-position: center; } /* ===================================================================== EN-TÊTE ===================================================================== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sable) 88%, transparent); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); transition: box-shadow .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .nav.scrolled { box-shadow: 0 6px 22px rgba(91,58,75,.07); border-bottom-color: var(--ligne); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; } .brand { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 3vw, 27px); color: var(--prune); text-decoration: none; line-height: 1; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); } .nav-links a { font-size: 15px; color: var(--encre-doux); text-decoration: none; position: relative; padding-block: 4px; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--argile); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .nav-links a:hover { color: var(--prune); } .nav-links a:hover::after { transform: scaleX(1); } /* Liens « rubrique » masqués sur mobile (header épuré) ; visibles dans le menu déroulant. */ .nav-links .lien-rubrique { display: none; } .nav-right { display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); } /* Bouton hamburger : visible uniquement sur mobile (<680px) ; le menu inline prend le relais au-dessus. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; border-radius: 10px; } .nav-toggle span { display: block; width: 22px; height: 2px; margin-inline: auto; background: var(--prune); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-sep { display: none; } @media (max-width: 679px) { .nav-toggle { display: flex; } /* Menu mobile : on distingue clairement les PRODUITS des rubriques d'articles. */ .nav-sep { display: block; margin-top: 4px; padding: 13px 2px 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--argile-fonce); border-top: 1px solid var(--ligne); } .nav-links .nav-produit { color: var(--prune); font-weight: 600; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 0; background: var(--creme); border-bottom: 1px solid var(--ligne); box-shadow: 0 14px 26px rgba(91,58,75,.12); padding: 6px 22px 14px; display: none; } .nav-links.open { display: flex; animation: navDrop .2s ease; } .nav-links .lien-rubrique { display: block; padding: 13px 2px; font-size: 16px; border-bottom: 1px solid var(--ligne); } .nav-links .lien-rubrique:last-child { border-bottom: 0; } .nav-links a::after { display: none; } } @keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .nav-cta { font-size: 14px; font-weight: 500; color: var(--prune) !important; text-decoration: none; padding: 9px 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--ligne); } .nav-cta::after { display: none; } .nav-cta:hover { box-shadow: inset 0 0 0 1.5px var(--argile); } /* ===================================================================== HÉROS — signature : photo plein cadre du salon (monde réel du sujet), accroche en « cover line » éditoriale par-dessus. ===================================================================== */ .hero { position: relative; } .hero-media { position: relative; isolation: isolate; } .hero-photo { display: block; width: 100%; height: clamp(300px, 42vh, 420px); object-fit: cover; object-position: 60% 50%; } /* Voile dégradé : lisibilité du texte sans écraser la photo. Plus dense en bas (où vit le texte), translucide en haut. */ .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(50,30,38,.74) 0%, rgba(50,30,38,.42) 34%, rgba(50,30,38,.10) 62%, rgba(50,30,38,.18) 100%); } .hero-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(28px, 5vw, 56px); } .hero-content .wrap { width: 100%; } .hero .eyebrow { color: #FBEFE7; font-weight: 600; text-shadow: 0 1px 12px rgba(40,20,28,.6); } .hero .eyebrow::before { background: #F3D9CF; box-shadow: 0 1px 6px rgba(40,20,28,.5); } .hero h1 { color: var(--creme); max-width: 15ch; margin: 14px 0 0; text-shadow: 0 2px 24px rgba(40,20,28,.4); } .hero h1 em { color: #F0C8BB; } .hero-lede { color: #F6EBE3; font-size: clamp(15px, 2.1vw, 20px); line-height: 1.5; max-width: 44ch; margin: 14px 0 0; text-shadow: 0 1px 14px rgba(40,20,28,.5); } .hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: #F0E4DC; } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust svg { width: 16px; height: 16px; color: #D9E0C9; flex: none; } /* Lede masquée sur les très petits écrans pour garder le formulaire ATF. */ @media (max-width: 479px) { .hero-lede { display: none; } } /* ---- CRO fix (b) : carte de capture email ABOVE-THE-FOLD --------- */ /* Mobile : panneau plein sous la photo (form lisible, sans scroll). */ .hero-capture { background: var(--creme); border-bottom: 1px solid var(--ligne); padding-block: clamp(20px, 5vw, 30px); } .hero-form-card { position: relative; } .hf-titre { font-family: var(--serif); font-weight: 500; color: var(--prune); font-size: clamp(22px, 4.6vw, 27px); line-height: 1.12; } .hf-titre em { font-style: italic; color: var(--argile-fonce); } .hf-sub { color: var(--encre-doux); font-size: 14.5px; margin-top: 7px; line-height: 1.45; } .hf-sub .it { font-style: italic; } .hero-form { display: grid; gap: 11px; margin-top: 16px; } .hf-row { display: grid; gap: 11px; } .hf-field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--encre); margin-bottom: 5px; } .hf-field label .opt { color: var(--encre-doux); font-weight: 400; } .hf-field input { width: 100%; padding: 13px 16px; font-size: 16px; font-family: var(--sans); background: #fff; color: var(--encre); border: 1.5px solid var(--ligne); border-radius: var(--r-pill); transition: border-color .15s ease, box-shadow .15s ease; } .hf-field input::placeholder { color: #A89A92; } .hf-field input:focus { outline: none; border-color: var(--argile); box-shadow: 0 0 0 4px rgba(201,138,122,.25); } .hero-form .btn { width: 100%; margin-top: 3px; } .hf-fine { font-size: 12.5px; color: var(--encre-doux); margin-top: 2px; line-height: 1.45; } .hf-fine a { color: var(--prune); } /* CTA secondaire dégradé en simple lien texte (CRO fix c). */ .hero-secondaire { margin-top: 14px; text-align: center; } .lien-media { font-size: 14px; color: var(--encre-doux); text-decoration: none; font-weight: 500; } .lien-media:hover { color: var(--prune); text-decoration: underline; } /* Lien « média » clair (posé sur la photo, à gauche) : masqué en mobile, révélé sur desktop où la carte formulaire prend la droite. */ .hero-secondaire-copy { margin-top: 18px; text-align: left; display: none; } .lien-media-clair { color: #F3D9CF; } .lien-media-clair:hover { color: #fff; } /* Succès (carte hero) */ .hero-form-success { display: none; text-align: center; padding: 6px 0 2px; } .hero-form-success.show { display: block; animation: lm-fade .45s ease-out both; } .hero-form-success .fs-check { margin-bottom: 12px; } .hero-form-success h3 { color: var(--prune); } .hero-form-success p { color: var(--encre-doux); margin-top: 8px; font-size: 15px; } /* ---- Barre CTA collante mobile (mécanique de l'actuelle) --------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--prune); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; justify-content: center; box-shadow: 0 -6px 20px rgba(91,58,75,.18); transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s; } .sticky-cta.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .35s ease, opacity .35s ease, visibility 0s; } /* Le footer (mentions légales / CGV / liens) ne doit JAMAIS être masqué par la barre collante : dès que le footer entre dans le viewport, on re-cache la barre (classe posée par l'IntersectionObserver). Priorité sur .is-visible. */ .sticky-cta.footer-near { transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s; } .sticky-cta a { display: block; width: 100%; max-width: 420px; text-align: center; background: var(--argile); color: #3D1407; font-weight: 500; padding: 13px 22px; border-radius: var(--r-pill); text-decoration: none; font-size: 15px; min-height: 48px; } /* ===================================================================== « TU TE RECONNAIS ? » — le vrai motif de sa présence (empathie) ===================================================================== */ .reconnais { padding-block: var(--section-y); } .reconnais-grid { display: grid; gap: clamp(28px, 5vw, 56px); } .reconnais h2 { margin-top: 14px; } .reconnais-intro { color: var(--encre-doux); margin-top: 16px; font-size: 18px; } .symptomes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .symptomes li { display: flex; align-items: flex-start; gap: 13px; background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--r-md); padding: 15px 18px; font-size: 15.5px; line-height: 1.45; } .symptomes li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--argile); } /* Mot de Léa — présence humaine, citation chaleureuse */ .mot-lea { margin: 0; padding: 22px 26px; background: var(--creme); border-left: 3px solid var(--argile); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.45; color: var(--prune); } .mot-lea .sig { display: block; margin-top: 14px; font-style: normal; font-family: var(--sans); font-size: 14px; color: var(--encre-doux); } .mot-lea .coeur { color: var(--argile); } /* ===================================================================== PILIERS — les trois vrais (Comprendre / Apaiser / S'équiper) Cartes intentionnelles photo-menées, pas une grille de 6 placeholders. ===================================================================== */ .piliers { padding-block: var(--section-y); background: var(--creme); position: relative; } /* Bande crème plein écran (rythme de fond) */ .piliers::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--creme); /* Bande pleine largeur SANS débordement vertical : la box-shadow déborde dans toutes les directions (~100vmax) ; clip-path: inset(0 -100vmax) la clippe en haut/bas (limite à l'élément) mais la laisse filer à gauche/droite. Sinon le rectangle opaque repeint les sections voisines (au-dessus/en dessous). */ box-shadow: 0 0 0 100vmax var(--creme); clip-path: inset(0 -100vmax); } .piliers > .wrap { position: relative; z-index: 1; } .section-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(34px, 5vw, 52px); } .section-head .eyebrow { justify-content: center; } .section-head h2 { margin-top: 16px; } .section-head p { color: var(--encre-doux); margin-top: 14px; font-size: 17px; } .pilier-grid { display: grid; gap: 20px; } .pilier { display: flex; flex-direction: column; background: var(--sable); border: 1px solid var(--ligne); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .pilier:hover { transform: translateY(-5px); box-shadow: var(--ombre-carte); border-color: var(--argile); } .pilier-fig { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--argile-clair); } .pilier-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .pilier:hover .pilier-fig img { transform: scale(1.04); } .pilier-num { position: absolute; top: 14px; left: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--sable) 90%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--prune); } .pilier-num svg { width: 19px; height: 19px; } .pilier-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .pilier-body h3 { color: var(--prune); } .pilier-body p { color: var(--encre-doux); font-size: 15px; line-height: 1.55; margin-top: 9px; } .pilier-more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500; color: var(--argile-fonce); display: inline-flex; align-items: center; gap: 6px; } .pilier-more svg { width: 15px; height: 15px; transition: transform .2s ease; } .pilier:hover .pilier-more svg { transform: translateX(4px); } /* ===================================================================== LE GUIDE — l'offre (vraie couverture de l'ebook) ===================================================================== */ .guide { padding-block: var(--section-y); } .guide-card { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: clamp(26px, 5vw, 52px); box-shadow: var(--ombre-douce); position: relative; overflow: hidden; } /* feuillage discret en filigrane, coin bas-droit */ .guide-card::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; opacity: .10; pointer-events: none; background: url('img/eucalyptus.svg') right bottom/contain no-repeat; transform: rotate(12deg); } .guide-cover-wrap { position: relative; z-index: 1; justify-self: center; perspective: 1500px; } /* Couverture en LIVRE 3D (perspective + reliure + tranche de pages). */ .guide-book { position: relative; display: inline-block; transform-style: preserve-3d; transform: rotateY(-15deg) rotateX(2.5deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .guide-book:hover { transform: rotateY(-6deg) rotateX(1deg); } .guide-cover { display: block; width: clamp(190px, 52vw, 290px); height: auto; border-radius: 3px 7px 7px 3px; position: relative; z-index: 2; box-shadow: 0 26px 42px -12px rgba(91,58,75,.34), 0 6px 14px rgba(91,58,75,.18); } /* reliure : ombre interne, bord gauche */ .guide-book::before { content: ""; position: absolute; top: 0; left: 0; z-index: 3; width: 18px; height: 100%; pointer-events: none; background: linear-gradient(to right, rgba(40,18,26,.30), rgba(40,18,26,.06) 55%, transparent); border-radius: 3px 0 0 3px; } /* tranche de pages : bord droit en 3D */ .guide-book::after { content: ""; position: absolute; top: 1.5%; right: -10px; z-index: 1; width: 11px; height: 97%; background: repeating-linear-gradient(to right, #f0e8db, #f0e8db 1px, #d8c9b6 2.5px); border-radius: 0 2px 2px 0; transform: rotateY(30deg); transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .guide-book { transition: none; } } .guide-txt { position: relative; z-index: 1; } .guide-txt h2 { margin-top: 14px; } .guide-txt > p { color: var(--encre-doux); margin-top: 14px; font-size: 17px; } .guide-liste { list-style: none; padding: 0; margin: 20px 0 0; } .guide-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ligne); font-size: 15.5px; line-height: 1.45; } .guide-liste li:last-child { border-bottom: none; } .guide-liste svg { flex: none; width: 21px; height: 21px; color: var(--sauge-fonce); margin-top: 1px; } .guide-actions { margin-top: 24px; } /* ===================================================================== FORMULAIRE — capture email (action principale) ===================================================================== */ /* CRO fix (a) : position:relative + z-index sur .optin / .optin-card pour passer AU-DESSUS des bandes crème plein-cadre (.faq::before / .piliers::before en box-shadow 100vmax) qui, sur desktop, débordaient par-dessus la carte et rendaient labels/champs crème illisibles. */ .optin { padding-block: var(--section-y); position: relative; z-index: 1; } .optin-card { position: relative; z-index: 1; overflow: hidden; background: var(--prune); color: var(--sable); border-radius: var(--r-lg); padding: clamp(32px, 6vw, 60px) clamp(24px, 5vw, 56px); text-align: center; } .optin-card::before { /* texture botanique subtile */ content: ""; position: absolute; left: -36px; top: -50px; width: 220px; height: 220px; opacity: .12; pointer-events: none; background: url('img/eucalyptus.svg') left top/contain no-repeat; transform: rotate(-18deg); } .optin-card > * { position: relative; z-index: 1; } .optin-card .eyebrow { color: #E7C3B7; justify-content: center; } .optin-card .eyebrow::before { background: #E7C3B7; } .optin-card h2 { color: var(--creme); margin-top: 16px; } .optin-card .optin-sub { color: #EBDCD4; max-width: 52ch; margin: 16px auto 0; } .optin-form { display: grid; gap: 12px; max-width: 460px; margin: 28px auto 0; text-align: left; } .field-row { display: grid; gap: 12px; } .field label { display: block; font-size: 14px; font-weight: 500; color: var(--sable); margin-bottom: 7px; } .field label .opt { color: #D7C3BC; font-weight: 400; } .field input { width: 100%; padding: 15px 18px; font-size: 16px; font-family: var(--sans); background: var(--creme); color: var(--encre); border: 1.5px solid transparent; border-radius: var(--r-pill); transition: border-color .15s ease, box-shadow .15s ease; } .field input::placeholder { color: #A89A92; } .field input:focus { outline: none; border-color: var(--argile); box-shadow: 0 0 0 4px rgba(201,138,122,.4); } .optin-form .btn { width: 100%; margin-top: 4px; } .optin-fine { font-size: 13px; color: #E0CFC7; margin-top: 14px; text-align: center; } .optin-fine a { color: #F3D9CF; } .form-error { display: none; font-size: 14px; color: #FBD9CF; margin-top: 12px; text-align: center; } .form-error.show { display: block; } .form-error::before { content: "⚠ "; } /* État succès (récompense émotionnelle) */ .optin-success { display: none; max-width: 480px; margin: 8px auto 0; text-align: center; } .optin-success.show { display: block; animation: lm-fade .45s ease-out both; } .fs-check { width: 56px; height: 56px; border-radius: 50%; background: var(--sauge); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: lm-pop .55s cubic-bezier(.34,1.56,.64,1) both; } .fs-check svg { width: 28px; height: 28px; } .optin-success h3 { color: var(--creme); } .optin-success p { color: #EBDCD4; margin-top: 12px; } @keyframes lm-pop { 0% { transform: scale(.4); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes lm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ===================================================================== LÉA & ENGAGEMENTS — preuve de confiance ===================================================================== */ .demarche { padding-block: var(--section-y); } .demarche-grid { display: grid; gap: clamp(28px, 5vw, 52px); align-items: center; } .demarche-fig { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-douce); } .demarche-fig img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .demarche h2 { margin-top: 14px; } .engagements { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; } .engagement { display: flex; gap: 15px; align-items: flex-start; } .engagement-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--argile-clair); color: var(--prune); display: flex; align-items: center; justify-content: center; } .engagement-ic svg { width: 21px; height: 21px; } .engagement h3 { font-size: 18px; } .engagement p { color: var(--encre-doux); font-size: 15px; line-height: 1.55; margin-top: 4px; } .lea-note { margin: 26px 0 0; padding: 18px 22px; background: var(--sable); border: 1px solid var(--ligne); border-radius: var(--r-md); font-size: 15.5px; color: var(--encre-doux); line-height: 1.55; } .lea-note a { color: var(--prune); font-weight: 500; } /* Bandeau d'autorité (sources) */ .sources-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: clamp(34px, 5vw, 48px); font-size: 13.5px; color: var(--encre-doux); text-align: center; } .sources-strip b { color: var(--prune); } .sources-strip .dot { color: var(--argile); } /* ===================================================================== FAQ ===================================================================== */ .faq { padding-block: var(--section-y); background: var(--creme); position: relative; } .faq::before { content: ""; position: absolute; inset: 0; z-index: 0; /* Bande pleine largeur SANS débordement vertical (cf. .piliers::before) : clip-path: inset(0 -100vmax) empêche le rectangle crème de repeindre le bloc d'offre « Aller plus loin » au-dessus et la section CTA finale en dessous. */ background: var(--creme); box-shadow: 0 0 0 100vmax var(--creme); clip-path: inset(0 -100vmax); } .faq > .wrap { position: relative; z-index: 1; max-width: 800px; } .faq-list { margin-top: clamp(28px, 4vw, 40px); } .faq-item { border-bottom: 1px solid var(--ligne); } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: flex-start; gap: 14px; font-family: var(--serif); font-size: clamp(17px, 2vw, 19px); color: var(--prune); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .plus { flex: none; width: 24px; height: 24px; position: relative; margin-top: 3px; } .faq-item summary .plus::before, .faq-item summary .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--argile); transform: translate(-50%, -50%); transition: transform .25s ease; } .faq-item summary .plus::before { width: 14px; height: 2px; } .faq-item summary .plus::after { width: 2px; height: 14px; } .faq-item[open] summary .plus::after { transform: translate(-50%, -50%) scaleY(0); } .faq-answer { padding: 0 0 20px 38px; color: var(--encre-doux); font-size: 16px; line-height: 1.65; } .faq-answer a { color: var(--prune); } /* ===================================================================== CTA FINAL ===================================================================== */ .cta-final { padding-block: var(--section-y); text-align: center; position: relative; z-index: 1; } .cta-final .wrap { max-width: 660px; } .cta-final .mot-lea { text-align: left; margin-bottom: clamp(30px, 5vw, 44px); } .cta-final h2 { margin-top: 18px; } .cta-final p { color: var(--encre-doux); margin: 16px auto 0; max-width: 48ch; } .cta-final .btn { margin-top: 26px; } .cta-fine { display: block; font-size: 13px; color: var(--encre-doux); margin-top: 14px; } /* ===================================================================== PIED DE PAGE ===================================================================== */ .footer { border-top: 1px solid var(--ligne); padding-block: clamp(40px, 6vw, 56px) clamp(40px, 6vw, 64px); } .footer-top { display: grid; gap: 24px; } .footer-brand .brand { font-size: 24px; } .footer-brand p { color: var(--encre-doux); font-size: 15px; margin-top: 10px; max-width: 40ch; } .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; } .footer-nav a { color: var(--encre-doux); text-decoration: none; font-size: 15px; } .footer-nav a:hover { color: var(--prune); } .footer-legal { margin-top: clamp(28px, 4vw, 40px); padding-top: 22px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--encre-doux); line-height: 1.6; } /* ===================================================================== ANIMATION au scroll RESTAURÉE — la vraie cause des « trous » était les bandes box-shadow (corrigées par clip-path), PAS cette animation. Sécurité par CONSTRUCTION : contenu visible par défaut ; masqué seulement si le JS pose `.js-anim` ; et un FAILSAFE 100% CSS (`revealSafety`) force l'affichage à 1,2 s même si JS/Observer échouent → jamais de trou. ===================================================================== */ .reveal { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; } .js-anim .reveal { opacity: 0; transform: translateY(24px); animation: revealSafety .7s ease 1.2s forwards; } .js-anim .reveal.in { opacity: 1; transform: none; animation: none; } @keyframes revealSafety { to { opacity: 1; transform: none; } } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } /* ===================================================================== RESPONSIVE — tablette (>= 680px) ===================================================================== */ @media (min-width: 680px) { .nav-links .lien-rubrique { display: inline-block; } /* Les PRODUITS (L'application, La bibliothèque) se démarquent des rubriques d'articles. */ .nav-links .nav-produit { color: var(--prune); font-weight: 600; } .nav-links .nav-sep + .nav-produit { padding-left: clamp(14px, 2.4vw, 28px); border-left: 1px solid var(--ligne); } /* Le soulignement (::after) part de left:0 = bord du padding → il déborderait à gauche du texte. On le décale de la même valeur que le padding-left pour qu'il reste STRICTEMENT sous le texte. */ .nav-links .nav-sep + .nav-produit::after { left: clamp(14px, 2.4vw, 28px); } .reconnais-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } .symptomes { grid-template-columns: 1fr 1fr; gap: 12px 14px; } .reconnais .mot-lea { grid-column: 1 / -1; } .pilier-grid { grid-template-columns: repeat(3, 1fr); } .guide-card { grid-template-columns: 0.9fr 1.1fr; } .guide-cover-wrap { order: 2; } .guide-txt { order: 1; } .field-row { grid-template-columns: 1fr 1fr; } .demarche-grid { grid-template-columns: 0.85fr 1.15fr; } .footer-top { grid-template-columns: 1.3fr 1fr; align-items: start; } .footer-nav { justify-content: flex-end; } } /* ===================================================================== DESKTOP — HÉROS EN SPLIT « photo + carte formulaire » (>= 900px) La photo reprend toute sa hauteur signature ; l'accroche habite la moitié gauche, la carte de capture flotte à droite, ATF. ===================================================================== */ @media (min-width: 900px) { .hero { position: relative; isolation: isolate; } .hero-photo { height: clamp(560px, 82vh, 720px); } .hero h1 { margin-top: 20px; } /* L'accroche n'occupe que la moitié gauche pour laisser place à la carte. */ .hero-content .wrap { display: block; } .hero-copy { max-width: 30rem; } .hero h1 { max-width: 14ch; } /* La carte de capture sort du flux et flotte sur la droite du hero. */ .hero-capture { position: absolute; inset: 0; z-index: 3; background: none; border: none; padding: 0; pointer-events: none; } .hero-capture .wrap { height: 100%; display: flex; align-items: center; justify-content: flex-end; } .hero-form-card { pointer-events: auto; width: clamp(360px, 36vw, 420px); background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--r-lg); box-shadow: var(--ombre-carte); padding: clamp(26px, 2.4vw, 34px); } .hf-row { grid-template-columns: 1fr 1fr; } /* Sur desktop : le lien « média » vit à gauche, sur la photo ; on masque la version intégrée à la carte formulaire pour éviter le doublon. */ .hero-form-card .hero-secondaire { display: none; } .hero-secondaire-copy { display: block; } } /* Confort large (>= 1200px) : un peu plus d'air autour de la carte. */ @media (min-width: 1200px) { .hero-form-card { width: 420px; } } /* ===================================================================== PRÉFÉRENCES : mouvement réduit ===================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal, .js-anim .reveal { opacity: 1 !important; transform: none !important; } .pilier:hover { transform: none; } .pilier:hover .pilier-fig img { transform: none; } }