:root{
  --bg: #F7F4EE;
  --bg-alt: #EFEBE2;
  --ink: #2B3A3A;
  --ink-soft: #5B6B69;
  --montmerle: #2F6690;
  --montmerle-light: #E4EEF4;
  --montmerle-dark: #204A69;
  --villefranche: #4C7A5D;
  --villefranche-light: #E8EFE8;
  --villefranche-dark: #365943;
  --warm: #E3AD82;
  --white: #FFFFFF;
  --radius: 18px;
  --shadow: 0 10px 30px -12px rgba(43,58,58,0.18);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Work Sans", -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip;}
body{overflow-x:hidden; overflow-x:clip;}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
@media(max-width:720px){ section{padding:64px 0;} }

a:focus-visible, button:focus-visible{
  outline: 3px solid var(--warm);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(247,244,238,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(43,58,58,0.08);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.15rem; text-decoration:none;}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--montmerle) 0%, var(--montmerle) 48%, var(--villefranche) 52%, var(--villefranche) 100%);
  flex-shrink:0; object-fit:cover;
}
nav ul{list-style:none; display:flex; gap:32px;}
nav a{text-decoration:none; font-weight:500; font-size:0.95rem; color:var(--ink-soft); transition:color .2s;}
nav a:hover, nav a[aria-current="page"]{color:var(--ink);}
nav a[aria-current="page"]{font-weight:700;}
.nav-cta{display:flex; gap:10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:0.92rem; border:1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px);}
.btn-montmerle{background:var(--montmerle); color:var(--white);}
.btn-montmerle:hover{box-shadow:0 8px 20px -6px rgba(47,102,144,0.5);}
.btn-villefranche{background:var(--villefranche); color:var(--white);}
.btn-villefranche:hover{box-shadow:0 8px 20px -6px rgba(76,122,93,0.5);}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-sm{padding:9px 16px; font-size:0.85rem;}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s;}

@media(max-width:860px){
  nav{
    position:fixed; top:64px; left:0; right:0;
    background:var(--bg); z-index:70;
    max-height:0; overflow:hidden; padding:0 24px;
    transition:max-height .3s ease;
  }
  nav.open{
    max-height:calc(100vh - 64px);
    padding:32px 24px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  nav ul{flex-direction:column; gap:24px; font-size:1.1rem;}
  .nav-cta{display:none;}
  .menu-toggle{display:block;}
}

/* ---------- Hero (accueil) ---------- */
.hero{position:relative; overflow:hidden; padding-top:72px;}
.hero-inner{
  max-width:1120px; margin:0 auto; padding: 64px 24px 40px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;
}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr; padding-top:24px;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--villefranche-dark); margin-bottom:18px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--montmerle);}
.hero h1{font-size:clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom:22px;}
.hero h1 em{font-style:normal; background:linear-gradient(90deg, var(--montmerle), var(--villefranche)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin-bottom:32px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px;}

.hero-visual{position:relative; aspect-ratio:1/1; border-radius:32px; overflow:hidden; background:var(--bg-alt);}
.hero-visual .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:0.85rem; text-align:center; padding:24px;
  background: radial-gradient(circle at 30% 20%, var(--montmerle-light), transparent 60%),
              radial-gradient(circle at 75% 80%, var(--villefranche-light), transparent 60%);
}

.wave{display:block; width:100%; height:auto; margin-top:-2px;}
.wave path{
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw 2.4s ease forwards .3s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .wave path{animation:none; stroke-dashoffset:0;}
  html{scroll-behavior:auto;}
}

/* ---------- Page header (sous-pages) ---------- */
.page-hero{
  padding: 64px 0 72px; position:relative; overflow:hidden;
}
.page-hero.tone-montmerle{ background: linear-gradient(180deg, var(--montmerle-light), var(--bg) 90%); }
.page-hero.tone-villefranche{ background: linear-gradient(180deg, var(--villefranche-light), var(--bg) 90%); }
.page-hero.tone-neutral{ background: var(--bg-alt); }
.page-hero h1{font-size:clamp(2rem, 3.6vw, 2.9rem); margin-bottom:16px;}
.page-hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:56ch;}
.breadcrumb{font-size:0.85rem; color:var(--ink-soft); margin-bottom:18px;}
.breadcrumb a{text-decoration:underline;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- Section headings ---------- */
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head.left{margin:0 0 40px; text-align:left;}
.section-head h2{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

/* ---------- Cabinets ---------- */
.cabinets-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media(max-width:760px){ .cabinets-grid{grid-template-columns:1fr;} }
.cab-card{
  border-radius:var(--radius); padding:36px; background:var(--white); box-shadow:var(--shadow);
  border-top:5px solid var(--c);
}
.cab-card.montmerle{--c:var(--montmerle);}
.cab-card.villefranche{--c:var(--villefranche);}
.cab-card .tag{
  display:inline-block; padding:5px 14px; border-radius:999px; font-size:0.78rem; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase; margin-bottom:18px; color:var(--white); background:var(--c);
}
.cab-card h3{font-size:1.5rem; margin-bottom:14px;}
.cab-card ul{list-style:none; margin:18px 0 26px; color:var(--ink-soft); font-size:0.95rem;}
.cab-card li{display:flex; gap:10px; margin-bottom:10px; align-items:flex-start;}
.cab-card li svg{flex-shrink:0; margin-top:3px; color:var(--c);}

/* ---------- Prestations ---------- */
.presta-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
@media(max-width:860px){ .presta-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .presta-grid{grid-template-columns:1fr;} }
.presta-card{
  padding:30px 26px; border-radius:16px; background:var(--white);
  border:1px solid rgba(43,58,58,0.08); transition: box-shadow .2s ease, transform .2s ease;
}
.presta-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.presta-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--montmerle-light), var(--villefranche-light)); margin-bottom:18px; color:var(--montmerle-dark);
}
.presta-icon.c-montmerle{background:var(--montmerle-light); color:var(--montmerle-dark);}
.presta-icon.c-villefranche{background:var(--villefranche-light); color:var(--villefranche-dark);}
.presta-card h3{font-size:1.08rem; margin-bottom:8px; font-weight:600; font-family:var(--sans);}
.presta-card p{font-size:0.92rem; color:var(--ink-soft);}

/* ---------- About ---------- */
.about{background:var(--bg-alt);}
.about-inner{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
@media(max-width:820px){ .about-inner{grid-template-columns:1fr;} }
.about-photo{aspect-ratio:4/5; border-radius:24px; background:var(--white); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:0.85rem; text-align:center; padding:24px;}
.badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.badge{
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--white); font-size:0.85rem; font-weight:600; border:1px solid rgba(43,58,58,0.1);
}
.badge svg{color:var(--villefranche);}

/* ---------- Avis ---------- */
.avis-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:860px){ .avis-grid{grid-template-columns:1fr;} }
.avis-card{background:var(--white); border-radius:16px; padding:28px; box-shadow:var(--shadow);}
.stars{color:var(--warm); letter-spacing:2px; margin-bottom:14px; font-size:1.1rem;}
.avis-card p{font-size:0.95rem; color:var(--ink-soft); margin-bottom:16px; font-style:italic;}
.avis-name{font-weight:600; font-size:0.9rem;}
.avis-note{
  text-align:center; margin-top:40px; padding:18px; border-radius:14px; background:var(--bg-alt);
  font-size:0.88rem; color:var(--ink-soft);
}

/* ---------- Contact / cards info ---------- */
.contact{background:var(--ink); color:var(--bg);}
.contact .section-head h2, .contact .section-head p{color:var(--bg);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media(max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{
  background:rgba(255,255,255,0.06); border-radius:var(--radius); padding:32px;
  border-top:4px solid var(--c);
}
.contact-card.montmerle{--c:var(--montmerle);}
.contact-card.villefranche{--c:var(--villefranche);}
.contact-card h3{font-size:1.3rem; margin-bottom:16px; color:var(--white);}
.contact-card p{color:rgba(247,244,238,0.75); font-size:0.95rem; margin-bottom:8px;}
.contact-card .btn{margin-top:18px;}

.map-embed{
  width:100%; aspect-ratio:16/9; border-radius:16px; border:0;
  background:var(--bg-alt);
}

/* ---------- Cross-link cards (vers autre cabinet / autre page) ---------- */
.crosslink{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:28px 32px; border-radius:var(--radius); margin-top:20px;
  background:var(--white); border:1px solid rgba(43,58,58,0.08);
}
@media(max-width:600px){ .crosslink{flex-direction:column; align-items:flex-start;} }

/* ---------- Footer ---------- */
footer{padding:36px 0; text-align:center; font-size:0.85rem; color:var(--ink-soft);}
footer a{text-decoration:underline;}
.footer-links{display:flex; justify-content:center; gap:20px; margin-bottom:14px; flex-wrap:wrap;}

.placeholder-note{
  font-size:0.78rem; color:var(--ink-soft); background:var(--bg-alt); border-radius:8px;
  padding:6px 10px; display:inline-block; margin-top:8px;
}

/* ---------- Bouton RDV flottant (mobile uniquement) ---------- */
.mobile-rdv-bar{
  display:flex; position:fixed; right:20px; bottom:24px; z-index:80;
}
.mobile-rdv-bar a{
  display:flex; align-items:center; gap:8px;
  padding:15px 22px; border-radius:999px;
  background:var(--montmerle); color:#fff; font-weight:700; font-size:0.95rem;
  text-decoration:none; box-shadow:0 8px 24px -4px rgba(43,58,58,0.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mobile-rdv-bar a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -4px rgba(43,58,58,0.5);
}
@media(max-width:860px){
  .mobile-rdv-bar{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
}

/* ---------- Signes / Quand consulter ---------- */
.signs-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:36px;}
@media(max-width:980px){ .signs-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .signs-grid{grid-template-columns:1fr;} }
.sign-card{
  background:var(--white); border-radius:16px; padding:22px; display:flex; gap:14px;
  border:1px solid rgba(43,58,58,0.08); transition:box-shadow .2s ease, transform .2s ease;
}
.sign-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.sign-icon{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--c-light); color:var(--c-dark);
}
.sign-card h3{font-size:0.98rem; margin-bottom:6px;}
.sign-card p{font-size:0.86rem; color:var(--ink-soft); line-height:1.5;}

.reassurance-note{
  display:flex; align-items:center; gap:22px; background:var(--bg-alt);
  border-radius:16px; padding:26px 30px; margin-top:28px;
}
@media(max-width:600px){ .reassurance-note{flex-direction:column; text-align:center;} }
.reassurance-note .icon{
  width:58px; height:58px; border-radius:50%; background:var(--white); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--c);
}
.reassurance-note h3{font-size:1.05rem; margin-bottom:6px;}
.reassurance-note p{font-size:0.9rem; color:var(--ink-soft);}

/* ---------- Nav dropdowns ---------- */
nav details summary{
  list-style:none; cursor:pointer; font-weight:500; font-size:0.95rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:5px;
}
nav details summary::-webkit-details-marker{display:none;}
nav details summary:hover{color:var(--ink);}
nav details[open] summary, nav .current-parent summary{color:var(--ink); font-weight:700;}
nav details summary .chev{transition:transform .2s;}
nav details[open] summary .chev{transform:rotate(180deg);}
nav details ul{list-style:none;}
@media(min-width:861px){
  nav > ul > li{position:relative;}
  nav details ul{
    position:absolute; top:100%; left:0; margin-top:10px; background:var(--white);
    box-shadow:var(--shadow); border-radius:12px; padding:8px; min-width:210px; z-index:60;
  }
  nav details ul li a{display:block; padding:9px 14px; border-radius:8px; font-size:0.9rem; color:var(--ink-soft); text-decoration:none;}
  nav details ul li a:hover{background:var(--bg-alt); color:var(--ink);}
}
@media(max-width:860px){
  nav details ul{padding-left:14px; margin-top:10px; display:flex; flex-direction:column; gap:16px;}
}

/* ---------- Cabinets split (côte à côte, poids égal) ---------- */
.cabinets-split-wrap{position:relative;}
.cabinets-mascot{
  position:absolute; top:250px; left:50%; transform:translate(-50%, -50%);
  width:130px; height:130px; border-radius:50%; overflow:hidden;
  background:var(--bg); border:5px solid var(--bg); box-shadow:var(--shadow); z-index:5;
}
.cabinets-mascot img{width:100%; height:100%; object-fit:cover; display:block;}
@media(max-width:760px){
  .cabinets-mascot{width:90px; height:90px; top:50%;}
}
.cabinets-split{
  display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.cabinets-split .panel{padding:52px 44px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff;}
.cabinets-split .panel.montmerle{background:linear-gradient(160deg, var(--montmerle), var(--montmerle-dark));}
.cabinets-split .panel.villefranche{background:linear-gradient(160deg, var(--villefranche), var(--villefranche-dark));}
.cabinets-split .panel .tag{background:rgba(255,255,255,0.18); color:#fff;}
.cabinets-split .panel h3{font-size:1.7rem; margin:14px 0 12px; color:#fff;}
.cabinets-split .panel p{color:rgba(255,255,255,0.88); font-size:0.95rem; margin-bottom:6px;}
.cabinets-split .panel .btn{margin-top:22px; background:#fff; color:var(--ink);}
.cabinets-split .panel .btn:hover{box-shadow:0 8px 20px -6px rgba(0,0,0,0.35);}
@media(max-width:760px){ .cabinets-split{grid-template-columns:1fr;} .cabinets-split .panel{padding:40px 30px;} }

/* ---------- Prestations en 3 colonnes égales ---------- */
.presta-3col{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px;}
@media(max-width:820px){ .presta-3col{grid-template-columns:1fr;} }
.presta-panel{
  background:var(--white); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; border-top:5px solid var(--c);
}
.presta-panel.c1{--c:var(--montmerle);}
.presta-panel.c2{--c:var(--villefranche);}
.presta-panel.c3{--c:var(--warm);}
.presta-panel.c4{--c:var(--montmerle-dark);}
.presta-panel.c5{--c:var(--villefranche-dark);}
.presta-panel h3{font-size:1.2rem; margin-bottom:16px;}
.presta-panel ul{list-style:none; color:var(--ink-soft); font-size:0.92rem; margin-bottom:24px; flex:1;}
.presta-panel li{padding:5px 0 5px 18px; position:relative;}
.presta-panel li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:var(--c);}