/* ============================================================
   Artaud Daniel — Avocat · Belleville-en-Beaujolais
   Direction : cabinet international, velours noir & or mat
   ============================================================ */

:root{
  --noir:#0A0A0F;
  --noir-2:#101017;
  --noir-3:#15151d;
  --creme:#F5F5F0;
  --creme-2:#CFCDC4;   /* ~10:1 sur --noir */
  --creme-3:#9C9A92;   /* ~5.6:1 sur --noir */
  --or:#D4AF37;
  --or-mat:#B8860B;
  --filet:rgba(212,175,55,.28);
  --filet-froid:rgba(245,245,240,.10);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap:1180px;
  --pad-y:64px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--noir);
  color:var(--creme-2);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.05em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--or); color:#0A0A0F; padding:10px 16px; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:1px solid var(--or); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------- Barre ---------- */
.bar{
  position:sticky; top:0; z-index:200;
  background:rgba(10,10,15,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet-froid);
  transition:border-color .4s ease, background .4s ease;
}
.bar.scrolled{ border-bottom-color:var(--filet); background:rgba(10,10,15,.96); }
.bar-inner{
  max-width:var(--wrap); margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:18px;
}
.mark{ text-decoration:none; margin-right:auto; line-height:1.15; }
.mark-name{
  display:block; font-family:var(--serif); font-size:1.22rem;
  letter-spacing:.06em; color:var(--creme);
}
.mark-sub{
  display:block; font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--creme-3); margin-top:3px;
}
.nav{ display:none; gap:26px; }
.nav a{
  position:relative; text-decoration:none; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--creme-2);
  padding-bottom:4px;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--or); transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.bar-tel{
  display:none; text-decoration:none; font-size:.8rem; letter-spacing:.08em;
  color:var(--or); border:1px solid var(--filet); padding:9px 16px;
  transition:background .35s ease, color .35s ease;
}
.bar-tel:hover{ background:var(--or); color:#0A0A0F; }
.burger{
  width:40px; height:34px; background:none; border:1px solid var(--filet-froid);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  cursor:pointer; padding:0;
}
.burger span{ display:block; width:17px; height:1px; background:var(--creme); transition:transform .3s ease, opacity .3s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav.open{
  display:flex; flex-direction:column; gap:0;
  position:absolute; left:0; right:0; top:100%;
  background:var(--noir-2); border-bottom:1px solid var(--filet);
  padding:6px 22px 16px;
}
.nav.open a{ padding:13px 0; border-bottom:1px solid var(--filet-froid); }

/* ---------- Typo commune ---------- */
.kicker{
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or-mat); margin:0 0 14px;
}
.h2{
  font-family:var(--serif); font-size:clamp(1.75rem,4.4vw,2.6rem);
  line-height:1.18; color:var(--creme); letter-spacing:.005em;
  margin:0 0 20px;
}
.h3{
  font-family:var(--serif); font-size:1.35rem; color:var(--creme);
  margin:34px 0 8px;
}
.lead{ font-size:1.03rem; color:var(--creme-2); }
.lead-max{ max-width:62ch; margin-bottom:38px; }
.hint{ font-size:.84rem; color:var(--creme-3); font-style:italic; }

.btn{
  display:inline-block; text-decoration:none; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; padding:14px 26px;
  border:1px solid var(--filet); transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.btn-or{ background:var(--or); border-color:var(--or); color:#0A0A0F; font-weight:500; }
.btn-or:hover{ background:transparent; color:var(--or); }
.btn-ghost{ color:var(--creme); }
.btn-ghost:hover{ border-color:var(--or); color:var(--or); }
.btn-wide{ display:block; text-align:center; margin-top:14px; }

.frame{ margin:0; position:relative; }
.frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.28) contrast(1.03) brightness(.9); }
.frame::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(212,175,55,.32);
  pointer-events:none;
}
.frame figcaption{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creme-3); margin-top:12px;
}

/* ---------- Hero ---------- */
.hero{ padding:56px 22px 68px; max-width:var(--wrap); margin:0 auto; }
.hero-grid{ display:grid; gap:38px; }
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--creme-3);
  margin:0 0 22px;
}
.eyebrow .rule{ width:44px; height:1px; background:var(--or-mat); flex:none; }
.hero-h1{ margin:0 0 6px; }
.metier{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(3.6rem,16vw,7.6rem); line-height:.92;
  letter-spacing:-.015em; color:var(--creme);
}
.hero-lead{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,3.6vw,1.85rem); line-height:1.35;
  color:var(--or); margin:0 0 18px;
}
.hero-sub{ max-width:52ch; color:var(--creme-2); font-size:1.02rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 34px; }
.hero-facts{ border-top:1px solid var(--filet-froid); }
.hero-facts li{
  display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--filet-froid);
}
.hero-facts span{
  font-family:var(--serif); font-size:1.02rem; color:var(--or);
  min-width:112px; letter-spacing:.04em;
}
.hero-facts em{ font-style:normal; font-size:.86rem; color:var(--creme-3); }
.hero-img .frame img{ aspect-ratio:3/4; }

/* ---------- Bandeau citation courte ---------- */
.band{
  border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);
  background:var(--noir-2); padding:26px 22px; text-align:center;
}
.band p{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,2.6vw,1.3rem); color:var(--creme-2); letter-spacing:.01em;
}

/* ---------- Sections deux colonnes ---------- */
.two{ display:grid; gap:34px; }
.cabinet{ padding:var(--pad-y) 0; }
.col-side .frame-sm img{ aspect-ratio:4/5; }
.specs{ margin:30px 0 0; border-top:1px solid var(--filet-froid); }
.specs > div{ padding:14px 0; border-bottom:1px solid var(--filet-froid); }
.specs dt{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or-mat); margin-bottom:5px;
}
.specs dd{ margin:0; color:var(--creme-2); font-size:.95rem; }
.specs a{ color:var(--creme); text-decoration:none; border-bottom:1px solid var(--filet); }
.specs a:hover{ color:var(--or); border-bottom-color:var(--or); }

/* ---------- Expertises ---------- */
.expertises{ padding:var(--pad-y) 0; border-top:1px solid var(--filet-froid); }
.acc{ border-top:1px solid var(--filet); }
.acc-item{ border-bottom:1px solid var(--filet); }
.acc-item h3{ margin:0; }
.acc-head{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:22px 4px; color:var(--creme); font-family:var(--serif);
  font-size:clamp(1.2rem,3.4vw,1.6rem); font-weight:400;
  transition:color .35s ease;
}
.acc-head:hover{ color:var(--or); }
.acc-head .num{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.2em;
  color:var(--or-mat); flex:none; padding-top:5px;
}
.acc-title{ flex:1; }
.acc-sign{
  flex:none; width:14px; height:14px; position:relative;
}
.acc-sign::before,.acc-sign::after{
  content:""; position:absolute; left:0; top:6px; width:14px; height:1px; background:var(--or);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.acc-sign::after{ transform:rotate(90deg); }
.acc-head[aria-expanded="true"] .acc-sign::after{ transform:rotate(0deg); }
.acc-body{
  overflow:hidden; max-height:0;
  transition:max-height .55s cubic-bezier(.2,.7,.3,1);
}
.items{ padding:0 0 12px; }
.items li{
  padding:16px 0 16px 0; border-top:1px solid var(--filet-froid);
  display:grid; gap:4px;
}
.items li:first-child{ border-top:0; }
.it-n{ margin:0; font-size:1rem; color:var(--creme); font-weight:400; }
.it-d{ margin:0; font-size:.9rem; color:var(--creme-3); max-width:66ch; }
.it-p{
  margin:0; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or-mat);
}

/* ---------- Citation ---------- */
.quote{
  padding:var(--pad-y) 0; background:var(--noir-2);
  border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);
}
.quote blockquote{ margin:0; max-width:24ch; }
.quote blockquote{ max-width:none; }
.quote blockquote p{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,4.2vw,2.35rem); line-height:1.34;
  color:var(--creme); max-width:22ch; margin:0;
  max-width:26ch;
}
.quote blockquote em{ color:var(--or); font-style:italic; }
.quote-sig{
  margin:20px 0 0; font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--creme-3);
}

/* ---------- Méthode ---------- */
.methode{ padding:var(--pad-y) 0; }
.steps{ display:grid; gap:2px; margin-top:34px; }
.steps li{
  background:var(--noir-2); border:1px solid var(--filet-froid);
  padding:26px 22px; transition:border-color .45s ease, background .45s ease;
}
.steps li:hover{ border-color:var(--filet); background:var(--noir-3); }
.st-n{
  display:block; font-size:.68rem; letter-spacing:.22em;
  color:var(--or-mat); margin-bottom:12px;
}
.steps h3{ font-family:var(--serif); font-size:1.3rem; color:var(--creme); margin:0 0 8px; }
.steps p{ margin:0; font-size:.92rem; color:var(--creme-3); }

/* ---------- Galerie ---------- */
.galerie{ padding:var(--pad-y) 0; border-top:1px solid var(--filet-froid); }
.gal{ display:grid; gap:14px; margin-top:30px; }
.gal figure{ margin:0; overflow:hidden; position:relative; }
.gal img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(.4) brightness(.86);
  transition:filter .7s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.gal figure:hover img{ filter:grayscale(0) brightness(1); transform:scale(1.03); }

/* ---------- Contact ---------- */
.contact{ padding:var(--pad-y) 0; border-top:1px solid var(--filet-froid); }
.tel-big{ margin:24px 0 8px; }
.tel-big a{
  font-family:var(--serif); font-size:clamp(1.9rem,7vw,2.9rem);
  color:var(--or); text-decoration:none; letter-spacing:.02em;
  border-bottom:1px solid transparent; transition:border-color .4s ease;
}
.tel-big a:hover{ border-bottom-color:var(--or); }
.addr{ margin:0 0 8px; color:var(--creme-2); font-size:.98rem; }
.hours{ margin-top:14px; border-top:1px solid var(--filet-froid); max-width:420px; }
.hours li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--filet-froid);
  font-size:.9rem;
}
.hours span{ color:var(--creme-3); letter-spacing:.05em; }
.hours em{ font-style:normal; color:var(--creme); }

#map-card{ border:1px solid var(--filet); }
#leaflet-map{ filter:grayscale(.5) brightness(.92) contrast(1.04); }
.lh-marker svg{ display:block; }
.leaflet-container{ background:#101017; font-family:var(--sans); }
.leaflet-control-attribution{ background:rgba(10,10,15,.75) !important; color:#9C9A92 !important; }
.leaflet-control-attribution a{ color:#D4AF37 !important; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:#15151d; color:#F5F5F0; border-radius:2px; border:1px solid rgba(212,175,55,.4);
}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--filet); background:var(--noir-2);
  padding:48px 0 30px; margin-top:8px;
}
.foot-grid{ display:grid; gap:28px; }
.foot-name{ font-family:var(--serif); font-size:1.4rem; color:var(--creme); margin:0 0 4px; letter-spacing:.05em; }
.foot-h{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or-mat); margin:0 0 10px;
}
.foot-txt{ font-size:.85rem; color:var(--creme-3); margin:0 0 8px; max-width:52ch; }
.foot-txt a{ color:var(--creme); text-decoration:none; border-bottom:1px solid var(--filet); }
.foot-txt a:hover{ color:var(--or); border-bottom-color:var(--or); }
.foot-bot{
  margin:34px 0 0; padding-top:18px; border-top:1px solid var(--filet-froid);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:.72rem; letter-spacing:.08em; color:var(--creme-3);
}

/* ---------- Révélations ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.rv.vu{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .gal img,.acc-body{ transition:none; }
}

/* ---------- Paliers ---------- */
@media (min-width:700px){
  :root{ --pad-y:88px; }
  .gal{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .items li{ grid-template-columns:1fr auto; align-items:baseline; column-gap:24px; }
  .it-d{ grid-column:1/2; }
  .it-p{ grid-column:2/3; grid-row:1/2; text-align:right; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:980px){
  :root{ --pad-y:104px; }
  .burger{ display:none; }
  .nav{ display:flex; }
  .bar-tel{ display:inline-block; }
  .hero{ padding:86px 22px 100px; }
  .hero-grid{ grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; }
  .two{ grid-template-columns:.72fr 1.28fr; gap:56px; }
  .contact .two{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .gal{ grid-template-columns:repeat(4,1fr); }
  .gal figure:first-child{ grid-column:span 2; }
  .gal figure:first-child img{ aspect-ratio:16/10; }
  .foot-grid{ grid-template-columns:1fr 1fr 1.4fr; gap:48px; }
  #map-card{ height:460px !important; }
}