/*
  DCI Services — Site vitrine PHP modulaire
  CSS natif sans framework.
  Organisation : variables, base, composants, sections, pages, responsive.
*/

:root {
    /*
      Palette v35 — base claire inspirée du logo DCI Services.
      Les valeurs ci-dessous sont les valeurs de secours. La version active
      est générée depuis la configuration éditoriale du site.
    */
    --color-blue-950: #0b8fe8;
    --color-blue-900: #119eed;
    --color-blue-800: #20aef3;
    --color-blue-700: #32bdf7;
    --color-blue-500: #4bc7fa;
    --color-blue-300: #7ad9ff;
    --color-blue-100: #dff6ff;
    --color-blue-50: #f4fcff;
    --color-green-600: #82bf3f;
    --color-green-500: #9ccd4b;
    --color-green-100: #eef8dd;
    --color-white: #ffffff;
    --color-grey-900: #143047;
    --color-grey-700: #4a5f73;
    --color-grey-500: #6d7e8e;
    --color-grey-200: #d9edf7;
    --color-grey-100: #eff8fc;
    --color-grey-50: #f8fdff;
    --color-error: #b4232e;

    --color-blue-950-rgb: 11, 143, 232;
    --color-blue-900-rgb: 17, 158, 237;
    --color-blue-800-rgb: 32, 174, 243;
    --color-blue-700-rgb: 50, 189, 247;
    --color-blue-500-rgb: 75, 199, 250;
    --color-blue-300-rgb: 122, 217, 255;
    --color-blue-100-rgb: 223, 246, 255;
    --color-blue-50-rgb: 244, 252, 255;
    --color-green-600-rgb: 130, 191, 63;
    --color-green-500-rgb: 156, 205, 75;
    --color-green-100-rgb: 238, 248, 221;
    --color-grey-900-rgb: 20, 48, 71;

    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fs-base: 1rem;
    --fs-small: 0.92rem;
    --fs-tiny: 0.78rem;
    --fs-kicker: 0.82rem;
    --fs-nav: 0.88rem;
    --fs-button: 0.94rem;
    --fs-hero-title: clamp(2.25rem, 5vw, 4.35rem);
    --fs-slider-title: clamp(1.95rem, 4.35vw, 3.65rem);
    --fs-section-title: clamp(1.9rem, 3.8vw, 3rem);
    --fs-card-title: 1.18rem;

    --shadow-soft: 0 22px 60px rgba(var(--color-blue-900-rgb), 0.14);
    --shadow-card: 0 14px 36px rgba(var(--color-blue-900-rgb), 0.10);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --container: 1180px;
    --header-height: 108px;
}
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-grey-900);
    background: var(--color-white);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
ul,
ol,
h1,
h2,
h3 {
    margin-top: 0;
}

p {
    color: var(--color-grey-700);
}

ul {
    padding-left: 1.2rem;
}

button,
input,
select,
textarea {
    font: inherit;
}

code {
    padding: 0.15rem 0.35rem;
    border-radius: 7px;
    background: var(--color-grey-100);
    color: var(--color-blue-900);
    font-size: 0.92em;
}

.container {
    width: min(100% - 40px, var(--container));
    margin-inline: auto;
}

.narrow-container {
    width: min(100% - 40px, 860px);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 1rem;
    z-index: 1000;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: var(--color-blue-900);
    color: var(--color-white);
}

.skip-link:focus {
    left: 1rem;
}

/* Header et navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    backdrop-filter: blur(16px);
}

.top-bar {
    background: var(--color-blue-950);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.86rem;
}

.top-bar__inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.top-bar a {
    color: var(--color-white);
    font-weight: 700;
}

.main-nav__inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.78rem;
    min-width: max-content;
}

.brand__mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-500));
    font-weight: 900;
    letter-spacing: -0.04em;
    box-shadow: 0 12px 26px rgba(var(--color-blue-500-rgb), 0.25);
}

.brand__text {
    display: grid;
    line-height: 1.1;
}

.brand__text strong {
    font-size: 1.03rem;
    color: var(--color-blue-950);
}

.brand__text small {
    max-width: 265px;
    margin-top: 0.22rem;
    color: var(--color-grey-500);
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-panel {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0.78rem;
    border-radius: 999px;
    color: var(--color-grey-700);
    font-weight: 700;
    font-size: 0.94rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--color-blue-900);
    background: var(--color-blue-100);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-grey-200);
    border-radius: 14px;
    background: var(--color-white);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: var(--color-blue-900);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.82rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-500));
    box-shadow: 0 14px 28px rgba(var(--color-blue-500-rgb), 0.22);
}

.btn--secondary {
    color: var(--color-blue-900);
    background: var(--color-white);
    border-color: var(--color-grey-200);
}

.btn--light {
    color: var(--color-blue-900);
    background: var(--color-white);
}

.btn--ghost-light {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.text-link {
    display: inline-flex;
    margin-top: 0.8rem;
    color: var(--color-blue-800);
    font-weight: 900;
}

.text-link::after {
    content: "→";
    margin-left: 0.42rem;
    transition: transform 0.2s ease;
}

.text-link:hover::after {
    transform: translateX(3px);
}

/* Sections générales */
.section {
    padding: 88px 0;
}

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

.section--soft {
    background: linear-gradient(180deg, var(--color-blue-50), var(--color-grey-50));
}

.section--blue {
    color: var(--color-white);
    background: radial-gradient(circle at top left, rgba(var(--color-blue-500-rgb), 0.32), transparent 34%), linear-gradient(135deg, var(--color-blue-950), var(--color-blue-800));
}

.section--blue p,
.section--blue li {
    color: rgba(255, 255, 255, 0.82);
}

.section-kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--color-blue-700);
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-kicker::before,
.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.section-kicker--light,
.section-heading--light .section-kicker {
    color: var(--color-blue-100);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading.centered .section-kicker {
    justify-content: center;
}

.section-heading h2,
.split-layout h2,
.content-card h2,
.form-card h2 {
    color: var(--color-blue-950);
    font-size: clamp(1.75rem, 3.3vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.section--blue .section-heading h2,
.section--blue h2,
.section--blue h3 {
    color: var(--color-white);
}


/* Slider accueil plein écran */
.home-slider {
    position: relative;
    width: 100%;
    min-height: calc(100svh - var(--header-height));
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-blue-950);
    isolation: isolate;
}

.home-slider__track,
.home-slide {
    position: absolute;
    inset: 0;
}

.home-slide {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.012);
    transition: opacity 0.9s ease, visibility 0.9s ease, transform 6.8s ease;
}

.home-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 1;
}

.home-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.04);
}

.home-slide__shade,
.home-slide__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-slide__shade {
    background:
        radial-gradient(circle at 70% 28%, rgba(var(--color-blue-500-rgb), 0.20), transparent 34%),
        radial-gradient(circle at 18% 88%, rgba(var(--color-green-500-rgb), 0.14), transparent 28%),
        linear-gradient(90deg, rgba(var(--color-grey-900-rgb), 0.90) 0%, rgba(var(--color-grey-900-rgb), 0.75) 43%, rgba(var(--color-grey-900-rgb), 0.36) 100%),
        linear-gradient(180deg, rgba(var(--color-grey-900-rgb), 0.22), rgba(var(--color-grey-900-rgb), 0.40));
}

.home-slide__grain {
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.82), transparent 80%);
}

.home-slide__content {
    position: relative;
    z-index: 2;
    min-height: calc(100svh - var(--header-height));
    display: flex;
    align-items: center;
    padding-top: 54px;
    padding-bottom: 132px;
}

.home-slide__layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    align-items: end;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.home-slide__copy {
    max-width: 800px;
}

.home-slide__title {
    max-width: 760px;
    margin-bottom: 1.1rem;
    color: var(--color-white);
    font-size: clamp(2.35rem, 5.2vw, 4.85rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.home-slide__lead {
    max-width: 690px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.72;
}

.eyebrow--light {
    color: var(--color-blue-100);
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.home-slide__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.45rem 0 0;
    padding: 0;
    list-style: none;
}

.home-slide__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.90);
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    font-size: 0.88rem;
    font-weight: 800;
}

.home-slide__points li::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue-300), var(--color-green-500));
    box-shadow: 0 0 0 4px rgba(var(--color-blue-300-rgb), 0.12);
}

.home-slide__panel {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.105);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
}

.home-slide__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%);
    pointer-events: none;
}

.home-slide__panel-label {
    position: relative;
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--color-blue-100);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-slide__panel strong {
    position: relative;
    display: block;
    margin-bottom: 0.62rem;
    color: var(--color-white);
    font-size: 1.18rem;
    line-height: 1.25;
}

.home-slide__panel p {
    position: relative;
    margin: 0;
    color: var(--color-grey-700);
    font-size: 0.95rem;
    line-height: 1.68;
}

.home-slider__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(var(--color-grey-900-rgb), 0.66);
    backdrop-filter: blur(18px);
}

.home-slider__meta-inner {
    min-height: 74px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
}

.home-slider__meta span {
    position: relative;
    padding-left: 1.35rem;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 800;
    font-size: 0.9rem;
}

.home-slider__meta span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--color-blue-500);
    box-shadow: 0 0 0 5px rgba(var(--color-blue-500-rgb), 0.16);
}

.home-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    color: var(--color-white);
    background: rgba(var(--color-grey-900-rgb), 0.48);
    backdrop-filter: blur(14px);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, transform 0.2s ease, border 0.2s ease;
}

.home-slider__arrow:hover {
    background: rgba(var(--color-blue-500-rgb), 0.82);
    border-color: rgba(255, 255, 255, 0.48);
    transform: translateY(-50%) scale(1.04);
}

.home-slider__arrow--prev {
    left: 24px;
}

.home-slider__arrow--next {
    right: 24px;
}

.home-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 91px;
    z-index: 5;
    display: flex;
    gap: 0.62rem;
    transform: translateX(-50%);
}

.home-slider__dot {
    width: 40px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
    cursor: pointer;
    transition: width 0.22s ease, background 0.22s ease;
}

.home-slider__dot.is-active {
    width: 62px;
    background: linear-gradient(90deg, #ffffff, var(--color-blue-100));
}

.home-slider .hero-actions {
    margin-top: 2rem;
}

.home-slider .btn--primary {
    background: linear-gradient(135deg, var(--color-blue-300), var(--color-blue-500));
    color: var(--color-blue-950);
    box-shadow: 0 14px 34px rgba(var(--color-blue-300-rgb), 0.24);
}

.home-slider .btn--ghost-light:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 14%, rgba(var(--color-blue-500-rgb), 0.18), transparent 28%), radial-gradient(circle at 90% 18%, rgba(var(--color-green-500-rgb), 0.10), transparent 24%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.88fr);
    align-items: center;
    gap: 58px;
}

.hero h1,
.page-hero h1 {
    margin-bottom: 1.3rem;
    color: var(--color-blue-950);
    font-size: clamp(2.15rem, 4.8vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.hero-lead,
.page-hero p {
    max-width: 670px;
    font-size: 1.16rem;
    color: var(--color-grey-700);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.55rem 0 0;
    padding: 0;
    list-style: none;
}

.trust-list li {
    padding: 0.45rem 0.78rem;
    border: 1px solid var(--color-grey-200);
    border-radius: 999px;
    color: var(--color-blue-900);
    background: rgba(255, 255, 255, 0.74);
    font-size: 0.88rem;
    font-weight: 800;
}

.hero-card {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    background: var(--color-blue-900);
}

.hero-card img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    opacity: 0.92;
}

.hero-card__overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 20px;
    color: var(--color-white);
    background: rgba(var(--color-grey-900-rgb), 0.78);
    backdrop-filter: blur(14px);
}

.hero-card__overlay strong,
.hero-card__overlay span {
    display: block;
}

.hero-card__overlay strong {
    font-size: 1.1rem;
}

.hero-card__overlay span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
}

/* Page hero */
.page-hero {
    padding: 82px 0;
    background: linear-gradient(180deg, var(--color-blue-50), var(--color-white));
    overflow: hidden;
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 56px;
}

.page-hero__grid--text-only {
    display: block;
    max-width: 920px;
}

.page-hero img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.page-hero--nuisibles,
.page-hero--about,
.page-hero--contact,
.page-hero--legal {
    background: radial-gradient(circle at top right, rgba(var(--color-green-500-rgb), 0.12), transparent 32%), linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

/* Layouts */
.split-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 54px;
}

.text-stack p:last-child {
    margin-bottom: 0;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.align-center {
    align-items: center;
}

.card-grid {
    display: grid;
    gap: 28px;
}

.services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

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

/* Cards */
.service-card,
.feature-card,
.content-card,
.form-card,
.contact-card,
.info-panel,
.mini-card,
.pest-card {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.service-card__body {
    padding: 1.45rem;
}

.service-card h3,
.feature-card h3,
.content-card h2,
.info-panel h3,
.contact-card h3 {
    margin-bottom: 0.7rem;
    color: var(--color-blue-950);
    line-height: 1.15;
}

.service-card__icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--color-blue-900);
    background: rgba(255, 255, 255, 0.86);
    font-weight: 900;
    z-index: 1;
}

.service-card--green .service-card__icon {
    color: var(--color-green-500);
}

.feature-card {
    padding: 1.45rem;
}

.feature-card span {
    display: inline-flex;
    margin-bottom: 1.1rem;
    color: var(--color-blue-700);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.feature-card--large {
    padding: 2rem;
}

.content-card,
.form-card,
.contact-card,
.info-panel {
    padding: clamp(1.35rem, 4vw, 2.1rem);
}

.content-card--accent {
    border-color: rgba(var(--color-blue-500-rgb), 0.24);
    background: linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

.info-panel {
    color: var(--color-grey-900);
}

.info-panel p,
.info-panel li {
    color: var(--color-grey-700);
}

.mini-card {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.mini-card strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--color-white);
    font-size: 1.05rem;
}

.mini-card p {
    margin-bottom: 0;
}

/* Listes */
.check-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.85rem;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-green-500));
    box-shadow: 0 0 0 5px rgba(var(--color-blue-500-rgb), 0.12);
}

/* Process */
.process-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 44px;
    align-items: start;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.process-steps--vertical {
    grid-template-columns: 1fr;
}

.process-step {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.process-step strong {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-500));
}

.process-step span {
    color: var(--color-grey-900);
    font-weight: 800;
}

/* Nuisibles */
.pest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pest-card {
    padding: 1.15rem;
    border-color: rgba(var(--color-green-500-rgb), 0.2);
}

.pest-card strong {
    display: block;
    color: var(--color-blue-950);
    font-size: 1.03rem;
}

.pest-card span {
    color: var(--color-grey-500);
    font-weight: 700;
    font-size: 0.9rem;
}

/* CTA */
.cta-section {
    padding: 74px 0;
    background: var(--color-white);
}

.cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: clamp(1.45rem, 5vw, 3rem);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    background: radial-gradient(circle at top left, rgba(var(--color-green-500-rgb), 0.24), transparent 32%), linear-gradient(135deg, var(--color-blue-950), var(--color-blue-700));
    box-shadow: var(--shadow-soft);
}

.cta-box h2 {
    margin-bottom: 0.7rem;
    color: var(--color-white);
    font-size: clamp(1.75rem, 3.3vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.cta-box p {
    max-width: 760px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.82);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: start;
}

.form-intro {
    margin-bottom: 1.5rem;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.form-row {
    display: grid;
    gap: 0.4rem;
}

.form-row--full {
    grid-column: 1 / -1;
}

.form-row label {
    color: var(--color-blue-950);
    font-weight: 900;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    border: 1px solid var(--color-grey-200);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: var(--color-grey-50);
    color: var(--color-grey-900);
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--color-blue-500);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(var(--color-blue-500-rgb), 0.14);
}

.form-row textarea {
    resize: vertical;
}

.contact-aside {
    display: grid;
    gap: 18px;
}

.contact-card--primary {
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-500));
}

.contact-card--primary h2,
.contact-card--primary p {
    color: var(--color-white);
}

.contact-card a {
    color: var(--color-blue-800);
    font-weight: 900;
}

.contact-card--primary a {
    color: var(--color-blue-900);
}

/* Mentions légales */
.legal-content h2 {
    margin-top: 2rem;
    font-size: 1.35rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

/* Footer */
.site-footer {
    color: rgba(255, 255, 255, 0.78);
    background: var(--color-blue-950);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.75fr));
    gap: 34px;
    padding: 64px 0;
}

.brand--footer .brand__text strong,
.brand--footer .brand__text small {
    color: var(--color-white);
}

.footer-col h2 {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.72);
}

.footer-col ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.82);
}

.footer-col a:hover {
    color: var(--color-white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1080px) {
    .nav-toggle {
        display: block;
    }

    .nav-panel {
        position: absolute;
        top: 100%;
        left: 20px;
        right: 20px;
        display: grid;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--color-grey-200);
        border-radius: 22px;
        background: var(--color-white);
        box-shadow: var(--shadow-soft);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .site-header.is-open .nav-panel {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-header.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .site-header.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-header.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-list {
        display: grid;
        gap: 0.25rem;
    }

    .nav-link,
    .nav-cta {
        width: 100%;
        justify-content: flex-start;
    }


    .home-slider__arrow {
        width: 48px;
        height: 48px;
    }

    .home-slider__arrow--prev {
        left: 16px;
    }

    .home-slider__arrow--next {
        right: 16px;
    }

    .hero-grid,
    .page-hero__grid,
    .split-layout,
    .process-layout,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .feature-grid,
    .mini-grid,
    .pest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .container,
    .narrow-container {
        width: min(100% - 28px, var(--container));
    }

    .top-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.55rem 0;
        gap: 0.15rem;
    }

    .brand__mark {
        width: 44px;
        height: 44px;
    }

    .brand__text small {
        max-width: 185px;
    }


    .home-slider {
        min-height: calc(100svh - 118px);
    }

    .home-slide__shade {
        background:
            linear-gradient(180deg, rgba(var(--color-grey-900-rgb), 0.84) 0%, rgba(var(--color-grey-900-rgb), 0.62) 46%, rgba(var(--color-grey-900-rgb), 0.58) 100%);
    }

    .home-slide__content {
        min-height: calc(100svh - 118px);
        padding-top: 46px;
        padding-bottom: 172px;
    }

    .home-slide__title {
        font-size: clamp(2.05rem, 10.5vw, 3.25rem);
        line-height: 1.02;
    }

    .home-slider__meta-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 0.46rem;
        padding: 0.82rem 0;
    }

    .home-slider__meta span {
        font-size: 0.82rem;
    }

    .home-slider__arrow {
        top: auto;
        bottom: 102px;
        transform: none;
    }

    .home-slider__arrow:hover {
        transform: scale(1.04);
    }

    .home-slider__dots {
        bottom: 117px;
    }

    .section,
    .hero,
    .page-hero {
        padding: 64px 0;
    }

    .hero h1,
    .page-hero h1 {
        font-size: clamp(2.05rem, 10vw, 3.15rem);
    }

    .hero-actions,
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .hero-grid,
    .page-hero__grid {
        gap: 34px;
    }

    .hero-card,
    .hero-card img {
        min-height: 340px;
    }

    .two-columns,
    .services-grid,
    .two-card-grid,
    .feature-grid,
    .mini-grid,
    .pest-grid,
    .process-steps,
    .footer-grid,
    .contact-form,
    .cta-box {
        grid-template-columns: 1fr;
    }

    .cta-box {
        text-align: left;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0;
    }
}

@media (max-width: 460px) {

    .home-slider__arrow {
        display: none;
    }

    .home-slider__dot {
        width: 34px;
    }

    .home-slider__dot.is-active {
        width: 52px;
    }

    .brand__text small {
        display: none;
    }

    .service-card img {
        height: 180px;
    }

    .content-card,
    .feature-card,
    .form-card,
    .contact-card,
    .info-panel {
        padding: 1.15rem;
    }
}

/* Bloc carte contact — remplaçable par une iframe Google Maps/OpenStreetMap */
.map-placeholder {
    min-height: 230px;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    border: 1px dashed rgba(var(--color-blue-500-rgb), 0.42);
    border-radius: var(--radius-md);
    color: var(--color-blue-900);
    text-align: center;
    background: linear-gradient(135deg, var(--color-blue-50), var(--color-green-100));
}

.map-placeholder strong,
.map-placeholder span {
    display: block;
}

.map-placeholder span {
    max-width: 260px;
    color: var(--color-grey-700);
    font-size: 0.92rem;
}

/* Raffinement visuel — v2 */
.section-heading p {
    max-width: 680px;
    color: var(--color-grey-700);
}

.section-heading.centered p {
    margin-inline: auto;
}

.service-card,
.feature-card,
.content-card,
.form-card,
.contact-card,
.info-panel,
.pest-card,
.process-step {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.service-card:hover,
.feature-card:hover,
.pest-card:hover,
.process-step:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-blue-500-rgb), 0.26);
    box-shadow: 0 20px 48px rgba(var(--color-grey-900-rgb), 0.12);
}

.service-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue-900), var(--color-blue-500), var(--color-green-500));
}

.service-card img {
    transition: transform 0.45s ease, filter 0.45s ease;
}

.service-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04);
}

.feature-card span {
    width: fit-content;
    padding: 0.28rem 0.52rem;
    border-radius: 999px;
    background: var(--color-blue-50);
}

.section--soft {
    position: relative;
    overflow: hidden;
}

.section--soft::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: -180px;
    border-radius: 50%;
    background: rgba(var(--color-blue-500-rgb), 0.10);
    pointer-events: none;
}

.section--soft > .container {
    position: relative;
}

@media (max-width: 1080px) {
    .home-slide__layout {
        grid-template-columns: 1fr;
        align-items: center;
        gap: 1.6rem;
    }

    .home-slide__panel {
        max-width: 520px;
    }
}

@media (max-width: 760px) {
    .home-slide__content {
        align-items: center;
        padding-top: 42px;
        padding-bottom: 178px;
    }

    .home-slide__lead {
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .home-slide__points {
        gap: 0.45rem;
        margin-top: 1.1rem;
    }

    .home-slide__points li {
        font-size: 0.8rem;
        padding: 0.4rem 0.58rem;
    }

    .home-slide__panel {
        display: none;
    }
}

@media (max-width: 460px) {
    .home-slide__title {
        font-size: clamp(1.95rem, 10vw, 2.7rem);
    }

    .home-slide__points li:nth-child(n+3) {
        display: none;
    }
}

/* Raffinements v3 — logo réel, quatrième prestation et sécurité formulaire */
.brand__logo-wrap {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: var(--color-white);
    box-shadow: 0 12px 28px rgba(var(--color-grey-900-rgb), 0.13);
}

.brand__logo-wrap--footer {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.brand__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand__text strong {
    letter-spacing: -0.02em;
}

.nav-list {
    gap: 0.05rem;
}

.nav-link {
    padding-inline: 0.66rem;
    font-size: 0.9rem;
}

.services-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.align-start {
    align-items: start;
}

.stacked-cards {
    display: grid;
    gap: 1rem;
}

.inline-card {
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.inline-card h3 {
    margin-bottom: 0.35rem;
    color: var(--color-blue-950);
    font-size: 1rem;
}

.inline-card p {
    margin-bottom: 0;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.page-panneaux-solaires .page-hero,
.page-panneaux-solaires .content-card--accent {
    background: radial-gradient(circle at top right, rgba(255, 210, 82, 0.14), transparent 30%), linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

.service-card:nth-child(3) .service-card__icon {
    color: #b7791f;
}

@media (max-width: 1220px) {
    .services-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-link {
        padding-inline: 0.58rem;
        font-size: 0.86rem;
    }
}

@media (max-width: 1080px) {
    .nav-link {
        font-size: 0.94rem;
    }
}

@media (max-width: 760px) {
    .brand__logo-wrap {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .services-grid--four {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .brand__logo-wrap {
        width: 46px;
        height: 46px;
    }
}

/* Variante logo complet : le texte de marque est porté par le fichier SVG. */
.brand__logo-wrap {
    width: 168px;
    height: 58px;
    border-radius: 18px;
}

.brand__logo {
    object-fit: contain;
    padding: 4px;
}

.brand--footer .brand__logo-wrap {
    width: 180px;
    height: 62px;
}

@media (max-width: 760px) {
    .brand__logo-wrap {
        width: 142px;
        height: 50px;
    }

    .brand--footer .brand__logo-wrap {
        width: 158px;
        height: 54px;
    }
}

@media (max-width: 460px) {
    .brand__logo-wrap {
        width: 132px;
        height: 46px;
    }
}

/* --------------------------------------------------------------------------
   Correctifs v4 — logo séparé, slider lisible et footer plus propre
   -------------------------------------------------------------------------- */
:root {
    --header-height: 184px;
}

.site-header {
    overflow: visible;
    box-shadow: 0 14px 36px rgba(var(--color-grey-900-rgb), 0.08);
}

.logo-strip {
    position: relative;
    z-index: 3;
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--color-blue-500-rgb), 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.96));
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.logo-strip__inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.72rem;
}

.brand--detached {
    flex: 0 0 auto;
}



.logo-strip__text {
    display: grid;
    justify-items: end;
    gap: 0.16rem;
    text-align: right;
}

.logo-strip__text strong {
    color: var(--color-blue-950);
    font-size: 1.03rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.logo-strip__text span {
    max-width: 520px;
    color: var(--color-grey-700);
    font-size: 0.88rem;
    font-weight: 700;
}

.main-nav {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.985);
}

.main-nav__inner {
    min-height: 58px;
    justify-content: center;
}

.main-nav .nav-panel {
    width: 100%;
    justify-content: center;
}

.main-nav .nav-list {
    justify-content: center;
    flex-wrap: wrap;
}

/* L'image du slider doit être un vrai fond, sinon le texte est repoussé hors écran. */
.home-slide img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-slide__shade {
    z-index: 1;
}

.home-slide__grain {
    z-index: 2;
}

.home-slide__content {
    position: relative;
    z-index: 3;
}

.home-slide__copy {
    position: relative;
    padding: clamp(1.1rem, 2vw, 1.6rem);
    border-left: 3px solid rgba(var(--color-blue-300-rgb), 0.78);
    border-radius: 0 26px 26px 0;
    background: linear-gradient(90deg, rgba(var(--color-grey-900-rgb), 0.54), rgba(var(--color-grey-900-rgb), 0.18) 72%, transparent);
    backdrop-filter: blur(2px);
}

.home-slide__title {
    font-size: clamp(2.05rem, 4.45vw, 4.2rem);
    line-height: 1.04;
}

.home-slide__lead {
    color: rgba(255, 255, 255, 0.90);
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.home-slide__panel {
    z-index: 3;
}

.site-footer .brand--footer {
    display: inline-flex;
    margin-bottom: 1rem;
}

.brand--footer .brand__logo-wrap,
.brand__logo-wrap--footer {
    width: 250px;
    height: 86px;
    padding: 0.54rem 0.76rem;
    overflow: visible;
    border: 1px solid rgba(189, 234, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.brand--footer .brand__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

@media (max-width: 1080px) {
    :root {
        --header-height: 184px;
    }

    .main-nav__inner {
        justify-content: flex-end;
    }

    .main-nav .nav-panel {
        top: calc(100% + 8px);
        justify-content: stretch;
    }
}

@media (max-width: 760px) {
    :root {
        --header-height: 218px;
    }

    .logo-strip__inner {
        min-height: 98px;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }


    .logo-strip__text {
        justify-items: start;
        text-align: left;
    }

    .logo-strip__text span {
        max-width: 100%;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .main-nav__inner {
        min-height: 54px;
    }

    .home-slider {
        min-height: calc(100svh - var(--header-height));
    }

    .home-slide__content {
        min-height: calc(100svh - var(--header-height));
        padding-top: 28px;
        padding-bottom: 150px;
    }

    .home-slide__copy {
        padding: 1rem;
        border-left-width: 2px;
        border-radius: 0 20px 20px 0;
    }

    .home-slide__title {
        font-size: clamp(1.72rem, 8.5vw, 2.55rem);
        letter-spacing: -0.04em;
    }

    .home-slide__lead {
        font-size: 0.94rem;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        width: min(100%, 228px);
        height: 78px;
    }
}

@media (max-width: 460px) {
    :root {
        --header-height: 224px;
    }



    .home-slide__content {
        padding-bottom: 138px;
    }

    .home-slider__meta {
        display: none;
    }

    .home-slider__dots {
        bottom: 24px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        width: min(100%, 214px);
        height: 74px;
    }
}

/* --------------------------------------------------------------------------
   Correctifs v5 — slider sans flou et logo footer à hauteur maîtrisée
   --------------------------------------------------------------------------
   Objectif :
   - supprimer tout effet de flou sur le slider d'accueil ;
   - conserver une lecture nette des textes grâce à des aplats transparents ;
   - garantir l'affichage complet du logo dans le footer sur desktop, tablette
     et mobile.
*/

/* Slider : aucune image ni aucun bloc du slide ne doit recevoir de flou. */
.home-slide img {
    filter: none;
}

.home-slide__copy,
.home-slide__points li,
.home-slide__panel,
.home-slider__meta,
.home-slider__arrow {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Le fond du texte reste lisible, mais il n'est plus flouté. */
.home-slide__copy {
    background: linear-gradient(90deg, rgba(var(--color-grey-900-rgb), 0.72), rgba(var(--color-grey-900-rgb), 0.34) 72%, transparent);
}

.home-slide__points li,
.home-slide__panel,
.home-slider__meta,
.home-slider__arrow {
    background-color: rgba(var(--color-grey-900-rgb), 0.58);
}

.home-slide__panel {
    background: linear-gradient(135deg, rgba(var(--color-grey-900-rgb), 0.70), rgba(var(--color-blue-800-rgb), 0.46));
}

.home-slider__meta {
    background: rgba(var(--color-grey-900-rgb), 0.78);
}

/* Footer : le cadre contrôle la hauteur, le logo remplit 100% sans être coupé. */
.site-footer .brand--footer {
    width: min(100%, 270px);
    height: 96px;
    display: inline-flex;
    align-items: stretch;
    margin-bottom: 1rem;
}

.brand--footer .brand__logo-wrap,
.brand__logo-wrap--footer {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0.58rem 0.78rem;
    overflow: visible;
}

.brand--footer .brand__logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0;
}

/* Tablette : logo footer légèrement réduit, toujours en height: 100%. */
@media (max-width: 1080px) {
    .site-footer .brand--footer {
        width: min(100%, 252px);
        height: 90px;
    }
}

@media (max-width: 760px) {
    .site-footer .brand--footer {
        width: min(100%, 232px);
        height: 84px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        height: 100%;
        padding: 0.52rem 0.68rem;
    }
}

@media (max-width: 460px) {
    .site-footer .brand--footer {
        width: min(100%, 214px);
        height: 78px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        height: 100%;
        padding: 0.48rem 0.62rem;
    }
}

/* --------------------------------------------------------------------------
   Correctifs v6 — slider net immédiatement et logo footer encadré responsive
   --------------------------------------------------------------------------
   Objectif :
   - aucune transition de scale sur les images du slider ;
   - aucun filtre, flou, grille ou effet de verre sur le slider ;
   - affichage immédiat de l'image active sans phase visuelle floue ;
   - logo du footer contenu dans un cadre plus haut et responsive.
*/

/* La bannière reste nette : le slider ne doit jamais être transformé ni filtré. */
.home-slide,
.home-slide.is-active,
.home-slide img,
.home-slide.is-active img {
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
}

/* Changement de slide instantané : pas de fondu initial ni de resampling GPU. */
.home-slide {
    opacity: 0;
    visibility: hidden;
    transition: none !important;
}

.home-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Suppression de la trame décorative qui pouvait donner un rendu moins net. */
.home-slide__grain {
    display: none !important;
}

/* Les blocs de texte restent lisibles sans effet de verre/flou. */
.home-slide__copy,
.home-slide__points li,
.home-slide__panel,
.home-slider__meta,
.home-slider__arrow {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* L'image de slide occupe le fond immédiatement et proprement. */
.home-slide img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
}

/* Footer : cadre dimensionné pour contenir un logo plus vertical sans débordement. */
.site-footer .brand--footer {
    width: min(100%, 310px);
    height: 205px;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 1.15rem;
}

.brand--footer .brand__logo-wrap,
.brand__logo-wrap--footer {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
    border-radius: 26px;
}

.brand--footer .brand__logo,
.brand__logo-wrap--footer .brand__logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1080px) {
    .site-footer .brand--footer {
        width: min(100%, 285px);
        height: 188px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        padding: 0.9rem;
    }
}

@media (max-width: 760px) {
    .site-footer .brand--footer {
        width: min(100%, 255px);
        height: 170px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        padding: 0.78rem;
        border-radius: 22px;
    }
}

@media (max-width: 460px) {
    .site-footer .brand--footer {
        width: min(100%, 225px);
        height: 152px;
    }

    .brand--footer .brand__logo-wrap,
    .brand__logo-wrap--footer {
        padding: 0.68rem;
        border-radius: 20px;
    }
}


/* --------------------------------------------------------------------------
   Carte v7 — zone d'activité pleine largeur avec OpenFreeMap + MapLibre
   -------------------------------------------------------------------------- */
.map-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-white), var(--color-blue-50));
}

.map-section__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
    padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.map-section__intro .section-heading {
    margin-bottom: 0;
}

.map-section__facts {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-section__facts li {
    position: relative;
    padding: 0.78rem 1rem 0.78rem 2.35rem;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.16);
    border-radius: 999px;
    color: var(--color-blue-900);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(var(--color-grey-900-rgb), 0.06);
    font-size: 0.94rem;
    font-weight: 700;
}

.map-section__facts li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--color-green-500);
    transform: translateY(-50%);
    box-shadow: 0 0 0 6px rgba(var(--color-green-500-rgb), 0.12);
}

.map-section__fullbleed {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-top: 1px solid rgba(var(--color-blue-500-rgb), 0.18);
    border-bottom: 1px solid rgba(var(--color-blue-500-rgb), 0.16);
    background: linear-gradient(135deg, var(--color-blue-50), var(--color-green-100));
}

.activity-map__canvas {
    width: 100%;
    height: clamp(430px, 72vh, 760px);
    min-height: 430px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-blue-100), var(--color-green-100));
}

.maplibregl-map {
    font-family: var(--font-main);
}

.maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(var(--color-blue-900-rgb), 0.18);
}

.maplibregl-ctrl-group button {
    color: var(--color-blue-950);
}

.maplibregl-ctrl-group button:hover,
.maplibregl-ctrl-group button:focus-visible {
    background: rgba(var(--color-blue-500-rgb), 0.10);
}

.maplibregl-popup-content {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.28);
    border-radius: 16px;
    color: var(--color-grey-900);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 46px rgba(var(--color-blue-900-rgb), 0.20);
}

.maplibregl-popup-content strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-blue-950);
}

.maplibregl-popup-content span {
    color: var(--color-grey-700);
    font-size: 0.9rem;
}

.activity-map__marker {
    width: 24px;
    height: 24px;
    display: block;
    border: 4px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-map-marker, var(--color-green-500));
    box-shadow: 0 0 0 9px rgba(var(--color-green-500-rgb), 0.20), 0 14px 32px rgba(var(--color-grey-900-rgb), 0.26);
    cursor: pointer;
    transition: box-shadow 0.18s ease;
}

.activity-map__marker:hover,
.activity-map__marker:focus-visible {
    box-shadow: 0 0 0 11px rgba(var(--color-green-500-rgb), 0.24), 0 18px 40px rgba(var(--color-grey-900-rgb), 0.28);
}

.activity-map__marker:focus-visible {
    outline: 3px solid rgba(var(--color-blue-500-rgb), 0.58);
    outline-offset: 4px;
}

.map-section__overlay {
    position: absolute;
    left: max(20px, calc((100vw - var(--container)) / 2));
    bottom: 26px;
    width: min(430px, calc(100% - 40px));
    padding: 1rem 1.1rem;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.32);
    border-radius: 22px;
    color: var(--color-grey-900);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(var(--color-blue-50-rgb), 0.92));
    box-shadow: 0 22px 60px rgba(var(--color-blue-900-rgb), 0.16);
}

.map-section__overlay::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-green-500), var(--color-blue-500));
}


.map-section__overlay strong,
.map-section__overlay span {
    display: block;
}

.map-section__overlay strong {
    margin-bottom: 0.2rem;
    padding-left: 0.72rem;
    color: var(--color-blue-950);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-section__overlay span {
    padding-left: 0.72rem;
    color: var(--color-grey-700);
    font-size: 0.92rem;
}

.map-noscript {
    width: min(100% - 40px, 760px);
    margin: 0 auto;
    padding: 2rem;
    color: var(--color-blue-900);
    text-align: center;
}

.activity-map__canvas.is-unavailable {
    display: grid;
    place-items: center;
}

@media (max-width: 860px) {
    .map-section__intro {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .activity-map__canvas {
        height: 62vh;
        min-height: 390px;
    }

    .map-section__overlay {
        left: 20px;
        bottom: 18px;
    }
}

@media (max-width: 540px) {
    .map-section {
        padding-top: 3rem;
    }

    .activity-map__canvas {
        height: 560px;
        min-height: 560px;
    }

    .map-section__facts li {
        border-radius: 18px;
        line-height: 1.45;
    }

    .map-section__overlay {
        bottom: 14px;
        padding: 0.9rem;
        border-radius: 18px;
    }
}

/* --------------------------------------------------------------------------
   Version finale v9 — page Avant / Après, carte complétée avec Passa,
   et finition des mentions légales.
   -------------------------------------------------------------------------- */
.page-hero--gallery {
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--color-blue-500-rgb), 0.16), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(var(--color-green-500-rgb), 0.13), transparent 30%),
        linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

.before-after-grid {
    display: grid;
    gap: clamp(1.2rem, 3vw, 2rem);
}

.before-after-card {
    padding: clamp(1rem, 2.4vw, 1.45rem);
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.14);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-card);
}

.before-after-card__header {
    max-width: 850px;
    margin-bottom: 1.1rem;
}

.before-after-card__header span {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.32rem 0.72rem;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.16);
    border-radius: 999px;
    color: var(--color-blue-900);
    background: var(--color-blue-50);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.before-after-card__header h2 {
    margin-bottom: 0.4rem;
    color: var(--color-blue-950);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    line-height: 1.18;
}

.before-after-card__header p {
    max-width: 760px;
    margin-bottom: 0;
}

.comparison-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 2.2vw, 1.2rem);
}

.comparison-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--color-grey-100);
    min-height: 260px;
}

.comparison-item img {
    width: 100%;
    height: clamp(250px, 30vw, 380px);
    object-fit: cover;
    transition: transform 0.35s ease;
}

.before-after-card:hover .comparison-item img {
    transform: scale(1.025);
}

.comparison-item figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    color: var(--color-white);
    background: rgba(var(--color-grey-900-rgb), 0.86);
    box-shadow: 0 14px 34px rgba(var(--color-grey-900-rgb), 0.2);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comparison-item--after figcaption {
    background: rgba(var(--color-green-500-rgb), 0.94);
}

.gallery-note {
    display: grid;
    gap: 0.25rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border: 1px dashed rgba(var(--color-blue-500-rgb), 0.36);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(244, 252, 255, 0.9), rgba(255, 255, 255, 0.96));
}

.gallery-note h2 {
    margin-bottom: 0.2rem;
    color: var(--color-blue-950);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.gallery-note p {
    margin-bottom: 0;
}

.legal-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.55rem;
    color: var(--color-blue-950);
    font-size: clamp(1.22rem, 2vw, 1.55rem);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .comparison-pair {
        grid-template-columns: 1fr;
    }

    .before-after-card {
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    .before-after-card {
        padding: 0.82rem;
    }

    .comparison-item {
        border-radius: 18px;
    }

    .comparison-item img {
        height: 245px;
    }

    .comparison-item figcaption {
        left: 10px;
        bottom: 10px;
        font-size: 0.75rem;
    }
}


/* --------------------------------------------------------------------------
   Version finale v10 — page Avant / Après prête pour publication.
   Les images existantes sont conservées ; seule la mise en page éditoriale,
   la lisibilité et la finition visuelle sont renforcées.
   -------------------------------------------------------------------------- */
.page-hero--gallery-final {
    position: relative;
    padding: clamp(4.5rem, 7vw, 7rem) 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(var(--color-blue-500-rgb), 0.18), transparent 32%),
        radial-gradient(circle at 92% 20%, rgba(var(--color-green-500-rgb), 0.14), transparent 30%),
        linear-gradient(145deg, #f7fcff 0%, #ffffff 58%, #eaf8ff 100%);
}

.page-hero--gallery-final::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-blue-500-rgb), 0.28), transparent);
}

.gallery-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.gallery-hero-copy h1 {
    max-width: 880px;
    margin-bottom: 1rem;
    color: var(--color-blue-950);
    font-size: clamp(2.25rem, 5vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.gallery-hero-copy p {
    max-width: 780px;
    margin-bottom: 1.35rem;
    color: var(--color-grey-700);
    font-size: clamp(1rem, 1.3vw, 1.1rem);
}

.gallery-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-hero-tags li {
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.18);
    border-radius: 999px;
    color: var(--color-blue-900);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    font-weight: 850;
    box-shadow: 0 10px 25px rgba(var(--color-grey-900-rgb), 0.05);
}

.gallery-hero-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 2rem);
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.24);
    border-radius: 30px;
    background:
        radial-gradient(circle at 86% 8%, rgba(var(--color-green-500-rgb), 0.18), transparent 34%),
        linear-gradient(145deg, rgba(var(--color-blue-50-rgb), 0.98), rgba(var(--color-blue-100-rgb), 0.94));
    box-shadow: var(--shadow-soft);
}

.gallery-hero-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -58px;
    top: -62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-blue-300-rgb), 0.26), transparent 65%);
}

.gallery-hero-card span,
.gallery-hero-card strong,
.gallery-hero-card p {
    position: relative;
    z-index: 1;
}

.gallery-hero-card span {
    display: inline-flex;
    margin-bottom: 0.9rem;
    padding: 0.38rem 0.74rem;
    border-radius: 999px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-blue-800), var(--color-blue-500));
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gallery-hero-card strong {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--color-blue-950);
    font-size: clamp(1.35rem, 2vw, 1.72rem);
    line-height: 1.13;
    letter-spacing: -0.035em;
}

.gallery-hero-card p {
    margin-bottom: 0;
    color: var(--color-grey-700);
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.proof-card {
    padding: 1.2rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.proof-card h3 {
    margin-bottom: 0.45rem;
    color: var(--color-blue-950);
    font-size: 1.05rem;
}

.proof-card p {
    margin-bottom: 0;
    color: var(--color-grey-600);
    font-size: 0.94rem;
}

.section-heading--center {
    max-width: 820px;
    margin-bottom: clamp(1.7rem, 4vw, 2.6rem);
    text-align: center;
}

.section-heading--center .section-kicker {
    justify-content: center;
}

.section-heading--center p {
    margin-left: auto;
    margin-right: auto;
}

.before-after-section {
    position: relative;
}

.before-after-grid--final {
    gap: clamp(1.6rem, 3.6vw, 2.6rem);
}

.before-after-card--final {
    padding: clamp(1rem, 2.4vw, 1.65rem);
    border: 1px solid rgba(var(--color-blue-500-rgb), 0.18);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top right, rgba(var(--color-blue-500-rgb), 0.12), transparent 36%);
    box-shadow: 0 24px 60px rgba(var(--color-grey-900-rgb), 0.08);
}

.before-after-card__header--final {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.before-after-number {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--color-blue-900);
    background: var(--color-blue-50);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.comparison-pair--final {
    position: relative;
    gap: clamp(0.9rem, 2vw, 1.15rem);
}

.comparison-pair--final::after {
    content: "↔";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: var(--color-blue-950);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 34px rgba(var(--color-grey-900-rgb), 0.16);
    font-weight: 900;
    z-index: 3;
}

.before-after-card--final .comparison-item {
    min-height: 320px;
    border-radius: 26px;
    outline: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(var(--color-grey-900-rgb), 0.04);
}

.before-after-card--final .comparison-item img {
    display: block;
    height: clamp(285px, 32vw, 430px);
}

.before-after-card--final:hover .comparison-item img {
    transform: none;
}

.before-after-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 2.6vw, 1.8rem);
    align-items: start;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.result-line {
    margin-bottom: 0;
    color: var(--color-blue-950);
    font-weight: 850;
    line-height: 1.55;
}

.detail-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detail-list li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--color-grey-700);
    font-size: 0.96rem;
}

.detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-green-500));
    box-shadow: 0 0 0 4px rgba(var(--color-blue-500-rgb), 0.12);
}

.process-layout--gallery {
    align-items: center;
}

.gallery-note--final {
    border-style: solid;
    border-color: rgba(var(--color-green-500-rgb), 0.22);
    background:
        radial-gradient(circle at top right, rgba(var(--color-green-500-rgb), 0.14), transparent 35%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 255, 0.82));
}

@media (max-width: 1080px) {
    .gallery-hero-layout,
    .before-after-card__footer {
        grid-template-columns: 1fr;
    }

    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .comparison-pair--final::after {
        top: 50%;
        left: auto;
        right: 18px;
        transform: translateY(-50%);
    }

    .before-after-card--final .comparison-item {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .page-hero--gallery-final {
        padding: 3.5rem 0;
    }

    .gallery-hero-copy h1 {
        font-size: clamp(2rem, 12vw, 3.1rem);
    }

    .proof-grid {
        grid-template-columns: 1fr;
    }

    .before-after-card__header--final {
        grid-template-columns: 1fr;
    }

    .before-after-number {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 15px;
    }

    .before-after-card--final {
        border-radius: 24px;
    }

    .before-after-card--final .comparison-item {
        border-radius: 18px;
    }

    .before-after-card--final .comparison-item img {
        height: 250px;
    }

    .comparison-pair--final::after {
        width: 36px;
        height: 36px;
        right: 12px;
    }
}

/* Formulaire de contact sécurisé — messages de retour */
.form-message {
    grid-column: 1 / -1;
    margin: 0 0 1.35rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(var(--color-blue-900-rgb), 0.14);
    background: rgba(244, 252, 255, 0.82);
    color: var(--color-blue-950);
    box-shadow: 0 16px 40px rgba(var(--color-blue-900-rgb), 0.08);
}

.form-message strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.98rem;
}

.form-message ul {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    color: var(--color-grey-700);
}

.form-message--success {
    border-color: rgba(var(--color-green-500-rgb), 0.25);
    background: linear-gradient(135deg, rgba(var(--color-green-500-rgb), 0.14), rgba(255, 255, 255, 0.96));
}

.form-message--error {
    border-color: rgba(190, 44, 44, 0.22);
    background: linear-gradient(135deg, rgba(190, 44, 44, 0.1), rgba(255, 255, 255, 0.96));
}

.contact-form button[type="submit"] {
    justify-self: start;
}

@media (max-width: 640px) {
    .form-message {
        border-radius: 16px;
        padding: 0.9rem;
    }

    .contact-form button[type="submit"] {
        width: 100%;
        justify-content: center;
    }
}

/* Formulaire — compteur de sécurité dynamique */
.form-countdown-help {
    margin: -0.1rem 0 0;
    color: var(--color-grey-600);
    font-size: 0.9rem;
}

.contact-form button[disabled],
.contact-form button.is-disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
}

/* --------------------------------------------------------------------------
   Correctifs v20 — suppression du décalage horizontal sur mobile/tablette
   --------------------------------------------------------------------------
   Problème traité : certains blocs pleine largeur utilisaient 100vw. Sur les
   navigateurs desktop et certains affichages réduits, 100vw inclut la largeur
   de la barre de défilement verticale, ce qui peut créer un débordement de
   quelques pixels. Résultat : un espace blanc apparaît à droite lorsque l'on
   force un déplacement horizontal.

   Solution :
   - le document ne doit jamais pouvoir défiler horizontalement ;
   - les blocs pleine largeur doivent rester dans la largeur réelle du viewport ;
   - la carte reste visuellement pleine largeur sans recourir à 100vw ;
   - les textes longs du header peuvent se casser proprement sur petits écrans.
*/

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

body {
    position: relative;
}

main,
.site-header,
.site-footer,
section,
.logo-strip,
.main-nav,
.top-bar {
    max-width: 100%;
}

*,
*::before,
*::after {
    min-width: 0;
}

.container,
.narrow-container {
    max-width: 100%;
}

/* Les textes longs du bandeau haut ne doivent jamais élargir la page. */
.top-bar__inner,
.logo-strip__inner,
.main-nav__inner,
.footer-bottom__inner {
    min-width: 0;
    max-width: 100%;
}

.top-bar__inner span,
.logo-strip__text,
.logo-strip__text span,
.footer-col,
.footer-col p,
.footer-col a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.top-bar__inner a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Le menu mobile reste strictement dans la largeur de l'écran. */
.nav-panel {
    max-width: calc(100% - 40px);
}

@media (max-width: 1080px) {
    .nav-panel {
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
    }
}

@media (max-width: 520px) {
    .nav-panel {
        left: 14px;
        right: 14px;
    }
}

/* La carte est déjà hors .container : width: 100% suffit et évite l'overflow 100vw. */
.map-section__fullbleed {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
}

.activity-map__canvas,
.maplibregl-map,
.maplibregl-canvas-container,
.maplibregl-canvas,
.maplibregl-control-container {
    max-width: 100%;
}

.map-section__overlay {
    max-width: calc(100% - 40px);
}

@media (max-width: 540px) {
    .map-section__overlay {
        left: 14px;
        width: calc(100% - 28px);
        max-width: calc(100% - 28px);
    }
}

/* Les images et médias ne peuvent pas forcer la largeur du document. */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   Correctifs v21 — slider mobile avec contenu complet
   --------------------------------------------------------------------------
   Objectif : empêcher que les boutons du slide soient masqués lorsque le titre
   ou le texte est long sur mobile/tablette. La zone du slider peut maintenant
   grandir suffisamment, les métadonnées basses sont masquées sur petits écrans
   et les boutons deviennent compacts mais entièrement lisibles.
*/
.home-slider,
.home-slide__content {
    min-height: max(640px, calc(100svh - var(--header-height)));
}

.home-slider .btn {
    white-space: normal;
    text-align: center;
}

@media (max-width: 980px) {
    .home-slide__title {
        font-size: clamp(2rem, 5.8vw, 3.45rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .home-slide__lead {
        max-width: 620px;
        font-size: 0.98rem;
        line-height: 1.58;
    }

    .home-slide__panel {
        padding: 1.05rem;
    }
}

@media (max-width: 860px) {
    .home-slider,
    .home-slide__content {
        min-height: max(680px, calc(100svh - var(--header-height)));
    }

    .home-slide__content {
        align-items: center;
        padding-top: 26px;
        padding-bottom: 78px;
    }

    .home-slide__layout {
        gap: 1rem;
    }

    .home-slide__copy {
        max-width: 680px;
    }

    .home-slide__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.78rem, 7.2vw, 2.7rem);
        line-height: 1.05;
        letter-spacing: -0.038em;
    }

    .home-slide__lead {
        font-size: 0.94rem;
        line-height: 1.48;
    }

    .home-slide__points {
        margin-top: 0.9rem;
    }

    .home-slide__points li {
        padding: 0.38rem 0.58rem;
        font-size: 0.78rem;
    }

    .home-slider .hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.65rem;
        margin-top: 1rem;
        max-width: 560px;
    }

    .home-slider .btn {
        width: 100%;
        min-height: 44px;
        padding: 0.66rem 0.82rem;
        font-size: 0.88rem;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    /* La bande basse prenait de la place et pouvait masquer les boutons. */
    .home-slider__meta {
        display: none;
    }

    .home-slider__dots {
        bottom: 22px;
    }
}

@media (max-width: 560px) {
    .home-slider,
    .home-slide__content {
        min-height: max(710px, calc(100svh - var(--header-height)));
    }

    .home-slide__shade {
        background:
            linear-gradient(90deg, rgba(var(--color-grey-900-rgb), 0.94) 0%, rgba(var(--color-grey-900-rgb), 0.78) 58%, rgba(var(--color-grey-900-rgb), 0.48) 100%),
            linear-gradient(180deg, rgba(var(--color-grey-900-rgb), 0.12), rgba(var(--color-grey-900-rgb), 0.42));
    }

    .home-slide__content {
        padding-top: 22px;
        padding-bottom: 74px;
    }

    .home-slide__copy {
        padding: 0.85rem 0.85rem 0.95rem;
    }

    .eyebrow--light {
        margin-bottom: 0.58rem;
        font-size: 0.68rem;
        letter-spacing: 0.07em;
    }

    .home-slide__title {
        max-width: 100%;
        font-size: clamp(1.5rem, 7.4vw, 2.05rem);
        line-height: 1.07;
    }

    .home-slide__lead {
        font-size: 0.88rem;
        line-height: 1.43;
    }

    .home-slider .hero-actions {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.9rem;
    }

    .home-slider .btn {
        min-height: 42px;
        padding: 0.62rem 0.76rem;
        font-size: 0.84rem;
    }

    .home-slider__arrow {
        width: 38px;
        height: 38px;
        font-size: 1.45rem;
    }

    .home-slider__arrow--prev {
        left: 10px;
    }

    .home-slider__arrow--next {
        right: 10px;
    }
}

@media (max-width: 390px) {
    .home-slider,
    .home-slide__content {
        min-height: max(735px, calc(100svh - var(--header-height)));
    }

    .home-slide__title {
        font-size: clamp(1.38rem, 7vw, 1.82rem);
    }

    .home-slide__lead {
        font-size: 0.84rem;
        line-height: 1.38;
    }

    .home-slide__points {
        margin-top: 0.72rem;
    }

    .home-slide__points li {
        font-size: 0.72rem;
        padding: 0.32rem 0.48rem;
    }
}

/* --------------------------------------------------------------------------
   Correctifs v24 — préchargeur progressif et cache navigateur
   --------------------------------------------------------------------------
   Le CSS critique du loader est intégré très tôt dans la page afin d'éviter
   l'affichage brut avant le chargement complet de la feuille principale.
*/
.site-loader,
.site-loader * {
    box-sizing: border-box;
}

.site-loader__card {
    backdrop-filter: none;
}

.site-loader__logo-frame {
    flex-shrink: 0;
}

.site-loader__logo {
    max-width: 100%;
    max-height: 100%;
}

.site-loader__progress {
    flex-shrink: 0;
}

.site-loader__progress-bar {
    will-change: width;
}

.site-loader__percent {
    user-select: none;
}

body.is-loading {
    touch-action: none;
}

body.is-ready {
    overflow-x: hidden;
}

@media (max-width: 760px) {
    .site-loader__text {
        font-size: .9rem;
    }
}

/* --------------------------------------------------------------------------
   v25 — liens rapides cliquables dans le bandeau logo
   --------------------------------------------------------------------------
   Les prestations affichées en haut à droite restent visuellement discrètes,
   mais chaque libellé pointe maintenant vers sa page dédiée.
*/
.logo-strip__quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.12rem 0.34rem;
    max-width: min(620px, 100%);
    color: var(--color-grey-700);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.logo-strip__quick-links a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.logo-strip__quick-links a:hover,
.logo-strip__quick-links a:focus-visible {
    color: var(--color-blue-800);
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-blue-500-rgb), 0.56);
}

.logo-strip__quick-links a:focus-visible {
    outline: 2px solid rgba(var(--color-blue-500-rgb), 0.38);
    outline-offset: 3px;
    border-radius: 6px;
}

.logo-strip__separator {
    color: rgba(71, 85, 105, 0.72);
}

@media (max-width: 760px) {
    .logo-strip__quick-links {
        justify-content: center;
        font-size: 0.78rem;
        gap: 0.08rem 0.28rem;
    }
}

@media (max-width: 420px) {
    .logo-strip__quick-links {
        max-width: 100%;
        font-size: 0.74rem;
        line-height: 1.42;
    }
}


/* Attribution de carte personnalisée : masquée par défaut, ouverte avec la bulle d'information. */
.map-attribution {
    position: absolute;
    right: clamp(10px, 2.4vw, 18px);
    bottom: clamp(10px, 2.4vw, 18px);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: calc(100% - 20px);
    pointer-events: none;
}

.map-attribution__toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: var(--color-blue-950);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(var(--color-grey-900-rgb), 0.22);
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.map-attribution__toggle:hover,
.map-attribution__toggle:focus-visible {
    transform: translateY(-1px);
    background: var(--color-white);
    box-shadow: 0 20px 44px rgba(var(--color-grey-900-rgb), 0.28);
}

.map-attribution__toggle:focus-visible {
    outline: 3px solid rgba(var(--color-blue-500-rgb), 0.42);
    outline-offset: 3px;
}

.map-attribution__panel {
    width: max-content;
    max-width: min(560px, calc(100vw - 28px));
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(var(--color-grey-900-rgb), 0.12);
    border-radius: 16px;
    color: var(--color-grey-700);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 50px rgba(var(--color-grey-900-rgb), 0.24);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    pointer-events: auto;
}

.map-attribution__panel[hidden] {
    display: none !important;
}

.map-attribution__panel a {
    color: inherit;
    text-decoration: none;
}

.map-attribution__panel a:hover,
.map-attribution__panel a:focus-visible {
    color: var(--color-blue-800);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.quick-link__label--short {
    display: none;
}

@media (max-width: 760px) {
    .logo-strip__quick-links {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.06rem 0.2rem;
        white-space: nowrap;
        font-size: clamp(0.72rem, 3vw, 0.82rem);
        line-height: 1.25;
        text-align: center;
    }

    .logo-strip__quick-links a {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .quick-link__label--full {
        display: none;
    }

    .quick-link__label--short {
        display: inline;
    }

    .logo-strip__separator {
        flex: 0 0 auto;
    }

    .map-attribution {
        right: 12px;
        bottom: 12px;
    }

    .map-attribution__toggle {
        width: 38px;
        height: 38px;
        font-size: 1.12rem;
    }

    .map-attribution__panel {
        max-width: calc(100vw - 24px);
        padding: 0.55rem 0.65rem;
        font-size: 0.74rem;
    }
}

@media (max-width: 380px) {
    .logo-strip__quick-links {
        font-size: 0.68rem;
        gap: 0.04rem 0.16rem;
    }
}


/* --------------------------------------------------------------------------
   v29 — header fixé uniquement sur ordinateur
   --------------------------------------------------------------------------
   Objectif :
   - sur grand écran : le header reste visible pendant le défilement ;
   - sur mobile et tablette : le header reste dans le flux normal de la page
     afin de préserver l’espace vertical et d’éviter les recouvrements.

   Le padding de .site-shell est piloté par --fixed-header-height, mesuré en
   JavaScript seulement lorsque le header est réellement en position fixed.
*/
:root {
    --fixed-header-height: 0px;
}

.site-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    transform: none;
}

.site-shell {
    padding-top: 0;
}

@media (min-width: 1081px) {
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        transform: translateZ(0);
    }

    .site-shell {
        padding-top: var(--fixed-header-height, var(--header-height));
    }

    .skip-link:focus {
        top: calc(var(--fixed-header-height, 0px) + 0.75rem);
    }
}

@media (max-width: 1080px) {
    .site-header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        transform: none;
    }

    .site-shell {
        padding-top: 0 !important;
    }
}

/*
   v30 — liens téléphone natifs
   Aucun script ne force l’ouverture de l’application téléphone.
   Les navigateurs mobiles gèrent les liens tel: directement.
*/

/* --------------------------------------------------------------------------
   Correctifs v31 — validation explicite du formulaire sur mobile et PC
   --------------------------------------------------------------------------
   Les bulles natives des navigateurs sont remplacées par des messages visibles,
   stables et cohérents sous chaque champ obligatoire.
*/
.form-message--client[hidden],
.field-error[hidden] {
    display: none !important;
}

.field-error {
    margin: 0.12rem 0 0;
    color: #a53030;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.4;
}

.form-row.is-invalid label {
    color: #8f2424;
}

.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid {
    border-color: rgba(190, 44, 44, 0.72);
    background: #fffafa;
    box-shadow: 0 0 0 4px rgba(190, 44, 44, 0.10);
}

.form-row input.is-invalid:focus,
.form-row select.is-invalid:focus,
.form-row textarea.is-invalid:focus {
    border-color: rgba(190, 44, 44, 0.88);
    box-shadow: 0 0 0 4px rgba(190, 44, 44, 0.16);
}

.form-message--client {
    margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
    .field-error {
        font-size: 0.86rem;
    }

    .form-message--client {
        margin-bottom: 0.1rem;
    }
}


/* --------------------------------------------------------------------------
   v34 — thème modifiable depuis la configuration éditoriale
   --------------------------------------------------------------------------
   Les couleurs et tailles principales sont exposées sous forme de variables
   et peuvent être surchargées sans modifier directement cette feuille.
*/
body {
    font-size: var(--fs-base);
}

.top-bar,
.logo-strip__text span,
.nav-link {
    font-size: var(--fs-nav);
}

.btn,
button,
input,
select,
textarea {
    font-size: var(--fs-button);
}

.section-kicker,
.eyebrow,
.eyebrow--light,
.page-hero__kicker,
.before-after-hero__kicker,
.map-section__kicker {
    font-size: var(--fs-kicker);
}

.page-hero h1,
.page-hero__content h1,
.before-after-hero h1,
.contact-hero h1,
.home-slide__title {
    font-size: var(--fs-hero-title);
}

.home-slide__title {
    font-size: var(--fs-slider-title);
}

.section-heading h2,
.map-section__content h2,
.before-after-section h2,
.content-card h2 {
    font-size: var(--fs-section-title);
}

.service-card h3,
.feature-card h3,
.content-card h3,
.before-after-card h3 {
    font-size: var(--fs-card-title);
}

.logo-strip {
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--color-blue-500-rgb), 0.12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), var(--color-blue-50));
}

.top-bar,
.section--blue,
.site-footer {
    background-color: var(--color-blue-950);
}

.btn--primary,
.nav-cta,
.home-slider .btn--primary {
    background: linear-gradient(135deg, var(--color-blue-700), var(--color-blue-500));
    color: var(--color-white);
    box-shadow: 0 16px 34px rgba(var(--color-blue-500-rgb), 0.30);
}

.btn--primary:hover,
.nav-cta:hover,
.home-slider .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-blue-500), var(--color-green-500));
}



.activity-map__marker {
    background: var(--color-blue-500);
    box-shadow: 0 0 0 10px rgba(var(--color-blue-500-rgb), 0.20), 0 12px 28px rgba(var(--color-blue-900-rgb), 0.24);
}

@media (max-width: 760px) {

}

@media (max-width: 460px) {

}


/* --------------------------------------------------------------------------
   v35 — thème commenté, slider harmonisé et logo header sans encadrement
   --------------------------------------------------------------------------
   Le logo du header n'utilise plus de cadre décoratif : seule l'image est
   affichée, avec un border-radius doux et une ombre légère. Les anciennes
   règles du cadre décoratif ont été retirées pour éviter les traces CSS mortes.
*/
.logo-strip {
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--color-blue-300-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(var(--color-green-500-rgb), 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), var(--color-blue-50));
}

.logo-strip__inner {
    min-height: 118px;
    padding-block: 0.95rem;
}

.brand--detached {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

.brand__logo--header {
    width: clamp(178px, 17vw, 228px);
    height: auto;
    max-height: 136px;
    object-fit: contain;
    border-radius: 24px;
    filter: drop-shadow(0 16px 28px rgba(var(--color-blue-900-rgb), 0.14));
}

.home-slider {
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--color-blue-300-rgb), 0.20), transparent 30%),
        linear-gradient(135deg, var(--color-blue-950), var(--color-blue-700));
}

.home-slide__shade {
    background:
        radial-gradient(circle at 72% 22%, rgba(var(--color-blue-300-rgb), 0.25), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(var(--color-green-500-rgb), 0.18), transparent 30%),
        linear-gradient(90deg,
            rgba(var(--color-blue-950-rgb), 0.86) 0%,
            rgba(var(--color-blue-900-rgb), 0.70) 43%,
            rgba(var(--color-blue-700-rgb), 0.36) 100%),
        linear-gradient(180deg, rgba(var(--color-blue-950-rgb), 0.15), rgba(var(--color-blue-950-rgb), 0.34));
}

.home-slide__copy {
    border-left-color: rgba(var(--color-green-500-rgb), 0.88);
    background: linear-gradient(90deg,
        rgba(var(--color-blue-950-rgb), 0.58),
        rgba(var(--color-blue-800-rgb), 0.24) 72%,
        transparent);
}

.home-slide__points li {
    border-color: rgba(var(--color-blue-100-rgb), 0.34);
    background: rgba(var(--color-blue-500-rgb), 0.16);
}

.home-slide__points li::before {
    background: linear-gradient(135deg, var(--color-blue-300), var(--color-green-500));
    box-shadow: 0 0 0 4px rgba(var(--color-green-500-rgb), 0.16);
}

.home-slide__panel {
    border-color: rgba(var(--color-blue-100-rgb), 0.26);
    background: linear-gradient(145deg,
        rgba(var(--color-blue-950-rgb), 0.42),
        rgba(var(--color-blue-700-rgb), 0.20));
    box-shadow: 0 22px 55px rgba(var(--color-blue-950-rgb), 0.26);
}

.home-slider__meta {
    background: linear-gradient(90deg,
        rgba(var(--color-blue-950-rgb), 0.76),
        rgba(var(--color-blue-700-rgb), 0.58));
}

.home-slider__dot.is-active {
    background: linear-gradient(90deg, var(--color-blue-100), var(--color-green-500));
}

.home-slider .btn--primary {
    background: linear-gradient(135deg, var(--color-blue-300), var(--color-green-500));
    color: var(--color-grey-900);
    box-shadow: 0 14px 34px rgba(var(--color-blue-300-rgb), 0.28);
}

.home-slider .btn--primary:hover {
    background: linear-gradient(135deg, var(--color-green-500), var(--color-blue-300));
}

@media (max-width: 760px) {
    .logo-strip__inner {
        min-height: 124px;
    }

    .brand__logo--header {
        width: min(54vw, 184px);
        max-height: 116px;
        border-radius: 21px;
    }
}

@media (max-width: 460px) {
    .brand__logo--header {
        width: min(58vw, 172px);
        max-height: 108px;
        border-radius: 20px;
    }
}


/* v36 — Nouvelle catégorie Nettoyage professionnel */
/* v37 — Harmonisation du cartouche Avant / Après avec les couleurs du thème */
.services-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.page-nettoyage-professionnel .page-hero,
.page-nettoyage-professionnel .content-card--accent {
    background:
        radial-gradient(circle at top right, rgba(var(--color-green-500-rgb), 0.16), transparent 34%),
        linear-gradient(180deg, var(--color-blue-50), var(--color-white));
}

.service-gallery-section {
    border-top: 1px solid rgba(var(--color-blue-300-rgb), 0.24);
    border-bottom: 1px solid rgba(var(--color-blue-300-rgb), 0.24);
}

.service-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.service-gallery-card {
    overflow: hidden;
    border: 1px solid rgba(var(--color-blue-300-rgb), 0.28);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.service-gallery-card img {
    display: block;
    width: 100%;
    height: clamp(240px, 26vw, 390px);
    object-fit: cover;
}

.service-gallery-card__body {
    padding: 1.35rem;
}

.service-gallery-card__body h3 {
    margin-bottom: 0.55rem;
    color: var(--color-blue-950);
    font-size: 1.15rem;
}

.service-gallery-card__body p {
    margin-bottom: 0;
    color: var(--color-grey-700);
}

@media (max-width: 760px) {
    .services-grid--auto,
    .service-gallery-grid {
        grid-template-columns: 1fr;
    }

    .service-gallery-card img {
        height: 240px;
    }
}


/* --------------------------------------------------------------------------
   v38 — slide éclatant, logo header agrandi et typographie élégante
   --------------------------------------------------------------------------
   Les titres du slider sont maintenant rendus en <h3> pour éviter une série
   de <h1> répétés dans le carrousel. Un <h1> masqué reste présent sur l’accueil
   pour conserver une structure SEO propre.
*/
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.logo-strip__inner {
    min-height: 120px;
    padding-block: 1.2rem;
}

.brand__logo--header {
    width: clamp(270px, 25vw, 350px);
    max-height: 120px;
    border-radius: 28px;
    filter: drop-shadow(0 22px 38px rgba(var(--color-blue-900-rgb), 0.18));
}

.home-slide__shade {
    background:
        radial-gradient(circle at 74% 24%, rgba(var(--color-blue-300-rgb), 0.24), transparent 34%),
        radial-gradient(circle at 20% 88%, rgba(var(--color-green-500-rgb), 0.18), transparent 30%),
        linear-gradient(90deg, rgba(var(--color-blue-950-rgb), 0.78) 0%, rgba(var(--color-blue-900-rgb), 0.54) 43%, rgba(var(--color-blue-500-rgb), 0.18) 100%),
        linear-gradient(180deg, rgba(var(--color-grey-900-rgb), 0.10), rgba(var(--color-grey-900-rgb), 0.32));
}

.home-slide__copy {
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.15rem, 2.15vw, 1.75rem);
    border-left: 3px solid var(--color-green-500);
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 30px 30px 0;
    background:
        linear-gradient(115deg, rgba(var(--color-blue-950-rgb), 0.76), rgba(var(--color-blue-800-rgb), 0.36) 56%, rgba(255,255,255,0.08) 100%),
        linear-gradient(90deg, rgba(var(--color-grey-900-rgb), 0.40), transparent 78%);
    box-shadow:
        0 28px 80px rgba(var(--color-blue-950-rgb), 0.20),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

.home-slide__copy::before,
.home-slide__copy::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.home-slide__copy::before {
    inset: -34% auto auto -18%;
    width: 62%;
    height: 118%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.26) 42%, transparent 68%);
    transform: rotate(13deg);
    opacity: 0.70;
}

.home-slide__copy::after {
    right: -16%;
    bottom: -34%;
    width: 44%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-green-500-rgb), 0.26), transparent 66%);
}

.home-slide__title {
    max-width: 760px;
    margin: 0 0 1.1rem;
    color: var(--color-white);
    font-size: var(--fs-slider-title);
    line-height: 1.01;
    letter-spacing: -0.055em;
    text-wrap: balance;
    text-shadow:
        0 3px 0 rgba(var(--color-blue-950-rgb), 0.12),
        0 16px 36px rgba(var(--color-grey-900-rgb), 0.32),
        0 0 34px rgba(var(--color-blue-300-rgb), 0.30);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .home-slide__title {
        background: linear-gradient(105deg, #ffffff 0%, #f5fdff 34%, var(--color-blue-100) 58%, #ffffff 78%, var(--color-green-100) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.home-slide__lead {
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 12px 30px rgba(var(--color-grey-900-rgb), 0.34);
}

.home-slide__panel {
    border-color: rgba(255, 255, 255, 0.30);
    background: linear-gradient(145deg, rgba(var(--color-blue-950-rgb), 0.58), rgba(var(--color-blue-800-rgb), 0.28));
    box-shadow: 0 26px 70px rgba(var(--color-blue-950-rgb), 0.24), inset 0 1px 0 rgba(255,255,255,0.20);
}

.home-slide__panel-label {
    color: var(--color-green-100);
}

.home-slide__panel strong,
.home-slide__panel p {
    color: var(--color-white) !important;
    text-shadow: 0 10px 26px rgba(var(--color-grey-900-rgb), 0.28);
}

.home-slide__panel p {
    opacity: 0.94;
}

.home-slide__points li {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(var(--color-blue-950-rgb), 0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.home-slider__dot.is-active {
    background: linear-gradient(90deg, var(--color-green-500), var(--color-blue-100), #ffffff);
}

@media (prefers-reduced-motion: no-preference) {
    .home-slide.is-active .home-slide__copy::before {
        animation: slideShineSweep 6.8s ease-in-out infinite;
    }
}

@keyframes slideShineSweep {
    0%, 56% { transform: translateX(-20%) rotate(13deg); opacity: 0.20; }
    74% { transform: translateX(68%) rotate(13deg); opacity: 0.82; }
    100% { transform: translateX(90%) rotate(13deg); opacity: 0.18; }
}

@media (max-width: 1180px) {
    .brand__logo--header {
        width: clamp(230px, 32vw, 300px);
        max-height: 178px;
    }

    .logo-strip__inner {
        min-height: 150px;
    }
}

@media (max-width: 760px) {
    .brand__logo--header {
        width: min(66vw, 240px);
        max-height: 144px;
        border-radius: 24px;
    }

    .logo-strip__inner {
        min-height: 138px;
    }

    .home-slide__title {
        font-size: clamp(1.72rem, 7.6vw, 2.55rem);
        line-height: 1.05;
    }
}

@media (max-width: 460px) {
    .brand__logo--header {
        width: min(70vw, 216px);
        max-height: 132px;
        border-radius: 22px;
    }

    .logo-strip__inner {
        min-height: 130px;
    }

    .home-slide__copy {
        padding: 0.95rem 0.9rem 1rem;
        border-radius: 0 24px 24px 0;
    }

    .home-slide__title {
        font-size: clamp(1.48rem, 7.2vw, 2rem);
        line-height: 1.08;
        letter-spacing: -0.038em;
    }
}