/* MÈCHE — salon fictif. Fashion, noir / os / vert acide, typographie très large. */
@font-face { font-family: 'Meche Display'; src: url(assets/display.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Meche Sans'; src: url(assets/sans.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Meche Sans'; src: url(assets/sans-b.woff) format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Meche Serif'; src: url(assets/serif-i.woff) format('woff'); font-style: italic; font-display: swap; }

:root {
  --black: #0b0b0b;
  --bone: #efece6;
  --acid: #c8ff2e;
  --grey: #8a8780;
  --display: 'Meche Display', 'Arial Black', sans-serif;
  --sans: 'Meche Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Meche Serif', Georgia, serif;
  --pad: clamp(16px, 3.4vw, 56px);
  --snap: cubic-bezier(0.7, 0, 0.2, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--bone); font: 400 15px/1.5 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, dl, dd, fieldset { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
em { font: italic 400 1em var(--serif); letter-spacing: 0; text-transform: none; }

.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--pad); mix-blend-mode: difference; color: #fff; }
.brand { font: 400 18px/1.3 var(--display); text-decoration: none; letter-spacing: 0.02em; }
.menu { display: flex; gap: 28px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: line-through; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Hero */
.hero { position: relative; min-height: 100svh; padding: 88px var(--pad) 32px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.hero__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); border-top: 1px solid #2a2a2a; padding-top: 12px; }
.hero__word { position: relative; z-index: 2; align-self: center; display: flex; justify-content: space-between; font: 400 clamp(64px, 18.5vw, 360px)/0.8 var(--display); letter-spacing: -0.02em; mix-blend-mode: difference; color: #fff; overflow: hidden; padding-block: 0.42em 0.12em; line-height: 1.1; }
.l { display: inline-block; }
.hero__img { position: absolute; left: 50%; top: 50%; width: min(34vw, 460px); aspect-ratio: 4 / 5; transform: translate(-50%, -46%); z-index: 1; overflow: hidden; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__claim { position: relative; z-index: 3; font: 700 clamp(22px, 2.4vw, 36px)/1.05 var(--sans); text-transform: uppercase; max-width: 12em; letter-spacing: -0.01em; }
.hero__claim em { color: var(--acid); }
.hero__rdv { position: absolute; right: var(--pad); bottom: 28px; z-index: 3; width: 120px; height: 120px; display: grid; place-items: center; text-decoration: none; color: var(--black); background: var(--acid); border-radius: 50%; transition: transform 0.6s var(--out); }
.hero__rdv svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.hero__rdv text { font: 700 9.5px var(--sans); letter-spacing: 0.18em; fill: var(--black); }
.hero__rdv span { font-size: 30px; transition: transform 0.6s var(--out); }
.hero__rdv:hover { transform: scale(1.08); }
.hero__rdv:hover span { transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.ticker { background: var(--acid); color: var(--black); overflow: hidden; padding: 14px 0; transform: rotate(-2deg) scale(1.04); margin: 24px 0 0; }
.ticker__t { display: flex; gap: 28px; width: max-content; font: 400 clamp(22px, 3vw, 44px)/1.3 var(--display); text-transform: uppercase; animation: tick 22s linear infinite; }
.ticker__t i { font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

.sec-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 88px); }
.tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); }
.big { font: 400 clamp(36px, 6.6vw, 116px)/1.3 var(--display); padding-top: 0.06em; text-transform: uppercase; letter-spacing: -0.02em; }
.big em { color: var(--acid); font-size: 1.08em; }

/* Prestations */
.svc { padding: clamp(96px, 12vw, 180px) var(--pad); }
.svc__list { list-style: none; border-top: 1px solid #2a2a2a; }
.svc__list li { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid #2a2a2a; isolation: isolate; cursor: default; }
.svc__list li::before { content: ''; position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--acid); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--snap); z-index: -1; }
.svc__n { font-size: 12px; color: var(--grey); }
.svc__t { font: 400 clamp(22px, 3vw, 50px)/1.32 var(--display); text-transform: uppercase; transition: transform 0.5s var(--snap); }
.svc__d { color: var(--grey); max-width: 30em; transition: color 0.3s; }
.svc__list img { position: absolute; right: 8%; top: 50%; width: 200px; height: 250px; object-fit: cover; transform: translateY(-50%) rotate(6deg) scale(0.6); opacity: 0; transition: transform 0.6s var(--out), opacity 0.3s; pointer-events: none; }
.svc__list li:hover::before { transform: scaleY(1); }
.svc__list li:hover { color: var(--black); }
.svc__list li:hover .svc__n, .svc__list li:hover .svc__d { color: var(--black); }
.svc__list li:hover .svc__t { transform: translateX(16px); }
.svc__list li:hover img { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(1); }

/* Tarifs */
.price { background: var(--bone); color: var(--black); padding: clamp(96px, 12vw, 180px) var(--pad); }
.price .tag, .price__note { color: #6e6b65; }
.price .big em { color: var(--black); background: var(--acid); padding: 0 0.1em; }
.price__note { font-size: 13px; }
.price__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); }
.price dl > div { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid #cfcac1; }
.price dt { font: 700 clamp(17px, 1.6vw, 22px)/1.2 var(--sans); text-transform: uppercase; letter-spacing: -0.01em; }
.price dt::after { content: ''; flex: 1; }
.price dl > div::after { content: none; }
.price dd { margin-left: auto; font: italic 400 clamp(20px, 2vw, 28px)/1 var(--serif); white-space: nowrap; }

/* Galerie horizontale liée au défilement */
.gal { position: relative; height: 320vh; }
.gal__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.gal__tag { position: absolute; top: 88px; left: var(--pad); }
.gal__track { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: 0 var(--pad); width: max-content; will-change: transform; }
.gal__track figure { position: relative; width: clamp(220px, 26vw, 400px); aspect-ratio: 4 / 5; overflow: hidden; flex: none; }
.gal__track figure.tall { aspect-ratio: 3 / 5; }
.gal__track figure.wide { width: clamp(300px, 40vw, 620px); aspect-ratio: 3 / 2; }
.gal__track img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.2s var(--out); }
.gal__track figure:hover img { transform: scale(1); }
.gal__track figcaption { position: absolute; left: 12px; bottom: 12px; font: 700 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; background: var(--black); padding: 6px 8px; }
.gal__end { flex: none; width: 40vw; font: 400 clamp(28px, 4vw, 70px)/1.3 var(--display); text-transform: uppercase; padding-left: 4vw; }
.gal__end em { color: var(--acid); }

/* Équipe */
.team { padding: clamp(96px, 12vw, 180px) var(--pad); }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.mate__img { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 16px; background: #1a1a1a; }
.mate__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); transform: scale(1.05); transition: filter 0.7s var(--out), transform 0.9s var(--out); }
.mate:hover .mate__img img { filter: none; transform: scale(1); }
.mate h3 { font: 400 clamp(24px, 2.6vw, 42px)/1.3 var(--display); text-transform: uppercase; }
.mate p { color: var(--grey); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; margin-top: 8px; }

/* Philosophie */
.philo { padding: clamp(96px, 12vw, 180px) var(--pad); border-top: 1px solid #2a2a2a; }
.philo__t { margin-top: 32px; font: 700 clamp(30px, 5.2vw, 88px)/1.02 var(--sans); text-transform: uppercase; letter-spacing: -0.035em; max-width: 16em; }
.philo mark { color: var(--black); background: linear-gradient(var(--acid), var(--acid)) left / 0% 100% no-repeat; color: inherit; padding: 0 0.08em; transition: background-size 0.9s var(--snap), color 0.4s 0.3s; }
.philo.is-in mark { background-size: 100% 100%; color: var(--black); }
.philo.is-in mark:nth-of-type(2) { transition-delay: 0.25s, 0.55s; }
.philo.is-in mark:nth-of-type(3) { transition-delay: 0.5s, 0.8s; }

/* RDV */
.rdv { background: var(--acid); color: var(--black); padding: clamp(80px, 10vw, 160px) var(--pad); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.rdv__t { font: 400 clamp(44px, 8.4vw, 156px)/1.28 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.rdv__t span { display: block; }
.rdv__t i { font-style: normal; display: inline-block; margin-left: 0.1em; transition: transform 0.6s var(--out); }
.rdv:hover .rdv__t i { transform: rotate(-45deg); }
.rdv__form { display: grid; gap: 22px; }
fieldset { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
legend, .field { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
fieldset label { position: relative; }
fieldset input { position: absolute; opacity: 0; }
fieldset span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--black); border-radius: 999px; font-weight: 700; cursor: pointer; transition: background 0.3s, color 0.3s; }
fieldset input:checked + span { background: var(--black); color: var(--acid); }
fieldset input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }
.field { display: grid; gap: 8px; margin: 0; }
.field input { font: 700 18px/1.2 var(--sans); background: transparent; border: 0; border-bottom: 1.5px solid var(--black); padding: 8px 0; color: var(--black); border-radius: 0; min-width: 0; width: 100%; }
.go { height: 60px; border: 0; border-radius: 999px; background: var(--black); color: var(--acid); font: 700 14px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: transform 0.4s var(--out); }
.go:hover { transform: scale(1.03); }
.rdv__demo { font-size: 12px; opacity: 0.7; }
.rdv__ok { font: italic 400 24px/1.2 var(--serif); }

.end { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px var(--pad) 72px; font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; }


/* Entrée et apparitions : rapides, nettes */
.js .l { transform: translateY(110%); transition: transform 0.9s var(--snap); transition-delay: calc(var(--i) * 0.07s + 0.15s); }
.js .is-ready .l, .js.is-ready .l { transform: none; }
.js .hero__img { clip-path: inset(50% 0 50% 0); transition: clip-path 1.2s var(--snap) 0.35s; }
.js.is-ready .hero__img { clip-path: inset(0 0 0 0); }
.js .hero__img img { transform: scale(1.3); transition: transform 2s var(--out) 0.35s; }
.js.is-ready .hero__img img { transform: scale(1); }
.js .up { opacity: 0; transform: translateY(40px) skewY(3deg); transition: opacity 0.8s var(--out), transform 0.9s var(--out); }
.js .up.is-in { opacity: 1; transform: none; }
.rm .l, .rm .hero__img, .rm .hero__img img, .rm .up { transform: none !important; clip-path: none !important; opacity: 1 !important; transition: none !important; }
.rm .ticker__t, .rm .hero__rdv svg, .rm .pill__dot { animation: none; }
.rm .gal { height: auto; }
.rm .gal__sticky { position: static; height: auto; padding: 120px 0; }
.rm .gal__track { overflow-x: auto; width: auto; }

@media (max-width: 899px) {
  .menu { display: none; }
  .hero { grid-template-rows: auto auto 1fr auto; }
  .hero__meta span:nth-child(3) { display: none; }
  .hero__word { margin-top: 18svh; }
  .hero__img { position: relative; left: auto; top: auto; transform: none; width: 62%; margin: -10vw auto 24px; }
  .hero__rdv { width: 92px; height: 92px; bottom: 24px; }
  .hero__rdv text { font-size: 9px; }
  .svc__list li { grid-template-columns: 36px minmax(0, 1fr); }
  .svc__d { grid-column: 2; }
  .svc__list img { display: none; }
  .price__cols, .rdv { grid-template-columns: 1fr; }
  .gal { height: auto; }
  .gal__sticky { position: static; height: auto; padding: 96px 0 40px; }
  .gal__tag { position: static; padding: 0 var(--pad) 24px; }
  .gal__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
  .gal__track::-webkit-scrollbar { display: none; }
  .gal__track figure { width: 72vw; scroll-snap-align: center; }
  .gal__track figure.wide { width: 86vw; }
  .gal__end { width: 70vw; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .team__grid .mate:last-child { grid-column: 1 / -1; }
  .team__grid .mate:last-child .mate__img { aspect-ratio: 16 / 10; }
}
main { overflow-x: clip; }


/* Menu mobile (net, rapide, typographie XL) */
.mbtn { display: none; font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: inherit; background: none; border: 1px solid currentColor; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
html.mnav-open .bar { mix-blend-mode: normal; color: var(--bone); }
.mnav { position: fixed; inset: 0; z-index: 19; background: var(--black); display: flex; align-items: flex-end; padding: 88px var(--pad) 84px; clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--snap); }
.mnav[hidden] { display: none; }
html.mnav-open .mnav { clip-path: inset(0 0 0 0); }
.mnav nav { display: grid; gap: 2px; width: 100%; }
.mnav a { display: flex; align-items: baseline; gap: 12px; font: 400 clamp(26px, 7.4vw, 50px)/1.48 var(--display); text-transform: uppercase; color: var(--bone); text-decoration: none; transform: translateY(40%); opacity: 0; transition: transform 0.6s var(--out), opacity 0.4s, color 0.2s; }
.mnav a i { font: 400 11px/1 var(--sans); font-style: normal; color: var(--grey); letter-spacing: 0.06em; }
.mnav a:hover, .mnav a:focus-visible { color: var(--acid); }
html.mnav-open .mnav a { transform: none; opacity: 1; transition-delay: calc(0.15s + var(--k, 0) * 0.04s); }
.mnav a:nth-child(2) { --k: 1; } .mnav a:nth-child(3) { --k: 2; } .mnav a:nth-child(4) { --k: 3; } .mnav a:nth-child(5) { --k: 4; } .mnav a:nth-child(6) { --k: 5; } .mnav a:nth-child(7) { --k: 6; }
html.mnav-open { overflow: hidden; }
.rm .mnav, .rm .mnav a { transition: none; }
@media (max-width: 899px) {
  .mbtn { display: block; }
  .bar .pill { margin-left: auto; }
}
@media (max-width: 420px) {
  .bar .pill { display: none; }
}