/* 701 STUDIO — Showroom immersif (maquette v3) */

@font-face { font-family: 'New Order'; src: url('https://701studio.art/wp-content/uploads/2025/06/fonnts.com-New_Order_Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'New Order'; src: url('https://701studio.art/wp-content/uploads/2025/06/fonnts.com-New_Order_Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'New Order'; src: url('https://701studio.art/wp-content/uploads/2025/06/fonnts.com-New_Order_Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'New Order'; src: url('https://701studio.art/wp-content/uploads/2025/06/fonnts.com-New_Order_Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'New Order'; src: url('https://701studio.art/wp-content/uploads/2025/06/fonnts.com-New_Order_Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #000; /* noir à 100 % */
  --ink-2: #151515;
  --paper: #ecebe6;
  --muted: #8b8a85;
  --line: rgba(236, 235, 230, .14);
  --sans: 'New Order', 'Helvetica Neue', Arial, sans-serif;
  /* Typos validées par Pierre le 10/11/2026 (Adobe Fonts) : secondaire IvyPresto Display, petites mentions Dico Code Two.
     Les noms en minuscules sont ceux du projet web Adobe Fonts ; les autres, ceux des polices activées sur l'ordinateur. */
  --serif: 'ivypresto-display', 'IvyPresto Display', 'Instrument Serif', Georgia, serif;
  --mono: 'dico-code-two', 'Dico Code Two', 'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(16px, 3.2vw, 48px);
  --title-xl: clamp(45px, 10.5vw, 182px); /* grands titres des pages (Pourquoi 701 ?, Pierre Ploton, Un projet ?…) */
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* une fenêtre fermée (fiche produit, visionneuse, panier) ne doit jamais bloquer les clics */
html { scroll-behavior: smooth; background: #000; }
body {
  margin: 0;
  background: transparent; /* le noir est sur html : l'image de fond (body::before) passe dessous le contenu */
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading, body.is-locked { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: .9em; } /* Ivy Presto : œil plus grand et plus large qu'Instrument Serif, réduite de 10 % pour garder les mêmes lignes */
::selection { background: var(--paper); color: var(--ink); }

.arw { display: inline-block; height: .72em; width: auto; aspect-ratio: 334.47 / 265.1; fill: currentColor; vertical-align: -.02em; flex-shrink: 0; }
.arw--up { aspect-ratio: 265.1 / 334.47; height: .86em; vertical-align: -.06em; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.section-tag { color: var(--muted); margin: 0 0 clamp(14px, 1.4vw, 22px); } /* petite étiquette collée à son titre (avant : jusqu'à 56 px) */

/* Grain de sérigraphie */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .22; mix-blend-mode: overlay; /* le grain texture les images sans griser le noir */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Curseur : un rond toujours blanc (noir seulement sur les fonds blancs), sans mélange de couleurs */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .35s;
}
.cursor__label { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s, color .35s; }
.cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.on-white { background: #000; }
.cursor.on-white .cursor__label { color: #fff; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; background: #000; transform-origin: 50% 50%; }
.room3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.room3d__id { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #f2f1ec; }
.room3d__name { margin: 0; display: flex; align-items: baseline; gap: .18em; overflow: hidden; padding: .08em .1em .12em; font-size: clamp(30px, 3.4vw, 54px); line-height: .9; }
.room3d__name span { display: inline-block; transform: translateY(115%); }
.room3d__name b { font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.room3d__name em { font-size: 1.12em; letter-spacing: -.01em; }
.room3d__tag { margin: 0; font-size: 10px; letter-spacing: .22em; color: rgba(242, 241, 236, .62); white-space: nowrap; }

/* Header : menu du site actuel, typographie New Order Bold plus grosse.
   Il reste en haut de la page et part avec le contenu (pas d'effet inversé). */
.hd {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--hd-h); padding: 0 var(--pad); color: var(--paper);
}
:root { --hd-h: 92px; }
.hd ul { list-style: none; margin: 0; padding: 0; }
.hd__logo { font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.hd__nav > ul { display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); }
.hd__nav li { position: relative; }
.hd__nav > ul > li > a, .hd__sub-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 700; font-size: 25px; line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.hd__nav > ul > li > a::after, .hd__sub-toggle::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.hd__nav > ul > li > a:hover::after, .hd__sub-toggle:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd__sub-toggle svg { width: 13px; height: 13px; transition: transform .25s; }
.hd__has-sub.is-open .hd__sub-toggle svg { transform: rotate(180deg); }
.hd__sub { position: absolute; top: calc(100% + 14px); left: -24px; min-width: 320px; padding: 10px 0; background: var(--ink); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.hd__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.hd__has-sub.is-open .hd__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.hd__sub .hd__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 12px 24px; font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; text-align: left; }
.hd__sub .hd__item span { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .04em; color: var(--muted); }
.hd__sub .hd__item:hover, .hd__sub .hd__item:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.hd__burger { display: none; position: relative; width: 52px; height: 52px; margin-right: -12px; }
.hd__burger span { position: absolute; left: 11px; right: 11px; height: 3px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.hd__burger span:nth-child(1) { top: 19px; } .hd__burger span:nth-child(2) { top: 30px; }
.hd__burger[aria-expanded="true"] span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { top: 24px; transform: rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menu plein écran : les rubriques montent une à une, en très gros et très épais */
.menu { position: fixed; inset: 0; z-index: 59; display: flex; flex-direction: column; padding: calc(var(--hd-h) + 16px) var(--pad) 28px; background: var(--ink); overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__big li { overflow: hidden; border-top: 1px solid var(--line); }
.menu__big li:last-child { border-bottom: 1px solid var(--line); }
.menu__big a { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0 8px; font-weight: 700; font-size: clamp(56px, 16vw, 128px); line-height: .88; letter-spacing: -.03em; text-transform: uppercase; transform: translateY(110%); transition: transform .8s var(--ease-out); }
.menu__big a small { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; margin-top: .6em; color: var(--muted); }
.menu.is-open .menu__big a { transform: none; }
.menu.is-open .menu__big li:nth-child(1) a { transition-delay: .15s; }
.menu.is-open .menu__big li:nth-child(2) a { transition-delay: .22s; }
.menu.is-open .menu__big li:nth-child(3) a { transition-delay: .29s; }
.menu__projects { margin-top: 36px; opacity: 0; transform: translateY(12px); transition: opacity .5s .35s, transform .5s .35s var(--ease-out); }
.menu.is-open .menu__projects { opacity: 1; transform: none; }
.menu__projects p { margin: 0 0 14px; color: var(--muted); }
.menu__projects ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.menu__projects .hd__item { display: block; font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; text-align: left; line-height: 1.15; }
.menu__foot { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; color: var(--muted); }
body.is-menu { overflow: hidden; }

/* Coins fixes au scroll : flèche 701 (accueil) à gauche, burger à droite, dans des carrés noirs collés aux bords */
.corner { position: fixed; top: 0; z-index: 61; display: grid; place-items: center; width: var(--corner); height: var(--corner); background: #000; color: var(--paper); transform: translateY(-101%); transition: transform .5s var(--ease); }
:root { --corner: 64px; }
.corner--home { left: 0; }
.corner--menu { right: 0; }
body.has-corners .corner { transform: none; }
body.is-locked .corner { transform: translateY(-101%); }
.corner--home .arw { height: 22px; transition: transform .4s var(--ease-out); }
.corner--home:hover .arw { transform: translate(2px, 2px); }
.corner--menu span { position: absolute; left: 18px; right: 18px; height: 3px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.corner--menu span:nth-child(1) { top: 25px; } .corner--menu span:nth-child(2) { top: 36px; }
.corner--menu[aria-expanded="true"] span:nth-child(1) { top: 30px; transform: rotate(45deg); }
.corner--menu[aria-expanded="true"] span:nth-child(2) { top: 30px; transform: rotate(-45deg); }
@media (max-width: 767px) { :root { --corner: 56px; } .corner--home .arw { height: 19px; } .corner--menu span { left: 15px; right: 15px; } .corner--menu span:nth-child(1) { top: 21px; } .corner--menu span:nth-child(2) { top: 32px; } .corner--menu[aria-expanded="true"] span { top: 26px !important; } }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.is-entered .hero__video { transform: scale(1); }
/* Grésillement discret entre deux plans de la vidéo (même langage que l'intro) */
.hero__static { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.hero.is-glitch .hero__static { animation: hstatic .22s steps(3) 1; }
.hero.is-glitch .hero__video { animation: hglitch .22s steps(4) 1; }
@keyframes hstatic { 0%, 100% { opacity: 0; } 30% { opacity: .9; } 60% { opacity: .5; } }
@keyframes hglitch {
  0%, 100% { transform: none; filter: none; }
  25% { transform: translateX(-5px) skewX(.6deg); filter: drop-shadow(3px 0 0 rgba(255,40,60,.45)) drop-shadow(-3px 0 0 rgba(0,230,255,.45)) brightness(1.08); }
  50% { transform: translateX(4px); filter: drop-shadow(-2px 0 0 rgba(255,40,60,.35)) drop-shadow(2px 0 0 rgba(0,230,255,.35)); }
  75% { transform: translateX(-1px); filter: brightness(1.12); }
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.85) 100%); }
.hero__content { position: relative; padding: 0 var(--pad) clamp(40px, 7vh, 90px); }
.hero__kicker { margin: 0 0 22px; color: var(--paper); }
.hero__title { margin: 0; font-weight: 700; font-size: clamp(38px, 6.4vw, 112px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.hero__title em { text-transform: none; font-size: 1.08em; letter-spacing: -.02em; color: var(--paper); }
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease-out); }
.is-entered .line > span { transform: none; }
.is-entered .line:nth-child(2) > span { transition-delay: .08s; }
.is-entered .line:nth-child(3) > span { transition-delay: .16s; }
.hero__foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--pad); border-top: 1px solid var(--line); }
.hero__scroll b { display: inline-block; animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* Révélations au scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Manifeste */
.manifesto { padding: clamp(72px, 12vh, 140px) var(--pad) clamp(40px, 6vh, 72px); }
.manifesto__text { margin: 0; max-width: 1200px; font-weight: 500; font-size: clamp(22px, 2.8vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.manifesto__text .w { opacity: .14; transition: opacity .25s; }
.manifesto__text .w.is-on { opacity: 1; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar { position: relative; overflow: hidden; isolation: isolate; padding: 32px 32px 40px; }
.pillar + .pillar { border-left: 1px solid var(--line); }
/* Vidéo au survol : elle remplit la case, sous un voile sombre qui garde le texte lisible */
.pillar .pillar__media { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--ease-out), transform 1.2s var(--ease-out); pointer-events: none; }
.pillar .pillar__media video { width: 100%; height: 100%; object-fit: cover; }
.pillar .pillar__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .35) 100%); }
.pillar.reveal.is-play > .pillar__media, .pillar.is-play > .pillar__media { opacity: 1; transform: none; }
.pillar.is-play p { color: var(--paper); }
.pillar .mono { color: var(--paper); }
.pillar h3 { margin: 14px 0 12px; font-weight: 700; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; text-transform: uppercase; }
.pillar p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 34ch; }
/* Les cases restent en place (sinon on voit le fond gris des séparateurs), seul leur contenu apparaît */
.pillar.reveal { opacity: 1; transform: none; }
.pillar.reveal > *:not(.pillar__media) { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.pillar.reveal.is-in > *:not(.pillar__media) { opacity: 1; transform: none; }
.pillar:nth-child(2) > * { transition-delay: .1s; } .pillar:nth-child(3) > * { transition-delay: .2s; }

/* Showroom */
.showroom { position: relative; border-top: 1px solid var(--line); }
.showroom__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad) 16px; flex-wrap: wrap; }
.showroom { padding-top: clamp(40px, 6vh, 72px); }
#showroom .section-tag { margin-bottom: 14px; }
.showroom__title { margin: 0; font-weight: 700; font-size: clamp(30px, 3.8vw, 64px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.showroom__title em { text-transform: none; }
.showroom__tools { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 560px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.chip sup { font-size: 8px; margin-left: 3px; }
.chip:hover { color: var(--paper); border-color: var(--paper); }
.chip.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.toggle button { padding: 7px 16px; border-radius: 99px; color: var(--muted); transition: background .3s, color .3s; }
.toggle button.is-active { background: var(--paper); color: var(--ink); }

.rooms { position: relative; }
.rooms__sticky { position: sticky; top: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 0 clamp(32px, 5vh, 56px); }
.rooms__track { display: flex; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--pad); will-change: transform; }
.card { position: relative; flex: 0 0 auto; width: clamp(240px, min(36vw, calc((100vh - var(--head-h, 150px) - 200px) * .8)), 600px); text-align: left; perspective: 1200px; }
.card.is-hidden { display: none; }
.card__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.card__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.2s var(--ease-out); }
.card:hover .card__frame img { transform: scale(1.04); }
.card__no { position: absolute; top: 14px; left: 14px; z-index: 1; color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.card__cta { position: absolute; z-index: 1; bottom: 14px; right: 14px; padding: 8px 12px; background: var(--paper); color: var(--ink); border-radius: 99px; transform: translateY(12px); opacity: 0; transition: .4s var(--ease-out); }
.card:hover .card__cta, .card:focus-visible .card__cta { transform: none; opacity: 1; }
.card__info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.card__title { margin: 0; font-weight: 700; font-size: clamp(22px, 2vw, 32px); letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.card__sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.card__cats { color: var(--muted); text-align: right; line-height: 1.6; flex-shrink: 0; }
.card--end { display: flex; flex-direction: column; justify-content: center; gap: 16px; aspect-ratio: 4 / 5; align-self: flex-start; border: 1px dashed var(--line); padding: clamp(28px, 3vw, 48px); }
.card--end h3 { margin: 0; font-weight: 700; font-size: clamp(30px, 3.2vw, 54px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.card--end h3 em { text-transform: none; color: var(--muted); }
.card--end a { color: var(--muted); }
.card--end a:hover { color: var(--paper); }

.rooms__progress { display: flex; align-items: center; gap: 14px; padding: 20px var(--pad) 0; color: var(--muted); }
.rooms__progress i { flex: 1; max-width: 240px; height: 1px; background: var(--line); position: relative; }
.rooms__progress b { position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(0); }

/* Index */
.index { list-style: none; margin: 0; padding: 16px var(--pad) clamp(40px, 6vh, 72px); }
.index li { border-top: 1px solid var(--line); }
.index li:last-child { border-bottom: 1px solid var(--line); }
.index li.is-hidden { display: none; }
.index button { width: 100%; display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 24px; padding: 22px 0; text-align: left; transition: padding .5s var(--ease-out), color .3s; }
.index button:hover { padding-left: 18px; }
.index .ix__title { font-weight: 700; font-size: clamp(28px, 4.6vw, 76px); letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.index .ix__no, .index .ix__cats { color: var(--muted); }
.index:hover button { color: rgba(236, 235, 230, .28); }
.index:hover button:hover { color: var(--paper); }
.preview { position: fixed; top: 0; left: 0; z-index: 40; width: 300px; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease-out); }
.preview.is-on { opacity: 1; transform: scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }

/* Marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; background: var(--paper); color: var(--ink); }
.marquee__inner { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__inner span { font-weight: 700; font-size: clamp(15px, 1.6vw, 22px); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; padding-right: .6em; }
.marquee__inner span i { padding-left: .6em; font-style: normal; }
.marquee__inner span i .arw { height: .5em; vertical-align: .04em; }
@keyframes marquee { to { transform: translateX(-50%); } }

.link-arrow { font-weight: 500; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--paper); padding-bottom: 4px; }

/* Contact */
/* Merch : visuel de la nouvelle collection, actualités du shop, quelques pièces */
.merch { padding: clamp(64px, 10vh, 120px) var(--pad); border-top: 1px solid var(--line); }
.merch__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.merch__feature { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.merch__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.merch__feature:hover img { transform: scale(1.04); }
.merch__badge { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; background: var(--paper); color: var(--ink); }
.merch__title { margin: 0; font-weight: 700; font-size: clamp(40px, 6vw, 104px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.merch__title em { text-transform: none; letter-spacing: -.02em; }
.merch__lead { margin: 22px 0 0; max-width: 44ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.merch__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.merch__newsTitle { margin: clamp(28px, 4vh, 44px) 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.merch__news { list-style: none; margin: 0; padding: 0; }
.merch__news a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.merch__news a > * { grid-column: 1; }
.merch__news .mono { color: var(--muted); }
.merch__news b { margin-top: 8px; font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; text-transform: uppercase; }
.merch__news a > span:not(.mono) { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.merch__news i { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 26px; transition: transform .5s var(--ease-out); }
.merch__news a:hover i { transform: translate(4px, 4px); }
.merch__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 6vh, 72px); }
.merch__prodImg { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.merch__prodImg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.merch__prod:hover .merch__prodImg img { transform: scale(1.04); }
.merch__prodInfo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.merch__prodInfo b { font-weight: 700; font-size: 16px; line-height: 1.15; text-transform: uppercase; }
.merch__prodInfo span { font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) {
  .merch__top { grid-template-columns: 1fr; }
  .merch__feature { aspect-ratio: 4 / 3; }
  .merch__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact { padding: clamp(56px, 9vh, 110px) var(--pad) 40px; border-top: 1px solid var(--line); }
.contact__big { display: block; font-weight: 700; font-size: clamp(40px, 9.1vw, 168px); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.contact__big span { display: block; }
.contact__big em { text-transform: none; letter-spacing: -.03em; transition: color .4s; }
.contact__big b { display: inline-block; transition: transform .6s var(--ease-out); }
.contact__big b .arw { height: .62em; vertical-align: .04em; }
.contact__big:hover em { color: var(--muted); }
.contact__big:hover b { transform: translate(.1em, .08em); }
.contact__row { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 8vh, 96px); color: var(--muted); flex-wrap: wrap; }
.contact__row nav { display: flex; gap: 24px; }
.contact__row a .arw, .ft a .arw { height: .8em; margin-left: 4px; }
.contact__row a:hover { color: var(--paper); }

.ft { display: flex; justify-content: space-between; gap: 16px; padding: 24px var(--pad); border-top: 1px solid var(--line); color: var(--muted); flex-wrap: wrap; }
.ft a:hover { color: var(--paper); }

/* Salle (page projet) */
.room { position: fixed; inset: 0; z-index: 70; background: var(--room-bg, var(--ink)); color: var(--paper); clip-path: inset(0 50% 0 50%); transition: clip-path 1s var(--ease); }
.room.is-open { clip-path: inset(0 0 0 0); }
.room__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad) 36px; background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0)); pointer-events: none; }
.room__bar > * { pointer-events: auto; }
.room__left { display: flex; align-items: center; gap: 24px; }
.room__logo { font-family: var(--sans); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
@media (max-width: 767px) { .room__logo { font-size: 22px; } .room__left { gap: 14px; } }
.room__logo, #roomCounter, .room__close { white-space: nowrap; }
@media (max-width: 420px) { #roomCounter { display: none; } }
.room__close { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
.room__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--room-bg, var(--ink)); background-attachment: local; }
/* Projet sur fond clair (Jabberwocky, AMSEM, Mlle Pitch) : texte foncé */
.room.is-light { --paper: #0b0b0b; --muted: #5d5c58; --line: rgba(11, 11, 11, .14); --ink-2: #ececea; }
.room.is-light .room__bar { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0)); }
/* Projet sur fond coloré ou sombre (Adagio, Artbank, Colagreco) : textes secondaires plus clairs pour rester lisibles */
.room:not(.is-light) { --muted: rgba(236, 235, 230, .8); --line: rgba(236, 235, 230, .24); }
.room:not(.is-light) .room__bar { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
/* Image de présentation du projet : seule image qui peut être zoomée / recadrée (comme les cartes du showroom) */
.room__hero { height: 88vh; overflow: hidden; }
.room__hero img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--ease-out); }
.room.is-open .room__hero img { transform: scale(1); }
.room__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 40px var(--pad) 32px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.room__intro p { color: var(--muted); margin: 0 0 14px; }
.room__intro h2 { margin: 0; font-weight: 700; font-size: clamp(48px, 9vw, 160px); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.room__meta { margin: 0; color: var(--muted); text-align: right; }
.room__meta dt { margin-bottom: 8px; }
.room__meta dd { margin: 0; color: var(--paper); line-height: 1.7; }
.room__text { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(48px, 8vh, 96px) var(--pad); }
.room__lead { margin: 0; font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.room__text #roomBody p { margin: 0 0 1.2em; color: var(--muted); line-height: 1.65; }
.room__gallery { position: relative; padding: 0 var(--pad); column-gap: clamp(8px, 1.2vw, 16px); }
.room__gallery figure { position: absolute; margin: 0; overflow: hidden; background: rgba(127,127,127,.12); }
.room__gallery img, .room__gallery video { display: block; width: 100%; height: 100%; object-fit: contain; }
.room__next { display: block; width: 100%; text-align: left; margin-top: clamp(80px, 12vh, 140px); padding: 48px var(--pad) 64px; border-top: 1px solid var(--line); }
.room__next .mono { color: var(--muted); }
.room__nextTitle { display: block; margin-top: 16px; font-weight: 700; font-size: clamp(44px, 8vw, 140px); line-height: .9; letter-spacing: -.05em; text-transform: uppercase; transition: color .4s, transform .6s var(--ease-out); }
.room__next:hover .room__nextTitle { color: var(--muted); transform: translateX(16px); }

/* Mobile */
@media (max-width: 1024px) {
  :root { --hd-h: 76px; }
  .hd__nav { display: none; }
  .hd__burger { display: block; }
  .hd__logo { font-size: 28px; }
}
@media (min-width: 1025px) and (max-width: 1280px) { .hd__nav > ul > li > a, .hd__sub-toggle { font-size: 21px; } .hd__logo { font-size: 28px; } }
@media (min-width: 600px) and (max-width: 1024px) { .menu__projects ul { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
  .hero__foot span:first-child, .hero__foot span:last-child { display: none; }
  .hero__foot { justify-content: center; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 28px 20px; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); }
  .showroom__tools { width: 100%; align-items: flex-end; margin-top: -8px; }
  .rooms { height: auto !important; }
  .rooms__sticky { position: static; height: auto; padding: 16px 0 64px; }
  .rooms__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; scrollbar-width: none; padding-bottom: 8px; }
  .rooms__track::-webkit-scrollbar { display: none; }
  .card { width: 78vw; scroll-snap-align: center; }
  .card__frame img { transform: none; }
  .card__cta { opacity: 1; transform: none; }
  .index button { grid-template-columns: 1fr; gap: 6px; }
  .index .ix__no { display: none; }
  .room__text { grid-template-columns: 1fr; }
  .room__hero { height: 60vh; }
  .room__meta { text-align: left; }
  .contact__row { flex-direction: column; }
}



/* Textures photo (flous de mouvement noir et blanc) derrière les aplats noirs, en opacité réduite */
/* Fonds noirs : une photo noir et blanc à 10 % d'opacité au-dessus du noir (toute la page, et chaque section .tex) */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: url('img/fond-1.jpg') center / cover no-repeat; opacity: .1; pointer-events: none; }
.tex { isolation: isolate; background-color: #000; }
/* panneaux plein écran (menu, fiche produit) : la même photo à 10 % sur le noir */
body .menu, body .pd { background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url('img/fond-2.jpg') center / cover no-repeat #000; }
.tex:not(.menu):not(.rooms__sticky) { position: relative; } /* le menu (fixed) et la zone épinglée (sticky) gardent leur position */
.tex::before { content: ''; position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: .1; pointer-events: none; }
.tex--1::before { background-image: url('img/fond-1.jpg'); }
.tex--2::before { background-image: url('img/fond-2.jpg'); }
.tex--3::before { background-image: url('img/fond-3.jpg'); }

/* ===== Pages intérieures (Galerie, À propos) ===== */
.page-hero { padding: calc(var(--hd-h) + clamp(48px, 10vh, 120px)) var(--pad) clamp(40px, 6vh, 72px); border-bottom: 1px solid var(--line); }
.page-hero__title { margin: 0; font-weight: 700; font-size: var(--title-xl); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.page-hero__title em { text-transform: none; letter-spacing: -.02em; }
.page-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(32px, 5vh, 56px); flex-wrap: wrap; }
.page-hero__lead { margin: 0; max-width: 44ch; font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; }
.page-hero__count { margin: 0; color: var(--muted); }

/* Galerie : bandeau plus sombre, titre à gauche et maquette 3D du salon 701 à droite */
.gal-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding-top: calc(var(--hd-h) + clamp(24px, 5vh, 64px)); padding-bottom: clamp(32px, 5vh, 56px); } /* fond transparent : la photo de fond à 10 % se voit */
.gal-hero .page-hero__title { font-size: clamp(44px, 7.4vw, 128px); }
.gal-hero .page-hero__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
.gal-hero__room { width: 100%; height: clamp(260px, 42vh, 460px); }
@media (max-width: 767px) { .gal-hero { grid-template-columns: 1fr; } .gal-hero__room { height: 72vw; } }

/* Galerie : mur de visuels en colonnes (4 / 3 / 2) */
.gal-tools { position: sticky; top: 0; z-index: 20; padding: 16px max(var(--pad), calc(var(--corner) + 12px)); background: rgba(0, 0, 0, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.gal-tools .filters { justify-content: flex-start; max-width: none; }
.gal { --gap: clamp(12px, 1.4vw, 20px); column-count: 4; column-gap: var(--gap); padding: var(--gap) var(--pad) clamp(80px, 12vh, 140px); }
.gal__item { display: block; width: 100%; margin: 0 0 var(--gap); break-inside: avoid; text-align: left; opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.gal__item.is-in { opacity: 1; transform: none; }
.gal__item.is-hidden { display: none; }
.gal__frame { display: block; overflow: hidden; background: var(--ink-2); }
.gal__frame img { width: 100%; height: auto; transition: transform 1s var(--ease-out); }
.gal__item:hover .gal__frame img { transform: scale(1.04); }
.gal__info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 2px; }
.gal__title { font-weight: 700; font-size: 15px; line-height: 1.15; text-transform: uppercase; }
.gal__cat { color: var(--muted); font-size: 10px; text-align: right; flex-shrink: 0; }

/* Visionneuse plein écran */
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 72px clamp(16px, 7vw, 120px) 32px; background: rgba(8, 8, 8, .97); opacity: 0; transition: opacity .45s var(--ease-out); }
.lb.is-open { opacity: 1; }
.lb__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 24px var(--pad); color: var(--muted); }
.lb__close { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--paper); }
.lb__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 100%; max-height: 100%; }
.lb__figure img { max-width: 100%; max-height: calc(100svh - 190px); object-fit: contain; }
.lb__caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 18px; text-align: center; }
.lb__title { font-weight: 700; font-size: clamp(20px, 2vw, 28px); text-transform: uppercase; letter-spacing: -.01em; }
.lb__cats { color: var(--muted); }
.lb__door { color: var(--paper); border-bottom: 1px solid var(--paper); padding-bottom: 2px; }
.lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(236, 235, 230, .08); border: 1px solid var(--line); transition: background .25s, color .25s; }
.lb__nav:hover { background: var(--paper); color: var(--ink); }
.lb__nav svg { width: 20px; height: 20px; }
.lb__nav--prev { left: clamp(10px, 2vw, 32px); } .lb__nav--next { right: clamp(10px, 2vw, 32px); }

/* À propos */
.about-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(64px, 10vh, 120px) var(--pad); }
.about-intro__lead { margin: 0; font-weight: 500; font-size: clamp(26px, 3.2vw, 52px); line-height: 1.06; letter-spacing: -.03em; }
.about-intro__text p { margin: 0 0 1.2em; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 52ch; }
.about-photo { margin: 0 var(--pad) clamp(64px, 10vh, 120px); overflow: hidden; aspect-ratio: 16 / 9; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv { padding: clamp(80px, 12vh, 140px) max(var(--pad), calc((100% - 1400px) / 2)); } /* CV centré, 1400 px au plus */
/* La photo reste à sa place dans la page (ni collante, ni parallaxe) ; le nom et le titre à côté */
.cv__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(56px, 9vh, 110px); }
.cv__portrait { margin: 0; overflow: hidden; }
.cv__portrait img { display: block; width: 100%; height: auto; }
.cv__name { margin: 0; font-weight: 700; font-size: var(--title-xl); line-height: .84; letter-spacing: -.05em; text-transform: uppercase; }
.cv__title { margin: 16px 0 0; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.1; }
.cv__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.cv__col--exp { grid-column: span 2; }
.cv__exp { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); align-items: start; } /* deux listes côte à côte : chaque colonne garde son propre rythme */
.cv__grid .cv__item { grid-template-columns: 1fr; gap: 4px; align-content: start; } /* la date au-dessus : les colonnes restent lisibles */
@media (max-width: 1200px) { .cv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .cv__top { grid-template-columns: 1fr; }
  .cv__grid { grid-template-columns: 1fr; }
  .cv__col--exp { grid-column: auto; }
  .cv__exp { grid-template-columns: 1fr; row-gap: 22px; }
}
.cv__h { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: -.01em; }
.cv__h .arw { height: .68em; }
.cv__col > .cv__h:not(:first-child) { margin-top: 44px; }
.cv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cv__item { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.cv__date { color: var(--muted); font-size: 17px; line-height: 1.2; }
.cv__item h4, .cv__langs h4 { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.25; text-transform: uppercase; }
.cv__item p, .cv__langs p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.cv__item .cv__role { color: var(--paper); font-weight: 500; }
.cv__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv__skills .chip { color: var(--paper); border-color: rgba(236, 235, 230, .35); }
.cv__langs { gap: 14px; }
.about-links { padding: clamp(64px, 10vh, 120px) var(--pad) clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.about-links__list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: var(--title-xl); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.about-links__list a:first-child { border-top: 1px solid var(--line); }
.about-links__list b { display: inline-flex; transition: transform .5s var(--ease-out); }
.about-links__list b .arw { height: .62em; }
.about-links__list a:hover b { transform: translate(.1em, .08em); }
.about-links__contact { display: inline-block; margin-top: 40px; }
a.chip { display: inline-block; }


/* Contact */
.contact-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); padding: clamp(56px, 9vh, 110px) var(--pad); align-items: start; }
.cform { display: grid; gap: 28px; }
.cform__field { display: grid; gap: 10px; }
.cform__field span { color: var(--muted); }
.cform input, .cform textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--paper); font: 500 clamp(20px, 2vw, 28px) / 1.3 var(--sans); outline: none; transition: border-color .3s; resize: vertical; }
.cform input:focus, .cform textarea:focus { border-color: var(--paper); }
.cform__send { justify-self: start; display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 99px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 20px; text-transform: uppercase; transition: transform .4s var(--ease-out); }
.cform__send:hover { transform: translateX(6px); }
.cform__note { min-height: 1em; margin: 0; color: var(--muted); }
.contact-info__lead { margin: 0 0 36px; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.01em; }
.contact-info__list { margin: 0 0 40px; display: grid; gap: 20px; }
.contact-info__list dt { color: var(--muted); margin-bottom: 6px; }
.contact-info__list dd { margin: 0; font-weight: 700; font-size: 20px; text-transform: none; }
.contact-info__list a .arw { height: .7em; margin-left: 6px; }
.contact-info__links a { font-size: clamp(32px, 4vw, 64px); }
@media (max-width: 900px) { .contact-page { grid-template-columns: 1fr; } }


/* Boutique */
.shop-feature { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 70vh; border-bottom: 1px solid var(--line); }
.shop-feature__img { overflow: hidden; }
.shop-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.shop-feature__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: clamp(32px, 5vw, 72px) var(--pad); }
.shop-feature__text .mono { margin: 0; color: var(--muted); }
.shop-feature__text h2 { margin: 0; font-weight: 700; font-size: clamp(48px, 6.4vw, 110px); line-height: .86; letter-spacing: -.05em; text-transform: uppercase; }
.shop-feature__text h2 em { text-transform: none; letter-spacing: -.02em; }
.shop-feature__text p:not(.mono) { margin: 0; max-width: 42ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.shop-feature__text .link-arrow { align-self: flex-start; margin-top: 8px; }
.shop { --gap: clamp(12px, 1.6vw, 24px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--gap); padding: var(--gap) var(--pad) clamp(64px, 10vh, 120px); }
.prod { display: flex; flex-direction: column; opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.prod.is-in { opacity: 1; transform: none; }
.prod.is-hidden { display: none; }
.prod__open { display: block; width: 100%; text-align: left; }
.prod__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.prod__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease-out), transform 1.2s var(--ease-out); }
.prod__alt { opacity: 0; }
.prod:hover .prod__alt { opacity: 1; }
.prod:hover .prod__frame img { transform: scale(1.04); }
.prod__badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 6px 10px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 10px; }
.prod__info { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.prod__name { margin: 0; font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.prod__cat { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.prod__price { margin: 0; font-weight: 700; font-size: 18px; white-space: nowrap; }
.prod__add { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 0; color: var(--muted); transition: color .25s; }
.prod__add:hover { color: var(--paper); }
.shop-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: clamp(48px, 8vh, 96px) var(--pad); border-top: 1px solid var(--line); }
.shop-notes h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; font-size: 20px; text-transform: uppercase; }
.shop-notes p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 36ch; }

/* Fiche produit : plein écran sans scroll — photos qui défilent, infos, carrousel des autres pièces */
.pd { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100svh; overflow: hidden; background: #000; color: var(--paper); opacity: 0; transition: opacity .45s var(--ease-out); }
.pd.is-open { opacity: 1; }
.pd__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--pad); border-bottom: 1px solid var(--line); }
.pd__crumb { margin: 0; color: var(--muted); }
.pd__close { color: var(--paper); }
.pd__main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 0; }
.pd__slider { position: relative; min-height: 0; }
.pd__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pd__track::-webkit-scrollbar { display: none; }
.pd__slide { flex: 0 0 100%; display: grid; place-items: center; height: 100%; margin: 0; padding: clamp(14px, 2.4vw, 36px) clamp(56px, 6vw, 80px); scroll-snap-align: start; }
.pd__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd__nav { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center; background: rgba(236, 235, 230, .08); border: 1px solid var(--line); transition: background .25s, color .25s; }
.pd__nav:hover { background: var(--paper); color: var(--ink); }
.pd__nav svg { width: 18px; height: 18px; }
.pd__nav--prev { left: 12px; } .pd__nav--next { right: 12px; }
.pd__count { position: absolute; left: 50%; bottom: 10px; margin: 0; transform: translateX(-50%); color: var(--muted); }
.pd__info { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; overflow: hidden; padding: clamp(20px, 3vw, 48px) var(--pad); border-left: 1px solid var(--line); }
.pd__cat { margin: 0; color: var(--muted); }
.pd__name { margin: 0; font-weight: 700; font-size: clamp(28px, 3vw, 48px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.pd__price { margin: 0; font-weight: 700; font-size: 22px; }
.pd__text { margin: 0; max-width: 46ch; color: var(--muted); font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pd__sizes { display: flex; gap: 8px; }
.pd__sizes .chip { min-width: 46px; min-height: 42px; font-size: 13px; color: var(--paper); }
.pd__add { align-self: flex-start; }
.pd__add:disabled, .cart__checkout:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pd__note { margin: 0; color: var(--muted); }
.pd__more { padding: 12px 0 16px; border-top: 1px solid var(--line); }
.pd__moreHead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 10px; padding: 0 var(--pad); }
.pd__moreTitle { margin: 0; color: var(--muted); }
.pd__railNav { display: flex; gap: 8px; }
.pd__railBtn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background .25s, color .25s, opacity .25s; }
.pd__railBtn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.pd__railBtn:disabled { opacity: .3; cursor: default; }
.pd__railBtn svg { width: 16px; height: 16px; }
/* 5 pièces visibles à la fois (4 sur tablette et téléphone), le reste derrière les flèches */
.pd__rail { --mini-h: clamp(84px, 14svh, 150px); --per: 5; --rgap: 12px; display: flex; gap: var(--rgap); overflow-x: auto; margin: 0 var(--pad); scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd__rail::-webkit-scrollbar { display: none; }
.pd__mini { flex: 0 0 auto; width: calc((100% - var(--rgap) * (var(--per) - 1)) / var(--per)); text-align: left; scroll-snap-align: start; }
.pd__miniImg { display: block; height: var(--mini-h); overflow: hidden; background: var(--ink-2); }
.pd__miniImg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pd__mini:hover .pd__miniImg img { transform: scale(1.05); }
.pd__miniName { display: block; margin-top: 7px; overflow: hidden; font-weight: 700; font-size: 12px; line-height: 1.15; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.pd__miniPrice { color: var(--muted); font-size: 10px; }
/* Fiche produit : la flèche (accueil) et le burger (menu) restent accessibles au-dessus de la fiche */
body.pd-open .corner { transform: none; z-index: 90; }
body.pd-open .menu { z-index: 89; }
.pd__bar { padding-inline: max(var(--pad), calc(var(--corner) + 16px)); }
@media (min-width: 1200px) {
  /* éléments plus petits, 150 px de marge sur les côtés */
  .pd { --pad: 150px; }
  .pd__main { padding: 0 var(--pad); }
  .pd__slide { padding: clamp(14px, 2vw, 28px) 64px; }
  .pd__info { gap: 12px; padding: clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 40px) clamp(32px, 3vw, 56px); }
  .pd__name { font-size: clamp(24px, 2.2vw, 36px); }
  .pd__price { font-size: 19px; }
  .pd__text { font-size: 15px; }
  .pd__rail { --mini-h: clamp(72px, 11svh, 120px); }
}
@media (max-width: 1024px) { .pd__rail { --per: 4; } }
@media (max-width: 767px) {
  .pd__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pd__slide { padding: 10px 48px; }
  .pd__nav { width: 38px; height: 38px; margin-top: -19px; }
  .pd__nav--prev { left: 6px; } .pd__nav--next { right: 6px; }
  .pd__info { gap: 8px; padding: 14px var(--pad); border-left: 0; border-top: 1px solid var(--line); }
  .pd__name { font-size: 24px; }
  .pd__price { font-size: 18px; }
  .pd__text { font-size: 14px; -webkit-line-clamp: 2; }
  .pd__sizes .chip { min-width: 40px; min-height: 36px; }
  .pd__add { padding: 13px 20px; font-size: 15px; }
  .pd__note { display: none; }
  .pd__rail { --mini-h: 12svh; --rgap: 8px; }
  .pd__railBtn { width: 34px; height: 34px; }
}

/* Panier */
.cart-btn { position: fixed; right: var(--pad); bottom: 24px; z-index: 75; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.cart-btn b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 500; }
.cart-btn.is-bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.12); } }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(460px, 100%); display: flex; flex-direction: column; background: #000; border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .55s var(--ease); }
.cart.is-open { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad); border-bottom: 1px solid var(--line); }
.cart__head h2 { margin: 0; font-weight: 700; font-size: 28px; text-transform: uppercase; }
.cart__list { list-style: none; margin: 0; padding: 8px var(--pad); flex: 1; overflow-y: auto; }
.cart__line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart__line img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; }
.cart__line h4 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; }
.cart__line .mono { margin: 0; color: var(--muted); }
.cart__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart__right button { color: var(--muted); }
.cart__empty { padding: 32px 0; color: var(--muted); }
.cart__foot { display: grid; gap: 14px; padding: 20px var(--pad) 28px; border-top: 1px solid var(--line); }
.cart__total { display: flex; justify-content: space-between; margin: 0; font-size: 20px; text-transform: uppercase; }
.cart__checkout { justify-self: stretch; justify-content: center; }
.cart__note { margin: 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 1024px) { .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shop-feature { grid-template-columns: 1fr; min-height: 0; }
  .shop-feature__img { aspect-ratio: 4 / 3; }
  .shop-notes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .prod__info { flex-direction: column; gap: 6px; }
  .prod__name { font-size: 15px; }
  .prod__price { font-size: 16px; }
}


/* ===== 701 SHOP (inspirations GAZU, Lucir, VLOM au style 701) ===== */
.sh-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.sh-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.sh-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.1) 35%, rgba(5,5,5,.25) 60%, rgba(5,5,5,.85) 100%); }
.sh-hero__kicker, .sh-hero__season { position: absolute; top: calc(var(--hd-h) + 24px); margin: 0; font-size: 12px; letter-spacing: .3em; line-height: 1.9; }
.sh-hero__kicker { left: var(--pad); }
.sh-hero__season { right: var(--pad); text-align: right; }
.sh-hero__kicker::after, .sh-hero__season::after { content: ''; display: block; width: 32px; height: 1px; margin-top: 10px; background: currentColor; }
.sh-hero__season::after { margin-left: auto; }
.sh-hero__cta { position: absolute; left: var(--pad); bottom: calc(2.2vw + (100vw - 2 * var(--pad)) * .257 * .8 + 36px); display: flex; align-items: center; gap: 24px; }
.sh-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; transition: transform .4s var(--ease-out); }
.sh-btn:hover { transform: translateX(6px); }
.sh-link { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.sh-hero__word { --word: calc((100vw - 2 * var(--pad)) * .257); position: absolute; left: 0; right: 0; bottom: 2.2vw; margin: 0; display: flex; justify-content: flex-start; padding: 0 var(--pad); font-weight: 700; font-size: var(--word); /* collé à gauche, aligné sur « Shop now », sur toute la largeur des contenus */ line-height: .78; letter-spacing: -.055em; text-transform: uppercase; color: var(--paper); pointer-events: none; }

.sh-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(32px, 5vh, 56px) var(--pad); }
.sh-cat { display: grid; grid-template-columns: clamp(90px, 9vw, 140px) 1fr; gap: 20px; align-items: center; }
.sh-cat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sh-cat h2 { margin: 0 0 8px; font-weight: 700; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; letter-spacing: .02em; }
.sh-cat p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.sh-cat .mono { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.sh-cat:hover .mono { color: var(--muted); }

/* Collections du shop : en-tête (numéro, nom, texte), film pour 701's ARTBANK, puis les pièces */
.sh-col { padding: clamp(56px, 9vh, 110px) 0 0; border-top: 1px solid var(--line); }
.sh-col__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'kicker kicker' 'name text' 'name count'; gap: 12px clamp(24px, 4vw, 64px); align-items: end; padding: 0 var(--pad) clamp(20px, 3vh, 32px); }
.sh-col__kicker { grid-area: kicker; margin: 0; color: var(--muted); letter-spacing: .2em; }
.sh-col__name { grid-area: name; margin: 0; font-weight: 700; font-size: clamp(40px, 6vw, 104px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.sh-col__text { grid-area: text; margin: 0; max-width: 46ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.sh-col__count { grid-area: count; margin: 0; color: var(--muted); }
.sh-col__film { position: relative; margin: 0 var(--pad) var(--gap, 16px); aspect-ratio: 21 / 9; overflow: hidden; }
.sh-col__film video { width: 100%; height: 100%; object-fit: cover; }
.sh-col__film figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; background: rgba(0, 0, 0, .6); }
.sh-col__grid { padding-bottom: clamp(48px, 8vh, 96px); }
@media (max-width: 767px) {
  .sh-col__head { grid-template-columns: 1fr; grid-template-areas: 'kicker' 'name' 'text' 'count'; }
  .sh-col__film { aspect-ratio: 4 / 3; }
}

.sh-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: clamp(32px, 5vh, 56px) var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.sh-trust > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.sh-trust > div > span { grid-row: span 2; display: flex; }
.sh-trust .arw { height: 26px; }
.sh-trust h3 { margin: 0; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.sh-trust p { margin: 2px 0 0; color: #5d5c58; font-size: 14px; }

.sh-all__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: clamp(56px, 9vh, 110px) var(--pad) 16px; }
.sh-all__head h2 { margin: 0; font-weight: 700; font-size: clamp(36px, 4.4vw, 72px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.sh-all__head .mono { margin: 0; color: var(--muted); }

@media (max-width: 1024px) {
  .sh-cats { grid-template-columns: 1fr; gap: 20px; }
  .sh-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sh-hero { min-height: 560px; }
  .sh-hero__kicker, .sh-hero__season { font-size: 10px; letter-spacing: .22em; }
  .sh-hero__word { font-size: 18vw; bottom: 4vw; }
  .sh-hero__cta { bottom: calc(18vw + 40px); gap: 18px; }
  .sh-btn { padding: 14px 18px; font-size: 13px; }
  .sh-trust { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) { .gal { column-count: 3; } }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .gal { column-count: 2; }
  .gal__info { flex-direction: column; gap: 4px; }
  .gal__cat { text-align: left; }
  /* Tags toujours sur deux lignes : la suite défile sur le côté */
  .gal-tools .filters { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .gal-tools .filters::-webkit-scrollbar { display: none; }
  .gal-tools .chip { flex-shrink: 0; }
  .cv__item { grid-template-columns: 1fr; gap: 4px; }
  .lb__nav { top: auto; bottom: 18px; margin-top: 0; }
  .lb { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* 701 STUDIO v4 — test de structure : Portfolio · Galerie · Shop · Studio.
   Chargé après style.css (v3), dont il reprend la base et ne remplace que ce qui change. */

/* ===== Header : logo en typographies mêlées, quatre rubriques numérotées, bouton « Un projet ? » ===== */
.hd { gap: 32px; }
.hd__logo { display: inline-flex; align-items: baseline; gap: .14em; font-size: 30px; text-transform: none; }
.hd__logo b { font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.hd__logo em { font-size: 1.1em; letter-spacing: -.01em; }
.hd__nav { margin-left: auto; }
.hd__nav > ul { gap: clamp(22px, 2.6vw, 44px); }
.hd__nav > ul > li > a { gap: 6px; align-items: flex-start; font-size: 18px; letter-spacing: .02em; }
.hd__nav > ul > li > a small { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .03em; color: var(--muted); margin-top: -3px; }
.hd__nav > ul > li > a::after { height: 2px; }
.hd__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid currentColor; border-radius: 99px; font-size: 11px; white-space: nowrap; transition: background .3s, color .3s; }
.hd__cta:hover { background: var(--paper); color: var(--ink); }
.hd__cta .arw { height: .8em; }
@media (min-width: 1025px) and (max-width: 1280px) { .hd__nav > ul > li > a { font-size: 16px; } .hd__logo { font-size: 26px; } }
@media (max-width: 1024px) { .hd__cta { margin-left: auto; } }
@media (max-width: 560px) { .hd__cta { display: none; } .hd__logo { font-size: 26px; } }

/* ===== Menu plein écran : quatre rubriques, l'image de la rubrique survolée en fond ===== */
.menu__bg { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: 0; transform: scale(1.08); filter: grayscale(.2) brightness(.55); transition: opacity .6s var(--ease-out), transform 1.4s var(--ease-out); pointer-events: none; }
.menu { isolation: isolate; }
.menu__bg.is-on { opacity: .45; transform: none; }
.menu__big a em { align-self: flex-end; margin-left: .2em; font-size: .38em; text-transform: none; letter-spacing: 0; color: var(--muted); }
.menu.is-open .menu__big li:nth-child(4) a { transition-delay: .36s; }
.menu__big a:hover { color: var(--paper); }
.menu__big:hover a:not(:hover) { color: rgba(236, 235, 230, .35); }
.menu__projects a { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.menu__projects a:hover { color: var(--muted); }
.menu__foot a:hover { color: var(--paper); }

/* ===== Transitions entre pages : rideau noir avec le nom du studio ===== */
.pt { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; transform: translateY(100%); pointer-events: none; }
.pt__mark { display: inline-flex; align-items: baseline; gap: .16em; font-size: clamp(28px, 3vw, 44px); color: var(--paper); opacity: 0; transform: translateY(14px); }
.pt__mark b { font-weight: 700; letter-spacing: -.04em; }
.pt__mark em { font-size: 1.1em; }
.pt.is-in { transform: none; transition: transform .6s var(--ease); }
.pt.is-in .pt__mark { opacity: 1; transform: none; transition: opacity .4s .25s, transform .6s .2s var(--ease-out); }
.pt.is-cover { transform: none; transition: none; }
.pt.is-cover .pt__mark { opacity: 1; transform: none; }
.pt.is-out { transform: translateY(-100%); transition: transform .9s var(--ease) .1s; }
.pt.is-out .pt__mark { opacity: 0; transition: opacity .3s; }

/* ===== Titres de section partagés ===== */
.v4-head { display: grid; gap: 18px; padding: 0 var(--pad) clamp(32px, 5vh, 56px); }
.v4-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.v4-title { margin: 0; font-weight: 700; font-size: clamp(40px, 6vw, 104px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.v4-title em { text-transform: none; letter-spacing: -.02em; }
.v4-lead { margin: 0; max-width: 46ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.v4-display { margin: 0; font-weight: 700; font-size: clamp(56px, 12vw, 210px); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.v4-display .line + .line { font-size: .4em; line-height: 1.05; margin-top: .15em; } /* la deuxième ligne en italique, plus petite */
.v4-display em { text-transform: none; letter-spacing: -.01em; }
@media (max-width: 767px) { .v4-head--row { grid-template-columns: 1fr; } }

/* ===== Accueil : bas du hero, projets 701 en plans cinéma, actualités ===== */
.hero__port { display: inline-flex; align-items: center; gap: 8px; }
.hero__port .arw { height: .8em; }
.hero__port:hover { color: var(--muted); }

.p701 { padding: clamp(72px, 12vh, 140px) 0 clamp(40px, 6vh, 72px); }
.p701__list { display: grid; gap: clamp(12px, 1.6vw, 24px); padding: 0 var(--pad); }
.plan { --par: 0; position: relative; display: block; height: clamp(440px, 82vh, 860px); overflow: hidden; isolation: isolate; color: #f2f1ec; }
.plan.reveal { opacity: 1; transform: none; clip-path: inset(10% 5% 10% 5%); transition: clip-path 1.6s var(--ease-out); }
.plan.reveal.is-in { clip-path: inset(0); }
.plan__media { position: absolute; inset: 0; z-index: -2; }
.plan__media img, .plan__media video { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--par) * -5%)) scale(1.18); transition: transform 1.4s var(--ease-out); }
.plan:hover .plan__media img, .plan:hover .plan__media video { transform: translateY(calc(var(--par) * -5%)) scale(1.24); }
.plan__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .85) 100%); }
.plan__top { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; gap: 16px; }
.plan__body { position: absolute; left: 24px; right: 24px; bottom: 26px; display: grid; gap: 10px; }
.plan__title { font-weight: 700; font-size: clamp(52px, 10vw, 180px); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; transition: transform .9s var(--ease-out); }
.plan__sub { font-size: clamp(22px, 2.6vw, 42px); line-height: 1.05; }
.plan__cta { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 8px; padding: 10px 14px; background: #f2f1ec; color: #0b0b0b; transform: translateY(10px); opacity: 0; transition: .5s var(--ease-out); }
.plan__cta .arw { height: .8em; }
.plan:hover .plan__cta, .plan:focus-visible .plan__cta { transform: none; opacity: 1; }
.plan:hover .plan__title { transform: translateX(14px); }
@media (hover: none) { .plan__cta { opacity: 1; transform: none; } }
@media (max-width: 767px) { .plan { height: 78svh; } .plan__top span:last-child { display: none; } }

.news { padding: clamp(72px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); padding: 0 var(--pad); }
.news__card { display: grid; gap: 12px; align-content: start; }
.news__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.news__card:hover .news__img img { transform: scale(1.05); }
.news__date { margin-top: 6px; color: var(--muted); }
.news__title { font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.news__title em { text-transform: none; font-weight: 400; }
.news__text { color: var(--muted); font-size: 15px; line-height: 1.5; }
.news__card:nth-child(2) { transition-delay: .1s; } .news__card:nth-child(3) { transition-delay: .2s; }
@media (max-width: 900px) { .news__grid { grid-template-columns: 1fr; } .news__img { aspect-ratio: 4 / 3; } }

/* ===== Portfolio ===== */
/* Sur cette page, les contenus s'alignent sur le bord intérieur du carré de la flèche (en haut à gauche) */
@media (min-width: 768px) { .page-portfolio :is(main, .elementor) { --pad: var(--corner); } }

/* Écran d'accueil : composition typographique mixte entre crochets, miniatures des projets en fond */
.pfx { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hd-h) + 8px) var(--pad) 0; overflow: hidden; }
.pfx__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.pfx__bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); filter: grayscale(1) contrast(1.15); transition: opacity .45s ease, transform 3s linear; }
.pfx__bg > .is-on { opacity: .36; transform: scale(1); }
.pfx::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .88)), linear-gradient(to bottom, var(--ink), transparent 22%, transparent 78%, var(--ink)); }
.pfx__tag { margin: 0; }
.pfx__comp { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "top top top" "l1 br r1" "l2 br r2" "bot bot bot"; column-gap: clamp(12px, 1.4vw, 26px); align-items: center; font-size: clamp(44px, 7.6vw, 140px); line-height: .9; text-transform: uppercase; }
.pfx__w { display: block; overflow: hidden; padding: .02em .14em .22em; margin: 0 -.14em -.2em; } /* marge pour la queue du Q et la pente des italiques */
.pfx__w > span { display: inline-block; transform: translateY(108%); transition: transform 1.3s var(--ease-out); }
.pfx.is-in .pfx__w > span { transform: none; }
.pfx__w.b { font-weight: 700; letter-spacing: -.045em; }
.pfx__w.s { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .86em; letter-spacing: -.01em; } /* la typo secondaire, en capitales italiques (Ivy Presto, plus large : .86em pour tenir dans l'écran) */
.pfx__top { grid-area: top; justify-self: center; position: relative; }
.pfx__l1 { grid-area: l1; justify-self: end; } .pfx__r1 { grid-area: r1; justify-self: start; }
.pfx__l2 { grid-area: l2; justify-self: end; } .pfx__r2 { grid-area: r2; justify-self: start; }
.pfx__bot { grid-area: bot; justify-self: center; position: relative; }
.pfx__top .pfx__w > span { transition-delay: .15s; }
.pfx__l1 > span { transition-delay: .3s; } .pfx__r1 > span { transition-delay: .38s; }
.pfx__l2 > span { transition-delay: .46s; } .pfx__r2 > span { transition-delay: .54s; }
.pfx__bot .pfx__w > span { transition-delay: .62s; }
/* Les « mains » du modèle deviennent la flèche 701, à la hauteur des capitales ; elles débordent du mot pour qu'il reste centré */
.pfx__hand { position: absolute; top: 50%; display: flex; opacity: 0; transform: translateY(-50%); translate: -.5em 0; transition: opacity .8s .9s, translate 1.2s var(--ease-out) .9s; }
.pfx__hand .arw { height: .7em; }
.pfx__top .pfx__hand { right: 100%; margin-right: .2em; }
.pfx__top .pfx__hand .arw { height: .72em; }
.pfx__hand--back { left: 100%; margin-left: .2em; transform: translateY(-50%) scaleX(-1); translate: .5em 0; }
.pfx.is-in .pfx__hand { opacity: 1; translate: 0 0; }
/* Crochets : ils s'ouvrent sur la hauteur des deux lignes, le texte apparaît ensuite */
.pfx__br { grid-area: br; position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 clamp(16px, 1.6vw, 28px); font-size: clamp(9px, .72vw, 11px); line-height: 1.6; text-align: center; text-transform: uppercase; }
.pfx__br > span { max-width: 30ch; opacity: 0; transition: opacity 1s 1.2s; }
.pfx.is-in .pfx__br > span { opacity: 1; }
.pfx__br::before, .pfx__br::after { content: ''; position: absolute; top: 8%; bottom: 8%; width: clamp(10px, 1.1vw, 18px); border: clamp(2px, .22vw, 4px) solid var(--paper); transform: scaleY(0); transition: transform 1s var(--ease-out) .7s; }
.pfx__br::before { left: 0; border-right: 0; }
.pfx__br::after { right: 0; border-left: 0; }
.pfx.is-in .pfx__br::before, .pfx.is-in .pfx__br::after { transform: none; }
.pfx__foot { grid-row: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); }
.pfx__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.pfx__foot a .arw { height: 9px; }
.pfx__now i { display: inline-block; width: 28px; height: 1px; margin: 0 8px; vertical-align: middle; background: currentColor; }
@media (max-width: 767px) {
  .pfx__comp { grid-template-columns: auto auto; grid-template-areas: "top top" "l1 r1" "l2 r2" "br br" "bot bot"; justify-content: center; column-gap: .22em; font-size: 10.4vw; }
  .pfx__w.s { font-size: .74em; }
  .pfx__br { margin: 14px 0 10px; padding: 12px 20px; font-size: 10px; }
  .pfx__br::before, .pfx__br::after { top: 0; bottom: 0; width: 10px; border-width: 2px; }
  .pfx__now { display: none; }
}

/* Présentation de Pierre : la photo s'aligne à gauche, sur le même bord que le reste de la page */
.pf-hero { padding: clamp(56px, 10vh, 120px) var(--pad); border-top: 1px solid var(--line); }
.pf-hero > .section-tag { margin: 0 0 clamp(24px, 4vh, 40px); }
.pf-me { display: grid; grid-template-columns: clamp(180px, 20vw, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.pf-me__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.pf-me__photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-me__text { max-width: 860px; }
.pf-me__text > p { margin: 0 0 18px; max-width: 58ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.pf-me__name { color: var(--paper) !important; font-size: clamp(24px, 2.4vw, 36px) !important; line-height: 1.05 !important; }
.pf-me__name b { font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.pf-me__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-me__facts dt { color: var(--muted); margin-bottom: 6px; }
.pf-me__facts dd { margin: 0; text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.pf-me__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
@media (max-width: 767px) { .pf-me { grid-template-columns: 1fr; } .pf-me__photo { max-width: 260px; } .pf-me__facts { grid-template-columns: 1fr; } }

/* Projets : barre (bouton Grille / Liste à gauche), puis la grille ou l'index */
.pf-list { position: relative; padding: clamp(40px, 6vh, 72px) var(--pad) clamp(72px, 12vh, 140px); }
.pf-list__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; color: var(--muted); }
.pf-toggle { padding: 4px; }
.pf-toggle button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 13px; }
.ico { display: inline-block; width: 13px; height: 13px; --c: linear-gradient(currentColor, currentColor); }
.ico--grid { background: var(--c) 0 0 / 5px 5px no-repeat, var(--c) 100% 0 / 5px 5px no-repeat, var(--c) 0 100% / 5px 5px no-repeat, var(--c) 100% 100% / 5px 5px no-repeat; }
.ico--list { background: var(--c) 0 1px / 100% 2px no-repeat, var(--c) 0 50% / 100% 2px no-repeat, var(--c) 0 calc(100% - 1px) / 100% 2px no-repeat; }
.pf-grid[hidden], .pf-index[hidden] { display: none; }
/* Ligne de fiche technique : intitulé, pointillés, valeur */
.dl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dl > span { flex: none; color: var(--muted); }
.dl i { flex: 1 1 auto; min-width: 18px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-3px); }
.dl b { font-weight: 500; text-align: right; }

/* Grille : de grandes miniatures dans un cadre fin, une seule ligne de texte (le n°, le titre, le client) */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 32px); }
.pf-card { display: grid; gap: 14px; padding: clamp(8px, .7vw, 12px); border: 1.5px solid rgba(236, 235, 230, .45); transition: border-color .3s; }
.pf-card:hover { border-color: var(--paper); }
.pf-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.pf-card__img { position: relative; }
.pf-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.pf-card__tag { position: absolute; left: 12px; top: 12px; padding: 7px 10px; background: var(--ink); color: var(--paper); }
.pf-card:hover .pf-card__img img { transform: scale(1.05); }
.pf-card__info { display: flex; align-items: baseline; gap: 14px; padding: 2px 4px 4px; }
.pf-card__info b { font-weight: 700; font-size: clamp(22px, 2.3vw, 40px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.pf-card__no, .pf-card__client { color: var(--muted); }
.pf-card__client { margin-left: auto; text-align: right; }
.pf-card:nth-child(even) { transition-delay: .1s; }
@media (min-width: 768px) and (max-width: 1199px) { .pf-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .pf-card:last-child:nth-child(odd) .pf-card__img { aspect-ratio: 32 / 9; } } /* deux colonnes et nombre impair : la dernière carte prend toute la largeur, pas de trou */
@media (min-width: 1200px) { .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-card:nth-child(3n + 2) { transition-delay: .1s; } .pf-card:nth-child(3n) { transition-delay: .2s; } .pf-card__info b { font-size: clamp(18px, 1.6vw, 26px); white-space: nowrap; } .pf-card__client { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /* ordinateur : 3 projets par ligne */
@media (max-width: 767px) { .pf-grid { grid-template-columns: 1fr; } .pf-card__client { display: none; } }

/* Index : (n°) et le titre à gauche, la fiche technique à droite, sur une seule ligne */
.pf-index { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid rgba(236, 235, 230, .6); }
.pf-index li { border-bottom: 1.5px solid rgba(236, 235, 230, .6); }
.pf-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 840px) 28px; gap: 20px; align-items: center; padding: clamp(10px, 1.6vh, 16px) 0; transition: opacity .4s; }
.pf-index:hover .pf-row { opacity: .3; }
.pf-index:hover .pf-row:hover { opacity: 1; }
.pf-row__no { font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); line-height: 1; letter-spacing: -.02em; }
.pf-row__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: .06em 0; font-weight: 700; font-size: clamp(22px, 2.3vw, 38px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; transition: transform .7s var(--ease-out); } /* le nom tient sur une ligne */
.pf-row:hover .pf-row__title { transform: translateX(14px); }
.pf-row__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 10px; letter-spacing: .04em; }
/* Fiche alignée : intitulés de même largeur, pointillés, valeurs sur une ligne calées à droite */
.pf-row__meta .dl { display: grid; grid-template-columns: 11.5ch minmax(12px, 1fr) minmax(0, max-content); gap: 6px; }
.pf-row__meta .dl b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-row__meta > span { display: grid; gap: 4px; align-content: start; }
.pf-row__arw { justify-self: end; transition: transform .5s var(--ease-out); }
.pf-row__arw .arw { height: 22px; }
.pf-row:hover .pf-row__arw { transform: translate(4px, 4px); }
.pf-row__thumb { display: none; }
@media (max-width: 1100px) { .pf-row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 340px) 24px; } .pf-row__meta { grid-template-columns: 1fr; } .pf-row__meta > span + span { display: none; } }
/* L'aperçu : la miniature entière, à son format d'origine, cerclée de blanc */
.pf-preview { position: fixed; top: 0; left: 0; z-index: 40; width: clamp(280px, 26vw, 440px); pointer-events: none; opacity: 0; transition: opacity .35s; }
.pf-preview.is-on { opacity: 1; }
.pf-preview img { display: block; width: 100%; height: auto; border: 2px solid var(--paper); }
@media (hover: none) { .pf-preview { display: none; } }
@media (max-width: 767px) {
  .pf-row { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; padding: 14px 0; }
  .pf-row__no { font-size: 16px; }
  .pf-row__title { font-size: 26px; }
  .pf-row__meta { display: none; }
  .pf-row__thumb { display: block; grid-column: 2; }
  .pf-row__thumb img { width: 100%; height: auto; }
}
.pf-list__end { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0; color: var(--muted); }
.pf-list__end b { font-weight: 500; color: var(--paper); }
.pf-list__end i { flex: 0 1 90px; border-bottom: 1px dotted currentColor; opacity: .6; }
.pf-list__end a { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.pf-list__end a .arw { height: 9px; }

/* Collaborations : une grille de cases fines, un logo (ou le nom, en attendant le fichier) par case */
.pf-co { padding: clamp(56px, 10vh, 120px) var(--pad); border-top: 1px solid var(--line); }
.pf-co__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; margin-bottom: clamp(28px, 5vh, 48px); }
.pf-co__head .section-tag { grid-column: 1 / -1; margin: 0; }
.pf-co__title { margin: 0; font-size: clamp(40px, 6vw, 104px); line-height: .88; letter-spacing: -.05em; text-transform: uppercase; }
.pf-co__title b { font-weight: 700; }
.pf-co__title em { letter-spacing: -.01em; }
.pf-co__count { margin: 0; color: var(--muted); }
.pf-co__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pf-co__cell { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; transition: background .4s, opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.pf-co__cell { background: var(--ink); } /* fond opaque : les logos inversés s'y fondent, même pendant leur apparition */
.pf-co__cell:hover { background: #141414; }
.pf-co__no { position: absolute; left: 12px; top: 10px; color: var(--muted); font-size: 10px; }
.pf-co__name { font-weight: 700; font-size: clamp(16px, 1.5vw, 24px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.pf-co__cell:hover .pf-co__name { color: var(--paper); }
.pf-co__logo { display: block; object-fit: contain; opacity: .78; transition: opacity .3s; }
.pf-co__logo--mono { filter: brightness(0) invert(1); }
.pf-co__logo--neg { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.pf-co__logo--cut { filter: grayscale(1) contrast(9) invert(1); mix-blend-mode: screen; }
.pf-co__cell:hover .pf-co__logo { opacity: 1; }
.pf-co__cell:nth-child(4n + 2) { transition-delay: .05s; } .pf-co__cell:nth-child(4n + 3) { transition-delay: .1s; } .pf-co__cell:nth-child(4n + 4) { transition-delay: .15s; }
/* 8 logos : 4 par rangée (2 rangées pleines), 2 par rangée sur téléphone */
@media (max-width: 600px) { .pf-co__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-co__head { grid-template-columns: 1fr; } }

/* Passage vers 701 Studio : le film ARTBANK en fond, le studio et les projets personnels */
.pf-701 { padding: 0 var(--pad) clamp(72px, 12vh, 140px); }
.pf-701__link { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(420px, 78vh, 760px); overflow: hidden; background: #000; }
.pf-701__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .38; transform: scale(1.04); transition: opacity .8s, transform 1.6s var(--ease-out); }
.pf-701__link::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .1) 70%); }
.pf-701__link:hover .pf-701__media { opacity: .6; transform: scale(1); }
.pf-701__inner { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 64px); }
.pf-701__title { font-size: clamp(64px, 12vw, 210px); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.pf-701__title b { font-weight: 700; }
.pf-701__title em { text-transform: none; letter-spacing: -.02em; }
.pf-701__text { max-width: 46ch; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; }
.pf-701__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.pf-701__cta .arw { height: 10px; transition: transform .4s var(--ease-out); }
.pf-701__link:hover .pf-701__cta .arw { transform: translate(3px, 3px); }
.pf-clients { margin-bottom: 0; }

/* ===== Page projet ===== */
.page-projet { background: transparent; } /* fond noir avec la photo à 10 % (body::before) */
.pj { background: var(--room-bg, var(--ink)); color: var(--paper); --muted: rgba(255, 255, 255, .82); } /* petits textes : blanc à peine adouci, lisible sur les fonds de couleur */
.pj.is-light { --paper: #0d0d0d; --muted: rgba(13, 13, 13, .78); --line: rgba(0, 0, 0, .14); }
/* Ouverture : image, vidéo ou bouts de vidéo plein cadre */
.pj-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; color: #f2f1ec; background: #000; }
.pj-hero__media { position: absolute; inset: 0; z-index: -2; }
.pj-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); animation: pjIn 2.2s var(--ease-out) forwards; }
@keyframes pjIn { to { transform: scale(1); } }
.pj-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 32%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .88) 100%); }
.pj-hero__body { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(28px, 6vh, 56px); }
.pj-hero__crumb { margin: 0 0 18px; color: rgba(255, 255, 255, .85); }
.pj-hero__crumb a { border-bottom: 1px solid currentColor; }
.pj-hero__title { margin: 0; font-weight: 700; font-size: clamp(44px, 7.6vw, 140px); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; }
.pj-hero__title em { display: inline-block; font-size: max(.26em, 15px); line-height: 1.1; text-transform: none; letter-spacing: 0; margin-top: .3em; }
/* Ouverture coupée en deux (plusieurs campagnes) : une moitié par campagne, chacune sur son fond, un clic mène à sa partie */
.pj-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pj-split__half { position: relative; display: grid; place-items: center; padding: 132px clamp(24px, 4vw, 72px) max(40vh, 300px); background: var(--split-bg); overflow: hidden; }
.pj-split__half img { width: auto; height: auto; max-width: min(100%, 620px); max-height: calc(100svh - 132px - max(40vh, 300px)); object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); outline: 1px solid rgba(255, 255, 255, .14); transition: transform 1.2s var(--ease-out); }
.pj-split__half:hover img { transform: scale(1.03); }
.pj-split__label { position: absolute; top: 84px; left: clamp(24px, 4vw, 72px); display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px; background: #000; color: #fff; }
.pj-split__label .arw { height: 9px; }
.pj-hero:has(.pj-split) .pj-hero__shade { background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .9) 100%); }
.pj-hero:has(.pj-split) :is(.pj-hero__shade, .pj-hero__body) { pointer-events: none; }
.pj-hero:has(.pj-split) .pj-hero__body a { pointer-events: auto; }
@media (max-width: 767px) {
  .pj-split { grid-template-columns: 1fr; bottom: 24svh; }
  .pj-split__half { padding: 64px 20px 16px; }
  .pj-split__half img { max-height: calc(38svh - 80px); }
  .pj-split__half:first-child img { max-height: calc(38svh - 120px); }
  .pj-split__label { top: 16px; left: 20px; }
  .pj-split__half:first-child .pj-split__label { top: 64px; }
  .pj-split__half:first-child { padding-top: 104px; }
}
.pj-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* client et compétences (plus d'année, demande de Pierre) */ gap: 24px; padding: 26px var(--pad); border-bottom: 1px solid var(--line); }
.pj-meta div { display: grid; gap: 8px; }
.pj-meta span { color: var(--muted); }
.pj-meta b { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: uppercase; }
.pj-text { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(48px, 7vh, 88px) var(--pad) 0; }
.pj-text__lead { margin: 0; font-weight: 500; font-size: clamp(19px, 1.7vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.pj-text__body p, .pj-block--text p { margin: 0 0 1.2em; color: var(--muted); font-size: 15px; line-height: 1.65; }
.pj.is-strong .pj-text__body p, .pj.is-strong .pj-block--text p { color: var(--paper); } /* texte en blanc sur les fonds colorés */

/* Sections : un grand titre, puis textes, cartes, charte, visuels et livres */
.pj-sections { padding-bottom: clamp(40px, 6vh, 72px); }
/* Pages projet : marges latérales des contenus */
@media (min-width: 1200px) { .page-projet :is(main, .elementor) { --pad: clamp(160px, 17.4vw, 250px); } } /* contenus des projets à 250 px des bords sur 1440 px (l'ouverture et les visuels 16:9 seuls restent pleine largeur) */
@media (min-width: 768px) and (max-width: 1199px) { .page-projet :is(main, .elementor) { --pad: 64px; } }
@media (max-width: 767px) { .page-projet :is(main, .elementor) { --pad: 20px; } }
/* Parties d'un projet (plusieurs campagnes sur une page) : chacune sur son fond, ouverte par un grand titre numéroté */
.pj-part { background: var(--part-bg); color: var(--paper); padding: clamp(72px, 12vh, 140px) 0 clamp(56px, 8vh, 96px); --paper: #ecebe6; --muted: rgba(255, 255, 255, .82); --line: rgba(236, 235, 230, .14); }
.pj-part.is-light { --paper: #0d0d0d; --muted: rgba(0, 0, 0, .86); --line: rgba(0, 0, 0, .16); }
.pj-sections > .pj-part:first-child { margin-top: clamp(56px, 8vh, 96px); }
.pj-part__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 var(--pad); }
.pj-part__num { margin: 0 0 8px; padding-bottom: 14px; border-bottom: 1px solid currentColor; }
.pj-part__title { margin: 0; font-weight: 700; font-size: clamp(48px, 8vw, 140px); line-height: .84; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; }
.pj-part__sub { margin: 0; font-size: clamp(20px, 2vw, 32px); line-height: 1.15; }
.pj-part .pjs:last-child .pj-block:last-child { margin-bottom: 0; }
.pj-part + .pjs { border-top: 1px solid var(--line); }
.pjs { padding: clamp(56px, 8vh, 96px) 0 0; }
.pjs__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 var(--pad); margin-bottom: clamp(24px, 4vh, 40px); }
.pjs__head > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 1.8vw, 28px); /* de l'air entre le petit texte et le titre : les accents (À, É) ne le touchent pas */ align-content: start; }
.pjs__head.has-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.pjs__head.has-text .pjs__title { font-size: clamp(30px, 3.4vw, 60px); } /* titre à côté d'un texte : il reste dans sa colonne */
.pjs__title, #pjTitle, .pj-hero__title .line:first-child > span { white-space: nowrap; } /* une seule ligne : projet.js réduit la taille si besoin */
.pjs__head > * { min-width: 0; } /* la colonne garde la largeur de l'écran : le titre se réduit au lieu de déborder */
.pjs__head.has-text { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pjs__text p { margin: 0 0 1em; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pjs__text p:last-child { margin-bottom: 0; }
.pj.is-strong .pjs__text p { color: var(--paper); }
.pjs__tag { margin: 0; color: var(--muted); }
.pjs__title { margin: 0; padding-top: .06em; font-weight: 700; font-size: clamp(34px, 4.6vw, 80px); line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
.pj-block { margin-bottom: 14px; } /* les visuels s'enchaînent avec le même écart que dans une rangée */
.pj-block--text { display: block; columns: 2 320px; column-gap: clamp(32px, 5vw, 80px); padding: 0 var(--pad); margin: clamp(24px, 4vh, 40px) 0; }
.pj-block--text p { break-inside: avoid; }
.pj-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding: 0 var(--pad); margin: 0 0 clamp(24px, 4vh, 40px); }
.pj-item { display: grid; align-content: start; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.pj-item .mono { color: var(--muted); }
.pj-item h3 { margin: 0; font-weight: 700; font-size: clamp(24px, 2.4vw, 40px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.pj-item p { margin: 0; color: var(--muted); line-height: 1.6; }
.pj.is-strong .pj-item p { color: var(--paper); }
/* Charte graphique : chaque élément numéroté, son nom en italique */
.pj-points { margin: 0 0 clamp(24px, 4vh, 40px); padding: 0 var(--pad); }
.pj-point { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; padding: clamp(18px, 3vh, 28px) 0; border-top: 1px solid var(--line); }
.pj-point:last-child { border-bottom: 1px solid var(--line); }
.pj-point dt { display: flex; align-items: baseline; gap: 18px; }
.pj-point dt .mono { color: var(--muted); }
.pj-point dt em { font-size: clamp(21px, 2.2vw, 36px); line-height: 1; } /* Ivy Presto, 10 % plus petite que l'ancienne italique */
.pj-point dd { margin: 0; max-width: 62ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pj.is-strong .pj-point dd { color: var(--paper); }
/* Crédits en grand : à droite, la même taille qu'à gauche */
.pj-points--big .pj-point { align-items: baseline; }
.pj-points--big .pj-point dt em, .pj-points--big .pj-point dd { font-size: clamp(28px, 3vw, 48px); line-height: 1.05; }
.pj-points--big .pj-point dd { max-width: none; color: var(--paper); font-weight: 600; letter-spacing: -.02em; }
/* Clip YouTube intégré */
.pj-yt { padding: 0 var(--pad); margin: 0 0 14px; }
.pj-yt__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pj-yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vidéo avec son : pause / lecture et son, toujours affichés */
.vctrl { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 8px; }
.vctrl__btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .62) center / 18px no-repeat; transition: background-color .2s; }
.vctrl__btn:hover { background-color: rgba(0, 0, 0, .85); }
.vctrl__btn[data-act="play"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white'%3E%3Crect x='3.5' y='2.5' width='3.6' height='13'/%3E%3Crect x='10.9' y='2.5' width='3.6' height='13'/%3E%3C/svg%3E"); }
.vctrl__btn[data-act="play"].is-paused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M4.5 2.5v13l11-6.5z'/%3E%3C/svg%3E"); }
.vctrl__btn[data-act="sound"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M2.5 6.5h3l4-3.5v12l-4-3.5h-3z' fill='white'/%3E%3Cpath d='M12 6.5l4 5M16 6.5l-4 5'/%3E%3C/svg%3E"); }
.vctrl__btn[data-act="sound"].is-on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M2.5 6.5h3l4-3.5v12l-4-3.5h-3z' fill='white'/%3E%3Cpath d='M12 6.2a4 4 0 0 1 0 5.6M14.2 4a7 7 0 0 1 0 10'/%3E%3C/svg%3E"); }

/* Visuels : rangées pleines largeur, chaque visuel entier */
.pj-gal { position: relative; padding: 0 var(--pad); box-sizing: content-box; }
.pj-gal figure { position: absolute; margin: 0; overflow: hidden; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.pj-gal figure.is-in { opacity: 1; transform: none; }
.pj-gal img, .pj-gal video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-gal .ph { width: 100%; height: 100%; }
/* Carrousel (écran étroit) : défilement horizontal, flèches de la couleur du texte */
.pj-gal.is-bleed { padding-left: 0; padding-right: 0; } /* visuel horizontal seul : bord à bord */
.pj-gal.is-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; margin-bottom: 0; }
.pj-gal.is-carousel::-webkit-scrollbar { display: none; }
.pj-gal.is-carousel figure { position: relative; flex: none; scroll-snap-align: center; }
.pj-gal__arrows { display: none; }
.pj-gal.is-carousel + .pj-gal__arrows { display: flex; justify-content: flex-end; gap: 10px; padding: 0 var(--pad); margin: 14px 0 clamp(16px, 2.4vh, 28px); }
.pj-gal__btn { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--paper); border-radius: 50%; color: var(--paper); }
.pj-gal__btn .arw { height: 12px; }
.pj-gal__btn[data-dir="-1"] .arw { transform: scaleX(-1); }

/* Livre à feuilleter : doubles pages, la feuille pivote autour de la reliure */
.book { display: grid; justify-items: center; gap: 18px; padding: 0 var(--pad); margin: clamp(24px, 4vh, 40px) 0; }
.book:fullscreen { align-content: center; background: #000; color: #f2f1ec; --paper: #f2f1ec; --muted: #8b8a85; }
.book__stage { perspective: 2400px; }
.book__spread { position: relative; display: grid; grid-template-columns: var(--pw) var(--pw); height: var(--ph); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); }
.book__spread.is-single { grid-template-columns: var(--pw); }
.book__spread.is-single .book__page--l { display: none; }
.book__page { position: relative; padding: 0; width: var(--pw); height: var(--ph); cursor: pointer; overflow: hidden; }
.book__page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book__page.is-empty { visibility: hidden; }
.book__page--l::after, .book__page--r::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; }
.book__page--l::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .18)); }
.book__page--r::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .18)); }
.book__spread.is-single .book__page--r::after { display: none; }
.book__leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; z-index: 3; }
.book__leaf--r { left: var(--pw); transform-origin: left center; }
.book__leaf--l { left: 0; transform-origin: right center; }
.book__face { position: absolute; inset: 0; backface-visibility: hidden; background: #fff; }
.book__face img { width: 100%; height: 100%; object-fit: cover; }
.book__face--back { transform: rotateY(180deg); }
.book__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100%, calc(var(--pw) * 2)); color: var(--muted); }
.book__spread.is-single ~ .book__bar, .book__stage:has(.is-single) + .book__bar { width: min(100%, var(--pw)); }
.book__nav { display: inline-flex; align-items: center; gap: 14px; color: var(--paper); }
.book__btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; }
.book__btn .arw { height: 11px; }
.book__btn[data-dir="-1"] .arw { transform: scaleX(-1); }
.book__btn:disabled { opacity: .3; cursor: default; }
.book__fs { color: var(--paper); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pj-draft { margin: 0 var(--pad); padding: 14px 18px; border: 1px dashed currentColor; text-align: center; opacity: .7; }

/* Emplacement réservé (visuel à fournir) */
.ph { position: relative; display: grid; place-items: center; border: 1px dashed rgba(236, 235, 230, .35); background: repeating-linear-gradient(135deg, rgba(236, 235, 230, .05) 0 1px, transparent 1px 14px), rgba(0, 0, 0, .25); color: rgba(236, 235, 230, .7); }
.ph__label { padding: 0 16px; text-align: center; }

/* Bas de page : précédent à gauche, retour au portfolio au milieu, suivant à droite */
.pj-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-top: 1px solid var(--line); }
.pj-nav a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(36px, 7vh, 72px) var(--pad); }
.pj-nav__prev { padding-right: clamp(20px, 3vw, 48px) !important; } .pj-nav__next { padding-left: clamp(20px, 3vw, 48px) !important; } .pj-nav__home { padding-inline: 24px !important; } /* la grande marge seulement côté bord de l'écran */
.pj-nav__next { text-align: right; }
.pj-nav__home { place-items: center; align-content: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-width: clamp(140px, 14vw, 220px); text-align: center; transition: background .3s; }
.pj-nav__home .ico { width: 22px; height: 22px; --c: linear-gradient(currentColor, currentColor); background: var(--c) 0 0 / 9px 9px no-repeat, var(--c) 100% 0 / 9px 9px no-repeat, var(--c) 0 100% / 9px 9px no-repeat, var(--c) 100% 100% / 9px 9px no-repeat; transition: transform .5s var(--ease-out); }
.pj-nav__home:hover .ico { transform: rotate(90deg); }
.pj-nav .mono { color: var(--muted); }
.pj-nav b { font-weight: 700; font-size: clamp(22px, 2.6vw, 44px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; transition: transform .7s var(--ease-out); } /* une seule ligne : projet.js réduit la taille si besoin */
.pj-nav b .arw { height: .6em; }
.pj-nav__prev:hover b { transform: translateX(-12px); }
.pj-nav__next:hover b { transform: translateX(12px); }
@media (max-width: 900px) { .pj-items { grid-template-columns: 1fr; } .pj-point { grid-template-columns: 1fr; } .pjs__head.has-text { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .pj-meta, .pj-text { grid-template-columns: 1fr; }
  .pj-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pj-nav__home { grid-column: 1 / -1; grid-row: 2; min-width: 0; padding: 22px !important; border: 0; border-top: 1px solid var(--line); grid-auto-flow: column; justify-content: center; gap: 12px; }
  .pj-nav__next { border-left: 1px solid var(--line); }
  .pj-nav b { font-size: 22px; }
  .book__bar { flex-wrap: wrap; justify-content: center; }
}

/* ===== Studio (à propos & contact) ===== */
.st-contact { padding: clamp(72px, 12vh, 140px) 0 clamp(56px, 9vh, 110px); border-top: 1px solid var(--line); }
.st-contact .contact-page { padding-top: clamp(24px, 4vh, 40px); padding-bottom: 0; }


.pf-card__img .ph { width: 100%; height: 100%; }
.pj-hero__img.is-contain { object-fit: contain; transform: none; animation: none; }
.pj-hero__img.ph { background: none; border: 0; transform: none; animation: none; }
/* Livre fermé : le bouton Lire occupe la place de la page de gauche, puis disparaît */
.book__read { display: none; }
.book__page.is-read { visibility: visible; display: grid; place-items: center; }
.book__page.is-read img { display: none; }
.book__page.is-read::after { display: none; }
.book__page.is-read .book__read { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border: 1px solid currentColor; border-radius: 99px; color: var(--paper); font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -.01em; text-transform: uppercase; transition: background .3s, color .3s, transform .5s var(--ease-out); }
.book__page.is-read .book__read .arw { height: .7em; }
.book__page.is-read:hover .book__read { background: var(--paper); color: var(--ink); }
.pj.is-light .book__page.is-read:hover .book__read { color: #fff; }

/* ===== Maquettes 3D en lignes blanches (journal, presse de sérigraphie, t-shirt) ===== */
.wire3d { display: block; width: 100%; aspect-ratio: 1.2; pointer-events: none; }
.v4-head--3d { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); }
.v4-head--3d > :not(canvas) { grid-column: 1; }
.wire3d--press { grid-column: 2; grid-row: 1 / span 3; align-self: end; width: clamp(240px, 30vw, 470px); }
.v4-head--row:has(.wire3d) { grid-template-columns: minmax(0, 1fr) auto auto; }
.wire3d--journal { width: clamp(240px, 28vw, 440px); align-self: center; }
.wire3d--tshirt { width: min(100%, 440px); margin-top: clamp(16px, 3vh, 32px); }
.page-hero:has(.wire3d--hero) { position: relative; }
.wire3d--hero { position: absolute; right: var(--pad); bottom: 0; width: clamp(220px, 30vw, 470px); }
.wire3d--shop { flex: none; width: clamp(130px, 13vw, 210px); aspect-ratio: 1.1; margin-left: auto; }
@media (max-width: 767px) {
  .v4-head--3d { grid-template-columns: 1fr; }
  .wire3d--press { grid-column: 1; grid-row: auto; justify-self: center; width: min(100%, 360px); }
  .v4-head--row:has(.wire3d) { grid-template-columns: 1fr; }
  .wire3d--journal { justify-self: center; width: min(100%, 340px); }
  .wire3d--hero { position: static; width: min(100%, 320px); margin: 12px auto 0; }
  .wire3d--shop { display: none; }
}

/* CV : coordonnées sous le titre, lien vers le PDF */
.cv__contact { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 36px; margin: 22px 0 18px; }
.cv__contact div { display: flex; gap: 14px; }
.cv__contact dt { min-width: 4.5em; color: var(--muted); }
.cv__contact dd { margin: 0; text-transform: none; letter-spacing: .02em; }
.cv__contact a:hover { text-decoration: underline; }
.cv__pdf { display: inline-flex; align-items: center; gap: 10px; }
.cv__pdf .arw { height: 9px; }
@media (max-width: 767px) { .cv__contact { grid-template-columns: 1fr; } }


/* Pages hors projets : contenus à 200 px des bords sur 1440 px */
@media (min-width: 1200px) { body:not(.page-projet) :is(main, .elementor) { --pad: clamp(120px, 13.9vw, 200px); } }
/* Sections à 50 px des bords (sur ordinateur) : texte du showreel, écran d'accueil du portfolio (alignés sur le logo 701), vidéos des projets 701, projets du portfolio (grille et liste), galerie, photo de l'appartement */
@media (min-width: 1200px) {
  body .hero, body .pfx, body .p701__list, body .pf-list, body.page-galerie :is(main, .elementor), body .about-photo { --pad: 50px; } /* .elementor : la page sur WordPress (pas de <main>) */
}
/* Galerie : bouton « Mélanger » à droite des tags, aligné sur le bord droit du mur de visuels.
   Quand la barre est collée en haut, il se décale pour ne pas passer sous le bouton du menu. */
.page-galerie .gal-tools { display: flex; align-items: flex-start; gap: 12px 24px; padding-right: var(--pad); transition: padding-right .5s var(--ease-out); }
.page-galerie .gal-tools.is-stuck { padding-right: calc(var(--corner) + 12px); }
.page-galerie .gal-tools .filters { flex: 1; min-width: 0; }
.gal-shuffle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--paper); border-color: rgba(242, 241, 236, .4); }
.gal-shuffle svg { width: 13px; height: 13px; transition: transform .6s var(--ease-out); }
.gal-shuffle.is-flip svg { transform: scaleY(-1); }
.gal { transition: opacity .28s; }
.gal.is-shuffling { opacity: 0; }
@media (max-width: 767px) {
  .page-galerie .gal-tools { align-items: center; gap: 10px; }
  .page-galerie .gal-tools .filters { margin-right: 0; padding-right: 0; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } /* les tags suivants s'effacent sous le bouton : on devine qu'ils défilent */
  .page-galerie .gal-tools .chip { white-space: nowrap; }
  .gal-shuffle { padding: 7px 10px; gap: 6px; }
}
/* Studio : « Pourquoi » en italique et « 701 ? » sur la même ligne */
.page-studio .page-hero__title .line > span { white-space: nowrap; }
.page-studio .page-hero__title em { letter-spacing: -.01em; }
@media (max-width: 767px) { .page-studio .page-hero__title { font-size: clamp(40px, 15.5vw, 96px); } }
/* Le nom calé au millimètre sur le texte du dessous : on retire l'approche à gauche des lettres (P de New Order, D italique) */
.cv__name { margin-left: -.072em; }
.cv__title em { display: inline-block; margin-left: .036em; }
/* Contact : le texte d'introduction démarre sur la même verticale que « Ouvert aux projets professionnels » (même grille que le formulaire) */
.st-contact .v4-head--row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); }
@media (max-width: 900px) { .st-contact .v4-head--row { grid-template-columns: 1fr; } }
/* Conditions générales & mentions légales (page de l'ancien site, sur WordPress) : le texte tel quel, dans le cadre du nouveau site */
.page-legal [data-elementor-type="wp-page"] { max-width: 980px; padding: clamp(140px, 20vh, 220px) var(--pad) clamp(80px, 12vh, 140px); }
.page-legal h1, .page-legal h2 { margin: 0 0 clamp(24px, 4vh, 40px); font-weight: 700; font-size: clamp(30px, 4vw, 60px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; scroll-margin-top: 120px; }
.page-legal h2:not(:first-child), .page-legal [data-elementor-type="wp-page"] > * + * h2 { margin-top: clamp(64px, 10vh, 120px); }
.page-legal p { margin: 0 0 .9em; max-width: 72ch; color: var(--muted); font-size: 16px; line-height: 1.7; }
.page-legal p:empty { display: none; }
.page-legal p span, .page-legal span[style] { font-family: inherit !important; font-size: 16px !important; line-height: 1.7 !important; letter-spacing: normal !important; color: var(--muted); }
.page-legal span[style] { display: block; margin: 0 0 .9em; max-width: 72ch; } /* paragraphe collé depuis un autre éditeur (styles en ligne) */
.page-legal strong { color: var(--paper); font-weight: 700; }
.page-legal p > strong:only-child { display: block; margin-top: 1.6em; font-size: 17px; }
.page-legal a:not(.hd a):not(.menu a):not(.ft a) { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
/* Accueil : les lettres qui descendent sous la ligne (g, p, q de l'italique) ne sont plus coupées par le masque d'apparition.
   Le masque descend plus bas (marge négative : l'interligne ne change pas) et le texte part de plus loin pour rester caché avant l'animation. */
.hero__title .line { padding-bottom: .26em; margin-bottom: -.22em; }
.hero__title .line > span { transform: translateY(135%); }
.is-entered .hero__title .line > span { transform: none; }
/* Projet : petite grille « mini » dont les visuels s'ouvrent en grand au clic */
.pj-gal.is-zoom figure { cursor: zoom-in; }
.pj-gal.is-zoom figure img { transition: transform .6s var(--ease-out), opacity .3s; }
.pj-gal.is-zoom figure:hover img { transform: scale(1.04); }
.pj-zoom { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(56px, 8vh, 90px) clamp(16px, 6vw, 110px); background: rgba(0, 0, 0, .94); opacity: 0; transition: opacity .4s var(--ease-out); }
.pj-zoom.is-open { opacity: 1; }
.pj-zoom__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pj-zoom__count { position: absolute; left: clamp(16px, 3vw, 40px); top: 24px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.pj-zoom__close { position: absolute; right: clamp(16px, 3vw, 40px); top: 18px; padding: 8px 0; color: var(--paper); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pj-zoom__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; color: var(--paper); }
.pj-zoom__nav .arw { width: 26px; height: auto; }
.pj-zoom__nav--prev { left: clamp(8px, 2vw, 32px); } .pj-zoom__nav--prev .arw { transform: rotate(135deg); }
.pj-zoom__nav--next { right: clamp(8px, 2vw, 32px); } .pj-zoom__nav--next .arw { transform: rotate(-45deg); }
@media (max-width: 767px) { .pj-zoom__nav { top: auto; bottom: 18px; margin-top: 0; } }
/* la petite grille reste un bloc compact, aligné à gauche (vignettes nettement plus petites que les compositions) */
.pj-gal[data-layout="mini"], .pj-gal--mini { max-width: calc(860px + 2 * var(--pad)); }
/* Vidéos : bouton plein écran (avec pause et son) */
.vctrl__btn[data-act="full"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='1.7'%3E%3Cpath d='M2.5 7V2.5H7M11 2.5h4.5V7M15.5 11v4.5H11M7 15.5H2.5V11'/%3E%3C/svg%3E"); }
.gal__frame { position: relative; }
.gal__frame video { display: block; width: 100%; height: auto; }
.gal__frame .vctrl { right: 10px; bottom: 10px; gap: 6px; }
.gal__frame .vctrl__btn { width: 34px; height: 34px; background-size: 15px; }
#lbVid { max-width: 100%; max-height: calc(100svh - 190px); }
/* Plein écran : la vidéo garde son format (bandes noires sur les côtés pour une vidéo verticale), jamais recadrée */
video:fullscreen { object-fit: contain !important; width: 100% !important; height: 100% !important; transform: none !important; background: #000; }
video:-webkit-full-screen { object-fit: contain !important; width: 100% !important; height: 100% !important; transform: none !important; background: #000; }
/* Ouverture des projets : le sous-titre juste sous le titre (la 2e ligne prend la taille du sous-titre, plus de grand vide),
   et le bloc à 50 px du bord comme l'ouverture de l'accueil */
.pj-hero__title .line + .line { font-size: max(.26em, 15px); line-height: 1.1; margin-top: .3em; }
.pj-hero__title .line + .line em { font-size: 1em; margin-top: 0; }
@media (min-width: 1200px) { .page-projet .pj-hero { --pad: 50px; } }
@media (min-width: 768px) and (max-width: 1199px) { .page-projet .pj-hero { --pad: clamp(16px, 3.2vw, 48px); } }
/* Titre de section avec un texte à côté : le texte démarre pile à la hauteur du titre (hauts des capitales alignés),
   l'étiquette (01) — … reste au-dessus du titre. Avant, le texte était calé sur le bas et dépassait au-dessus du titre. */
@media (min-width: 901px) {
  .pjs__head.has-text { grid-template-areas: "tag ." "title text"; align-items: start; row-gap: clamp(20px, 1.8vw, 28px); }
  .pjs__head.has-text > div:first-child { display: contents; }
  .pjs__head.has-text .pjs__tag { grid-area: tag; }
  .pjs__head.has-text .pjs__title { grid-area: title; }
  .pjs__head.has-text .pjs__text { grid-area: text; }
}
/* Sur WordPress, un texte d'un seul paragraphe devient lui-même le <p class="pjs__text"> : même style, sans la marge du navigateur */
p.pjs__text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pj.is-strong p.pjs__text { color: var(--paper); }
/* Galerie : quatre colonnes dès 900 px de large (le mur va jusqu'à 50 px des bords) */
@media (min-width: 900px) { .gal { column-count: 4; } }
@media (min-width: 600px) and (max-width: 899px) { .gal { column-count: 3; } }
/* Galerie : le mur se remplit rangée par rangée (colonnes construites par galerie.js), hauteurs libres */
.gal { display: flex; align-items: flex-start; gap: var(--gap); column-count: auto; --cols: 4; }
.gal__col { flex: 1 1 0; min-width: 0; }
@media (max-width: 899px) { .gal { --cols: 3; } }
@media (max-width: 599px) { .gal { --cols: 2; } }
/* Accueil, projets 701 : effet roulette (taille, inclinaison et opacité pilotées par app.js au scroll) */
.p701__list .plan { transform-origin: 50% 50%; will-change: transform; }
/* Écarts resserrés (06/11/2026) : dans un même bloc, l'étiquette, le titre et le texte restent groupés */
.v4-head > .section-tag { margin: 0; } /* l'écart vient déjà de la grille du bloc */
.gal-hero .page-hero__foot { margin-top: clamp(18px, 2.6vh, 28px); }
.page-legal h1, .page-legal h2 { margin-bottom: clamp(16px, 2vh, 24px); }
.page-legal h2:not(:first-child), .page-legal [data-elementor-type="wp-page"] > * + * h2 { margin-top: clamp(48px, 7vh, 72px); }
/* Blancs entre les parties resserrés d'environ un quart (06/11/2026) : les grandes respirations restent, sans trous */
.manifesto { padding-top: clamp(56px, 9vh, 104px); }
.p701 { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(24px, 3vh, 40px); }
.news { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(56px, 9vh, 104px); }
.merch, .pf-co { padding-top: clamp(48px, 8vh, 92px); padding-bottom: clamp(48px, 8vh, 92px); }
.contact { padding-top: clamp(48px, 7vh, 88px); }
.pf-list { padding-bottom: clamp(56px, 9vh, 104px); }
.pf-701 { padding-bottom: clamp(56px, 9vh, 104px); }
.page-hero { padding-bottom: clamp(28px, 4vh, 48px); }
.about-intro { padding-top: clamp(48px, 8vh, 92px); padding-bottom: clamp(48px, 8vh, 92px); }
.about-photo { margin-bottom: clamp(48px, 8vh, 92px); }
.cv { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(56px, 9vh, 104px); }
.st-contact { padding-top: clamp(56px, 9vh, 104px); }
.pj-text { padding-top: clamp(36px, 5vh, 64px); }
.pjs { padding-top: clamp(44px, 6vh, 72px); }
.pj-part { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(44px, 6vh, 72px); }
/* Accueil : le titre sur le showreel en deux blocs — à gauche « 701 Studio / Pierre Ploton »,
   à droite, calé sur le bord, « Direction artistique / & design graphique » (lignes 1-2 et 3-4 du titre) */
.hero__title { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 40px; font-size: clamp(30px, 3.3vw, 64px); }
.hero__title .line:nth-child(1) { grid-area: 1 / 1; }
.hero__title .line:nth-child(2) { grid-area: 2 / 1; }
.hero__title .line:nth-child(3) { grid-area: 1 / 2; text-align: right; }
.hero__title .line:nth-child(4) { grid-area: 2 / 2; text-align: right; }
.is-entered .hero__title .line:nth-child(4) > span { transition-delay: .24s; }
.hero__title .line:nth-child(2) em, .hero__title .line:nth-child(4) em { font-size: .68em; } /* l'italique plus petit que le gras, comme sur la maquette envoyée */
.hero__title .line:nth-child(2), .hero__title .line:nth-child(4) { margin-top: .12em; }
@media (max-width: 767px) {
  .hero__title { grid-template-columns: 1fr; }
  .hero__title .line:nth-child(n) { grid-area: auto; text-align: left; }
  .hero__title .line:nth-child(3) { margin-top: .35em; }
}
/* Showreel de l'accueil sans effet : ni grésillement VHS, ni secousse, ni zoom d'entrée, ni grain par-dessus */
.hero__static { display: none; }
.hero .hero__video, .is-entered .hero__video, .hero.is-glitch .hero__video { transform: none; animation: none; filter: none; transition: none; }
.grain { transition: opacity .4s; }
.hero-in-view .grain { opacity: 0; }
/* Page projet : livre à côté du texte d'introduction (Jabberwocky) — fermé à droite, ouvert en grand par-dessus le texte */
@media (min-width: 768px) {
  .pj-text.has-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; row-gap: clamp(18px, 2.4vh, 28px); }
  .pj-text.has-book > .pj-text__lead { grid-area: 1 / 1; }
  .pj-text.has-book > .pj-text__body { grid-area: 2 / 1; }
  .pj-text.has-book > .pj-text__lead, .pj-text.has-book > .pj-text__body { transition: opacity .5s, visibility .5s; }
  .pj-text.has-book > .book { grid-area: 1 / 2 / 3 / 3; margin: 0; padding: 0; position: relative; z-index: 2; }
  .pj-text.has-book.is-open > .book { grid-area: 1 / 1 / 3 / 3; }
  .pj-text.has-book.is-open > .pj-text__lead, .pj-text.has-book.is-open > .pj-text__body { opacity: 0; visibility: hidden; }
}
.pj-text.has-book > .book { padding: 0; }
/* Bouton « Fermer le livre » : seulement quand le livre ouvert recouvre le texte d'introduction */
.book__close { display: none; padding-bottom: 2px; border-bottom: 1px solid currentColor; color: var(--paper); }
.pj-text.has-book.is-open .book__close { display: inline-block; }

/* Portfolio, titre composé : chaque ligne centrée sur l'écran (10/11/2026).
   Les flèches comptent dans la largeur de leur ligne (1re et dernière) ; les deux lignes autour des crochets sont
   décalées ensemble (--pfx-shift, calculé par portfolio.js) pour que leurs largeurs soient centrées au mieux. */
.pfx__top, .pfx__bot { display: flex; align-items: center; gap: .2em; }
.pfx__hand, .pfx__top .pfx__hand, .pfx__hand--back { position: static; margin: 0; transform: none; }
.pfx__hand--back { transform: scaleX(-1); }
.pfx__l1, .pfx__r1, .pfx__l2, .pfx__r2 { translate: var(--pfx-shift, 0px) 0; }
@media (min-width: 768px) { .pfx__br { translate: var(--pfx-shift, 0px) 0; } }

/* Page À propos (10/11/2026) : le CV ouvre la page, puis le bandeau défilant, la photo de l'appartement et le contact.
   (sélecteurs doublés pour passer devant les réglages des conteneurs Elementor)
   Le texte « Pourquoi 701 ? » apparaît au survol de la photo (au clavier : au focus) ; sur téléphone, il est sous la photo. */
.cv.cv--first { padding-top: calc(var(--hd-h) + clamp(40px, 7vh, 88px)); }
.about-photo--hover { position: relative; margin-top: clamp(48px, 8vh, 92px); outline: none; }
.about-photo--hover .about-photo__over { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr; gap: clamp(20px, 3vh, 36px) clamp(32px, 5vw, 80px); align-items: end;
  padding: clamp(28px, 4.4vw, 72px); background: linear-gradient(to top, rgba(10, 10, 10, .9), rgba(10, 10, 10, .62)); color: var(--paper);
  opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.about-photo--hover .about-photo__over .section-tag { grid-column: 1 / -1; align-self: start; margin: 0; }
.about-photo--hover .about-photo__over .page-hero__title { grid-column: 1 / -1; align-self: end; font-size: clamp(48px, 6.6vw, 120px); }
.about-photo--hover .about-photo__over .about-intro__lead { align-self: end; font-size: clamp(22px, 2.4vw, 40px); }
.about-photo--hover .about-photo__over .about-intro__text { align-self: end; }
.about-photo--hover .about-photo__over .about-intro__text p { color: rgba(242, 241, 236, .78); font-size: clamp(14px, 1.15vw, 17px); }
.about-photo--hover .about-photo__over .about-intro__text p:last-child { margin-bottom: 0; }
.about-photo--hover .about-photo__over > * { translate: 0 18px; transition: translate .8s var(--ease-out); }
.about-photo--hover:is(:hover, :focus-visible, .is-shown) .about-photo__over { opacity: 1; pointer-events: auto; }
.about-photo--hover:is(:hover, :focus-visible, .is-shown) .about-photo__over > * { translate: 0 0; }
.about-photo--hover img { transition: transform 1.2s var(--ease-out), filter .8s; }
.about-photo--hover:is(:hover, :focus-visible, .is-shown) img { transform: scale(1.03); filter: blur(2px); }
/* Indice discret : « Pourquoi 701 ? » en bas à gauche, il s'efface quand le texte apparaît */
.about-photo--hover::after { content: 'Pourquoi 701 ?'; position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); z-index: 1; padding: 8px 12px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; transition: opacity .4s; }
.about-photo--hover:is(:hover, :focus-visible, .is-shown)::after { opacity: 0; }
/* Téléphone, tablette et écrans sans survol : le texte sous la photo, toujours visible */
@media (max-width: 1023px), (hover: none) {
  .about-photo--hover { aspect-ratio: auto; overflow: visible; }
  .about-photo--hover img { aspect-ratio: 4 / 3; height: auto; }
  .about-photo--hover:is(:hover, :focus-visible, .is-shown) img { transform: none; filter: none; }
  .about-photo--hover::after { display: none; }
  .about-photo--hover .about-photo__over { position: static; grid-template-columns: 1fr; padding: clamp(28px, 5vh, 48px) 0 0; background: none; opacity: 1; pointer-events: auto; }
  .about-photo--hover .about-photo__over > * { translate: 0 0; }
  .about-photo--hover .about-photo__over .page-hero__title { font-size: clamp(40px, 13vw, 96px); }
}

/* Nouvelles typos (10/11/2026) : IvyPresto Display (secondaire) et Dico Code Two (petites mentions).
   Ivy a des accents plus hauts et des jambages plus longs qu'Instrument Serif, et elle est plus large en italique :
   on agrandit les marges invisibles des lignes masquées (sans changer la mise en page) et on réduit un peu où ça déborde. */
.line { padding: .06em 0 .14em; margin: -.06em 0 -.1em; } /* le q de « Pourquoi », les accents : rien n'est rogné */
.pfx__w.s { padding: .08em .3em .28em; margin: -.06em -.3em -.26em; } /* pente et queues de l'italique du titre du portfolio */
@media (max-width: 767px) {
  .cv__title { font-size: clamp(17px, 5vw, 22px); }
  .about-photo--hover .about-photo__over .page-hero__title { font-size: clamp(36px, 11.5vw, 84px); }
}
/* Galerie : le titre garde au moins 60 % de la largeur ; si la catégorie ne tient pas à côté, elle passe dessous, à droite */
.gal__info { flex-wrap: wrap; row-gap: 4px; }
.gal__title { flex: 1 1 60%; min-width: 0; }
.gal__cat { flex: 0 1 auto; margin-left: auto; }
@media (max-width: 599px) { .gal__cat { margin-left: 0; } }
/* Sous-titre des pages projet : s'il passe sur deux lignes (téléphone), les deux lignes sont équilibrées */
.pj-hero__title .line + .line > span { text-wrap: balance; }
.pj-points--big .pj-point dt em { font-size: clamp(25px, 2.7vw, 43px); } /* Ivy Presto, 10 % plus petite que le texte d'à côté : « En collaboration avec » tient sur une ligne */
/* Menu plein écran sur téléphone : « À propos » reste sur une ligne, « & contact » passe dessous ; le mail et les réseaux ne se touchent plus */
.menu__big a { flex-wrap: wrap; }
.menu__foot { flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 480px) { .menu__big a { font-size: clamp(48px, 14.5vw, 128px); } }
@media (max-width: 480px) { .menu__big a em { flex-basis: 100%; margin-left: 0; padding-left: 30px; } } /* « & contact » sous « À propos », aligné sur le texte */

/* IvyPresto Display toujours en capitales (demande de Pierre, 10/11/2026) : toute l'italique du site, y compris le texte saisi dans Elementor */
em, .pfx__w.s { text-transform: uppercase !important; }

/* Gros titres réduits de 10 px (10/11/2026, demande de Pierre) : titres des parties, projets de l'accueil, titres des pages et des projets */
:root { --title-xl: calc(clamp(45px, 10.5vw, 182px) - 10px); }
.v4-title, .merch__title, .pf-co__title { font-size: calc(clamp(40px, 6vw, 104px) - 10px); }
.v4-display { font-size: calc(clamp(56px, 12vw, 210px) - 10px); }
.plan__title { font-size: calc(clamp(52px, 10vw, 180px) - 10px); }
.contact__big { font-size: calc(clamp(40px, 9.1vw, 168px) - 10px); }
.pf-701__title { font-size: calc(clamp(64px, 12vw, 210px) - 10px); }
.pj-hero__title { font-size: calc(clamp(44px, 7.6vw, 140px) - 10px); }
.pj-part__title { font-size: calc(clamp(48px, 8vw, 140px) - 10px); }
.pjs__title { font-size: calc(clamp(34px, 4.6vw, 80px) - 10px); }
.pjs__head.has-text .pjs__title { font-size: calc(clamp(30px, 3.4vw, 60px) - 10px); }
.gal-hero .page-hero__title { font-size: calc(clamp(44px, 7.4vw, 128px) - 10px); }
.about-photo--hover .about-photo__over .page-hero__title { font-size: calc(clamp(48px, 6.6vw, 120px) - 10px); }
@media (max-width: 767px) {
  .page-studio .page-hero__title { font-size: calc(clamp(40px, 15.5vw, 96px) - 10px); }
  .about-photo--hover .about-photo__over .page-hero__title { font-size: calc(clamp(36px, 11.5vw, 84px) - 10px); }
}

/* Le parcours (portfolio) : « Pierre Ploton » plus grand, seul sur sa ligne ; le métier dessous */
.pf-me__name b { display: block; margin-bottom: .18em; font-size: 2em; line-height: .9; letter-spacing: -.04em; }
.pf-me__name em { display: block; }

/* Écran d'accueil du portfolio : le projet en cours (bas de l'écran) centré sur l'écran */
.pfx__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pfx__foot > #pfxCount { grid-column: 1; justify-self: start; }
.pfx__foot > .pfx__now { grid-column: 2; justify-self: center; text-align: center; }
.pfx__foot > a { grid-column: 3; justify-self: end; }

/* Écran d'accueil de l'accueil : textes sur la vidéo plus petits et plus serrés, en bas de l'écran comme avant (sur les bords) */
.hero__kicker { margin-bottom: 12px; }
.hero__title { font-size: clamp(26px, 2.6vw, 50px); line-height: .86; }
.hero__title .line:nth-child(2), .hero__title .line:nth-child(4) { margin-top: .02em; }

/* Accueil : passage vers le portfolio, entre « Pourquoi 701 ? » et les projets 701 (10/11/2026) — vignettes qui défilent, pause au survol */
.pf-strip { padding: clamp(40px, 7vh, 80px) 0; border-top: 1px solid var(--line); overflow: hidden; }
.pf-strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--pad); margin-bottom: clamp(20px, 3vh, 32px); }
.pf-strip__head .section-tag { margin: 0; }
.pf-strip__track { display: flex; width: max-content; animation: pfStrip 55s linear infinite; }
.pf-strip:hover .pf-strip__track, .pf-strip:focus-within .pf-strip__track { animation-play-state: paused; }
.pf-strip__row { display: flex; gap: clamp(12px, 1.4vw, 20px); padding-right: clamp(12px, 1.4vw, 20px); }
.pf-strip__card { display: block; width: clamp(220px, 22vw, 340px); }
.pf-strip__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.pf-strip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pf-strip__card:hover .pf-strip__img img { transform: scale(1.05); }
.pf-strip__info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; }
.pf-strip__info b { font-weight: 700; font-size: 15px; line-height: 1.15; text-transform: uppercase; white-space: nowrap; }
.pf-strip__info .mono { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
@keyframes pfStrip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf-strip__track { animation: none; } .pf-strip { overflow-x: auto; } }
@media (max-width: 599px) { .pf-strip__head { flex-direction: column; gap: 10px; } }

/* 701's ARTBANK : les deux billets en petit, l'un au-dessus de l'autre, à côté du court-métrage YouTube (10/11/2026) */
.pj-bank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: 0 var(--pad); margin: 0 0 clamp(24px, 4vh, 48px); }
.pj-bank__notes { display: grid; gap: clamp(12px, 1.6vw, 24px); }
.pj-bank__notes figure { margin: 0; }
.pj-bank__notes img { display: block; width: 100%; height: auto; }
.pj-bank__cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0 0; color: var(--muted); }
.pj-bank__cap a { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.pj-bank__cap a .arw { height: 9px; }
@media (max-width: 767px) {
  .pj-bank { grid-template-columns: 1fr; }
  .pj-bank__notes { grid-template-columns: 1fr 1fr; order: 2; }
  .pj-bank__cap { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Téléphone : lisibilité et contenu allégé (10/11/2026) — petites mentions un peu plus grandes et plus claires,
   longs textes repliés (« Lire la suite », common.js), descriptions secondaires masquées ; les images restent */
@media (max-width: 767px) {
  :root { --muted: #a6a59f; }
  .mono { font-size: 11.5px; }
  .is-clamp:not(.is-open) { max-height: 7.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .clamp-btn { display: inline-block; margin: 10px 0 4px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--paper); cursor: pointer; }
  .pjs__head .clamp-btn, .pj-text .clamp-btn { justify-self: start; }
  .news__text, .pillar p { display: none; }
}
/* Libellés des crédits en capitales Ivy (plus larges) : « EN COLLABORATION AVEC » tient sur une ligne */
.pj-points--big .pj-point dt em { font-size: clamp(21px, 2.25vw, 36px); }

/* Pages projet, retouches du 10/11/2026 */
.pj-block--long { columns: auto; max-width: none; } /* Jabberwocky, An Impulse Film : le texte sur toute la largeur, entre le titre et le clip */
.pj-block--long p { max-width: none; }
.pj-gal--spaced { margin-bottom: clamp(48px, 7vw, 120px); } /* Dynamis : le titrage respire avant les symboles et les éléments */
.pj-part.has-white-titles :is(.pj-part__title, .pj-part__num, .pjs__title), .pj-part.has-white-titles :is(.pj-part__title, .pjs__title) .elementor-heading-title { color: #fff !important; } /* Mlle Pitch, « …Et tout s'arrête » */
/* Mlle Pitch, l'équipe : le titre à gauche, la photo en petit à droite */
.pjs--team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; column-gap: clamp(24px, 4vw, 64px); padding-right: var(--pad); }
.pjs--team > .pjs__head { padding-right: 0; margin-bottom: 0; }
.pjs--team > .pj-gal { padding: 0; }
@media (max-width: 767px) { .pjs--team { grid-template-columns: 1fr; padding-right: 0; } .pjs--team > .pj-gal { padding: 0 var(--pad); margin-top: 24px; } }
/* Galerie : bouton « Réduire » — une colonne de plus, plus d'espace entre les visuels ; « Agrandir » revient à la vue normale */
.gal-zoom svg { transition: none; }
.gal-tools .gal-zoom { margin-left: auto; }
.gal-tools .gal-zoom + .gal-shuffle { margin-left: 0; }
.gal.is-small { --cols: 5; gap: calc(var(--gap) * 2.4); }
.gal.is-small .gal__item { margin-bottom: calc(var(--gap) * 2.4); }
@media (max-width: 899px) { .gal.is-small { --cols: 4; } }
@media (max-width: 599px) { .gal.is-small { --cols: 3; gap: calc(var(--gap) * 1.6); } .gal.is-small .gal__item { margin-bottom: calc(var(--gap) * 1.6); } .gal.is-small .gal__info { display: none; } }
@media (max-width: 767px) {
  .page-galerie .gal-tools { flex-wrap: wrap; row-gap: 10px; }
  .page-galerie .gal-tools .filters { flex: 1 1 100%; order: 0; }
  .page-galerie .gal-tools .gal-zoom { margin-left: auto; }
}
/* Téléphone : la photo d'ouverture des projets garde son format (plus de recadrage plein écran), le texte remonte juste dessous */
@media (max-width: 767px) {
  .pj-hero:not(:has(.pj-split)) { height: auto; min-height: 0; padding-top: 76px; }
  .pj-hero:not(:has(.pj-split)) .pj-hero__media { position: relative; inset: auto; z-index: 0; }
  .pj-hero:not(:has(.pj-split)) .pj-hero__img { position: relative; display: block; height: auto; transform: none; animation: none; }
  .pj-hero:not(:has(.pj-split)) .pj-hero__img.ph { aspect-ratio: 4 / 3; }
  .pj-hero:not(:has(.pj-split)) .pj-hero__shade { display: none; }
  .pj-hero:not(:has(.pj-split)) .pj-hero__body { position: relative; left: auto; right: auto; bottom: auto; padding: 18px var(--pad) 4px; }
}

/* ===== Adaptations WordPress / Elementor ===== */
/* Le temps que les blocs Elementor reprennent la structure de la maquette (une fraction de seconde) */
html:not(.v4-ready):not(.v4-editing) body.v4page .elementor { visibility: hidden; }
:where(body.v4page) { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
body.v4page .elementor { margin: 0; }
:where(body.v4page) a { color: inherit; text-decoration: none; } /* faible priorité : les styles de la maquette passent devant */
/* paragraphes ajoutés par l'éditeur de texte : sans marge, comme les éléments de la maquette */
.news__card > p, .merch__feature > p, .contact > p, .pillar > p:first-of-type { margin: 0; }
.contact__row .contact__nav { display: flex; gap: 24px; }
/* Dans l'éditeur Elementor : les classes restent sur les blocs, tout est visible et à plat pour être modifié */
.v4-editing .reveal, .v4-editing .pillar.reveal > *, .v4-editing .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.v4-editing .loader { display: none !important; }
.v4-editing .e-con.hero { min-height: 70vh; }
.v4-editing .elementor-heading-title, .v4-editing .elementor-widget-text-editor { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; }
.v4-head--row > .sh-link { justify-self: start; align-self: end; }
/* Portfolio : dans le bloc 701 Studio, titres et paragraphes sans marges par défaut (la maquette utilisait des <span>) */
.pf-701__inner > :not(.section-tag) { margin: 0; }