/* ============ Tokens ============ */ :root { --obsidian: #000000; --graphite: #0e0e0e; --carbon: #1d1d1f; --steel: #333336; --slate: #6e6e73; --ash: #86868b; --porcelain: #f5f5f7; --white: #ffffff; --blue: #0071e3; --link: #2997ff; --cobalt: #0066cc; --copper: #b64400; --yellow: #ffd500; --font-text: -apple-system, "SF Pro Text", Inter, ui-sans-serif, system-ui, sans-serif; --font-display: -apple-system, "SF Pro Display", Inter, ui-sans-serif, system-ui, sans-serif; --r-card: 28px; --r-nav: 20px; --ease: cubic-bezier(.2, .7, .1, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(16px, 4vw, 48px); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--obsidian); color: var(--porcelain); font-family: var(--font-text); font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-loading { overflow: hidden; } img { display: block; max-width: 100%; } [hidden] { display: none !important; } /* un élément masqué par l'attribut hidden le reste, quel que soit son display */ a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--blue); color: var(--white); } /* curseur : flèche classique partout, y compris sur le texte, les liens et les boutons (seuls les champs de saisie gardent le curseur texte pour taper) */ *, *::before, *::after { cursor: default !important; } input:not([type="checkbox"]):not([type="radio"]), textarea { cursor: text !important; } /* ============ Loader ============ */ .loader { position: fixed; inset: 0; z-index: 1000; background: var(--obsidian); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(64px, 11vh, 120px); transition: transform 1.1s var(--ease-out) .1s, border-radius 1.1s var(--ease-out) .1s; } .loader__count { font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 10vw, 96px); letter-spacing: -1.44px; font-variant-numeric: tabular-nums; } .loader__bar { width: min(240px, 60vw); height: 2px; background: var(--steel); border-radius: 2px; overflow: hidden; } .loader__bar span { display: block; height: 100%; width: 0; background: var(--porcelain); } body.loaded .loader { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 12% 12%; } body.from-menu .loader { display: none; } /* ============ Progress ============ */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; } .progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--link)); transform-origin: 0 50%; transform: scaleX(0); } /* ============ Nav ============ */ /* Repliée : seul le logo, dans l'angle (même place que dans le menu plein écran). Dépliée : la capsule s'étire vers la droite et révèle liens, bouton et menu. */ .nav { --corner: max(20px, var(--gutter)); position: fixed; z-index: 100; pointer-events: none; top: calc(env(safe-area-inset-top, 0px) + var(--corner) - 6px); left: calc(var(--corner) - 6px); right: calc(var(--corner) - 6px); transition: transform .6s var(--ease-out); } .nav.is-hidden { transform: translateY(calc(-100% - 40px)); } /* repliée (logo + deux barres, en blanc), la barre s'inverse selon ce qui passe dessous : blanche sur fond sombre, foncée sur fond clair. Dépliée, la capsule garde ses couleurs normales. */ .nav:not(.is-open) { mix-blend-mode: difference; } .nav__inner { pointer-events: auto; display: flex; align-items: center; overflow: hidden; width: 52px; height: 52px; padding: 6px; border-radius: 26px; background: rgba(14,14,14,0); box-shadow: rgba(40,40,40,0) 0 0 0 1px; transition: width .9s var(--ease-out), background-color .5s ease, box-shadow .5s ease, backdrop-filter .5s ease; } .nav.is-open .nav__inner { width: 100%; background: rgba(14,14,14,.72); box-shadow: rgb(40,40,40) 0 0 0 1px; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .nav__toggle { flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; } /* même animation que le logo du menu plein écran */ .nav__toggle img { width: 40px; height: 40px; object-fit: contain; transition: transform .8s var(--ease-out); } .nav__toggle:hover img { transform: rotate(-25deg) scale(1.08); } /* apparition comme dans le menu : fondu + léger zoom, une fois le chargement terminé */ .nav__toggle, .nav__burger { opacity: 0; scale: .8; transition: opacity .6s var(--ease-out) .3s, scale .8s var(--ease-out) .3s; } body.loaded .nav__toggle, body.loaded .nav__burger { opacity: 1; scale: 1; } .nav__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* contenu dessiné à sa largeur finale, révélé par l'étirement de la capsule */ .nav__panel { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(100vw - 2 * var(--corner) + 12px - 104px); padding: 0 12px 0 16px; visibility: hidden; transition: visibility 0s .5s; } .nav.is-open .nav__panel { visibility: visible; transition: none; } .nav__panel > * { opacity: 0; transform: translateX(-14px); transition: opacity .3s ease, transform .4s var(--ease-out); } .nav.is-open .nav__panel > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s var(--ease-out); } .nav.is-open .nav__panel > :nth-child(1) { transition-delay: .2s; } .nav.is-open .nav__panel > :nth-child(2) { transition-delay: .3s; } .nav.is-open .nav__panel > :nth-child(3) { transition-delay: .4s; } .nav.is-open .nav__panel > :nth-child(4) { transition-delay: .5s; } .nav__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.2px; white-space: nowrap; } .nav__logo img { width: 30px; height: 30px; object-fit: contain; } /* pied de page */ .nav__logo em { font-style: normal; color: var(--ash); font-weight: 500; transition: color .3s; } .nav__logo:hover em { color: var(--porcelain); } .nav__links { display: flex; gap: 28px; } .nav__links a { position: relative; font-size: 12px; letter-spacing: -0.12px; color: rgba(255,255,255,.8); transition: color .3s; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--porcelain); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); } .nav__links a:hover { color: var(--white); } .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__links a.is-active { color: var(--white); } .nav__cta { display: flex; gap: 8px; } .nav__burger { position: absolute; top: 6px; right: 6px; z-index: 1; pointer-events: auto; display: block; background: none; border: 0; width: 40px; height: 40px; } .nav__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--porcelain); transition: transform .4s var(--ease-out); } .nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 23px; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* ============ Menu plein écran ============ */ /* Grandes catégories en contour ; celle survolée se remplit et son diaporama passe en fond */ .menu { position: fixed; inset: 0; z-index: 95; height: 100vh; height: 100lvh; overflow: hidden; background: #000; visibility: hidden; clip-path: circle(0% at var(--mx, calc(100% - 44px)) var(--my, 38px)); transition: clip-path .9s var(--ease-out), visibility 0s .9s; } .menu.is-open { visibility: visible; clip-path: circle(150% at var(--mx, calc(100% - 44px)) var(--my, 38px)); transition: clip-path .9s var(--ease-out); } body.menu-open { overflow: hidden; } /* menu ouvert : la barre du haut s'efface, seul le logo reste dans l'angle (retour à l'accueil) */ .nav { transition: transform .6s var(--ease-out), opacity .4s ease, visibility 0s; } body.menu-open .nav { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; } .menu__home { /* même écart au bord du haut et au bord gauche */ position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + max(20px, var(--gutter))); left: max(20px, var(--gutter)); width: 40px; height: 40px; display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity .6s var(--ease-out) .3s, transform .8s var(--ease-out) .3s; } .menu.is-open .menu__home { opacity: 1; transform: none; } .menu__home img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease-out); } .menu__home:hover img { transform: rotate(-25deg) scale(1.08); } .menu__home:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 50%; } /* bouton Accueil en haut à droite du menu, aligné sur le logo, et son jumeau « Menu » en haut des pages catégories */ .menu .menu__accueil, .cpage__top .cpage__menu { background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: rgba(255,255,255,.45) 0 0 0 1px; } .menu .menu__accueil { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + max(20px, var(--gutter)) + 5px); right: max(20px, var(--gutter)); opacity: 0; } .menu.is-open .menu__accueil { opacity: 1; transition: opacity .6s var(--ease-out) .3s, transform .9s var(--pill-ease), background .4s, color .4s, box-shadow .4s; } .menu__stage { position: absolute; inset: 0; } .menu__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .menu__bg.is-active { opacity: 1; } /* Zoom à peine perceptible (2 %) porté par une transition : la photo qui s'efface garde son échelle pendant le fondu, et ne revient à 1 qu'une fois invisible (plus de « saut »). */ .menu__slide { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(1.12) brightness(1.04); opacity: 0; transform: none; transition: opacity 1.2s ease, transform 0s linear 1.2s; } .menu__slide.is-on { opacity: 1; transform: scale(1.02); transition: opacity 1.2s ease, transform 10s linear; } .menu__shade { position: absolute; inset: 0; pointer-events: none; /* voile allégé pour des photos plus claires ; un léger dégradé à gauche garde les titres lisibles */ background: linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12) 45%, rgba(0,0,0,.42)); } .menu__nav { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 90px) max(20px, var(--gutter)) calc(env(safe-area-inset-bottom, 0px) + 110px); } /* sur desktop, la liste n'occupe qu'environ un quart de la largeur */ .menu__list { display: flex; flex-direction: column; gap: clamp(4px, 1.4vh, 14px); } .menu__list a { display: flex; align-items: baseline; gap: clamp(10px, 1.4vw, 20px); -webkit-tap-highlight-color: transparent; /* opacité dégressive selon l'éloignement de la catégorie active (--o et --wd posés par main.js) */ opacity: var(--o, .5); transition: opacity .5s ease var(--wd, 0s); } /* Police à graisse fixe (non variable) : ses contours ne se chevauchent pas, le tracé reste net */ .menu__num, .menu__title { font-family: "Archivo Black", "Arial Black", Impact, sans-serif; font-weight: 400; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); transition: color .35s ease, -webkit-text-stroke-color .35s ease, transform .5s var(--ease-out); } .menu__num { font-size: clamp(.8rem, 1vw, 1rem); width: 2.4em; flex: none; -webkit-text-stroke-width: .8px; font-variant-numeric: tabular-nums; } .menu__title { text-transform: uppercase; font-size: clamp(1.6rem, min(2.8vw, 6.5vh), 3.6rem); line-height: 1; letter-spacing: -0.01em; -webkit-text-stroke-width: 1.2px; } .menu__list a.is-active .menu__num, .menu__list a.is-active .menu__title { color: #fff; -webkit-text-stroke-color: #fff; transform: translateX(10px); } .menu__list a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; } /* entrée des lignes à l'ouverture */ .menu__list li { opacity: 0; transform: translateY(40px); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); } .menu.is-open .menu__list li { opacity: 1; transform: none; transition-delay: calc(.25s + var(--k) * .07s); } /* pied du menu : réseaux, puis mentions légales en plus discret */ .menu__foot { position: absolute; z-index: 2; right: max(20px, var(--gutter)); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .9s var(--ease-out); } .menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: .55s; } .menu__social, .menu__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; } .menu__social { gap: 6px 24px; } .menu__legal { gap: 6px 20px; } /* ordinateur : mentions légales au-dessus, réseaux sur la dernière ligne */ .menu__legal { order: -1; } .menu__social a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: color .3s; } .menu__legal a { font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.62); transition: color .3s; } .menu__foot a { text-shadow: 0 1px 14px rgba(0,0,0,.55); } .menu__foot a:hover { color: #fff; } .menu__foot a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .menu__hint { display: none; margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } @media (hover: none) { .menu__hint { display: block; } } /* retour depuis une page catégorie : le menu s'affiche directement, sans l'ouverture en cercle */ .menu.is-instant { transition: none; } @media (max-width: 640px) { /* téléphone : catégories centrées */ .menu__nav { align-items: center; } .menu__list { align-items: center; gap: clamp(8px, 1.8vh, 16px); } .menu__list a { justify-content: center; position: relative; } /* numéro posé à gauche du titre, hors du centrage : le titre est parfaitement centré */ .menu__num { position: absolute; right: 100%; margin-right: 8px; width: auto; font-size: .85rem; } .menu__title { font-size: min(9.5vw, 2.6rem); } .menu__list a.is-active .menu__num, .menu__list a.is-active .menu__title { transform: none; } .menu__nav { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); } /* pied centré comme les catégories, posé sur un fondu noir et séparé par un filet */ .menu__shade { background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 18%, rgba(0,0,0,0) 34%), linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12) 45%, rgba(0,0,0,.2)); } .menu__foot { left: max(20px, var(--gutter)); right: max(20px, var(--gutter)); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); align-items: center; gap: 0; text-align: center; } .menu__hint { margin-bottom: 16px; } .menu__social, .menu__legal { justify-content: center; } .menu__social { align-self: stretch; gap: 6px 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); } .menu__social a { font-size: 12.5px; color: rgba(255,255,255,.88); padding: 4px 0; } .menu__legal { order: 0; margin-top: 8px; gap: 6px 22px; } .menu__legal a { padding: 4px 0; } } @media (prefers-reduced-motion: reduce) { .menu__slide, .menu__slide.is-on { transform: none; } } /* ============ Pills ============ */ .pill { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 170px; border: 0; font: 400 17px/1.2 var(--font-text); letter-spacing: -0.374px; --pill-ease: cubic-bezier(.22, 1, .36, 1); transition: transform .9s var(--pill-ease), filter .7s ease, box-shadow .8s var(--pill-ease), background-color .4s, color .4s; will-change: transform; position: relative; overflow: hidden; isolation: isolate; } /* survol : le bouton se soulève en douceur et un reflet de lumière large et diffus le traverse lentement (plus de suivi de la souris). En sortie, le reflet se replace hors champ sans transition, donc sans aller-retour. */ .pill::after { content: ""; position: absolute; inset: -10% 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 65%, transparent 80%); transform: translateX(-140%); transition: transform 0s; } .pill:hover { transform: translateY(-1.5px) scale(1.025); } .pill:hover::after { transform: translateX(140%); transition: transform 1.6s var(--pill-ease); } .pill:active { transform: translateY(0) scale(.99); transition-duration: .3s; } .pill--sm { padding: 7px 14px; font-size: 12px; letter-spacing: -0.12px; } .pill--blue { background: var(--blue); color: var(--white); } .pill--blue::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120px circle at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .3s; } .pill--blue:hover::before { opacity: 1; } .pill--blue:hover { background: #0077ed; } .pill--outline { background: transparent; color: var(--porcelain); box-shadow: rgb(110,110,115) 0 0 0 1px; } .pill--outline:hover { background: var(--porcelain); color: var(--obsidian); box-shadow: var(--porcelain) 0 0 0 1px; } .pill .arrow { display: inline-block; transition: transform .4s var(--ease-out); } .pill:hover .arrow { transform: translateX(4px); } .link { color: var(--link); font-size: 17px; } .link:hover { text-decoration: underline; } .new { color: var(--copper); font-weight: 600; margin-right: 6px; } /* ============ Reveal ============ */ .reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s); } .reveal-up.in { opacity: 1; transform: none; } .reveal-scale { clip-path: inset(12% 10% 12% 10% round 28px); transition: clip-path 1.6s var(--ease-out); } .reveal-scale.in { clip-path: inset(0 0 0 0 round 28px); } [data-split] .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } [data-split] .line > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.3s var(--ease-out); } [data-split].in .line > span { transform: none; } [data-split].in .line:nth-child(2) > span { transition-delay: .09s; } [data-split].in .line:nth-child(3) > span { transition-delay: .18s; } .grad { background: linear-gradient(100deg, #f5f5f7 0%, #2997ff 40%, #b5d7ff 60%, #f5f5f7 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } @keyframes shine { to { background-position: -250% 0; } } /* ============ Hero ============ */ /* Plateau de studio noir : photo assombrie, nom centré, fondu vers le noir de la section suivante */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--obsidian); } .hero__media { position: absolute; inset: 0; will-change: transform; } .hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.5) contrast(1.08) grayscale(1); transform: scale(1.14); opacity: 0; transition: transform 3.2s var(--ease-out), opacity 1.6s var(--ease-out); } body.loaded .hero__photo { transform: scale(1.02); opacity: 1; } .hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%), linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.45) 66%, rgba(0,0,0,.85) 84%, #000 100%); } .hero__content { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); will-change: transform, opacity; } .hero__title { font-family: var(--font-display); font-weight: 600; white-space: nowrap; font-size: clamp(30px, 8.4vw, 112px); line-height: 1.04; letter-spacing: -0.03em; text-shadow: 0 4px 60px rgba(0,0,0,.45); } .hero__grain, .zoom__grain { position: absolute; inset: -50%; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml;utf8,"); animation: grain 1s steps(6) infinite; } @keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-5%,3%); } 40% { transform: translate(3%,-4%); } 60% { transform: translate(-2%,5%); } 80% { transform: translate(4%,2%); } 100% { transform: translate(0,0); } } /* ============ Studio : Photographie / Vidéo / Drone ============ */ /* La section remonte d'un écran sous le hero : son fond noir animé apparaît par-dessus en fondu (--in : 0 → 1), avec des lumières argentées qui dérivent et changent de place à chaque mot (data-step), et un motif par mot. --in, --fade et data-step sont posés par main.js. */ .zoom { height: 400vh; position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; } .zoom__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; } .zoom__frame { --in: 0; position: absolute; inset: 0; overflow: hidden; background: #000; opacity: var(--in); } .zoom__lights, .zoom__layer { position: absolute; inset: 0; transform: scale(calc(1 + (1 - var(--in)) * .12)); } /* lumières : mêmes halos irisés que le reste du site */ .zlight { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; will-change: transform; transition: left 2.4s var(--ease-out), top 2.4s var(--ease-out), opacity 2s ease, width 2.4s var(--ease-out), height 2.4s var(--ease-out); } .zlight--1 { left: 6%; top: 8%; width: min(820px, 80vw); height: 52vh; background: radial-gradient(closest-side, rgba(236,232,255,.34), rgba(214,203,243,.12) 55%, transparent); animation: zlightA 14s ease-in-out infinite alternate; } .zlight--2 { left: 46%; top: 46%; width: min(760px, 76vw); height: 50vh; background: radial-gradient(closest-side, rgba(220,238,250,.3), rgba(243,217,230,.1) 55%, transparent); animation: zlightB 17s ease-in-out infinite alternate; } .zlight--3 { left: 30%; top: 30%; width: min(560px, 60vw); height: 36vh; opacity: .8; background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%); animation: zlightC 10s ease-in-out infinite alternate; } .zoom__frame[data-step="1"] .zlight--1 { left: 48%; top: 4%; } .zoom__frame[data-step="1"] .zlight--2 { left: 2%; top: 50%; } .zoom__frame[data-step="1"] .zlight--3 { left: 22%; top: 18%; } .zoom__frame[data-step="2"] .zlight--1 { left: 20%; top: 52%; width: min(1100px, 100vw); } .zoom__frame[data-step="2"] .zlight--2 { left: 50%; top: 0; } .zoom__frame[data-step="2"] .zlight--3 { left: 36%; top: 40%; } @keyframes zlightA { from { transform: translate(-4vw, -3vh) rotate(-8deg) scale(1); } to { transform: translate(6vw, 4vh) rotate(10deg) scale(1.15); } } @keyframes zlightB { from { transform: translate(5vw, 3vh) rotate(6deg) scale(1.1); } to { transform: translate(-6vw, -4vh) rotate(-12deg) scale(.95); } } @keyframes zlightC { from { transform: translate(-8vw, 2vh) scale(.9); } to { transform: translate(8vw, -3vh) scale(1.2); } } /* motifs : un par mot, en fondu */ .zoom__layer { opacity: 0; transition: opacity 1.4s var(--ease-out); pointer-events: none; } .zoom__layer.is-on { opacity: 1; } /* Photographie : bagues d'objectif concentriques qui « respirent » comme une mise au point */ .zoom__layer--photo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; translate: -50% -50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.075) 0 1px, transparent 1.5px 58px); -webkit-mask: radial-gradient(circle, #000 12%, transparent 46%); mask: radial-gradient(circle, #000 12%, transparent 46%); animation: zfocus 7s ease-in-out infinite alternate; } @keyframes zfocus { from { transform: scale(.9) rotate(0deg); } to { transform: scale(1.12) rotate(8deg); } } /* Vidéo : trame fine et une bande de lumière qui balaie l'image, comme un défilement de film */ .zoom__layer--video { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px); -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%); mask: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%); } .zoom__layer--video::before { content: ""; position: absolute; inset: -30% 0 auto; height: 30%; background: linear-gradient(transparent, rgba(226,232,250,.16), transparent); animation: zscan 3.6s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes zscan { to { transform: translateY(430%); } } /* cadre de viseur 16:9 (coins) et voyant REC qui clignote */ .zoom__layer--video::after { --c: rgba(245,245,247,.4); content: ""; position: absolute; left: 50%; top: 50%; width: min(80vw, 1100px); aspect-ratio: 16 / 9; translate: -50% -50%; background: linear-gradient(var(--c), var(--c)) 0 0 / 44px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 44px, linear-gradient(var(--c), var(--c)) 100% 0 / 44px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 44px, linear-gradient(var(--c), var(--c)) 0 100% / 44px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 44px, linear-gradient(var(--c), var(--c)) 100% 100% / 44px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 44px; background-repeat: no-repeat; animation: zframe 5s ease-in-out infinite alternate; } @keyframes zframe { from { transform: scale(.96); } to { transform: scale(1.02); } } .zrec { position: absolute; left: calc(50% - min(40vw, 550px) + 22px); top: calc(50% - min(22.5vw, 309px) + 20px); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(245,245,247,.6); } .zrec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 10px rgba(255,69,58,.8); animation: zrec 1.2s steps(2, jump-none) infinite; } @keyframes zrec { 50% { opacity: .15; } } /* Drone : un sol quadrillé vu du ciel, qui défile vers l'horizon */ .zoom__layer--drone { perspective: 520px; } .zoom__layer--drone::before { content: ""; position: absolute; left: -50%; right: -50%; top: 44%; height: 120%; transform-origin: 50% 0; transform: rotateX(72deg); background: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 90px 90px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 90px 90px; -webkit-mask: linear-gradient(transparent, #000 25%, #000 60%, transparent); mask: linear-gradient(transparent, #000 25%, #000 60%, transparent); animation: zfly 2.4s linear infinite; } @keyframes zfly { to { background-position: 0 90px, 0 90px; } } /* Assombrissement en fin de section, pendant que la photo suivante apparaît par-dessus */ .zoom__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: var(--fade, 0); } .zoom__grain { z-index: 1; opacity: .16; mix-blend-mode: overlay; } @media (max-width: 700px) { .zlight { filter: blur(44px); } } @media (prefers-reduced-motion: reduce) { .zlight, .zoom__layer::before, .zoom__layer::after, .zrec::before { animation: none; } } .zoom__words { position: relative; display: grid; place-items: center; z-index: 2; } .zoom__word { grid-area: 1 / 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 10vw, 140px); letter-spacing: -0.035em; line-height: 1; opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); } .zoom__word.is-on { opacity: 1; transform: none; filter: none; } .zoom__word.is-past { opacity: 0; transform: translateY(-40px) scale(1.02); filter: blur(10px); } /* ============ Seen By Monzon (sous la section studio) ============ */ /* Section de deux écrans : la photo reste en plein écran (sticky) et remonte doucement pendant que le texte d'origine se révèle mot à mot, centré dans le bas, sur un voile sombre. */ .seen { position: relative; z-index: 2; height: 200vh; height: 200svh; } /* quand la section studio la précède : elle remonte d'un demi-écran sur sa fin, la photo apparaît en fondu par-dessus */ .zoom + .seen { margin-top: -50vh; margin-top: -50svh; } .seen__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 var(--gutter) clamp(44px, 8vh, 96px); } .seen__media { position: absolute; inset: 0; overflow: hidden; z-index: -1; /* le haut est fondu à l'arrivée, puis le fondu s'efface une fois la section en place (--mt : 0 → 1, main.js) */ -webkit-mask-image: linear-gradient(rgba(0,0,0,var(--mt, 0)), #000 38%); mask-image: linear-gradient(rgba(0,0,0,var(--mt, 0)), #000 38%); } /* plus haute que l'écran (135 %) : main.js la fait remonter d'un quart de sa hauteur au fil du scroll */ .seen__media img { position: absolute; left: 0; top: 0; width: 100%; height: 135%; object-fit: cover; object-position: 40% 30%; transform: scale(1.08); transform-origin: 50% 0; will-change: transform; filter: saturate(1.05) contrast(1.03); } /* fondu progressif depuis la section studio en haut (masque) ; voile sombre dans le bas pour le texte */ .seen__media::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 48%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.9) 84%, #000); } @media (orientation: portrait) { .seen__media img { height: 120%; object-position: 33% 30%; } } /* Texte façon éditoriale : deux courts paragraphes en capitales, centrés sur une colonne étroite, puis un lien souligné ; les mots se révèlent au fil du scroll */ .seen__text { max-width: 25em; display: grid; justify-items: center; gap: 2.2em; text-align: center; margin-bottom: clamp(16px, 5vh, 64px); } .seen__text [data-words] { display: grid; gap: 1.6em; } .seen__text .mline, .seen__link { font-family: var(--font-text); font-weight: 400; text-transform: uppercase; text-wrap: balance; font-size: clamp(11.5px, .86vw, 13.5px); line-height: 1.62; letter-spacing: .015em; color: rgba(245,245,247,.94); } .seen__text .w { display: inline-block; opacity: .2; filter: blur(6px); transform: translateY(.1em); transition: opacity .6s var(--ease-out), filter .8s var(--ease-out), transform .8s var(--ease-out); } .seen__text .w.on { opacity: 1; filter: blur(0); transform: none; } /* lien souligné : au survol, le trait file vers la droite puis revient de la gauche */ .seen__link { font-weight: 500; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; } .seen__link:hover { animation: seenLine 1.1s cubic-bezier(.22, 1, .36, 1); } @keyframes seenLine { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-size: 0 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } } @media (prefers-reduced-motion: reduce) { .seen__media img { transform: none; } .seen__text .w { opacity: 1; filter: none; transform: none; } } /* ============ Galerie : mur de photos ============ */ /* Trois rangées de photos assombries qui dérivent en continu en sens alternés (celle du milieu plus lumineuse), décalées en plus au fil du scroll (--wx, main.js) ; un reflet de lumière traverse l'image de temps en temps. Le titre est posé à gauche, sur un dégradé sombre. */ .wall { --tile: clamp(150px, 31vh, 300px); /* rapprochée des sections voisines, avec le même écart au-dessus et en dessous : elle remonte sur le bas de la section Méthode (dont la marge vaut --fade) pour ne laisser que --gap, et garde --gap sous elle */ --pfade: clamp(220px, 28vh, 320px); --gap: 130px; position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; margin: calc(var(--gap) - var(--pfade)) 0 var(--gap); } .wall__grid { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: -2; display: grid; gap: 10px; /* fondu des rangées en haut et en bas (pas de fond noir : la lumière de la section au-dessus s'estompe librement) */ -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); } .wall__row { overflow: visible; transform: translate3d(calc(var(--wx, 0) * var(--dir) * 1px), 0, 0); will-change: transform; } .wall__row--1, .wall__row--3 { --dir: -1; } .wall__row--2 { --dir: 1; } .wall__track { display: flex; gap: 10px; width: max-content; animation: wallDrift 110s linear infinite; will-change: transform; } .wall__row--2 .wall__track { animation-direction: reverse; animation-duration: 95s; } .wall__row--3 .wall__track { animation-duration: 125s; } @keyframes wallDrift { to { transform: translate3d(calc(-100% / 3), 0, 0); } } .wall__track img { flex: none; width: calc(var(--tile) * 1.09); height: var(--tile); object-fit: cover; border-radius: 6px; filter: brightness(.26) saturate(.85); transition: filter .9s var(--ease-out); } .wall__row--2 .wall__track img { filter: brightness(.52) saturate(.95); } .wall__track img:hover { filter: brightness(.95) saturate(1.05); } /* dégradé sombre sous le titre, à gauche */ .wall::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.25) 34%, transparent 55%); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); } .wall__grid img { pointer-events: auto; } .wall__content { position: relative; padding: 0 var(--gutter); max-width: 900px; } /* le titre et le lien tiennent dans la hauteur de la rangée du milieu (--tile), centrée comme eux */ .wall__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(28px, min(4.6vw, calc(var(--tile) * .19)), 72px); line-height: 1.02; letter-spacing: -0.025em; } .wall__link { margin-top: calc(var(--tile) * .08); display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .wall__link svg { width: 11px; height: 11px; fill: currentColor; transition: transform .6s var(--ease-out); } .wall__link:hover svg { transform: translateX(4px); } @media (max-width: 900px) { .wall { --pfade: 170px; --gap: 80px; } } @media (max-width: 700px) { .wall { --gap: 60px; } } /* téléphone : mur de photos plus haut, fondu en haut et en bas ; le titre reste posé dessus, dans le style des autres titres de section (police d'affichage, phrase normale), sur un voile sombre */ @media (max-width: 700px) { .wall { --tile: clamp(130px, 23vh, 200px); min-height: 92vh; min-height: 92svh; } .wall::before { background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 75%, rgba(0,0,0,.1)); } .wall__grid { gap: 8px; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); } /* téléphone : dérive plus lente pour un mouvement plus posé */ .wall__track { gap: 8px; animation-duration: 150s; } .wall__row--2 .wall__track { animation-duration: 130s; } .wall__row--3 .wall__track { animation-duration: 170s; } .wall__track img { border-radius: 5px; } .wall__title { font-weight: 600; text-transform: none; letter-spacing: -0.025em; font-size: clamp(24px, min(8.4vw, calc(var(--tile) * .18)), 40px); line-height: 1.06; text-shadow: 0 2px 30px rgba(0,0,0,.5); } /* titre resserré sur la gauche, en trois lignes, toujours dans la rangée du milieu */ .wall__content { max-width: 78%; } .wall__link { margin-top: 14px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .wall__track { animation: none; } } /* ============ Univers : liste éditoriale ============ */ /* Trois colonnes (catégorie numérotée, grand titre, description) séparées par de fins filets qui se tracent à l'apparition. Au survol, la ligne s'éclaire, le titre glisse et une flèche apparaît. */ .ulist { max-width: 1320px; margin: 0 auto; padding: clamp(100px, 16vh, 170px) var(--gutter) clamp(60px, 10vh, 110px); } .ulist__label { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,245,247,.82); } .ulist__heading { margin-top: 18px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05; } .ulist__items { list-style: none; margin: clamp(48px, 8vh, 90px) 0 0; padding: 0; } .ulist__item { position: relative; } /* filet du haut de chaque ligne (et du bas pour la dernière), tracé de gauche à droite */ .ulist__item::before, .ulist__item:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.12); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-out) var(--d, 0s); } .ulist__item::before { top: 0; } .ulist__item:last-child::after { bottom: 0; } .ulist__item.in::before, .ulist__item.in::after { transform: scaleX(1); } .ulist__row { position: relative; display: grid; grid-template-columns: 1fr 1.05fr 1.45fr; gap: 32px; align-items: start; padding: clamp(32px, 5vh, 46px) 56px clamp(44px, 7vh, 64px) 0; transition: background-color .8s var(--ease-out); } .ulist__row:hover { background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,0) 80%); } .ulist__tag { padding-top: .5em; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(245,245,247,.82); } .ulist__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; color: #fff; transition: transform .9s var(--ease-out); } .ulist__row:hover .ulist__title { transform: translateX(8px); } .ulist__desc { padding-top: .2em; max-width: 34em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; letter-spacing: -0.01em; color: rgba(245,245,247,.8); transition: color .8s var(--ease-out); } .ulist__row:hover .ulist__desc { color: rgba(245,245,247,.95); } .ulist__arrow { position: absolute; right: 8px; top: clamp(34px, 5vh, 48px); width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translate(-6px, 6px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .ulist__row:hover .ulist__arrow, .ulist__row:focus-visible .ulist__arrow { opacity: 1; transform: none; } .ulist__row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } @media (max-width: 900px) { .ulist__row { grid-template-columns: 1fr; gap: 12px; padding-right: 44px; } .ulist__tag { padding-top: 0; } .ulist__arrow { opacity: .6; transform: none; } } .section-head__label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--link); margin-bottom: 20px; } /* ============ Section heads ============ */ .section-head { max-width: 1200px; margin: 0 auto 56px; padding: 0 var(--gutter); } .section-head--center { text-align: center; } .section-head__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.025em; } .section-head__sub { color: var(--ash); margin-top: 16px; font-size: 21px; } /* ============ Cartes (offres) ============ */ .card, .offer { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--carbon); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease-out), box-shadow .4s; transform-style: preserve-3d; } .card.reveal-up, .offer.reveal-up { transform: perspective(1000px) translateY(60px); } .card.reveal-up.in, .offer.reveal-up.in { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); } .card.reveal-up, .offer.reveal-up { opacity: 0; transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s), box-shadow .4s, translate .9s cubic-bezier(.22, 1, .36, 1), scale .9s cubic-bezier(.22, 1, .36, 1); } .card.reveal-up.in, .offer.reveal-up.in { opacity: 1; } .card.is-tilting, .offer.is-tilting { transition: transform .12s linear, box-shadow .6s, opacity 1s var(--ease-out), translate .9s cubic-bezier(.22, 1, .36, 1), scale .9s cubic-bezier(.22, 1, .36, 1); } .card:hover { box-shadow: rgb(60,60,64) 0 0 0 1px; } .card__glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(400px circle at var(--gx) var(--gy), rgba(255,255,255,.12), transparent 45%); opacity: 0; transition: opacity .4s; } .card:hover .card__glow, .offer:hover .card__glow { opacity: 1; } /* ============ Projets ============ */ /* Galerie de cartes façon Apple : la rangée démarre aligné sur le titre et déborde jusqu'au bord droit ; on la fait défiler à l'horizontale (flèches, glisser à la souris, trackpad, doigt), sans lien avec le scroll de la page. */ .pgal { --card-h: clamp(190px, 30vw, 490px); --edge: max(var(--gutter), calc((100vw - 1200px) / 2)); --ease-card: cubic-bezier(.22, 1, .36, 1); padding: clamp(96px, 14vh, 160px) 0 clamp(64px, 10vh, 110px); } .pgal__head { padding: 0 var(--edge); margin-bottom: clamp(30px, 5.5vh, 60px); } /* typographie des pages Apple : SF Pro Display gras, titre seul aligné à gauche */ .pgal__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.07; letter-spacing: -0.015em; color: var(--porcelain); } .pgal__scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 14px 0 28px; /* place pour le soulèvement et l'ombre des cartes au survol */ } .pgal__scroller::-webkit-scrollbar { display: none; } .pgal__scroller.is-dragging, .pgal__scroller.is-gliding { scroll-snap-type: none; cursor: default; } .pgal__scroller:focus-visible { outline: none; } .pgal__track { display: flex; gap: clamp(14px, 1.4vw, 24px); width: max-content; margin: 0; padding: 0 var(--edge); list-style: none; } /* toutes les cartes ont la même hauteur ; les horizontales (ratio 1,54) alternent avec des verticales (ratio 0,72) */ .pcard { flex: none; width: calc(var(--card-h) * 1.54); scroll-snap-align: start; } .pcard--v { width: calc(var(--card-h) * 0.72); } .pcard--v .pcard__btn { aspect-ratio: 0.72; } .pcard--v .pcard__cap { max-width: 100%; } .pcard__btn { position: relative; display: block; width: 100%; aspect-ratio: 1.54; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden; isolation: isolate; background: var(--carbon); color: inherit; font: inherit; text-align: left; transition: translate .9s var(--ease-card), scale .9s var(--ease-card), box-shadow .9s var(--ease-card); -webkit-user-drag: none; user-select: none; } .pcard__media, .pcard__media img, .pcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; } .pcard__media img, .pcard__media video { object-fit: cover; pointer-events: none; } .pcard__media img { transform: scale(1.04); filter: grayscale(.4) brightness(.85); transition: transform 1.4s var(--ease-card), filter 1s var(--ease-card); } .pcard__media video { opacity: 0; transition: opacity .8s var(--ease-card); } .pcard.is-playing .pcard__media video { opacity: 1; } /* survol : la photo reprend simplement ses couleurs (pas de vidéo automatique) */ .pcard__frame { position: relative; } .pcard__media img { transform: none; transition: filter 1s var(--ease-card); } /* survol à la souris : la photo reprend ses couleurs dès que le pointeur est sur la carte, photo ou légende */ .pcard__frame:hover .pcard__media img, .pcard:hover .pcard__media img { filter: none; } /* écrans tactiles : toucher la carte, photo ou texte, lui rend aussi ses couleurs (main.js pose .is-lit) */ @media (hover: none) { .pcard.is-lit .pcard__media img { filter: none; } } /* bouton lecture en bas à droite de l'image, comme sur les pages Apple : lance / met en pause la vidéo dans la carte */ .pcard__play { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--porcelain); background: rgba(40,40,44,.55); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background-color .5s, transform .8s var(--ease-card); } .pcard__play svg { width: 18px; height: 18px; fill: currentColor; } .pcard__play .i-pause, .pcard.is-playing .pcard__play .i-play { display: none; } .pcard.is-playing .pcard__play .i-pause { display: inline; } .pcard__play:hover { background: rgba(80,80,86,.7); transform: scale(1.08); } .pcard__play:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 3px; } .pcard__btn:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 4px; } /* légende : nom en blanc gras puis description en gris, sur environ deux tiers de la largeur de la carte */ .pcard__cap { margin: clamp(22px, 3vh, 34px) 0 0; padding: 0 clamp(4px, 1.1vw, 16px); max-width: 66%; font-family: var(--font-text); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.38; font-weight: 400; letter-spacing: -0.01em; color: var(--ash); user-select: none; } .pcard__cap strong { color: var(--porcelain); font-weight: 600; } /* flèches rondes en bas à droite, comme sur les pages Apple (relevé image par image sur la vidéo de référence) : disque gris foncé plein de 36 px, chevron gris clair épais ; au survol le chevron passe au blanc et le disque s'éclaircit à peine (≈ 0,15 s) ; au clic le disque fonce brièvement — sans changement de taille */ .pgal__nav { display: flex; justify-content: flex-end; gap: 18px; padding: 0 var(--edge); } .pgal__arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: rgba(235,235,240,.72); background: #2c2c2e; transition: color .15s ease-out, background-color .15s ease-out; } .pgal__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .pgal__arrow:hover:not(:disabled) { color: #fff; background: #333336; } .pgal__arrow:active:not(:disabled) { background: #232325; transition-duration: .05s; } .pgal__arrow:disabled { color: rgba(235,235,240,.28); background: #1d1d1f; } .pgal__arrow:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 3px; } @media (max-width: 700px) { .pgal { --card-h: min(70vw, 340px); } .pcard { width: min(84vw, calc(var(--card-h) * 1.25)); } .pcard--v { width: calc(var(--card-h) * 0.72); } .pgal__track { gap: 14px; } .pcard__btn { aspect-ratio: auto; height: var(--card-h); } .pcard__cap { max-width: 100%; font-size: 17px; } } /* ============ Marquee ============ */ /* épuré : une seule police, deux graisses (gras blanc / léger gris), lignes resserrées, simples pastilles */ /* bandeau plus discret et dans le thème : entre deux filets fins, bords fondus, univers en argent (même reflet que les boutons), promesse en italique serif comme les accents des titres ; il se rapproche de la section Méthode */ .marquee { position: relative; overflow: hidden; padding: clamp(28px, 5vh, 52px) 0; display: grid; gap: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee::before, .marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.12); } .marquee::before { top: 0; } .marquee::after { bottom: 0; } .marquee__row { display: flex; align-items: center; width: max-content; white-space: nowrap; will-change: transform; } .marquee__row span { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 68px); letter-spacing: -0.035em; line-height: 1.12; padding: 0 .4em .06em; background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 22%, #ffffff 40%, #c4c6ce 58%, #f5f5f7 76%, #d9d9de 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; } .marquee__row i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(245,245,247,.35); } .marquee__row--accent span { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; font-size: clamp(24px, 3vw, 46px); background: none; color: rgba(245,245,247,.5); animation: none; } .marquee__row--accent i { width: 4px; height: 4px; background: rgba(245,245,247,.25); } .marquee + .process { margin-top: -90px; } @media (max-width: 700px) { .marquee + .process { margin-top: -60px; } } /* ============ Process ============ */ /* --fade : hauteur du fondu vers le noir en haut et en bas ; le contenu reste hors de cette zone */ .process { --fade: clamp(220px, 28vh, 320px); position: relative; isolation: isolate; max-width: 1200px; margin: 0 auto; padding: var(--fade) var(--gutter); display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; } /* fond noir pleine largeur ; deux lumières douces entrent par les bords gauche et droit et glissent au scroll. Le masque les fait disparaître progressivement vers les sections voisines. */ .process__bg { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); overflow: hidden; background: var(--obsidian); pointer-events: none; -webkit-mask-image: linear-gradient(transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); mask-image: linear-gradient(transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); } .process__light { position: absolute; top: 50%; width: min(1100px, 95vw); height: 52vh; margin-top: -26vh; border-radius: 50%; filter: blur(42px); mix-blend-mode: screen; will-change: transform; } /* asymétrie : lumière gauche dans le haut de la section, lumière droite dans le bas */ .process__light--l { top: 26%; left: max(-560px, -50vw); background: radial-gradient(closest-side, rgba(236,232,255,.5), rgba(214,203,243,.2) 45%, transparent 100%); } .process__light--r { top: 76%; right: max(-560px, -50vw); background: radial-gradient(closest-side, rgba(226,240,250,.44), rgba(243,217,230,.18) 45%, transparent 100%); } .process__left { position: sticky; top: 120px; align-self: start; } /* titre imposant, dans la lignée des grands titres du site, avec l'italique serif en accent */ .process__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 6.6vw, 104px); line-height: .98; letter-spacing: -0.045em; color: var(--porcelain); text-wrap: balance; } .process__title em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.01em; font-size: 1.04em; } .process__steps { display: flex; flex-direction: column; gap: 24px; } /* cartes claires en argent blanc, sans reflets de couleur (même contraste que la carte claire des offres) ; un reflet blanc lent les traverse, décalé d'une carte à l'autre */ .step { padding: 36px; border-radius: var(--r-card); color: #1d1d1f; background: linear-gradient(100deg, #f5f5f7 0%, #e6e6ea 18%, #ffffff 34%, #d9d9de 50%, #f5f5f7 66%, #ececf0 82%, #f5f5f7 100%) 0 0 / 250% 100%; animation: shine 9s linear infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); opacity: .3; transform: scale(.97); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .step:nth-child(2) { animation-delay: -2.2s; } .step:nth-child(3) { animation-delay: -4.5s; } .step:nth-child(4) { animation-delay: -6.7s; } .step.is-active { opacity: 1; transform: none; } @media (max-width: 900px) { .step:not(.is-active) { animation-play-state: paused; } } /* contraste : les étapes 2 et 4 en noir profond, les 1 et 3 en argent blanc, détachées par une ombre */ .step:nth-child(odd) { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 60px rgba(0,0,0,.45); } /* sur fond noir, les cartes sombres gardent un fin contour clair pour se détacher */ .step:nth-child(even) { background: rgba(22,22,24,.82); animation: none; color: var(--porcelain); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .step:nth-child(even) h3 { color: var(--porcelain); } .step:nth-child(even) p { color: var(--ash); } .step:nth-child(even) .step__num { color: #a1a1a6; } .step__num { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #6e6e73; } .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: .128px; margin: 8px 0 12px; color: #1d1d1f; } .step p { color: #3a3a3f; } /* ============ Offers ============ */ .offers { padding: 0 var(--gutter) 24px; } .offers__panel { max-width: 1200px; margin: 0 auto; border-radius: var(--r-card); background: linear-gradient(#1d1d1f, #000 520px); padding: 96px clamp(16px, 4vw, 56px) 56px; } .offers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } .offer { background: var(--obsidian); padding: 36px 28px; display: flex; flex-direction: column; gap: 8px; } .offer__badge { color: var(--copper); font-size: 12px; font-weight: 600; letter-spacing: -0.12px; } .offer__name { font-family: var(--font-display); font-size: 21px; font-weight: 600; } .offer__price { font-family: var(--font-display); font-size: 48px; font-weight: 600; letter-spacing: -0.24px; line-height: 1.1; } .offer__price span { font-size: 17px; color: var(--ash); font-weight: 400; } .offer__desc { color: var(--ash); font-size: 14px; margin-bottom: 16px; } .offer ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .offer li { font-size: 14px; padding-left: 22px; position: relative; } .offer li::before { content: "✓"; position: absolute; left: 0; color: #c7c7cc; } .offer--light { background: var(--white); color: var(--carbon); } .offer--light .offer__desc, .offer--light .offer__price span { color: var(--slate); } .offer--light li::before { color: #6e6e73; } .offer--light .card__glow { background: radial-gradient(400px circle at var(--gx) var(--gy), rgba(150,135,200,.10), transparent 45%); } .offer .pill { align-self: flex-start; } /* section Offres dans le thème : plus de bleu, l'argent irisé du site à la place */ .offer .link { background: linear-gradient(100deg, #a1a1a6 0%, #c7c7cc 30%, #dccbf3 42%, #ffffff 50%, #c3e0f5 58%, #c7c7cc 70%, #a1a1a6 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } .offer .link { font-weight: 500; text-decoration: none; position: relative; align-self: flex-start; padding-bottom: 2px; } .offer .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(245,245,247,.5); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); } .offer .link:hover { text-decoration: none; } .offer .link:hover::after { transform: scaleX(1); } /* survol des cartes d'offre : la carte se soulève, un contour argenté irisé s'allume, le prix prend le reflet métal et les coches s'éclairent l'une après l'autre */ .offer { --ease-card: cubic-bezier(.22, 1, .36, 1); } .offer:hover { translate: 0 -10px; scale: 1.02; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(220,215,245,.08); } .offer::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%) 0 0 / 250% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .8s var(--ease-card); animation: shine 6s linear infinite; } .offer:hover::after { opacity: .9; } .offer--light::after { background-image: linear-gradient(100deg, #1d1d1f 0%, #6e6e78 30%, #b4b6bf 48%, #4a4458 64%, #1d1d1f 100%); } .offer__price { transition: color .6s; } .offer:hover .offer__price { background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } .offer--light:hover .offer__price { background-image: linear-gradient(100deg, #1d1d1f 0%, #4a4a52 30%, #8e8e96 48%, #2a2a30 62%, #1d1d1f 100%); } .offer li { transition: translate .6s var(--ease-card), color .5s; } .offer li::before { transition: transform .6s var(--ease-card), color .5s; } .offer:hover li { translate: 4px 0; } .offer:hover li::before { transform: scale(1.3); color: #fff; } .offer--light:hover li::before { color: #1d1d1f; } .offer li:nth-child(2), .offer li:nth-child(2)::before { transition-delay: .06s; } .offer li:nth-child(3), .offer li:nth-child(3)::before { transition-delay: .12s; } .offer li:nth-child(4), .offer li:nth-child(4)::before { transition-delay: .18s; } /* ============ Contact ============ */ /* en bas de page, la section remplit l'écran au-dessus du pied de page (~96px) ; le bouton occupe l'espace restant sous le titre et s'y centre : même écart avec le titre et avec le pied de page */ .contact { min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); padding: calc(clamp(72px, 14vh, 140px) + 7px) var(--gutter) 0; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1200px; margin: 0 auto; } .contact__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 8.4vw, 112px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 0; } .contact__form { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 40px 0; } .contact__form .pill { padding: 14px 32px; justify-content: center; } @media (min-width: 768px) { .contact__form .pill { min-width: 340px; padding: 18px 40px; font-size: 19px; } } /* Section contact en gris métallisé ; reflets argentés légèrement irisés (lilas, bleu glacier) */ .contact { --metal: #a1a1a6; } .contact .section-head__label { color: var(--metal); } .contact .grad { background-image: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%); } /* même brillance que « Seen By Monzon. » : argent irisé qui défile en boucle */ .pill--metal { color: #1d1d1f; font-weight: 500; background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%) 0 0 / 250% 100%; animation: shine 6s linear infinite; } .pill--metal:hover { filter: brightness(1.05); box-shadow: 0 10px 40px rgba(220,215,245,.22); } .pill--metal:focus-visible { outline: 2px solid var(--metal, #a1a1a6); outline-offset: 3px; } /* sur la carte d'offre blanche : même brillance qui défile, en graphite pour rester lisible */ .offer--light .pill--metal { color: #f5f5f7; background: linear-gradient(100deg, #1d1d1f 0%, #3a3a42 18%, #2b2b33 32%, #6e6e78 48%, #2a2a30 60%, #4a4458 74%, #1d1d1f 100%) 0 0 / 250% 100%; } .offer--light .pill--metal:hover { box-shadow: 0 12px 30px rgba(0,0,0,.25); } /* ============ Footer ============ */ .footer { border-top: 1px solid #161617; padding: 32px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px); } .footer__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer nav { display: flex; gap: 24px; } .footer nav a, .footer__copy { font-size: 12px; color: var(--ash); letter-spacing: -0.12px; transition: color .3s; } .footer nav a:hover { color: var(--porcelain); } /* ============ Responsive ============ */ @media (max-width: 960px) { .nav__links { display: none; } .nav__panel > .nav__cta { display: none; } .offers__grid { grid-template-columns: 1fr; } .process { --fade: 170px; grid-template-columns: 1fr; gap: 40px; } .process__left { position: relative; top: 0; } } @media (max-width: 560px) { /* téléphone : la section remplit l'écran au-dessus du pied de page (--foot-h, mesuré par main.js) pour que les offres ne soient plus visibles ; titre dans le haut, bouton centré dans l'espace restant, donc à égale distance du titre et du pied de page */ .contact { min-height: calc(100vh - var(--foot-h, 92px)); min-height: calc(100svh - var(--foot-h, 92px)); padding: clamp(120px, 23vh, 210px) var(--gutter) 0; display: grid; grid-template-rows: auto 1fr; justify-items: center; } .contact__title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.06; } .contact__form { align-self: stretch; padding: 0; } .offers { padding-bottom: 0; } .offers__panel { padding-bottom: 32px; } .step { padding: 28px 22px; } .offers__panel { padding-top: 64px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal-up, [data-split] .line > span { opacity: 1; transform: none; } .reveal-scale { clip-path: none; } } /* ============ Médias & identité ============ */ .loader__logo { width: 88px; height: 88px; object-fit: contain; animation: logoIn 1.4s var(--ease-out) both .1s; } @keyframes logoIn { from { opacity: 0; transform: scale(.92); filter: blur(8px); } } .contact { position: relative; } /* Logo tournant en fond : centré sur la jonction Offres / Contact et sur le bord droit de l'écran, donc visible à moitié ; un fondu vers la droite le fait disparaître en sortie d'écran. La rotation au scroll est posée en transform par main.js. */ main { overflow-x: clip; } /* coupe ce qui dépasse à droite sans casser les sections « sticky » */ .edge-logo { position: relative; height: 0; z-index: 2; pointer-events: none; } /* le cadre (fixe) porte le fondu ; le logo tourne à l'intérieur, avec 10 % de marge pour son léger zoom */ .edge-logo__frame { --s: min(760px, 110vw); position: absolute; top: calc(var(--s) * -0.6); right: calc(var(--s) * -0.6); width: calc(var(--s) * 1.2); height: calc(var(--s) * 1.2); display: grid; place-items: center; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%); mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%); } .contact__logo { width: calc(100% / 1.2); max-width: none; opacity: .07; } .contact > :not(.contact__logo) { position: relative; } /* ============ Lecteur projet ============ */ .modal { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; transition: visibility 0s .9s; } .modal.is-open { pointer-events: auto; visibility: visible; transition: none; } .modal__bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transition: opacity .6s var(--ease-out); } .modal.is-open .modal__bg { opacity: 1; } /* fiche projet harmonisée avec le site : fond noir, lueur argentée, typographie Apple alignée à gauche, boutons ronds gris comme les flèches de la galerie, accents en argent irisé (plus de bleu) */ .modal__panel { position: absolute; inset: 24px; border-radius: var(--r-card); background: #000; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 120px rgba(0,0,0,.6); clip-path: inset(var(--ct, 40%) var(--cr, 40%) var(--cb, 40%) var(--cl, 40%) round 28px); transition: clip-path .9s var(--ease-out); } .modal__panel::before { content: ""; position: absolute; left: 50%; top: -30vh; width: min(1100px, 100%); height: 70vh; transform: translateX(-50%); border-radius: 50%; filter: blur(60px); pointer-events: none; background: radial-gradient(closest-side, rgba(226,232,250,.12), rgba(220,203,243,.05) 55%, transparent); } .modal.is-open .modal__panel { clip-path: inset(0 0 0 0 round 28px); } .modal__scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(56px, 9vh, 96px) clamp(20px, 6vw, 96px) 64px; } .modal__close { position: absolute; top: 20px; right: 20px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: rgba(235,235,240,.72); background: #2c2c2e; transition: color .15s ease-out, background-color .15s ease-out; } .modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; } .modal__close:hover { color: #fff; background: #333336; } .modal__close:active { background: #232325; } .modal__head { max-width: 1100px; margin: 0 auto clamp(32px, 5vh, 52px); } .modal__meta { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; } .modal__head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .modal__desc { max-width: 40em; color: var(--ash); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -0.01em; margin-top: 18px; } .modal__film { max-width: 1100px; border-radius: var(--r-card); overflow: hidden; background: #0a0a0b; aspect-ratio: 16 / 9; max-height: 72vh; margin: 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .modal__film video, .modal__film iframe { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; border: 0; } .modal__film video[hidden] { display: none; } .modal__film.is-portrait { aspect-ratio: 9 / 16; height: min(78vh, 900px); max-height: none; width: auto; } /* plusieurs films verticaux : côte à côte, même hauteur, lus l'un après l'autre (projects.js) */ .modal__film.is-multi { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; aspect-ratio: auto; max-height: none; max-width: min(1100px, calc(min(78vh, 900px) * 9 / 16 * var(--n) + 16px * (var(--n) - 1))); background: none; box-shadow: none; border-radius: 0; overflow: visible; } .modal__film.is-multi video { aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: var(--r-card); background: #0a0a0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } @media (max-width: 560px) { .modal__film.is-multi { gap: 8px; } .modal__film.is-multi video { border-radius: 16px; } } .modal__yt-out { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: center / cover no-repeat; color: #fff; } .modal__yt-out::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background-color .6s; } .modal__yt-out:hover::before { background: rgba(0,0,0,.25); } /* bouton lecture : verre sombre, puis argent irisé au survol (même famille que les boutons du site) */ .modal__yt-play { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; font-size: 22px; color: #fff; background: rgba(40,40,44,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .9s cubic-bezier(.22, 1, .36, 1), color .4s; } .modal__yt-out:hover .modal__yt-play { transform: scale(1.06); color: #1d1d1f; background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%) 0 0 / 250% 100%; animation: shine 6s linear infinite; } .modal__yt-label { position: relative; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; } .modal__grid { columns: 3 280px; column-gap: 16px; max-width: 1100px; margin: clamp(16px, 2vw, 24px) auto 0; } .modal__grid img { width: 100%; margin-bottom: 16px; border-radius: 22px; break-inside: avoid; filter: grayscale(.25) brightness(.9); opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter 1s cubic-bezier(.22, 1, .36, 1); } .modal__grid img.in { opacity: 1; transform: none; } .modal__grid img:hover { filter: none; } /* invitation finale */ .modal__cta { max-width: 1100px; margin: clamp(40px, 7vh, 72px) auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .modal__cta p { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; } .modal.is-open .modal__head, .modal.is-open .modal__film { animation: modalIn 1s var(--ease-out) both .25s; } .modal.is-open .modal__film { animation-delay: .35s; } @keyframes modalIn { from { opacity: 0; transform: translateY(30px); } } body.modal-open { overflow: hidden; } @media (max-width: 560px) { .modal__panel { inset: 8px; } .modal__scroll { padding: 68px 16px 40px; } .modal__close { top: 14px; right: 14px; } .nav__logo em { display: none; } } /* ============ Pages secondaires : en-tête commun, puis formulaire de contact (contact.html) ============ */ /* La mise en page de la page contact (hero, tuiles, déroulé) est plus bas, avec les pages univers. */ .cpage { --metal: #a1a1a6; --corner: max(20px, var(--gutter)); } .cpage__top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + var(--corner)) var(--corner) 0; } .cpage__home, .cpage__top .cpage__menu, .cpage__top .cpage__back { position: relative; z-index: 5; } /* logo des pages secondaires : couleur inversée selon le fond, comme sur l'accueil */ .cpage__home { width: 40px; height: 40px; display: grid; place-items: center; mix-blend-mode: difference; } .cpage__home img { width: 40px; height: 40px; object-fit: contain; transition: transform .8s var(--ease-out); } .cpage__home:hover img { transform: rotate(-25deg) scale(1.08); } .cpage__back { font-size: 13px; color: var(--ash); letter-spacing: -0.12px; transition: color .3s; } .cpage__back span { display: inline-block; transition: transform .4s var(--ease-out); } .cpage__back:hover { color: var(--porcelain); } .cpage__back:hover span { transform: translateX(-4px); } .cform { display: grid; gap: 22px; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cfield { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; } .cfield__label { font-size: 13px; color: var(--ash); letter-spacing: -0.1px; padding: 0; } .cfield em, .cform__note em { font-style: normal; color: var(--metal); } .cfield input, .cfield textarea { width: 100%; min-width: 0; color: var(--porcelain); font: 400 17px var(--font-text); letter-spacing: -0.374px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: border-color .5s, background-color .5s; } .cfield input { height: 52px; padding: 0 20px; border-radius: 980px; } .cfield textarea { min-height: 140px; padding: 16px 20px; border-radius: 20px; resize: vertical; line-height: 1.45; } .cfield input::placeholder, .cfield textarea::placeholder { color: var(--slate); } .cfield input:focus, .cfield textarea:focus { outline: 1px solid var(--metal); outline-offset: 1px; border-color: var(--metal); background: rgba(255,255,255,.07); } .cfield [aria-invalid="true"] { border-color: #ff8a80; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; } /* mêmes pastilles que les liens « Explorer » des pages univers */ .chip span { display: inline-block; padding: 9px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: rgba(245,245,247,.85); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .5s, color .5s, box-shadow .5s; } .chip:hover span { background: rgba(255,255,255,.12); color: #fff; } .chip input:checked + span { background: var(--porcelain); color: #111; box-shadow: inset 0 0 0 1px var(--porcelain); } .chip input:focus-visible + span { outline: 2px solid var(--metal); outline-offset: 2px; } .cform__error { color: #ff8a80; font-size: 14px; } .cform__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .cform__done:focus { outline: none; } .cform__done > div { display: grid; gap: 12px; } .cform .pill:disabled { opacity: .7; cursor: progress; } .cform__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; } .cform__actions .pill { padding: 15px 34px; } .cform__note { font-size: 12px; color: var(--slate); } .cform__done { display: grid; gap: 16px; justify-items: start; color: var(--ash); font-size: 17px; line-height: 1.5; } .cform__done-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--porcelain); } .cform__done a { color: var(--porcelain); text-decoration: underline; text-underline-offset: 3px; } /* apparition au chargement */ .cpage__top { opacity: 0; transition: opacity 1s var(--ease-out); } body.is-ready .cpage__top { opacity: 1; } @media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } .cform__actions .pill { width: 100%; justify-content: center; } } /* ============ Page À propos (a-propos.html) ============ */ /* Même univers que la page contact : noir, grands titres serrés, accents serif italiques argent irisé, cartes carbone aux coins de 28px. Les emplacements photo (.apage__slot) attendent une . */ .apage { --metal: #a1a1a6; } .apage main { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } .apage .grad, .apage__lead em, .apage__vision em { background-image: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } .apage__hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--corner) + 100px) 0 clamp(60px, 10vh, 120px); } .apage__hero > * { min-width: 0; } .apage__kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-bottom: 20px; } .apage__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 9vw, 136px); line-height: .94; letter-spacing: -0.05em; } .apage__role { margin-top: 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.01em; color: var(--porcelain); } .apage__lead { margin-top: 20px; max-width: 32em; color: var(--ash); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; } .apage__lead em, .apage__vision em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; padding-right: .06em; } .apage__place { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--porcelain); padding: 9px 16px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .apage__dot { width: 7px; height: 7px; border-radius: 50%; background: #c3e0f5; box-shadow: 0 0 10px #c3e0f5; } /* emplacements photo */ .apage__slot { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #0e0e0e; aspect-ratio: 4 / 3; } .apage__slot img { width: 100%; height: 100%; object-fit: cover; } .apage__slot--portrait { aspect-ratio: 4 / 5; } .apage__slot--tall { aspect-ratio: 3 / 4; } .apage__slot-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; color: var(--slate); font-size: 13px; letter-spacing: .02em; border: 1px dashed rgba(255,255,255,.16); border-radius: inherit; background: radial-gradient(ellipse at 30% 20%, rgba(220,203,243,.08), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(195,224,245,.07), transparent 55%); } .apage__slot-empty svg { width: 34px; height: 34px; fill: none; stroke: var(--slate); stroke-width: 1.3; stroke-linejoin: round; } /* sections */ .apage__section { padding: clamp(64px, 11vh, 120px) 0; border-top: 1px solid #161617; } .apage__h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.04em; line-height: 1; margin-bottom: clamp(28px, 5vh, 48px); } .apage__story { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); } .apage__story .apage__h2 { margin-bottom: 0; } .apage__text { display: grid; gap: 20px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--ash); max-width: 38em; } .apage__text strong { color: var(--porcelain); font-weight: 500; } .apage__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #1d1d1f; border-radius: var(--r-card); overflow: hidden; } .apage__facts li { background: var(--obsidian); padding: clamp(22px, 3vw, 36px); display: grid; gap: 6px; } .apage__facts strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.04em; color: var(--porcelain); } .apage__facts span { font-size: 14px; color: var(--ash); line-height: 1.4; } .apage__skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .apage__skills li { padding: 28px; border-radius: var(--r-card); background: #0e0e0e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .5s var(--ease-out), box-shadow .4s; } .apage__skills li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .apage__num { font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; } .apage__skills h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 10px 0 8px; } .apage__skills p { font-size: 14px; color: var(--ash); line-height: 1.5; } .apage__gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; } .apage__vision { display: grid; justify-items: center; gap: 36px; text-align: center; padding-bottom: clamp(90px, 14vh, 160px); } .apage__vision blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -0.035em; max-width: 18em; text-wrap: balance; } .apage__vision .pill { padding: 16px 36px; font-size: 18px; } /* apparition au scroll */ .apage .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } .apage .reveal.is-in { opacity: 1; transform: none; } /* le bouton apparu garde l'animation de survol des boutons */ .apage .pill.reveal.is-in { transition: opacity 1s var(--ease-out), transform .9s var(--pill-ease), filter .7s ease, box-shadow .8s var(--pill-ease); transition-delay: 0s !important; } .apage .pill.reveal.is-in:hover { transform: translateY(-1.5px) scale(1.025); } @media (max-width: 900px) { .apage__hero { grid-template-columns: 1fr; min-height: 0; } .apage__slot--portrait { max-width: 460px; } .apage__story { grid-template-columns: 1fr; } .apage__facts, .apage__skills { grid-template-columns: 1fr 1fr; } .apage__gallery { grid-template-columns: 1fr 1fr; } .apage__gallery .apage__slot--tall { grid-row: span 2; } } @media (max-width: 560px) { .apage__facts, .apage__skills, .apage__gallery { grid-template-columns: 1fr; } .apage__gallery .apage__slot--tall { grid-row: auto; } } @media (prefers-reduced-motion: reduce) { .apage .reveal { opacity: 1; transform: none; } } /* ============ Pages univers (automobile, mariage, événement, business, drone) ============ */ /* Même identité que l'accueil : hero photo fondu dans le noir, titres Apple, cartes projets avec légende, tuiles à liseré qui s'allument en argent irisé, galerie désaturée qui reprend ses couleurs au survol. */ .upage, .lpage { --ease-card: cubic-bezier(.22, 1, .36, 1); --edge: max(var(--gutter), calc((100vw - 1200px) / 2)); } .upage .reveal, .lpage .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } .upage .reveal.is-in, .lpage .reveal.is-in { opacity: 1; transform: none; } .uhero { position: relative; min-height: 86vh; min-height: 86svh; display: flex; align-items: flex-end; padding: 0 var(--edge) clamp(48px, 9vh, 96px); overflow: hidden; } .uhero__media { position: absolute; inset: 0 0 -2px; z-index: -1; overflow: hidden; } .uhero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.04) brightness(.92); transform: scale(1.06); animation: uheroIn 2.4s var(--ease-out) both; } @keyframes uheroIn { from { transform: scale(1.14); opacity: 0; } } /* photo en couleurs vives ; seuls le haut (lisibilité du logo) et le bas (texte, fondu vers la page) sont assombris */ .uhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.3), transparent 22%, transparent 50%, rgba(0,0,0,.62) 76%, #000 94%); } .uhero__content { max-width: 760px; } .uhero__kicker { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin-bottom: 16px; } .uhero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 9vw, 140px); line-height: .95; letter-spacing: -0.045em; } .uhero__lead { margin-top: 22px; max-width: 34em; color: rgba(245,245,247,.78); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -0.01em; } .usec { padding: clamp(72px, 12vh, 130px) var(--edge) 0; } .usec__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.07; letter-spacing: -0.015em; margin-bottom: clamp(30px, 5.5vh, 60px); } /* projets : mêmes cartes que la galerie de l'accueil, en grille */ .ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2vw, 28px); list-style: none; margin: 0; padding: 0; } /* quatre projets : deux par ligne plutôt que trois et une carte isolée */ .ugrid:has(> .pcard:nth-child(4):last-child) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } .ugrid .pcard { width: auto; opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } .ugrid .pcard.is-in { opacity: 1; transform: none; } .ugrid .pcard__btn { aspect-ratio: 1.54; } .ugrid .pcard__cap { max-width: 100%; padding: 0 4px; } /* tuiles « ce que je propose » */ .utiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .utile, .upage .utile.reveal { position: relative; padding: 32px 28px 34px; border-radius: var(--r-card); background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), translate 1.1s var(--ease-card), scale 1.1s var(--ease-card), box-shadow 1.1s var(--ease-card), background-color 1.1s var(--ease-card); } .utile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(100deg, #f5f5f7 0%, #b4b6bf 16%, #dccbf3 30%, #c3e0f5 42%, #ffffff 51%, #f3d9e6 60%, #c4c6ce 72%, #f5f5f7 100%) 0 0 / 250% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity 1.1s var(--ease-card); animation: shine 6s linear infinite; } .utile:hover { translate: 0 -6px; scale: 1.015; background: #0e0e10; box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 30px 80px rgba(0,0,0,.55); } .utile:hover::after { opacity: .9; } .utile__num { font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--ash); } .utile h3 { transition: color 1.1s var(--ease-card); font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 1.9vw, 26px); letter-spacing: -0.02em; margin: 12px 0 10px; } .utile p { color: var(--ash); font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; } /* galerie en mosaïque */ .ugal { columns: 3 280px; column-gap: 16px; } .ugal img { width: 100%; margin-bottom: 16px; border-radius: 22px; break-inside: avoid; filter: grayscale(.3) brightness(.88); opacity: 0; transform: translateY(36px) scale(.97); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-card); } .ugal img.is-in { opacity: 1; transform: none; } .ugal img:hover { filter: none; } /* appel à l'action final */ .ucta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding-bottom: clamp(80px, 14vh, 140px); } .ucta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.02em; line-height: 1.08; } .ucta__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; } .ucta__more span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin-right: 6px; } .uchip { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 9999px; color: rgba(245,245,247,.85); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .5s, color .5s; } .uchip:hover { background: rgba(255,255,255,.12); color: #fff; } @media (max-width: 900px) { .utiles { grid-template-columns: 1fr; } } /* ============ Page contact : même trame que les pages univers ============ */ /* le studio garde son noir et blanc, juste un peu plus lumineux que sur l'accueil */ .kpage .uhero__media img { filter: grayscale(1) contrast(1.08) brightness(.8); } /* tuiles de contact direct : toute la tuile est cliquable, une flèche s'allume au survol */ .kdirect > li { min-width: 0; } .kdirect .utile { display: block; height: 100%; } .kdirect h3 { font-size: clamp(20px, 1.7vw, 24px); } .kdirect__arrow { position: absolute; top: 28px; right: 26px; width: 22px; height: 22px; fill: none; stroke: var(--ash); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity 1.1s var(--ease-card), transform 1.1s var(--ease-card), stroke 1.1s var(--ease-card); } .kdirect .utile:hover .kdirect__arrow { opacity: 1; stroke: #fff; transform: translate(3px, -3px); } /* formulaire : déroulé à gauche (fixe au scroll), panneau à droite */ .kform { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .kform__aside { position: sticky; top: 64px; } .kform__lead { max-width: 26em; margin-top: calc(-1 * clamp(10px, 2.5vh, 30px)); color: var(--ash); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; letter-spacing: -0.01em; } .ksteps { list-style: none; margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; display: grid; } .ksteps li { display: grid; grid-template-columns: 44px 1fr; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); } .ksteps__num { font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--ash); padding-top: 5px; } .ksteps h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; } .ksteps p { margin-top: 4px; color: var(--ash); font-size: 15px; line-height: 1.45; } .kform__panel { border-radius: var(--r-card); padding: clamp(24px, 3.6vw, 44px); background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); } .kpage .ucta { padding-top: clamp(96px, 16vh, 170px); } @media (max-width: 900px) { .kform { grid-template-columns: 1fr; } .kform__aside { position: static; } } @media (max-width: 560px) { .kform__panel { padding: 22px 18px 26px; } } /* ============ Pages légales et 404 ============ */ .lmain { max-width: calc(820px + var(--gutter) * 2); margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + clamp(120px, 18vh, 180px)) var(--gutter) clamp(80px, 12vh, 120px); } .lhead { margin-bottom: clamp(40px, 7vh, 72px); } .lhead__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -0.04em; } .lhead__lead { margin-top: 20px; max-width: 36em; color: var(--ash); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; } .lsec { padding: 32px 0; border-top: 1px solid rgba(255,255,255,.08); } .lsec h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -0.02em; margin-bottom: 14px; } .lsec p, .lsec li { color: var(--ash); font-size: 17px; line-height: 1.6; } .lsec p + p, .lsec p + ul, .lsec ul + p { margin-top: 12px; } .lsec ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; } .lsec strong { color: var(--porcelain); font-weight: 600; } .lsec a { color: var(--porcelain); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; } /* champs à compléter, bien visibles */ .todo { color: #f5f5f7; background: rgba(220,203,243,.12); box-shadow: inset 0 0 0 1px rgba(220,203,243,.4); border-radius: 6px; padding: 1px 6px; } .nmain { min-height: 82vh; min-height: 82svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--edge) 80px; } .ntitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 11vw, 168px); line-height: .95; letter-spacing: -0.05em; } .ntitle em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.01em; padding: 0 .08em .1em 0; background: linear-gradient(100deg, #86868b 0%, #86868b 38%, #e8e8ed 48%, #ffffff 50%, #e8e8ed 52%, #86868b 62%, #86868b 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } .nactions { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .nlink { color: var(--ash); font-size: 17px; transition: color .4s; } .nlink:hover { color: var(--porcelain); } .footer__legal a { font-size: 12px; color: var(--ash); letter-spacing: -0.12px; transition: color .3s; } .footer__legal a:hover { color: var(--porcelain); } /* Pied de page sur téléphone : très compact, en longueur et aligné à gauche — signature et réseaux sur la première ligne, informations légales puis copyright dessous */ @media (max-width: 700px) { .footer { padding: 14px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 12px); } .footer__inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .footer .nav__logo { font-size: 13px; gap: 6px; } .footer .nav__logo img { width: 18px; height: 18px; } .footer nav { flex-wrap: wrap; gap: 4px 14px; } .footer nav:not(.footer__legal) a { font-size: 12px; color: rgba(245,245,247,.82); } .footer__legal a { font-size: 10.5px; } .footer__copy { flex-basis: 100%; font-size: 10px; color: var(--slate); } /* bas des pages univers : « Explorer aussi » sur sa propre ligne, au-dessus des pastilles */ .ucta__more span { flex-basis: 100%; text-align: center; margin: 0 0 4px; } } @media (prefers-reduced-motion: reduce) { .upage .reveal, .lpage .reveal, .ugal img, .ugrid .pcard { opacity: 1; transform: none; } }