/* =========================================================
maellebaglin.fr — style.css
Tokens, reset, layout, components, animations.
Light mode default. Dark mode via [data-theme="dark"] on .
========================================================= */
:root {
--c-bg: #f8f8f8;
--c-bg-rgb: 248, 248, 248;
--c-surface: #ffffff;
--c-text: #0a0a0a;
--c-text-mute: #5a5a5a;
--c-accent: #0000ff;
--c-line: rgba(10, 10, 10, 0.12);
--font-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 6rem;
--space-7: 9rem;
--max-w: 1440px;
--gutter: clamp(1.5rem, 4vw, 3rem);
--t-fast: 200ms ease;
--t-mid: 300ms ease;
--t-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] {
--c-bg: #0a0a0a;
--c-bg-rgb: 10, 10, 10;
--c-surface: #1a1a1a;
--c-text: #f8f8f8;
--c-text-mute: #a8a8a8;
--c-accent: #0000ff;
--c-line: rgba(248, 248, 248, 0.12);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
font-weight: 300;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--t-mid), color var(--t-mid);
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }
/* ---------- Typography ---------- */
h1, h2 {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.04em;
text-transform: uppercase;
}
h3, h4 {
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(3rem, 13vw, 12rem); }
h2 { font-size: clamp(2rem, 6vw, 4.5rem); line-height: 0.95; }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.label {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--c-text-mute);
}
.section-num {
font-family: var(--font-display);
font-size: clamp(8rem, 22vw, 20rem);
line-height: 0.9;
color: var(--c-accent);
opacity: 0.08;
position: absolute;
z-index: 0;
pointer-events: none;
user-select: none;
}
/* ---------- Layout helpers ---------- */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
}
.skip-link:focus {
left: var(--gutter);
top: var(--gutter);
z-index: 1000;
padding: 0.75rem 1rem;
background: var(--c-accent);
color: var(--c-bg);
}
/* ---------- Navbar ---------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding: var(--space-2) 0;
background: transparent;
transition: background var(--t-mid), border-color var(--t-mid), padding var(--t-mid);
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
background: color-mix(in oklab, var(--c-surface) 88%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: var(--c-line);
padding: var(--space-1) 0;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.nav__brand {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nav__list {
display: flex;
gap: var(--space-3);
}
.nav__link {
position: relative;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--c-text-mute);
transition: color var(--t-fast);
}
.nav__link:hover { color: var(--c-text); }
.nav__link::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: -6px;
height: 1px;
background: var(--c-accent);
transition: right var(--t-mid);
}
.nav__link:hover::after,
.nav__link.is-active::after { right: 0; }
.nav__link.is-active { color: var(--c-text); }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--c-line);
display: grid;
place-items: center;
transition: border-color var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover { border-color: var(--c-accent); transform: rotate(20deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.nav__burger { display: none; }
/* When the page opens on a dark hero section, force the nav to white before scroll. */
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .nav__brand,
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .nav__link.is-active { color: #ffffff; }
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.7); }
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .nav__link:hover { color: #ffffff; }
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .theme-toggle { color: #ffffff; border-color: rgba(255, 255, 255, 0.25); }
body:has(main > .section--dark:first-child) .nav:not(.is-scrolled) .nav__burger span { background: #ffffff; }
/* Menu mobile ouvert — comportement universel pour toutes les pages :
panneau opaque (var(--c-bg)) + tous les textes/icônes en bleu pour
garantir la lisibilité quel que soit le fond derrière. */
.nav.is-open,
.nav.is-open.is-scrolled {
background: var(--c-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
}
.nav.is-open .nav__list {
background: var(--c-bg);
border-left-color: transparent;
}
.nav.is-open .nav__link,
.nav.is-open .nav__link.is-active,
.nav.is-open .nav__brand {
color: #0000ff !important;
}
.nav.is-open .nav__link::after { background: #0000ff; }
.nav.is-open .nav__burger span { background: #0000ff !important; }
.nav.is-open .theme-toggle {
color: #0000ff !important;
border-color: rgba(0, 0, 255, 0.35) !important;
}
/* Case-study hero: solid night-blue header with white type before any scroll;
the existing .nav.is-scrolled rule takes back over once the user scrolls. */
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) {
background: transparent;
border-bottom-color: transparent;
}
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) .nav__brand,
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) .nav__link.is-active { color: #ffffff; }
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.72); }
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) .nav__link:hover { color: #ffffff; }
body:has(main > .case-hero:first-child) .nav:not(.is-scrolled) .theme-toggle {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.25);
}
/* Atelier hero: solid black header with white type before any scroll. */
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) {
background: #0a0a0a;
border-bottom-color: transparent;
}
/* Remove the hairline separators between sections on the atelier page. */
body:has(main > .atelier-hero:first-child) .section {
border-top: 0;
}
/* Contact page — black background everywhere + no separators */
body:has(.contact-cards) {
background: #0a0a0a;
color: #f8f8f8;
}
body:has(.contact-cards) .section { border-top: 0; }
body:has(.contact-cards) .closing { border-top: 0; }
body:has(.contact-cards) .footer { border-top: 0; }
body:has(.contact-cards) .contact-card .flip-card__face--front {
background: #ffffff;
border-color: rgba(255, 255, 255, 0.18);
}
body:has(.contact-cards) .contact-card__icon { color: #0a0a0a; }
body:has(.contact-cards) .contact-card .flip-card__face--back {
background: #0000ff;
border-color: rgba(255, 255, 255, 0.18);
}
body:has(.contact-cards) .contact-card__title { color: rgba(255, 255, 255, 0.7); }
body:has(.contact-cards) .contact-card__value { color: #ffffff; }
body:has(.contact-cards) .contact-card__value:hover { color: rgba(255, 255, 255, 0.75); }
body:has(.contact-cards) .contact-title {
color: #ffffff;
text-align: center;
max-width: none;
justify-self: center;
}
body:has(.contact-cards) .page-intro {
text-align: center;
justify-items: center;
padding-bottom: var(--space-4);
}
body:has(.contact-cards) #liens { padding-top: var(--space-3); }
/* The white .nav title and theme-toggle become visible on the dark bg */
body:has(.contact-cards) .nav:not(.is-scrolled) .nav__brand,
body:has(.contact-cards) .nav:not(.is-scrolled) .nav__link.is-active { color: #ffffff; }
body:has(.contact-cards) .nav:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.72); }
body:has(.contact-cards) .nav:not(.is-scrolled) .nav__link:hover { color: #ffffff; }
body:has(.contact-cards) .nav:not(.is-scrolled) .theme-toggle {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.25);
}
/* No separator between Charte graphique (#charte) and Direction visuelle (#affiches). */
#charte + .section { border-top: 0; }
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) .nav__brand,
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) .nav__link.is-active { color: #ffffff; }
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.72); }
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) .nav__link:hover { color: #ffffff; }
body:has(main > .atelier-hero:first-child) .nav:not(.is-scrolled) .theme-toggle {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.25);
}
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 100svh;
overflow: hidden;
}
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
background: var(--c-surface);
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 35%;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 60%, rgba(248, 248, 248, 0.85) 100%),
linear-gradient(105deg, rgba(248, 248, 248, 0.85) 0%, rgba(248, 248, 248, 0.4) 55%, rgba(248, 248, 248, 0.15) 85%);
}
[data-theme="dark"] .hero__media::after {
background:
linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, 0.85) 100%),
linear-gradient(105deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.4) 55%, rgba(10, 10, 10, 0.15) 85%);
}
.hero__inner {
position: relative;
z-index: 1;
min-height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
padding-top: var(--space-7);
padding-bottom: var(--space-4);
}
.hero__content {
align-self: center;
display: grid;
gap: var(--space-3);
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: var(--space-2);
}
.hero__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--c-accent);
}
.hero__title {
font-weight: 400;
letter-spacing: -0.05em;
}
.hero__title .word {
display: inline-block;
margin-right: 0.18em;
white-space: nowrap;
}
.hero__title .char {
display: inline-block;
transform: translateY(110%);
opacity: 0;
transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero.is-ready .hero__title .char {
transform: translateY(0);
opacity: 1;
}
.hero__sub {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
font-size: clamp(1.1rem, 2.2vw, 1.75rem);
line-height: 1.3;
color: var(--c-accent);
max-width: 32ch;
opacity: 0;
transform: translateY(20px);
transition: opacity var(--t-slow), transform var(--t-slow);
transition-delay: 600ms;
}
.hero.is-ready .hero__sub {
opacity: 1;
transform: none;
}
.hero__meta {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--c-text-mute);
opacity: 0;
transition: opacity var(--t-slow);
transition-delay: 900ms;
}
.hero.is-ready .hero__meta { opacity: 1; }
.hero__scroll {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--c-text-mute);
opacity: 0;
transition: opacity var(--t-slow);
transition-delay: 1200ms;
}
.hero.is-ready .hero__scroll { opacity: 1; }
.hero__scroll::after {
content: "";
width: 1px;
height: 48px;
background: var(--c-accent);
animation: scroll-pulse 2.4s ease-in-out infinite;
transform-origin: top;
}
@keyframes scroll-pulse {
0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ---------- Tease section (post-hero) ---------- */
.tease {
padding: var(--space-7) clamp(2rem, 6vw, 5rem);
position: relative;
border-top: 1px solid var(--c-line);
}
/* No separator between the timeline section and the tease that follows it. */
.section--timeline + .tease { border-top: 0; }
.tease__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: end;
}
.tease__quote {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
font-size: clamp(1.15rem, 2.2vw, 1.875rem);
line-height: 1.35;
max-width: 28ch;
text-wrap: balance;
hyphens: auto;
}
.tease__next {
justify-self: end;
display: grid;
gap: var(--space-1);
text-align: right;
}
.tease__next-label { color: var(--c-text-mute); }
.tease__next-link {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.4vw, 2rem);
text-transform: uppercase;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: gap var(--t-mid), color var(--t-mid);
}
.tease__next-link:hover { gap: 1.5rem; color: var(--c-accent); }
.tease__next-link::after {
content: "→";
font-family: var(--font-sans);
font-style: normal;
font-size: 0.8em;
}
/* ---------- Footer ---------- */
.footer {
padding: var(--space-4) 0 var(--space-3);
border-top: 1px solid var(--c-line);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--c-text-mute);
}
.footer__inner {
display: flex;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
/* ---------- Reveal-on-scroll ---------- */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero__title .char { transform: none; opacity: 1; }
.hero__sub, .hero__meta, .hero__scroll { opacity: 1; transform: none; }
.reveal { opacity: 1; transform: none; }
}
/* ---------- Section / prose / agences ---------- */
.section {
position: relative;
padding: var(--space-7) 0;
border-top: 1px solid var(--c-line);
}
.section--dark {
--c-bg: #0a0a0a;
--c-surface: #161616;
--c-text: #f8f8f8;
--c-text-mute: #a8a8a8;
--c-accent: #0000ff;
--c-line: rgba(248, 248, 248, 0.12);
background: var(--c-bg);
color: var(--c-text);
}
/* WebGL particle field — atmospheric layer behind the gallery cards */
.particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.particles canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
.gallery__sticky > .gallery__scene,
.gallery__sticky > .gallery__hud {
z-index: 1;
}
.section--dark .container,
.section--dark .gallery-cue {
position: relative;
z-index: 1;
}
.section__inner {
display: grid;
gap: var(--space-5);
position: relative;
}
.section__head {
display: grid;
gap: var(--space-2);
align-content: start;
}
.section__head--center {
justify-items: center;
text-align: center;
}
#pourquoi .section__inner {
grid-template-columns: 1fr;
}
#pourquoi .prose {
display: block;
max-width: none;
column-count: 2;
column-gap: var(--space-5);
column-rule: 1px solid var(--c-line);
}
#pourquoi .prose p {
break-inside: avoid;
margin: 0 0 1.1em 0;
}
#pourquoi .prose p:last-child {
margin-bottom: 0;
}
.section__inner--single {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
align-items: start;
}
.section__inner--stacked {
grid-template-columns: 1fr;
justify-items: center;
}
/* Dual-row — two equal columns aligned at the top */
.dual-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: start;
position: relative;
}
.dual-row__col {
position: relative;
display: grid;
gap: var(--space-4);
align-content: start;
min-width: 0;
}
.dual-row__col .section-num {
top: -0.15em;
left: -0.05em;
}
.dual-row .charte-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.dual-row--charte-mood .moodboard {
grid-template-columns: repeat(2, 1fr);
}
.prose {
display: grid;
gap: 1.1em;
max-width: 56ch;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.65;
color: var(--c-text-mute);
}
.prose em {
color: var(--c-text);
font-style: normal;
font-weight: 500;
}
.prose--small {
font-size: 0.9rem;
margin-top: var(--space-4);
max-width: 64ch;
}
.agences {
display: grid;
border-top: 1px solid var(--c-line);
margin-top: var(--space-3);
}
.agence {
display: grid;
grid-template-columns: 64px 1fr;
align-items: baseline;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--c-line);
transition: padding-left var(--t-mid), color var(--t-mid);
}
.agence:hover {
padding-left: var(--space-2);
color: var(--c-accent);
}
.agence__num { align-self: center; }
.agence__name {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4.5vw, 3.5rem);
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1;
}
/* ---------- Atelier hero — centered white title on black, full viewport ---------- */
.atelier-hero {
position: relative;
height: 100vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #0a0a0a;
}
.atelier-hero__inner {
width: 100%;
text-align: center;
}
.atelier-hero__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.2rem, 9vw, 8rem);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0;
white-space: nowrap;
color: #ffffff;
}
/* ---------- Page intro (À propos, etc.) ---------- */
.page-intro {
padding-top: calc(var(--space-7) + var(--space-5));
padding-bottom: var(--space-6);
display: grid;
gap: var(--space-3);
}
.page-intro__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 7vw, 6.5rem);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
display: grid;
gap: 0.05em;
max-width: 18ch;
}
.page-intro__title span { display: block; }
.page-intro__title span:last-child {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
font-size: clamp(1rem, 2vw, 1.5rem);
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--c-accent);
margin-top: var(--space-2);
max-width: 28ch;
}
/* ---------- Case study hero — sticky photo across two scroll pages,
title on page 1, concept/campagne overlaid on page 2 ---------- */
.case-hero {
position: relative;
height: 250vh; /* compact hero: 3 close pages + credit */
background: #082645;
isolation: isolate;
}
.case-hero__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
z-index: 0;
}
.case-hero__bg {
position: absolute;
inset: 0;
background-image: url('../assets/images/etudes-de-cas/decors-nuit.jpg');
background-size: cover;
background-position: center var(--bg-pos-y, 0%); /* 0% = sky on top, 100% = water at bottom */
background-repeat: no-repeat;
background-color: #082645;
z-index: 0;
transition: background-position 0.08s linear;
will-change: background-position;
}
/* Soft radial vignette anchors the title against the photo without fully
darkening it — Exo Ape-style "the photo's still the hero" feel. */
.case-hero__vignette {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 55%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.18) 55%,
rgba(0, 0, 0, 0.55) 100%),
linear-gradient(to bottom,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 0) 65%,
rgba(0, 0, 0, 0.30) 100%);
}
/* Filmic grain overlay — inline SVG fractal noise, scaled and screened over
the photo for a subtle organic texture. */
.case-hero__grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.18;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* Discreet scroll cue at the bottom — a small label centred. */
.case-hero__cue {
position: absolute;
left: 0;
right: 0;
bottom: clamp(1.4rem, 3vh, 2.4rem);
z-index: 4;
text-align: center;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
pointer-events: none;
animation: case-hero-cue 2.6s ease-in-out infinite;
}
@keyframes case-hero-cue {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(4px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.case-hero__bg,
.case-hero__cue { animation: none !important; }
}
/* Each scroll page is positioned absolutely on top of the sticky bg. */
.case-hero__page {
position: absolute;
left: 0;
right: 0;
height: 100vh;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
transform: translate3d(0, var(--page-pan, 0px), 0);
transition: transform 0.08s linear;
will-change: transform;
}
.case-hero__page--title { top: 0; justify-content: center; }
.case-hero__page--concept { top: 100vh; justify-content: center; }
.case-hero__page--campagne { top: 160vh; justify-content: flex-start; padding-top: clamp(2rem, 4vh, 4rem); }
/* Concept stays on the left; Campagne aligns to the right of the container. */
.case-hero__col {
width: min(100%, 520px);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.case-hero__col--left { margin-right: auto; }
.case-hero__col--right { margin-left: auto; }
.case-hero__col .section__head { gap: 0.2em; }
.case-hero__col .prose { line-height: 1.45; }
.case-hero__col .prose p { margin-bottom: 0.35em; }
.case-hero__col .prose p:last-child { margin-bottom: 0; }
/* Yann Arthus-Bertrand credit — appears once, after the campagne block,
scrolls naturally with the section (no sticky behaviour). */
.case-hero__credit {
position: absolute;
top: 230vh;
left: 0;
right: 0;
z-index: 4;
margin: 0;
padding: 0 var(--gutter);
text-align: center;
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.case-hero__inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
}
.case-hero__inner .label { color: #ffffff; }
.case-hero__inner .status-tag {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.6);
}
.case-hero__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.4rem, 7.5vw, 6.4rem);
line-height: 0.95;
letter-spacing: -0.03em;
text-transform: uppercase;
display: grid;
gap: 0.05em;
margin: 0;
max-width: 18ch;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.case-hero__title span { display: block; }
/* Concept and Campagne pages — white type so they read on the photo. */
.case-hero__page--concept,
.case-hero__page--campagne { color: #ffffff; }
.case-hero__page--concept .label,
.case-hero__page--campagne .label { color: rgba(255, 255, 255, 0.78); }
.case-hero__page--concept .prose,
.case-hero__page--campagne .prose { color: rgba(255, 255, 255, 0.92); }
.case-hero__page--concept em,
.case-hero__page--campagne em { font-style: italic; color: #ffffff; }
.case-hero__page--concept h2,
.case-hero__page--campagne h2 { color: #ffffff; }
@media (max-width: 700px) {
/* On garde la mécanique sticky/parallax desktop sur mobile.
On augmente juste la hauteur pour que les blocs de texte aient le temps
d'apparaître séparément (texte plus haut quand il wrap sur mobile). */
.case-hero { height: 320vh; }
.case-hero__page--concept { top: 110vh; }
.case-hero__page--campagne { top: 220vh; padding-top: 0; }
.case-hero__credit { top: 305vh; }
}
/* Keep the hero sharp — exclude it from the global section-edge blur. */
main > .case-hero {
animation: none !important;
filter: none !important;
}
/* ---------- Portrait (À propos hero) ---------- */
.portrait {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
position: relative;
}
.portrait__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--c-surface);
}
.portrait__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 35%;
}
.portrait__text {
display: grid;
gap: var(--space-2);
align-content: start;
padding-top: var(--space-3);
}
/* ---------- About — title above, photo wrapped by flowing text ---------- */
.section--about {
padding-top: var(--space-7);
}
.about__head {
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-5);
position: relative;
z-index: 1;
}
/* Book — closed cover with title + landscape photo, opens to a 2-page spread */
.book {
position: relative;
width: clamp(400px, 92%, 1000px);
aspect-ratio: 1.6 / 1;
margin: 0 auto;
perspective: 2400px;
perspective-origin: 50% 35%;
cursor: pointer;
user-select: none;
}
/* Deep drop shadow under the book — anchors it on the floor */
.book::before {
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom: -4%;
height: 8%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
filter: blur(14px);
z-index: 0;
}
/* Page-stack effect — gives the book its thickness on the right edge & bottom.
Multiple offset layers below the pages simulate the foredge of the paper block. */
.book::after {
content: "";
position: absolute;
inset: 0;
border-radius: 2px;
z-index: 0;
background: #fafaf6;
box-shadow:
/* foredge & bottom edge — sheaf of paper */
2px 1px 0 #f3f1ea,
4px 2px 0 #ecebe4,
6px 3px 0 #e6e4dd,
8px 4px 0 #dfddd5,
10px 5px 0 #d8d6cd,
/* outer shadow under the stack to give weight */
14px 10px 26px -6px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.book__pages {
position: absolute;
inset: 0;
background-color: #ffffff;
/* Very subtle paper grain — keeps the page white, hints at fibres */
background-image:
url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
box-shadow:
0 30px 70px -8px rgba(0, 0, 0, 0.45),
0 12px 24px -8px rgba(0, 0, 0, 0.25);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.book__pages::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
/* Highlight + glossy paper reflections */
radial-gradient(ellipse 70% 50% at 25% -8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
radial-gradient(ellipse 90% 40% at 70% 108%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 62%),
/* Gutter shadow along the blue inner spine — gives the binding its depth */
linear-gradient(to right,
rgba(0, 0, 0, 0.32) 0%,
rgba(0, 0, 0, 0.22) 2%,
rgba(0, 0, 0, 0.12) 4.5%,
rgba(0, 0, 0, 0) 7.5%),
/* Soft inner shadows along the outer edges — like real pages curling down */
radial-gradient(ellipse at 100% 50%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 8%),
radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 6%),
radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 6%);
mix-blend-mode: normal;
}
.book__pages::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: clamp(10px, 1.6%, 20px);
background: #0000ff;
z-index: 2;
}
.book__page {
position: absolute;
inset: 0;
padding: clamp(1.6rem, 4%, 2.8rem) clamp(2rem, 5%, 3.2rem) clamp(2.2rem, 5%, 3rem) clamp(3rem, 6%, 4.4rem);
color: #2a2218;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease;
z-index: 1;
}
.book__page.is-current {
opacity: 1;
visibility: visible;
z-index: 2;
}
.book__page-title {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.8vw, 1.6rem);
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 400;
color: #0a0a0a;
margin: 0 0 clamp(1rem, 2.4vw, 1.8rem) 0;
}
.book__page-text {
flex: 1;
font-size: clamp(0.72rem, 0.85vw, 0.86rem);
line-height: 1.55;
text-align: justify;
hyphens: auto;
column-count: 2;
column-gap: clamp(1.4rem, 3vw, 2.4rem);
column-fill: balance;
}
.book__page-text p {
margin: 0 0 0.65em 0;
break-inside: avoid;
}
.book__page-text p:last-child {
margin-bottom: 0;
}
.book__page-photo {
margin: 0 0 clamp(0.8rem, 1.6%, 1.2rem) 0;
width: 55%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #f0e8d8;
break-inside: avoid;
}
.book__page-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Desktop : page unique avec photo + tout le texte en 2 colonnes (layout d'origine) */
.book__page--full {
opacity: 1;
visibility: visible;
z-index: 2;
}
.book__page--full .book__page-photo {
width: 100%;
aspect-ratio: 3 / 2;
margin: 0 0 0.8em 0;
}
.book__page--full .book__page-text {
column-count: 2;
column-fill: balance;
}
/* Layouts spécifiques aux pages paginées — mobile uniquement */
@media (max-width: 700px) {
/* Page 1 — photo à gauche, texte à droite (override par le bloc mobile plus bas en stack vertical) */
.book__page[data-book-page="1"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
grid-template-rows: auto 1fr;
column-gap: clamp(1.2rem, 3%, 2.4rem);
}
.book__page[data-book-page="1"] .book__page-title {
grid-column: 1 / -1;
}
.book__page[data-book-page="1"] .book__page-photo {
width: 100%;
height: 100%;
aspect-ratio: auto;
margin: 0;
align-self: center;
}
.book__page[data-book-page="1"] .book__page-text {
column-count: 1;
align-self: center;
}
/* Pages 2 & 3 — titre + texte centrés verticalement comme un bloc, 1 colonne */
.book__page[data-book-page="2"],
.book__page[data-book-page="3"] {
justify-content: center;
}
.book__page[data-book-page="2"] .book__page-title,
.book__page[data-book-page="3"] .book__page-title {
margin: 0 auto 0.6rem auto;
max-width: 82%;
width: 100%;
}
.book__page[data-book-page="2"] .book__page-text,
.book__page[data-book-page="3"] .book__page-text {
flex: none;
column-count: 1;
max-width: 82%;
margin: 0 auto;
}
}
.book__pagination {
position: absolute;
bottom: clamp(0.8rem, 2%, 1.4rem);
right: clamp(1.4rem, 3%, 2.2rem);
font-family: var(--font-display);
font-size: clamp(0.7rem, 0.9vw, 0.85rem);
letter-spacing: 0.2em;
color: #5a4a30;
}
.book__cover {
position: absolute;
inset: 0;
transform-origin: left center;
transform-style: preserve-3d;
transition: transform 1.8s cubic-bezier(0.83, 0, 0.17, 1);
z-index: 2;
}
.book__cover-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.book__cover-face--front {
background-color: #ffffff;
/* Fine linen-style fabric grain — fractal noise with a slight horizontal
bias (baseFrequency='3 1.2') to mimic thread direction, low opacity for subtle effect */
background-image:
url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.2rem, 3vw, 2.4rem);
padding: clamp(1.8rem, 5%, 3.5rem);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.book__cover-face--front::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: clamp(14px, 2.4%, 28px); /* slightly thicker blue spine */
background: #0000ff;
}
.book__cover-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.6vw, 3.2rem);
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 0.95;
color: #0a0a0a;
margin: 0;
text-align: center;
}
.book__cover-photo {
width: min(80%, 560px);
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #f0e8d8;
}
.book__cover-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.book__cover-face--back {
background: #ffffff;
transform: rotateY(180deg);
}
.book__cover-hint {
position: absolute;
bottom: clamp(1.2rem, 4%, 2.2rem);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: clamp(0.65rem, 0.85vw, 0.78rem);
letter-spacing: 0.32em;
text-transform: uppercase;
color: #5a4a30;
white-space: nowrap;
opacity: 0.75;
animation: book-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes book-hint-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.95; }
}
.book.is-open .book__cover {
transform: rotateY(-176deg);
}
/* Page navigation — arrows pinned bottom-center of the spread */
.book__nav {
position: absolute;
bottom: clamp(0.6rem, 1.6%, 1.1rem);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 4;
pointer-events: auto;
}
.book__nav-btn {
width: clamp(28px, 3vw, 36px);
height: clamp(28px, 3vw, 36px);
border-radius: 50%;
border: 1px solid rgba(10, 10, 10, 0.18);
background: rgba(255, 255, 255, 0.9);
color: #2a2218;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.book__nav-btn:hover:not(:disabled) {
background: #0000ff;
color: #fff;
border-color: #0000ff;
}
.book__nav-btn:disabled {
opacity: 0.3;
cursor: default;
}
.book__nav-btn svg {
width: 60%;
height: 60%;
}
/* Desktop : afficher uniquement la page unique, cacher pages paginées + nav */
@media (min-width: 701px) {
.book__page[data-book-page] { display: none; }
.book__nav { display: none; }
}
/* Mobile : cacher la page desktop unique */
@media (max-width: 700px) {
.book__page--full { display: none; }
}
@media (max-width: 700px) {
.book { aspect-ratio: 0.78 / 1; width: 92%; }
.book__page { padding: 1.2rem 1rem 2.6rem 1.6rem; }
.book__page-title { font-size: 1rem; margin-bottom: 0.8rem; }
.book__page-text { font-size: 0.82rem; column-count: 1; line-height: 1.5; }
.book__page-photo { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 0.6em; }
.book__pagination { bottom: 0.6rem; right: 1rem; font-size: 0.65rem; }
.book__cover-title { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.book__cover-hint { bottom: 0.6rem; }
.book__nav-btn { width: 34px; height: 34px; }
/* Page 1 — repasser en stack vertical sur mobile */
.book__page[data-book-page="1"] {
display: flex;
}
.book__page[data-book-page="1"] .book__page-photo {
height: auto;
aspect-ratio: 4 / 3;
}
.book__page[data-book-page="1"] .book__page-text {
column-count: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.book__cover { transition: none; }
}
/* Gallery cue — centered "Scrollez" above the walkthrough */
.gallery-cue {
display: block;
text-align: center;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
color: var(--c-text-mute);
margin: 0 auto var(--space-3);
}
/* ---------- Louvre — click-driven card stack ---------- */
.section--louvre {
padding: var(--space-5) 0 var(--space-7);
border-top: 0;
}
.louvre {
position: relative;
}
.louvre__pin {
position: relative;
display: flex;
align-items: center;
}
.louvre__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: var(--space-6);
align-items: center;
width: 100%;
}
.louvre__media {
position: relative;
margin: 0 auto;
width: min(100%, 320px);
aspect-ratio: 9 / 19.5;
max-height: 82vh;
}
.louvre__stack {
position: absolute;
inset: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.louvre__stack:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 8px;
border-radius: 4px;
}
.louvre__counter {
position: absolute;
top: -1.6rem;
right: 0;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-mute);
font-weight: 500;
z-index: 10;
}
.louvre__counter strong {
font-weight: 600;
color: var(--c-text);
}
.louvre__hint {
font-size: 0.85rem;
color: var(--c-text-mute);
font-style: italic;
margin-top: calc(-1 * var(--space-1));
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.louvre__hint::before {
content: "→";
font-style: normal;
color: var(--c-accent);
font-weight: 600;
}
.louvre__card {
position: absolute;
inset: 0;
margin: 0;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1),
opacity 0.5s ease,
filter 0.5s ease;
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.louvre__card img {
width: 92%;
height: 92%;
margin: auto;
position: absolute;
inset: 0;
object-fit: contain;
display: block;
}
.louvre__stack[data-active="0"] .louvre__card[data-step="0"] { transform: translateY(0) rotate(0); z-index: 3; opacity: 1; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__stack[data-active="0"] .louvre__card[data-step="1"] { transform: translateY(22px) scale(0.94) rotate(2.5deg); z-index: 2; opacity: 0.85; filter: drop-shadow(0 25px 35px rgba(0,0,0,0.4)) brightness(0.78); }
.louvre__stack[data-active="0"] .louvre__card[data-step="2"] { transform: translateY(44px) scale(0.88) rotate(-2.5deg); z-index: 1; opacity: 0.6; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.35)) brightness(0.55); }
.louvre__stack[data-active="1"] .louvre__card[data-step="0"] { transform: translateY(-115%) rotate(-9deg); z-index: 4; opacity: 0; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__stack[data-active="1"] .louvre__card[data-step="1"] { transform: translateY(0) rotate(0); z-index: 3; opacity: 1; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__stack[data-active="1"] .louvre__card[data-step="2"] { transform: translateY(22px) scale(0.94) rotate(2.5deg); z-index: 2; opacity: 0.85; filter: drop-shadow(0 25px 35px rgba(0,0,0,0.4)) brightness(0.78); }
.louvre__stack[data-active="2"] .louvre__card[data-step="0"] { transform: translateY(-115%) rotate(-9deg); z-index: 4; opacity: 0; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__stack[data-active="2"] .louvre__card[data-step="1"] { transform: translateY(-115%) rotate(-9deg); z-index: 4; opacity: 0; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__stack[data-active="2"] .louvre__card[data-step="2"] { transform: translateY(0) rotate(0); z-index: 3; opacity: 1; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.5)); }
.louvre__status {
position: absolute;
left: 50%;
bottom: -1.4rem;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.55em 0.95em;
background: rgba(10, 10, 10, 0.82);
color: #fff;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
white-space: nowrap;
z-index: 10;
margin: 0;
}
.louvre__status::before {
content: "";
width: 7px;
height: 7px;
background: #f5b342;
border-radius: 999px;
flex: none;
box-shadow: 0 0 0 4px rgba(245, 179, 66, 0.18);
animation: louvreStatusPulse 1.8s ease-in-out infinite;
}
@keyframes louvreStatusPulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(245, 179, 66, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(245, 179, 66, 0.06); }
}
.louvre__text {
position: relative;
display: grid;
gap: var(--space-3);
align-content: center;
max-width: 56ch;
}
.louvre__text .section-num {
top: -0.6em;
}
@media (max-width: 900px) {
.louvre__inner { grid-template-columns: 1fr; gap: var(--space-5); }
.louvre__media { width: min(100%, 300px); max-height: none; }
.louvre__status { bottom: -1.6rem; }
.louvre__counter { position: relative; top: auto; right: auto; text-align: center; display: block; margin-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
.louvre__card { transition: none; }
.louvre__status::before { animation: none; }
}
/* ---------- References (Mon univers) ---------- */
.references {
display: grid;
margin-top: var(--space-3);
border-top: 1px solid var(--c-line);
}
.reference {
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--c-line);
align-items: start;
}
.reference__num {
align-self: start;
padding-top: 0.4em;
}
.reference__body {
display: grid;
gap: var(--space-1);
}
.reference__name {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3.5vw, 2.75rem);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.reference__role {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--c-text-mute);
margin-top: var(--space-1);
}
.reference__quote {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.5;
color: var(--c-accent);
max-width: 56ch;
margin-top: var(--space-2);
}
.reference__quote em {
color: var(--c-text-mute);
font-style: normal;
}
a.reference__name {
display: inline-block;
transition: color var(--t-fast), transform var(--t-fast);
}
a.reference__name:hover {
color: var(--c-accent);
transform: translateX(8px);
}
/* Section transition blur — sections soften at the edges of the viewport
and resolve sharp once centered. Skipped on scroll-jacked sections
(timeline, atelier gallery) where the user is held in place. */
@supports (animation-timeline: view()) {
main > section:not(.section--timeline):not(#realisations):not(.section--moodboard):not(.case-hero):not(.page-intro) {
animation: section-edge-blur linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
will-change: filter;
}
}
@keyframes section-edge-blur {
0% { filter: blur(3px); }
20% { filter: blur(0); }
80% { filter: blur(0); }
100% { filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) {
main > section { animation: none !important; filter: none !important; }
}
/* Sur mobile : pas de flou de transition entre sections (inconfortable au scroll rapide). */
@media (max-width: 700px) {
main > section { animation: none !important; filter: none !important; will-change: auto !important; }
/* Animation reveal plus courte et plus discrète sur mobile pour éviter le smear visuel pendant le scroll. */
.reveal {
transform: translateY(14px);
transition-duration: 380ms;
}
.hero__title .char,
.hero__sub,
.hero__meta {
transition-duration: 400ms !important;
}
}
/* Timeline — horizontal-scroll-jacked CV strip */
.section--timeline {
position: relative;
height: calc(100vh + 220vh);
padding: 0;
background: var(--c-bg);
border-top: 0;
}
.timeline-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.timeline-head {
padding-top: var(--space-6);
padding-bottom: var(--space-3);
display: grid;
gap: var(--space-1);
position: relative;
z-index: 2;
}
.timeline-head h2 {
margin: 0;
}
.timeline-cue {
color: var(--c-text-mute);
letter-spacing: 0.32em;
margin-top: var(--space-1);
}
.timeline-stage {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.timeline-line {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 10px;
background: #0000ff;
z-index: 0;
pointer-events: none;
}
.timeline-track {
position: relative;
flex: 1;
display: flex;
align-items: stretch;
gap: clamp(2rem, 4vw, 4rem);
padding: 0 8vw var(--space-5);
will-change: transform;
z-index: 1;
}
.timeline-item {
position: relative;
flex: 0 0 clamp(280px, 26vw, 380px);
height: 100%;
z-index: 1;
}
.timeline-item::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: #0000ff;
outline: 5px solid var(--c-bg);
transition: transform 0.4s ease;
z-index: 2;
}
.timeline-item--current::before {
box-shadow: 0 0 0 6px rgba(0, 0, 255, 0.18);
}
.timeline-item.is-open::before {
transform: translateY(-50%) scale(1.35);
}
.timeline-item__inner {
position: absolute;
left: 0;
right: 0;
}
/* odd cards (1st, 3rd, 5th, 7th) → BELOW the line */
.timeline-item:nth-child(odd) .timeline-item__inner {
top: calc(50% + 3rem);
display: flex;
flex-direction: column;
}
/* even cards (2nd, 4th, 6th, 8th) → ABOVE the line */
.timeline-item:nth-child(even) .timeline-item__inner {
bottom: calc(50% + 3rem);
display: flex;
flex-direction: column;
}
.timeline-item__date {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-text-mute);
margin-bottom: var(--space-2);
}
.timeline-item__title {
font-size: clamp(1.05rem, 1.35vw, 1.45rem);
line-height: 1.2;
margin: 0;
letter-spacing: -0.01em;
}
.timeline-item__type {
display: inline-block;
margin-top: 0.4em;
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--c-text-mute);
opacity: 0.7;
}
.timeline-item__company {
font-size: clamp(0.85rem, 1vw, 1rem);
color: var(--c-text-mute);
margin: 0.2em 0 var(--space-3) 0;
font-style: italic;
}
.timeline-item__details {
list-style: none;
padding: 0;
margin: 0;
font-size: clamp(0.78rem, 0.88vw, 0.86rem);
line-height: 1.55;
color: var(--c-text);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.7s cubic-bezier(0.83, 0, 0.17, 1),
opacity 0.45s ease,
margin-top 0.5s ease;
}
.timeline-item.is-open .timeline-item__details {
max-height: 600px;
opacity: 1;
margin-top: var(--space-1);
}
.timeline-item__details li {
position: relative;
padding-left: 1.2em;
margin-bottom: 0.45em;
transform: translateY(8px);
opacity: 0;
transition: transform 0.45s ease, opacity 0.45s ease;
}
.timeline-item.is-open .timeline-item__details li {
transform: translateY(0);
opacity: 1;
}
.timeline-item.is-open .timeline-item__details li:nth-child(1) { transition-delay: 0.10s; }
.timeline-item.is-open .timeline-item__details li:nth-child(2) { transition-delay: 0.18s; }
.timeline-item.is-open .timeline-item__details li:nth-child(3) { transition-delay: 0.26s; }
.timeline-item.is-open .timeline-item__details li:nth-child(4) { transition-delay: 0.34s; }
.timeline-item.is-open .timeline-item__details li:nth-child(5) { transition-delay: 0.42s; }
.timeline-item.is-open .timeline-item__details li:nth-child(6) { transition-delay: 0.50s; }
.timeline-item__details li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #0000ff;
}
.timeline-item__details li:last-child {
margin-bottom: 0;
}
.timeline-item__title {
transition: color 0.3s ease;
}
.timeline-item.is-open .timeline-item__title {
color: var(--c-text);
}
@media (max-width: 700px) {
.section--timeline { height: auto; }
.timeline-sticky { position: static; height: auto; overflow: visible; }
.timeline-stage { padding: 0; }
/* Ligne verticale à gauche au lieu de la ligne horizontale */
.timeline-line {
left: 18px; right: auto;
top: 0; bottom: 0;
transform: none;
width: 2px;
height: auto;
}
.timeline-track {
flex-direction: column;
align-items: stretch;
padding: var(--space-3) var(--space-3) var(--space-5) 0;
gap: var(--space-4);
transform: none !important;
}
/* Chaque item dans le flux normal, padding gauche pour la ligne + pastille */
.timeline-item {
flex: 0 0 auto;
height: auto;
padding-left: 44px;
}
/* Pastille alignée en haut à gauche de chaque item */
.timeline-item::before {
top: 8px;
left: 8px;
transform: none;
width: 18px;
height: 18px;
outline-width: 4px;
}
.timeline-item.is-open::before {
transform: scale(1.3);
}
/* Le contenu n'est plus en position absolute, il flow normalement */
.timeline-item__inner,
.timeline-item:nth-child(odd) .timeline-item__inner,
.timeline-item:nth-child(even) .timeline-item__inner {
position: static;
top: auto;
bottom: auto;
left: auto;
right: auto;
display: block;
}
.timeline-item__date { font-size: 0.7rem; margin-bottom: 0.4rem; }
.timeline-item__title { font-size: 1.05rem; }
.timeline-item__company { font-size: 0.85rem; margin-bottom: 0.6rem; }
.timeline-item__details { font-size: 0.82rem; }
}
/* Univers — vertical photo grid (3 per row), sized to stay visible in viewport */
.univers-grid {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: clamp(0.5rem, 1vw, 1rem);
max-height: min(78vh, 820px);
aspect-ratio: 9 / 8;
width: min(100%, calc(78vh * 9 / 8));
}
.univers-grid__item {
position: relative;
background: transparent;
min-height: 0;
perspective: 1200px;
}
.flip-card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.83, 0, 0.17, 1);
}
.univers-grid__item:hover .flip-card,
.univers-grid__item:focus-within .flip-card {
transform: rotateY(180deg);
}
.flip-card__face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
background: var(--c-surface);
}
.flip-card__face--front img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.flip-card__face--back {
transform: rotateY(180deg);
background: #0a0a0a;
color: #f8f8f8;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(0.9rem, 2vw, 1.6rem);
}
.flip-card__name {
font-family: var(--font-display);
font-size: clamp(0.78rem, 1vw, 0.95rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 0.7em 0;
}
.flip-card__text {
font-size: clamp(0.66rem, 0.78vw, 0.78rem);
line-height: 1.5;
color: rgba(248, 248, 248, 0.85);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.flip-card { transition: none; }
}
@media (max-width: 700px) {
.univers-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
aspect-ratio: auto;
max-height: none;
width: 100%;
}
.univers-grid__item {
aspect-ratio: 3 / 5;
}
.flip-card__face--back {
justify-content: center;
overflow-y: auto;
padding: 1rem 0.9rem;
}
.flip-card__text {
font-size: 0.8rem;
line-height: 1.5;
}
}
/* Contact cards — flip on hover (front = icon, back = label + value) */
.contact-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.8rem, 1.6vw, 1.6rem);
}
.contact-card {
position: relative;
aspect-ratio: 3 / 4;
perspective: 1200px;
}
.contact-card:hover .flip-card,
.contact-card:focus-within .flip-card,
.contact-card.is-flipped .flip-card {
transform: rotateY(180deg);
}
.contact-card .flip-card__face {
border: 1px solid var(--c-line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(1.2rem, 2vw, 1.8rem);
background: var(--c-surface);
gap: clamp(0.4rem, 1vw, 0.8rem);
text-align: center;
}
/* Front: icon only, large + centred */
.contact-card .flip-card__face--front {
align-items: center;
justify-content: center;
}
.contact-card__icon {
width: clamp(2.8rem, 5vw, 4rem);
height: clamp(2.8rem, 5vw, 4rem);
color: var(--c-text);
}
/* Back: title + value stacked */
.contact-card__title {
font-family: var(--font-display);
font-size: clamp(0.8rem, 1.2vw, 1rem);
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
.contact-card .flip-card__face--back {
transform: rotateY(180deg);
background: #0a0a0a;
color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.contact-card__value {
font-family: var(--font-sans);
font-size: clamp(0.95rem, 1.3vw, 1.15rem);
letter-spacing: 0.02em;
color: #ffffff;
text-decoration: none;
word-break: break-word;
transition: color var(--t-fast);
}
.contact-card__value:hover {
color: var(--c-accent);
}
@media (max-width: 900px) {
.contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.contact-cards { grid-template-columns: 1fr; }
.contact-card { aspect-ratio: 4 / 3; }
}
.reference--progress .reference__role {
color: var(--c-accent);
}
/* ---------- Status tag (Études de cas) ---------- */
.status-tag {
display: inline-block;
margin-top: var(--space-2);
padding: 0.45em 0.9em;
border: 1px solid var(--c-line);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--c-text-mute);
width: fit-content;
}
/* ---------- Gallery 3D walkthrough (Atelier — Réalisations) ---------- */
.gallery {
--side-x: 360px;
position: relative;
width: 100%;
height: 800vh;
margin-top: var(--space-4);
}
.gallery__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
perspective: 1400px;
perspective-origin: 50% 45%;
background:
radial-gradient(ellipse at 50% 65%, rgba(0, 0, 255, 0.05) 0%, transparent 60%),
var(--c-bg);
}
.gallery__scene {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: translateZ(var(--travel, 0px));
will-change: transform;
}
.gallery-card {
position: absolute;
top: 50%;
left: 50%;
width: clamp(340px, 32vw, 480px);
margin: 0;
display: grid;
grid-template-rows: auto auto;
gap: var(--space-2);
background: transparent;
transform-style: preserve-3d;
transform:
translate(-50%, -50%)
translate3d(var(--x, 0), 0, var(--z, 0))
rotateY(var(--rotation, 0));
transition: opacity 250ms ease-out;
will-change: opacity;
pointer-events: none;
}
.gallery-card[data-side="left"] { --x: calc(var(--side-x) * -1); }
.gallery-card[data-side="right"] { --x: var(--side-x); }
.gallery-card__media {
aspect-ratio: 3 / 4;
background: var(--c-surface);
border: 1px solid var(--c-line);
display: grid;
place-items: center;
overflow: hidden;
box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.7);
}
.gallery-card__media img,
.gallery-card__media video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.gallery-card--photo .gallery-card__media img {
object-fit: cover;
object-position: center 45%;
}
.gallery-card--concert .gallery-card__media img {
object-position: center bottom !important;
}
.gallery-card--concert .gallery-card__media {
border: 0;
background: transparent;
box-shadow: none;
}
.gallery-card--video .gallery-card__media video {
object-fit: cover;
background: #000;
}
.gallery-card__meta {
display: grid;
gap: 4px;
text-align: center;
padding: 0 2px;
}
.gallery-card__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.95rem, 1.4vw, 1.2rem);
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1;
color: var(--c-text);
}
.gallery-card__role {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--c-text-mute);
}
.gallery__hud {
position: absolute;
bottom: var(--space-4);
left: 0;
right: 0;
z-index: 10;
text-align: center;
display: grid;
gap: var(--space-1);
pointer-events: none;
}
.gallery__counter {
font-family: var(--font-sans);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--c-text-mute);
font-variant-numeric: tabular-nums;
}
.gallery__hint {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.32em;
color: var(--c-text-mute);
opacity: 0.55;
}
@media (max-width: 800px) {
.gallery {
--side-x: 180px;
height: 660vh;
}
.gallery__sticky { perspective: 1000px; }
.gallery-card { width: clamp(240px, 66vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
.gallery { height: auto; }
.gallery__sticky {
position: static;
height: auto;
padding: var(--space-4) 0;
perspective: none;
overflow: visible;
background: none;
}
.gallery__scene {
position: static;
transform: none;
transform-style: flat;
display: grid;
gap: var(--space-4);
}
.gallery-card {
position: relative;
top: auto;
left: auto;
width: 100%;
max-width: 380px;
margin: 0 auto;
transform: none;
opacity: 1 !important;
}
.gallery__hud { display: none; }
}
/* ---------- Figma frame (Atelier — Prototype) ---------- */
.figma-frame {
margin: var(--space-4) 0 0;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.5);
}
.figma-frame__bar {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 10px var(--space-2);
background: color-mix(in oklab, var(--c-bg) 90%, transparent);
border-bottom: 1px solid var(--c-line);
}
.figma-frame__dot {
width: 11px;
height: 11px;
border-radius: 50%;
display: inline-block;
}
.figma-frame__dot:nth-child(1) { background: #ff5f57; }
.figma-frame__dot:nth-child(2) { background: #febc2e; }
.figma-frame__dot:nth-child(3) { background: #28c840; }
.figma-frame__title {
margin-left: var(--space-2);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--c-text-mute);
}
.figma-frame__viewport {
position: relative;
aspect-ratio: 16 / 10;
background: var(--c-surface);
}
.figma-frame__viewport iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.figma-frame__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: var(--space-3);
gap: var(--space-1);
color: var(--c-text-mute);
}
.figma-frame__hint {
font-size: 0.85rem;
}
/* ---------- Film frame (Atelier — vidéo Filtrée) ---------- */
.film-frame {
margin: 0;
width: 100%;
background: var(--c-surface);
border: 1px solid var(--c-line);
overflow: hidden;
border-radius: 4px;
aspect-ratio: 4 / 3;
}
.film-frame video,
.film-frame iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
}
/* ---------- Podcast frame (Atelier — Baglin Maëlle) ---------- */
.podcast-frame {
margin: 0;
width: 100%;
display: grid;
grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 6px;
}
.podcast-frame__cover {
position: relative;
aspect-ratio: 1;
background:
radial-gradient(ellipse at 30% 25%, rgba(0, 0, 255, 0.18), transparent 55%),
linear-gradient(135deg, #1a1a1a 0%, #2a2218 50%, #0f0d0a 100%);
border-radius: 4px;
overflow: hidden;
display: grid;
place-items: center;
}
.podcast-frame__waves {
display: flex;
gap: 6px;
align-items: center;
height: 40%;
}
.podcast-frame__waves span {
display: block;
width: 4px;
background: var(--c-accent);
border-radius: 2px;
animation: podcast-wave 1.4s ease-in-out infinite;
opacity: 0.85;
}
.podcast-frame__waves span:nth-child(1) { height: 30%; animation-delay: 0s; }
.podcast-frame__waves span:nth-child(2) { height: 55%; animation-delay: 0.12s; }
.podcast-frame__waves span:nth-child(3) { height: 80%; animation-delay: 0.24s; }
.podcast-frame__waves span:nth-child(4) { height: 45%; animation-delay: 0.36s; }
.podcast-frame__waves span:nth-child(5) { height: 70%; animation-delay: 0.48s; }
.podcast-frame__waves span:nth-child(6) { height: 95%; animation-delay: 0.18s; }
.podcast-frame__waves span:nth-child(7) { height: 40%; animation-delay: 0.06s; }
.podcast-frame__waves span:nth-child(8) { height: 65%; animation-delay: 0.42s; }
.podcast-frame__waves span:nth-child(9) { height: 50%; animation-delay: 0.30s; }
.podcast-frame__waves span:nth-child(10) { height: 75%; animation-delay: 0.20s; }
@keyframes podcast-wave {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(1.2); }
}
.podcast-frame__body {
display: grid;
gap: var(--space-2);
min-width: 0;
}
.podcast-frame__eyebrow {
margin: 0;
}
.podcast-frame__title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 2rem);
text-transform: uppercase;
letter-spacing: -0.02em;
margin: 0;
}
.podcast-frame__player {
width: 100%;
margin-top: var(--space-1);
}
@media (max-width: 700px) {
.podcast-frame {
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-3);
}
.podcast-frame__cover {
max-width: 240px;
margin: 0 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.podcast-frame__waves span { animation: none; transform: scaleY(0.7); }
}
/* ---------- Coulisses (Atelier — encadré démarche vibe coding) ---------- */
.section--coulisses {
padding: var(--space-5) 0 var(--space-6);
}
.coulisses-card {
max-width: 760px;
margin: var(--space-3) auto 0;
padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
border: 1px solid #000000;
border-radius: 4px;
background: #000000;
}
.coulisses-card p {
font-size: 0.92rem;
line-height: 1.65;
color: #ffffff;
margin: 0 0 0.9em 0;
}
.coulisses-card p:last-child { margin-bottom: 0; }
.coulisses-card em {
font-style: italic;
color: #ffffff;
}
@media (max-width: 700px) {
.coulisses-card { padding: 1.2rem 1.1rem; }
.coulisses-card p { font-size: 0.88rem; }
}
/* ---------- Logo loop (Atelier — outils favoris) ---------- */
.section--logos {
padding: var(--space-3) 0 var(--space-5);
border-top: 0;
}
.logos__title {
text-align: center;
margin: 0 0 var(--space-2);
color: var(--c-text-mute);
}
.logos__divider {
border: 0;
height: 1px;
background: var(--c-line);
margin: 0;
width: 100%;
}
.logo-loop {
width: 100%;
overflow: hidden;
position: relative;
padding: var(--space-1) 0;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-loop__track {
display: flex;
align-items: center;
gap: clamp(2.5rem, 5vw, 4.5rem);
width: max-content;
animation: logo-loop-anim 32s linear infinite;
}
.logo-loop:hover .logo-loop__track {
animation-play-state: paused;
}
.logo-loop__item {
flex-shrink: 0;
display: grid;
place-items: center;
height: 64px;
}
.logo-loop__item img {
height: 56px;
width: auto;
display: block;
filter: brightness(0);
opacity: 0.7;
transition: opacity var(--t-fast), transform var(--t-fast);
}
[data-theme="dark"] .logo-loop__item img {
filter: brightness(0) invert(0.92);
opacity: 0.75;
}
.logo-loop__item:hover img {
opacity: 1;
transform: scale(1.08);
}
@keyframes logo-loop-anim {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-loop__track { animation: none; }
}
@media (max-width: 700px) {
.logo-loop__item { height: 48px; }
.logo-loop__item img { height: 40px; }
}
/* ---------- Closing (Contact) ---------- */
.closing {
padding: var(--space-7) 0;
display: grid;
gap: var(--space-3);
text-align: center;
border-top: 1px solid var(--c-line);
}
.closing__quote {
font-family: var(--font-display);
font-size: clamp(2rem, 7vw, 6rem);
line-height: 1;
letter-spacing: -0.04em;
text-transform: uppercase;
}
.closing__signature {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
color: var(--c-accent);
}
/* ---------- Case gallery (Études de cas) ---------- */
.case-gallery {
margin-top: var(--space-5);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.case-photo {
display: grid;
gap: var(--space-1);
}
.case-photo--hero {
grid-column: 1 / -1;
}
.case-photo img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--c-surface);
border: 1px solid var(--c-line);
display: block;
}
.case-photo--hero img { aspect-ratio: 16 / 9; }
.case-photo__caption {
color: var(--c-text-mute);
padding-top: var(--space-1);
}
@media (max-width: 700px) {
.case-gallery { grid-template-columns: 1fr; }
}
/* ---------- Case study (deep) ---------- */
.case-study .container { display: grid; }
.case-block {
margin-top: var(--space-6);
display: grid;
gap: var(--space-3);
position: relative;
}
.case-block__num {
color: var(--c-text-mute);
}
.case-block__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.status-tag--alert {
border-color: var(--c-accent);
color: var(--c-accent);
}
/* Charte sub-sections */
.charte-section {
margin-top: var(--space-4);
display: grid;
gap: var(--space-3);
}
.charte-eyebrow {
border-bottom: 1px solid var(--c-line);
padding-bottom: var(--space-1);
}
/* Charte 2-col grid — equal-height columns */
.charte-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7); /* breathe between palette & typo columns */
align-items: stretch;
margin-top: var(--space-5);
}
.charte-grid .charte-section {
margin-top: 0;
display: flex;
flex-direction: column;
gap: var(--space-4); /* breathe between eyebrow and content */
}
.charte-grid .palette--stack,
.charte-grid .type-specimens {
flex: 1;
align-content: space-between;
}
/* Palette */
.palette {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-2);
}
.palette--stack {
grid-template-columns: 1fr;
gap: var(--space-3); /* roomier between swatches */
}
.swatch {
display: grid;
gap: var(--space-1);
}
.swatch--row {
grid-template-columns: 80px 1fr;
align-items: center;
gap: var(--space-3);
}
.swatch__chip {
display: block;
aspect-ratio: 1;
background: var(--swatch-color);
border: 1px solid var(--c-line);
}
.swatch--row .swatch__chip {
width: 80px;
height: 80px;
}
.swatch__chip--bordered {
border-color: var(--c-text-mute);
}
.swatch__meta {
display: grid;
gap: 3px;
padding-top: var(--space-1);
}
.swatch--row .swatch__meta {
padding-top: 0;
}
.swatch__name {
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.swatch__hex {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.75rem;
color: var(--c-accent);
}
.swatch__role {
font-size: 0.7rem;
color: var(--c-text-mute);
}
/* Type specimens */
.type-specimens {
display: grid;
gap: var(--space-5); /* more air between specimens */
}
.specimen {
padding-top: var(--space-4);
display: grid;
gap: var(--space-2);
}
.specimen__sample {
margin: var(--space-1) 0;
}
.specimen--serif {
font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
font-weight: 500;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.1;
}
.specimen--italic {
font-family: "Libre Baskerville", "Baskerville", "Times New Roman", serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.3;
}
.specimen--sans {
font-family: "Jost", "Futura", "Gill Sans", sans-serif;
font-weight: 300;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
line-height: 1.5;
letter-spacing: 0.02em;
max-width: 60ch;
}
.specimen__meta {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--c-text-mute);
}
/* Textures */
.textures {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.texture {
display: grid;
gap: var(--space-1);
}
.texture__sample {
display: block;
aspect-ratio: 1;
border: 1px solid var(--c-line);
}
.texture--silt .texture__sample {
background:
radial-gradient(circle at 22% 28%, rgba(255,255,255,0.05) 0%, transparent 55%),
radial-gradient(circle at 78% 72%, rgba(255,255,255,0.04) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 70%),
#1a1a1a;
}
.texture--verre .texture__sample {
background: linear-gradient(135deg,
rgba(217,217,217,0.5) 0%,
rgba(255,255,255,0.95) 35%,
rgba(13,61,46,0.4) 75%,
rgba(10,31,51,0.6) 100%);
}
.texture--papier .texture__sample {
background:
radial-gradient(circle at 30% 30%, rgba(0,0,0,0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(0,0,0,0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 25%, rgba(0,0,0,0.03) 0%, transparent 40%),
#e8dcc8;
}
.texture__meta {
display: grid;
gap: 3px;
padding-top: var(--space-1);
}
.texture__name {
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.texture__role {
font-size: 0.7rem;
color: var(--c-text-mute);
}
/* Moodboard — sticky zoom-immersive gallery (Exo Ape style).
The grid starts compact and scales up dramatically as the user scrolls,
creating a "diving into the moodboard" effect. */
.section--moodboard {
position: relative;
height: 200vh; /* animation fills the screen by 100vh, then 100vh of glide to charte */
padding: 0;
background: var(--c-bg);
border-top: 0;
}
.moodboard-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.moodboard-stage__head {
position: absolute;
top: clamp(var(--space-5), 12vh, var(--space-6));
left: 0;
right: 0;
text-align: center;
z-index: 2;
pointer-events: none;
display: grid;
gap: var(--space-1);
justify-items: center;
opacity: var(--mood-head-opacity, 1);
transition: opacity 0.12s linear;
}
.moodboard-stage__head h2 { margin: 0; }
/* Mosaic-to-3D walkthrough. At scroll 0, all photos sit at Z=0 — flat
collage. As scroll progresses, peripheral photos translate forward
(proportional to their distance from centre) AND the camera advances,
zooming onto the lotus until it fills the screen. */
.moodboard-grid {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: translateZ(var(--mood-travel, 0px));
will-change: transform;
}
.moodboard-grid__item {
position: absolute;
top: 50%;
left: 50%;
width: var(--w, 200px);
height: var(--h, 200px);
margin: 0;
background: var(--c-surface);
overflow: hidden;
border-radius: 2px;
box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.4);
transform-style: preserve-3d;
transform:
translate(-50%, -50%)
translate3d(
calc(var(--init-x, 0px) + (var(--target-x, 0px) - var(--init-x, 0px)) * var(--mood-progress, 0)),
calc(var(--init-y, 0px) + (var(--target-y, 0px) - var(--init-y, 0px)) * var(--mood-progress, 0)),
var(--photo-z, 0px)
)
rotate(calc(var(--rot, 0deg) * (1 - var(--mood-progress, 0))));
transition: opacity 200ms ease-out;
will-change: transform, opacity;
}
.moodboard-grid__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.moodboard-grid__item--lotus {
z-index: 5;
box-shadow: 0 40px 100px -10px rgba(0, 0, 0, 0.55);
}
.moodboard-grid__item--lotus img {
transform: none;
}
.moodboard-grid__item--lotus {
/* Centre photo starts tiny (hidden behind the pile) and grows to full size */
transform:
translate(-50%, -50%)
translate3d(
calc(var(--init-x, 0px) + (var(--target-x, 0px) - var(--init-x, 0px)) * var(--mood-progress, 0)),
calc(var(--init-y, 0px) + (var(--target-y, 0px) - var(--init-y, 0px)) * var(--mood-progress, 0)),
var(--photo-z, 0px)
)
scale(var(--mood-progress, 0));
}
.moodboard-grid__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* L'animation 3D du moodboard s'applique aussi sur mobile (pas d'override). */
@media (prefers-reduced-motion: reduce) {
.moodboard-grid { transform: none !important; }
}
/* Affiches */
.affiches {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.8rem, 2vw, 2rem);
width: 100%;
justify-items: center;
}
.affiche {
margin: 0;
background: transparent;
border: 0;
overflow: hidden;
width: 100%;
max-width: min(46vh, 540px); /* size driven by viewport height so it stays on one page */
aspect-ratio: 1200 / 1660; /* matches the cropped files — identical box for both */
}
.affiche img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Brand content section — title + the two visuals fit in a single viewport. */
#affiches {
min-height: 100vh;
padding: var(--space-5) 0 var(--space-4);
display: flex;
align-items: center;
}
#affiches .section__inner {
max-width: min(1240px, 94vw);
margin: 0 auto;
display: grid;
gap: var(--space-6); /* roomier breath between title and visuals */
width: 100%;
}
@media (max-width: 1100px) {
.palette:not(.palette--stack) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.charte-grid { grid-template-columns: 1fr; }
.dual-row { grid-template-columns: 1fr; gap: var(--space-5); }
.dual-row--charte-mood .moodboard { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.palette:not(.palette--stack) { grid-template-columns: repeat(2, 1fr); }
.moodboard { grid-template-columns: 1fr; }
.dual-row--charte-mood .moodboard { grid-template-columns: 1fr; }
.moodboard__item--anchor { aspect-ratio: 4 / 3; }
.affiches { grid-template-columns: 1fr; }
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.nav__list {
position: fixed;
inset: 0;
background: var(--c-bg);
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
transform: translateX(100%);
transition: transform var(--t-mid);
border-left: 1px solid var(--c-line);
}
.nav.is-open .nav__list { transform: none; }
.nav__link { font-size: 1rem; }
.nav__burger {
display: grid;
place-items: center;
width: 36px;
height: 36px;
z-index: 110;
}
.nav__burger span {
display: block;
width: 22px;
height: 1px;
background: var(--c-text);
transition: transform var(--t-mid), opacity var(--t-mid);
}
.nav__burger span + span { margin-top: 5px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
.tease { padding: var(--space-5) clamp(1.5rem, 5vw, 3rem) var(--space-4); }
.tease__grid { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.tease__quote { max-width: 100%; }
.tease__next { justify-self: start; text-align: left; }
.tease__next-link { font-size: clamp(1.25rem, 5vw, 1.75rem); }
#pourquoi .section__inner { grid-template-columns: 1fr; gap: var(--space-3); }
#pourquoi .prose { column-count: 1; }
.section__inner--single { grid-template-columns: 1fr; gap: var(--space-3); }
.agence { grid-template-columns: 48px 1fr; }
.portrait { grid-template-columns: 1fr; gap: var(--space-4); }
.portrait__text { padding-top: 0; }
.reference { grid-template-columns: 48px 1fr; gap: var(--space-2); }
}