:root {
    --primary: #1F7A4C;
    --secondary: #9FDCBB;
    --dark: #12522F;
    --light: #F4FBF7;
    --text: #172B21;
    --white: #FFFFFF;
    --radius: 12px;
    --font-heading: 'Lora', Georgia, serif;
    --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--light);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

h1, h2, h3 {
    color: var(--dark);
    line-height: 1.2;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: var(--white);
    padding: 1rem 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    white-space: nowrap;
}

.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    color: var(--white);
    text-align: center;
}

.hero h1 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 30px;
}

.btn {
    display: inline-block;
    background: var(--white);
    color: var(--primary);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn:hover {
    background: var(--secondary);
    color: var(--dark);
    text-decoration: none;
    transform: translateY(-2px);
}

.section {
    padding: 60px 0;
}

.service-banner-section {
    padding: 34px 0 24px;
}

.service-banner {
    display: grid;
    gap: 20px;
    margin: 24px 0;
    padding: 26px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 62%, #eaf6ff 100%);
    box-shadow: var(--shadow);
}

.service-banner-copy {
    max-width: 760px;
}

.service-banner-copy h2 {
    max-width: none;
    margin-bottom: 8px;
    font-size: 1.7rem;
    line-height: 1.15;
}

.service-banner-copy p {
    color: #526071;
    font-size: 1rem;
    line-height: 1.6;
}

.service-banner-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.service-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #fff;
    color: var(--dark);
    font-weight: 700;
    white-space: nowrap;
}

.service-pill svg,
.service-primary-cta svg,
.service-secondary-cta svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.service-banner-actions {
    display: flex;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.service-primary-cta,
.service-secondary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 160px;
    min-height: 46px;
    border-radius: 8px;
    text-align: center;
}

.service-primary-cta {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

.service-secondary-cta {
    background: #fff;
    color: var(--primary);
    border: 1px solid #d9e6f4;
}

.service-secondary-cta:hover {
    background: #f7fbff;
}

.directory-section > .container > .service-banner:first-of-type,
.profile-content + .service-banner {
    margin-top: 22px;
}

.card {
    background: var(--white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: none;
}

footer {
    background: var(--dark);
    color: var(--white);
    padding: 60px 0 20px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

.city-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.city-link {
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: 0.2s;
}

.city-link:hover {
    background: var(--secondary);
    border-color: var(--primary);
    text-decoration: none;
}

.directory-section {
    background: var(--white);
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.left-heading {
    margin-left: 0;
    text-align: left;
}

.compact-heading {
    margin-top: 48px;
}

.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.section-heading h1,
.section-heading h2 {
    margin-bottom: 10px;
}

.section-heading p {
    color: #526071;
}

.breadcrumb {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 24px;
    color: #64748b;
    font-size: 0.95rem;
}

.directory-stat {
    width: max-content;
    margin: 0 auto 24px;
    padding: 10px 16px;
    border: 1px solid #dbe8f6;
    border-radius: 999px;
    background: #f7fbff;
    color: var(--dark);
}

.directory-stat strong {
    color: var(--primary);
    margin-right: 6px;
}

.region-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.directory-card {
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.directory-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    text-decoration: none;
}

.directory-card-title {
    color: var(--dark);
    font-weight: 800;
    line-height: 1.25;
}

.directory-card-meta {
    color: #64748b;
    font-size: 0.92rem;
}

.department-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 48px;
}

.department-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 13px 14px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.department-chip:hover {
    border-color: var(--primary);
    background: #f7fbff;
    color: var(--dark);
    transform: translateY(-1px);
    text-decoration: none;
}

.department-chip span,
.department-code {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 42px;
    min-height: 34px;
    border-radius: 8px;
    background: #eaf6ff;
    color: var(--dark);
    font-weight: 800;
}

.directory-subtitle {
    margin: 36px 0 20px;
}

.department-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.department-card {
    display: grid;
    gap: 6px;
    background: var(--white);
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    padding: 18px;
    color: var(--text);
    box-shadow: var(--shadow);
}

.department-card:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.department-card span:last-child {
    color: #64748b;
    font-size: 0.92rem;
}

.directory-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0;
    padding: 18px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #f7fbff;
}

.content-panel,
.faq-panel {
    background: var(--white);
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin: 28px 0;
    padding: 24px;
}

.content-panel h2,
.faq-panel h2 {
    margin-bottom: 12px;
}

.content-panel p + p {
    margin-top: 12px;
}

.content-panel + .service-banner,
.service-banner + .content-panel,
.service-banner + .department-directory-grid {
    margin-top: 0;
}

.useful-list {
    margin-top: 14px;
    padding-left: 20px;
}

.useful-list li {
    margin-bottom: 8px;
}

.local-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.local-links-row a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #f7fbff;
    color: var(--dark);
    font-weight: 700;
}

.local-links-row a:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.local-links-row span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #fff;
    color: #526071;
    font-weight: 700;
}

.local-intent-panel {
    border-left: 4px solid var(--primary);
}

.local-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.local-step-grid > div {
    min-height: 150px;
    padding: 16px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #f7fbff;
}

.local-step-grid strong {
    display: block;
    color: var(--dark);
    margin-bottom: 8px;
}

.local-step-grid p {
    color: #526071;
    font-size: 0.95rem;
}

.official-data-panel {
    background: #fbfdff;
}

.official-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.official-data-grid > div {
    min-height: 96px;
    padding: 14px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #fff;
}

.official-data-grid span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.official-data-grid strong {
    color: var(--dark);
    display: block;
    line-height: 1.25;
}

.source-note {
    color: #64748b;
    font-size: 0.88rem;
}

.faq-panel details {
    border-top: 1px solid #e2e8f0;
    padding: 14px 0;
}

.faq-panel details:first-of-type {
    margin-top: 8px;
}

.faq-panel summary {
    color: var(--dark);
    cursor: pointer;
    font-weight: 700;
}

.faq-panel details p {
    color: #526071;
    margin-top: 8px;
}

.trust-section {
    background: #f8fbfe;
}

.trust-section-block {
    margin: 28px 0;
}

.trust-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 34px;
    align-items: center;
    background: var(--white);
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 30px;
}

.trust-photo-wrap {
    align-self: stretch;
    min-height: 320px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef6ff;
}

.trust-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.trust-content h2 {
    margin-bottom: 12px;
}

.trust-content > p {
    color: #526071;
    margin-bottom: 18px;
}

.trust-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.trust-proof {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #f7fbff;
    color: var(--text);
}

.trust-proof:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.trust-proof strong {
    color: var(--dark);
    font-size: 1.35rem;
}

.trust-proof span,
.trust-details {
    color: #526071;
    font-size: 0.95rem;
}

.trust-details {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.trust-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
}

.trust-link {
    font-weight: 700;
}

.large-city-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.local-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.local-main {
    min-width: 0;
}

.main-content {
    min-width: 0;
}

.city-service-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    align-items: stretch;
    padding: 30px;
    margin-bottom: 28px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 70%, #eaf6ff 100%);
    box-shadow: var(--shadow);
}

.city-profile-panel {
    margin-bottom: 28px;
}

.city-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.city-highlights-grid > div {
    min-height: 96px;
    padding: 14px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #f7fbff;
}

.city-highlights-grid span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.city-highlights-grid strong {
    color: var(--dark);
    display: block;
    line-height: 1.25;
}

.city-service-copy h2 {
    font-size: 1.9rem;
    margin-bottom: 12px;
}

.city-service-copy p {
    color: #526071;
    font-size: 1.02rem;
}

.city-service-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #f4cf72;
    border-radius: 8px;
    background: #fff9e8;
    color: #7c5b19;
    font-weight: 650;
}

.city-service-warning svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
}

.city-service-booking {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 18px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #fff;
}

.city-price-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.city-price-box span {
    color: #526071;
    font-weight: 700;
}

.city-price-box strong {
    color: var(--dark);
    font-size: 2rem;
}

.city-service-facts {
    display: grid;
    gap: 10px;
}

.city-service-facts span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526071;
    font-weight: 650;
}

.city-service-facts svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--primary);
}

.city-primary-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    width: 100%;
    margin-top: 4px;
    background: var(--primary);
    color: white;
}

.city-phone-link {
    text-align: center;
    font-weight: 700;
}

.local-sidebar {
    align-self: start;
}

.trust-sidebar {
    position: sticky;
    top: 96px;
    z-index: 2;
}

.trust-mini-card {
    display: grid;
    gap: 14px;
    background: var(--white);
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 18px;
}

.trust-mini-photo {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #e7f4ff;
}

.trust-mini-card h3 {
    margin: 0;
}

.trust-mini-card p {
    color: #526071;
    font-size: 0.94rem;
}

.star-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: radial-gradient(circle at top left, #fff8dc 0%, #fff3b0 42%, #fffdf2 100%);
    border: 1px solid #e8c251;
    color: #b7791f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 20px rgba(181, 119, 31, 0.12);
}

.star-row {
    display: flex;
    gap: 3px;
}

.star-row span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #ffd84d 0%, #f5a400 55%, #d98200 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 6px rgba(140, 86, 0, 0.22);
    color: white;
    font-size: 0.9rem;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(95, 58, 0, 0.35);
}

.star-score {
    display: grid;
    justify-items: end;
    line-height: 1.1;
}

.star-score strong {
    color: var(--dark);
    font-size: 1.1rem;
}

.star-score small {
    color: #7c5b19;
    font-weight: 700;
    white-space: nowrap;
}

.trust-mini-proofs {
    display: grid;
    gap: 8px;
}

.trust-mini-proofs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d9e6f4;
    border-radius: 8px;
    background: #f7fbff;
}

.trust-mini-proofs a:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.trust-mini-proofs strong {
    color: var(--dark);
}

.trust-mini-proofs span {
    color: #526071;
    font-size: 0.88rem;
    text-align: right;
}

.trust-mini-note {
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.trust-mini-cta {
    text-align: center;
    background: var(--primary);
    color: white;
}

.trust-profile-link {
    text-align: center;
    font-weight: 700;
}

.profile-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    margin-top: 24px;
}

.profile-photo-panel {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #dbe8f6;
    background: #eef6ff;
    box-shadow: var(--shadow);
}

.profile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.profile-content {
    max-width: 780px;
}

.profile-content h1 {
    margin-bottom: 14px;
}

.profile-lead {
    color: #526071;
    font-size: 1.08rem;
    margin-bottom: 18px;
}

.profile-stars {
    max-width: 390px;
    margin: 18px 0;
}

.profile-proofs {
    margin-bottom: 22px;
}

.profile-sections {
    margin-top: 34px;
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .nav-links { display: none; }
    .section-heading,
    .left-heading {
        text-align: left;
    }
    .directory-stat {
        margin-left: 0;
    }
    .directory-note {
        align-items: flex-start;
        flex-direction: column;
    }
    .service-banner-bottom,
    .service-banner-actions,
    .service-banner-meta {
        align-items: stretch;
        flex-direction: column;
    }
    .service-primary-cta,
    .service-secondary-cta,
    .service-pill {
        width: 100%;
    }
    .city-service-panel {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .city-service-copy h2 {
        font-size: 1.55rem;
    }
    .city-highlights-grid {
        grid-template-columns: 1fr;
    }
    .trust-card {
        grid-template-columns: 1fr;
    }
    .trust-photo-wrap {
        min-height: 360px;
    }
    .trust-proof-grid {
        grid-template-columns: 1fr;
    }
    .local-layout {
        grid-template-columns: 1fr;
    }
    .local-step-grid {
        grid-template-columns: 1fr;
    }
    .local-step-grid > div {
        min-height: auto;
    }
    .official-data-grid {
        grid-template-columns: 1fr;
    }
    .official-data-grid > div {
        min-height: auto;
    }
    .trust-sidebar {
        position: static;
    }
    .profile-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Formulaire de conversion (élément dominant du hero) ===== */
.lead-form {
    background: #fff;
    border-radius: 22px;
    padding: 30px 30px 22px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
    border-top: 6px solid var(--secondary);
    text-align: left;
}
.lead-form-head { margin-bottom: 20px; text-align: center; }
.lead-form-head strong {
    display: block;
    color: var(--primary);
    font-size: 1.55rem;
    line-height: 1.25;
    margin-bottom: 6px;
}
.lead-form-head span { color: #607089; font-size: 0.95rem; }
.lead-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.lead-form-row input {
    width: 100%;
    padding: 17px 18px;
    border: 2px solid #d6e3f1;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--text);
}
.lead-form-row input:focus { border-color: var(--primary); outline: none; }
.lead-form-full { margin-bottom: 14px; }
.lead-form-select {
    width: 100%;
    padding: 17px 18px;
    border: 2px solid #d6e3f1;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--text);
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%230077B6'%20d%3D'M1%201l5%205%205-5'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}
.lead-form-select:focus { border-color: var(--primary); outline: none; }
.lead-form-btn {
    display: block;
    width: 100%;
    background: var(--secondary);
    color: var(--primary);
    border: none;
    padding: 19px 24px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.2s ease;
}
.lead-form-btn:hover { transform: translateY(-2px); background: #b8ecf5; }
.lead-form-note {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: #8090a3;
    line-height: 1.4;
    text-align: center;
}
@media (max-width: 680px) {
    .lead-form-row { grid-template-columns: 1fr; }
    .lead-form-head strong { font-size: 1.3rem; }
}

/* ===== Slider d'avis (juste sous le formulaire) ===== */
.reviews-slider { margin: 26px auto 0; max-width: 1000px; overflow: hidden; }
.reviews-slider-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.reviews-slider-label strong { font-size: 1.05rem; }
.reviews-slider-stars { color: #ffd24a; letter-spacing: 2px; }
/* Hero : la vidéo et l'infographie d'abord, côte à côte, puis l'argumentaire
   et le bouton de réservation en dessous. L'ordre est imposé en CSS pour ne
   pas avoir à réécrire le HTML des onze gabarits de hero. */
.hero-layout { display: flex; flex-direction: column; gap: 22px; }
.hero-media-duo { order: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-copy { order: 2; }

.hero-media { margin: 0; width: 100%; max-width: 320px; }
.hero-media video,
.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    background: #000;
}
.hero-media--infographie { max-width: 100%; }
.hero-media--infographie picture { display: block; }
.hero-media--infographie img { background: #fff; }
.hero-media figcaption {
    margin: 8px 0 0;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.hero-zoom { display: block; position: relative; }
.hero-zoom-pastille {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(2, 62, 138, 0.88);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}
.hero-zoom-pastille svg { width: 14px; height: 14px; }

/* Visionneuse : l'infographie s'ouvre par-dessus la page, jamais dans un
   nouvel onglet — le visiteur ferme d'un geste et reste dans le tunnel. */
.zoom-overlay {
    position: fixed;
    inset: 0;
    /* Au-dessus du widget de chat (z-index 9999), sinon sa bulle recouvre le
       bouton de réservation de la visionneuse. */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 20, 36, 0.88);
}
.zoom-overlay[hidden] { display: none; }
.zoom-boite {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1200px;
    max-height: 100%;
    width: 100%;
}
.zoom-defilement {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #fff;
}
.zoom-defilement img { display: block; width: 100%; height: auto; }
.zoom-fermer {
    position: absolute;
    top: -14px;
    right: -6px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--dark);
    font-size: 26px;
    line-height: 40px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.zoom-pied {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.zoom-pied .btn { background: var(--secondary); color: #06202e; font-weight: 700; padding: 14px 26px; }
.zoom-retour {
    border: none;
    background: none;
    color: #fff;
    font-size: 0.92rem;
    text-decoration: underline;
    cursor: pointer;
}
@media (max-width: 700px) {
    .zoom-overlay { padding: 14px; }
    .zoom-fermer { top: -8px; right: 0; width: 36px; height: 36px; line-height: 36px; font-size: 22px; }
}

@media (min-width: 900px) {
    /* Les deux médias sur une même ligne, calés sur une hauteur commune : la
       vidéo verticale et l'infographie horizontale se répondent au lieu de se
       superposer, et l'ensemble reste au-dessus de la ligne de flottaison. */
    .hero-media-duo { flex-direction: row; justify-content: center; align-items: flex-start; gap: 24px; }
    .hero-media { width: auto; max-width: none; }
    /* 350 px : la vidéo et l'infographie restent lisibles, et le bouton de
       réservation affleure le bas du premier écran sur un portable courant.
       Le bouton « Réserver une intervention » de l'en-tête, lui, est visible
       en permanence. */
    .hero-media video,
    .hero-media--infographie img { width: auto; height: 350px; max-width: 100%; }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .hero-media video,
    .hero-media--infographie img { height: 270px; }
}

/* Blocs « image + texte » de l'accueil. Ces grilles étaient écrites en style
   inline, donc impossibles à reprendre en média-query : sur téléphone le texte
   se retrouvait comprimé dans une colonne de 175 px à côté de la photo. */
.home-split { display: grid; align-items: center; }
.home-split--bio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 50px; }
.home-split--illustration { grid-template-columns: 1fr 1fr; gap: 60px; }
@media (max-width: 780px) {
    .home-split--bio,
    .home-split--illustration { grid-template-columns: 1fr; gap: 28px; }
}

/* Sur écran étroit, « avis vérifiés Google & Resalib » passe à la ligne à
   l'intérieur de son span : les étoiles se retrouvent alors seules à gauche,
   face à un bloc de deux lignes. On autorise le retour à la ligne du conteneur
   pour que les étoiles prennent leur propre ligne, centrées. */
@media (max-width: 520px) {
    .reviews-slider-label { flex-wrap: wrap; }
}
.reviews-track-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.reviews-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: reviews-scroll 50s linear infinite;
}
.reviews-track-wrap:hover .reviews-track { animation-play-state: paused; }
.review-item {
    flex: 0 0 320px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    margin: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    text-align: left;
}
.review-stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 8px; }
.review-item blockquote {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-item figcaption { font-size: 0.82rem; color: #607089; font-weight: 700; }
@keyframes reviews-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* CTA conversion (pages département/région) — stack sur mobile */
@media (max-width: 768px) {
  .dept-cta-panel > div { grid-template-columns: 1fr !important; gap: 18px !important; }
  .dept-cta-panel { padding: 22px !important; }
}

/* Pages ville : le bloc de contenu unique à la commune (.city-profile-panel) est
   placé en tête du HTML pour que les moteurs le lisent avant le gabarit commun.
   Son emplacement visuel d'origine (juste après le panneau service) est restitué
   ici avec l'ordre flex. Les marges sont normalisées parce que le passage en flex
   supprime la fusion des marges verticales. */
.main-content--seo-order {
  display: flex;
  flex-direction: column;
}
.main-content--seo-order > * {
  order: 6;
  margin-top: 0;
  margin-bottom: 28px;
}
/* Ordre de LECTURE : l'offre et les bénéfices d'abord, les repères
   administratifs à la fin. L'ordre du HTML reste piloté par le SEO (le texte
   unique à la commune est premier dans le code), les deux sont indépendants. */
.main-content--seo-order > .city-service-panel   { order: 1; }
.main-content--seo-order > .city-benefits-panel  { order: 2; }
.main-content--seo-order > .local-intent-panel   { order: 3; }
.main-content--seo-order > .faq-panel            { order: 4; }
.main-content--seo-order > .city-profile-panel   { order: 5; }
.main-content--seo-order > .official-data-panel  { order: 7; }

/* Bloc bénéfices */
.city-benefits-panel .benefits-intro {
  font-size: 1.02rem;
  color: #40506b;
  margin-bottom: 20px;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.benefits-grid > div {
  border: 1px solid #dbe8f6;
  border-radius: 10px;
  padding: 16px;
  background: #f7fbff;
}
.benefits-grid i {
  width: 22px;
  height: 22px;
  color: var(--primary);
  margin-bottom: 8px;
}
.benefits-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--dark);
}
.benefits-grid p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #55627a;
}
.benefits-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.benefits-cta .btn {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 10px;
  text-decoration: none;
}
.benefits-cta span {
  font-size: 0.88rem;
  color: #55627a;
}

/* Réassurance paiement : affichée avant le formulaire de réservation et dans la
   colonne de confiance des pages locales. */
.payment-trust {
  border: 1px solid #cfe6d4;
  background: linear-gradient(135deg, #f4fbf6 0%, #eaf7ee 100%);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 24px;
}
.payment-trust-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1b5e34;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.payment-trust-head i { width: 22px; height: 22px; }
.payment-trust-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.payment-trust-methods span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #023e8a;
}
.payment-trust-methods i { width: 16px; height: 16px; }
.payment-trust-methods .payment-trust-paypal {
  border-color: #ffc439;
  background: #fffaf0;
  color: #003087;
}
.payment-trust-points {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #4a5a50;
  line-height: 1.5;
}
.payment-trust-points li + li { margin-top: 4px; }
.payment-trust--compact {
  padding: 14px 16px;
  margin-top: 20px;
}
.payment-trust--compact .payment-trust-head { font-size: 0.95rem; margin-bottom: 10px; }
.payment-trust--compact .payment-trust-points { font-size: 0.82rem; }

/* Version dans le panneau de réservation des pages ville : colonne étroite,
   le bloc doit rester lisible sans déborder. */
.city-service-booking .payment-trust {
  margin: 14px 0 0;
  padding: 14px;
}
.city-service-booking .payment-trust-methods { gap: 6px; }
.city-service-booking .payment-trust-methods span {
  padding: 6px 9px;
  font-size: 0.82rem;
}
.city-service-booking .payment-trust-points {
  font-size: 0.78rem;
  padding-left: 16px;
}

/* Pages département et région : même principe que les pages ville — le texte
   unique reste haut dans le code pour Google, l'offre et les bénéfices passent
   en tête à l'écran, les repères administratifs descendent en fin de page. */
.local-main--seo-order {
  display: flex;
  flex-direction: column;
}
.local-main--seo-order > * {
  order: 5;
  margin-top: 0;
  margin-bottom: 28px;
}
.local-main--seo-order > .local-intro-panel   { order: 1; }
.local-main--seo-order > .city-benefits-panel { order: 2; }
.local-main--seo-order > .city-profile-panel  { order: 4; }
.local-main--seo-order > .official-data-panel { order: 7; }
.local-main--seo-order > .faq-panel           { order: 8; }


/* ---- Variante de mise en page propre à ce site ---- */
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.01em; }
.logo { font-family: var(--font-heading); }
header { border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); }
.hero { background: var(--light); color: var(--text); text-align: left; padding: 64px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.hero h1 { color: var(--dark); font-size: 2.6rem; max-width: 18ch; }
.hero p { margin: 0 0 30px; opacity: 1; color: color-mix(in srgb, var(--text) 82%, transparent); }
.hero .btn { background: var(--primary); color: var(--white); }
.hero .btn:hover { background: var(--dark); color: var(--white); }
.card { border-radius: var(--radius); border-top: 3px solid var(--primary); }
.btn, .service-primary-cta, .service-secondary-cta { border-radius: 12px; }
.service-pill, .city-link { border-radius: 12px; }
.section { padding: 64px 0; }
.city-link { border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }