/* ========================================
   SERRURERIE TEMPLIER v5 — Refonte
   Inter · Accessible · Artisan Premium
   ======================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --dark: #1a1a1a;
    --text: #1f2937;
    --muted: #555;
    --light: #6b7280;
    --faint: #9ca3af;
    --line: #e5e7eb;
    --bg: #f7f6f3;
    --white: #fff;
    --red: #B91C1C;
    --red-dark: #991B1B;
    --green: #15803d;
    --green-dark: #166534;
    --gold: #d97706;
    --r: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

/* RESET */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:130px }
body { font-family:var(--font); color:var(--text); line-height:1.7; background:var(--white); -webkit-font-smoothing:antialiased; font-size:16px }
img { max-width:100%; display:block; height:auto }
a { text-decoration:none; color:inherit; transition:color .15s }
ul { list-style:none }
h1,h2,h3,h4 { font-family:var(--font); color:var(--dark); line-height:1.25; font-weight:800 }
h2 { font-size:2.25rem; margin-bottom:.5rem; letter-spacing:-.02em }
h3 { font-size:1.25rem; margin-bottom:.4rem; font-weight:700 }
strong { font-weight:600 }

/* SR-ONLY (accessible hidden) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* SKIP LINK */
.skip-link { position:absolute; top:-100%; left:50%; transform:translateX(-50%); background:var(--dark); color:var(--white); padding:.75rem 1.5rem; border-radius:0 0 var(--r) var(--r); z-index:10000; font-weight:600; font-size:.9rem }
.skip-link:focus { top:0 }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.5rem; border-radius:var(--r); font-weight:600; font-size:.9rem; border:none; cursor:pointer; transition:all .15s; font-family:var(--font); line-height:1.2; min-height:44px }
.btn:focus-visible { outline:3px solid var(--dark); outline-offset:2px }
.btn--green { background:var(--green); color:var(--white) }
.btn--green:hover { background:var(--green-dark) }
.btn--red { background:var(--red); color:var(--white) }
.btn--red:hover { background:var(--red-dark) }
.btn--outline { background:transparent; color:var(--text); border:2px solid var(--line) }
.btn--outline:hover { border-color:var(--dark); color:var(--dark) }
.btn--ghost { background:rgba(255,255,255,.15); color:var(--white); border:2px solid rgba(255,255,255,.4) }
.btn--ghost:hover { background:rgba(255,255,255,.25) }
.btn--big { padding:.875rem 2rem; font-size:1rem }
.btn--full { width:100% }

/* LABEL */
.label { display:inline-block; padding:.25rem .75rem; border-radius:100px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em }
.label--red { background:var(--red); color:var(--white) }

/* CHECKLIST */
.checklist li { position:relative; padding:.55rem 0 .55rem 1.5rem; font-size:.92rem; color:var(--text); border-bottom:1px solid var(--line) }
.checklist li:last-child { border:none }
.checklist li::before { content:'✓'; position:absolute; left:0; top:.55rem; color:var(--green); font-weight:700; font-size:.85rem }
.checklist--sm li { font-size:.87rem; padding:.4rem 0 .4rem 1.3rem }
.checklist--sm li::before { top:.4rem; font-size:.8rem }

/* ============================================
   TOPBAR
   ============================================ */
.topbar { background:var(--red); color:var(--white); font-size:.82rem; font-weight:500 }
.topbar__wrap { max-width:1200px; margin:0 auto; padding:.45rem 1.5rem; display:flex; align-items:center; justify-content:space-between }
.topbar__left { display:flex; align-items:center; gap:1.25rem }
.topbar__left span { display:flex; align-items:center; gap:.35rem; opacity:.95 }
.topbar__left svg { flex-shrink:0 }
.topbar__right a { color:var(--white); font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.4rem; letter-spacing:.01em }
.topbar__right a:hover { opacity:.85 }

/* ============================================
   NAVBAR
   ============================================ */
.nav { position:sticky; top:0; z-index:1000; background:var(--white); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm) }
.nav__wrap { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:72px }
.nav__brand { display:flex; align-items:center }
.nav__logo { height:62px; width:auto }
.nav__links { display:flex; gap:2rem }
.nav__links a { font-size:.88rem; color:var(--muted); font-weight:500; padding:.25rem 0; position:relative }
.nav__links a:hover { color:var(--dark) }
.nav__links a:focus-visible { outline:2px solid var(--dark); outline-offset:4px; border-radius:2px }
.nav__cta { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; background:var(--green); color:var(--white); border-radius:var(--r); font-size:.88rem; font-weight:700; min-height:44px }
.nav__cta:hover { background:var(--green-dark) }
.nav__cta:focus-visible { outline:3px solid var(--dark); outline-offset:2px }
/* Dropdown */
.nav__dropdown { position:relative }
.nav__dropdown-toggle { display:flex; align-items:center; gap:.3rem; font-size:.88rem; color:var(--muted); font-weight:500; padding:.25rem 0; background:none; border:none; cursor:pointer; font-family:var(--font); transition:color .15s }
.nav__dropdown-toggle:hover { color:var(--dark) }
.nav__dropdown-toggle:focus-visible { outline:2px solid var(--dark); outline-offset:4px; border-radius:2px }
.nav__dropdown-toggle svg { transition:transform .2s }
.nav__dropdown-toggle[aria-expanded="true"] svg { transform:rotate(180deg) }
.nav__dropdown-menu { position:absolute; top:calc(100% + .75rem); left:50%; transform:translateX(-50%); background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:.5rem; min-width:260px; opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s, transform .15s; transform:translateX(-50%) translateY(4px); z-index:200 }
.nav__dropdown-menu::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--white); border-left:1px solid var(--line); border-top:1px solid var(--line) }
.nav__dropdown.open .nav__dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.nav__dropdown-menu a { display:block; padding:.65rem .85rem; border-radius:6px; transition:background .12s; text-decoration:none; color:inherit }
.nav__dropdown-menu a:hover { background:var(--bg) }
.nav__dropdown-menu a:focus-visible { outline:2px solid var(--dark); outline-offset:-2px; border-radius:6px }
.nav__dropdown-menu a strong { display:block; font-size:.88rem; font-weight:600; color:var(--dark); margin-bottom:.1rem }
.nav__dropdown-menu a span { display:block; font-size:.76rem; color:var(--muted); line-height:1.4 }

.nav__burger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; min-width:44px; min-height:44px; align-items:center; justify-content:center }
.nav__burger span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:.2s }

/* ============================================
   HERO
   ============================================ */
.hero { position:relative; min-height:560px; display:flex; align-items:center; color:var(--white); overflow:hidden }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40% }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 50%, rgba(10,10,10,.15) 100%) }
.hero__body { position:relative; max-width:1200px; margin:0 auto; padding:4.5rem 1.5rem; width:100% }
.hero__eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--white); margin-bottom:1.25rem; background:var(--red); padding:.4rem .9rem; border-radius:100px }
.hero__h1 { font-size:3.25rem; line-height:1.1; margin-bottom:1rem; font-weight:800; letter-spacing:-.025em; max-width:580px; color:var(--white); text-shadow:0 2px 16px rgba(0,0,0,.4) }
.hero__sub { font-size:1.05rem; color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:2rem; max-width:500px; text-shadow:0 1px 6px rgba(0,0,0,.3) }
.hero__actions { display:flex; gap:.75rem; flex-wrap:wrap }
.hero__trust { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.75rem; align-items:center }
.hero__badge { display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.12); padding:.4rem .8rem; border-radius:100px; font-size:.76rem; font-weight:500; color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.15); text-decoration:none; transition:.15s }
.hero__badge:hover { background:rgba(255,255,255,.2) }
.hero__stars { color:var(--gold); letter-spacing:1px; font-size:.82rem }

/* ============================================
   PARTNERS (logos)
   ============================================ */
.partners { background:var(--white); padding:1.5rem 0; border-bottom:1px solid var(--line) }
.partners__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap }
.partners__wrap img { height:40px; width:auto; object-fit:contain; filter:grayscale(100%) opacity(.5); transition:.2s }
.partners__wrap img:hover { filter:grayscale(0) opacity(1) }

/* ============================================
   TICKER (avis défilant)
   ============================================ */
.ticker { background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; padding:.75rem 0; position:relative }
.ticker::before, .ticker::after { content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none }
.ticker::before { left:0; background:linear-gradient(90deg, var(--bg), transparent) }
.ticker::after { right:0; background:linear-gradient(-90deg, var(--bg), transparent) }
.ticker__track { display:flex; gap:2.5rem; animation:ticker 45s linear infinite; width:max-content }
.ticker__track:hover { animation-play-state:paused }
.ticker__item { display:flex; align-items:center; gap:.5rem; white-space:nowrap; flex-shrink:0 }
.ticker__stars { color:var(--gold); font-size:.8rem; letter-spacing:1px }
.ticker__text { font-size:.82rem; color:var(--muted); font-style:italic }
.ticker__author { font-size:.78rem; color:var(--dark); font-weight:600 }
@keyframes ticker { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }

/* ============================================
   STATS
   ============================================ */
.stats { background:var(--white); padding:1.5rem 0; border-bottom:2px solid var(--red) }
.stats__wrap { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; gap:1rem }
.stats__item { padding:.5rem 0 }
.stats__item strong { display:block; font-size:1.4rem; color:var(--red); font-weight:800; margin-bottom:.1rem }
.stats__item span { font-size:.8rem; color:var(--muted); font-weight:500 }

/* ============================================
   SERVICE BLOCK
   ============================================ */
.block { padding:4rem 0 }
.block--alt { background:var(--bg) }
.block__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center }
.block--reverse .block__img { order:2 }
.block--reverse .block__text { order:1 }
.block__img { display:grid; gap:.75rem }
.block__img img { width:100%; border-radius:var(--r); object-fit:cover; box-shadow:var(--shadow-sm) }
.block__img img:first-child { aspect-ratio:16/10 }
.block__img img:last-child { aspect-ratio:16/8 }
.block__text { background:var(--bg); padding:2rem; border-radius:var(--r) }
.block--alt .block__text { background:var(--white) }
.block__wrap--text-only { grid-template-columns:1fr; max-width:800px }
.block__text--full { background:transparent; padding:0; text-align:left }
.block__text--full h2 { font-size:1.75rem; margin-bottom:.75rem }
.block__text--full p { font-size:1rem; color:var(--text); line-height:1.8 }
.block__text .label { margin-bottom:.75rem }
.block__text h2 { margin-bottom:.6rem }
.block__text > p { color:var(--muted); margin-bottom:1.25rem; font-size:.93rem; line-height:1.7 }
.block__text .checklist { margin-bottom:1.5rem }

/* ============================================
   PHOTOBREAK
   ============================================ */
.photobreak { height:45vh; min-height:280px; max-height:480px; overflow:hidden }
.photobreak img { width:100%; height:100%; object-fit:cover }

/* ============================================
   DUO (2 cards side by side)
   ============================================ */
.duo { padding:4rem 0; background:var(--bg) }
.duo__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1.75rem }
.duo__card { background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:box-shadow .2s }
.duo__card:hover { box-shadow:var(--shadow) }
.duo__img { width:100%; height:240px; object-fit:cover }
.duo__body { padding:1.75rem }
.duo__body h3 { margin-bottom:.5rem }
.duo__body > p { color:var(--muted); font-size:.9rem; margin-bottom:1rem; line-height:1.65 }

/* ============================================
   ENTREPRISE (storefront section)
   ============================================ */
.entreprise { padding:4rem 0; background:var(--bg) }
.entreprise__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center }
.entreprise__photo { border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg) }
.entreprise__photo img { width:100%; aspect-ratio:4/3; object-fit:cover }
.entreprise__content h2 { margin-bottom:.75rem }
.entreprise__content > p { color:var(--muted); font-size:.93rem; line-height:1.7; margin-bottom:1.5rem }
.entreprise__highlights { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem }
.entreprise__hl { padding:1.25rem; background:var(--white); border-radius:var(--r); border-left:4px solid var(--red); box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:.75rem }
.entreprise__hl-icon { flex-shrink:0; width:36px; height:36px; background:var(--red); color:var(--white); border-radius:var(--r); display:flex; align-items:center; justify-content:center }
.entreprise__hl-text strong { display:block; font-size:.92rem; color:var(--dark); margin-bottom:.15rem; font-weight:700 }
.entreprise__hl-text span { font-size:.82rem; color:var(--muted); line-height:1.4 }

/* ============================================
   TRUST
   ============================================ */
.trust { padding:4rem 0; background:var(--bg) }
.trust__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.trust__header { text-align:center; margin-bottom:2.5rem }
.trust__header p { color:var(--muted); font-size:.93rem; max-width:540px; margin:.5rem auto 0 }
.trust__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
.trust__card { padding:1.5rem; background:var(--white); border-radius:var(--r); box-shadow:var(--shadow-sm); border:1px solid var(--line); border-top:3px solid var(--red); transition:box-shadow .2s }
.trust__card:hover { box-shadow:var(--shadow) }
.trust__icon { width:40px; height:40px; background:var(--red); color:var(--white); border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:.6rem }
.trust__card strong { display:block; font-size:.92rem; color:var(--dark); margin-bottom:.3rem; font-weight:700 }
.trust__card p { font-size:.83rem; color:var(--muted); line-height:1.6 }

/* ============================================
   GALLERY
   ============================================ */
.gallery-section { padding:4rem 0 }
.gallery-section__header { text-align:center; max-width:1100px; margin:0 auto 2rem; padding:0 1.5rem }
.gallery-section__header p { color:var(--muted); font-size:.95rem }
.mosaic { max-width:1200px; margin:0 auto; padding:0 1rem; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.6rem }
.mosaic__item { border-radius:var(--r); overflow:hidden }
.mosaic__item:nth-child(1) { grid-column:span 2; grid-row:span 2 }
.mosaic__item:nth-child(5) { grid-column:span 2 }
.mosaic__item img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.mosaic__item:hover img { transform:scale(1.03) }

/* ============================================
   REVIEWS
   ============================================ */
.reviews { padding:4rem 0; background:var(--bg) }
.reviews__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.reviews__header { text-align:center; margin-bottom:2rem }
.reviews__header h2 { margin-bottom:.5rem }
.reviews__score { font-size:.95rem; color:var(--muted); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; justify-content:center }
.reviews__score strong { color:var(--dark); font-size:1.1rem }
.reviews__stars-big { color:var(--gold); font-size:1.25rem; letter-spacing:2px }
.reviews__gmb-links { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }
.reviews__gmb-links .btn { font-size:.82rem; padding:.5rem 1rem }
.reviews__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.review { background:var(--white); border-radius:var(--r); padding:2rem; border:1px solid var(--line); box-shadow:var(--shadow-sm) }
.review__stars { color:var(--gold); font-size:1.1rem; letter-spacing:2px; margin-bottom:.75rem }
.review p { font-size:.9rem; color:var(--muted); line-height:1.7; font-style:italic; margin-bottom:1rem }
.review footer { font-size:.82rem; color:var(--light) }
.review footer strong { color:var(--text) }

/* ============================================
   CTA URGENCE
   ============================================ */
.cta { padding:4.5rem 0; background:var(--red); color:var(--white); text-align:center }
.cta__wrap { max-width:600px; margin:0 auto; padding:0 1.5rem }
.cta h2 { color:var(--white); margin-bottom:.5rem; font-size:2rem }
.cta p { color:rgba(255,255,255,.8); margin-bottom:1.25rem; font-size:.95rem }
.cta__phone { display:inline-block; font-size:2.75rem; font-weight:800; color:var(--white); letter-spacing:-.01em; transition:.15s; line-height:1.3; border-bottom:3px solid rgba(255,255,255,.3); padding-bottom:.15rem }
.cta__phone:hover { border-bottom-color:var(--white) }
.cta__phone:focus-visible { outline:3px solid var(--white); outline-offset:4px; border-radius:4px }
.cta__sub { display:block; margin-top:.75rem; font-size:.87rem; color:rgba(255,255,255,.9); font-weight:500 }

/* ============================================
   ZONES
   ============================================ */
.zones { padding:3.5rem 0 }
.zones__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.zones__wrap > h2 { text-align:center; margin-bottom:.5rem }
.zones__wrap > p { text-align:center; color:var(--muted); font-size:.92rem; margin-bottom:2rem }
.zones__list { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center }
.zone { padding:.55rem 1.1rem; background:var(--white); border:1.5px solid var(--line); border-radius:100px; font-size:.85rem; font-weight:500; transition:.15s; min-height:40px; display:inline-flex; align-items:center; gap:.35rem }
.zone:hover { border-color:var(--dark); color:var(--dark) }
.zone:focus-visible { outline:2px solid var(--dark); outline-offset:2px }
.zone--hl { background:var(--red); color:var(--white); border-color:var(--red); font-weight:600 }
.zone--hl:hover { background:var(--red-dark); border-color:var(--red-dark) }
.zone small { font-size:.72rem; color:var(--muted) }
.zone--hl small { color:rgba(255,255,255,.9) }

/* ============================================
   CONTACT
   ============================================ */
.contact { padding:4rem 0; background:var(--bg) }
.contact__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:start }
.contact__left h2 { margin-bottom:.25rem }
.contact__left > p { color:var(--muted); font-size:.92rem; margin-bottom:1.5rem }

.form__group { margin-bottom:.75rem }
.form__group label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.3rem }
.form input, .form select, .form textarea { width:100%; padding:.75rem .9rem; border:1.5px solid var(--line); border-radius:var(--r); font-family:var(--font); font-size:.9rem; color:var(--text); background:var(--white); transition:border-color .15s; min-height:44px }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--dark); box-shadow:0 0 0 3px rgba(26,26,26,.1) }
.form textarea { resize:vertical }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.form .btn { margin-top:.5rem }

.contact__right { display:flex; flex-direction:column; gap:1rem }
.contact__card { padding:1.5rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white) }
.contact__card strong { display:block; font-size:.88rem; color:var(--dark); margin-bottom:.4rem; font-weight:700 }
.contact__card p { font-size:.85rem; color:var(--muted); line-height:1.6 }
.contact__tel { display:block; font-size:1.6rem; font-weight:800; color:var(--green); margin-bottom:.35rem; letter-spacing:-.01em }
.contact__tel:focus-visible { outline:2px solid var(--dark); outline-offset:2px; border-radius:2px }
.contact__map-link { display:inline-block; margin-top:.5rem; font-size:.82rem; color:var(--green); font-weight:600 }
.contact__map-link:hover { color:var(--green-dark) }

/* ============================================
   FOOTER
   ============================================ */
.footer { background:var(--dark); color:rgba(255,255,255,.75); padding:3.5rem 0 0 }
.footer__grid { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem }
.footer__logo { height:60px; width:auto; margin-bottom:.5rem; border-radius:8px }
.footer__desc { font-size:.82rem; line-height:1.7; color:rgba(255,255,255,.85) }
.footer__heading { color:rgba(255,255,255,.9); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.75rem }
.footer__col ul { display:flex; flex-direction:column; gap:.4rem }
.footer__col a { font-size:.84rem; transition:color .15s }
.footer__col a:hover { color:var(--white) }
.footer__col a:focus-visible { outline:1px solid rgba(255,255,255,.5); outline-offset:2px; border-radius:2px }
.footer__col address { font-size:.82rem; line-height:1.7; font-style:normal }
.footer__col address strong { color:rgba(255,255,255,.8); font-weight:600 }
.footer__phone { display:block; color:#4ade80; font-weight:700; font-size:1.05rem; margin-bottom:.25rem }
.footer__phone:focus-visible { outline:1px solid var(--green); outline-offset:2px; border-radius:2px }
.footer__bottom { max-width:1100px; margin:0 auto; padding:1.25rem 1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; font-size:.75rem }
.footer__legal { display:flex; gap:1.5rem }
.footer__legal a { color:rgba(255,255,255,.75) }
.footer__legal a:hover { color:rgba(255,255,255,1) }

/* ============================================
   CITY SERVICES GRID (pages villes)
   ============================================ */
.city-services { padding:4rem 0; background:var(--bg) }
.city-services__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.city-services__header { text-align:center; margin-bottom:2.5rem }
.city-services__header h2 { margin-bottom:.5rem }
.city-services__header p { color:var(--muted); font-size:.93rem; max-width:600px; margin:0 auto }
.city-services__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.city-svc { display:block; background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:box-shadow .2s, transform .2s; text-decoration:none; color:inherit }
.city-svc:hover { box-shadow:var(--shadow); transform:translateY(-2px) }
.city-svc__img { overflow:hidden; height:200px }
.city-svc__img img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.city-svc:hover .city-svc__img img { transform:scale(1.04) }
.city-svc__body { padding:1.5rem }
.city-svc__body h3 { font-size:1.15rem; margin-bottom:.4rem; color:var(--dark) }
.city-svc__body p { font-size:.85rem; color:var(--muted); line-height:1.65; margin-bottom:.75rem }
.city-svc__link { font-size:.82rem; color:var(--red); font-weight:600; transition:color .15s }
.city-svc:hover .city-svc__link { color:var(--red-dark) }

/* ============================================
   AUTRES SERVICES (cross-linking)
   ============================================ */
.autres-services { padding:3.5rem 0; background:var(--bg) }
.autres-services__wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem }
.autres-services__wrap h2 { text-align:center; margin-bottom:1.5rem }
.autres-services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.autres-services__card { display:block; background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:box-shadow .2s, transform .2s; text-decoration:none; color:inherit }
.autres-services__card:hover { box-shadow:var(--shadow); transform:translateY(-2px) }
.autres-services__card img { width:100%; height:160px; object-fit:cover; transition:transform .3s }
.autres-services__card:hover img { transform:scale(1.03) }
.autres-services__body { padding:1.15rem }
.autres-services__body strong { display:block; font-size:.95rem; color:var(--dark); margin-bottom:.2rem; font-weight:700 }
.autres-services__body span { font-size:.8rem; color:var(--muted); line-height:1.5 }

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal { padding:4rem 0 }
.legal__wrap { max-width:780px; margin:0 auto; padding:0 1.5rem }
.legal__wrap h1 { font-size:2rem; margin-bottom:.5rem }
.legal__intro { color:var(--muted); font-size:.88rem; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--line) }
.legal__wrap h2 { font-size:1.15rem; margin-top:2rem; margin-bottom:.5rem; color:var(--dark) }
.legal__wrap p { font-size:.9rem; color:var(--text); line-height:1.8; margin-bottom:.75rem }
.legal__wrap ul { padding-left:1.25rem; margin-bottom:1rem }
.legal__wrap li { font-size:.9rem; color:var(--text); line-height:1.8; margin-bottom:.25rem; list-style:disc }
.legal__wrap a { color:var(--green); font-weight:500 }
.legal__wrap a:hover { color:var(--green-dark) }

/* ============================================
   SUCCESS PAGE
   ============================================ */
.success { padding:6rem 0; text-align:center }
.success__wrap { max-width:500px; margin:0 auto; padding:0 1.5rem }
.success__icon { color:var(--green); margin-bottom:1.5rem }
.success h1 { font-size:1.75rem; margin-bottom:.75rem }
.success p { font-size:.93rem; color:var(--muted); line-height:1.7; margin-bottom:.5rem }
.success__urgent { font-weight:600; color:var(--text); margin-top:1.5rem }
.success__phone { display:block; font-size:2rem; font-weight:800; color:var(--green); margin:.5rem 0; letter-spacing:-.01em }
.success__phone:hover { color:var(--green-dark) }
.success__sub { font-size:.85rem; color:var(--muted) }

/* Honeypot — invisible to users, visible to bots */
.form__hp { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden }

/* Form errors */
.form__errors { background:#fef2f2; border:1px solid #fca5a5; border-radius:var(--r); padding:.75rem 1rem; margin-bottom:1rem; font-size:.85rem; color:#991b1b }
.form__errors li { margin-bottom:.15rem }

/* City hero variant */
.hero--city { min-height:480px }

/* Compact mosaic for city pages */
.mosaic--compact { max-width:1100px; grid-template-columns:repeat(3,1fr); grid-auto-rows:180px }
.mosaic--compact .mosaic__item:nth-child(1) { grid-column:span 1; grid-row:span 1 }
.mosaic--compact .mosaic__item:nth-child(5) { grid-column:span 1 }

/* ============================================
   FAB (Floating Action Button)
   ============================================ */
.fab { position:fixed; bottom:1.25rem; right:1.25rem; z-index:999; width:56px; height:56px; background:var(--green); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(21,128,61,.4); transition:.2s }
.fab:hover { background:var(--green-dark); transform:scale(1.06) }
.fab:focus-visible { outline:3px solid var(--dark); outline-offset:3px }

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px) {
    .trust__grid { grid-template-columns:1fr 1fr }
    .reviews__grid { grid-template-columns:1fr }
    .footer__grid { grid-template-columns:1fr 1fr }
}

@media(max-width:768px) {
    /* Scroll offset adapté mobile (topbar ~36px + nav 60px) */
    html { scroll-padding-top:100px }

    /* Topbar */
    .topbar__left span:not(:first-child) { display:none }
    .topbar__wrap { justify-content:space-between; padding:.35rem 1rem }

    /* Nav */
    .nav__wrap { height:60px; padding:0 1rem }
    .nav__logo { height:48px }
    .nav__links { display:none }
    .nav__cta { display:none }
    .nav__burger { display:flex }
    .nav__links.active { display:flex; flex-direction:column; position:absolute; top:60px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--line); padding:1rem 1.25rem; gap:0; box-shadow:var(--shadow); z-index:100 }
    .nav__links.active > a { padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.95rem }
    .nav__links.active > a:last-child { border:none }
    /* Dropdown mobile */
    .nav__dropdown { border-bottom:1px solid var(--line) }
    .nav__dropdown-toggle { width:100%; justify-content:space-between; padding:.85rem 0; font-size:.95rem }
    .nav__dropdown-menu { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:0 0 .5rem .75rem; min-width:auto; display:none }
    .nav__dropdown-menu::before { display:none }
    .nav__dropdown.open .nav__dropdown-menu { display:block }
    .nav__dropdown-menu a { padding:.55rem .5rem }
    .nav__dropdown-menu a strong { font-size:.88rem }
    .nav__dropdown-menu a span { font-size:.74rem }

    /* Hero */
    .hero { min-height:420px }
    .hero__overlay { background:linear-gradient(to bottom, rgba(10,10,10,.82) 0%, rgba(10,10,10,.5) 100%) }
    .hero__body { padding:2.5rem 1.25rem }
    .hero__eyebrow { font-size:.72rem; padding:.35rem .75rem; margin-bottom:1rem }
    .hero__h1 { font-size:1.85rem; max-width:100% }
    .hero__sub { font-size:.88rem; margin-bottom:1.5rem; max-width:100% }
    .hero__actions { flex-direction:column; align-items:stretch; gap:.6rem }
    .hero__actions .btn { text-align:center; padding:.7rem 1.25rem; font-size:.88rem }
    .hero__trust { margin-top:1.25rem; gap:.45rem }
    .hero__badge { font-size:.7rem; padding:.3rem .65rem }
    .hero__badge:last-child { display:none }

    /* Partners */
    .partners { padding:1rem 0 }
    .partners__wrap { gap:1.25rem; padding:0 1rem }
    .partners__wrap img { height:28px }

    /* Stats */
    .stats { padding:1rem 0 }
    .stats__wrap { grid-template-columns:1fr 1fr; gap:.5rem; padding:0 1rem }
    .stats__item { padding:.4rem 0 }
    .stats__item strong { font-size:1.15rem }
    .stats__item span { font-size:.72rem }

    /* Ticker */
    .ticker { padding:.6rem 0 }
    .ticker__text { font-size:.78rem }
    .ticker__author { font-size:.74rem }

    /* Service blocks */
    .block { padding:2.5rem 0 }
    .block__wrap { grid-template-columns:1fr; gap:1.5rem; padding:0 1.25rem }
    .block--reverse .block__img, .block--reverse .block__text { order:unset }
    .block__text { padding:1.5rem }
    .block__text h2 { font-size:1.5rem }
    .block__text > p { font-size:.88rem }

    /* Photobreak */
    .photobreak { height:28vh; min-height:180px; max-height:300px }

    /* Duo */
    .duo { padding:2.5rem 0 }
    .duo__wrap { grid-template-columns:1fr; padding:0 1.25rem; gap:1.25rem }
    .duo__img { height:200px }
    .duo__body { padding:1.25rem }
    .duo__body h3 { font-size:1.1rem }
    .duo__body > p { font-size:.85rem }

    /* Entreprise */
    .entreprise { padding:2.5rem 0 }
    .entreprise__wrap { grid-template-columns:1fr; gap:1.5rem; padding:0 1.25rem }
    .entreprise__content h2 { font-size:1.5rem }
    .entreprise__content > p { font-size:.88rem }
    .entreprise__highlights { grid-template-columns:1fr; gap:.75rem }
    .entreprise__hl { padding:1rem }

    /* Trust */
    .trust { padding:2.5rem 0 }
    .trust__wrap { padding:0 1.25rem }
    .trust__grid { grid-template-columns:1fr; gap:.75rem }
    .trust__card { padding:1.25rem; display:flex; align-items:flex-start; gap:.75rem }
    .trust__icon { margin-bottom:0; flex-shrink:0 }
    .trust__card strong { font-size:.88rem }

    /* Gallery */
    .gallery-section { padding:2.5rem 0 }
    .gallery-section__header { padding:0 1.25rem }
    .mosaic { grid-template-columns:1fr 1fr; grid-auto-rows:150px; gap:.5rem; padding:0 .75rem }
    .mosaic__item:nth-child(1) { grid-column:span 2 }
    .mosaic__item:nth-child(5) { grid-column:span 1 }

    /* Reviews */
    .reviews { padding:2.5rem 0 }
    .reviews__wrap { padding:0 1.25rem }
    .reviews__header h2 { font-size:1.5rem }
    .reviews__score { font-size:.88rem; flex-wrap:wrap }
    .reviews__gmb-links { flex-direction:column; align-items:stretch }
    .reviews__gmb-links .btn { justify-content:center; font-size:.8rem }
    .reviews__grid { grid-template-columns:1fr; gap:1rem }
    .review { padding:1.5rem }
    .review p { font-size:.85rem }

    /* CTA urgence */
    .cta { padding:3rem 0 }
    .cta__wrap { padding:0 1.25rem }
    .cta h2 { font-size:1.5rem }
    .cta p { font-size:.88rem }
    .cta__phone { font-size:1.85rem }

    /* Autres services cross-links */
    .autres-services { padding:2.5rem 0 }
    .autres-services__grid { grid-template-columns:1fr; gap:1rem }
    .autres-services__card { display:flex; align-items:center }
    .autres-services__card img { width:120px; height:90px; flex-shrink:0 }
    .autres-services__body { padding:.75rem 1rem }

    /* City services grid */
    .city-services { padding:2.5rem 0 }
    .city-services__wrap { padding:0 1.25rem }
    .city-services__grid { grid-template-columns:1fr; gap:1rem }
    .city-svc__img { height:180px }
    .city-svc__body { padding:1.25rem }
    .city-svc__body h3 { font-size:1.05rem }
    .city-svc__body p { font-size:.82rem }
    .hero--city { min-height:380px }

    /* Compact mosaic */
    .mosaic--compact { grid-template-columns:1fr 1fr; grid-auto-rows:140px }

    /* Zones */
    .zones { padding:2.5rem 0 }
    .zones__wrap { padding:0 1.25rem }
    .zones__wrap > h2 { font-size:1.5rem }
    .zones__wrap > p { font-size:.85rem }
    .zones__list { gap:.45rem }
    .zone { padding:.45rem .85rem; font-size:.8rem; min-height:38px }
    .zone small { font-size:.68rem }

    /* Contact */
    .contact { padding:2.5rem 0 }
    .contact__wrap { grid-template-columns:1fr; gap:1.5rem; padding:0 1.25rem }
    .contact__left h2 { font-size:1.5rem }
    .form__row { grid-template-columns:1fr }
    .form input, .form select, .form textarea { padding:.65rem .8rem; font-size:.88rem }
    .contact__card { padding:1.25rem }
    .contact__tel { font-size:1.35rem }

    /* Footer */
    .footer { padding:2.5rem 0 0 }
    .footer__grid { grid-template-columns:1fr; gap:1.5rem; padding:0 1.25rem; padding-bottom:2rem }
    .footer__logo { height:50px }
    .footer__desc { font-size:.8rem }
    .footer__col h4 { font-size:.72rem; margin-bottom:.5rem }
    .footer__col a { font-size:.82rem }
    .footer__col address { font-size:.8rem }
    .footer__phone { font-size:1rem }
    .footer__bottom { flex-direction:column; gap:.5rem; text-align:center; padding:1rem 1.25rem; font-size:.72rem }
    .footer__legal { gap:1rem; justify-content:center }

    /* Global heading override */
    h2 { font-size:1.5rem }
    h3 { font-size:1.1rem }

    /* FAB repositionné plus bas pour ne pas gêner scroll */
    .fab { bottom:1rem; right:1rem; width:52px; height:52px }
}

@media(max-width:480px) {
    /* Hero */
    .hero { min-height:380px }
    .hero__h1 { font-size:1.55rem }
    .hero__sub { font-size:.84rem }
    .hero__badge { font-size:.66rem; padding:.25rem .55rem }

    /* Stats en 2x2 bien serré */
    .stats__wrap { gap:.35rem }
    .stats__item strong { font-size:1.05rem }
    .stats__item span { font-size:.68rem }

    /* Partners encore plus petits */
    .partners__wrap { gap:1rem }
    .partners__wrap img { height:22px }

    /* Gallery en 2 cols plus petites */
    .mosaic { grid-auto-rows:120px; gap:.4rem }
    .mosaic__item:nth-child(1) { grid-row:span 1; grid-column:span 2 }

    /* CTA urgence */
    .cta { padding:2.5rem 0 }
    .cta h2 { font-size:1.3rem }
    .cta__phone { font-size:1.6rem }
    .cta__sub { font-size:.8rem }

    /* Duo images encore plus compactes */
    .duo__img { height:180px }

    /* Photobreak */
    .photobreak { height:22vh; min-height:150px; max-height:220px }

    /* Zones pills */
    .zone { padding:.4rem .7rem; font-size:.75rem }

    /* Boutons */
    .btn--big { padding:.7rem 1.25rem; font-size:.88rem }
}

/* ===== PAGE 404 ===== */
.error-page { padding:5rem 1.5rem; text-align:center; min-height:60vh; display:flex; align-items:center; justify-content:center }
.error-page__wrap { max-width:540px }
.error-page h1 { font-size:2rem; font-weight:800; margin-bottom:.75rem; color:var(--dark) }
.error-page > .error-page__wrap > p { font-size:1.1rem; color:var(--muted); margin-bottom:2rem }
.error-page__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem }
.error-page__links { text-align:left; background:var(--light); border-radius:var(--radius); padding:1.5rem 2rem }
.error-page__links p { font-weight:600; margin-bottom:.75rem; color:var(--dark) }
.error-page__links ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem }
.error-page__links a { color:var(--green); text-decoration:none; font-weight:500 }
.error-page__links a:hover { text-decoration:underline }