/** * home-hero.css : Hero de la home, séquence d'ouverture « la traversée », * et enveloppe de la section « Choisissez une famille » (le composant vitrine lui-même * vit dans home-showcase.css). * - Hero : accroche centrée + plans géométriques immobiles en profondeur, là où la caméra * de la séquence d'ouverture s'arrête. Aucun mouvement d'arrière-plan. * - Séquence d'ouverture : html.intro-on (posée dans le de index.html : une fois par * session, ou à l'arrivée par le logo de la nav : ou par home-intro.js quand le logo la rejoue * sur place ; jamais en mouvement réduit) affiche le voile piloté par js/pages/home-intro.js ; * html.intro-landing = le hero atterrit ; html.intro-fast = atterrissage accéléré (séquence passée). * Sublime Gestion Site Vitrine */ /* === HERO : MISE EN PAGE === */ .home-hero { position: relative; overflow: hidden; /* au centre, la lumière crème par laquelle la séquence d'ouverture débouche */ background: radial-gradient(ellipse 72% 62% at 50% 46%, var(--cream) 0%, rgba(250, 243, 232, 0) 72%); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 128px var(--space-6) var(--space-20); } /* Halo orange discret + trame de points estompée : fond statique */ .home-hero::before { content: ''; position: absolute; top: -220px; right: -160px; width: 760px; height: 760px; background: radial-gradient(circle, rgba(var(--orange-rgb), 0.07) 0%, transparent 65%); pointer-events: none; } .home-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--noir-rgb), 0.08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 52%, #000 0%, transparent 76%); mask-image: radial-gradient(ellipse 62% 55% at 50% 52%, #000 0%, transparent 76%); pointer-events: none; } .home-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 920px; margin: 0 auto; text-align: center; } /* === HERO : PLANS EN PROFONDEUR (immobiles) === */ /* Les derniers plans de la traversée : ils « se posent » à l'arrivée (léger recul de caméra), puis ne bougent plus. Les tailles sont en vmin pour garder la même composition partout. */ .home-hero__depth { position: absolute; inset: 0; z-index: 1; perspective: 1200px; perspective-origin: 50% 45%; overflow: hidden; pointer-events: none; } .home-hero__scene { position: absolute; inset: 0; transform-style: preserve-3d; animation: depthSettle 1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both; } @keyframes depthSettle { from { opacity: 0; transform: translateZ(-220px); } to { opacity: 1; transform: none; } } .hd { position: absolute; display: block; /* Parallaxe au curseur (animations.js) : plus un plan est proche, plus il bouge (--d, en px) */ translate: calc(var(--px, 0) * var(--d, 8) * -1px) calc(var(--py, 0) * var(--d, 8) * -1px); } .hd--ring { --d: 5; } .hd--ring-sm { --d: 7; } .hd--arc { --d: 9; } .hd--bar { --d: 12; } .hd--dot { --d: 14; } .hd--quad-o { --d: 18; } .hd--quad-d { --d: 24; } .hd--ring { left: -13%; top: 16%; width: 62vmin; height: 62vmin; border-radius: 50%; border: 1.5px solid rgba(var(--orange-rgb), 0.3); transform: translateZ(-320px); } .hd--arc { right: -5%; top: 4%; width: 38vmin; height: 38vmin; border: 1.5px solid rgba(var(--noir-rgb), 0.14); border-radius: 100% 0 0 0; transform: translateZ(-140px) rotate(90deg); } .hd--ring-sm { right: 7%; bottom: 11%; width: 17vmin; height: 17vmin; border-radius: 50%; border: 1.5px solid rgba(var(--noir-rgb), 0.12); transform: translateZ(-200px); } .hd--bar { left: 16%; top: 28%; width: 15vmin; height: 2px; border-radius: 2px; background: var(--orange); opacity: 0.8; transform: translateZ(-90px) rotate(-24deg); } .hd--dot { right: 21%; bottom: 23%; width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: var(--orange); transform: translateZ(-60px); } /* Deux quarts du monogramme, comme ceux qui viennent de s'ouvrir */ .hd--quad-o { left: 9%; bottom: 14%; width: 12vmin; height: 12vmin; border-radius: 100% 0 0 0; background: var(--orange); transform: translateZ(-20px) rotate(180deg); } .hd--quad-d { right: 12%; top: 22%; width: 7.5vmin; height: 7.5vmin; border-radius: 100% 0 0 0; background: var(--noir); transform: translateZ(80px) rotate(270deg); } /* === HERO : TEXTE === */ /* Visite normale : entrées calées sur le loader de la home (1,2 s). */ .home-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-6); animation: fadeUp 0.6s var(--ease-spring) 1.1s both; } .home-hero__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; } .home-hero__h1 { font-size: clamp(44px, 7.2vw, 96px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ink); margin-bottom: var(--space-6); } .home-hero__h1 em { font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; color: var(--orange); letter-spacing: -0.025em; } /* L'accent passe à la ligne et s'anime comme un bloc */ .home-hero__h1 .split-word--elem, .home-hero__h1 > em { display: block; } .home-hero .split-word { animation-delay: calc(1.15s + var(--wi, 0) * 0.06s); } .home-hero__sub { max-width: 600px; margin: 0 auto var(--space-8); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); animation: fadeUp 0.6s var(--ease-spring) 1.45s both; } .home-hero__sub .nw { white-space: nowrap; } .home-hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; animation: fadeUp 0.6s var(--ease-spring) 1.55s both; } .home-hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: var(--space-6); font-size: 13px; font-weight: 500; color: var(--muted); animation: fadeUp 0.6s var(--ease-spring) 1.65s both; } .home-hero__proof li { display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s ease; } .home-hero__proof svg { color: var(--success); flex-shrink: 0; transition: transform 0.3s var(--ease-bounce); } .home-hero__proof li:hover { color: var(--ink); } .home-hero__proof li:hover svg { transform: scale(1.25); } /* Survol de la pastille d'en-tête */ .home-hero__eyebrow { transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s var(--ease-spring); } .home-hero__eyebrow:hover { border-color: rgba(var(--orange-rgb), 0.4); background-color: var(--cream); transform: translateY(-1px); } /* === HERO : ATTERRISSAGE APRÈS LA SÉQUENCE D'OUVERTURE === */ html.intro-on:not(.intro-landing) .home-hero__eyebrow, html.intro-on:not(.intro-landing) .home-hero .split-word, html.intro-on:not(.intro-landing) .home-hero__sub, html.intro-on:not(.intro-landing) .home-hero__actions, html.intro-on:not(.intro-landing) .home-hero__proof, html.intro-on:not(.intro-landing) .home-hero__scene { animation: none; opacity: 0; } html.intro-landing .home-hero__eyebrow { animation: fadeUp 0.5s var(--ease-spring) 0s both; } html.intro-landing .home-hero .split-word { animation: fadeUp 0.5s var(--ease-spring) calc(0.06s + var(--wi, 0) * 0.045s) both; } html.intro-landing .home-hero__sub { animation: fadeUp 0.5s var(--ease-spring) 0.22s both; } html.intro-landing .home-hero__actions { animation: fadeUp 0.5s var(--ease-spring) 0.3s both; } html.intro-landing .home-hero__proof { animation: fadeUp 0.5s var(--ease-spring) 0.38s both; } html.intro-landing .home-hero__scene { animation: depthSettle 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s both; } /* Séquence passée : tout arrive d'un coup */ html.intro-fast .home-hero__eyebrow, html.intro-fast .home-hero .split-word, html.intro-fast .home-hero__sub, html.intro-fast .home-hero__actions, html.intro-fast .home-hero__proof { animation-duration: 0.35s; animation-delay: 0s; } html.intro-fast .home-hero__scene { animation-duration: 0.5s; } /* === SÉQUENCE D'OUVERTURE : VOILE === */ .intro { display: none; } html.intro-on, html.intro-on body { overflow: hidden; } html.intro-on .loader { display: none !important; } html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 9998; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 50%, #27232A 0%, #1A1A1F 58%, #111114 100%); cursor: pointer; transition: opacity 0.22s ease; -webkit-tap-highlight-color: transparent; } /* Fin : la lumière a tout recouvert, le voile devient crème puis s'efface sur le hero */ /* (sélecteur aussi précis que html.intro-on .intro, sinon le fond sombre reste et flashe) */ html.intro-on .intro.is-light { background: var(--cream); } .intro.is-light .intro__stage, .intro.is-light .intro__hud { visibility: hidden; } .intro.is-out { opacity: 0; pointer-events: none; } /* Juste avant la lumière, l'habillage s'efface (il ne doit pas flotter sur le crème) */ .intro__hud { transition: opacity 0.2s ease; } .intro.is-arriving .intro__hud { opacity: 0; } /* === SÉQUENCE D'OUVERTURE : ESPACE 3D === */ /* Perspective en vmin : la profondeur est la même sur mobile et sur grand écran. home-intro.js ne déplace que .intro__world (la caméra) et règle les opacités. */ .intro__stage { position: absolute; inset: 0; overflow: hidden; perspective: 100vmin; perspective-origin: 50% 50%; } .intro__world { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(-10deg); will-change: transform; } .intro__layer, .intro__mark, .intro__disc { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h, var(--w)); margin-left: calc(var(--w) / -2); margin-top: calc(var(--h, var(--w)) / -2); backface-visibility: hidden; will-change: transform, opacity; } .intro__layer svg { display: block; width: 100%; height: 100%; overflow: visible; } .intro__layer--frag { color: #FAF3E8; } .intro__layer--ring { border-radius: 50%; border: 0.3vmin solid #FAF3E8; } .intro__layer--ring.is-o { border-color: var(--orange); } .intro__layer--quad { border-radius: 100% 0 0 0; } .intro__layer--quad.is-fill-o { background: var(--orange); } .intro__layer--quad.is-fill-d { background: #3A3540; } .intro__layer--quad.is-line-c { border: 0.35vmin solid #FAF3E8; } .intro__layer--dot { border-radius: 50%; background: #FAF3E8; } .intro__layer--dot.is-o { background: var(--orange); } .intro__layer--bar { border-radius: 1vmin; background: #FAF3E8; } .intro__layer--bar.is-o { background: var(--orange); } .intro__layer--glow { border-radius: 50%; background: radial-gradient(circle, rgba(var(--orange-rgb), 0.42) 0%, rgba(var(--orange-rgb), 0.12) 34%, transparent 64%); } /* Le monogramme : quatre quarts du logo, chacun dans son propre calque pour pouvoir s'ouvrir */ .intro__mark { --w: 64vmin; transform: translate3d(0, 0, -262vmin) rotate(-18deg); } /* Chaque quart occupe son seul quadrant (viewBox recadrée) : 4× moins de surface à composer */ .intro__quarter { position: absolute; width: 50%; height: 50%; fill: var(--orange); overflow: visible; will-change: transform, opacity; } .intro__quarter--tl { left: 0; top: 0; } .intro__quarter--tr { left: 50%; top: 0; } .intro__quarter--bl { left: 0; top: 50%; } .intro__quarter--br { left: 50%; top: 50%; } /* La lumière : un disque couleur du site qui jaillit par le centre du portail */ .intro__disc { --w: 50vmin; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 7vmin rgba(var(--orange-rgb), 0.28), 0 0 9vmin rgba(var(--orange-rgb), 0.35); transform: translate3d(0, 0, -264vmin) scale(0.02); } /* === SÉQUENCE D'OUVERTURE : HABILLAGE (signature, passer, progression) === */ .intro__hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .intro__wordmark { position: absolute; left: 28px; bottom: 26px; width: 104px; height: auto; opacity: 0.5; } .intro__skip { position: absolute; right: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.86); font: 500 13px/1 'Inter', sans-serif; letter-spacing: 0.01em; cursor: pointer; pointer-events: auto; opacity: 0; animation: introHud 0.35s ease 0.12s forwards; transition: background-color 0.2s ease, border-color 0.2s ease; } .intro__skip:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.36); } .intro__skip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } @keyframes introHud { to { opacity: 1; } } .intro.is-skipping .intro__skip { animation: none; opacity: 0; transition: opacity 0.15s ease; } .intro__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.06); } .intro__progress span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left center; } /* === SÉQUENCE D'OUVERTURE : MATIÈRE & RÉCIT === */ /* Grain de pellicule (bruit SVG en tuile, qui saute 3 fois par cycle) et vignettage : de la matière plutôt que des aplats parfaitement lisses. Tons neutres chauds : le grain se voit aussi bien sur le noir que sur la lumière crème de la fin. Coût : le grain est un calque composé à part (animation de transform) ; il doit rester à peine plus grand que l'écran. */ .intro::before, .intro::after { content: ''; position: absolute; z-index: 1; pointer-events: none; } .intro::before { inset: 0; background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.5) 100%); transition: opacity 0.2s ease; } .intro::after { inset: -6%; /* les sauts du grain font au plus 4 % du calque : inutile de composer 3 écrans de bruit (mémoire GPU, premier rendu) */ opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; animation: introGrain 0.45s steps(3) infinite; } /* L'aube : le vignettage se dissout pendant que le disque crème envahit l'écran (ses coins sombres griseraient la lumière). Le grain, lui, reste jusqu'au bout. */ .intro.is-dawn::before, .intro.is-light::before { opacity: 0; } .intro.is-dawn::before { transition: opacity 0.45s ease-in; } @keyframes introGrain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -4%); } 100% { transform: translate(-2%, 1%); } } /* Double trait « à la main » sous chaque fragment */ .intro__layer--frag svg { filter: drop-shadow(0.24vmin 0.2vmin 0 rgba(250, 243, 232, 0.22)); } /* Notes griffonnées : les détails pour qui regarde deux fois */ .intro__note { position: absolute; left: 4%; top: calc(100% + 1.2vmin); white-space: nowrap; font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: 2vmin; /* repli : home-intro.js la calcule selon la profondeur, pour une taille lisible */ letter-spacing: 0.01em; color: rgba(250, 243, 232, 0.84); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); transform: rotate(-2deg); } .intro__note::before { content: ''; display: inline-block; width: 1.1em; height: 0; margin-right: 0.35em; vertical-align: middle; border-top: 0.16em solid var(--orange); } /* Place de la note, choisie fragment par fragment (home-intro.js) pour qu'aucune n'en chevauche une autre */ .intro__note--br { left: auto; right: 4%; text-align: right; } .intro__note--t { top: auto; bottom: calc(100% + 1.2vmin); } /* Post-it en papier (grain, coin qui rebique) */ .intro__layer--postit { display: flex; align-items: center; justify-content: center; padding: 1.2vmin; text-align: center; font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: max(2vmin, 11px); line-height: 1.15; color: #3A2A1F; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), #EFDDB8; background-size: 120px 120px, auto; border-radius: 0.4vmin 0.4vmin 1.8vmin 0.4vmin; box-shadow: 0 1.4vmin 2.6vmin -1vmin rgba(0, 0, 0, 0.55); } /* Fichiers qui traînent (étiquette avec pastille orange) */ .intro__layer--tag { display: flex; align-items: center; gap: 0.9vmin; padding: 0 1.4vmin; border-radius: 1vmin; border: 0.2vmin solid rgba(250, 243, 232, 0.35); background: rgba(250, 243, 232, 0.06); font: 500 max(1.7vmin, 10px)/1 'Inter', sans-serif; color: rgba(250, 243, 232, 0.82); white-space: nowrap; } .intro__layer--tag::before { content: ''; flex-shrink: 0; width: 1.2vmin; height: 1.5vmin; border-radius: 0.2vmin; background: var(--orange); opacity: 0.85; } /* Onde du verrouillage */ .intro__layer--shock { border-radius: 50%; border: 0.35vmin solid var(--orange); } /* Légende du récit : « Du désordre de votre quotidien… » → « …à un seul outil clair. » */ .intro__caption { position: absolute; left: 50%; bottom: 34px; width: max-content; max-width: calc(100% - 48px); transform: translateX(-50%); font-family: 'Instrument Sans', serif; font-style: italic; font-weight: 500; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.01em; color: rgba(250, 243, 232, 0.84); text-align: center; opacity: 0; animation: introHud 0.5s ease 0.3s forwards; } .intro__caption span { display: block; transition: opacity 0.35s ease, transform 0.45s var(--ease-spring); } .intro__caption span + span { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); } .intro__caption.is-second span:first-child { opacity: 0; transform: translateY(-8px); } .intro__caption.is-second span + span { opacity: 1; transform: none; } /* === SECTION « CHOISISSEZ UNE FAMILLE » : la vitrine, sous le hero === */ .families-section { position: relative; padding: var(--space-20) var(--space-6) var(--space-24); background: var(--bg); border-top: 1px solid var(--border); scroll-margin-top: 80px; } .families-section .section-header { margin-bottom: var(--space-10); } .families-section .section-header__subtitle { max-width: 560px; margin: var(--space-4) auto 0; font-size: 17px; line-height: 1.55; color: var(--muted); } .families__showcase { max-width: 720px; margin: 0 auto; } /* L'entrée de la vitrine passe désormais par le révélé au défilement (.reveal) */ .families-section .showcase { animation: none; } .families__cta { display: flex; justify-content: center; margin-top: var(--space-12); } /* === RESPONSIVE === */ @media (max-width: 700px) { .home-hero { padding: 112px var(--space-4) var(--space-16); } .home-hero__h1 { font-size: clamp(38px, 10.4vw, 60px); } .home-hero__proof { flex-direction: column; align-items: center; gap: 6px; } .hd--ring { left: -40%; top: -6%; width: 90vmin; height: 90vmin; } .hd--arc { right: -22%; top: 58%; } .hd--quad-o { left: 6%; bottom: 5%; width: 14vmin; height: 14vmin; } .hd--quad-d { right: 8%; top: 15%; } .hd--dot { right: 12%; bottom: 9%; } .hd--bar, .hd--ring-sm { display: none; } .intro__wordmark { left: 20px; bottom: 22px; width: 88px; } .intro__skip { right: 16px; bottom: 14px; } .intro__caption { bottom: 70px; } .families-section { padding: var(--space-16) var(--space-4) var(--space-20); } } /* === MOUVEMENT RÉDUIT : aucune séquence, hero dans son état final === */ @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .home-hero__eyebrow, .home-hero__sub, .home-hero__actions, .home-hero__proof, .home-hero__scene { animation: none; } }