/* VERSION 53 : listes à coches alignées (texte sur plusieurs lignes) */
/* =====================================================
   CEDIEY — Feuille de style v3 (remplace style-v2.css)
   Palette : bordeaux, blanc, anthracite, vert WhatsApp
===================================================== */
:root {
    --red: #8B1A1A;
    --red-dark: #6B1212;
    --ink: #1D2026;
    --warm: #1a120d;
    --muted: #555A63;
    --line: #E4E6EA;
    --green: #0F7B46;
    --green-dark: #0B5F36;
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: #ffffff;
}

img { max-width: 100%; display: block; }
a { color: var(--red); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }

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

.container { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 clamp(24px, 5.5vw, 110px); }

.skip-link {
    position: absolute; left: -9999px; top: 8px;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200;
}
.skip-link:focus { left: 8px; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 30px;
    border: 2px solid transparent; border-radius: 999px;
    font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
    text-decoration: none; cursor: pointer; text-align: center;
    transition: background-color .2s, color .2s, border-color .2s;
}
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-outline { background: #fff; border-color: var(--red); color: var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; }
.btn-dark-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-dark-outline:hover { background: var(--ink); color: #fff; }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-white { background: #fff; border-color: #fff; color: var(--ink); }
.btn-white:hover { background: #f0f0f0; border-color: #f0f0f0; color: var(--ink); }
.btn-ghost-white { background: transparent; border-color: #fff; color: #fff; }
.btn-ghost-white:hover { background: #fff; color: var(--ink); }
.btn svg { flex-shrink: 0; }

/* ---------- En-tête ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff; border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.logo img { height: 46px; width: auto; }

.main-nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    display: inline-block; padding: 6px 0;
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--red); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 999px;
    background: var(--green); color: #fff;
}
.icon-btn:hover { background: var(--green-dark); color: #fff; }
.phone-btn {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 22px; border-radius: 999px;
    background: var(--red); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 15px; white-space: nowrap;
}
.phone-btn:hover { background: var(--red-dark); color: #fff; }

.burger {
    display: none; width: 46px; height: 46px; padding: 0;
    align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
    color: var(--ink); cursor: pointer;
}

/* ---------- Haut de page (hero) ---------- */
/* Photo de fond : déposez votre image dans images/fond-accueil.jpg (l'image de secours est celle qui suit) */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center;
    min-height: clamp(540px, calc(100vh - 170px), 860px);
    padding: 48px 0;
    background: var(--warm); color: #fff;
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../images/fond-accueil.jpg?v=3") 60% 50% / cover no-repeat;
    filter: grayscale(1) contrast(1.05);
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(24,17,12,.88) 0%, rgba(24,17,12,.74) 42%, rgba(24,17,12,.15) 72%, rgba(24,17,12,0) 100%);
}
.hero .container { position: relative; }
.hero-text { max-width: 860px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-kicker { font-weight: 700; font-size: 17px; color: #fff; }
.hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
.hero-lead { font-size: clamp(19px, 1.2vw, 22px); line-height: 1.6; color: #F1ECE7; max-width: 620px; }

.decennale-tag {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 0; border-radius: 16px; padding: 14px 22px;
}
.decennale-tag svg { flex-shrink: 0; }
.decennale-tag strong { display: block; font-weight: 800; font-size: 18px; letter-spacing: .04em; color: var(--red); line-height: 1.2; }
.decennale-tag span { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }
.tag-more { font-style: normal; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-wa { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #8FE3B0; text-decoration: none; }
.hero-wa:hover { text-decoration: underline; }

/* ---------- Bande de réassurance ---------- */
.band { background: #fff; color: var(--red); border-bottom: 4px solid var(--red); }
.band ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px;
    list-style: none; margin: 0 auto; padding: 22px 24px; max-width: 1760px;
    font-weight: 700; font-size: 16px;
}
.band li::before { content: "\2713"; margin-right: 10px; font-weight: 800; color: var(--red); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 6.5vw, 120px) 0; }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 44px; }
.section-head h2, .page-title h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
.section-head p { font-size: 18px; color: var(--muted); }
.section-head.center { text-align: center; align-items: center; }

/* Services */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.service { display: flex; flex-direction: column; gap: 12px; }
.service img { width: 100%; height: 220px; object-fit: cover; border-radius: 20px; margin-bottom: 8px; }
.service h3 { font-size: 25px; font-weight: 800; padding-top: 16px; border-top: 2px solid var(--red); }
.service p { color: var(--muted); }

/* Nos derniers chantiers : photos qui défilent à gauche, texte à droite */
.showcase { padding: clamp(28px, 3vw, 52px) 0 clamp(36px, 3.6vw, 64px); }
.showcase-grid { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); align-items: start; }
/* La hauteur du cadre suit le format de chaque photo (calculée par js/app.js). Photo horizontale : elle remplit tout le cadre. Photo verticale : elle reste entière, avec un fond uni sur les côtés. */
.showcase-frame {
    grid-column: 1; position: relative; overflow: hidden; border-radius: 0;
    height: clamp(360px, 44vw, 780px); background: var(--warm);
    transition: height .6s ease;
}
.showcase-frame .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease-in-out; }
.showcase-frame .slide.portrait { object-fit: contain; }
.showcase-frame .slide.active { opacity: 1; }
.showcase-frame .carousel-dots { z-index: 2; bottom: 16px; }
.car-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.car-btn:hover { background: #fff; }
.car-btn.prev { left: 14px; }
.car-btn.next { right: 14px; }
.showcase-copy {
    grid-column: 2; display: flex; flex-direction: column; gap: 20px; max-width: 800px;
    padding: 0 calc(clamp(24px, 5.5vw, 110px) + max(0px, (100vw - 1760px) / 2)) 0 clamp(32px, 4vw, 72px);
}
.showcase-copy .kicker { font-weight: 700; font-size: 16px; color: var(--red); }
.showcase-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.showcase-copy > p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.metiers { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.metiers li { padding: 16px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.metiers li:last-child { border-bottom: 1px solid var(--line); }
.metiers strong { font-size: 19px; font-weight: 800; }
.metiers span { color: var(--muted); font-size: 16px; line-height: 1.6; }
.showcase-copy .btn { align-self: flex-start; margin-top: 6px; }

/* Garantie décennale : le grand chiffre */
.section-decennale { background: #fff; border-top: 4px solid var(--red); border-bottom: 4px solid var(--red); padding: clamp(32px, 3.4vw, 56px) 0; margin-bottom: clamp(40px, 5vw, 88px); }
.decennale-grid { display: grid; grid-template-columns: minmax(300px, 520px) minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 64px); align-items: center; }
.decennale-big { display: flex; align-items: flex-end; gap: 22px; }
.decennale-big .ten { font-weight: 800; font-size: clamp(140px, 14vw, 250px); line-height: .8; letter-spacing: -0.05em; color: var(--red); }
.decennale-big .side { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.decennale-big .side b { font-weight: 800; font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; }
.decennale-big .side span { font-weight: 700; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.2; color: var(--red); }
.decennale-body { display: flex; flex-direction: column; gap: 14px; }
.decennale-body h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; }
.decennale-body > p { color: var(--muted); font-size: 18px; }
.checklist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.checklist li { display: flex; gap: 10px; }
.checklist li::before { content: "\2713"; flex-shrink: 0; font-weight: 800; color: var(--red); }
/* Sceau rond (utilisé sur la page devis) */
.seal {
    width: 200px; height: 200px; border-radius: 999px; background: #fff;
    border: 6px solid var(--red); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px var(--red);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center; color: var(--red); font-weight: 800; font-size: 21px; line-height: 1.05; letter-spacing: .04em;
}

/* À propos + carrousel */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.carousel { grid-column: span 5; position: relative; height: 460px; border-radius: 28px; overflow: hidden; background: var(--ink); }
.carousel .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease-in-out; }
.carousel .slide.active { opacity: 1; }
.carousel-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; }
.carousel-dots button {
    width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .7); cursor: pointer; transition: width .3s, background-color .3s;
}
.carousel-dots button.active { width: 28px; background: var(--red); }
.about-text { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 18px; }
.about-text .kicker { font-weight: 700; color: var(--red); font-size: 16px; }
.about-text h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.about-text p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.about-text .punch { color: var(--red); font-weight: 800; font-size: 20px; }

/* À propos : photo de fond images/fond-apropos.jpg, texte à gauche sous un voile sombre */
.about-band {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    display: flex; align-items: center;
    min-height: clamp(560px, 62vh, 760px); padding: 72px 0;
    background: #1a120d;
}
.about-band::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../images/fond-apropos.jpg?v=2") 50% 78% / cover no-repeat;
    filter: grayscale(1) contrast(1.05);
}
.about-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(24,17,12,.88) 0%, rgba(24,17,12,.74) 42%, rgba(24,17,12,.15) 72%, rgba(24,17,12,0) 100%);
}
.about-band .container { position: relative; }
.about-copy { max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.about-copy .kicker { font-weight: 700; font-size: 16px; color: #F3C9A8; }
.about-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.about-copy p { font-size: 18px; line-height: 1.65; color: #F1ECE7; }
.about-copy .punch { font-weight: 800; font-size: 20px; color: #fff; }
.about-copy .btn { align-self: flex-start; margin-top: 4px; }

/* Avis (à afficher quand la fiche Google existe : retirer l'attribut "hidden" dans index.html) */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; }
.rating { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-weight: 700; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { fill: #E8A317; }
.review-card { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: #fff; }
.review-card p { color: var(--muted); }
.review-card strong { display: block; }
.review-card small { color: var(--muted); font-size: 14px; }

/* Zones d'intervention (photo de fond sous voile blanc) */
.zones { position: relative; background: #fff; padding: clamp(64px, 6vw, 110px) 0; }
.zones .container { position: relative; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; }
.chips li { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #DDE0E5; font-weight: 600; font-size: 15px; }

/* Appel à l'action final : même photo que le haut de page (images/fond-accueil.jpg) sous le voile brun */
.cta {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    display: flex; align-items: center; min-height: clamp(380px, 32vw, 520px); padding: 72px 0;
    background: var(--warm);
}
.cta::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../images/fond-accueil.jpg?v=3") 60% 50% / cover no-repeat;
    filter: grayscale(1) contrast(1.05);
}
.cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at center, rgba(24,17,12,.86) 0%, rgba(24,17,12,.74) 55%, rgba(24,17,12,.55) 100%);
}
.cta .container { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
.cta h2.one-line { font-size: clamp(1.5rem, 6vw, 4.75rem); letter-spacing: -0.04em; line-height: 1.02; white-space: nowrap; }
.cta p { color: #F1ECE7; font-size: 20px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.cta a.textlink { color: #E3E5E9; font-weight: 600; font-size: 15px; }
/* Position du texte : ajoutez la classe cta-right (à droite) ou cta-left (à gauche) à la section ; sans classe = centré */
.cta-right::before { background: linear-gradient(270deg, rgba(24,17,12,.88) 0%, rgba(24,17,12,.74) 42%, rgba(24,17,12,.15) 72%, rgba(24,17,12,0) 100%); }
.cta-right .container { align-items: flex-end; text-align: right; }
.cta-right .cta-actions { justify-content: flex-end; }
.cta-left::before { background: linear-gradient(90deg, rgba(24,17,12,.88) 0%, rgba(24,17,12,.74) 42%, rgba(24,17,12,.15) 72%, rgba(24,17,12,0) 100%); }
.cta-left .container { align-items: flex-start; text-align: left; }
.cta-left .cta-actions { justify-content: flex-start; }

/* Pied de page clair, avec la barre bordeaux */
.site-footer { background: #fff; color: var(--muted); border-top: 0; padding: 32px 0 14px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 32px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 10px; }
.footer-brand p { max-width: 340px; line-height: 1.5; }
.footer-rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 700; color: var(--ink) !important; }
.footer-rating .stars { gap: 2px; }
.site-footer h3 { color: var(--ink); font-size: 15px; margin-bottom: 8px; letter-spacing: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--red); text-decoration: underline; }
.footer-bottom { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 36px; font-size: 13px; }

/* WhatsApp flottant + barre mobile */
.wa-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
    border-radius: 999px; background: var(--green); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.wa-float:hover { background: var(--green-dark); color: #fff; }
.mobile-bar {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--line); padding: 10px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
    border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; border: 2px solid var(--red);
}
.mobile-bar .m-call { background: var(--red); color: #fff; }
.mobile-bar .m-wa { background: var(--green); border-color: var(--green); color: #fff; }
.mobile-bar .m-devis { background: #fff; color: var(--red); }

/* ---------- Pages Devis / Espace pros ---------- */
.page-title { display: flex; flex-direction: column; gap: 14px; padding: 56px 0 8px; }
.page-title p { font-size: 18px; color: var(--muted); }
.page-title .kicker { font-weight: 700; color: var(--red); font-size: 16px; }

.devis-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; padding: 32px 0 88px; }
.form-card { grid-column: span 7; border: 1px solid var(--line); border-radius: 28px; padding: 40px; }
.side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; }
.side-card { border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.side-card.strong { border: 2px solid var(--red); flex-direction: row; align-items: center; gap: 18px; }
.side-card h3 { font-size: 18px; font-weight: 800; letter-spacing: 0; }
.side-card p, .side-card li { font-size: 15px; color: var(--muted); }
.side-card .mini-seal { width: 96px; height: 96px; font-size: 12px; border-width: 4px; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--red); flex-shrink: 0; gap: 2px; }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: s; }
.steps-list li { display: flex; gap: 14px; align-items: flex-start; counter-increment: s; color: var(--ink); font-size: 15px; }
.steps-list li::before {
    content: counter(s); flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
    background: var(--red); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stepper div { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--muted); }
.stepper b {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: 1.5px solid #C9CDD4; background: #fff; color: var(--muted);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.stepper .on { color: var(--ink); }
.lbl-short { display: none; }
.stepper .on b { background: var(--red); border-color: var(--red); color: #fff; }
.progress { height: 6px; border-radius: 999px; background: #EDEEF1; overflow: hidden; margin-bottom: 28px; }
.progress span { display: block; height: 100%; width: 33%; background: var(--red); border-radius: 999px; transition: width .3s ease; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field > label, .field > .label { font-weight: 700; font-size: 15px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"],
.field textarea, .field select {
    width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; color: var(--ink);
    background: #fff; border: 1px solid #C9CDD4; border-radius: 12px;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); outline: 2px solid var(--red); outline-offset: 0; }
.field input[type="file"] { width: 100%; padding: 16px; border: 1.5px dashed #C9CDD4; border-radius: 12px; font: inherit; font-size: 15px; color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); }

.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 2px solid #DDE0E5; border-radius: 16px; background: #fff; }
.opt-body strong { font-size: 16px; }
.opt-body small { font-size: 14px; color: var(--muted); }
.opt.pill .opt-body { padding: 12px 20px; border-radius: 999px; }
.opt input:checked + .opt-body { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.opt input:focus-visible + .opt-body { outline: 3px solid var(--red); outline-offset: 2px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--red); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.form-actions .push { margin-left: auto; }
.form-status { margin-top: 20px; padding: 16px 18px; border-radius: 14px; font-weight: 600; }
.form-status.ok { background: #E8F5EE; color: #0B5F36; }
.form-status.err { background: #FBEAEA; color: #7A1616; }

.js .step { display: none; }
.js .step.active { display: block; }

/* Page Espace pros */
.pro-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 64px 0; }
.pro-hero-text { grid-column: span 7; display: flex; flex-direction: column; gap: 24px; }
.pro-hero-text h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.07; }
.pro-hero-text p { font-size: 19px; color: var(--muted); max-width: 620px; }
.docs-card { grid-column: 9 / span 4; border: 2px solid var(--red); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.docs-card h2 { font-size: 20px; font-weight: 800; letter-spacing: 0; }
.docs-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-weight: 600; }
.docs-card li { display: flex; gap: 12px; }
.docs-card li::before { content: "\2713"; flex-shrink: 0; font-weight: 800; color: var(--red); }
.process { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { display: flex; flex-direction: column; gap: 12px; }
.process-step b { width: 44px; height: 44px; border-radius: 999px; background: var(--red); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.process-step h3 { font-size: 22px; font-weight: 800; }
.process-step p { color: var(--muted); }
.form-wide { max-width: 860px; margin: 0 auto; border: 1px solid var(--line); border-radius: 28px; padding: 44px; }
.form-wide h2 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; }
.form-wide .lead { color: var(--muted); margin-bottom: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

/* Texte simple (mentions légales) */
.prose { max-width: 800px; padding: 56px 0 96px; }
.prose h1 { font-size: 2.2rem; margin-bottom: 24px; }
.prose h2 { font-size: 1.3rem; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 20px; }

/* ---------- Grands écrans ---------- */
@media (min-width: 1600px) {
    body { font-size: 18px; }
    .header-inner { min-height: 96px; }
    .logo img { height: 54px; }
    .main-nav ul { gap: 40px; }
    .main-nav a { font-size: 17px; }
    .phone-btn { font-size: 17px; min-height: 52px; }
    .icon-btn { width: 52px; height: 52px; }
    .btn { min-height: 62px; font-size: 18px; padding: 0 36px; }
    .section-head h2, .page-title h1 { font-size: 3rem; }
    .section-head p, .about-text p, .decennale-body > p { font-size: 20px; }
    .service h3 { font-size: 28px; }
    .service img { height: 280px; }
    .carousel { height: 560px; }
    .seal { width: 230px; height: 230px; font-size: 24px; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
    .hero::before { background: linear-gradient(90deg, rgba(24,17,12,.9) 0%, rgba(24,17,12,.8) 60%, rgba(24,17,12,.55) 100%); }
}

@media (max-width: 1024px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-frame, .showcase-copy { grid-column: 1; }
    .showcase-frame { margin-bottom: 0; height: clamp(260px, 60vw, 520px); border-radius: 0; }
    .showcase-copy { order: -1; max-width: none; padding: 0 24px; margin-bottom: 28px; }
    .decennale-grid { grid-template-columns: 1fr; row-gap: 28px; }
    .decennale-grid .btn { justify-self: start; }
    .grid-3 { gap: 24px; }
    .seal { width: 170px; height: 170px; font-size: 18px; }
    .carousel { grid-column: 1 / -1; height: 380px; margin-bottom: 32px; }
    .about-text { grid-column: 1 / -1; }
    .form-card { grid-column: 1 / -1; }
    .side { grid-column: 1 / -1; margin-top: 28px; }
    .pro-hero-text, .docs-card { grid-column: 1 / -1; }
    .docs-card { margin-top: 32px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 960px) {
    .burger { display: inline-flex; }
    .main-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 4px; }
    .main-nav a { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
    .phone-btn span { display: none; }
    .phone-btn { padding: 0 14px; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }
    .header-inner { min-height: 68px; }
    .logo img { height: 38px; }
    .phone-btn { display: none; }
    .wa-float { display: none; }

    .hero { min-height: 0; padding: 40px 0 44px; }
    .hero::before { background: linear-gradient(180deg, rgba(24,17,12,.86) 0%, rgba(24,17,12,.78) 100%); }
    .hero-lead { font-size: 17px; }
    .hero-actions { width: 100%; flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .decennale-tag { padding: 12px 16px; gap: 12px; }
    .decennale-tag strong { font-size: 16px; }
    .decennale-tag span { font-size: 13px; }
    .tag-more { display: none; }

    .band ul { flex-direction: column; gap: 10px; padding: 20px; }
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 28px; }
    .grid-3 { grid-template-columns: 1fr; gap: 36px; }
    .service img { height: 200px; }

    .checklist { text-align: left; }
    .carousel { height: 300px; }
    .car-btn { width: 40px; height: 40px; }
    .section-decennale { padding: 32px 0; margin-bottom: 32px; }
    .decennale-big .ten { font-size: 120px; letter-spacing: -6px; }
    .decennale-big .side { padding-bottom: 8px; }
    .decennale-grid .btn { width: 100%; }
    .about-band { min-height: 0; padding: 48px 0; }
    .about-band::after { background-position: 70% 80%; }
    .about-band::before { background: linear-gradient(180deg, rgba(24,17,12,.82) 0%, rgba(24,17,12,.7) 100%); }
    .zones { padding: 48px 0; }
    .showcase-copy { display: contents; }
    .showcase-copy > :not(.kicker):not(.btn) { display: none; }
    .showcase-copy .kicker { order: -2; margin: 0 24px 20px; font-size: 1.75rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.12; }
    .showcase-frame { order: -1; }
    .showcase-copy .btn { order: 1; margin: 24px 24px 0; }
    .chips {
        display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content;
        gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
        margin: 24px -24px 0; padding: 0 24px 10px; scroll-padding-left: 24px;
    }
    .chips li { scroll-snap-align: start; white-space: nowrap; }
    .cta { min-height: 0; padding: 52px 0; }
    .cta::before { background: linear-gradient(180deg, rgba(24,17,12,.86) 0%, rgba(24,17,12,.78) 100%); }
    .cta-left .container, .cta-right .container { align-items: center; text-align: center; }
    .cta-left .cta-actions, .cta-right .cta-actions { justify-content: center; }
    .cta-actions, .cta-actions .btn { width: 100%; }
    .band { display: none; }
    .site-footer { padding: 18px 0 14px; }
    .footer-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-grid > div:not(.footer-brand) { display: none; }
    .footer-brand p { display: none; }
    .footer-brand img { height: 38px; margin-bottom: 0; }
    .footer-bottom { margin-top: 12px; padding-top: 12px; font-size: 13px; }
    .reviews-head { align-items: flex-start; }

    .form-card { padding: 24px 20px; border-radius: 22px; }
    .options { grid-template-columns: 1fr; }
    .stepper { gap: 6px; }
    .stepper div { flex-direction: column; text-align: center; gap: 6px; font-size: 12px; }
    .lbl-long { display: none; }
    .lbl-short { display: inline; }
    .side-card.strong { flex-direction: column; text-align: center; }
    .grid-2 { grid-template-columns: 1fr; }
    .form-wide { padding: 26px 20px; border-radius: 22px; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .push { margin-left: 0; }
    .form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* Éléments réservés au JavaScript (étapes du devis) */
.js-only { display: none; }
.js .btn.js-only { display: inline-flex; }
.js .stepper.js-only { display: grid; }
.js .progress.js-only { display: block; }