@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "La Belle Aurore"; src: url(fonts/la-belle-aurore-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

/* Deux ambiances : claire pour le contenu, sombre pour la fin de page (data-tone posé par main.js) */
html { --bg:#f7f4ee; --ink:#1d1a17; --muted:color-mix(in srgb, var(--ink) 68%, transparent); --line:color-mix(in srgb, var(--ink) 16%, transparent); --accent:#a8492a; }
html[data-tone="night"]  { --bg:#141110; --ink:#efe7db; --accent:#e39a6c; }
html[data-theme="dark"]                     { --bg:#171411; --ink:#ece6dc; --accent:#e39a6c; }
html[data-theme="dark"][data-tone="night"]  { --bg:#0b0a09; }

* { box-sizing: border-box; }
/* Chaque section a son propre fond, fixe : plus de changement de couleur au défilement */
section:not(.hero)[data-tone="day"], section:not(.hero)[data-tone="night"] { background: var(--bg); color: var(--ink); }
section:not(.hero)[data-tone="day"] { --bg:#f7f4ee; --ink:#1d1a17; --accent:#a8492a; --muted:color-mix(in srgb, #1d1a17 68%, transparent); --line:color-mix(in srgb, #1d1a17 16%, transparent); }
section:not(.hero)[data-tone="night"] { --bg:#141110; --ink:#efe7db; --accent:#e39a6c; --muted:color-mix(in srgb, #efe7db 68%, transparent); --line:color-mix(in srgb, #efe7db 16%, transparent); }
html[data-theme="dark"] section:not(.hero)[data-tone="day"] { --bg:#171411; --ink:#ece6dc; --accent:#e39a6c; --muted:color-mix(in srgb, #ece6dc 68%, transparent); --line:color-mix(in srgb, #ece6dc 16%, transparent); }
html[data-theme="dark"] section:not(.hero)[data-tone="night"] { --bg:#0b0a09; --ink:#ece6dc; --muted:color-mix(in srgb, #ece6dc 68%, transparent); --line:color-mix(in srgb, #ece6dc 16%, transparent); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section[id] { scroll-margin-top: 4rem; }
html { background: var(--bg); color: var(--ink); transition: background-color .9s ease, color .9s ease; scroll-behavior: smooth; }
body { margin: 0; font: 400 1.0625rem/1.6 "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .brand, .display, blockquote { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
h2 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; margin: 0 0 .4em; }
h3 { font-size: 1.9rem; line-height: 1.1; margin: 0 0 .3em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:root { --gut: max(1.5rem, calc((100vw - 1200px) / 2)); } /* même marge pour le menu, l'accueil et le contenu */
@media (min-width: 1800px) { html { font-size: 112.5%; } :root { --gut: max(1.5rem, calc((100vw - 1320px) / 2)); } }
.wrap { width: min(1200px, 100% - 3rem); margin-inline: auto; }
@media (min-width: 1800px) { .wrap { width: 1320px; } }
section { padding: clamp(6rem, 14vw, 12rem) 0; }
.contact { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--bg); padding: .5rem 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn { display: inline-block; padding: .9em 1.6em; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; transition: transform .2s, background-color .9s, color .9s; }
.btn:hover { transform: translateY(-2px); }
.btn.small { padding: .55em 1.1em; font-size: .9rem; }

/* En-tête */
.top { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 1.5rem; padding: 1rem var(--gut); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px); transition: background-color .5s, color .5s; }
.brand { font-family: "La Belle Aurore", cursive; font-size: 1.9rem; line-height: 1; text-decoration: none; margin-right: auto; }
.top nav { display: flex; gap: 1.5rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--ink); }
.top nav a:not(.nav-contact) { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: .2rem; transition: color .3s, background-size .45s cubic-bezier(.2,.7,.2,1); }
.top nav a:not(.nav-contact):hover, .top nav a:not(.nav-contact):focus-visible { background-size: 100% 1px; }

@media (min-width: 761px) { .top nav a.nav-contact { display: none; } } /* sur ordinateur, le bouton « Faire une demande » suffit */
.theme { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; }
.theme span { width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.5px solid var(--ink); }

/* Ouverture façon cinéma */
.letterbox i { position: fixed; left: 0; right: 0; height: 50vh; background: #000; z-index: 50; transition: height .9s cubic-bezier(.7,0,.2,1) .1s; }
.no-intro .letterbox { display: none; }
.letterbox i:first-child { top: 0; } .letterbox i:last-child { bottom: 0; }
.ready .letterbox i { height: 0; }

/* Accueil : en défilant, la vidéo se resserre en écran de cinéma (--p posé par main.js) */
.hero { position: relative; height: 150vh; padding: 0; color: #f3eee6; }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: end; background: radial-gradient(ellipse at 30% 20%, #6b5446, #1d1a17 70%); clip-path: inset(calc(var(--p, 0) * 16%) calc(var(--p, 0) * 10%) round calc(var(--p, 0) * 18px)); will-change: clip-path; }
.hero-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,7,.78), rgba(12,9,7,.35) 45%, rgba(12,9,7,0) 70%), linear-gradient(to right, rgba(12,9,7,.45), rgba(12,9,7,0) 65%), linear-gradient(to bottom, rgba(12,9,7,.4), rgba(12,9,7,0) 18%); pointer-events: none; }
.hero-text { text-shadow: 0 1px 24px rgba(0,0,0,.25); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: relative; z-index: 1; padding: 0 var(--gut) clamp(3rem, 8vw, 6rem); width: 100%; }
.hero-text > * { max-width: 40rem; }
.hero-text > h1 { max-width: none; }
.hero h1 { margin: 0; display: flex; flex-direction: column-reverse; }
.display { display: block; font-size: clamp(1.6rem, 7.2vw, 5.6rem); line-height: 1.02; white-space: nowrap; } /* toujours 2 lignes : la taille suit la largeur */
.hero .sub { display: block; font-family: "Inter Tight", sans-serif; font-size: 1.05rem; margin-bottom: 1.2rem; opacity: .92; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); max-width: 30ch; margin: 1.6rem 0 2rem; opacity: .9; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 0; }
.hero .btn { background: #f3eee6; color: #1d1a17; }
.cta .link { color: #f3eee6; text-underline-offset: 5px; text-decoration-color: rgba(243,238,230,.4); }
.cta .link:hover { text-decoration-color: currentColor; }
/* Entrée du texte après l'ouverture des bandes noires */
.hero-text > * { opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ready .hero-text > * { opacity: 1; transform: none; }
.ready .hero-text > :nth-child(1) { transition-delay: .55s; }
.ready .hero-text > :nth-child(2) { transition-delay: .7s; }
.ready .hero-text > :nth-child(3) { transition-delay: .85s; }
.no-intro .hero-text > * { transition-delay: 0s !important; }
.hero-text { opacity: calc(1 - var(--p, 0) * 2.2); }

/* Vignette avec titre posé dessus (fiches : « D'autres réalisations ») */

/* En-tête transparent tant qu'il survole l'accueil */
.top.over { --ink: #fbf8f3; --bg: #1d1a17; --muted: rgba(251,248,243,.92); --line: rgba(251,248,243,.5); background: transparent; backdrop-filter: none; color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
/* Ombre douce en haut, seulement par-dessus la vidéo, pour que le menu reste lisible */
.top::before { content: ""; position: absolute; inset: 0 0 -3.5rem; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(12,9,7,.55), rgba(12,9,7,.25) 55%, rgba(12,9,7,0)); opacity: 0; transition: opacity .5s; }
.top.over::before { opacity: 1; }
.top.over .btn { text-shadow: none; }

/* Manifeste : les mots s'allument au défilement */
.manifesto { min-height: 80vh; display: grid; place-items: center; }
.words { width: min(1100px, 100% - 3rem); font-family: "Instrument Serif", serif; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.12; margin: 0; }
.words span { opacity: .15; transition: opacity .4s; }
.words span.on { opacity: 1; }

/* Réalisations */
.intro { color: var(--muted); margin: 0 0 3rem; }
.film-link { display: block; text-decoration: none; }
.thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; background: linear-gradient(135deg, #8a6d58, #2b2420); }
.thumb img { color: transparent; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.85); }
.film-link:hover img { transform: scale(1.05); filter: none; }
.play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem; border-radius: 50%; background: rgba(243,238,230,.18); backdrop-filter: blur(8px); border: 1px solid rgba(243,238,230,.5); opacity: 0; transform: scale(.8); transition: opacity .4s, transform .4s; }
.play::after { content: ""; position: absolute; left: 1.8rem; top: 1.45rem; border-style: solid; border-width: .8rem 0 .8rem 1.3rem; border-color: transparent transparent transparent #f3eee6; }
/* Réalisations : grille de cartes sur deux colonnes */
.film-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.film-list > li[hidden] { display: none; }
.film-row { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; cursor: pointer; text-decoration: none; color: #f6f1e8; background: linear-gradient(135deg, #8a6d58, #2b2420); }
.film-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.film-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,7,.72), rgba(12,9,7,.2) 45%, rgba(12,9,7,0) 70%); transition: background .5s; }
.card-info { position: absolute; z-index: 1; inset: auto 0 0; padding: clamp(1rem, 2.2vw, 1.8rem); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.card-title { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.05; }
.card-type { font-size: .9rem; opacity: .9; text-align: right; flex: none; }
.card-more { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; font-size: .95rem; }
.card-meta { opacity: .9; }
.card-go { display: inline-flex; align-items: center; gap: .6rem; padding: .5em 1.1em .5em .9em; border-radius: 999px; background: #f6f1e8; color: #1d1a17; font-weight: 500; white-space: nowrap; }
.card-go::before { content: ""; border: solid transparent; border-width: .35em 0 .35em .6em; border-left-color: currentColor; }
.film-row:focus-visible { outline-offset: 4px; }
/* Ordinateur : les détails et l'invitation apparaissent au survol */
@media (hover: hover) and (min-width: 761px) {
  .card-more { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transform: translateY(.6rem); transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s, margin .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
  .film-row:hover img, .film-row:focus-visible img { transform: scale(1.04); }
  .film-row:hover::after, .film-row:focus-visible::after { background: linear-gradient(to top, rgba(12,9,7,.85), rgba(12,9,7,.45) 60%, rgba(12,9,7,.15)); }
  .film-row:hover .card-more, .film-row:focus-visible .card-more { max-height: 4rem; opacity: 1; margin-top: .8rem; transform: none; }
}
/* Téléphone et tablette : pas de survol, le lieu reste visible, l'invitation est la carte elle-même */
@media (hover: none), (max-width: 760px) { .card-go, .card-more { display: none; } } /* mobile : titre et type seulement, sans lieu ni durée */
.count { font-family: "Inter Tight", system-ui, sans-serif; font-size: .9rem; letter-spacing: 0; vertical-align: top; position: relative; top: .55em; margin-left: .4em; color: var(--muted); }
.count::before { content: "["; } .count::after { content: "]"; }

/* À propos */
.portrait { margin: 0; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 439/450; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 18%, transparent), color-mix(in srgb, var(--ink) 4%, transparent)); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.about .big { font-family: "Instrument Serif", serif; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; }
.about p { max-width: 52ch; }
.about .split { align-items: center; }

/* Pages film */
.film-page { padding: 7rem 0 4rem; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 2rem; }
.crumbs a { color: inherit; }
.film-page h1 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .95; margin: 0; }
.where { color: var(--muted); font-size: 1.15rem; margin: .6rem 0 2.5rem; }
.film-link.big .play { opacity: 1; transform: none; width: 6rem; height: 6rem; margin: -3rem; }
.film-link.big .play::after { left: 2.4rem; top: 2rem; border-width: 1rem 0 1rem 1.6rem; }
.film-body { display: grid; grid-template-columns: minmax(12rem, 1fr) 2.6fr; gap: 3rem; margin-top: 3rem; }
.facts { margin: 0; display: grid; gap: 1.1rem; align-content: start; }
.facts div { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: .85rem; }
.facts dd { margin: .15rem 0 0; font-size: 1.1rem; }
.prose { max-width: 60ch; }
.prose p:first-child { font-family: "Instrument Serif", serif; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; margin-top: 0; }
.ask { margin: 2.5rem 0 1rem; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* Prestations */
.service-list { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); }
.service-list li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: .5rem; padding: 2rem 0 2.2rem; border-top: 1px solid var(--line); align-content: start; }
.service-list li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: "La Belle Aurore", cursive; font-size: 1.5rem; line-height: 1.3; color: var(--muted); }
.service-list h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin: 0; transition: color .3s; }
.service-list li:hover h3 { font-style: italic; }
.service-list p { margin: 0; color: var(--muted); max-width: 40ch; transition: color .3s; }
.service-list li:hover p { color: var(--ink); }

/* Méthode : avant, pendant, après */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 1000px) { .contact .split { grid-template-columns: 1fr; } }
.phases { height: 210vh; }
.phases-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto auto; align-content: center; column-gap: 4rem; row-gap: clamp(2rem, 5vh, 3.5rem); padding-top: 4rem; }
.phases-stage > h2 { grid-column: 1 / -1; margin: 0; font-family: "Inter Tight", sans-serif; font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.phase-nav { list-style: none; margin: 0; padding: 0; font-family: "La Belle Aurore", cursive; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 1.25; }
.phase-nav li { color: color-mix(in srgb, var(--ink) 16%, transparent); transition: color .6s; }
.phase-nav li.done { color: color-mix(in srgb, var(--ink) 32%, transparent); }
.phase-nav li.on { color: var(--ink); }
.phase-nav li { cursor: pointer; width: fit-content; }
.phase-nav li:not(.on):hover { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.phase-list { position: relative; min-height: 20rem; }
.phase { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .7s, transform .9s cubic-bezier(.2,.7,.2,1), filter .7s; pointer-events: none; }
.phase.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.phase h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.phase .lead { font-family: "Instrument Serif", serif; font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.1; margin: 0 0 1.5rem; }
/* Une image tirée des films pour chaque étape, qui s'approche doucement */
.phase-list { min-height: 21rem; }
.phase ul { list-style: none; padding: 0; margin: 0; max-width: 44ch; }
.phase li { color: var(--muted); font-size: 1.1rem; line-height: 1.65; padding: .8rem 0; }
.phase li + li { border-top: 1px solid var(--line); }
.phase li:first-child { padding-top: 0; }

/* Témoignages */
.voice-grid { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); margin-top: 3.5rem; }
.voice { margin: 0; max-width: 48rem; display: flex; flex-direction: column; gap: 1rem; }
.voice:nth-child(2) { align-self: flex-end; }
.voice blockquote { order: 1; margin: 0; font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.12; }
.voice blockquote p { margin: 0; }
.voice[lang="fr"] blockquote p::before { content: "« "; } .voice[lang="fr"] blockquote p::after { content: " »"; }
.voice[lang="en"] blockquote p::before { content: "“"; } .voice[lang="en"] blockquote p::after { content: "”"; }
.voice figcaption { order: 2; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.voice figcaption span { color: var(--muted); font-size: .9rem; }
.voice details { order: 3; border: 0; padding: 0; max-width: 40rem; }
.voice summary { width: fit-content; font-size: 1rem; color: var(--ink); justify-content: flex-start; gap: .5rem; border-bottom: 1px solid var(--line); padding-bottom: .15rem; }
.voice summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.voice details p { font-size: .95rem; line-height: 1.6; }

/* FAQ */
.faq .wrap { max-width: 900px; }
details { border-top: 1px solid var(--line); padding: 1.3rem 0; }
summary { cursor: pointer; font-size: 1.3rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::after { content: "+"; color: var(--muted); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); max-width: 60ch; }

/* Contact */
.direct { line-height: 2.1; }
/* Liens de contact : le trait se redessine, le texte glisse, une flèche apparaît */
.direct a { position: relative; display: inline-block; text-decoration: none; padding-right: 1.2em; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat, linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; line-height: 1.5; transition: background-size .45s cubic-bezier(.2,.7,.2,1), transform .35s, color .3s; }
.direct a::after { content: "→"; position: absolute; right: 0; top: 0; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s; color: var(--accent); }
.direct a:hover, .direct a:focus-visible { background-size: 100% 1px, 100% 1px; transform: translateX(4px); }
.direct a:hover::after, .direct a:focus-visible::after { opacity: 1; transform: none; }
.form { display: grid; gap: 1.2rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form label { display: grid; gap: .35rem; font-size: 1rem; color: var(--muted); }
.form input, .form select, .form textarea { min-width: 0; width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .6rem 0; border-radius: 0; transition: border-color .3s; }
.form select option, .form select optgroup { background: var(--bg); color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form input::-webkit-calendar-picker-indicator { filter: invert(.6); }
.hp { display: none; }

/* Formulaire simple */
.form.simple { gap: 1.1rem; }
.form.simple input:not([type=radio]):not([type=checkbox]), .form.simple textarea { background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; transition: border-color .3s, background-color .3s; }
.form.simple input:focus, .form.simple textarea:focus { border-color: var(--accent); background: transparent; }
.form.simple input::placeholder, .form.simple textarea::placeholder { color: var(--muted); opacity: 1; }
.chips { border: 0; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { font-size: 1rem; color: var(--muted); margin-bottom: .6rem; padding: 0; }
.form .chips label { display: block; color: var(--ink); }
.chips input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.chips label > span { display: inline-block; padding: .6em 1.2em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.chips label:hover > span { box-shadow: inset 0 0 0 1px var(--ink); }
.chips input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-right: -.8rem; }
.send p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.4; }
.legal { font-size: .95rem; color: var(--muted); margin: 0; }
.form .btn { justify-self: start; }
.status { margin: 0; min-height: 1.5em; }

/* Pied de page : toujours sombre, identique sur toutes les pages */
.foot { --bg:#050403; --ink:#efe7db; --accent:#e39a6c; --muted: color-mix(in srgb, #efe7db 68%, transparent); --line: color-mix(in srgb, #efe7db 14%, transparent); position: relative; z-index: 1; background: var(--bg); color: var(--ink); padding: clamp(4rem, 8vw, 6rem) var(--gut) 1.8rem; font-size: 1rem; }
html[data-theme="dark"] .foot { --bg:#020202; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .11; background-image: var(--grain-white); }
.foot a { text-decoration: none; }

/* Grain léger, généré par le navigateur : points sombres sur les sections claires, points clairs sur les sections sombres */
html { --grain-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
section:not(.hero) { position: relative; isolation: isolate; }
section:not(.hero)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background-image: var(--grain-black); }
section[data-tone="night"]::before, html[data-theme="dark"] section:not(.hero)::before { opacity: .11; background-image: var(--grain-white); }
.hero-stage { z-index: 1; }
/* Sections sombres : un voile plus clair, un peu plus marqué en haut, pour distinguer les blocs qui se suivent */
.films, .voices, .contact { background: linear-gradient(to bottom, rgba(255, 244, 232, .055), rgba(255, 244, 232, .03)), var(--bg); }

/* Photo facultative dans les témoignages */
.voice-photo { width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; flex: none; align-self: center; box-shadow: 0 0 0 1px var(--line); }
.voice-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%); }
.voice figcaption:has(.voice-photo) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.voice figcaption:has(.voice-photo) .voice-photo { grid-row: span 2; }

/* Apparitions */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Menu mobile */
.menu-btn { display: none; font: inherit; font-size: .95rem; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .45em 1em; cursor: pointer; }

/* Formulaire : contexte, erreurs, remerciement */
.vu-note { margin: 0; padding: .7rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: .95rem; }
.err { display: block; color: var(--accent); font-size: .85rem; margin-top: .3rem; }
.chips .err { flex-basis: 100%; margin-top: .2rem; }
.form.simple [aria-invalid="true"] { border-color: var(--accent) !important; }
.chips[aria-invalid="true"] label > span { box-shadow: inset 0 0 0 1px var(--accent); }
.thanks { padding: 2rem 0; outline: none; }
.thanks h3 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 1rem; }
.thanks p { color: var(--muted); max-width: 44ch; }
.thanks .btn { margin-top: 1rem; }

/* Section méthode : la scène porte le titre, pas de marge en plus */
.method { padding-top: 0; }

/* Lecteur vidéo en surimpression */
.player { width: min(92vw, calc(82vh * 16 / 9)); max-width: 1400px; padding: 0; border: 0; background: transparent; color: #f3eee6; overflow: visible; }
.player::backdrop { background: rgba(8, 7, 6, .92); backdrop-filter: blur(6px); }
.player[open] { animation: player-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes player-in { from { opacity: 0; transform: scale(.97); } }
.player-frame { aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; padding-top: 1rem; }
.player-bar strong { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.6rem; margin-right: auto; }
.player-bar a { color: rgba(243,238,230,.75); font-size: .9rem; text-underline-offset: 3px; }
.player-bar a:hover { color: #f3eee6; }
.player-close { position: absolute; top: -3rem; right: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(243,238,230,.35); background: none; color: #f3eee6; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.player-close:hover { border-color: #f3eee6; }

/* Fiche film : la vidéo se lance sur place */
.film-link.big { cursor: pointer; }
.film-link.big iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; border-radius: 6px; }

/* Touche manuscrite (La Belle Aurore) : seulement pour les noms et la signature */
.sig { font-family: "La Belle Aurore", cursive; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; margin: 1.2rem 0 0; transform: rotate(-4deg); transform-origin: left center; }
.voice figcaption strong { font-family: "La Belle Aurore", cursive; font-weight: 400; font-size: 1.75rem; line-height: 1.2; }
.thanks-name { font-family: "La Belle Aurore", cursive; font-size: 1.15em; }

/* Années : touche manuscrite */
.year { font-family: "La Belle Aurore", cursive; font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.4rem); margin: 3rem 0 .8rem; }
.year-group:first-child .year { margin-top: 0; }
.all-link { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }
.all-link a { display: inline-flex; align-items: center; gap: .6rem; padding: .85em 1.6em; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.all-link a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Page « Réalisations » */
.all-films { padding: 8rem 0 5rem; }
.all-films h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 1; margin: 0 0 1rem; }
.all-films .intro { max-width: 60ch; margin-bottom: 2rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 3rem; position: sticky; top: 4.2rem; z-index: 5; padding: .7rem 0; background: var(--bg); }
.filters .n { font-size: .8em; opacity: .55; margin-left: .25em; }
.more-films { text-align: center; margin: 3rem 0 0; }
.filters button { font: inherit; font-size: .95rem; color: var(--ink); background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: .5em 1.1em; cursor: pointer; transition: background-color .25s, color .25s; }
.filters button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* Témoignages en carrousel : flèches + défilement natif au doigt */
.carousel-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.carousel-nav { display: flex; gap: .6rem; align-items: center; }
.carousel-nav button { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 1.2rem; cursor: pointer; transition: background-color .3s, color .3s, opacity .3s; }
.carousel-nav button:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.carousel-nav button:disabled { opacity: .3; cursor: default; }
.carousel-nav output { min-width: 3.5rem; text-align: center; color: var(--muted); font-size: .9rem; }
.track { list-style: none; margin: calc(clamp(2rem, 4vw, 3rem) - .5rem) calc(var(--gut) * -1) -.5rem; padding: .5rem var(--gut); display: flex; gap: clamp(1rem, 2.4vw, 2rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track:has(details[open]) { align-items: flex-start; }
.slide { flex: 0 0 min(36rem, 82vw); scroll-snap-align: start; border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; }
.slide .voice { max-width: none; width: 100%; justify-content: space-between; gap: 2rem; align-self: stretch; }
.slide .voice blockquote { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }

/* Formules mariage */
.packs { padding-top: 0; }
.packs-intro { max-width: 46ch; color: var(--muted); margin: 0 0 clamp(2rem, 4vw, 3rem); }
.pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.pack, .pack-options { border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.pack h3, .pack-options h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0; }
.pack-lead { display: flex; align-items: center; gap: .6rem; font-family: "La Belle Aurore", cursive; font-size: 1.6rem; line-height: 1.2; color: var(--accent); margin: .5rem 0 1.4rem; }
.pack-lead::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.pack ul, .pack-options ul { list-style: none; margin: 0; padding: 0; }
.pack li, .pack-options li { position: relative; padding: .75rem 0 .75rem 1.8rem; border-top: 1px solid var(--line); }
.pack li::before, .pack-options li::before { content: ""; position: absolute; left: .15rem; top: 1.05rem; width: .38em; height: .75em; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pack-options { margin-top: clamp(1rem, 2.4vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 2rem; align-items: start; }
.pack-options li:first-child { border-top: 0; padding-top: 0; } .pack-options li:first-child::before { top: .3rem; }
.pack-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); }
.pack-tabs button { font: inherit; padding: .55em 1.2em; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.pack-tabs button:hover { border-color: var(--ink); }
.pack-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 760px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .pack-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 1.5rem) * -1); padding-inline: var(--gutter, 1.5rem); scroll-snap-type: x proximity; }
  .pack-tabs::-webkit-scrollbar { display: none; }
  .pack-tabs button { flex: none; padding: .5em 1em; font-size: .95rem; scroll-snap-align: start; }
}
.pack-panel + .pack-panel { margin-top: clamp(1rem, 2.4vw, 2rem); }
.pack-solo { grid-column: 1 / -1; }
.pack-lead.plain::before { display: none; }
.packs-cta { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* Mobile */
@media (max-width: 760px) {
  .top nav { display: none; }
  .phases-stage { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .lede { font-size: 1rem; margin: 1.2rem 0 1.6rem; }
  .hero .sub { font-size: .9rem; }
  .phase-nav { display: flex; gap: 1.2rem; font-size: 2.3rem; }
  .voice:nth-child(2) { align-self: auto; }
  .phase-list { min-height: 24rem; }
  .phase .lead { margin-bottom: .8rem; }
  .film-list { grid-template-columns: 1fr; }
  .card-title { font-size: 1.9rem; }
  .contact .split { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }
  .split, .form .row, .film-body, .phases, .pack-grid, .pack-options { grid-template-columns: 1fr; }
  .menu-btn { display: block; margin-left: auto; }
  .top .theme { display: none; }
  .brand { margin-right: 0; }
  .top .btn.small { display: none; }
  .top nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 0; padding: 5.5rem calc(var(--gut) + .4rem) 2.5rem; background: var(--bg); color: var(--ink); overflow-y: auto; }
  .menu-btn, .brand { position: relative; z-index: 2; }
  .menu-open { overflow: hidden; }
  .menu-open .top { backdrop-filter: none; text-shadow: none; } /* sans flou, le menu se cale sur tout l'écran */
  /* Ouverture du menu : fondu, puis les liens montent l'un après l'autre */
  .top nav { display: flex; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
  .menu-open .top nav { opacity: 1; visibility: visible; transition-delay: 0s; }
  .top nav a { opacity: 0; transform: translateY(14px); }
  body .top nav a:not(.nav-contact), body .top nav a { transition: opacity .3s ease, transform .3s ease; }
  .menu-open .top nav a { opacity: 1; transform: none; }
  .menu-open .top nav a:nth-child(1) { transition-delay: .08s; }
  .menu-open .top nav a:nth-child(2) { transition-delay: .14s; }
  .menu-open .top nav a:nth-child(3) { transition-delay: .20s; }
  .menu-open .top nav a:nth-child(4) { transition-delay: .26s; }
  .menu-open .top nav a:nth-child(5) { transition-delay: .32s; }
  .menu-open .top nav a:nth-child(6) { transition-delay: .38s; }
  @media (prefers-reduced-motion: reduce) { .top nav, .top nav a { transition: none; transform: none; } }
  .top nav a { padding: 1rem 0; font-size: 1.5rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .top nav a:last-child { border-bottom: 0; }
  /* L'accueil ne se resserre pas sur mobile : plus simple et plus fluide */
  .hero { height: auto; }
  .hero-stage { position: relative; clip-path: none; }
  .hero-text { opacity: 1; }
  /* Rythme et confort de lecture au doigt */
  section { padding: 4.5rem 0; }
  /* Hiérarchie de l'accueil : titre > texte > boutons > surtitre */
  .display { font-size: 8.8vw; }
  .hero .sub { font-size: .85rem; opacity: .8; margin-bottom: .9rem; }
  .lede { font-size: 1.1rem; line-height: 1.5; margin: 1.3rem 0 1.8rem; }
  .cta .link { font-size: 1rem; }
  .legal, .voice figcaption span, .send p { font-size: .9rem; }
  .direct { line-height: 1.6; }
  .direct a { padding-block: .45rem; }
  .voice summary { padding-block: .6rem; }
  .cta .link { display: inline-block; padding-block: .5rem; }
  .send { gap: 1rem 1.2rem; flex-wrap: nowrap; }
  .send p { flex: 1 1 auto; min-width: 0; }
  .foot-nav a, .foot-contact a { padding-block: .3rem; }
  .foot-base { font-size: .875rem; }
  .foot-base a { padding-block: .4rem; }
}

/* Pour ceux qui désactivent les animations */
@media (prefers-reduced-motion: reduce) {
  .words span { opacity: 1; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .letterbox { display: none; }
  .hero-text > * { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .hero { height: auto; }
  .hero-stage { position: relative; clip-path: none; }
  .hero-text { opacity: 1; }
}


/* Prestations : fond un peu plus clair, dans la continuité du début de page */
section.services:not(.hero)[data-tone="day"] { --bg:#fbf9f5; }
html[data-theme="dark"] section.services:not(.hero)[data-tone="day"] { --bg:#1d1915; }
section.services::before { opacity: .1; }

/* Témoignages : pastille à initiales quand il n'y a pas de photo, traduction sous la citation */
.voice-photo.initials { display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); font-family: "Instrument Serif", serif; font-size: 1.15rem; color: var(--ink); }
.voice figcaption:has(.initials) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.voice figcaption:has(.initials) .voice-photo { grid-row: span 2; }
.voice .trad { order: 1; margin: -.4rem 0 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .pack-tabs { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } }

/* Boutons pleins : léger relief (liseré intérieur et dégradé discret, sans ombre portée) */
.btn { background-image: linear-gradient(color-mix(in srgb, var(--bg) 9%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 16%, transparent); }
.btn:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 24%, transparent); }
.hero .btn { background-image: linear-gradient(rgba(255,255,255,.55), transparent 70%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }


/* Notification discrète */
.toast { position: fixed; left: 50%; bottom: 1.6rem; z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: .7em 1.3em; border-radius: 999px; background: #1d1a17; color: #f3eee6; font-family: "Inter Tight", sans-serif; font-size: .95rem; box-shadow: 0 6px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(243,238,230,.18); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s; transform: translate(-50%, 0); } }

.all-reviews { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.all-reviews a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 6px; transition: text-decoration-color .3s; }
.all-reviews a:hover { text-decoration-color: currentColor; }

/* Choix du type de projet : liste déroulante, au style des autres champs */
.form .type-pick { display: grid; }
.form.simple select { appearance: none; -webkit-appearance: none; cursor: pointer; background-color: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 2.6rem .9rem 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; transition: border-color .3s, background-color .3s; }
.form.simple select:focus { border-color: var(--accent); background-color: transparent; }
.form select:invalid { color: var(--muted); }

/* Préférence de recontact : le champ téléphone n'apparaît que si on ne choisit pas l'e-mail */
.contact-pref { display: grid; gap: 1.1rem; }
.contact-pref.has-tel { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .contact-pref.has-tel { grid-template-columns: 1fr; } }

/* Pages par type de projet : un seul système, titre à gauche puis contenu en colonnes */
.project-page .p-sec, .project-page .films, .project-page .voices { padding-block: clamp(4rem, 8vw, 6.5rem); }
.project-page .p-sec-line { border-top: 1px solid var(--line); }
.project-page .packs { padding-top: clamp(4rem, 8vw, 6.5rem); }
.project-page h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; text-wrap: balance; margin: 0; }
.p-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 6vw, 5rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
.p-head p { margin: 0; color: var(--muted); max-width: 52ch; }
.project-page .packs-intro { display: none; }
.p-hero { min-height: 60svh; display: grid; align-items: end; padding: 7rem 0 clamp(2.5rem, 6vw, 4.5rem); color: #f3eee6; overflow: hidden; }
.p-hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--img, none) center / cover no-repeat, url("media/hero.webp") center / cover no-repeat, radial-gradient(ellipse at 30% 20%, #6b5446, #1d1a17 70%); }
.p-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,7,.85), rgba(12,9,7,.5) 55%, rgba(12,9,7,.3)); }
.p-hero-text { position: relative; text-shadow: 0 1px 24px rgba(0,0,0,.25); }
.p-hero .crumbs { color: rgba(243,238,230,.75); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.p-hero .crumbs a { color: inherit; }
.p-hero h1 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(2.2rem, 5.2vw, 4.8rem); line-height: 1; margin: 0 0 1rem; max-width: 22ch; text-wrap: balance; }
.nw { white-space: nowrap; }
.p-lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 36rem; margin: 0 0 1.8rem; }
.p-hero .btn { background: #f3eee6; color: #1d1a17; }
.p-hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }
.p-who { display: inline-flex; align-items: center; gap: .7rem; font-size: .95rem; opacity: .95; }
.p-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.project-page .film-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-page .card-title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.p-points, .p-steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.p-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-points li, .p-steps3 li { border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.p-points h3, .p-steps3 h3 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin: 0 0 .6rem; }
.p-points p, .p-steps3 p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.p-steps3 .n { display: block; font-family: "La Belle Aurore", cursive; font-size: 2.2rem; line-height: 1; color: var(--accent); margin-bottom: .6rem; }
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.p-eric-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); margin-bottom: 1.2rem; }
.p-eric h2 { margin-bottom: .8rem; }
.p-eric .big { font-family: "Instrument Serif", serif; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; margin: 0 0 1rem; }
.p-eric p:not(.big) { color: var(--muted); max-width: 48ch; margin: 0 0 .8rem; }
.p-faq h2 { margin-bottom: 1.2rem; }
.p-faq details:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .p-head, .p-split { grid-template-columns: 1fr; }
  .p-steps3 { grid-template-columns: 1fr; }
  /* sur téléphone : films et points deviennent des diaporamas à faire glisser */
  .project-page .film-list, .p-points { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .project-page .film-list::-webkit-scrollbar, .p-points::-webkit-scrollbar { display: none; }
  .project-page .film-list > li { flex: 0 0 82%; scroll-snap-align: start; }
  .p-points li { flex: 0 0 74%; scroll-snap-align: start; }
}
.notfound { min-height: 70vh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 1rem; padding: 9rem var(--gut) 5rem; }
.notfound h1 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1; margin: 0; }
.notfound p { margin: 0; color: var(--muted); }
.notfound .actions { justify-content: center; margin-top: 1rem; }

/* Bord supérieur du pied de page : papier déchiré, irrégulier */
.foot { margin-top: -34px; padding-top: calc(clamp(4rem, 8vw, 6rem) + 34px); clip-path: polygon(0.00% 22.0px, 0.45% 20.8px, 0.91% 23.1px, 1.36% 23.8px, 1.82% 24.6px, 2.27% 26.6px, 2.73% 25.0px, 3.18% 27.1px, 3.64% 26.2px, 4.09% 23.3px, 4.55% 21.8px, 5.00% 21.3px, 5.45% 19.2px, 5.91% 19.9px, 6.36% 13.1px, 6.82% 16.3px, 7.27% 16.4px, 7.73% 16.1px, 8.18% 11.8px, 8.64% 13.8px, 9.09% 11.0px, 9.55% 11.1px, 10.00% 16.0px, 10.45% 11.4px, 10.91% 12.1px, 11.36% 10.9px, 11.82% 15.0px, 12.27% 13.2px, 12.73% 14.4px, 13.18% 12.6px, 13.64% 13.8px, 14.09% 12.7px, 14.55% 13.7px, 15.00% 15.1px, 15.45% 14.5px, 15.91% 11.8px, 16.36% 10.8px, 16.82% 10.4px, 17.27% 8.2px, 17.73% 7.5px, 18.18% 6.9px, 18.64% 5.4px, 19.09% 3.2px, 19.55% 4.7px, 20.00% 6.5px, 20.45% 3.4px, 20.91% 2.2px, 21.36% 1.9px, 21.82% 3.3px, 22.27% 6.3px, 22.73% 10.7px, 23.18% 10.1px, 23.64% 16.8px, 24.09% 13.0px, 24.55% 14.8px, 25.00% 19.4px, 25.45% 16.6px, 25.91% 17.9px, 26.36% 21.2px, 26.82% 17.6px, 27.27% 20.7px, 27.73% 22.0px, 28.18% 20.9px, 28.64% 25.1px, 29.09% 22.1px, 29.55% 19.6px, 30.00% 19.7px, 30.45% 21.8px, 30.91% 25.4px, 31.36% 20.3px, 31.82% 16.7px, 32.27% 15.7px, 32.73% 17.3px, 33.18% 16.1px, 33.64% 18.7px, 34.09% 19.1px, 34.55% 19.4px, 35.00% 17.1px, 35.45% 13.1px, 35.91% 19.8px, 36.36% 21.2px, 36.82% 22.9px, 37.27% 21.2px, 37.73% 20.3px, 38.18% 22.4px, 38.64% 22.4px, 39.09% 28.1px, 39.55% 19.5px, 40.00% 22.7px, 40.45% 20.7px, 40.91% 16.5px, 41.36% 15.7px, 41.82% 17.2px, 42.27% 12.6px, 42.73% 12.4px, 43.18% 7.7px, 43.64% 10.0px, 44.09% 4.9px, 44.55% 7.9px, 45.00% 3.9px, 45.45% 1.5px, 45.91% 6.1px, 46.36% 5.8px, 46.82% 2.9px, 47.27% 4.0px, 47.73% 6.3px, 48.18% 6.5px, 48.64% 10.2px, 49.09% 9.2px, 49.55% 12.6px, 50.00% 13.8px, 50.45% 13.0px, 50.91% 11.3px, 51.36% 9.3px, 51.82% 14.7px, 52.27% 15.4px, 52.73% 15.3px, 53.18% 16.4px, 53.64% 15.0px, 54.09% 13.2px, 54.55% 13.8px, 55.00% 14.6px, 55.45% 12.5px, 55.91% 12.5px, 56.36% 13.2px, 56.82% 12.3px, 57.27% 14.6px, 57.73% 14.6px, 58.18% 12.2px, 58.64% 16.5px, 59.09% 13.6px, 59.55% 12.1px, 60.00% 16.6px, 60.45% 17.7px, 60.91% 23.2px, 61.36% 21.8px, 61.82% 22.0px, 62.27% 26.2px, 62.73% 27.8px, 63.18% 27.4px, 63.64% 27.9px, 64.09% 26.4px, 64.55% 25.9px, 65.00% 25.3px, 65.45% 24.9px, 65.91% 23.3px, 66.36% 21.5px, 66.82% 19.1px, 67.27% 18.1px, 67.73% 15.7px, 68.18% 18.2px, 68.64% 16.0px, 69.09% 15.1px, 69.55% 14.5px, 70.00% 11.6px, 70.45% 10.7px, 70.91% 9.3px, 71.36% 8.6px, 71.82% 3.8px, 72.27% 8.5px, 72.73% 8.9px, 73.18% 11.4px, 73.64% 12.4px, 74.09% 11.6px, 74.55% 13.4px, 75.00% 11.6px, 75.45% 11.6px, 75.91% 12.9px, 76.36% 15.0px, 76.82% 13.3px, 77.27% 15.1px, 77.73% 9.5px, 78.18% 13.4px, 78.64% 8.8px, 79.09% 9.8px, 79.55% 8.7px, 80.00% 8.9px, 80.45% 5.2px, 80.91% 4.1px, 81.36% 7.0px, 81.82% 3.1px, 82.27% 7.5px, 82.73% 3.1px, 83.18% 8.2px, 83.64% 5.1px, 84.09% 8.1px, 84.55% 12.5px, 85.00% 9.3px, 85.45% 13.4px, 85.91% 17.8px, 86.36% 17.5px, 86.82% 21.2px, 87.27% 22.9px, 87.73% 20.6px, 88.18% 21.5px, 88.64% 21.5px, 89.09% 22.2px, 89.55% 23.6px, 90.00% 24.7px, 90.45% 26.0px, 90.91% 21.4px, 91.36% 23.8px, 91.82% 22.8px, 92.27% 20.5px, 92.73% 20.2px, 93.18% 20.4px, 93.64% 18.1px, 94.09% 18.4px, 94.55% 19.0px, 95.00% 17.1px, 95.45% 14.3px, 95.91% 18.4px, 96.36% 19.5px, 96.82% 21.6px, 97.27% 17.8px, 97.73% 12.3px, 98.18% 17.2px, 98.64% 21.5px, 99.09% 20.9px, 99.55% 18.8px, 100.00% 23.5px, 100% 100%, 0 100%); }

/* Pied de page : logo centré, mot court, puis tous les liens en colonnes */
.foot-top { text-align: center; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.foot-brand { font-family: "La Belle Aurore", cursive; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; }
.foot-tag { margin: -.2rem 0 0; color: var(--muted); font-size: 1.1rem; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2.5rem 2rem; max-width: 62rem; margin: 0 auto; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.foot .foot-col h3 { font: 500 1.05rem/1.2 "Inter Tight", "Inter", sans-serif; color: var(--ink); margin: 0 0 .6rem; }
.foot-col a, .foot-base a { color: var(--muted); transition: color .25s; }
.foot-col a:hover, .foot-base a:hover { color: var(--ink); }
.foot-base { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; text-align: center; }
.foot-base p { margin: 0; display: flex; gap: 1.5rem; }
.foot-base p:first-child { display: block; }
/* Les coordonnées sont déjà dans la section Contact juste au-dessus : pas de doublon */
body:has(#contact) .foot-contact { display: none; }
@media (max-width: 700px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col a, .foot-base a { padding-block: .25rem; }
}
.project-page .films h2 { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

/* Colonnes des pages projet : cartes douces et frise des étapes */
.p-points { gap: 1rem; }
.p-points li { border: 0; border-radius: 14px; padding: 1.7rem 1.5rem 1.9rem; background: color-mix(in srgb, var(--ink) 5%, transparent); transition: background-color .3s, opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
.p-points li::before { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin-bottom: 1.3rem; }
.p-points li:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.p-points h3 { font-size: 1.7rem; margin-bottom: .7rem; }
.p-steps3 { --g: clamp(1.5rem, 3vw, 2.5rem); gap: var(--g); counter-reset: none; }
.p-steps3 li { position: relative; border-top: 0; padding-top: 3.6rem; }
.p-steps3 li::before { content: ""; position: absolute; top: 1.15rem; left: 3.1rem; right: calc(var(--g) * -1 + .8rem); height: 1px; background: var(--line); }
.p-steps3 li:last-child::before { display: none; }
.p-steps3 .n { position: absolute; top: 0; left: 0; margin: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg); font-size: 1.35rem; padding-top: .1rem; }
@media (max-width: 900px) {
  .p-steps3 { gap: 1.8rem; }
  .p-steps3 li { padding: 0 0 0 3.6rem; }
  .p-steps3 li::before { top: 2.9rem; bottom: -1.6rem; left: 1.2rem; right: auto; width: 1px; height: auto; }
}