/* ============================================================ * 10-page-purpose.css — page Purpose redessinée (2026-07-10) * ------------------------------------------------------------ * Hero image plein écran (titre PURPOSE + intro bas-gauche) puis * un panneau plein écran par chapitre : les sections du chapitre * sont des COLONNES alternant fond beige (.beige-bg) et fond * rouge (canvas du site). Clic sur une colonne → le texte * développé apparaît dans la colonne (purpose-cols.js, accordéon). * Épuré, symétrique, respirant. L'iconographie de la méthode est * retirée (demande client). Snap CSS pur page-par-page * (garde-fou #11 : demande client, même mécanique que la home). * Remplace intégralement l'ancienne slice héritée du purpose V14 * (snap-container + subchapters), supprimée avec son JS de page. * ============================================================ */ /* Un seul scroll container = ; body reste overflow:visible (sinon le body scrolle et le snap sur est inerte). */ html { overflow: auto; height: auto; } body { overflow: visible; height: auto; } .purpose-page { position: relative; z-index: 10; } @media (min-width: 721px) { html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } .pp-panel { scroll-snap-align: start; scroll-snap-stop: always; } .site-footer { scroll-snap-align: end; } } /* ── Hero ── */ .pp-hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } .pp-hero-image { position: absolute; inset: 0; } .pp-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(1.02) contrast(1.02); } .pp-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 12, 6, 0.55) 0%, rgba(30, 12, 6, 0.14) 36%, rgba(30, 12, 6, 0) 58%); pointer-events: none; } .pp-hero-text { position: relative; z-index: 2; padding: 0 5vw 6vh; max-width: 78ch; } .pp-hero-title { font-family: 'Outfit', sans-serif; font-size: clamp(40px, 6.4vw, 96px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1; text-shadow: var(--neonGlowSoft); will-change: opacity; animation: neonBreathSoft 7s ease-in-out infinite; margin-bottom: 2.4vh; } .pp-hero-body { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1.02vw, 17px); font-weight: 300; line-height: 1.75; color: rgba(255, 248, 235, 0.92); } /* ── Chapitres v2 (retour Lucas 10/07 : pas fan des colonnes) ── Écran scindé : une moitié image (côté alterné, .pp-flip), une moitié contenu — en-tête de chapitre puis les sections en RANGÉES accordéon (numéro · phrase · +) ; le texte développé se déplie sous la rangée au clic (purpose-cols.js inchangé). Fonds alternés rouge / beige bord à bord — même langage que Events. */ .pp-chapter { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-top: 1px solid rgba(255, 240, 220, 0.18); } .pp-media { position: relative; z-index: 2; overflow: hidden; } /* Image en ABSOLU (retour Lucas 13/07) : en flux grid, la hauteur intrinsèque de l'image portrait (50vw × 4/3 ≈ 119 % du viewport sur laptop 16:9) gonflait la rangée → chaque chapitre dépassait 100vh et le snap demandait "un scroll de trop". Sortie du calcul de rangée, le panneau retombe à exactement 100vh. */ .pp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pp-flip .pp-media { order: 2; } .pp-flip .pp-content { order: 1; } .pp-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 11vh clamp(28px, 4vw, 72px) 9vh; } .pp-ch-head { margin-bottom: 3.6vh; } /* numérotation chapitres/rangées retirée (retour Lucas 13/07 : texte seul) */ .pp-ch-title { font-family: 'Outfit', sans-serif; font-size: clamp(21px, 2.1vw, 34px); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; line-height: 1.2; text-shadow: var(--neonGlowSoft); will-change: opacity; animation: neonBreathSoft 7s ease-in-out infinite; margin-bottom: 1.8vh; } .pp-ch-intro { font-family: 'DM Sans', sans-serif; font-size: clamp(12.8px, 0.95vw, 15.8px); font-weight: 300; line-height: 1.65; color: rgba(255, 248, 235, 0.8); max-width: 52ch; } .pp-ch-intro strong { font-weight: 500; color: #fff; } /* rangées accordéon */ .pp-cols { display: flex; flex-direction: column; } .pp-col { position: relative; display: block; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid rgba(255, 240, 220, 0.16); padding: 1.9vh 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pp-col:last-child { border-bottom: 1px solid rgba(255, 240, 220, 0.16); } .pp-row-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1em; } .pp-col-title { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1.05vw, 17.4px); font-weight: 300; line-height: 1.5; color: #fff; transition: color 0.25s ease; } .pp-col:hover .pp-col-title { color: rgba(255, 235, 210, 1); } .pp-keyword { font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.5em; text-shadow: var(--neonGlowSoft); } .pp-col-plus { font-family: 'Outfit', sans-serif; font-size: clamp(14px, 1.1vw, 19px); font-weight: 300; color: rgba(255, 235, 210, 0.75); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease; transform-origin: 50% 55%; display: inline-block; } .pp-col:hover .pp-col-plus { color: rgba(255, 235, 210, 1); } .pp-col.is-open .pp-col-plus { transform: rotate(45deg); } /* détail déplié sous la rangée */ .pp-col-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; opacity: 0; } .pp-col.is-open .pp-col-detail { grid-template-rows: 1fr; opacity: 1; } .pp-col-detail-inner { overflow: hidden; min-height: 0; } .pp-col-detail p { font-family: 'DM Sans', sans-serif; /* même taille que .pp-col-title (retour Lucas 13/07 : le corps déplié était trop petit par rapport à la phrase de la rangée) */ font-size: clamp(13.5px, 1.05vw, 17.4px); font-weight: 300; line-height: 1.68; color: rgba(255, 248, 235, 0.82); max-width: 56ch; margin: 1.4em 0 0.4em 0; } .pp-col-detail strong { font-weight: 500; color: #fff; } /* zone beige bord à bord */ .pp-chapter .beige-bg { -webkit-mask-image: none; mask-image: none; } /* ── Close ── */ .pp-close { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .close-logo { display: block; width: clamp(140px, 16vw, 280px); height: auto; filter: drop-shadow(0 0 0.75px rgba(255,233,205,0.88)) drop-shadow(0 0 2px rgba(255,223,193,0.63)) drop-shadow(0 0 4px rgba(247,205,170,0.35)); margin-bottom: 2vh; } .close-line { font-family: 'DM Sans', sans-serif; font-size: clamp(18.48px, 1.58vw, 29.04px); font-weight: 300; line-height: 1.8; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.75); font-style: italic; } /* Glyphes de marque dans le corps de texte (chapitre believe) */ .inline-logo { display: inline-block; vertical-align: -0.22em; margin: 0 0.05em; } .inline-logo-m { height: 0.96em; vertical-align: -0.12em; margin: 0 0.5em; } .n-glow-img { filter: drop-shadow(0 0 0.75px rgba(255,233,205,0.88)) drop-shadow(0 0 2px rgba(255,223,193,0.63)) drop-shadow(0 0 4px rgba(247,205,170,0.35)); } /* ── Chapitre 04 : Peak Health Method — COLONNES NETTES bord à bord (feedback client 16/07/2026 : les 3 cartes encadrées étaient jugées « plates » ; style aligné sur la page 2 d'About — colonnes pleines hauteur beige / rouge / beige, hairlines, ni cadre ni ombre). L'interaction hover/tap qui dévoile le texte est conservée. ── */ .pp-method2 { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 13vh 0 0; /* pas de padding latéral : colonnes bord à bord */ gap: 5vh; } .pp-m2-head { text-align: center; margin: 0 auto; padding: 0 5vw; max-width: 72ch; } .pp-m2-head .pp-ch-intro { margin-inline: auto; } .pp-m2-cols { display: flex; align-items: stretch; width: 100%; flex: 1 1 auto; /* remplit le reste du panneau 100vh */ border-top: 1px solid rgba(255, 240, 220, 0.16); } .pp-m2-card { position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; } .pp-m2-card + .pp-m2-card { border-left: 1px solid rgba(255, 240, 220, 0.16); } /* zone beige pleine colonne (pas de fondu vertical du composant) */ .pp-m2-card .beige-bg { -webkit-mask-image: none; mask-image: none; } /* Gravure topo « à la main » (générée par tools/gen-topo.js) — zone basse des colonnes beiges uniquement, jamais sous le texte. */ .pp-m2-card .topo-img { width: 126%; left: 50%; transform: translateX(-50%); bottom: -4%; opacity: 0.95; /* l'encre inégale est dans le SVG */ -webkit-mask-image: linear-gradient(to bottom, transparent 46%, black 68%); mask-image: linear-gradient(to bottom, transparent 46%, black 68%); } /* colonne centrale ROUGE (fond du site nu) : encre → blancs chauds */ .pp-m2-card.pp-m2-red .pp-m2-sub { color: rgba(255, 244, 228, 0.82); } .pp-m2-card.pp-m2-red .pp-m2-text { color: rgba(255, 248, 235, 0.88); } .pp-m2-card.pp-m2-red .pp-m2-key::after { background: rgba(255, 245, 230, 0.5); } .pp-m2-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; /* colonnes pleines hauteur (16/07) : le panneau 100vh fixe la hauteur ; la zone basse réservée accueille la gravure topo */ min-height: clamp(380px, 52vh, 560px); padding: clamp(30px, 4.6vh, 52px) clamp(26px, 2.6vw, 44px) clamp(110px, 17vh, 180px); } /* titre : BLANC + glow (retour Lucas 13/07) — même pattern que le texte blanc validé des zones beiges des sub-practices */ .pp-m2-key { font-family: 'Outfit', sans-serif; font-size: clamp(19px, 1.75vw, 28px); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: var(--neonGlowSoft); will-change: opacity; animation: neonBreathSoft 7s ease-in-out infinite; text-align: center; } /* trait court sous le titre — même langage gravé que le cadre */ .pp-m2-key::after { content: ''; display: block; width: 2.6em; height: 1px; margin: 1.7vh auto 0; background: rgba(53, 36, 15, 0.4); } .pp-m2-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(13.5px, 1.05vw, 17px); font-weight: 400; font-style: italic; color: #533C24; text-align: center; margin: 1.6vh 0 2.2vh; } /* corps agrandi (retour Lucas 13/07 : lisibilité) */ .pp-m2-text { font-family: 'DM Sans', sans-serif; font-size: clamp(14.5px, 1.12vw, 18px); font-weight: 300; line-height: 1.72; color: #42301C; } /* ══════════════════════════════════════════════════════════════ PANNEAUX V2 INTERACTIFS (retours Lucas 14/07) — tous formats. Au repos : titre + phrase SEULS, centrés au milieu du panneau (gravure statique toujours visible dans le tiers bas). Révélation : le titre ET la phrase s'effacent ENTIÈREMENT (0.3s), PUIS le texte développé apparaît (délai 0.38s — séquencement demandé : tout disparaît avant que le second texte apparaisse). - Desktop (pointeur avec hover) : survol ou focus clavier (cartes tabindex="0"), via @media (hover: hover). - Tactile (mobile/tablette) : TAP sur le panneau — method-cards.js pose/retire la classe .is-open (un seul panneau ouvert). ══════════════════════════════════════════════════════════════ */ .pp-m2-body { justify-content: center; padding: clamp(30px, 4.6vh, 52px) clamp(26px, 2.6vw, 44px); } .pp-m2-key, .pp-m2-sub { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .pp-m2-sub { margin-bottom: 0; } /* texte développé : calque superposé, masqué au repos ; réserve basse pour ne pas chevaucher la gravure */ .pp-m2-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4.6vh, 52px) clamp(26px, 2.6vw, 44px) clamp(96px, 15vh, 170px); opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } /* ── révélation par TAP (mobile — classe posée par method-cards.js) ── NB : mêmes déclarations que le bloc hover ci-dessous ; dupliquées car un sélecteur ne peut pas traverser une @media. */ .pp-m2-card.is-open .pp-m2-key, .pp-m2-card.is-open .pp-m2-sub { opacity: 0; transform: translateY(-16px); animation: none; /* neonBreathSoft pilote opacity et PRIME sur la transition */ } .pp-m2-card.is-open .pp-m2-text { opacity: 1; transform: none; transition-delay: 0.38s; /* n'apparaît qu'après l'effacement complet */ } /* ── révélation par SURVOL / focus clavier (pointeurs avec hover) ── */ @media (hover: hover) { .pp-m2-card:hover .pp-m2-key, .pp-m2-card:focus-within .pp-m2-key, .pp-m2-card:hover .pp-m2-sub, .pp-m2-card:focus-within .pp-m2-sub { opacity: 0; transform: translateY(-16px); animation: none; } .pp-m2-card:hover .pp-m2-text, .pp-m2-card:focus-within .pp-m2-text { opacity: 1; transform: none; transition-delay: 0.38s; } } /* ── Mobile / tablette : chapitres en flux, colonnes empilées ── */ @media (max-width: 900px) { .pp-hero { min-height: 100dvh; } .pp-hero-image img { object-position: 62% center; } .pp-chapter { grid-template-columns: 1fr; min-height: auto; } .pp-flip .pp-media { order: 1; } .pp-flip .pp-content { order: 2; } /* l'image étant en absolu (cf. .pp-media img), la hauteur doit être explicite — max-height seul s'effondrerait à 0 en pile mobile */ .pp-media { height: 42vh; } .pp-content { padding: 5.5vh 7vw 7vh; } .pp-col-detail p { margin-left: 0; } .pp-close { min-height: 70vh; } /* Method : colonnes empilées bord à bord, flux libre (le panneau peut dépasser un écran — le snap autorise le défilement interne) */ .pp-method2 { min-height: auto; padding: 9vh 0 0; gap: 4vh; } .pp-m2-head { padding: 0 7vw; } .pp-m2-cols { flex-direction: column; } /* FIX vide mobile (retour Lucas 24/07) : en colonne, flex:1 1 0 + overflow:hidden écrasait chaque carte à 0px (minimum automatique nul) — les rectangles Understand/Restore/Rise n'existaient plus. En pile, chaque carte reprend sa hauteur naturelle. */ .pp-m2-card { flex: 0 0 auto; } .pp-m2-card + .pp-m2-card { border-left: none; border-top: 1px solid rgba(255, 240, 220, 0.16); } .pp-m2-body { min-height: clamp(340px, 52dvh, 480px); } } /* ── Bande tablette 721–900px : le snap (≥721) est actif alors que les chapitres viennent de passer en pile — sans correctif ils font moins d'un écran (850–950px pour 1024) et le snap s'arrête « en l'air » (retour Lucas 13/07 : sensation de scroll inégale). Un panneau = un écran, comme events : chapitre plein viewport (image 42dvh en haut, contenu centré dans la moitié restante), close plein écran aussi. ── */ @media (min-width: 721px) and (max-width: 900px) { /* rangée image élastique : elle cède la place au contenu sur les viewports bas (850×600 : +25px sinon) au lieu de faire déborder */ .pp-chapter { min-height: 100dvh; grid-template-rows: minmax(28dvh, 42dvh) 1fr; } .pp-media { height: 100%; } .pp-close { min-height: 100dvh; } } /* ══════════════════════════════════════════════════════════════ PONCTUATION TOPO (retour Lucas 17/07, passe 2) — chapitres ROUGES ══════════════════════════════════════════════════════════════ */ /* (topo des chapitres 1 et 3 retirée — retour Lucas 18/07 ; re-demandée le 24/07 sur ch.1 « An Unprecedented Era » (rouge) et ch.2 « What We Believe » (beige), version laptop) */ .pp-chapter { overflow: hidden; } .pp-chapter .pp-content { position: relative; z-index: 2; } /* ch.1 (rouge, texte à droite) : coin bas DROIT, sous l'accordéon */ .pp-era-topo { width: min(44%, 680px); right: -3%; bottom: -5%; opacity: 1; -webkit-mask-image: radial-gradient(110% 58% at 102% 103%, black 40%, transparent 100%); mask-image: radial-gradient(110% 58% at 102% 103%, black 40%, transparent 100%); } /* ch.2 (beige, texte à gauche) : coin bas GAUCHE */ .pp-believe-topo { width: min(44%, 680px); left: -3%; bottom: -5%; -webkit-mask-image: radial-gradient(110% 58% at -2% 103%, black 40%, transparent 100%); mask-image: radial-gradient(110% 58% at -2% 103%, black 40%, transparent 100%); } /* mobile : mêmes coins que laptop, tailles adaptées (retour Lucas 24/07 : mêmes emplacements mobile et laptop) */ @media (max-width: 900px) { .pp-era-topo, .pp-believe-topo { width: min(88vw, 470px); -webkit-mask-image: radial-gradient(100% 42% at 50% 103%, black 36%, transparent 100%); mask-image: radial-gradient(100% 42% at 50% 103%, black 36%, transparent 100%); } .pp-era-topo { right: -16vw; bottom: -2vh; } .pp-believe-topo { left: -16vw; bottom: -2vh; } } /* dernière page (logo + devise centrés) : coin bas gauche, plus ample */ .pp-close { position: relative; overflow: hidden; } .pp-close .topo-accent { width: min(64%, 940px); left: -4%; bottom: -6%; opacity: 1; /* page libre (logo centré) : gravure ample, quasi plein cadre */ -webkit-mask-image: radial-gradient(130% 112% at -2% 103%, black 52%, transparent 100%); mask-image: radial-gradient(130% 112% at -2% 103%, black 52%, transparent 100%); } /* mobile : même coin bas gauche que laptop, taille adaptée (24/07) */ @media (max-width: 720px) { .pp-close .topo-accent { width: min(92vw, 480px); left: -14vw; bottom: -3vh; } }