/* 2aserrurerie — Serrurier au Havre (76) · Design « Clair & Direct »
   Palette : blanc / orange #e2620e / beige #faf5ee / gris chaud · vert validation #16a34a · Typo Manrope + Inter */
:root{
  --ink:#241f1b; --muted:#7c7268; --line:#e9e1d6; --soft:#faf5ee;
  --accent:#e2620e; --accent-dark:#bf4f08; --accent-soft:#fbeee2; --green:#16a34a;
  --wrap:1120px; --radius:14px;
  --shadow-sm:0 1px 2px rgba(36,31,27,.06);
  --shadow:0 10px 30px -12px rgba(36,31,27,.20);
  --shadow-cta:0 12px 26px -10px rgba(226,98,14,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-head{font-family:"Manrope","Inter",system-ui,sans-serif}
/* Direction « Éditorial » : grands titres en serif Fraunces */
.h,.subhero h1,.hero-ed h1,.prose h2,.cta-band h2{font-family:"Fraunces","Georgia",serif;font-weight:600;letter-spacing:-.01em}
h2.h{font-weight:600}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.section{padding:clamp(44px,7vw,84px) 0}
.section.soft{background:var(--soft)}
.eyebrow{font-family:"Manrope",sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12.5px; color:var(--accent); margin:0 0 10px}
h2.h{font-weight:800; font-size:clamp(26px,3.6vw,38px); line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
.sec-intro{color:var(--muted); font-size:17px; max-width:60ch; margin:0 0 34px}
.center{text-align:center} .center .sec-intro{margin-left:auto; margin-right:auto}

/* Boutons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:"Manrope",sans-serif; font-weight:700; border-radius:12px; padding:13px 22px; font-size:16px; border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.btn svg{width:19px; height:19px}
.btn-cta{background:var(--accent); color:#fff; box-shadow:var(--shadow-cta)}
.btn-cta:hover{transform:translateY(-1px); background:var(--accent-dark)}
.btn-lg{font-size:19px; padding:16px 30px}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-white{background:#fff; color:var(--accent)}

/* Header sticky */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:18px; height:68px}
.logo{display:flex; align-items:center; gap:10px; font-family:"Manrope",sans-serif; font-weight:800; font-size:21px; letter-spacing:-.01em}
.logo .mark{color:var(--accent); display:flex}
.logo small{display:block; font-family:"Inter",sans-serif; font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.01em; margin-top:-3px}
.nav{display:flex; gap:4px; margin-left:14px; align-items:center}
.nav-lnk,.nav-top{font-family:"Manrope",sans-serif; font-weight:600; font-size:15px; color:#5c534a; padding:8px 12px; border-radius:9px; display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.nav-lnk:hover,.nav-top:hover{color:var(--accent); background:var(--accent-soft)}
.nav-lnk.active,.has-sub.active .nav-top{color:var(--accent)}
.nav-item{position:relative}
.chev{width:14px; height:14px; transition:transform .2s ease}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg)}
.sub{position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; min-width:260px; display:none; grid-template-columns:1fr; gap:2px; z-index:60}
.sub::before{content:""; position:absolute; top:-8px; left:0; right:0; height:8px}
.sub-3col{min-width:600px; grid-template-columns:repeat(3,1fr)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:grid}
.sub a{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; font-size:14px; font-weight:600; color:#4a423a; white-space:nowrap}
.sub a:hover{background:var(--accent-soft); color:var(--accent)}
.sub .si{width:16px; height:16px; color:var(--accent); flex:none}
.sub-all{grid-column:1/-1; color:var(--accent)!important; border-bottom:1px solid var(--line); border-radius:0!important; margin-bottom:4px}
.sub-all svg{width:15px; height:15px}
.hdr-cta{margin-left:auto}
.burger{margin-left:auto; display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:9px; color:var(--ink)}
.burger svg{width:22px; height:22px; display:block}
@media(max-width:900px){
  .nav{position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px; margin:0; transform:translateY(-140%); transition:transform .25s ease; box-shadow:var(--shadow); max-height:calc(100vh - 68px); overflow-y:auto}
  body.nav-open .nav{transform:translateY(0)}
  .nav-lnk,.nav-top{padding:13px 10px; font-size:16px}
  .nav-item{position:static}
  .chev{display:none}
  .sub{display:none!important}
  .burger{display:block}
  .hdr-cta{margin-left:0}
  .hdr .hdr-cta{display:none}
}

/* Hero (accueil) */
.hero{padding:clamp(48px,7vw,84px) 0 clamp(30px,5vw,50px); text-align:center}
.hero .kick{display:inline-flex; align-items:center; gap:7px; background:var(--accent-soft); color:var(--accent); font-family:"Manrope",sans-serif; font-weight:700; font-size:13.5px; padding:7px 15px; border-radius:999px}
.hero .kick svg{width:15px; height:15px}
.hero h1{font-weight:800; font-size:clamp(32px,5.6vw,56px); line-height:1.03; letter-spacing:-.03em; margin:18px auto 16px; max-width:16ch; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lead{color:#5c534a; font-size:clamp(17px,2vw,20px); max-width:56ch; margin:0 auto 28px}
.hero-cta{display:flex; justify-content:center; flex-wrap:wrap; gap:14px}
.hero-media{margin-top:38px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.hero-media img{width:100%; height:clamp(220px,38vw,420px); object-fit:cover}

/* Hero immersif (accueil) */
.hero-imm{position:relative; isolation:isolate; overflow:hidden}
.hero-imm-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-2}
.hero-imm-ov{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(30,22,15,.9) 0%,rgba(30,22,15,.66) 44%,rgba(30,22,15,.2) 100%)}
.hero-imm-in{max-width:640px; min-height:clamp(460px,62vh,620px); display:flex; flex-direction:column; justify-content:center; padding:56px 0}
.kick-light{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); color:#fff; font-family:"Manrope",sans-serif; font-weight:700; font-size:13.5px; padding:7px 15px; border-radius:999px}
.kick-light svg{width:15px; height:15px}
.hero-imm h1{color:#fff; font-weight:800; font-size:clamp(32px,5.2vw,54px); line-height:1.04; letter-spacing:-.03em; margin:18px 0 16px; max-width:18ch; text-wrap:balance}
.hero-imm h1 em{color:#f7b98c; font-style:normal}
.hero-imm .lead{color:#f0e7dc; font-size:clamp(17px,2vw,20px); max-width:46ch; margin:0 0 28px}
.hero-imm .hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.trust-dark{background:#1e1a16}
.trust-dark .wrap{display:flex; justify-content:center; flex-wrap:wrap; gap:14px 30px; padding:18px 20px}
.trust-dark .t{display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:#f0e7dc}
.trust-dark .t svg{width:19px; height:19px; color:#4ade80}
@media(max-width:760px){
  .hero-imm-ov{background:linear-gradient(180deg,rgba(30,22,15,.5) 0%,rgba(30,22,15,.9) 100%)}
  .hero-imm-in{max-width:none; min-height:clamp(420px,72vh,560px); padding:44px 0}
}

/* Hero éditorial (accueil) — split titre serif + photo pleine hauteur */
.hero-ed{display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; border-bottom:1px solid var(--line); background:#fff}
/* Le padding gauche aligne le texte sur la gouttière du site. Il est prélevé
   DANS la boîte : lui imposer en plus un max-width réduisait la colonne utile
   à ~420px, et le H1 se cassait mot par mot. La largeur vient de la grille. */
.hero-ed .in{display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,84px) clamp(24px,3vw,48px); padding-left:max(24px, calc((100vw - var(--wrap))/2))}
.hero-ed .kick{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; background:var(--accent-soft); color:var(--accent); font-family:"Manrope",sans-serif; font-weight:700; font-size:13px; padding:6px 13px; border-radius:999px}
.hero-ed .kick svg{width:15px; height:15px}
.hero-ed h1{font-size:clamp(30px,3.3vw,46px); line-height:1.08; margin:18px 0 16px; text-wrap:balance}
.hero-ed h1 em{font-style:italic; color:var(--accent)}
.hero-ed .lead{color:var(--muted); font-size:clamp(17px,2vw,20px); max-width:46ch; margin:0 0 28px}
.hero-ed .hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.hero-ed .media{background-size:cover; background-position:center; min-height:clamp(360px,54vh,600px)}
@media(max-width:860px){
  .hero-ed{grid-template-columns:1fr}
  .hero-ed .in{max-width:none; padding-left:clamp(24px,4vw,60px); order:2}
  .hero-ed .media{min-height:clamp(220px,40vw,300px); order:1}
}

/* Bande de services (icônes ligne) */
.svc-strip{background:var(--soft); border-bottom:1px solid var(--line)}
.svc-strip .wrap{display:grid; grid-template-columns:repeat(6,1fr); padding:0}
.svc-strip a{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 10px; border-right:1px solid var(--line); color:var(--ink); transition:background .15s, color .15s}
.svc-strip a:last-child{border-right:none}
.svc-strip a:hover{background:#fff; color:var(--accent)}
.svc-strip .si{width:32px; height:32px; color:var(--accent); flex:none}
.svc-strip span{font-family:"Manrope",sans-serif; font-weight:700; font-size:12.5px; line-height:1.25}
@media(max-width:760px){
  .svc-strip .wrap{grid-template-columns:repeat(3,1fr)}
  .svc-strip a{border-bottom:1px solid var(--line)}
  .svc-strip a:nth-child(3n){border-right:none}
}
@media(max-width:420px){
  .svc-strip .wrap{grid-template-columns:repeat(2,1fr)}
  .svc-strip a:nth-child(3n){border-right:1px solid var(--line)}
  .svc-strip a:nth-child(2n){border-right:none}
}

/* Bandeau confiance clair (sous la bande de services) */
.trust-band{background:#fff; border-bottom:1px solid var(--line)}
.trust-band .wrap{display:flex; justify-content:center; flex-wrap:wrap; gap:14px 30px; padding:18px 20px}
.trust-band .t{display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:#4a423a}
.trust-band .t svg{width:19px; height:19px; color:var(--green)}

/* Bandeau confiance */
.trust{display:flex; justify-content:center; flex-wrap:wrap; gap:14px 26px; padding:22px 0}
.trust .t{display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:#4a423a}
.trust .t svg{width:19px; height:19px; color:var(--green)}

/* Grille de cartes */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s}
.card:hover{border-color:#e0c8ac; transform:translateY(-2px)}
.card .ic{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:14px}
.card .ic svg{width:24px; height:24px}
.card h3{font-weight:700; font-size:18px; margin:0 0 6px}
.card p{margin:0 0 14px; color:var(--muted); font-size:14.5px}
.card .price{font-family:"Manrope",sans-serif; font-weight:700; font-size:14px; color:var(--ink)}
.card .lnk{color:var(--accent); font-weight:700; font-size:14.5px; font-family:"Manrope",sans-serif; display:inline-flex; align-items:center; gap:6px}
.card .lnk svg{width:16px; height:16px}
.card.svc-img{padding:0; overflow:hidden}
.card.svc-img img{height:160px; width:100%; object-fit:cover}
.card.svc-img .body{padding:20px}

/* Bandeau CTA / urgence */
.cta-band{background:linear-gradient(135deg,var(--accent),#f2872f); color:#fff; border-radius:20px; padding:clamp(28px,4vw,44px); text-align:center; box-shadow:var(--shadow)}
.cta-band h2{color:#fff; margin:0 0 10px}
.cta-band p{color:#ffe6d2; margin:0 0 22px; font-size:17px}
.cta-band .num{font-family:"Manrope",sans-serif; font-weight:800; font-size:clamp(26px,4vw,36px); letter-spacing:-.01em}
.cta-band .btn-white{box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}

/* Contenu éditorial (pages villes / services / à-propos) */
.prose{max-width:72ch}
.prose p{margin:0 0 16px; color:#4a423a; font-size:16.5px}
.prose h2{font-weight:800; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em; margin:36px 0 12px}
.prose h3{font-weight:700; font-size:19px; margin:26px 0 8px}
.prose ul{margin:0 0 18px; padding-left:0; list-style:none; display:grid; gap:9px}
.prose li{display:flex; gap:10px; align-items:flex-start; color:#4a423a; font-size:16px}
.prose li svg{width:20px; height:20px; color:var(--green); flex:none; margin-top:3px}
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:26px}}
.aside{position:sticky; top:88px; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.aside h3{font-family:"Manrope",sans-serif; font-weight:800; font-size:18px; margin:0 0 6px}
.aside .num{font-family:"Manrope",sans-serif; font-weight:800; font-size:26px; color:var(--accent); margin:6px 0}
.aside p{font-size:14px; color:var(--muted); margin:0 0 14px}
.aside .btn{width:100%; justify-content:center}
.media-round{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:0 0 22px}
.media-round img{width:100%; height:clamp(200px,30vw,300px); object-fit:cover}

/* Fil d'ariane */
.crumb{font-size:13.5px; color:var(--muted); padding:16px 0 0}
.crumb a:hover{color:var(--accent)}
.crumb span{color:#b3a99b}

/* Page hero secondaire (services/villes) */
.subhero{padding:26px 0 8px}
.subhero .kick{display:inline-flex; align-items:center; gap:7px; background:var(--accent-soft); color:var(--accent); font-family:"Manrope",sans-serif; font-weight:700; font-size:13px; padding:6px 13px; border-radius:999px}
.subhero .kick svg{width:14px;height:14px}
.subhero h1{font-weight:800; font-size:clamp(28px,4.6vw,44px); line-height:1.06; letter-spacing:-.02em; margin:14px 0 12px; max-width:20ch; text-wrap:balance}
.subhero h1 em{font-style:normal; color:var(--accent)}
.subhero .lead{color:#5c534a; font-size:18px; max-width:58ch; margin:0 0 18px}

/* Tarifs */
.table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:16px}
.table td{padding:15px 18px; border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:none}
.table tr:nth-child(even){background:var(--soft)}
.table .v{text-align:right; font-family:"Manrope",sans-serif; font-weight:700; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums}
.note{font-size:14px; color:var(--muted); margin-top:14px}

/* FAQ */
.faq{display:grid; gap:12px; max-width:80ch}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:2px 20px}
.faq summary{font-family:"Manrope",sans-serif; font-weight:700; font-size:16.5px; padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:24px; font-weight:700; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px; color:#4a423a; font-size:15.5px}

/* Avis */
.review{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm)}
.review .stars{color:#f59e0b; letter-spacing:2px; font-size:15px}
.review p{margin:10px 0 12px; color:#4a423a; font-size:15px}
.review .who{font-family:"Manrope",sans-serif; font-weight:700; font-size:14px}
.review .who span{color:var(--muted); font-weight:500}

/* Liste des villes */
.city-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:900px){.city-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.city-grid{grid-template-columns:1fr}}
.city-grid a{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 14px; font-weight:600; font-size:15px; transition:border-color .15s, color .15s}
.city-grid a:hover{border-color:var(--accent); color:var(--accent)}
.city-grid a svg{width:17px; height:17px; color:var(--accent); flex:none}

/* Footer */
.ft{background:#1e1a16; color:#d8cebf; padding:52px 0 120px}
.ft-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
@media(max-width:820px){.ft-in{grid-template-columns:1fr}}
.ft h4{font-family:"Manrope",sans-serif; color:#fff; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px}
.ft a{color:#d8cebf; font-size:14.5px; line-height:2}
.ft a:hover{color:#fff}
.ft .brand{display:flex; align-items:center; gap:10px; font-family:"Manrope",sans-serif; font-weight:800; font-size:20px; color:#fff; margin-bottom:12px}
.ft .brand .mark{color:#f2872f}
.ft .num{font-family:"Manrope",sans-serif; font-weight:800; font-size:26px; color:#fff; margin:6px 0}
.ft .num a{color:#f2872f}
.ft .cols{display:flex; flex-direction:column}
.ft .legal{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); margin-top:14px; padding-top:20px; font-size:13px; color:#a89f92}

/* Bouton d'appel flottant (mobile) */
.callbar{display:none}
@media(max-width:900px){
  .callbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--accent); color:#fff; align-items:center; justify-content:center; gap:10px; font-family:"Manrope",sans-serif; font-weight:800; font-size:17px; padding:14px; box-shadow:0 -6px 20px -8px rgba(0,0,0,.35)}
  .callbar svg{width:20px; height:20px}
}
/* Vignettes (icône + titre + texte) */
.vignettes{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.vignettes.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.vignettes,.vignettes.cols-2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vignettes,.vignettes.cols-2{grid-template-columns:1fr}}
.vignette{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px 18px 16px; box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s}
.vignette:hover{border-color:#e0c8ac; transform:translateY(-2px)}
.vignette .vic{width:46px; height:46px; flex:none; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.vignette .vic svg{width:23px; height:23px}
.vignette h4{font-family:"Manrope",sans-serif; font-weight:700; font-size:16px; margin:0 0 3px; color:var(--ink)}
.vignette p{margin:0; color:var(--muted); font-size:14px; line-height:1.5}

/* Pilules cliquables */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 20px}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent); border:1px solid #f0d6bd; border-radius:999px; padding:9px 15px; font-family:"Manrope",sans-serif; font-weight:600; font-size:14px; transition:background .15s}
.chip:hover{background:#f8ddc4}
.chip .ci{width:16px; height:16px; flex:none}

/* Carte interactive (Leaflet + OpenStreetMap) */
.leaflet-map{position:relative; z-index:0; height:clamp(360px,52vh,540px); margin-top:26px; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm)}
.leaflet-map .leaflet-container{font-family:"Inter",sans-serif}
.leaflet-tooltip{font-family:"Manrope",sans-serif; font-weight:700; font-size:13px; color:var(--ink); border:1px solid var(--line); border-radius:8px}
.leaflet-map .leaflet-interactive{cursor:pointer}

@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}