/* ============================================================
   MAISON CARLIER PHOTOGRAPHIE
   Design system — Ivoire & Encre, éditorial
   ============================================================ */

:root{
  --ivory:      #F7F4EF;
  --ivory-warm: #EFEAE1;
  --paper:      #FCFAF7;
  --ink:        #14120F;
  --ink-soft:   #2A2621;
  --muted:      #7A7166;
  --line:       rgba(20,18,15,.13);
  --line-soft:  rgba(20,18,15,.07);
  --gold:       #8C6A3A;

  --serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --e: cubic-bezier(.22,1,.36,1);
  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1560px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--ink); color:var(--ivory); }

/* ---------- Accessibilité ---------- */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--ink); color:var(--ivory);
  padding:14px 22px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  transition:top .3s var(--e);
}
.skip-link:focus{ top:16px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px dashed currentColor; outline-offset:4px;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.narrow{ max-width:900px; margin:0 auto; }
section{ position:relative; }
.pad{ padding:clamp(90px,13vh,170px) 0; }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- Typographie ---------- */
.eyebrow{
  font-family:var(--sans); font-size:10.5px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:14px; margin:0 0 26px;
}
.eyebrow::before{ content:""; width:38px; height:1px; background:var(--gold); flex:none; }
.eyebrow.center{ justify-content:center; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; letter-spacing:-.015em; margin:0; }
h1{ font-size:clamp(46px,8.5vw,124px); line-height:.94; }
h2{ font-size:clamp(34px,5.2vw,74px); line-height:1.03; }
h3{ font-size:clamp(23px,2.5vw,34px); line-height:1.18; }
h4{ font-size:clamp(19px,1.5vw,23px); line-height:1.3; }
.italic{ font-style:italic; color:var(--gold); }

p{ margin:0 0 1.35em; }
.lead{ font-family:var(--serif); font-size:clamp(20px,2.15vw,29px); line-height:1.5; color:var(--ink-soft); font-weight:300; }
.small{ font-size:13.5px; color:var(--muted); line-height:1.85; }
.num{ font-family:var(--sans); font-size:10.5px; letter-spacing:.3em; color:var(--gold); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:400;
  padding:19px 38px; border:1px solid var(--ink); color:var(--ink);
  position:relative; overflow:hidden; transition:color .55s var(--e);
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .55s var(--e); z-index:1;
}
.btn:hover{ color:var(--ivory); }
.btn:hover::after{ transform:translateY(0); }
.btn.light{ border-color:rgba(247,244,239,.45); color:var(--ivory); }
.btn.light::after{ background:var(--ivory); }
.btn.light:hover{ color:var(--ink); }
.btn.solid{ background:var(--ink); color:var(--ivory); }
.btn.solid::after{ background:var(--gold); }
.btn.solid:hover{ color:var(--ink); }
.btn.solid.beige-hover::after{ background:var(--ivory); }
.btn.solid.beige-hover:hover{ color:var(--ink); border-color:var(--ink); }

.link{
  display:inline-block; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  padding-bottom:7px; border-bottom:1px solid var(--line); transition:border-color .4s var(--e), color .4s var(--e);
}
.link:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ivory);
  transition:transform .5s var(--e), background .5s var(--e), padding .5s var(--e), color .5s var(--e), box-shadow .5s var(--e);
}
.hdr.solid{ background:rgba(247,244,239,.93); backdrop-filter:blur(14px); color:var(--ink); padding:10px var(--gut); box-shadow:0 1px 0 var(--line-soft); }
.hdr.hide{ transform:translateY(-102%); }
.hdr.no-hero{ background:rgba(247,244,239,.93); backdrop-filter:blur(14px); color:var(--ink); padding:10px var(--gut); box-shadow:0 1px 0 var(--line-soft); }

.brand{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.brand b{ font-family:var(--serif); font-weight:400; font-size:23px; letter-spacing:.14em; text-transform:uppercase; }
.brand i{ font-style:normal; font-size:8.5px; letter-spacing:.42em; text-transform:uppercase; opacity:.65; margin-top:7px; }
.brand img{ display:block; height:140px; width:auto; transition:height .5s var(--e), filter .3s ease; filter:invert(1); }
.hdr.solid .brand img, .hdr.no-hero .brand img{ height:108px; filter:none; }
.ftr-brand .brand img{ height:120px; filter:invert(1); }

.nav{ display:flex; align-items:center; gap:38px; }
.nav a{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; transition:opacity .3s; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:currentColor; transition:width .45s var(--e); }
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }

.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item .dropdown{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:260px; background:var(--paper); box-shadow:0 24px 60px rgba(20,18,15,.16);
  padding:12px 0; opacity:0; visibility:hidden;
  transition:opacity .35s var(--e), transform .35s var(--e), visibility .35s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{ display:block; padding:12px 26px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); opacity:1; white-space:nowrap; }
.dropdown a::after{ display:none; }
.dropdown a:hover, .dropdown a:focus-visible{ color:var(--gold); background:var(--ivory-warm); }

.burger{ display:none; width:30px; height:14px; position:relative; }
.burger span{ position:absolute; left:0; width:100%; height:1px; background:currentColor; transition:transform .45s var(--e), opacity .3s; }
.burger span:nth-child(1){ top:0 } .burger span:nth-child(2){ top:13px }
body.menu-open .burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
body.menu-open .burger span:nth-child(2){ transform:translateY(-6.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e); pointer-events:none;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.drawer a{ font-family:var(--serif); font-size:clamp(32px,7vw,60px); font-weight:300; padding:9px 0; opacity:0; transform:translateY(22px); transition:opacity .5s var(--e), transform .5s var(--e), color .3s; }
.drawer a:hover{ color:var(--gold); }
body.menu-open .drawer a{ opacity:1; transform:none; }
body.menu-open .drawer a:nth-child(1){ transition-delay:.22s } body.menu-open .drawer a:nth-child(2){ transition-delay:.28s }
body.menu-open .drawer a:nth-child(3){ transition-delay:.34s } body.menu-open .drawer a:nth-child(4){ transition-delay:.40s }
body.menu-open .drawer a:nth-child(5){ transition-delay:.46s } body.menu-open .drawer a:nth-child(6){ transition-delay:.52s }
body.menu-open .drawer a:nth-child(7){ transition-delay:.58s }
.drawer .dinfo{ margin-top:52px; opacity:.55; font-size:12px; letter-spacing:.14em; }
body.menu-open{ overflow:hidden; }

/* ---------- Images ---------- */
.fig{ position:relative; overflow:hidden; background:var(--ivory-warm); }
.fig::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,#E8E1D6,#D8CFC1 55%,#EDE7DD);
  opacity:1; transition:opacity .6s var(--e);
}
.fig.loaded::before{ opacity:0; }
.fig img{
  position:relative; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--e), opacity 1s var(--e); opacity:0;
}
.fig.loaded img{ opacity:1; }
.fig.zoom:hover img{ transform:scale(1.045); }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--e), transform 1.1s var(--e); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.10s } .rv.d2{ transition-delay:.20s } .rv.d3{ transition-delay:.30s } .rv.d4{ transition-delay:.40s }
.rv-mask{ overflow:hidden; display:block; }
.rv-mask > *{ transform:translateY(105%); transition:transform 1.1s var(--e); display:block; }
.rv-mask.in > *{ transform:none; }

/* ---------- Hero ---------- */
.hero{ height:100svh; min-height:640px; position:relative; overflow:hidden; display:flex; align-items:flex-end; }
.hero .fig{ position:absolute; inset:0; }
.hero .fig img{ position:absolute; inset:0; transform:scale(1.12); object-position:center bottom; opacity:0; }
.hero .fig img.active{ opacity:1; z-index:1; }
.hero.ready .fig img{ transform:scale(1); transition:transform 2.6s var(--e), opacity 1.4s var(--e); }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(16,14,12,.42) 0%,rgba(16,14,12,.06) 32%,rgba(16,14,12,.30) 68%,rgba(16,14,12,.62) 100%);
}
.hero-in{ position:relative; z-index:2; width:100%; color:var(--ivory); padding-bottom:clamp(48px,9vh,110px); }
.hero h1{ margin:0 0 6px; }
.hero h1 .l2{ display:block; padding-left:clamp(0px,9vw,180px); }
.hero h1 .italic{ color:#F2E8D9; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,60px); align-items:flex-end; justify-content:space-between; margin-top:clamp(26px,4vh,48px); }
.hero-meta p{ max-width:460px; margin:0; font-size:16.5px; line-height:1.85; color:rgba(247,244,239,.88); }
.hero-tag{ font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:rgba(247,244,239,.75); margin:0 0 22px; }
.scroller{ display:flex; align-items:center; gap:14px; font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:rgba(247,244,239,.7); background:none; border:0; padding:0; font-family:inherit; cursor:pointer; transition:color .3s var(--e); }
.scroller:hover{ color:var(--ivory); }
.scroller i{ display:block; width:52px; height:1px; background:rgba(247,244,239,.45); position:relative; overflow:hidden; }
.scroller i::after{ content:""; position:absolute; inset:0; background:var(--ivory); animation:sweep 2.6s var(--e) infinite; }
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ---------- Bandeau défilant ---------- */
.marq{ border-block:1px solid var(--line-soft); padding:20px 0; overflow:hidden; background:var(--paper); }
.marq-in{ display:flex; gap:60px; width:max-content; animation:marq 42s linear infinite; }
.marq span{ font-family:var(--sans); font-weight:300; font-size:clamp(13px,1.3vw,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:60px; }
.marq span::after{ content:"◦"; color:var(--gold); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- Manifeste ---------- */
.manifest{ background:var(--paper); }
.manifest .lead{ font-size:clamp(23px,3.1vw,44px); line-height:1.36; letter-spacing:-.01em; }
.split{ display:grid; grid-template-columns:1fr 1.55fr; gap:clamp(30px,7vw,110px); align-items:start; }

/* ---------- Trio (approche & expertise) ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,5vw,80px); }
.trio .item{ padding-top:30px; border-top:1px solid var(--line); }
.trio h4{ margin:16px 0 14px; }
.trio p{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0; }

/* ---------- Portfolio / Galerie ---------- */
.pf-head{ display:flex; flex-wrap:wrap; gap:26px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(38px,6vw,72px); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.filters button{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  padding:11px 20px; border:1px solid var(--line); border-radius:999px; transition:all .4s var(--e);
}
.filters button:hover{ color:var(--ink); border-color:var(--ink); }
.filters button.on{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2.2vw,34px); }
.card{ grid-column:span 6; transition:opacity .6s var(--e), transform .6s var(--e); }
.card.hidden{ display:none; }

/* Galerie en mosaïque (masonry) : chaque photo garde son ratio réel, sans vide ni recadrage */
.grid.masonry{ display:block; columns:3; column-gap:clamp(14px,2.2vw,34px); }
.grid.masonry .card{ display:block; break-inside:avoid; margin-bottom:clamp(14px,2.2vw,34px); }
.grid.masonry .card.hidden{ display:none; }
.grid.masonry .card .fig{ aspect-ratio:auto; }
@media (max-width:1080px){ .grid.masonry{ columns:2; } }
@media (max-width:720px){ .grid.masonry{ columns:1; } }
.card .fig{ aspect-ratio:4/5; }
.card.wide{ grid-column:span 12; }
.card.wide .fig{ aspect-ratio:16/9; }
.card.tall{ grid-column:span 5; }
.card.tall .fig{ aspect-ratio:3/4; }
.card.mid{ grid-column:span 7; }
.card.mid .fig{ aspect-ratio:4/3; }
.card.off{ margin-top:clamp(30px,7vw,110px); }
.cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:16px; }
.cap h4{ font-size:clamp(18px,1.6vw,24px); }
.cap span{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(20,18,15,.95);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
  opacity:0; visibility:hidden; transition:opacity .5s var(--e);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-height:88vh; max-width:100%; box-shadow:0 30px 60px rgba(0,0,0,.4); }
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute; background:transparent; border:1px solid rgba(247,244,239,.35);
  color:var(--ivory); width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:background .3s;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{ background:rgba(247,244,239,.12); }
.lightbox-close{ top:2rem; right:2rem; } .lightbox-prev{ left:2rem; top:50%; transform:translateY(-50%); } .lightbox-next{ right:2rem; top:50%; transform:translateY(-50%); }

/* ---------- Avant / Après ---------- */
.ba-sec{ background:var(--ink); color:var(--ivory); }
.ba-sec .eyebrow{ color:rgba(247,244,239,.6); }
.ba-sec h2{ color:var(--ivory); }
.ba-sec .lead{ color:rgba(247,244,239,.72); }
.ba-sec .small{ color:rgba(247,244,239,.5); }

.ba{ position:relative; margin-top:clamp(34px,5vw,60px); --pos:50%; }
.ba-frame{
  position:relative; overflow:hidden; aspect-ratio:3/2; background:#0C0B0A;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
}
.ba-layer{ position:absolute; inset:0; }
.ba-layer img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .7s var(--e); }
.ba-frame.loaded .ba-layer img{ opacity:1; }
.ba-raw{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }

.ba-line{ position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:rgba(255,255,255,.9); z-index:4; pointer-events:none; }
.ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:rgba(247,244,239,.96);
  display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); transition:transform .35s var(--e);
}
.ba:hover .ba-grip{ transform:translate(-50%,-50%) scale(1.07); }
.ba-grip::before,.ba-grip::after{ content:""; width:0; height:0; border-block:4.5px solid transparent; }
.ba-grip::before{ border-right:6px solid var(--ink); }
.ba-grip::after{ border-left:6px solid var(--ink); }

.ba-tag{
  position:absolute; bottom:22px; z-index:5; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  padding:9px 17px; background:rgba(12,11,10,.55); backdrop-filter:blur(8px); color:#fff;
  border:1px solid rgba(255,255,255,.16); pointer-events:none; transition:opacity .4s;
}
.ba-tag.l{ left:22px } .ba-tag.r{ right:22px }

.ba-range{
  position:absolute; inset:0; z-index:6; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:900px; background:transparent; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:26px; height:900px; background:transparent; border:0; border-radius:0; cursor:ew-resize; }
.ba-range:focus-visible + .ba-line{ box-shadow:0 0 0 2px var(--gold); }

.ba-switch{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ba-switch button{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,244,239,.55);
  padding:12px 22px; border:1px solid rgba(247,244,239,.18); transition:all .4s var(--e);
}
.ba-switch button:hover{ color:var(--ivory); border-color:rgba(247,244,239,.5); }
.ba-switch button.on{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.ba-cap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:22px; }
.ba-cap p{ margin:0; }

/* ---------- Prestations ---------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,5vw,80px); }
.service{ padding-top:30px; border-top:1px solid var(--line); }
.service h4{ margin:16px 0 14px; }
.service p{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0; }

/* ---------- Zone d'intervention ---------- */
.zone{ background:var(--paper); text-align:center; }
.zone-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:34px 0 30px; padding:0; list-style:none; }
.zone-list li{ border:1px solid var(--line); padding:11px 24px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.zone-note{ max-width:60ch; margin:0 auto; color:var(--muted); }

/* ---------- À propos ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,100px); align-items:center; }
.about .fig{ aspect-ratio:4/5; }
.creds{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.creds b{ display:block; font-family:var(--serif); font-size:clamp(30px,3.6vw,50px); font-weight:300; line-height:1; }
.creds span{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.sig{ font-family:var(--serif); font-style:italic; font-size:26px; color:var(--muted); margin-top:34px; }

/* ---------- Accompagnement ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); }
.step{ border-top:1px solid var(--line); padding-top:26px; }
.step h4{ margin:14px 0 12px; font-size:20px; }
.step p{ font-size:13.5px; color:var(--muted); line-height:1.85; margin:0; }

/* ---------- Bande d'appel à l'action ---------- */
.cta-band{ background:var(--ink); color:var(--ivory); }
.cta-band h2{ color:var(--ivory); }
.cta-band .eyebrow{ color:rgba(247,244,239,.6); }
.cta-band .eyebrow::before{ background:var(--gold); }

/* ---------- Contact ---------- */
.contact{ background:var(--ink); color:var(--ivory); }
.contact .eyebrow{ color:rgba(247,244,239,.6); }
.contact h2{ color:var(--ivory); }
.cgrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(38px,6vw,110px); }
.cinfo p{ color:rgba(247,244,239,.7); font-size:14.5px; line-height:1.9; }
.cinfo dl{ margin:38px 0 0; display:grid; gap:26px; }
.cinfo dt{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(247,244,239,.42); margin-bottom:8px; }
.cinfo dd{ margin:0; font-family:var(--serif); font-size:21px; }
.cinfo dd a{ border-bottom:1px solid rgba(247,244,239,.25); padding-bottom:3px; transition:border-color .35s; }
.cinfo dd a:hover{ border-color:var(--gold); color:var(--gold); }
.cinfo .placeholder{ color:rgba(247,244,239,.42); font-style:italic; font-family:var(--sans); font-size:14px; }

form{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.f-full{ grid-column:1/-1; }
label{ display:block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(247,244,239,.45); margin-bottom:11px; }
input,select,textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(247,244,239,.22);
  color:var(--ivory); font-family:var(--sans); font-size:15px; font-weight:300; padding:10px 0 13px;
  transition:border-color .4s var(--e); border-radius:0; -webkit-appearance:none; appearance:none;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--gold); }
input::placeholder,textarea::placeholder{ color:rgba(247,244,239,.28); }
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23A98B5B' stroke-width='1'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:26px; cursor:pointer;
}
select option{ background:#14120F; color:#F7F4EF; }
textarea{ resize:vertical; min-height:104px; }
.consent{ display:flex; gap:13px; align-items:flex-start; font-size:12px; color:rgba(247,244,239,.5); line-height:1.7; }
.consent a{ color:rgba(247,244,239,.75); border-bottom:1px solid rgba(247,244,239,.3); }
.consent a:hover{ color:var(--gold); border-color:var(--gold); }
.consent input{ width:15px; height:15px; flex:none; margin-top:4px; border:1px solid rgba(247,244,239,.4); accent-color:var(--gold); appearance:auto; -webkit-appearance:auto; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.f-msg{ grid-column:1/-1; font-size:13.5px; color:var(--gold); min-height:20px; }
.f-note{ grid-column:1/-1; font-size:12px; color:rgba(247,244,239,.4); border-top:1px solid rgba(247,244,239,.12); padding-top:16px; margin-top:4px; }

/* ---------- Footer ---------- */
.ftr{ background:var(--ink); color:rgba(247,244,239,.55); padding:clamp(56px,8vw,90px) 0 40px; }
.ftr-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:clamp(30px,5vw,60px); padding-bottom:44px; border-bottom:1px solid rgba(247,244,239,.12); }
.ftr-brand p{ margin-top:18px; font-size:13.5px; color:rgba(247,244,239,.45); max-width:32ch; line-height:1.9; }
.ftr-col h4{ font-family:var(--sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(247,244,239,.8); margin-bottom:20px; }
.ftr-col ul{ display:flex; flex-direction:column; gap:12px; list-style:none; padding:0; margin:0; }
.ftr-col a,.ftr-col p{ font-size:13px; color:rgba(247,244,239,.55); margin:0; transition:color .3s; }
.ftr-col a:hover{ color:var(--ivory); }
.ftr-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:28px; font-size:11px; letter-spacing:.08em; }
.ftr-bottom nav{ display:flex; gap:26px; flex-wrap:wrap; }
.ftr-bottom a:hover{ color:var(--ivory); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{ padding:calc(130px + 28px) 0 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.breadcrumb li:not(:last-child)::after{ content:"/"; color:var(--line); margin-left:8px; }
.breadcrumb a{ color:var(--muted); transition:color .3s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb li[aria-current]{ color:var(--ink-soft); }

/* ---------- En-tête de page avec visuel ---------- */
.page-header{ position:relative; height:62vh; min-height:500px; max-height:700px; display:flex; align-items:flex-end; overflow:hidden; color:var(--ivory); }
.page-header .fig{ position:absolute; inset:0; }
.page-header .fig img{ object-position:65% 88%; }
.page-header::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(16,14,12,.38) 0%,rgba(16,14,12,.18) 40%,rgba(16,14,12,.66) 100%); }
.page-header-in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,6vw,72px); }
.page-header h1{ color:var(--ivory); font-size:clamp(38px,6vw,80px); }
.page-header p{ color:rgba(247,244,239,.85); font-size:clamp(16px,1.6vw,20px); max-width:56ch; margin-top:16px; }

/* Écrans larges : le bandeau gagne en hauteur pour ne pas paraître trop fin par rapport à sa largeur */
@media (min-width:1440px){
  .page-header{ height:66vh; min-height:580px; }
}
@media (min-width:1920px){
  .page-header{ height:70vh; min-height:660px; max-height:820px; }
}

/* ---------- Prose éditoriale (pages de contenu) ---------- */
.prose{ max-width:70ch; }
.prose p{ color:var(--ink-soft); font-size:16px; line-height:1.9; margin-bottom:1.4em; }
.prose p.muted{ color:var(--muted); }

/* ---------- Cartes de prestations liées ---------- */
.service-link{ display:block; padding-top:30px; border-top:1px solid var(--line); transition:transform .4s var(--e); }
.service-link:hover{ transform:translateY(-4px); }
.service-link .num{ display:block; margin-bottom:16px; }
.service-link h4{ margin:0 0 14px; }
.service-link p{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 16px; }
.service-link .more{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px; transition:gap .3s var(--e), color .3s; }
.service-link:hover .more{ gap:16px; color:var(--gold); }

/* ---------- Liens internes contextuels ---------- */
.related{ background:var(--paper); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.related-card{ display:block; }
.related-card .fig{ aspect-ratio:4/3; margin-bottom:16px; }
.related-card .fig.portrait{ aspect-ratio:4/5; }
.related-card h4{ font-size:19px; margin-bottom:6px; }
.related-card span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- Pages légales ---------- */
.page-hero{ padding:calc(130px + 3.5rem) 0 3.5rem; background:var(--paper); text-align:center; }
.page-hero h1{ font-size:clamp(2.2rem,4vw,3rem); }
.page-hero p{ color:var(--muted); margin-top:.8rem; }
.legal{ max-width:780px; margin:0 auto; padding:4rem var(--gut) 6rem; }
.legal h2{ margin-top:2.4rem; margin-bottom:1rem; font-size:1.7rem; }
.legal p,.legal li{ color:var(--muted); margin-bottom:.9rem; font-size:15px; line-height:1.85; }
.legal ul{ list-style:disc; padding-left:1.4rem; }
.legal-placeholder{ color:#A24B3F; font-style:italic; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; }
  .split,.about,.cgrid{ grid-template-columns:1fr; }
  .about .fig{ aspect-ratio:4/5; }
  .trio,.steps,.services{ grid-template-columns:1fr 1fr; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  body{ font-size:15px; }
  .trio,.steps,.creds,.services{ grid-template-columns:1fr; }
  .creds{ gap:30px; }
  .card,.card.wide,.card.tall,.card.mid{ grid-column:span 12; }
  .card.off{ margin-top:0; }
  .card .fig,.card.tall .fig,.card.mid .fig{ aspect-ratio:4/5; }
  form{ grid-template-columns:1fr; }
  .hero h1 .l2{ padding-left:0; }
  .ba-frame{ aspect-ratio:4/5; }
  .ba-grip{ width:52px; height:52px; }
  .marq span{ gap:34px; }
  .marq-in{ gap:34px; }
  .ftr-grid{ grid-template-columns:1fr; gap:34px; }
  .zone-list li{ padding:9px 16px; font-size:10px; }
  .related-grid{ grid-template-columns:1fr; }
  .page-header{ height:50vh; min-height:380px; max-height:520px; }
  .brand img{ height:64px; }
  .hdr.solid .brand img, .hdr.no-hero .brand img{ height:52px; }
  .ftr-brand .brand img{ height:90px; }
}