/* ============================================================ AUREA, signature by IMPULSO : site.css (recit continu) Reconstruit pour un SEUL VOYAGE, "du large a l'intime". S'appuie sur styles/design-tokens.css (couleurs, polices, motif, champ chromatique --field-* verrouilles). Les 6 leviers de la spec 11 : 1. Champ de couleur (#morph) qui morphe en continu au scroll. 2. Alternance plein cadre (.chap--full) / colonne editoriale (.chap--ed). 3. Sequences epinglees (hero drone, diptyque, coupe) via GSAP. 4. Colonne vertebrale de chapitres (.spine) + fine barre de progression. 5. Typo Bentham surdimensionnee comme decor (.giant, mix-blend). 6. Motif mer (.mer) comme fil conducteur, ancre en bas. Mobile-first. Breakpoints : 480 / 768 / 1024 / 1440. Anti-cheap : deux chapitres voisins ne se ressemblent jamais. ============================================================ */ /* ---------------------------------------------------------------- 0. Variables locales (accents villa + lavis de panneau) ---------------------------------------------------------------- */ :root{ --veil-horizon: var(--cacao); /* noyer fonce mid-century */ --veil-solstice: var(--bronze); /* bronze chaud mediterraneen */ --tint-horizon: #6B5C49; --tint-solstice: var(--beige); --header-h: 74px; /* lavis translucides : voile a peine pose, le champ chromatique reste visible derriere le texte (avant : .80 recouvrait le champ et faisait l'aplat blanc) */ --panel: rgba(253,251,247,.14); /* wash ivoire pour chapitres editoriaux clairs */ --panel-soft: rgba(253,251,247,.08); --panel-dark: rgba(42,32,24,.90); /* wash cacao pour chapitres profonds */ --panel-bronze: rgba(112,86,50,.90); /* wash bronze pour l'heure doree */ /* Grade commun : unifie des photos heterogenes, effet quasi imperceptible */ --grade: saturate(.93) contrast(1.04) brightness(1.02) sepia(.05); } body.page-horizon { --villa-accent: var(--veil-horizon); --villa-tint: var(--tint-horizon); } body.page-solstice { --villa-accent: var(--veil-solstice); --villa-tint: var(--tint-solstice); } /* Reserve aux lecteurs d'ecran : la phrase d'ouverture n'existe plus qu'en pixels (dans la video), ce texte la restitue a l'accessibilite et au referencement. */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* Le champ morphe dans le tempérament de chaque villa (tons chauds charte). */ body.page-horizon { --field-3:#8A6A3F; --field-4:#241A12; } /* Horizon finit en noyer profond */ body.page-solstice { --field-1:#EADFCB; --field-2:#C6A981; --field-3:#A87F49; --field-4:#4A3320; } /* Solstice reste chaud, bronze/terre */ /* ---------------------------------------------------------------- 1. Reset + base ---------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Lenis pilote le scroll ; scroll-behavior natif desactive pour ne pas entrer en conflit */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} body{ background:transparent; /* le champ #morph fait le fond */ color:var(--ink); font-family:var(--font-body); font-weight:300; line-height:1.75; font-size:clamp(15px, 0.4vw + 14px, 17px); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--beige);color:var(--cacao)} :focus-visible{outline:2px solid var(--bronze);outline-offset:3px} /* ---------------------------------------------------------------- 1b. LE CHAMP CHROMATIQUE (levier 1) Couche fixe persistante derriere tout. Sa teinte s'interpole pendant tout le defilement via une CSS scroll-driven animation. Fallback JS (Firefox) : narrative.js ecrit --field-now au scroll. ---------------------------------------------------------------- */ #morph{ position:fixed; inset:0; z-index:-2; background-color:var(--field-0); /* ivoire chaud, unique teinte de fond de tout le site */ pointer-events:none; } /* Matiere du champ : deux halos chauds hors centre, jamais un aplat uni. Le champ doit paraitre independant du contenu (une lumiere, pas un fond de bloc). */ #morph::after{ content:""; position:absolute; inset:0; background: radial-gradient(90% 60% at 78% 8%, rgba(255,248,235,.10), transparent 62%), radial-gradient(80% 55% at 12% 96%, rgba(120,86,50,.08), transparent 60%); mix-blend-mode:soft-light; } /* PASSE VISUELLE (G2) : le fond reste CLAIR et CONTINU du haut en bas. Fini l'evolution qui fonce (bronze -> cacao au scroll) : le champ ne quitte jamais l'ivoire de depart (--field-0). Seule une derive TRES lente et presque subliminale des deux halos chauds donne de la vie, sans jamais assombrir. */ @keyframes fieldDrift{ 0% { transform:translate3d(0,0,0) scale(1.02); opacity:.82; } 100% { transform:translate3d(-1.6%,-2.6%,0) scale(1.13); opacity:1; } } #morph::after{ animation:fieldDrift 26s var(--ease-cine) infinite alternate; will-change:transform,opacity; } @media (prefers-reduced-motion:reduce){ #morph::after{animation:none} } /* GRAIN GLOBAL (levier D3) : liant de matiere, unifie sombre et clair. Fixe, au-dessus de tout, non cliquable, opacite 4 a 5% maximum. */ .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------------------------------------------------------------- 2. Layout : conteneur, chapitres, grilles asymetriques ---------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,6vw,72px)} .wrap-wide{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(24px,6vw,72px)} main{display:block;position:relative;z-index:1} /* Un CHAPITRE = une scene. Padding genereux, fond transparent (le champ traverse). Pas de frontiere franche : les seams laissent voir le morph. */ .chap{position:relative;padding:clamp(84px,15vh,180px) 0;overflow:clip} .chap-content{position:relative;z-index:2} /* Plein cadre immersif (levier 2) */ .chap--full{min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding-top:clamp(90px,14vh,160px);padding-bottom:clamp(70px,12vh,150px)} /* Colonne editoriale : lavis ivoire feutre, le texte reste lisible sur champ. Le voile est desormais tres translucide (--panel .14) : le champ chromatique respire derriere le texte au lieu d'etre recouvert d'un aplat blanc. */ .chap--ed .chap-content{position:relative} .chap--ed .chap-content::before{ content:"";position:absolute;inset:-8% -6%;z-index:-1;background:var(--panel); -webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); border-radius:2px; } /* Matiere sur les sections claires : un halo de lumiere chaud radial, hors centre, plutot qu'un ivoire uni. Pose sur la section, pas sur le champ global. */ .chap--ed::before, .chap--full:not(.chap--dark)::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 80% at 78% 12%, rgba(255,250,240,.5), transparent 60%); } .c-matiere::before{background:radial-gradient(110% 75% at 16% 88%, rgba(255,247,232,.45), transparent 58%)} .c-plan::before{background:radial-gradient(120% 80% at 84% 20%, rgba(255,249,238,.42), transparent 60%)} /* PASSE VISUELLE (G1) : plus aucune section a fond sombre colore. Les anciennes sections "chap--dark" (emotion, invitation, retour) reposent desormais sur le MEME fond clair continu ; leur texte est recontraste en fonce sur clair. */ .chap--dark{color:var(--ink)} .chap--dark h1,.chap--dark h2,.chap--dark h3,.chap--dark .giant{color:var(--encre)} .chap--dark .eyebrow{color:var(--bronze)} .chap--dark p{color:var(--ink-soft)} .chap--dark em{color:var(--bronze)} .chap--dark strong{color:var(--encre)} .chap--dark .rule{background:var(--accent)} /* Grilles editoriales asymetriques (jamais 1fr 1fr partout) */ .grid-7-5{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px);align-items:center} .grid-5-7{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:center} .grid-8-4{display:grid;grid-template-columns:8fr 4fr;gap:clamp(28px,5vw,80px);align-items:start} .grid-4-8{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,5vw,80px);align-items:start} .grid-6-6{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center} /* ---------------------------------------------------------------- 3. Typographie utilitaire ---------------------------------------------------------------- */ h1,h2,h3,.title{ font-family:var(--font-title);font-weight:400; color:var(--encre);line-height:1.15; text-transform:uppercase;letter-spacing:var(--title-tracking); } .eyebrow{ font-family:var(--font-body);font-weight:500; font-size:.66rem;letter-spacing:var(--eyebrow-tracking); text-transform:uppercase;color:var(--bronze); } .cote{ /* annotation technique : cotes, surfaces, index (Poppins chasse, jamais mono) */ font-family:var(--font-body);font-weight:400; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft); } .lede{font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--encre);font-weight:300;line-height:1.6} p{color:var(--ink-soft);max-width:62ch} p + p{margin-top:1.1em} em{font-style:normal;color:var(--bronze)} strong{font-weight:400;color:var(--encre)} .rule{width:56px;height:1px;background:var(--accent);opacity:.55;margin:22px 0} .index-mark{font-family:var(--font-title);color:var(--bronze);font-size:.9rem;letter-spacing:.2em} /* Grande phrase serif (manifeste, promesses) */ .big{ font-family:var(--font-title);font-weight:400;text-transform:uppercase; letter-spacing:.05em;color:var(--encre);line-height:1.34; font-size:clamp(1.5rem,3.6vw,2.9rem);max-width:20ch; } /* ---------------------------------------------------------------- 4. TYPO GEANTE comme decor (levier 5) Mots Bentham surdimensionnes, parfois en debord / mix-blend. ---------------------------------------------------------------- */ .giant{ font-family:var(--font-title);font-weight:400;text-transform:uppercase; line-height:.8;letter-spacing:.01em;color:var(--encre); font-size:clamp(3.4rem,15vw,13rem); } .giant--xl{font-size:clamp(4rem,20vw,18rem)} .giant--mix{color:var(--bronze);mix-blend-mode:multiply;opacity:.92} .chap--dark .giant--mix{mix-blend-mode:screen;color:var(--sable);opacity:.85} .giant--bleed{white-space:nowrap;margin-left:-4vw} /* debord horizontal assume */ .giant--ghost{color:transparent;-webkit-text-stroke:1px var(--bronze);opacity:.5} /* ---------------------------------------------------------------- 5. LE MOTIF MER (levier 6) Bandeau ancre en bas de chapitre / base du hero / footer. background-size:cover, jamais sur une photo plein cadre. ---------------------------------------------------------------- */ .mer{ position:absolute;left:0;right:0;bottom:0;z-index:0; height:min(44vh,400px); background-image:var(--mer-clair); background-size:cover;background-position:center bottom;background-repeat:no-repeat; pointer-events:none;opacity:.9; } .mer--tall{height:min(60vh,560px)} .mer--sombre{background-image:var(--mer-sombre)} .mer--top{top:0;bottom:auto;transform:scaleY(-1)} /* horizon inverse en haut, rare */ /* ---------------------------------------------------------------- 6. (SUPPRIME) La colonne vertebrale de chapitres (.spine) faisait doublon avec le nouveau header sticky premium. Retiree du HTML, du JS et du CSS. ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- 7. Reveal a la lumiere (fondu + leger glissement) ---------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(26px); transition:opacity var(--dur-reveal) var(--ease-cine), transform var(--dur-reveal) var(--ease-cine)} .reveal.is-in{opacity:1;transform:none} .reveal.d1{transition-delay:.10s} .reveal.d2{transition-delay:.20s} .reveal.d3{transition-delay:.30s} .reveal.d4{transition-delay:.40s} /* ---------------------------------------------------------------- 8. Zones visuelles en placeholder (cadre etiquete "vue a integrer") ---------------------------------------------------------------- */ .zone-visuel{ position:relative;overflow:hidden; border:1px solid var(--line); background: repeating-linear-gradient(135deg, rgba(152,118,71,.06) 0 15px, transparent 15px 30px), var(--panel-soft); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:clamp(24px,4vw,48px);gap:12px;min-height:220px; } .zone-visuel::after{content:"";position:absolute;inset:12px;border:1px solid var(--line);opacity:.5;pointer-events:none} .zone-visuel .z-tag{font-family:var(--font-body);font-weight:500;font-size:.6rem;letter-spacing:.28em; text-transform:uppercase;color:var(--bronze)} .zone-visuel .z-desc{font-family:var(--font-body);font-weight:300;font-size:.82rem;letter-spacing:.02em; color:var(--ink-soft);max-width:34ch;line-height:1.7;text-transform:none} .zone-visuel .z-corner{position:absolute;top:14px;left:16px; font-family:var(--font-title);font-size:.8rem;letter-spacing:.16em;color:var(--bronze);opacity:.7} .zone-4-3{aspect-ratio:4/3} .zone-3-4{aspect-ratio:3/4} .zone-16-9{aspect-ratio:16/9} .zone-1-1{aspect-ratio:1/1} .zone-tall{min-height:min(78vh,640px)} /* zone sombre (sur champ profond) */ .chap--dark .zone-visuel{border-color:rgba(230,218,196,.28); background:repeating-linear-gradient(135deg, rgba(230,218,196,.06) 0 15px, transparent 15px 30px), rgba(230,218,196,.03)} .chap--dark .zone-visuel .z-desc{color:var(--on-sombre-soft)} .chap--dark .zone-visuel .z-tag,.chap--dark .zone-visuel .z-corner{color:var(--sable)} .chap--dark .zone-visuel::after{border-color:rgba(230,218,196,.22)} /* ---------------------------------------------------------------- 8b. IMAGES REELLES (remplissent un slot en cover, memes ratios que les zones) ---------------------------------------------------------------- */ .shot{position:relative;overflow:hidden;background:var(--panel-soft);display:block} .shot img{width:100%;height:100%;object-fit:cover;display:block} .chap--dark .shot{background:rgba(230,218,196,.05)} /* Fond photo plein cadre d'un chapitre (sense of place, emotion) */ .chap-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .chap-bg img{width:100%;height:100%;object-fit:cover;display:block} .chap-bg.scrim-dark::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(42,32,24,.55) 0%, rgba(42,32,24,.34) 40%, rgba(42,32,24,.66) 100%)} /* ---------------------------------------------------------------- 8c. GRADE COMMUN + MATIERE D'IMAGE (levier D4) Unifie des photos heterogenes (effet quasi imperceptible), et donne aux images de quoi PARTICIPER a la page (debord, clip reveal, parallaxe). ---------------------------------------------------------------- */ .shot img, .chap-bg img{filter:var(--grade)} /* Voile de marque tres leger, reserve aux images d'ambiance / transition (jamais sur les interieurs "vendeurs" : on ne les denature pas) */ .shot--veil::after{content:"";position:absolute;inset:0;pointer-events:none; background:var(--beige);mix-blend-mode:soft-light;opacity:.12} /* Debord : l'image sort du vide (full-bleed pleine largeur de viewport) */ .bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .shot--tall{aspect-ratio:auto;height:min(86vh,820px)} /* Debord asymetrique d'un seul cote (droite) : l'image mord la marge */ .bleed-right{width:calc(100% + (50vw - 50%));max-width:none;margin-right:calc(50% - 50vw)} /* Reveal masque : l'image se POSE (clip-path + leger scale interne), pilote par narrative.js. Le cadre garde overflow:hidden ; fallback reduced-motion = visible. */ .reveal-img{overflow:hidden;will-change:clip-path} .reveal-img img{will-change:transform} /* Parallaxe interne discrete : media surdimensionne, deplace par narrative.js */ .parallax-media{overflow:hidden} .parallax-media img{height:120%} /* Legende alignee sur le BORD de l'image (jamais centree) : serie + filet + matieres */ .fig-cap{display:flex;align-items:baseline;gap:14px;margin-top:14px; border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);padding-top:10px} .fig-cap .idx{font-family:var(--font-title);color:var(--bronze);font-size:.9rem;letter-spacing:.18em} .fig-cap .mat{font-family:var(--font-body);font-weight:400;font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-soft)} .chap--dark .fig-cap{border-top-color:rgba(230,218,196,.24)} .chap--dark .fig-cap .mat{color:var(--on-sombre-soft)} /* legende d'une image full-bleed : ramenee dans la colonne de contenu */ .fig-cap.inset{max-width:var(--maxw);margin-left:auto;margin-right:auto; padding-left:clamp(24px,6vw,72px);padding-right:clamp(24px,6vw,72px)} /* ---------------------------------------------------------------- 8d. LUMIERE / MATIERE : composition editoriale asymetrique. Une image principale forte + des gros plans matiere de tailles differentes, decales (jamais une grille d'imagettes egales). Grammaire miroir entre les deux villas ; variante --compact (Solstice). ---------------------------------------------------------------- */ .lm-scene{padding-top:clamp(56px,10vh,132px);padding-bottom:clamp(56px,10vh,132px)} /* Rangee 1 : image principale (piece baignee de lumiere) + phrase lumiere. Horizon : image a gauche, dominante. Solstice (miroir, ordre DOM) : a droite. */ .lm-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,84px);align-items:center} /* Image principale de la lumiere : format large (elle doit montrer la grande baie et le sejour, jamais rogner en portrait). Cadrage cale pour garder la baie. */ .lm-hero{aspect-ratio:3/2;width:100%} .lm-hero img{object-position:center 46%} .lm-light{max-width:28ch} /* Rangee 2 : texte matiere + deux gros plans de tailles differentes, decales. Horizon : texte | macro-a (grande, poussee bas) | macro-b (petite, haute). */ .lm-matter{margin-top:clamp(40px,8vh,112px);display:grid; grid-template-columns:1.1fr .95fr .72fr;gap:clamp(20px,3.4vw,54px);align-items:start} .lm-matter-copy{max-width:34ch;align-self:center} .lm-macro{width:100%} .lm-macro--a{aspect-ratio:4/5;margin-top:clamp(24px,7vh,88px)} /* plus grande, decalee vers le bas */ .lm-macro--b{aspect-ratio:1/1} /* plus petite, plus haute */ /* Typographie editoriale sobre : courte ligne serif + petit label discret */ .lm-eyebrow{font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.34em; text-transform:uppercase;color:var(--bronze);margin-bottom:clamp(14px,2.2vh,22px)} .lm-line{font-family:var(--font-title);text-transform:none;letter-spacing:.02em;line-height:1.26; color:var(--encre);font-size:clamp(1.4rem,2.9vw,2.15rem)} .lm-label{margin-top:clamp(16px,2.6vh,28px);display:flex;flex-direction:column;gap:5px} .lm-label .mk{font-family:var(--font-title);letter-spacing:.1em;text-transform:uppercase;color:var(--encre);font-size:.94rem} .lm-label .cote{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} /* Passe 11 (C2) : le glyphe œ / Œ (U+0153 / U+0152) de Bentham est casse (trop etroit, o et e se chevauchent en un pate illisible : œ mesure 86 px la ou un seul « o » fait 95 px). Le mot ne change pas : on remplace seulement le glyphe, dans les elements en Bentham, par le œ de Cormorant Garamond (deuxieme police du stack --font-title), cale en taille (1.06em) et graisse (500) sur Bentham pour ne pas se distinguer du reste du titre. Pose par scripts/oe-bentham.js (statique) et par parcours-scroll.js (titres du parcours, AVANT le decoupage en lignes). Diagnostic : _review/passe-11/oe/. */ .oe-fix{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:1.06em} /* Variante compacte : Casa Solstice, plus resserree, image a droite (miroir). */ .lm-scene--compact{padding-top:clamp(46px,8vh,108px);padding-bottom:clamp(46px,8vh,108px)} .lm-scene--compact .lm-grid{grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px)} .lm-scene--compact .lm-hero{aspect-ratio:3/2} .lm-scene--compact .lm-line{font-size:clamp(1.3rem,2.5vw,1.9rem)} /* miroir : macro-a | macro-b | texte */ .lm-scene--compact .lm-matter{margin-top:clamp(32px,6vh,84px); grid-template-columns:.72fr .95fr 1.1fr;gap:clamp(16px,2.8vw,40px)} .lm-scene--compact .lm-macro--a{aspect-ratio:1/1;margin-top:clamp(20px,6vh,70px)} .lm-scene--compact .lm-macro--b{aspect-ratio:4/5;margin-top:0} @media (max-width:768px){ .lm-grid,.lm-scene--compact .lm-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,30px)} .lm-hero,.lm-scene--compact .lm-hero{aspect-ratio:3/2} .lm-matter,.lm-scene--compact .lm-matter{grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(26px,5vh,44px)} .lm-matter-copy,.lm-scene--compact .lm-matter-copy{grid-column:1 / -1;max-width:none;order:-1;margin-bottom:6px} .lm-macro--a,.lm-macro--b, .lm-scene--compact .lm-macro--a,.lm-scene--compact .lm-macro--b{margin-top:0} } /* ---------------------------------------------------------------- 9. HEADER STICKY PREMIUM (G3) : fin, permanent, smart-hide. - Masque en tout debut de page (le hero respire). - Apparait des qu'on scrolle dans le contenu : aplat ivoire translucide avec leger flou, texte fonce, filet bronze discret. - Se cache au scroll vers le bas, reapparait au scroll vers le haut. ---------------------------------------------------------------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:120; background:rgba(253,251,247,0);border-bottom:1px solid transparent; transform:translateY(0); transition:transform .55s var(--ease-cine),opacity .5s var(--ease-cine), background .45s var(--ease-cine),border-color .45s var(--ease-cine), box-shadow .45s var(--ease-cine),backdrop-filter .45s var(--ease-cine); } .site-header .hdr-inner{max-width:1560px;margin:0 auto;height:60px; padding:0 clamp(18px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px} .site-header .brand{display:inline-flex;align-items:center;flex:0 0 auto} .site-header .brand img{height:26px;width:auto;display:block; transition:height .45s var(--ease-cine)} .site-header .hdr-nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,34px)} .site-header .hdr-nav a{position:relative;font-family:var(--font-body);font-weight:400; font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft); white-space:nowrap;transition:color .3s var(--ease-cine)} .site-header .hdr-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px; background:var(--bronze);transition:right .4s var(--ease-cine)} .site-header .hdr-nav a:hover{color:var(--bronze)} .site-header .hdr-nav a:hover::after{right:0} .site-header .hdr-nav a[aria-current="page"]{color:var(--bronze)} .site-header .hdr-nav a[aria-current="page"]::after{right:0;opacity:.5} .site-header .hdr-nav .hdr-cta{color:var(--bronze);border:1px solid var(--bronze);border-radius:999px; padding:8px 16px;transition:background .35s var(--ease-cine),border-color .35s var(--ease-cine),color .35s var(--ease-cine)} .site-header .hdr-nav .hdr-cta::after{display:none} .site-header .hdr-nav .hdr-cta:hover{background:var(--bronze);color:var(--blanc-pur);border-color:var(--bronze)} .site-header .hdr-toggle{display:none} /* etat "pose" : le fond translucide et le filet apparaissent une fois scrolle */ .site-header.solid{background:rgba(253,251,247,.82);border-bottom-color:rgba(152,118,71,.14); -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08); box-shadow:0 6px 24px rgba(74,59,44,.05)} .site-header.solid .brand img{height:23px} /* smart-hide + masque en haut de page (hero propre) */ .site-header.hide{transform:translateY(-105%)} .site-header.at-top{transform:translateY(-105%);opacity:0;pointer-events:none} @media (max-width:860px){ .site-header .hdr-inner{height:52px} .site-header .hdr-toggle{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;margin-right:-8px;background:transparent;border:0;cursor:pointer;color:var(--encre)} .site-header .hdr-toggle span{position:relative;width:20px;height:1px;background:currentColor;display:block; transition:transform .35s var(--ease-cine),opacity .2s} .site-header .hdr-toggle span::before,.site-header .hdr-toggle span::after{content:"";position:absolute;left:0; width:20px;height:1px;background:currentColor;transition:transform .35s var(--ease-cine)} .site-header .hdr-toggle span::before{top:-6px} .site-header .hdr-toggle span::after{top:6px} .site-header.nav-open .hdr-toggle span{background:transparent} .site-header.nav-open .hdr-toggle span::before{transform:translateY(6px) rotate(45deg)} .site-header.nav-open .hdr-toggle span::after{transform:translateY(-6px) rotate(-45deg)} .site-header .hdr-nav{position:fixed;top:52px;left:0;right:0;flex-direction:column;align-items:flex-start; gap:0;padding:8px clamp(18px,6vw,32px) 22px; background:rgba(253,251,247,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid var(--line); opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none; transition:opacity .35s var(--ease-cine),transform .35s var(--ease-cine),visibility .35s} .site-header.nav-open .hdr-nav{opacity:1;visibility:visible;transform:none;pointer-events:auto} .site-header .hdr-nav a{font-size:.72rem;letter-spacing:.2em;padding:15px 0;width:100%; border-bottom:1px solid var(--line)} .site-header .hdr-nav a::after{display:none} .site-header .hdr-nav .hdr-cta{border:0;border-radius:0;padding:15px 0;color:var(--bronze)} .site-header .hdr-nav .hdr-cta:hover{background:transparent;color:var(--bronze)} .site-header .hdr-nav a:last-child{border-bottom:0} } /* ---------------------------------------------------------------- 10. HERO accueil (etat final propre, moteur scrub en veille) ---------------------------------------------------------------- */ .hero-stage{position:relative;z-index:1} /* Section = piste de scrub. Le canvas est colle dedans (position:sticky), plein cadre. Aucun canvas fixe partage. La longueur de scroll de la construction est reglable (demande client 07/10 : « ralentir legerement, plus contemplatif »). */ .site-hero{position:relative;background:transparent; --hero-build:130vh; /* longueur de scroll de la construction. 84vh = ancien rythme */ --hero-hold:8vh; /* premiere image tenue avant la construction */ --hero-tail:14vh; /* tampon apres la derniere image */ height:calc(100svh + var(--hero-hold) + var(--hero-build) + var(--hero-tail))} /* Hero « consommee » (sens unique) : piste de scroll retiree, plus que l'etat final. */ .site-hero.is-consumed{height:100vh;height:100svh} .hero-sticky{ position:sticky;top:0; height:100vh;height:100svh;width:100%; overflow:hidden;text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; /* Poster = fond CSS du conteneur (frame 1 : parcelle nue), affiche avant le JS. */ background-color:var(--blanc); background-image:url('../assets/hero-sequence/poster.webp'); background-repeat:no-repeat;background-position:center center;background-size:cover; } .hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block} /* Le hero a toujours un fond photographique (poster puis frames) : identite en CLAIR (logo coquille, texte clair) sur voile sombre. Hero cinematique. */ .hero-sticky::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg, rgba(20,15,10,.52) 0%, rgba(20,15,10,.26) 32%, rgba(20,15,10,.30) 62%, rgba(20,15,10,.74) 100%)} /* PONT sombre -> clair : le hero ne finit jamais sur un bord net. Le fondu arrive EXACTEMENT sur --field-0 (le champ de depart), au-dessus de l'image mais sous le contenu (hero-final z-index 4, villa-select z-index 3). */ /* Degrade blanc SUPPRIME (retour client 20/09) : le fondu ivoire faisait sale. Les sections se succedent sans transition degradee. Le voile sombre du hero reste porte par ::before (contraste du logo), aucun fondu blanc en bas. */ .hero-final{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center; padding:calc(var(--header-h) + 10px) 20px 0; transition:opacity .9s var(--ease-cine),transform .9s var(--ease-cine)} /* En fin de descente, l'identite s'efface : les deux maisons nommees prennent le relais */ .site-hero.is-selecting .hero-final{opacity:0;transform:translateY(-14px);pointer-events:none} /* SIGNATURE BREVE (E, 07/10) : le logo tient ~3 s puis s'efface seul avec le voile ; le premier geste de construction les emporte (0,3 s via is-signed-fast). Pilote par is-signed sur #site-hero, pose par scripts/hero-construction.js. */ .site-hero.is-signed .hero-final{opacity:0;transform:translateY(-10px);pointer-events:none} .site-hero.is-signed .hero-sticky::before{opacity:0} .site-hero.is-signed-fast .hero-final{transition:opacity .3s var(--ease-cine),transform .3s var(--ease-cine)} .site-hero.is-signed-fast .hero-sticky::before{transition:opacity .3s var(--ease-cine)} /* Etat final (villas nommees) : le voile complet revient, meme signature effacee. */ .site-hero.is-final .hero-sticky::before{opacity:1} /* Repli sous 1024 px ET reduced-motion : aucun canvas, aucune sequence chargee. Le fond CSS montre la frame FINALE (2 villas livrees), pour que les hotspots soient poses sur les vraies maisons et tapables d'emblee. */ @media (max-width:1023px){ .site-hero{height:auto} .hero-sticky{position:static;height:auto;min-height:100svh; background-image:url('../assets/hero-sequence/poster-final.webp')} .hero-canvas{display:none} } @media (prefers-reduced-motion:reduce){ .site-hero{height:auto} .hero-sticky{position:static;height:auto;min-height:100svh; background-image:url('../assets/hero-sequence/poster-final.webp')} .hero-canvas{display:none} } /* Hero « consommee » decidee AVANT le premier paint (retour villa / flag de session) : plus de piste de construction (100 vh) et fond CSS = DERNIERE frame (frame-0090), jamais la frame 1. Desktop uniquement (le repli < 1024 px garde son poster-final). */ @media (min-width:1024px){ html.hero-consumed .site-hero{height:100vh;height:100svh} html.hero-consumed .hero-sticky{background-image:url('../assets/hero-sequence/1600/frame-0090.webp')} } .hero-triptyque{font-family:var(--font-body);font-weight:500;font-size:clamp(.6rem,1.4vw,.72rem); letter-spacing:.34em;text-transform:uppercase;color:var(--sable);margin-bottom:clamp(16px,3vh,30px)} .hero-triptyque .sep{color:var(--on-sombre-soft);margin:0 .5em;font-weight:300} .logo-hero{width:min(300px,52vw);margin:0 auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))} .hero-accroche{margin-top:clamp(20px,3.4vh,38px);font-family:var(--font-title);text-transform:none; letter-spacing:.02em;color:var(--blanc-pur);line-height:1.32;font-size:clamp(1.05rem,2.3vw,1.7rem);max-width:17ch; text-shadow:0 1px 20px rgba(0,0,0,.35)} .hero-lieu{margin-top:clamp(12px,2.2vh,22px);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:var(--on-sombre-soft);max-width:none} .hero-lieu strong{color:var(--sable);font-weight:400} /* ============================================================ INCITATION A POURSUIVRE : « le medaillon » (valide par Louis le 07/10) Trois etats : attente (anneau + fleche, « Faites defiler »), progression (l'anneau se remplit avec la construction), .is-done (disque ivoire, fleche et filet bronze, onde sable, « Poursuivre la decouverte »). ============================================================ */ .scroll-cue{position:absolute;z-index:6; right:clamp(24px,2.6vw,44px); bottom:max(clamp(22px,2.3vw,40px), calc(env(safe-area-inset-bottom) + 16px)); display:flex;flex-direction:row;align-items:center;gap:clamp(14px,1.5vw,24px); padding:0;border:0;background:none;cursor:pointer;color:var(--blanc); -webkit-tap-highlight-color:transparent; transition:opacity .9s var(--ease-cine)} /* Ombre d'appui tres large derriere le libelle : jamais de cartouche ni de fond net. */ .scroll-cue::before{content:"";position:absolute;z-index:-1;pointer-events:none; right:calc(-1 * clamp(24px,2.6vw,44px));bottom:calc(-1 * clamp(22px,2.3vw,40px)); width:min(50vw,760px);height:min(19vw,300px); background:radial-gradient(72% 92% at 78% 78%, rgba(12,9,6,.78) 0%, rgba(12,9,6,0) 100%)} .scroll-cue .sc-label{display:grid;justify-items:end;align-items:center; font-family:var(--font-body);font-weight:500;font-size:clamp(13px,1.08vw,16.5px);line-height:1; letter-spacing:.32em;text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.92),0 1px 18px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6); transition:letter-spacing .6s var(--ease-cine)} .scroll-cue .sc-label span{grid-area:1/1;text-align:right;white-space:nowrap; transition:opacity .7s var(--ease-cine),transform .7s var(--ease-cine)} .scroll-cue .sc-l2{opacity:0;transform:translateY(6px)} .scroll-cue.is-done .sc-l1{opacity:0;transform:translateY(-6px)} .scroll-cue.is-done .sc-l2{opacity:1;transform:none} .scroll-cue .sc-ring{position:relative;flex:none;width:clamp(72px,5.6vw,88px);aspect-ratio:1/1; transition:transform .6s var(--ease-cine)} .scroll-cue .sc-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .scroll-cue .sc-disc{fill:rgba(20,15,10,.34);stroke:rgba(253,251,247,.5);stroke-width:1; transition:fill .8s var(--ease-cine),stroke .8s var(--ease-cine)} /* Jauge : perimetre de r=25 -> 157.08. scroll-cue.js pose stroke-dashoffset = 157.08 x (1 - t). */ .scroll-cue .sc-prog{fill:none;stroke:var(--blanc);stroke-width:1.6;stroke-linecap:round; transform:rotate(-90deg);transform-origin:50% 50%; stroke-dasharray:157.08;stroke-dashoffset:157.08;transition:opacity .6s var(--ease-cine)} .scroll-cue .sc-arrow{fill:none;stroke:var(--blanc);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round; transition:stroke .8s var(--ease-cine)} /* En attente/progression (pas is-done) : la fleche s'abaisse brievement toutes les quelques secondes pour attirer l'oeil. Desactivee en reduced-motion (plus bas). */ .scroll-cue:not(.is-done) .sc-arrow{animation:sc-arrow 3.8s cubic-bezier(.45,0,.55,1) infinite} @keyframes sc-arrow{0%,55%,100%{transform:translateY(0)}70%{transform:translateY(3.4px)}84%{transform:translateY(0)}} .scroll-cue .sc-inner{fill:none;stroke:var(--bronze);stroke-width:.6;opacity:0; transition:opacity .8s var(--ease-cine) .3s} .scroll-cue .sc-pulse{position:absolute;inset:0;border-radius:50%; border:1px solid rgba(230,218,196,.85);opacity:0;pointer-events:none} /* Etat final : le medaillon ivoire. */ .scroll-cue.is-done .sc-disc{fill:var(--blanc);stroke:var(--blanc)} .scroll-cue.is-done .sc-arrow{stroke:var(--bronze)} .scroll-cue.is-done .sc-inner{opacity:.75} .scroll-cue.is-done .sc-prog{opacity:0} .scroll-cue.is-done .sc-ring{filter:drop-shadow(0 5px 16px rgba(0,0,0,.30))} .scroll-cue.is-done .sc-pulse{animation:sc-pulse 3.2s var(--ease-cine) infinite} @keyframes sc-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.75);opacity:0}100%{opacity:0}} @media (hover:hover){ .scroll-cue.is-done:hover .sc-ring{transform:scale(1.07)} .scroll-cue.is-done:hover .sc-label{letter-spacing:.3em} } .scroll-cue:focus{outline:none} .scroll-cue:focus-visible .sc-ring{outline:1px solid rgba(253,251,247,.9);outline-offset:6px;border-radius:50%} /* Sous 1024 px : le medaillon est directement dans son etat final (pas de construction au scroll). */ @media (max-width:1023px){ .scroll-cue{right:20px;bottom:max(20px, calc(env(safe-area-inset-bottom) + 14px));gap:12px} .scroll-cue .sc-ring{width:60px} .scroll-cue .sc-label{font-size:11.5px;letter-spacing:.26em} .scroll-cue::before{width:92vw;height:170px} } @media (prefers-reduced-motion:reduce){ .scroll-cue .sc-arrow,.scroll-cue:not(.is-done) .sc-arrow,.scroll-cue.is-done .sc-pulse{animation:none} .scroll-cue,.scroll-cue *{transition:none} } /* ---- Passe 10 (V4, points 1.2 et 1.3) -------------------------------------- 1.2 Accueil : Maxime ne voyait pas le medaillon en bas a droite -> il passe en bas AU CENTRE de l'ecran d'ouverture, libelle au-dessus de l'anneau. Textes inchanges. La base (.scroll-cue bas-droite, en ligne) reste pour les pages villa. 1.3 Pages villa : meme medaillon sur l'ecran d'arrivee (.scroll-cue--villa), fleche animee des l'arrivee. */ body.page-accueil .scroll-cue{ right:auto;left:50%;transform:translateX(-50%); flex-direction:column;align-items:center;gap:clamp(10px,1.1vw,16px)} body.page-accueil .scroll-cue::before{ right:auto;left:50%;transform:translateX(-50%); width:min(80vw,600px);height:min(20vw,280px); background:radial-gradient(60% 90% at 50% 82%, rgba(12,9,6,.72) 0%, rgba(12,9,6,0) 72%)} body.page-accueil .scroll-cue .sc-label{justify-items:center} body.page-accueil .scroll-cue .sc-label span{text-align:center} /* Passe 11 (C1) : en is-done, le medaillon de l'accueil reste ancre au bas de la fenetre (il ne remonte plus avec la hero) jusqu'a l'arrivee de Situation, ou il s'efface en douceur (opacite pilotee par scroll-cue.js). position:fixed echappe au defilement de la hero (aucun ancetre transforme ne cree de bloc conteneur). */ body.page-accueil .scroll-cue.is-pinned{ position:fixed;z-index:30; left:50%;bottom:max(clamp(22px,2.3vw,40px), calc(env(safe-area-inset-bottom) + 16px)); transform:translateX(-50%)} /* La fleche du medaillon final (« Poursuivre la decouverte », is-done) et celle des pages villa font un leger va-et-vient vertical, ~1,6 s en boucle. */ @keyframes sc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} .scroll-cue.is-done .sc-arrow{animation:sc-bob 1.6s cubic-bezier(.45,0,.55,1) infinite} .scroll-cue--villa .sc-arrow{animation:sc-bob 1.6s cubic-bezier(.45,0,.55,1) infinite} @media (prefers-reduced-motion:reduce){ .scroll-cue.is-done .sc-arrow,.scroll-cue--villa .sc-arrow{animation:none} } /* 10b. Selection des deux villas : REVELATION SUR LES MAISONS (finitions 1 & 2) Deux hotspots absolus, cales en % sur la position reelle de chaque maison dans la frame finale (poster) : horizon = maison moderne toits plats, en facade (devant) ; solstice = maison a tuiles, en contrebas (au fond). Au survol : halo + nom Bentham qui se resserre ; l'autre maison se retire (voile radial sombre pose sur sa zone). Mobile : deux noms tapables d'emblee. */ /* Le layer ne s'affiche qu'a l'etat final de la hero (fin de descente), jamais par-dessus la frame mer du debut. Cale par villa-select.js. */ .villa-select{position:absolute;inset:0;z-index:3;pointer-events:none; opacity:0;visibility:hidden;transition:opacity .9s var(--ease-cine)} .villa-select.is-active{opacity:1;visibility:visible} /* Positions calees sur la frame finale de la construction (hero_0117) : Horizon = villa moderne a toits plats (centre), Solstice = maison a tuiles (en contrebas). Valeurs en % facilement ajustables (calage fin par Louis). */ .hotspot{position:absolute;transform:translate(-50%,-50%);z-index:2; display:flex;flex-direction:column;align-items:center;text-align:center; pointer-events:auto;cursor:pointer; transition:opacity .6s var(--ease-cine),filter .6s var(--ease-cine)} .hotspot--horizon{left:51%;top:33%} .hotspot--solstice{left:49%;top:74%} /* PASSE VISUELLE (A2) : plus de voile sombre. Au survol, un halo LUMINEUX doux se pose sur la villa pointee (surbrillance premium), jamais d'ombre. */ .hotspot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7); width:46vmin;height:46vmin;max-width:520px;max-height:520px;border-radius:50%; pointer-events:none;z-index:-1;mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,249,236,.6) 0%, rgba(247,241,229,.26) 34%, rgba(247,241,229,0) 68%); opacity:0;transition:opacity .6s var(--ease-cine),transform .6s var(--ease-cine)} /* halo doux qui designe la maison */ .hs-halo{position:relative;width:16px;height:16px;border-radius:50%; background:radial-gradient(circle, rgba(247,241,229,.95) 0%, rgba(230,218,196,.5) 45%, rgba(230,218,196,0) 72%); box-shadow:0 0 18px 4px rgba(230,218,196,.35); transition:box-shadow .6s var(--ease-cine),transform .6s var(--ease-cine)} .hs-halo::after{content:"";position:absolute;inset:-12px;border-radius:50%; border:1px solid rgba(230,218,196,.55);animation:hsPulse 2.8s var(--ease-cine) infinite} @keyframes hsPulse{0%{transform:scale(.6);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} .hs-label{position:relative;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:5px} /* Aucun halo/boite derriere le nom : pure transparence, identique sur les deux villas. La lisibilite tient au seul text-shadow renforce de .hs-name. */ .hs-name{font-family:var(--font-title);text-transform:uppercase;letter-spacing:.4em;color:var(--blanc-pur); font-size:clamp(1rem,2.1vw,1.55rem);line-height:1.1; text-shadow:0 2px 26px rgba(0,0,0,.78),0 1px 9px rgba(0,0,0,.62),0 0 2px rgba(0,0,0,.6); transition:letter-spacing .6s var(--ease-cine),opacity .6s var(--ease-cine);opacity:.92} .hs-enter{font-family:var(--font-body);font-weight:400;font-size:.54rem;letter-spacing:.3em;text-transform:uppercase; color:var(--sable);text-shadow:0 1px 12px rgba(0,0,0,.7);opacity:0;transform:translateY(5px); transition:opacity .5s var(--ease-cine),transform .5s var(--ease-cine)} /* Desktop (survol possible) : la villa pointee passe EN SURBRILLANCE (halo lumineux + glow doux), sans jamais assombrir l'autre. */ @media (hover:hover) and (min-width:769px){ .hotspot:hover .hs-name,.hotspot:focus-visible .hs-name{letter-spacing:.26em;opacity:1} .hotspot:hover .hs-enter,.hotspot:focus-visible .hs-enter{opacity:.95;transform:none} .hotspot:hover .hs-halo,.hotspot:focus-visible .hs-halo{transform:scale(1.16); box-shadow:0 0 34px 12px rgba(255,249,236,.7),0 0 82px 26px rgba(230,218,196,.42)} .hotspot:hover::before,.hotspot:focus-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)} } /* ---------------------------------------------------------------- 10e. VIDEO D'ARRIVEE (intro, 16,4 s, porte la phrase d'ouverture) + verrou de scroll + « Passer ». La video se joue une seule fois (hero-intro.js). Pendant l'intro (html.aurea-intro) : header, logo et voile masques ; scroll verrouille (html.aurea-lock). Fin de video : choregraphie d'ouverture (html.hero-outro pose transitoirement, aurea-intro retire) -> voile, logo, header reviennent. ---------------------------------------------------------------- */ .hero-intro{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block; object-fit:cover;object-position:50% 50%;background:var(--blanc);pointer-events:none} /* Ecrans entre 4/3 et 3/2 : le recadrage en cover rogne les cotes et la phrase arrive trop pres du bord droit. On decale le cadre vers la droite pendant la premiere partie, puis on recentre pendant le passage dans les nuages (9,7 s, mouvement invisible). Au-dessus de 3/2, rien ne change (object-position 50%). */ @media (max-aspect-ratio:3/2){ .hero-intro{object-position:62% 50%;transition:object-position 1.3s cubic-bezier(.45,0,.55,1)} .hero-intro.is-recentre{object-position:50% 50%} } /* Verrou de scroll pendant la video (jumeau de html.aurea-loading). */ html.aurea-lock,html.aurea-lock body{overflow:hidden} /* Masques pendant l'intro (la video porte ses propres titres). */ html.aurea-intro .site-header{opacity:0;transform:translateY(-12px);pointer-events:none} html.aurea-intro .hero-final{opacity:0;transform:translateY(10px)} html.aurea-intro .hero-sticky::before{opacity:0} /* Le voile revient en douceur (0 -> 1) au retrait de aurea-intro (fin d'intro). */ .hero-sticky::before{transition:opacity .9s var(--ease-cine)} /* Choregraphie d'ouverture : staggers appliques pendant le retrait des masques. */ html.hero-outro .hero-final{transition:opacity .9s var(--ease-cine) .15s,transform .9s var(--ease-cine) .15s} html.hero-outro .site-header{transition:opacity .6s var(--ease-cine) .3s,transform .6s var(--ease-cine) .3s} /* Bouton « Passer l'introduction » : bas droite, filet + capitales, fondu 1,5 s. */ .intro-skip{position:absolute;z-index:7;right:32px;bottom:calc(28px + env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:12px;padding:8px 2px;border:0;background:none;cursor:pointer; font-family:var(--font-body);font-weight:300;font-size:11px;text-transform:uppercase;letter-spacing:.28em; color:rgba(253,251,247,.72);opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity 1.5s var(--ease-cine),transform 1.5s var(--ease-cine),color .4s var(--ease-cine)} .intro-skip .is-rule{display:inline-block;width:24px;height:1px;background:currentColor; transition:width .4s var(--ease-cine)} .intro-skip.is-visible{opacity:1;transform:none;pointer-events:auto} .intro-skip:hover,.intro-skip:focus-visible{color:rgba(253,251,247,1)} .intro-skip:hover .is-rule,.intro-skip:focus-visible .is-rule{width:36px} .intro-skip:focus{outline:none} .intro-skip:focus-visible{outline:1px solid rgba(253,251,247,.9);outline-offset:6px;border-radius:2px} /* ---------------------------------------------------------------- 10e-bis. « LE ROULEAU » (proposition 2, validee 09/10) La phrase d'ouverture est DESSINEE par le navigateur par-dessus la video (nette sur Retina), ~40 % de la maquette, sans ponctuation finale. Molette : la ligne de face bascule vers le haut, chaque mot avec un leger retard. Geometrie et horloge dans scripts/hero-rouleau.js. z-index entre la video (1) et le bouton « Passer » / le medaillon (6-7) : le texte ne couvre jamais le medaillon. Aucun voile : seule une ombre d'appui tres douce sous le texte. ---------------------------------------------------------------- */ .hero-rouleau{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden; opacity:0;transition:opacity .6s var(--ease-cine)} .hero-rouleau.is-on{opacity:1} .hero-rouleau.is-off{opacity:0;transition:opacity .4s var(--ease-cine)} /* Ombre d'appui : halo sombre tres doux SOUS le texte seulement (opacite pilotee par le JS, suit la presence du texte). La video n'est jamais assombrie en entier. */ .rl-appui{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%); width:min(64vw,920px);height:clamp(220px,34vh,440px);opacity:0;pointer-events:none; background:radial-gradient(closest-side, rgba(14,10,6,.30) 0%, rgba(14,10,6,.17) 46%, rgba(14,10,6,0) 100%)} .rl-stage{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%); width:min(92vw,1180px);text-align:center; font-family:var(--font-title);font-weight:400; font-size:clamp(34px,3.2vw,56px);line-height:1.3; color:var(--blanc); text-shadow:0 .018em .26em rgba(10,8,5,.5), 0 .009em .03em rgba(10,8,5,.36)} .rl-line{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);white-space:nowrap} .rl-word{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden; white-space:pre;will-change:transform,opacity} .rl-word.is-key{color:var(--sable)} /* Une passe sur petit ecran (pas de video) : plus petit (22-26 px) et place plus haut, pour ne jamais toucher le medaillon ni les noms des villas (sur les maisons). */ .hero-rouleau.is-pass-small .rl-stage{top:34%;font-size:clamp(20px,6vw,26px);width:min(90vw,520px)} .hero-rouleau.is-pass-small .rl-appui{top:34%;width:min(84vw,460px);height:clamp(140px,24vh,230px)} /* 10c. Transition plein ecran "on entre dans la villa" */ .villa-veil{position:fixed;inset:0;z-index:200;background:var(--veil-color,var(--bronze)); transform:translateY(101%);will-change:transform;pointer-events:none} .villa-veil.rise{transform:translateY(0);transition:transform var(--dur-transition-villa) var(--ease-cine)} .villa-intro{position:fixed;inset:0;z-index:200;background:var(--villa-accent);opacity:1;pointer-events:none} .villa-intro.gone{opacity:0;transition:opacity 760ms var(--ease-cine)} /* ---------------------------------------------------------------- 10d. CADRE PREMIUM D'IMAGE (regle : aucune image posee brute) Coins arrondis, filet fin sable, ombre douce multi-couche, fond ivoire. ---------------------------------------------------------------- */ .shot--framed{border-radius:14px; border:1px solid rgba(230,218,196,.7); box-shadow:0 2px 4px rgba(74,59,44,.05),0 14px 34px rgba(74,59,44,.10),0 30px 64px rgba(74,59,44,.12); background:var(--blanc-pur)} .shot--framed img{border-radius:13px} /* ================================================================ 11. CHAPITRES DE L'ACCUEIL (du large a l'intime) ================================================================ */ /* 11.2b LA BAIE : section supprimee (intro video, 30/09). La descente vers la baie est desormais portee par la video d'arrivee de la hero (voir section 10e). Le texte de seuil (ex-section « La baie ») a ete retire le 01/10 : la Situation s'ouvre directement sur son en-tete. Regles de l'ancienne section retirees. */ /* 11.2d LA SITUATION : la carte DISSOUTE dans le champ. Carte a encre transparente, pleine largeur, sans cadre/fond/ombre. Un masque alpha long en HAUT/BAS (grande distance) la fond dans les sections voisines, et discret sur les COTES pour eviter une coupure nette. Le centre reste plein et net. Le bandeau des temps de trajet passe SOUS la carte. Espacement haut aligne sur le rythme des autres chapitres (.chap) apres le retrait du texte de seuil : meme respiration apres la hero. */ .c-situation{position:relative;padding:clamp(84px,15vh,180px) 0 clamp(60px,10vh,130px);background:transparent} /* Intro alignee a gauche, generously espacee avant la carte */ .c-situation .situation-head{max-width:52ch} .c-situation .situation-h{ font-family:var(--font-title);text-transform:none;letter-spacing:.02em;line-height:1.16; font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--encre);margin-top:clamp(10px,1.6vh,16px)} .c-situation .situation-lead{ font-family:var(--font-body);font-weight:300;color:var(--ink); font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;margin-top:clamp(12px,2vh,18px)} /* LA CARTE : pleine largeur, dissoute par un masque alpha asymetrique. Aucun cadre, aucun fond, aucune ombre, aucun padding "planche". */ .c-situation .situation-map{ position:relative;margin:clamp(40px,6vh,80px) auto 0; width:100vw;margin-left:calc(50% - 50vw); background:transparent;border:0;box-shadow:none;padding:0; } .c-situation .situation-map img{ display:block;width:100%;height:auto;max-width:2600px;margin:0 auto; object-fit:contain;filter:none;box-shadow:none;border:0;border-radius:0; background:transparent;transform:none;image-rendering:auto; /* Fondu premium : dissolution LONGUE haut/bas, DISCRETE sur les cotes. Le masque agit sur l'alpha : l'encre s'efface vers les bords et laisse passer le champ de la page, quelle que soit sa teinte. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); mask-composite: intersect; } /* Reveal sobre qui ne combat pas le masque : opacity + leger glissement seuls, pas de clip-path ni de scale (surcharge du .reveal generique). */ .c-situation .situation-map.reveal{transform:translateY(14px)} .c-situation .situation-map.reveal.is-in{transform:none} /* LE BANDEAU HORIZONTAL : fiche des temps de trajet, sous la carte */ .c-situation .situation-legende{ max-width:min(1180px,92vw);margin:clamp(22px,4vh,44px) auto 0; padding-top:clamp(16px,2.4vh,26px); border-top:1px solid color-mix(in srgb, var(--bronze) 26%, transparent)} .c-situation .leg-title{ font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.26em; text-transform:uppercase;color:var(--bronze);margin-bottom:clamp(14px,2vh,20px)} .c-situation .leg-row{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0} .c-situation .leg-row li{ flex:1 1 0;min-width:128px;padding:2px clamp(12px,1.6vw,22px); display:flex;flex-direction:column;gap:6px; border-left:1px solid color-mix(in srgb, var(--bronze) 16%, transparent)} .c-situation .leg-row li:first-child{border-left:none;padding-left:0} .c-situation .rt-lieu{ font-family:var(--font-body);font-weight:400;font-size:.72rem;letter-spacing:.04em;color:var(--encre)} .c-situation .rt-tps{ font-family:var(--font-title);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--bronze);letter-spacing:.02em} .c-situation .leg-foot{ margin-top:clamp(14px,2vh,20px);font-family:var(--font-body);font-weight:300; font-size:.6rem;letter-spacing:.04em;color:var(--ink-soft)} /* Mobile : 2 colonnes puis 1, les filets verticaux deviennent un filet horizontal */ @media (max-width:720px){ .c-situation .leg-row li{ flex:1 1 46%;min-width:0;padding:clamp(10px,2.4vw,14px) 0; border-left:none;border-top:1px solid color-mix(in srgb, var(--bronze) 16%, transparent)} .c-situation .leg-row li:first-child{padding-left:0} /* premiere ligne (2 premiers items) sans filet superieur redondant avec leg-title */ .c-situation .leg-row li:nth-child(1), .c-situation .leg-row li:nth-child(2){border-top:none} } @media (max-width:430px){ .c-situation .leg-row li{flex:1 1 100%} .c-situation .leg-row li:nth-child(2){border-top:1px solid color-mix(in srgb, var(--bronze) 16%, transparent)} } @media (prefers-reduced-motion:reduce){ .c-situation .situation-map.reveal{transform:none} .c-situation .situation-map img{transform:none} } /* 11.1 La vision : la phrase est desormais portee par la baie (voir 11.2b). */ /* 11.2 Sense of place (mise en page alternative retiree avec l'ancienne section, 30/09 : plus aucun HTML n'utilisait ces regles). */ .recit-fact{display:flex;flex-direction:column;gap:6px} .recit-fact .rf-n{font-family:var(--font-title);font-size:clamp(2.4rem,6vw,4.2rem);color:var(--bronze);line-height:.9;letter-spacing:.01em} .recit-fact .rf-l{max-width:30ch} .reperes{margin-top:clamp(20px,3vh,32px);display:flex;flex-wrap:wrap;gap:22px 40px;border-top:1px solid var(--line);padding-top:20px} .reperes .rep{display:flex;flex-direction:column;gap:4px} .reperes .rep .rk{font-family:var(--font-title);letter-spacing:.1em;text-transform:uppercase;color:var(--encre);font-size:.98rem} .reperes .rep .rv{font-family:var(--font-body);font-weight:400;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)} /* 11.3 Lumiere & matiere : deux matieres macro, texte decale, offset a droite */ .c-matiere .grid-5-7{align-items:center} /* Duo matiere : une DOMINANTE + un accent decale (jamais deux images egales) */ .c-matiere .matiere-duo{display:grid;grid-template-columns:1.32fr .82fr;gap:clamp(16px,2.4vw,32px);align-items:start} .c-matiere .matiere-duo figure:nth-child(2){margin-top:clamp(30px,8vh,96px)} .c-matiere .matiere-duo figure:nth-child(1) .shot{aspect-ratio:4/5} .c-matiere .matiere-duo .m-cap{margin-top:12px;display:flex;justify-content:space-between;gap:12px} .c-matiere .matiere-duo .m-cap .mk{font-family:var(--font-title);letter-spacing:.1em;text-transform:uppercase; color:var(--encre);font-size:.9rem} .c-matiere .matiere-duo .m-cap .mv{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} .c-matiere .matiere-duo .zone-visuel{aspect-ratio:3/4} .c-matiere .m-lead h2{font-size:clamp(1.6rem,3.4vw,2.5rem);text-transform:none;letter-spacing:.02em;line-height:1.2} /* 11.4 LE DIPTYQUE : les deux villas cote a cote, dans le flux (plus d'epinglage). Mise en avant AU SURVOL (surbrillance premium de la villa pointee) — A6. */ .c-diptyque{padding:0} .diptyque-pin{position:relative} .diptyque-sticky{position:relative;overflow:hidden; display:grid;grid-template-columns:1fr 1fr;min-height:82svh} .dip-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:82svh; padding:clamp(30px,6vh,80px) clamp(24px,4vw,64px);overflow:hidden; transition:filter .7s var(--ease-cine),opacity .7s var(--ease-cine),transform .7s var(--ease-cine),box-shadow .7s var(--ease-cine)} .dip-side .dip-zone{position:absolute;inset:0;z-index:0;border:none;overflow:hidden} .dip-side .dip-zone .zone-visuel{height:100%;border:none;border-radius:0} .dip-side .dip-zone img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-cine)} /* lisibilite du texte du diptyque par-dessus la photo d'atmosphere. Passe 10 (1.4) : bas et haut assombris pour la legende (haut) et le bloc de texte (bas) ; mesure contraste dans _review/passe-10/contraste-*.md. */ .dip-side .dip-zone::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg, rgba(42,32,24,.72) 0%, rgba(42,32,24,.18) 45%, rgba(42,32,24,.40) 100%)} .dip-side.dip-horizon .dip-name,.dip-side.dip-horizon .dip-sign, .dip-side.dip-solstice .dip-name,.dip-side.dip-solstice .dip-sign{color:var(--blanc-pur)} .dip-side .dip-go{color:var(--sable)} .dip-side .dip-inner{position:relative;z-index:2;max-width:34ch} /* Passe 10 (1.4) : degrade local derriere le bloc de texte (nom/tempo/signature/lien) pour la rubrique « Le trait, mid-century » en sable sur la photo Horizon plus claire. */ .dip-side .dip-inner::before{content:"";position:absolute;z-index:-1;pointer-events:none; inset:-14px -22px -22px -22px; background:linear-gradient(0deg, rgba(16,11,7,.40) 0%, rgba(16,11,7,.30) 72%, rgba(16,11,7,.14) 100%)} .dip-side .dip-eyebrow{font-family:var(--font-body);font-weight:500;font-size:.6rem;letter-spacing:.3em; text-transform:uppercase;color:var(--bronze)} .dip-side .dip-name{font-family:var(--font-title);text-transform:uppercase;letter-spacing:.1em;line-height:1; color:var(--encre);font-size:clamp(2rem,4.6vw,3.6rem);margin:12px 0} .dip-side .dip-tempo{font-family:var(--font-body);font-weight:400;font-size:.62rem;letter-spacing:.24em; text-transform:uppercase;color:var(--sable);margin:0 0 10px} .dip-side .dip-sign{font-family:var(--font-title);text-transform:none;letter-spacing:.02em; color:var(--encre);font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.3;max-width:22ch} /* Passe 10 (1.4) : « Decouvrir la villa » etait en --ink-soft (brun fonce) pose sur le bas assombri de la photo -> presque invisible (contraste 1,16). Remis en sable clair, avec ombre discrete, lisible sur le fond sombre du bas. */ .dip-side .dip-go{margin-top:20px;display:inline-flex;align-items:center;gap:12px; font-family:var(--font-body);font-weight:400;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase; color:var(--sable);text-shadow:0 1px 3px rgba(0,0,0,.7),0 1px 14px rgba(0,0,0,.5)} .dip-side .dip-go .arrow{width:32px;height:1px;background:var(--bronze);transition:width .5s var(--ease-cine)} .dip-side:hover .dip-go .arrow{width:56px} /* Horizon = trait/large, fond noyer ; Solstice = chaleur, fond bronze */ .dip-side.dip-horizon{background:linear-gradient(180deg, rgba(74,59,44,.05), rgba(42,32,24,.14))} .dip-side.dip-solstice{background:linear-gradient(180deg, rgba(189,161,130,.10), rgba(152,118,71,.16))} .dip-divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.35);z-index:3;transform:translateX(-.5px)} /* PASSE VISUELLE (A6) : surbrillance de la villa POINTEE, l'autre se retire legerement. Aucune dependance au scroll (plus d'emphase pilotee au scroll). */ @media (hover:hover) and (min-width:769px){ .diptyque-sticky:hover .dip-side:not(:hover){filter:saturate(.68) brightness(.9);opacity:.72} .dip-side:hover{z-index:2;box-shadow:0 0 70px rgba(20,15,10,.24)} .dip-side:hover .dip-zone img{transform:scale(1.045)} } .dip-caption{position:absolute;top:clamp(28px,5vh,60px);left:0;right:0;text-align:center;z-index:4;pointer-events:none} /* Passe 10 (1.4) : la legende « Horizon trace la ligne | Solstice tient la chaleur » etait en bronze sur le haut clair des deux photos -> contraste 1,03 (invisible). Halo sombre local derriere la legende (pas de voile plein cadre) + teinte sable claire + ombre : ~6:1 mesure. Le bronze sur photo ne peut atteindre 4,5:1 (charte : pas de bronze sur clair pour du texte). */ .dip-caption::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(94%,760px);height:300%;z-index:-1;pointer-events:none; background:radial-gradient(58% 100% at 50% 50%, rgba(16,11,7,.62) 0%, rgba(16,11,7,0) 72%)} .dip-caption .cap-line{font-family:var(--font-title);text-transform:uppercase;letter-spacing:.14em; color:var(--sable);font-size:clamp(.8rem,1.5vw,1.05rem); text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 16px rgba(0,0,0,.5)} /* 11.5 Art de vivre : trois rituels du sud, colonne editoriale a trois temps */ .c-vivre .rituels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(30px,5vh,60px)} .c-vivre .rituel{position:relative;padding-top:22px;border-top:1px solid var(--line)} .c-vivre .rituel .r-h{font-family:var(--font-title);color:var(--bronze);font-size:.8rem;letter-spacing:.14em} .c-vivre .rituel h3{text-transform:none;letter-spacing:.02em;font-size:clamp(1.15rem,2vw,1.5rem);margin:10px 0 8px} .c-vivre .lead-row{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:end} /* 11.6 Le plan comme recit : coupe de terrain epinglee qui se dessine */ .c-plan{overflow:visible} .c-plan .head{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(28px,4vh,48px)} .c-plan h2{font-size:clamp(1.5rem,3vw,2.2rem)} /* Coupe nettoyee (A8) : figure autonome, TRES visible sur le fond clair. */ .coupe-figure{position:relative;max-width:1000px;margin:0 auto} .coupe-figure svg{width:100%;height:auto;display:block;overflow:visible} .coupe-figure .stroke{fill:none;stroke:var(--bronze);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .coupe-figure .stroke-soft{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 4} .coupe-figure .fill-soft{fill:rgba(152,118,71,.07)} .coupe-figure .lab{font-family:var(--font-body);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-soft)} .coupe-figure .lab-strong{font-size:13px;fill:var(--encre)} /* trace qui se dessine : les .stroke ont un dash pilote par GSAP (drawLine) */ .coupe-cap{margin-top:24px;text-align:center;font-family:var(--font-body);font-weight:400; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)} /* 11.7 (section emotion retiree, passe finale) */ /* 11.8 Invitation : contact editorial, appel + WhatsApp, avant-premiere (fond clair) */ .c-invitation .grid-6-6{align-items:start} .c-invitation .inv-title{font-family:var(--font-title);text-transform:uppercase;letter-spacing:.1em; color:var(--encre);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.16;margin-top:14px} /* Boutons contact (partages) : fonces sur clair */ .contact-lines{margin-top:26px;display:grid;gap:6px} .contact-lines .cl{font-family:var(--font-body);font-weight:400;letter-spacing:.06em;color:var(--encre);font-size:.92rem} .contact-lines .cl .k{color:var(--ink-soft);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:2px} .contact-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px} /* ---------------------------------------------------------------- SYSTEME DE BOUTONS UNIFIE (passe 4, point 2a) — un seul site, pas quatre. Une seule forme de coins : la PILULE (999px), qui domine (header + encart de contact, socle commun). Trois roles (charte : le bronze est la couleur des boutons) : - PRINCIPAL (aplat) : fond bronze, texte ivoire -> .btn.btn-solid, .appel-cta, .visite-submit - SECONDAIRE (filet) : filet bronze, texte bronze -> .btn, .hdr-cta, .visite-confirm-back - LIEN TEXTE : soulignement qui se deploie -> .acq-link, .vh-link, .hdr-rc Exception encre admise la ou le contraste l'exige (sur image, decidee passe 1) : l'encart de contact (.ce-visite / .ce-appeler). Boutons-icone (fermetures, fleches) : meme regle de coins => cercle (999px sur un carre). Les boutons des plans interactifs restent inchanges (passe 3). ---------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid var(--bronze);border-radius:999px; font-family:var(--font-body);font-weight:400;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze); transition:background .45s var(--ease-cine),color .45s var(--ease-cine),border-color .45s var(--ease-cine)} .btn:hover{background:var(--bronze);color:var(--blanc-pur)} .btn.btn-solid{background:var(--bronze);color:var(--blanc-pur);border-color:var(--bronze)} .btn.btn-solid:hover{background:transparent;color:var(--bronze);border-color:var(--bronze)} .commercialisation{margin-top:34px} .commercialisation .tag{display:inline-block;padding:7px 16px;border:1px solid var(--line); font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)} /* ---------------------------------------------------------------- 12. Footer (bloc sobre, prolonge la nuit, motif mer sombre) ---------------------------------------------------------------- */ /* PASSE VISUELLE (G1) : footer sur le meme fond clair continu, texte fonce. */ .site-footer{position:relative;overflow:hidden;background:transparent;color:var(--ink)} .footer-inner{position:relative;z-index:2;padding:clamp(56px,9vh,104px) 0 clamp(30px,5vh,54px)} .footer-bottom{position:relative;z-index:2;border-top:1px solid var(--line); padding:22px 0;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center} .footer-bottom .trip{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)} .footer-bottom .legal{display:flex;gap:22px;flex-wrap:wrap;align-items:center} .footer-bottom .legal a{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} .footer-bottom .legal a:hover{color:var(--bronze)} .footer-bottom .legal .cote{color:var(--ink-soft)} /* ================================================================ 13. PAGES VILLA (recit propre, grammaire miroir) ================================================================ */ /* 13.1 Hero villa plein cadre (fond teinte accent, motif mer en base) */ .villa-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden; background:linear-gradient(170deg, var(--villa-tint) 0%, rgba(242,235,221,.6) 52%, transparent 100%)} /* Horizon = noyer sombre : hero en fond profond, titre clair et net (tempérament). */ body.page-horizon .villa-hero{background:linear-gradient(180deg, rgba(36,26,18,.86) 0%, rgba(74,59,44,.52) 52%, rgba(36,26,18,.72) 100%)} body.page-horizon .villa-hero .zone-visuel .z-desc{color:var(--on-sombre-soft)} body.page-horizon .villa-hero .zone-visuel::after{border-color:rgba(230,218,196,.18)} /* Passe 10 (1.4) : bas du degrade renforce pour la rubrique et le sous-titre en sable (etaient a 3,0-4,4:1). Toujours un degrade (transparent en haut), pas un voile plat plein cadre. */ .villa-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg, rgba(42,32,24,.74), rgba(42,32,24,.44) 52%, transparent 82%)} body.page-horizon .villa-hero::after{background:linear-gradient(0deg, rgba(42,32,24,.80), rgba(42,32,24,.42) 46%, transparent 74%)} .villa-hero .villa-hero-zone{position:absolute;inset:0;z-index:0;border:none} /* Image signature et video superposees dans la meme boite (cover) : la bascule se fait sur l'opacite de la video seule, sans reflow ni saut de cadrage. */ .villa-hero .villa-hero-zone img, .villa-hero .villa-hero-zone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .villa-hero .villa-hero-zone .villa-hero-still{z-index:0} /* Video AU-DESSUS de l'image signature. Fondu 700 ms (le seul fondu du site). */ .villa-hero .villa-hero-zone .villa-hero-video{z-index:1;transition:opacity 700ms cubic-bezier(.22,1,.36,1)} .villa-hero .villa-hero-zone .villa-hero-video.is-faded{opacity:0} .villa-hero .villa-hero-zone .zone-visuel{height:100%;border:none;background: repeating-linear-gradient(135deg, rgba(74,59,44,.05) 0 16px, transparent 16px 32px), transparent} .villa-hero .vh-content{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9vh,110px);padding-top:calc(var(--header-h) + 20px)} .villa-hero .vh-eyebrow{font-family:var(--font-body);font-weight:500;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sable);text-shadow:0 1px 3px rgba(0,0,0,.6),0 1px 12px rgba(0,0,0,.5)} .villa-hero h1{font-size:clamp(2.6rem,8vw,6rem);letter-spacing:.08em;color:var(--blanc-pur);line-height:.98;margin-top:18px; text-shadow:0 2px 24px rgba(0,0,0,.4)} .villa-hero .vh-sub{margin-top:20px;max-width:44ch;color:var(--on-sombre-soft);text-shadow:0 1px 16px rgba(0,0,0,.4)} /* 13.2 Le nom comme promesse (grande phrase, annotation surface) */ .c-promesse .grid-8-4{align-items:end} .c-promesse .annot{align-self:end;text-align:right;padding-bottom:8px} .c-promesse .annot .num{font-family:var(--font-title);font-size:1.4rem;color:var(--bronze);letter-spacing:.06em} /* 13.3 + 13.4 Lumiere / matiere : la composition editoriale est definie en 8d (.lm-scene / .lm-scene--compact). */ /* 13.5 Le geste (parti pris) : bandeau editorial large, giant en filigrane */ .c-geste{position:relative} .c-geste .g-lead{max-width:30ch} .c-geste h2{font-size:clamp(1.6rem,3.4vw,2.5rem);text-transform:none;letter-spacing:.02em;line-height:1.2} /* 13.6 Parcours en scenes : cartes tirage premium (grille masonry fiable) Derogation anti-cheap assumee : coins arrondis + ombres douces multi-couche. Repere = le tirage photo de luxe pose sur une table. Choix technique : grille CSS (pas column-count, qui fragmente les transforms et fait disparaitre les cartes). Le nombre de lignes de chaque carte est calcule en JS (grid-row-end: span N) pour un vrai calage masonry. */ .galerie{position:relative;padding:0 0 clamp(60px,10vh,130px);overflow-x:clip} .galerie .g-head{padding:clamp(70px,11vh,150px) 0 clamp(30px,5vh,64px)} .galerie-cartes-wrap{padding-top:clamp(6px,1.4vw,18px)} .galerie-cartes{display:grid;grid-template-columns:repeat(3,1fr); gap:14px clamp(10px,1.4vw,20px);grid-auto-rows:6px;align-items:start} .carte{--rot:0deg;--tx:0px;--ty:0px; position:relative;z-index:1;margin:0; padding:6px 6px 0;background:var(--blanc-pur); border:1px solid var(--sable-clair);border-radius:12px; box-shadow:0 1px 2px rgba(74,59,44,.05),0 8px 18px rgba(74,59,44,.09),0 24px 50px rgba(74,59,44,.11); transform:translate(var(--tx),var(--ty)) rotate(var(--rot)); transition:transform .62s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1); cursor:pointer} /* Revelation en cascade : etat cache OPT-IN, arme uniquement quand le JS a pu installer l'IntersectionObserver. Par defaut (JS absent ou en echec) : visible. */ .galerie-cartes.reveal-ready .carte:not(.is-in){opacity:0;transform:translate(var(--tx),42px) rotate(0deg) scale(.96)} .galerie-cartes .carte.is-in{opacity:1} /* survol scope sous .galerie-cartes pour battre les z-index des :nth-child */ .galerie-cartes .carte:hover,.galerie-cartes .carte:focus-within{transform:translate(var(--tx),calc(var(--ty) - 9px)) rotate(0deg) scale(1.02);z-index:20; box-shadow:0 2px 6px rgba(74,59,44,.10),0 18px 34px rgba(74,59,44,.14),0 44px 84px rgba(74,59,44,.18)} .carte-media{position:relative;overflow:hidden;border-radius:7px;aspect-ratio:3/4;background:var(--panel-soft)} .carte-media img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--grade)} .carte.wide .carte-media{aspect-ratio:4/3} .carte .cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 4px 12px} .carte .cap .idx{font-family:var(--font-title);color:var(--bronze);font-size:.86rem;letter-spacing:.14em} .carte .cap .mat{font-family:var(--font-body);font-size:.6rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);text-align:right} /* Micro-rotations, decalages et profondeur : prints poses, jamais alignes. */ .carte:nth-child(6n+1){--rot:-2.2deg;--tx:7px;--ty:-2px;z-index:3} .carte:nth-child(6n+2){--rot:1.8deg;--tx:-9px;--ty:9px;z-index:5} .carte:nth-child(6n+3){--rot:-1.1deg;--tx:5px;--ty:2px;z-index:2} .carte:nth-child(6n+4){--rot:2.3deg;--tx:-6px;--ty:-3px;z-index:4} .carte:nth-child(6n+5){--rot:-1.7deg;--tx:8px;--ty:7px;z-index:6} .carte:nth-child(6n+6){--rot:1.3deg;--tx:-5px;--ty:0px;z-index:2} .carte.wide{--rot:-1.2deg} @media (max-width:1099px){ .galerie-cartes{grid-template-columns:repeat(2,1fr)} } @media (max-width:699px){ .galerie-cartes{display:flex;flex-direction:column;align-items:center;max-width:460px;margin-inline:auto;gap:0} .carte{width:100%;--ty:0px} .carte:nth-child(odd){--rot:-1.5deg;--tx:-10px;margin-top:clamp(-16px,-3.4vw,-8px)} .carte:nth-child(even){--rot:1.5deg;--tx:10px;margin-top:clamp(-16px,-3.4vw,-8px)} .carte:first-child{margin-top:0} .carte.wide{--rot:-1deg} .galerie-cartes .carte:hover,.galerie-cartes .carte:focus-within{transform:translate(var(--tx),-6px) rotate(0deg) scale(1.015);z-index:20; box-shadow:0 2px 5px rgba(74,59,44,.09),0 12px 24px rgba(74,59,44,.12),0 28px 52px rgba(74,59,44,.14)} } @media (prefers-reduced-motion:reduce){ .carte{transition:none} .galerie-cartes.reveal-ready .carte:not(.is-in){opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1)} .galerie-cartes .carte:hover,.galerie-cartes .carte:focus-within{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1)} } /* 13.7 (section preuve retiree, passe finale) */ /* 13.8 Renvoi au diptyque + retour (bandeau, prolonge la nuit) */ /* PASSE VISUELLE (G1) : renvoi/retour sur fond clair continu, texte fonce. */ .retour{background:transparent;color:var(--ink)} .retour-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)} .retour a{display:block;padding:clamp(26px,4vw,44px);border:1px solid var(--line);border-radius:12px;background:var(--panel-soft); transition:background .5s var(--ease-cine),border-color .5s var(--ease-cine),box-shadow .5s var(--ease-cine)} .retour a:hover{background:var(--blanc-pur);border-color:var(--beige);box-shadow:0 14px 40px rgba(74,59,44,.10)} .retour .r-eyebrow{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze)} .retour .r-name{font-family:var(--font-title);text-transform:uppercase;letter-spacing:.12em;color:var(--encre); font-size:clamp(1.3rem,2.6vw,1.9rem);margin-top:10px} .retour .r-sign{margin-top:10px;color:var(--ink-soft);font-size:.86rem;max-width:30ch} .retour .r-arrow{margin-top:16px;width:34px;height:1px;background:var(--bronze);transition:width .5s var(--ease-cine)} .retour a:hover .r-arrow{width:60px} /* ---------------------------------------------------------------- 14. Pages legales (stub sobre) ---------------------------------------------------------------- */ .legal-page{padding-top:calc(var(--header-h) + clamp(40px,8vh,90px));padding-bottom:var(--section-pad);position:relative;z-index:1} .legal-page .chap-content::before{content:none} .legal-page h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:8px} .legal-page h2{font-size:1.05rem;margin:36px 0 10px;color:var(--encre)} /* ---------------------------------------------------------------- 15. RESPONSIVE ---------------------------------------------------------------- */ @media (max-width:1024px){ .c-vivre .rituels{grid-template-columns:1fr;gap:0} .c-vivre .rituel{padding:22px 0} } @media (max-width:768px){ .grid-7-5,.grid-5-7,.grid-8-4,.grid-4-8,.grid-6-6, .c-vivre .lead-row,.c-plan .head,.retour-grid, .c-matiere .matiere-duo{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)} .c-manifeste .annot,.c-promesse .annot{text-align:left;align-self:start} .metre .row{grid-template-columns:1.4fr .8fr} .metre .note{display:none} /* diptyque : empile, on desactive l'epinglage (voir narrative.js no-pin) */ .diptyque-pin{height:auto} .diptyque-pin.no-pin .diptyque-sticky{position:static;height:auto;grid-template-columns:1fr} .diptyque-pin.no-pin .dip-side{min-height:78svh} .diptyque-pin.no-pin .dip-divider{display:none} .diptyque-pin.no-pin .dip-caption{position:static;padding:clamp(40px,7vh,70px) 0 0} .diptyque-sticky.emph-h .dip-solstice,.diptyque-sticky.emph-s .dip-horizon{filter:none;opacity:1;transform:none} /* selection villas : deux noms tapables d'emblee, cales sur les maisons */ .hotspot--horizon{top:31%} .hotspot--solstice{top:76%} .hs-name{letter-spacing:.24em;opacity:1} .hs-enter{opacity:.9;transform:none} .vs-hint{bottom:clamp(58px,9vh,86px)} } @media (max-width:480px){ .situation .grid-7-5{grid-template-columns:1fr} .contact-actions .btn{flex:1 1 100%;justify-content:center} } /* Ecrans courts (portables 768/800px de haut) : compacter le hero pour que la selection des deux villas tienne dans la premiere fenetre. */ @media (max-height:840px) and (min-width:769px){ .hero-final{padding-top:calc(var(--header-h) - 4px)} .logo-hero{width:min(240px,42vw)} .hero-triptyque{margin-bottom:clamp(10px,2vh,20px)} .hero-accroche{font-size:clamp(1rem,1.9vw,1.4rem);margin-top:clamp(12px,2.2vh,24px)} .hero-lieu{margin-top:clamp(8px,1.6vh,16px)} .villa-select{margin-top:clamp(12px,2.4vh,26px)} .hotspot{padding:clamp(16px,2vw,22px)} } /* ---------------------------------------------------------------- 16. prefers-reduced-motion : recit compréhensible sans mouvement ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} .hs-halo::after{animation:none;opacity:0} .vs-dim{transition:none} .villa-select,.hero-final{transition:none} .hotspot,.retour a,.btn,.dip-side{transition:none} .villa-veil,.villa-intro{transition:none} .villa-intro{opacity:0} #morph{animation:none} .spine-bar i{animation:none;transform:scaleY(1)} /* pins desactives par narrative.js ; galeries et diptyque s'empilent */ .galerie-pin{height:auto} .galerie-pin .galerie-sticky{position:static;height:auto;padding:clamp(30px,5vh,60px) 0;overflow-x:auto} .diptyque-pin{height:auto} .diptyque-sticky{position:static;height:auto} } /* ---------------------------------------------------------------- 11. ECRAN DE CHARGEMENT PREMIUM (accueil) Volets ivoire + logo AUREA, respiration discrete. Masque le demarrage du hero (aucune frame parasite), puis s'ouvre comme une fenetre sur le projet (volets qui s'ecartent). Scroll bloque pendant le loader (html.aurea-loading), relache a la fin. ---------------------------------------------------------------- */ html.aurea-loading,html.aurea-loading body{overflow:hidden} .aurea-loader{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden} .aurea-loader .ld-panel{position:absolute;left:-1px;right:-1px;height:calc(50% + 1px); background:var(--bg);transition:transform 1s var(--ease-cine) .3s;will-change:transform} .aurea-loader .ld-panel--top{top:0} .aurea-loader .ld-panel--bottom{bottom:0} .aurea-loader .ld-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:22px;z-index:2; transition:opacity .5s var(--ease-cine),transform .8s var(--ease-cine)} .aurea-loader .ld-logo{width:min(210px,44vw);height:auto;animation:ld-breathe 2.6s ease-in-out infinite} .aurea-loader .ld-bar{display:block;width:118px;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .aurea-loader .ld-bar-fill{display:block;height:100%;width:0;background:var(--bronze); transition:width .45s var(--ease-cine)} @keyframes ld-breathe{0%,100%{opacity:.6}50%{opacity:1}} /* ouverture : le logo s'efface, puis les volets s'ecartent */ .aurea-loader.is-opening .ld-core{opacity:0;transform:translateY(-8px) scale(1.03)} .aurea-loader.is-opening .ld-panel--top{transform:translateY(-100%)} .aurea-loader.is-opening .ld-panel--bottom{transform:translateY(100%)} .aurea-loader.is-done{display:none} /* variante rapide (retour depuis une villa) : fondu court, sans volets */ .aurea-loader.is-quick{transition:opacity .34s linear} .aurea-loader.is-quick .ld-panel{transition:none} .aurea-loader.is-quick .ld-logo{animation:none} .aurea-loader.is-quick.is-opening{opacity:0} .aurea-loader.is-quick.is-opening .ld-core{transform:none} .aurea-loader.is-quick.is-opening .ld-panel--top, .aurea-loader.is-quick.is-opening .ld-panel--bottom{transform:none} @media (prefers-reduced-motion:reduce){ .aurea-loader{transition:opacity .34s linear} .aurea-loader .ld-panel{transition:none} .aurea-loader .ld-logo{animation:none} .aurea-loader.is-opening{opacity:0} .aurea-loader.is-opening .ld-core{transform:none} .aurea-loader.is-opening .ld-panel--top, .aurea-loader.is-opening .ld-panel--bottom{transform:none} }