/* ════════════════════════════════════════════
   VARIABLES
════════════════════════════════════════════ */
:root {
  --bg:    #252422;
  --bg2:   #1b1a18;
  --bg3:   #1C1B19;
  --bg4:   #181716;
  --rule:  #353330;
  --rule2: #454340;
  --smoke: #C8C4C0;
  --mist:  #8C8A88;
  --gold:  #C8971E;
  --gold2: #B48518;
  --gold3: #C8971E;
  --sand:  #DDD8CE;
  --cream: #E6E0D6;
}

/* ════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body {
  background:var(--bg);
  color:var(--smoke);
  font-family:'Syne', sans-serif;
  font-weight:400; font-size:16px; line-height:1.7;
  overflow-x:hidden;
}
::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--gold); }

/* br desktop uniquement — caché par défaut */
br.d-br { display:none; }

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:58px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 60px;
  background:rgba(18,17,16,0.98);
  backdrop-filter:blur(12px);
  transition:transform 0.3s ease;
}
nav.nav-hidden { transform:translateY(-100%); }
.nav-logo {
  font-family:'DM Serif Display', serif;
  font-style:italic; font-size:1.15rem;
  color:var(--cream); text-decoration:none;
}
.nav-links { display:flex; gap:44px; list-style:none; }
.nav-links a {
  font-size:0.68rem; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mist); text-decoration:none; transition:color 0.2s;
}
.nav-links a:hover { color:var(--gold); }
.nav-links a.nav-cta {
  color:var(--gold);
  border:1px solid var(--gold);
  padding:6px 14px;
  letter-spacing:0.18em;
  font-weight:700;
  transition:background 0.2s, color 0.2s;
}
.nav-links a.nav-cta:hover { background:var(--gold); color:var(--bg4); }
.nav-links a.nav-lang {
  font-size:0.62rem; font-weight:700;
  letter-spacing:0.18em; color:var(--mist);
  border:1px solid var(--rule2); padding:5px 10px;
  transition:border-color 0.2s, color 0.2s;
}
.nav-links a.nav-lang:hover { color:var(--gold); border-color:var(--gold); }
.mobile-menu a.nav-lang { color:var(--mist); font-size:0.78rem; }

/* Hamburger */
.nav-burger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none;
}
.nav-burger span {
  display:block; width:22px; height:1.5px;
  background:var(--smoke);
  transition:transform 0.3s, opacity 0.3s, background 0.2s;
}
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.nav-burger.open span { background:var(--gold); }

/* Mobile menu */
.mobile-menu {
  position:fixed; top:58px; left:0; right:0; z-index:490;
  background:#121110;
  overflow:hidden; max-height:0;
  transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.open { max-height:420px; }
.mobile-menu a {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 28px;
  font-size:0.88rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--smoke); text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:color 0.2s, background 0.2s;
}
.mobile-menu a::after { content:'→'; font-size:0.75rem; color:var(--mist); transition:color 0.2s, transform 0.2s; }
.mobile-menu a:hover { color:var(--gold); background:rgba(248,177,0,0.05); }
.mobile-menu a:hover::after { color:var(--gold); transform:translateX(4px); }
.mobile-menu a.nav-cta { color:var(--gold); font-weight:700; border-bottom:1px solid var(--rule); }
.mobile-menu a.nav-cta::after { color:var(--gold); }
.mobile-menu a:last-child { border-bottom:none; }

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
#hero {
  min-height:100vh; padding:0;
  position:relative; display:grid; grid-template-columns:3fr 2fr;
}
.hero-photo-col {
  position:relative; overflow:hidden;
  min-height:calc(100vh - 58px);
}
.hero-photo-col::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 55%, rgba(37,36,34,0.85) 100%);
  pointer-events:none;
}
.hero-photo-col img {
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(100%) brightness(1.05) contrast(1.02);
  transition:transform 10s ease; display:block;
}
.hero-photo-col img.in { transform:scale(1.03); }
.hero-caption {
  position:absolute; top:0; left:0; right:0;
  padding:12px 16px 28px;
  font-family:'Syne', sans-serif;
  font-size:0.65rem; font-weight:400;
  letter-spacing:0.12em; line-height:1.5;
  color:rgba(255,255,255,0.6);
  background:linear-gradient(to bottom, rgba(20,18,16,0.72) 0%, rgba(20,18,16,0.2) 60%, transparent 100%);
  pointer-events:none;
}
.hero-text-col {
  display:flex; flex-direction:column; justify-content:center;
  padding:100px 60px 80px 48px;
}
.hero-overline {
  font-size:0.74rem; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:36px;
  display:flex; flex-direction:column; gap:4px;
  --trait-w:24px; --trait-gap:14px;
  opacity:0; animation:up 0.7s 0.1s ease forwards;
}
.overline-l1 { display:flex; align-items:center; gap:var(--trait-gap); white-space:nowrap; }
.overline-l1::before { content:''; width:var(--trait-w); height:1px; background:var(--gold); flex-shrink:0; }
.overline-l2 { white-space:nowrap; padding-left:calc(var(--trait-w) + var(--trait-gap)); }
.hero-h1 {
  font-family:'DM Serif Display', serif; font-weight:400;
  font-size:clamp(2.8rem, 5.5vw, 6rem);
  line-height:0.95; letter-spacing:-0.025em;
  color:var(--cream); margin-bottom:30px;
  opacity:0; animation:up 0.9s 0.2s ease forwards;
}
.hero-h1 em { font-style:italic; color:var(--gold); }
.hero-statement {
  font-family:'DM Serif Display', serif; font-style:italic;
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  color:var(--smoke); line-height:1.6; max-width:none; margin-bottom:40px;
  border-left:2px solid var(--gold); padding-left:20px;
  white-space:nowrap;
  opacity:0; animation:up 0.7s 0.35s ease forwards;
}
.hero-ctas { display:flex; gap:12px; flex-wrap:nowrap; opacity:0; animation:up 0.7s 0.5s ease forwards; }
.cta-a, .cta-b {
  display:inline-flex; align-items:center; justify-content:center; flex:1;
  font-family:'Syne', sans-serif;
  font-size:0.68rem; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:14px 20px; text-decoration:none;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
  white-space:nowrap;
}
.cta-a { background:var(--gold); color:var(--bg4); border:1px solid var(--gold); }
.cta-a:hover { background:var(--gold2); border-color:var(--gold2); }
.cta-b { background:transparent; color:var(--smoke); border:1px solid var(--rule2); }
.cta-b:hover { border-color:var(--gold); color:var(--gold); }

/* ════════════════════════════════════════════
   SHARED
════════════════════════════════════════════ */
.wrap { max-width:1360px; margin:0 auto; padding:0 60px; }
section, #credits { padding:48px 0; scroll-margin-top:58px; }
#work { padding:48px 0; scroll-margin-top:58px; background:var(--bg); }
.s-label {
  font-size:0.97rem; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--mist); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.s-label::before { content:''; width:18px; height:1px; background:var(--gold); }
h2 {
  font-family:'DM Serif Display', serif; font-weight:400;
  font-size:clamp(1.9rem, 3.5vw, 3.2rem);
  color:var(--cream); line-height:1.06; letter-spacing:-0.02em; margin-bottom:12px;
}
h2 em { font-style:italic; color:var(--gold); }
.s-sub { font-size:0.97rem; color:var(--mist); max-width:480px; line-height:1.7; }

/* ════════════════════════════════════════════
   PARALLAX
════════════════════════════════════════════ */
.px-clip { overflow:hidden; position:relative; height:52vh; min-height:340px; }
.px { position:absolute; inset:0; }
.px-bg {
  position:absolute; inset:-18% 0;
  background-size:cover; background-position:center center;
  background-attachment:scroll;
  filter:grayscale(20%) brightness(0.62) contrast(1.06) sepia(3%);
  will-change:transform;
}
.px-veil {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,25,20,0.5) 0%, transparent 45%, rgba(28,25,20,0.25) 100%);
}
.px-body {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  text-align:center; gap:12px; padding:0 40px 80px;
}
.px-body h3 {
  font-family:'DM Serif Display', serif; font-style:italic;
  font-size:clamp(2rem, 5vw, 5rem); color:var(--cream); line-height:1.05;
}
.px-body p {
  font-size:0.65rem; font-weight:700;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
}

/* ════════════════════════════════════════════
   CREDITS
════════════════════════════════════════════ */
#credits { background:var(--bg2); }
.credits-head { margin-bottom:56px; }
.credits-head .s-sub { margin-top:14px; max-width:560px; }
.credits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; }
.credit-card { display:flex; flex-direction:column; gap:0; }
.credit-img-wrap { position:relative; aspect-ratio:670/1102; overflow:hidden; background:var(--bg3); cursor:pointer; }
.credit-img-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(20%) brightness(0.82) contrast(1.06);
  transition:filter 0.6s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.credit-card:hover .credit-img-wrap img { filter:grayscale(0%) brightness(0.92); transform:scale(1.04); }
.credit-badge {
  position:absolute; top:10px; left:10px;
  font-family:'Syne', sans-serif; font-size:0.5rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bg4); background:var(--gold); padding:4px 8px;
}
.credit-play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); transition:background 0.3s;
}
.credit-play span {
  background:rgba(200,151,30,0.9); color:#fff;
  font-family:'Syne', sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; padding:8px 14px;
  opacity:0; transform:translateY(6px); transition:opacity 0.3s, transform 0.3s;
}
.credit-card:hover .credit-play { background:rgba(0,0,0,0.45); }
.credit-card:hover .credit-play span { opacity:1; transform:translateY(0); }
.credit-info { padding:12px 0 0; border-top:2px solid transparent; transition:border-color 0.3s; }
.credit-card:hover .credit-info { border-color:var(--gold); }
.credit-title { font-family:'DM Serif Display', serif; font-size:clamp(0.85rem,1.2vw,1.1rem); color:var(--cream); line-height:1.1; margin-bottom:5px; }
.credit-platform { font-size:0.57rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; opacity:0.85; }
.credit-role { font-size:0.6rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--mist); }
.credit-note { font-size:0.78rem; color:var(--mist); line-height:1.6; margin-top:7px; font-style:italic; }
.credits-quote { border-left:2px solid var(--gold); padding:20px 28px; background:rgba(200,151,30,0.04); max-width:720px; margin:0 auto; }
.credits-quote p { font-family:'DM Serif Display', serif; font-style:italic; font-size:clamp(1rem,1.6vw,1.25rem); color:var(--cream); line-height:1.65; margin-bottom:12px; }
.credits-quote cite { font-size:0.6rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-style:normal; }

/* ════════════════════════════════════════════
   WORK
════════════════════════════════════════════ */
.work-masthead { display:flex; align-items:flex-end; padding:0 60px 36px; max-width:1360px; margin:0 auto; border-bottom:1px solid var(--rule); }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule); max-width:1360px; margin:0 auto; }
.card { display:flex; flex-direction:column; background:var(--bg3); cursor:pointer; overflow:hidden; }
.card-img-wrap { position:relative; overflow:hidden; flex-shrink:0; aspect-ratio:16/10; }
.card-img {
  width:100%; height:100%; display:block; object-fit:cover;
  filter:grayscale(15%) brightness(0.72) contrast(1.06);
  transition:filter 0.7s ease, transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.card:hover .card-img { filter:grayscale(0%) brightness(0.88); transform:scale(1.04); }
.card-body { background:var(--bg4); padding:20px 24px 24px; flex:1; display:flex; flex-direction:column; border-top:2px solid transparent; transition:border-color 0.3s; }
.card:hover .card-body { border-color:var(--gold); }
.card-num { font-family:'DM Serif Display',serif; font-style:italic; font-size:2rem; color:var(--rule2); line-height:1; margin-bottom:8px; transition:color 0.3s; }
.card:hover .card-num { color:var(--gold); opacity:0.65; }
.card-cat { font-size:0.57rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; opacity:0.8; }
.card-title { font-family:'DM Serif Display', serif; font-size:clamp(1.2rem,2vw,1.7rem); color:var(--cream); line-height:1.08; margin-bottom:7px; }
.card-role { font-size:0.7rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--mist); margin-bottom:10px; }
.card-tags { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.tag-label { font-size:0.54rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--mist); margin-right:2px; font-style:italic; }
.tag { font-size:0.57rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(200,151,30,0.5); padding:3px 9px; transition:border-color 0.2s, color 0.2s; }
.card:hover .tag { border-color:rgba(248,177,0,0.8); }
.card-footer { margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; }
.card-read { display:inline-flex; align-items:center; gap:7px; font-size:0.6rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); animation:blink-read 2.2s ease-in-out infinite; }
.card:hover .card-read { animation:none; opacity:1; }
.card-read-arrow { transition:transform 0.2s; }
.card:hover .card-read-arrow { transform:translateX(5px); }

/* ════════════════════════════════════════════
   PROCESS
════════════════════════════════════════════ */
#Process { background:var(--bg); border-bottom:none; }
.Process-top { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:40px; align-items:end; }
.ap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); overflow:hidden; }
.ap { background:var(--bg); padding:28px 24px 32px; opacity:0; transform:translateY(12px); transition:opacity 0.5s ease, transform 0.5s ease, background 0.25s; }
.ap.vis { opacity:1; transform:translateY(0); }
.ap:hover { background:var(--bg2); }
.ap-n { font-family:'DM Serif Display', serif; font-size:2.2rem; color:var(--rule2); line-height:1; margin-bottom:12px; transition:color 0.25s; }
.ap:hover .ap-n { color:var(--gold); }
.ap h3 { font-size:0.88rem; font-weight:500; color:var(--cream); margin-bottom:8px; line-height:1.4; }
.ap p { font-size:0.92rem; color:var(--mist); line-height:1.65; }
.ap-out { display:inline-block; margin-top:10px; font-size:0.6rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); opacity:0.85; }

/* ════════════════════════════════════════════
   SHOWREEL
════════════════════════════════════════════ */
.sr-band { background:var(--bg2); padding:35px 0; scroll-margin-top:0px; }
.sr-band h2 { margin-bottom:16px; }
.sr-band-text { font-size:0.97rem; color:var(--mist); line-height:1.7; max-width:680px; margin-top:0; }
.sr-video { position:relative; width:100%; height:65vh; margin:0; padding:0; background:#000; overflow:hidden; }
.sr-video-wrap { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.sr-iframe { position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.77vh; transform:translate(-50%,-50%) scale(1.35); border:none; }
.sr-poster { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/poster_showreel.jpg') center center / cover no-repeat; z-index:5; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sr-play-btn { width:60px; height:60px; background:rgba(200,151,30,0.88); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.sr-play-arrow { width:0; height:0; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:22px solid #fff; margin-left:5px; }
.sr-label { position:absolute; bottom:15px; right:20px; z-index:10; pointer-events:none; }
#sr-label { bottom:15px; right:20px; left:auto; }
.sr-label-text { font-family:'Syne', sans-serif; font-size:11px; font-weight:300; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.42); }
.sr { position:relative; width:100%; }
.sr iframe { width:100%; height:100%; border:none; display:block; }
.sr-cap { position:absolute; bottom:0; left:0; right:0; padding:36px 60px; display:flex; align-items:flex-end; justify-content:space-between; background:linear-gradient(to top, rgba(28,25,20,0.75), transparent); }
.sr-cap h3 { font-family:'DM Serif Display', serif; font-size:clamp(2rem,4vw,3.8rem); font-style:italic; color:var(--cream); line-height:1; }
.sr-cap span { font-size:0.62rem; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); }

/* ════════════════════════════════════════════
   JOURNEY / BACKGROUND
════════════════════════════════════════════ */
#journey { background:var(--bg2); }
.j-head { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; padding-bottom:36px; border-bottom:1px solid var(--rule); margin-bottom:0; }
.j-head > p { font-size:0.97rem; color:var(--mist); line-height:1.7; }
.tl { list-style:none; }
.tl-r { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid var(--rule); padding:28px 0; opacity:0; transform:translateY(10px); transition:opacity 0.5s ease, transform 0.5s ease, background 0.2s; }
.tl-r.vis { opacity:1; transform:translateY(0); }
.tl-r:hover { background:rgba(248,177,0,0.03); }
.tl-l { padding-right:32px; padding-top:2px; }
.tl-era { font-size:0.57rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:5px; }
.tl-org { font-family:'DM Serif Display', serif; font-size:0.92rem; font-style:italic; color:var(--mist); }
.tl-c { padding-left:32px; border-left:1px solid var(--rule); }
.tl-role { font-size:0.77rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream); margin-bottom:7px; }
.tl-desc { font-size:0.92rem; color:var(--mist); line-height:1.7; }
.tl-val { display:inline-block; margin-top:8px; font-size:0.58rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); opacity:0.8; }

/* ════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════ */
#contact { background:var(--bg); padding-top:48px; }
section:has(.px-clip) { padding-top:48px; }
.c-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; }
.c-grid h2 { margin-bottom:12px; }
.c-grid > div > p:not(.s-label) { font-size:0.97rem; color:var(--mist); margin-bottom:28px; max-width:420px; }
.modes { list-style:none; }
.contact-photo-wrap {
  margin:20px 0 24px;
  width:100%; max-width:220px;
  aspect-ratio:1/1;
  overflow:hidden;
  filter:grayscale(100%) brightness(1.02) contrast(1.03);
}
.contact-photo {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.contact-photo-row {
  display:flex;
  align-items:flex-end;
  gap:20px;
  margin:20px 0 24px;
}
.contact-photo-row .contact-photo-wrap {
  margin:0;
}
.contact-linkedin {
  display:inline-flex; align-items:center;
  font-family:'Syne', sans-serif;
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:10px 18px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:background 0.2s, color 0.2s;
}
.contact-linkedin:hover { background:var(--gold); color:var(--bg4); }
.contact-langs { margin-top:24px; color:var(--gold); display:flex; flex-direction:row; align-items:baseline; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
.contact-langs span { font-size:0.72rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; }
.contact-langs span + span { font-size:0.65rem; letter-spacing:0.14em; }
.mode { padding:11px 0; border-top:1px solid var(--rule); }
.mode strong { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream); margin-bottom:2px; }
.mode span { font-size:0.88rem; color:var(--mist); }
.c-geo { margin-top:20px; font-size:0.6rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--mist); display:flex; align-items:center; gap:8px; }
.c-geo::before { content:'◎'; color:var(--gold); }
.cf { display:flex; flex-direction:column; }
.cf-f { border-bottom:1px solid var(--rule); transition:border-color 0.2s; }
.cf-f:focus-within { border-color:var(--gold); }
.cf-f input, .cf-f textarea { width:100%; background:transparent; border:none; color:var(--cream); font-family:'Syne', sans-serif; font-size:0.97rem; padding:14px 0; outline:none; resize:none; }
.cf-f input::placeholder, .cf-f textarea::placeholder { color:var(--mist); }
.cf-f input:-webkit-autofill,
.cf-f input:-webkit-autofill:hover,
.cf-f input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #252422 inset !important;
  -webkit-text-fill-color:#E6E0D6 !important;
  caret-color:#E6E0D6;
}
.cf-f textarea { min-height:90px; }
.cf-captcha-label { font-size:0.68rem; color:var(--mist); letter-spacing:0.08em; padding:14px 0 4px; display:none; }
.cf-note { font-size:0.68rem; color:var(--mist); margin:12px 0 18px; display:flex; align-items:center; gap:9px; }
.cf-note::before { content:''; width:16px; height:1px; background:var(--gold); }
.cf-sub { align-self:flex-start; cursor:pointer; font-family:'Syne', sans-serif; font-size:0.68rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--bg4); background:var(--gold); border:none; padding:13px 32px; transition:background 0.2s; }
.cf-sub:hover { background:var(--gold2); }
.cf-feedback { display:none; padding:14px 18px; margin-bottom:16px; font-size:0.82rem; font-weight:500; letter-spacing:0.04em; }
.cf-feedback.ok { display:block; background:rgba(200,151,30,0.1); border-left:2px solid var(--gold); color:var(--cream); }
.cf-feedback.err { display:block; background:rgba(180,50,50,0.1); border-left:2px solid #b04040; color:#c88080; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
footer { background:var(--bg4); border-top:1px solid var(--rule); padding:26px 60px; display:flex; align-items:center; justify-content:space-between; }
.f-n { font-family:'DM Serif Display', serif; font-style:italic; font-size:1rem; color:var(--mist); }
.f-links { display:flex; gap:28px; list-style:none; }
.f-links a { font-size:0.6rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--mist); text-decoration:none; transition:color 0.2s; }
.f-links a:hover { color:var(--gold); }
.f-c { font-size:0.6rem; color:var(--mist); }

/* ════════════════════════════════════════════
   DRAWER
════════════════════════════════════════════ */
.veil { position:fixed; inset:0; z-index:600; background:rgba(12,10,8,0.72); opacity:0; pointer-events:none; transition:opacity 0.3s; }
.veil.on { opacity:1; pointer-events:all; }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:700; width:min(520px,88vw); background:var(--bg2); border-left:1px solid var(--rule); overflow-y:auto; transform:translateX(110%); transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); padding:68px 52px 60px; }
.drawer.on { transform:translateX(0); }
.d-x { position:absolute; top:20px; right:20px; background:none; border:1px solid var(--rule); color:var(--mist); width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s; }
.d-x:hover { border-color:var(--gold); color:var(--bg4); background:var(--gold); }
.d-cat { font-size:0.6rem; font-weight:500; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.drawer h2 { font-size:clamp(1.5rem,3vw,2.3rem); margin-bottom:32px; color:var(--cream); }
.d-s { margin-bottom:24px; }
.d-s h3 { font-size:0.75rem; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); padding-bottom:7px; border-bottom:1px solid var(--rule); margin-bottom:10px; }
.d-s p { font-size:0.95rem; color:var(--mist); line-height:1.75; margin-bottom:7px; }
.d-s p strong { color:var(--cream); font-weight:500; }
.d-q { border-left:2px solid var(--gold); padding:12px 20px; margin:16px 0; background:rgba(248,177,0,0.04); }
.d-q em { font-family:'DM Serif Display', serif; font-style:italic; color:var(--cream); font-size:0.97rem; line-height:1.65; }
.d-q cite { display:block; margin-top:8px; font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); font-style:normal; font-weight:500; }
.d-lnk { display:inline-flex; align-items:center; gap:8px; color:var(--gold); text-decoration:none; font-size:0.68rem; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; transition:gap 0.2s; margin-top:6px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.d-lnk:hover { gap:14px; }

/* ════════════════════════════════════════════
   GALLERY
════════════════════════════════════════════ */
.poc-gallery { margin-bottom:24px; }
.poc-gallery-main { width:100%; aspect-ratio:16/9; overflow:hidden; margin-bottom:8px; background:var(--bg4); cursor:zoom-in; }
.poc-gallery-main img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity 0.25s ease; filter:brightness(0.9) contrast(1.04); }
.poc-gallery-thumbs { display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.poc-gallery-thumbs::-webkit-scrollbar { display:none; }
.poc-gallery-thumb { flex:0 0 calc(25% - 4px); aspect-ratio:1/1; overflow:hidden; cursor:pointer; opacity:0.45; transition:opacity 0.2s; background:var(--bg4); }
.poc-gallery-thumb:hover { opacity:0.78; }
.poc-gallery-thumb.active { opacity:1; outline:2px solid var(--gold); outline-offset:-2px; }
.poc-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

/* ════════════════════════════════════════════
   VIDEO MODAL
════════════════════════════════════════════ */
.vid-modal { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,0.92); align-items:center; justify-content:center; padding:20px; }
.vid-modal.on { display:flex; }
.vid-modal-inner { position:relative; width:100%; max-width:900px; }
.vid-modal-close { position:absolute; top:-40px; right:0; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; opacity:0.7; transition:opacity 0.2s; z-index:10; }
.vid-modal-close:hover { opacity:1; }
.vid-modal-ratio { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; }
.vid-modal-ratio iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* ════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════ */
.d-lb { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,0.93); display:none; align-items:center; justify-content:center; }
.d-lb.on { display:flex; }
.d-lb-img { max-width:92vw; max-height:88vh; object-fit:contain; display:block; }
.d-lb-close { position:absolute; top:18px; right:20px; background:none; border:none; color:var(--smoke); font-size:2rem; cursor:pointer; line-height:1; z-index:1; }
.d-lb-prev, .d-lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); border:none; color:rgba(255,255,255,0.5); font-size:1.6rem; padding:12px 16px; cursor:pointer; transition:color 0.2s, background 0.2s; }
.d-lb-prev:hover, .d-lb-next:hover { color:#fff; background:rgba(0,0,0,0.8); }
.d-lb-prev { left:12px; }
.d-lb-next { right:12px; }
.d-lb-counter { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.4); font-size:11px; letter-spacing:3px; font-family:'Syne',sans-serif; }

/* ════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════ */
@keyframes up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes blink-read {
  0%,100% { opacity:1; }
  50%      { opacity:0.28; }
}

/* ════════════════════════════════════════════════════════════
   TABLET  600–1024px
════════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:1024px) {
  #hero { grid-template-columns:1fr; min-height:unset; }
  .hero-photo-col { height:46vw; min-height:320px; }
  .hero-photo-col img { object-position:center 25%; }
  .hero-photo-col::after {
    background:linear-gradient(to bottom,
      transparent 52%, rgba(37,36,34,0.7) 72%, rgba(37,36,34,0.98) 100%);
  }
  .hero-text-col { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; padding:40px 40px 48px; align-items:start; }
  .hero-text-body { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:20px; }
  .hero-overline  { font-size:0.66rem; margin-bottom:0; }
  .hero-h1        { font-size:clamp(2.2rem,4.5vw,3.8rem); margin-bottom:0; align-self:start; }
  .hero-statement { font-size:0.95rem; max-width:none; margin-bottom:0; align-self:start; white-space:normal; }
  .hero-ctas { grid-column:2; grid-row:1; flex-direction:column; gap:12px; align-self:start; padding-top:4px; }
  .cta-a, .cta-b { flex:none; width:100%; padding:14px 20px; font-size:0.68rem; }
  .hero-caption { font-size:0.58rem; color:rgba(255,255,255,0.6); padding:12px 16px 28px; }
}

/* ════════════════════════════════════════════════════════════
   TABLET & MOBILE  ≤1024px
════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .drawer { width:min(380px,88vw); }

  #hero { grid-template-columns:1fr; }
  .hero-photo-col { height:78vw; min-height:300px; }
  .hero-photo-col::after {
    background:linear-gradient(to bottom,
      transparent 60%, rgba(37,36,34,0.6) 80%, rgba(37,36,34,0.96) 100%);
  }
  .hero-text-col  { padding:0px 20px 24px; margin-top:30px; }
  .hero-overline  { margin-bottom:14px; font-size:0.62rem; }
  .hero-h1        { margin-bottom:18px; }
  .hero-statement { margin-bottom:24px; }
  .hero-caption   { font-size:0.52rem; color:rgba(255,255,255,0.6); padding:12px 16px 28px; }

  .work-masthead { padding:0 20px 20px; }
  .wrap    { padding:0 20px; }
  section  { padding:64px 0; }
  .cards   { grid-template-columns:1fr; background:none; gap:2px; }

  .Process-top { grid-template-columns:1fr; gap:14px; }
  .ap-grid     { grid-template-columns:1fr; }

  .j-head { grid-template-columns:1fr; gap:12px; }
  .tl-r   { grid-template-columns:1fr; }
  .tl-l   { padding-right:0; margin-bottom:10px; }
  .tl-c   { border-left:none; padding-left:0; border-top:1px solid var(--rule); padding-top:12px; }

  .c-grid  { grid-template-columns:1fr; gap:44px; }
  footer   { flex-direction:column; gap:18px; text-align:center; }
  .sr-cap  { padding:20px; }
  .px-clip { height:40vw; min-height:240px; }
  .px-body h3 { font-size:clamp(1.6rem,5vw,3rem); }
  .px-body    { padding-bottom:48px; }
  .credits-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
}

/* Portrait tablet + mobile */
@media (max-width:1024px) and (orientation:portrait), (max-width:599px) {
  section, #work, #credits { padding-top:22px; scroll-margin-top:0px; }
  #contact { padding-top:22px; }
  .mob-anchor { display:block; position:relative; top:-70px; height:0; visibility:hidden; pointer-events:none; }
}

/* Contact colonne unique portrait */
@media (max-width:599px), (max-width:1024px) and (orientation:portrait) {
  .c-grid { grid-template-columns:1fr; }
  .cf-sub { width:100%; text-align:center; align-self:stretch; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE  ≤599px
════════════════════════════════════════════════════════════ */
@media (max-width:599px) {
  #sr-label { bottom:15px; left:20px; right:auto; }
  #credits { scroll-margin-top:0px; }
  #work    { scroll-margin-top:0px; }
  .credits-head        { margin-bottom:28px; }
  .credits-head h2     { font-size:clamp(1.6rem,7vw,2.4rem); }
  .credits-head .s-sub { font-size:0.78rem; line-height:1.6; margin-top:10px; }
  .credits-grid        { grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:36px; }
  .credit-card    { gap:0; }
  .credit-info    { padding:10px 0 0; }
  .credit-title   { font-size:0.78rem; margin-bottom:3px; }
  .credit-platform { font-size:0.5rem; }
  .credit-role    { font-size:0.5rem; }
  .credit-note    { font-size:0.7rem; margin-top:5px; }
  .credit-badge   { font-size:0.44rem; padding:3px 6px; top:8px; left:8px; }
  .credits-quote  { padding:14px 16px; margin:0; }
  .credits-quote p { font-size:0.88rem; line-height:1.55; margin-bottom:8px; }
  .sr-band      { padding:28px 0; scroll-margin-top:40px; }
  .sr-band h2   { font-size:clamp(1.4rem,6vw,2rem); margin-bottom:10px; }
  .sr-band-text { font-size:0.82rem; line-height:1.65; }
  .sr-video     { height:65vh; min-height:unset; }
}

/* ════════════════════════════════════════════════════════════
   HERO MOBILE  ≤599px
════════════════════════════════════════════════════════════ */
@media (max-width:599px) {
  #hero { display:block; position:relative; height:100dvh; min-height:560px; padding-top:58px; overflow:hidden; }
  .hero-photo-col { position:absolute; top:58px; left:0; right:0; height:48%; min-height:0; }
  .hero-text-col { position:absolute; bottom:0; left:0; right:0; height:52%; display:flex; flex-direction:column; justify-content:flex-start; padding:14px 20px 20px; background:var(--bg); overflow:hidden; }
  .hero-text-body { display:flex; flex-direction:column; gap:clamp(4px,0.8dvh,10px); flex-grow:1; justify-content:space-evenly; }
  .hero-overline  { font-size:0.6rem; margin-bottom:0; letter-spacing:0.18em; gap:4px; --trait-gap:6px; }
  .hero-h1        { font-size:clamp(1.6rem,6.5dvh,3.2rem); margin-bottom:0; line-height:0.93; }
  .hero-statement { font-size:clamp(0.78rem,1.9dvh,1rem); line-height:1.38; margin-bottom:0; border-left:2px solid var(--gold); padding-left:12px; white-space:normal; }
  .hero-ctas      { flex-shrink:0; gap:10px; margin-top:clamp(6px,1dvh,12px); }
  .cta-a, .cta-b  { padding:clamp(10px,1.5dvh,14px) 10px; font-size:0.62rem; }
}

/* ════════════════════════════════════════════════════════════
   HERO MOBILE — breakpoints spécifiques
════════════════════════════════════════════════════════════ */
@media (max-width:360px) {
  .hero-photo-col { height:45%; }
  .hero-text-col  { height:55%; padding:12px 16px 14px; }
  .hero-text-body { gap:5px; }
  .hero-overline  { font-size:0.54rem; letter-spacing:0.13em; }
}
@media (min-width:361px) and (max-width:375px) {
  .hero-photo-col { height:40%; }
  .hero-text-col  { height:60%; padding:12px 18px 14px; }
  .hero-text-body { gap:5px; }
  .hero-overline  { font-size:0.55rem; letter-spacing:0.14em; }
}
@media (min-width:376px) and (max-width:389px) {
  .hero-photo-col { height:47%; }
  .hero-text-col  { height:53%; }
}
@media (min-width:431px) and (max-width:599px) {
  .hero-photo-col { height:48%; }
  .hero-text-col  { height:52%; padding:16px 24px 20px; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT MOBILE — breakpoints spécifiques
════════════════════════════════════════════════════════════ */
@media (max-width:375px) and (max-height:680px) {
  #contact { padding-top:10px; }
  .c-grid  { gap:12px; }
  .c-grid h2 { font-size:1.4rem; margin-bottom:6px; }
  .contact-langs { margin-top:8px; }
  .contact-langs span { font-size:0.5rem; }
  .contact-langs span + span { font-size:0.44rem; }
  .mode { padding:6px 0; }
  .mode strong { font-size:0.58rem; }
  .mode span   { font-size:0.7rem; }
  .cf-f input, .cf-f textarea { padding:9px 0; font-size:0.8rem; }
  .cf-f textarea { min-height:60px; }
  .cf-sub { padding:9px 24px; font-size:0.6rem; margin-top:8px; }
}
@media (max-width:360px) {
  #contact { padding-top:12px; }
  .c-grid  { gap:14px; }
  .c-grid h2 { font-size:1.5rem; margin-bottom:7px; }
  .contact-langs { margin-top:10px; }
  .contact-langs span { font-size:0.52rem; }
  .contact-langs span + span { font-size:0.46rem; }
  .mode { padding:7px 0; }
  .mode strong { font-size:0.6rem; }
  .mode span   { font-size:0.74rem; }
  .cf-f input, .cf-f textarea { padding:10px 0; font-size:0.82rem; }
  .cf-f textarea { min-height:64px; }
  .cf-sub { padding:10px 24px; font-size:0.62rem; margin-top:9px; }
}
@media (min-width:361px) and (max-width:599px) and (min-height:750px) {
  #contact { padding-top:18px; }
  .c-grid  { gap:20px; }
  .c-grid h2 { font-size:clamp(1.7rem,5vw,2.2rem); margin-bottom:10px; }
  .contact-langs { margin-top:14px; }
  .contact-langs span { font-size:0.6rem; }
  .contact-langs span + span { font-size:0.54rem; }
  .mode { padding:9px 0; }
  .mode strong { font-size:0.66rem; }
  .mode span   { font-size:0.82rem; }
  .cf-f input, .cf-f textarea { padding:12px 0; font-size:0.9rem; }
  .cf-f textarea { min-height:80px; }
  .cf-sub { padding:12px 24px; font-size:0.64rem; margin-top:12px; }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP ONLY  ≥1025px
════════════════════════════════════════════════════════════ */
@media (min-width:1025px) {

  br.d-br { display:block; }

  .sr-band { scroll-margin-top:60px; }
  .sr { min-height:85vh; aspect-ratio:16/9; }
  .px-bg { inset:-60% 0; background-position:center bottom; }

  /* ── Hero overline ── */
  .hero-overline { font-size:1rem; letter-spacing:0.22em; }

  /* ── Phrases de sous-titre : uniformisées ── */
  .Process-top .s-sub,
  .work-masthead .s-sub,
  .credits-head .s-sub,
  .sr-band-text,
  .j-head > p {
    font-size:0.97rem;
    color:var(--mist);
    line-height:1.7;
    text-align:left;
    max-width:820px;
    margin:0;
  }

  /* ── Process-top : colonne unique ── */
  .Process-top { grid-template-columns:1fr; gap:16px; align-items:start; }

  /* ── Journey : colonne unique ── */
  .j-head { grid-template-columns:1fr; gap:16px; align-items:start; }

  /* ── ap-grid : 2 colonnes ── */
  .ap-grid { grid-template-columns:repeat(2,1fr); }
  .ap p    { font-size:1.05rem; line-height:1.75; }
  .ap-out  { font-size:0.82rem; letter-spacing:0.15em; }

  /* ── Timeline ── */
  .tl-r    { grid-template-columns:260px 1fr; }
  .tl-era  { font-size:0.72rem; letter-spacing:0.18em; }
  .tl-org  { font-size:1.15rem; }
  .tl-desc { font-size:1.05rem; line-height:1.78; }
  .tl-val  { font-size:0.8rem; letter-spacing:0.15em; }

  /* ── Parallax sous-titres jaunes ── */
  .px-body p { font-size:0.9rem; letter-spacing:0.22em; }

  /* ── Formulaire agrandi ── */
  .cf-f input, .cf-f textarea { font-size:1.1rem; padding:18px 0; }
  .cf-f textarea { min-height:140px; }
  .cf-sub        { font-size:0.82rem; padding:16px 44px; }

  /* ── Contact ── */
  .mode strong               { font-size:0.92rem; letter-spacing:0.08em; }
  .mode span                 { font-size:1.05rem; }
  .contact-langs span        { font-size:0.9rem; letter-spacing:0.16em; }
  .contact-langs span + span { font-size:0.82rem; letter-spacing:0.12em; }

  /* ── Footer ── */
  .f-n       { font-size:1.15rem; }
  .f-links a { font-size:0.82rem; letter-spacing:0.16em; }
  .f-c       { font-size:0.82rem; }

}
/* ════════════════════════════════════════════
   SERVICES — trigger nav
════════════════════════════════════════════ */
.nav-services-trigger { cursor:pointer; }
.nav-services-trigger::after {
  content:' ↗'; font-size:0.5rem;
  vertical-align:super; opacity:0.55;
}

/* ════════════════════════════════════════════
   SERVICES MODAL  (desktop ≥ 1025px)
════════════════════════════════════════════ */
.svc-modal {
  display:none; position:fixed; inset:0; z-index:900;
  align-items:center; justify-content:center;
}
.svc-modal.open { display:flex; }

.svc-modal-overlay {
  position:absolute; inset:0;
  background:rgba(13,12,11,0.80);
  backdrop-filter:blur(8px);
  animation:svc-fi 0.3s ease forwards;
}

/* ── modale flottante centrée, animation depuis le bas ── */
.svc-modal-box {
  position:relative; z-index:1;
  background:var(--bg2);
  border:1px solid var(--rule2);
  width:min(94vw, 960px);
  max-height:88vh;
  overflow-y:auto;
  padding:44px 52px 48px;
  animation:svc-up 0.52s cubic-bezier(0.16,1,0.3,1) forwards;
}
.svc-modal-box::-webkit-scrollbar { width:2px; }
.svc-modal-box::-webkit-scrollbar-thumb { background:var(--gold); }

.svc-close {
  position:absolute; top:18px; right:22px;
  background:none; border:none;
  color:var(--mist); font-size:1.2rem;
  cursor:pointer; line-height:1;
  transition:color 0.2s;
}
.svc-close:hover { color:var(--gold); }

/* header */
.svc-modal-header {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.svc-label {
  font-size:0.72rem; font-weight:500;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.svc-title {
  font-family:'DM Serif Display',serif;
  font-weight:400; font-style:italic;
  font-size:clamp(2rem,3vw,2.8rem);
  color:var(--cream); line-height:1; margin:0;
}
.svc-subtitle {
  display:block; margin-top:8px;
  font-family:'Syne',sans-serif;
  font-size:0.68rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); opacity:0.8;
}
.svc-cta {
  display:inline-flex; align-items:center;
  font-family:'Syne',sans-serif;
  font-size:0.74rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold);
  padding:11px 22px; text-decoration:none;
  transition:background 0.2s, color 0.2s; white-space:nowrap;
}
.svc-cta:hover { background:var(--gold); color:var(--bg4); }

/* 3 colonnes sans quadrillage — séparateurs légers */
.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.svc-card {
  padding:28px 32px 32px;
  position:relative;
  transition:background 0.2s;
}
.svc-card + .svc-card {
  border-left:1px solid var(--rule);
}
.svc-card:hover { background:var(--bg3); }

.svc-card-num {
  font-family:'DM Serif Display',serif; font-style:italic;
  font-size:2.2rem; line-height:1; color:var(--rule2);
  margin-bottom:14px; display:block;
  transition:color 0.25s;
}
.svc-card:hover .svc-card-num { color:var(--gold); }
.svc-card-h {
  font-size:0.78rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
  white-space:nowrap;
}
.svc-card-intro {
  font-family:'DM Serif Display',serif; font-style:italic;
  font-size:1.08rem; line-height:1.45;
  color:var(--cream); margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.svc-card-p {
  font-size:0.88rem; line-height:1.7; color:var(--mist);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@keyframes svc-fi {
  from { opacity:0; } to { opacity:1; }
}
@keyframes svc-up {
  from { opacity:0; transform:translateY(60px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════
   SERVICES PANEL  (mobile / tablet ≤ 1024px)
════════════════════════════════════════════ */
.svc-panel {
  display:block; position:fixed; inset:0; z-index:900;
  pointer-events:none;
}
.svc-panel.open { pointer-events:all; }

.svc-panel-overlay {
  position:absolute; inset:0;
  background:rgba(13,12,11,0.72);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
}
.svc-panel.open .svc-panel-overlay { opacity:1; }

.svc-panel-drawer {
  position:absolute; top:0; right:0; bottom:0;
  width:min(88vw,400px);
  background:var(--bg2);
  border-left:1px solid var(--rule2);
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:22px 22px 22px;
  transform:translateX(110%);
  transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.svc-panel.open .svc-panel-drawer { transform:translateX(0); }

.svc-panel-top {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  flex-shrink:0; margin-bottom:0;
}

/* liste sans bordures entre blocs, blocs collés */
.svc-panel-list {
  display:flex; flex-direction:column;
  margin-top:16px; flex-shrink:0;
}
.svc-row {
  padding:10px 0 10px;
  border-top:1px solid var(--rule);
}
.svc-row:first-child { border-top:none; }
.svc-row .svc-card-h {
  font-size:0.76rem; margin-bottom:4px;
}
.svc-row .svc-card-intro {
  font-size:0.86rem; line-height:1.38; margin-bottom:4px;
}
.svc-row .svc-card-p {
  font-size:0.8rem; line-height:1.52; color:var(--mist);
}

/* CTA juste après la liste */
.svc-panel-cta {
  display:inline-flex; align-items:center;
  margin-top:16px; flex-shrink:0; align-self:flex-start;
  font-family:'Syne',sans-serif;
  font-size:0.74rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold);
  padding:10px 20px; text-decoration:none;
  transition:background 0.2s, color 0.2s;
}
.svc-panel-cta:hover { background:var(--gold); color:var(--bg4); }

/* ── breakpoints ── */
@media (min-width:1025px) { .svc-panel { display:none !important; } }
@media (max-width:1024px) { .svc-modal { display:none !important; } }
/* ════════════════════════════════════════════════════════════
   SAFARI iOS — safe area + bouton envoi visible
════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  #contact {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}