/* ============================================================ * 10-page-practices-detail.css — V_new_00.2 * ------------------------------------------------------------ * 10 sous-pages /practices/.html (EN + FR) — refonte 2026-06-24. * * Plus de #snap, plus de .panel { height: 100vh; scroll-snap-align }. * Chaque section (hero, benefits, session, pricing, faq) coule * verticalement avec sa hauteur naturelle. Le hero conserve son layout * split desktop (texte à gauche, image à droite) via min-height ; sur * mobile, l'image passe sous le texte. * * Le chrome (topbar, menu, canvas-bg, footer) reste dans 00-base.css. * ============================================================ */ /* ── Scroll natif (override du 00-base.css qui forçait overflow:hidden * pour les pages snap) ─────────────────────────────────────── * Un seul scroll container = . body reste en overflow:visible * (comme sur la home) : avec body { overflow: auto }, c'est le body * qui scrollait — le scroll-snap posé sur était inerte * (détecté 2026-07-09, le snap ne s'accrochait pas). */ html { overflow: auto; height: auto; } body { overflow: visible; height: auto; } /* ── Sections wrappers (flow vertical libre) ──────────────── */ .panel.panel-benefits, .panel.panel-session, .panel.panel-pricing, .panel.panel-faq { position: relative; z-index: 10; /* au-dessus du canvas-bg fixed */ width: 100%; display: flex; flex-direction: column; align-items: center; padding: 6vh 6vw; /* Override des vestiges snap-scroll du 00-base.css `.panel { height: 100vh; min-height: 100vh }`. Sans ça, panel-session/pricing/faq/benefits sont figés à 100vh sur toutes les pages practice-detail → le contenu (notamment step 01 d'acupuncture sur écran étroit) déborde géométriquement dans le panel suivant. Détecté 2026-06-25. */ min-height: auto; height: auto; } .panel.panel-benefits > .panel-inner, .panel.panel-session > .panel-inner, .panel.panel-pricing > .panel-inner, .panel.panel-faq > .panel-inner { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 2vh; animation: fadeIn 0.7s cubic-bezier(0.22,1,0.36,1) both; } /* ── Shared typography ────────────────────────────────────── */ .pr-eyebrow { font-family: 'Outfit', sans-serif; font-size: clamp(9px, 0.63vw, 11.3px); font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(210,168,135,0.85); text-align: center; } .pr-title { font-family: 'Outfit', sans-serif; font-size: clamp(36px, 4.95vw, 75.6px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1; text-align: center; animation: neonBreathSoft 7s ease-in-out infinite; } .pr-section-label { font-family: 'Outfit', sans-serif; font-size: clamp(9px, 0.63vw, 11.3px); font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(210,168,135,0.85); } .pr-section-title { font-family: 'Outfit', sans-serif; font-size: clamp(21.2px, 2vw, 33.8px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; line-height: 1.25; } .pr-section-head { display: flex; flex-direction: column; gap: 1.2vh; padding-bottom: 1.6vh; border-bottom: 1px solid rgba(255,240,220,0.16); margin-bottom: 2vh; } .pr-body { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1vw, 17.1px); font-weight: 300; line-height: 1.7; color: rgba(255,248,235,0.82); max-width: 42em; } .panel-hero .pr-body { font-size: clamp(15.5px, 1.15vw, 19.7px); } .pr-body + .pr-body { margin-top: 1.6vh; } /* ── Hero (image à droite, texte à gauche — desktop) ───────── */ .panel.panel-hero { position: relative; z-index: 10; width: 100%; min-height: 80vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14vh 0 8vh 5vw; overflow: hidden; } .hero-image { position: absolute; top: 0; right: 0; width: 50vw; height: 100%; z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; animation: fadeInSoft 2.4s cubic-bezier(0.25,0.1,0.25,1) 0.2s forwards; } .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(1.02) contrast(1.02); } .hero-image::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,235,210,0.04) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.5; pointer-events: none; z-index: 3; } .panel-hero .pr-title { text-align: left; font-family: 'Outfit', sans-serif; font-size: clamp(17.1px, 2.75vw, 40px); font-weight: 500; letter-spacing: 0.055em; line-height: 1.08; text-transform: uppercase; color: #fff; margin: 0 0 4.5vh 0; max-width: 16ch; opacity: 0; animation: fadeIn 1.8s cubic-bezier(0.25,0.1,0.25,1) 0.4s forwards, neonBreath 6s ease-in-out 0.4s infinite; } .pr-hero-body { text-align: left; margin: 0; max-width: 44vw; } .pr-hero-body .pr-body { font-family: 'DM Sans', sans-serif; font-size: clamp(14px, 1.24vw, 18px); font-weight: 300; letter-spacing: 0.02em; line-height: 1.45; max-width: 540px; color: #fff; opacity: 0; animation: fadeIn 1.8s cubic-bezier(0.25,0.1,0.25,1) 1.0s forwards; } .pr-hero-body .pr-body + .pr-body { margin-top: 1.4em; } .pr-body-mobile { display: none; } @media (max-width: 720px) { .pr-body-mobile { display: block; } .pr-body-desktop { display: none; } } /* ── Benefits ─────────────────────────────────────────────── */ .panel-benefits .panel-inner { align-items: stretch; } .pr-concerns { display: flex; flex-wrap: wrap; gap: 0.6em 0.7em; margin-top: 1vh; } .pr-concern-pill { font-family: 'Outfit', sans-serif; font-size: clamp(8.55px, 0.621vw, 10.98px); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,248,235,0.82); background: transparent; border: 1px solid rgba(255,240,220,0.35); border-radius: 999px; padding: 0.7em 1.3em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1); } .pr-concern-pill:hover { color: #fff; border-color: rgba(255,240,220,0.85); background: rgba(255,240,220,0.06); transform: translateY(-1px); } .pr-concern-pill.is-active { color: #1a0a04; background: rgba(255,245,225,0.96); border-color: rgba(255,245,225,0.96); } .pr-concern-pill[disabled] { opacity: 0.28; pointer-events: none; } .pr-concern-panels { margin-top: 3vh; } .pr-concern-panel { display: none; } .pr-concern-panel.is-active { display: block; animation: fadeIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } .pr-concern-panel ul { list-style: none; display: flex; flex-direction: column; gap: 1.3vh; max-width: 44em; } .pr-concern-panel li { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1vw, 16.2px); font-weight: 300; line-height: 1.6; color: rgba(255,248,235,0.82); padding-left: 1.4em; position: relative; } .pr-concern-panel li::before { content: '—'; position: absolute; left: 0; top: 0; color: rgba(210,168,135,0.75); } /* ── Session ──────────────────────────────────────────────── */ .pr-session-meta { font-family: 'DM Sans', sans-serif; font-style: italic; font-size: clamp(12.6px, 0.9vw, 14.9px); color: rgba(210,168,135,0.82); margin-top: -1vh; } .pr-steps { list-style: none; display: flex; flex-direction: column; gap: 1.2vh; margin-top: 1vh; } .pr-step { display: grid; grid-template-columns: auto 1fr; gap: 1em 1.4em; align-items: baseline; } .pr-step-num { font-family: 'Outfit', sans-serif; font-size: clamp(17.1px, 1.37vw, 23.4px); font-weight: 400; letter-spacing: 0.1em; color: rgba(210,168,135,0.9); line-height: 1; min-width: 2.2em; } .pr-step-body { display: flex; flex-direction: column; gap: 0.7vh; } .pr-step h4 { font-family: 'Outfit', sans-serif; font-size: clamp(12.2px, 0.93vw, 15.3px); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; } .pr-step p { font-family: 'DM Sans', sans-serif; font-size: clamp(13.1px, 0.97vw, 15.8px); font-weight: 300; line-height: 1.6; color: rgba(255,248,235,0.78); max-width: 44em; } .pr-session-cta { margin-top: 1.5vh; align-self: flex-start; } /* ── Pricing ──────────────────────────────────────────────── */ .pr-pricing { display: flex; flex-direction: column; gap: 1.8vh; background: rgba(255,240,220,0.04); border: 1px solid rgba(255,240,220,0.14); border-radius: 4px; padding: 4vh 3vw; max-width: 620px; } .pr-price-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1em; padding: 1.2vh 0; border-bottom: 1px dashed rgba(255,240,220,0.14); } .pr-price-row:last-child { border-bottom: 0; } .pr-price-label { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1vw, 16.2px); font-weight: 400; color: rgba(255,248,235,0.9); } .pr-price-meta { display: block; font-family: 'DM Sans', sans-serif; font-style: italic; font-size: clamp(11.7px, 0.82vw, 13.5px); font-weight: 300; color: rgba(255,248,235,0.55); margin-top: 0.3em; } .pr-price-value { font-family: 'Outfit', sans-serif; font-size: clamp(18.9px, 1.58vw, 25.2px); font-weight: 400; color: #fff; letter-spacing: 0.04em; } .pr-price-cta-row { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 1vh; } /* ── FAQ ──────────────────────────────────────────────────── */ .pr-faq { display: flex; flex-direction: column; } .pr-faq-item { border-bottom: 1px solid rgba(255,240,220,0.12); } .pr-faq-item:first-child { border-top: 1px solid rgba(255,240,220,0.12); } .pr-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 2vh 0; background: transparent; border: 0; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: clamp(13.5px, 1vw, 16.2px); font-weight: 400; letter-spacing: 0.1em; color: rgba(255,248,235,0.88); text-align: left; -webkit-tap-highlight-color: transparent; transition: color 0.25s ease; } .pr-faq-q:hover { color: #fff; } .pr-faq-q .sign { font-family: 'Outfit', sans-serif; font-size: 1.2em; font-weight: 300; color: rgba(210,168,135,0.85); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); display: inline-block; } .pr-faq-item.is-open .pr-faq-q .sign { transform: rotate(45deg); } .pr-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), padding 0.3s ease, opacity 0.3s ease; opacity: 0; } .pr-faq-item.is-open .pr-faq-a { max-height: 60vh; padding: 0 0 2.4vh; opacity: 1; } .pr-faq-a p { font-family: 'DM Sans', sans-serif; font-size: clamp(13.1px, 0.95vw, 15.3px); font-weight: 300; line-height: 1.65; color: rgba(255,248,235,0.78); max-width: 44em; } /* ── Tablette ──────────────────────────────────────────────── */ @media (max-width: 1024px) { .panel.panel-hero, .panel.panel-benefits, .panel.panel-session, .panel.panel-pricing, .panel.panel-faq { padding: 5vh 5vw; } .panel.panel-hero { padding: 12vh 6vw 0; min-height: auto; align-items: flex-start; } .hero-image { position: relative; width: 100%; height: 50vh; margin-top: 4vh; order: 99; } .panel-hero .pr-title { font-size: clamp(18px, 3.5vw, 36px); margin-bottom: 2vh; max-width: 100%; } .pr-hero-body { max-width: 100%; } .pr-hero-body .pr-body { font-size: clamp(11px, 1.5vw, 16px); } .pr-title { font-size: clamp(20px, 3.5vw, 40px); } .pr-section-title { font-size: clamp(14px, 2vw, 24px); } .pr-body { font-size: clamp(11px, 1.4vw, 16px); } .pr-concern-pill { font-size: clamp(7px, 0.8vw, 10px); padding: 0.5em 1em; } } /* ── Mobile ────────────────────────────────────────────────── */ @media (max-width: 720px) { .panel.panel-hero, .panel.panel-benefits, .panel.panel-session, .panel.panel-pricing, .panel.panel-faq { padding: 4vh 5vw; } /* Demande Lucas (08/07) : hero mobile = image moitié basse de l'écran, ancrée au bord bas ; texte centré (marges auto) entre header et image. */ .panel.panel-hero { padding: 10vh 0 0; min-height: 100dvh; align-items: stretch; justify-content: flex-start; overflow: hidden; } .panel-hero .pr-title { font-size: clamp(24px, 7.8vw, 36px); margin: auto 0 1.8vh 0; /* margin-top auto : centre le bloc texte */ padding: 0 6vw; max-width: 100%; text-align: left; position: relative; z-index: 5; } .panel-hero .pr-hero-body { position: relative; z-index: 5; padding: 0 6vw; margin-bottom: auto; /* margin-bottom auto : centre le bloc texte */ max-width: 100%; } .hero-image { position: relative; width: 100%; height: 50vh; /* moitié basse, finit au bord bas (padding 0) */ margin-top: 3vh; /* distance minimale avec le texte */ order: 99; top: auto; right: auto; bottom: auto; left: auto; opacity: 1; flex-shrink: 0; } .pr-hero-body .pr-body { font-size: clamp(14px, 3.6vw, 16px); line-height: 1.55; max-width: 100%; } .pr-hero-body .pr-body + .pr-body { margin-top: 0.9em; } .pr-eyebrow { font-size: clamp(9px, 2.4vw, 11px); } .pr-title { font-size: clamp(22px, 6vw, 28px); } .pr-section-label { font-size: clamp(9px, 2.4vw, 11px); } .pr-section-title { font-size: clamp(16px, 4.4vw, 22px); } .pr-section-head { gap: 0.8vh; padding-bottom: 1.4vh; margin-bottom: 1.6vh; } .pr-body { font-size: clamp(14px, 3.6vw, 16px); line-height: 1.55; } .pr-body + .pr-body { margin-top: 1.2vh; } .pr-concerns { gap: 0.4em 0.5em; margin-top: 0.6vh; } .pr-concern-pill { font-size: clamp(8px, 2.2vw, 10px); padding: 0.45em 0.9em; } .pr-concern-panels { margin-top: 2vh; } .pr-concern-panel li { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5; padding-left: 1.1em; } .pr-concern-panel ul { gap: 1vh; } .pr-session-meta { font-size: clamp(11px, 3vw, 13px); margin-top: 0; } .pr-steps { gap: 1.2vh; margin-top: 1vh; } .pr-step { gap: 0.6em 1em; } .pr-step-num { font-size: clamp(15px, 4vw, 18px); min-width: 1.8em; } .pr-step h4 { font-size: clamp(11px, 2.8vw, 13px); letter-spacing: 0.16em; } .pr-step p { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.45; } .pr-pricing { padding: 3vh 5vw; max-width: 100%; } .pr-price-row { padding: 1vh 0; } .pr-price-label { font-size: clamp(13px, 3.4vw, 15px); } .pr-price-meta { font-size: clamp(11px, 2.8vw, 13px); } .pr-price-value { font-size: clamp(17px, 4.6vw, 22px); } .pr-faq-q { font-size: clamp(13px, 3.4vw, 15px); padding: 1.6vh 0; letter-spacing: 0.06em; } .pr-faq-q .sign { font-size: 1.1em; } .pr-faq-a p { font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5; } .pr-faq-item.is-open .pr-faq-a { padding: 0 0 1.6vh; } } /* ══════════════════════════════════════════════════════════════ SNAP-SCROLL PAGE-PAR-PAGE (feedback client 30/06, volet 02) ══════════════════════════════════════════════════════════════ Justification garde-fou #11 : le client demande explicitement le même défilement écran-par-écran que la homepage sur les pages praticiens. Même mécanique CSS pure que 10-page-home.css : snap sur , desktop uniquement (≥721px) ; mobile garde le flux libre. min-height (et non height fixe) : benefits et FAQ peuvent dépasser 100vh (onglets, accordéons ouverts) — le snap autorise le défilement libre à l'intérieur d'une zone plus haute que le viewport, sans figer ni faire déborder le contenu. */ @media (min-width: 721px) { html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } .panel { scroll-snap-align: start; scroll-snap-stop: always; } .panel.panel-hero, .panel.panel-benefits, .panel.panel-session, .panel.panel-pricing, .panel.panel-faq { min-height: 100vh; justify-content: center; } /* le footer en flux reste atteignable après le dernier panneau */ .site-footer { scroll-snap-align: end; } } /* ══════════════════════════════════════════════════════════════ ALTERNANCE DE FONDS (feedback client 30/06, volet 02) hero rouge → benefits BEIGE → pricing rouge → session BEIGE → FAQ rouge. Zones beiges : composant .beige-bg (00-base.css). Retour Lucas 09/07 : le texte garde son design BLANC d'origine (aucun override d'encre). Retour Lucas 13/07 : gravures topographiques RETIRÉES des sub-practices — elles ne vivent plus que sur les panneaux V2 du chapitre method (purpose). */ .panel.panel-benefits > .panel-inner, .panel.panel-session > .panel-inner { position: relative; z-index: 2; } /* Retour Lucas 10/07 : plus AUCUN fondu entre fond beige et fond rouge — les zones beiges vont bord à bord et une ligne classique sépare les sous-pages (hairline chaude, même famille que .pr-section-head). */ .panel-benefits .beige-bg, .panel-session .beige-bg { -webkit-mask-image: none; mask-image: none; } .panel-benefits, .panel-session { border-top: 1px solid rgba(255, 240, 220, 0.18); border-bottom: 1px solid rgba(255, 240, 220, 0.18); } /* ── Mobile : les sections respirent (retour Lucas 10/07, déplacé en fin de fichier pour battre le bloc tablette dans la cascade : Benefits / Pricing / Session / FAQ trop entassés — plus d'air haut/bas + côtés) ── */ @media (max-width: 720px) { .panel.panel-benefits, .panel.panel-session, .panel.panel-pricing, .panel.panel-faq { padding: 13vh 8.5vw; } /* l'intérieur respire aussi : plus d'espace entre en-tête, contenus */ .panel.panel-benefits > .panel-inner, .panel.panel-session > .panel-inner, .panel.panel-pricing > .panel-inner, .panel.panel-faq > .panel-inner { gap: 3.6vh; } .pr-section-head { padding-bottom: 2.6vh; margin-bottom: 1.4vh; gap: 1.8vh; } .pr-steps { gap: 3vh; } .pr-concern-panels { margin-top: 4vh; } .pr-faq-q { padding: 2.8vh 0; } } /* ══════════════════════════════════════════════════════════════ PONCTUATION TOPO (retour Lucas 17/07, passe 2) — panneau benefits (beige) des 10 sous-pages pratiques : coin bas droit, hors de la colonne de contenu (max-width 1100px centrée) ══════════════════════════════════════════════════════════════ */ .panel-benefits .topo-img { filter: brightness(0.72) saturate(1.05); /* élargie (retour Lucas 18/07 : plus d'espace) — l'arc reste sous le contenu (b694 mesuré) au droit de la colonne, plein coin au-delà */ width: min(66%, 1000px); left: auto; right: -3%; bottom: -6%; opacity: 1; /* contenu b694 mesuré (uniforme ×10 pages) + marge 30px */ /* union bande basse (sous le contenu b694) + lobe vertical dans la colonne libre à droite de la grille 1100px — ×3 (retour Lucas 20/07) */ -webkit-mask-image: radial-gradient(110% 30% at 102% 103%, black 44%, transparent 100%), radial-gradient(32% 85% at 102% 103%, black 45%, transparent 100%); mask-image: radial-gradient(110% 30% at 102% 103%, black 44%, transparent 100%), radial-gradient(32% 85% at 102% 103%, black 45%, transparent 100%); } /* mobile : même coin bas droit que laptop, taille adaptée (retour Lucas 24/07 : mêmes emplacements mobile et laptop) */ @media (max-width: 720px) { .panel-benefits .topo-img { width: min(95vw, 500px); right: -14vw; bottom: -2vh; -webkit-mask-image: radial-gradient(105% 38% at 60% 103%, black 38%, transparent 100%); mask-image: radial-gradient(105% 38% at 60% 103%, black 38%, transparent 100%); } } /* ══════════════════════════════════════════════════════════════ GRAVURES RENFORCÉES (retour Lucas 24/07) — hero rouge, session beige (« How a session unfolds »), FAQ rouge (« Questions we often hear »). Laptop uniquement, masquées ≤720 comme benefits. ══════════════════════════════════════════════════════════════ */ /* hero : texte au-dessus de la gravure ; l'image (z3) reste devant */ .panel-hero .pr-title, .panel-hero .pr-hero-body { position: relative; z-index: 4; } .pr-hero-topo { width: min(48%, 720px); left: -4%; bottom: -8%; opacity: 1; z-index: 2; -webkit-mask-image: radial-gradient(110% 60% at -2% 103%, black 40%, transparent 100%); mask-image: radial-gradient(110% 60% at -2% 103%, black 40%, transparent 100%); } /* session (beige) : coin bas GAUCHE — pendant du coin droit de benefits */ .panel-session .topo-img { filter: brightness(0.72) saturate(1.05); width: min(60%, 900px); left: -4%; right: auto; bottom: -6%; opacity: 1; -webkit-mask-image: radial-gradient(100% 48% at -2% 103%, black 42%, transparent 100%); mask-image: radial-gradient(100% 48% at -2% 103%, black 42%, transparent 100%); } /* FAQ (rouge) : coin bas droit, sous l'accordéon */ .panel.panel-faq { position: relative; overflow: hidden; } .panel-faq > .panel-inner { position: relative; z-index: 2; } .pr-faq-topo { width: min(52%, 780px); right: -4%; bottom: -7%; opacity: 1; -webkit-mask-image: radial-gradient(110% 55% at 102% 103%, black 40%, transparent 100%); mask-image: radial-gradient(110% 55% at 102% 103%, black 40%, transparent 100%); } /* mobile : mêmes coins que laptop, tailles adaptées (retour Lucas 24/07 : mêmes emplacements mobile et laptop). Sur le hero mobile la moitié basse est l'image → la gravure vit sur le bord gauche de la zone rouge, dissolution serrée sous le texte. */ @media (max-width: 720px) { .pr-hero-topo { width: min(80vw, 420px); left: -18vw; bottom: auto; top: 24vh; -webkit-mask-image: radial-gradient(88% 75% at 0% 50%, black 28%, transparent 96%); mask-image: radial-gradient(88% 75% at 0% 50%, black 28%, transparent 96%); } .panel-session .topo-img { width: min(92vw, 480px); left: -16vw; bottom: -2vh; -webkit-mask-image: radial-gradient(100% 38% at 40% 103%, black 36%, transparent 100%); mask-image: radial-gradient(100% 38% at 40% 103%, black 36%, transparent 100%); } .pr-faq-topo { width: min(90vw, 460px); right: -16vw; bottom: -2vh; -webkit-mask-image: radial-gradient(100% 40% at 60% 103%, black 36%, transparent 100%); mask-image: radial-gradient(100% 40% at 60% 103%, black 36%, transparent 100%); } }