/* === css/main.css === */
/**
 * R-Advertising — Styles globaux
 *
 * Variables CSS, reset, typographie, layout, composants communs.
 * Basé sur le design system du site WordPress existant.
 */

/* =============================================================================
   CSS Variables (Design Tokens)
   ============================================================================= */
:root {
    /* Couleurs */
    --color-orange: #e55945;
    --color-vert-fonce: #124014;
    --color-olive: #babf73;
    --color-beige: #fcfaf2;
    --color-anthracite: #212621;
    --color-noir: #000000;
    --color-white: #ffffff;

    /* Typographie */
    --font-family: 'Manrope', sans-serif;
    --font-size-small: 14px;
    --font-size-base: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.5), 18px);
    --font-size-large: clamp(1.875rem, 1.875rem + ((1vw - 0.2rem) * 1.667), 46px);
    --font-size-xlarge: clamp(25px, 1.563rem + ((1vw - 3.2px) * 1.769), 42px);

    /* Espacements */
    --space-xs: 0.44rem;
    --space-sm: 0.67rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: 3.38rem;
    --space-3xl: 5.06rem;

    /* Ombres */
    --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Layout */
    --container-width: 1280px;
    --container-narrow: 860px;

    /* Boutons */
    --btn-radius: 14px;
    --btn-font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.208), 16px);
    --btn-padding: 10px 16px;
    --btn-font-weight: 600;
}

/* =============================================================================
   Background color utilities
   ============================================================================= */
.bg-white       { background-color: var(--color-white); }
.bg-beige       { background-color: var(--color-beige); }
.bg-vert-fonce  { background-color: var(--color-vert-fonce); }
.bg-anthracite  { background-color: var(--color-anthracite); }
.bg-orange      { background-color: var(--color-orange); }

/* =============================================================================
   Reset
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-anthracite);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =============================================================================
   Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: var(--font-size-large); }
h2 { font-size: var(--font-size-xlarge); }
h3 { font-size: clamp(20px, 1.25rem + 0.5vw, 26px); }
h4 { font-size: clamp(18px, 1.125rem + 0.3vw, 22px); }

p + p { margin-top: var(--space-md); }

/* =============================================================================
   Layout
   ============================================================================= */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container--narrow {
    max-width: var(--container-narrow);
}

main {
    min-height: 50vh;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
    display: inline-block;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    border-color: var(--color-vert-fonce);
}
.btn--primary:hover {
    background: #0d2e0f;
    border-color: #0d2e0f;
}

.btn--outline-green {
    background: transparent;
    color: var(--color-vert-fonce);
    border-color: var(--color-vert-fonce);
}
.btn--outline-green:hover {
    background: var(--color-vert-fonce);
    color: var(--color-white);
}

.btn--outline-white {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn--outline-white:hover {
    background: var(--color-white);
    color: var(--color-vert-fonce);
}

.btn--sm {
    padding: 6px 12px;
    font-size: var(--font-size-small);
}

/* =============================================================================
   Header
   ============================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-orange);
    color: var(--color-white);
    transition: background-color 0.3s;
}

/* Transparent header — le header se superpose au hero */
.has-transparent-header .site-header {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
}

.has-transparent-header .site-header.is-scrolled {
    position: fixed;
    background: var(--color-orange);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.75rem var(--space-lg);
    gap: var(--space-lg);
}

.header-logo img {
    width: 165px;
    height: auto;
}

/* Main navigation */
.main-nav { flex: 1; }

.nav-list {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
}

.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.nav-item.has-submenu .nav-link::after {
    display: none;
}

/* =============================================================================
   Minimenu — full-width banner dropdowns (Cas d'usage, Nous découvrir, Ressources)
   ============================================================================= */
.nav-item.has-minimenu { position: static; }

.minimenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    color: var(--color-anthracite);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    z-index: 110;
}
.minimenu.is-open { display: block; }

.minimenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    max-width: 1060px;
    margin: 0 auto;
    padding: var(--space-xl);
}

/* Ressources — 2 items → 2 columns centered */
#minimenu-ressources .minimenu__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
}

/* Keyboard accessibility */
.nav-item.has-minimenu:focus-within .minimenu { display: block; }

/* =============================================================================
   Megamenu — Expertises dropdown
   ============================================================================= */
.nav-item.has-megamenu {
    position: static;
}

.megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    color: var(--color-anthracite);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    border-top: 1px solid var(--color-orange);
    z-index: 110;
}

.megamenu.is-open {
    display: block;
}

.megamenu__inner {
    display: flex;
    max-width: 1060px;
    margin: 0 auto;
    min-height: 280px;
}

/* Left column — category list */
.megamenu__categories {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    padding: var(--space-lg) 0;
}

.megamenu__cat {
    position: relative;
}

.megamenu__cat a {
    display: block;
    padding: 0.875rem var(--space-xl);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-anthracite);
    transition: color 0.15s, background 0.15s;
}

.megamenu__cat:hover a,
.megamenu__cat.is-active a {
    color: var(--color-orange);
}

.megamenu__cat.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--color-orange);
    border-radius: 0 3px 3px 0;
}

/* Right column — card panels */
.megamenu__panels {
    flex: 1;
    padding: var(--space-xl);
    position: relative;
}

.megamenu__panel {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    align-content: start;
}

.megamenu__panel.is-active {
    display: grid;
}

/* Card */
.megamenu-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: 10px;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.megamenu-card:hover {
    background: var(--color-beige);
}

.megamenu-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.megamenu-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.megamenu-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-anthracite);
    line-height: 1.3;
}

.megamenu-card__desc {
    font-size: 12px;
    line-height: 1.5;
    color: #777;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
}
.header-phone svg { flex-shrink: 0; }
@media (max-width: 768px) {
    .header-phone__number { display: none; }
}

.lang-switch {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.8;
    padding: 4px 8px;
}
.lang-switch:hover { opacity: 1; }

.header-cta {
    font-size: 13px;
}

/* Burger menu (mobile) */
.burger-menu {
    display: none;
    width: 28px;
    height: 20px;
    position: relative;
}
.burger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    position: absolute;
    left: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.burger-menu span:nth-child(1) { top: 0; }
.burger-menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-menu span:nth-child(3) { bottom: 0; }

.burger-menu[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger-menu[aria-expanded="true"] span:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

/* =============================================================================
   Footer
   ============================================================================= */
.footer-newsletter {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}
.footer-newsletter__title {
    font-size: clamp(18px, 1.125rem + 0.5vw, 24px);
    margin-bottom: var(--space-xs);
}
.footer-newsletter__form {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.footer-newsletter__form input[type="email"] {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--btn-radius);
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    font-size: 14px;
}
.footer-newsletter__form input::placeholder { color: rgba(255,255,255,0.6); }

.footer-main {
    padding: var(--space-2xl) 0;
}
.footer-main__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2xl);
}

.footer-brand img { width: 460px; height: auto; margin-bottom: var(--space-md); }
.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.footer-social a {
    color: var(--color-anthracite);
    transition: color 0.2s;
}
.footer-social a:hover { color: var(--color-vert-fonce); }
.footer-tagline {
    font-size: var(--font-size-small);
    color: #666;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.footer-nav h3 {
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-sm);
    color: var(--color-vert-fonce);
}
.footer-nav a {
    display: block;
    font-size: var(--font-size-small);
    padding: 0.25rem 0;
    color: #555;
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--color-vert-fonce); }

.footer-certifs {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--space-xl) 0;
    border-top: 1px solid #eee;
    margin-top: var(--space-xl);
}

.footer-legal {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    padding: var(--space-sm) 0;
    font-size: 11px;
}
.footer-legal .container {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.footer-legal a, .footer-legal button {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    transition: color 0.2s;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--color-white); }

/* =============================================================================
   Blocks — Common
   ============================================================================= */
.block {
    padding: var(--space-3xl) 0;
}

/* =============================================================================
   Breadcrumb
   ============================================================================= */
.breadcrumb {
    padding: var(--space-md) 0;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    font-size: var(--font-size-small);
}
.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 0.25rem;
    color: #999;
}
.breadcrumb a { color: var(--color-vert-fonce); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: #666; }

/* =============================================================================
   Preview banner
   ============================================================================= */
.preview-banner {
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    padding: 0.5rem;
    font-size: 14px;
    font-weight: 600;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .footer-main__top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-nav { display: none; }
    .burger-menu { display: block; }
    .header-cta { display: none; }

    /* Mobile nav open — logo + burger au-dessus de l'overlay nav */
    body.nav-open .header-logo,
    body.nav-open .header-actions {
        position: relative;
        z-index: 103;
    }
    body.nav-open .main-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-orange);
        padding: 70px var(--space-lg) var(--space-lg);
        overflow-y: auto;
        z-index: 101;
    }
    body.nav-open .nav-list {
        flex-direction: column;
        gap: 0;
    }
    body.nav-open .megamenu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        border-radius: 0;
    }

    /* Minimenu mobile */
    body.nav-open .minimenu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        border-radius: 0;
        padding: var(--space-md);
        width: 100%;
        display: none;
    }
    body.nav-open .has-minimenu > .nav-link[aria-expanded="true"] + .minimenu {
        display: block;
    }
    body.nav-open .minimenu__grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }
    body.nav-open .minimenu .megamenu-card { padding: var(--space-sm) 0; }
    body.nav-open .minimenu .megamenu-card__icon { display: none; }
    body.nav-open .minimenu .megamenu-card__title { color: var(--color-white); }
    body.nav-open .minimenu .megamenu-card__desc { color: rgba(255,255,255,0.7); }
    body.nav-open .minimenu .megamenu-card:hover { background: rgba(255,255,255,0.1); }

    /* Megamenu mobile — vertical layout */
    body.nav-open .megamenu {
        display: none;
    }
    body.nav-open .has-megamenu > .nav-link[aria-expanded="true"] + .megamenu {
        display: block;
    }
    body.nav-open .megamenu__inner {
        flex-direction: column;
        min-height: auto;
    }
    body.nav-open .megamenu__categories {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding: var(--space-sm) 0;
    }
    body.nav-open .megamenu__cat a {
        color: var(--color-white);
        padding: 0.5rem 2rem;
        font-size: 14px;
    }
    body.nav-open .megamenu__cat.is-active a { color: var(--color-white); opacity: 1; }
    body.nav-open .megamenu__cat:not(.is-active) a { opacity: 0.7; }
    body.nav-open .megamenu__cat.is-active::before { background: var(--color-white); }
    body.nav-open .megamenu__panels { padding: var(--space-md); }
    body.nav-open .megamenu__panel.is-active { display: flex; flex-direction: column; gap: var(--space-sm); }
    body.nav-open .megamenu-card { padding: var(--space-sm) 0; }
    body.nav-open .megamenu-card__icon { display: none; }
    body.nav-open .megamenu-card__title { color: var(--color-white); }
    body.nav-open .megamenu-card__desc { color: rgba(255,255,255,0.7); }
    body.nav-open .megamenu-card:hover { background: rgba(255,255,255,0.1); }

    .footer-nav {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .footer-newsletter__form {
        flex-direction: column;
    }
}

/* =============================================================================
   Font face — Manrope
   ============================================================================= */
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-var.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* === css/blocks/hero-page.css === */
/**
 * Hero Page — Pages internes (services, a propos, juridique)
 *
 * Deux modes :
 * 1. Centré (défaut) — fond beige ou blanc, titre h1 centré, sous-titre.
 * 2. Avec image (.hero-page--with-image) — 2 colonnes : texte à gauche,
 *    image à droite. Reproduit le layout WordPress.
 */

/* =============================================================================
   Layout
   ============================================================================= */
.hero-page {
    padding: var(--space-2xl) 0 var(--space-xl);
}

.hero-page__inner {
    text-align: center;
}

/* =============================================================================
   Breadcrumb override (centered in hero)
   ============================================================================= */
.hero-page .breadcrumb {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--space-md);
}

.hero-page .breadcrumb ol {
    justify-content: center;
}

/* =============================================================================
   Title
   ============================================================================= */
.hero-page__title {
    font-size: var(--font-size-large);
    font-weight: 500;
    color: var(--color-anthracite);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}

.hero-page__title--massive {
    font-size: clamp(42px, 2.625rem + 3vw, 86px);
    font-weight: 500;
    line-height: 1.1;
}

/* =============================================================================
   Subtitle
   ============================================================================= */
.hero-page__subtitle {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    color: #555;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =============================================================================
   CTA Buttons
   ============================================================================= */
.hero-page__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Centered variant (no image) — center the buttons */
.hero-page:not(.hero-page--with-image) .hero-page__ctas {
    justify-content: center;
}

/* =============================================================================
   Two-column variant — image on right (matches WordPress layout)
   ============================================================================= */
.hero-page--with-image .hero-page__inner {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.hero-page--with-image .hero-page__subtitle {
    margin: 0;
    max-width: 100%;
}

.hero-page--with-image .breadcrumb ol {
    justify-content: flex-start;
}

.hero-page__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-page__media {
    flex-shrink: 0;
    width: 100%;
}

.hero-page__media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* =============================================================================
   Image-left variant — image à gauche, texte à droite
   ============================================================================= */
.hero-page--image-left .hero-page__media {
    order: -1;
}

/* =============================================================================
   Image Mask & Badges (pastilles) — optionnel
   ============================================================================= */

/* Allow badges to overflow the media column */
.hero-page__media--overlay {
    overflow: visible;
}

/* Wrapper — positioning context for badges */
.hero-page__img-wrapper {
    position: relative;
}

/* Mask container */
.hero-page__img-mask {
    display: block;
}

.hero-page__img-mask picture {
    display: block;
}

.hero-page__img-mask img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Blob mask shape (400×400 rounded with concave corners) */
.hero-page__img-mask--blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.hero-page__img-mask--blob img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-height: 480px;
}

/* Wave mask — landscape shape with circular cutouts */
.hero-page__img-mask--wave {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hero-page__img-mask--wave img {
    aspect-ratio: 638 / 383;
    object-fit: cover;
    max-height: 480px;
}

/* Badges (pastilles) — floating labels on the image */
.hero-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    z-index: 10;
    background: #fff;
    border-radius: 20px;
    padding: 5px 15px 5px 5px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    width: 220px;
    gap: 5px;
}

.hero-badge--left {
    top: 3%;
    left: 5%;
}

.hero-badge--right {
    bottom: 21%;
    right: 2%;
}

.hero-badge__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-orange);
    padding: 10px;
    box-sizing: border-box;
    height: 46px;
    width: 46px;
    transform: scale(0.7);
    color: var(--icon-color, white);
}

.hero-badge__icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.hero-badge__text {
    font-weight: 700;
    line-height: 20px;
    font-size: 12px;
    color: var(--color-anthracite);
}

@media (min-width: 1024px) {
    .hero-badge {
        width: 260px;
        gap: 10px;
        padding: 5px 20px 5px 5px;
    }

    .hero-badge__icon {
        transform: scale(1);
    }

    .hero-badge__text {
        font-size: 14px;
    }
}

/* =============================================================================
   Decorative circle background (motif WordPress)
   ============================================================================= */
.hero-page.has-circle-bg {
    position: relative;
    overflow: hidden;
}

.hero-page.has-circle-bg .hero-page__inner {
    position: relative;
    z-index: 1;
}

.hero-page .circle-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: min(50vw, 750px);
    pointer-events: none;
    color: #fcfbf2;
}

.hero-page .circle-bg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .hero-page {
        padding: var(--space-xl) 0 var(--space-lg);
    }

    .hero-page__subtitle {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .hero-page--with-image .hero-page__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2xl);
    }

    .hero-page__text {
        width: 55%;
        flex: none;
    }

    .hero-page__media {
        width: 45%;
    }
}

@media (min-width: 1024px) {
    .hero-page {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    .hero-page--with-image .hero-page__inner {
        gap: var(--space-3xl);
    }

    .hero-page__media img {
        border-radius: 20px;
    }
}

/* === css/blocks/text-intro.css === */
/**
 * Text Intro — Introduction textuelle
 *
 * Titre h2 centre + paragraphes. Barre d'accent optionnelle (orange).
 * Reproduit l'espacement et la typographie WordPress.
 */

/* =============================================================================
   Layout
   ============================================================================= */
.text-intro {
    padding: var(--space-2xl) 0;
}

.text-intro__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* =============================================================================
   Accent bar
   ============================================================================= */
.text-intro__accent-bar {
    width: 60px;
    height: 4px;
    background-color: var(--color-orange);
    border-radius: 2px;
    margin: 0 auto var(--space-xl);
}

/* =============================================================================
   Title
   ============================================================================= */
.text-intro__title {
    font-size: clamp(25px, 1.563rem + ((1vw - 3.2px) * 1.769), 42px);
    font-weight: 500;
    color: var(--color-vert-fonce);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.text-intro__title--orange {
    color: var(--color-orange);
}

.text-intro__title--massive {
    font-size: clamp(42px, 2.625rem + 3vw, 86px);
    font-weight: 500;
}

/* =============================================================================
   Body paragraphs
   ============================================================================= */
.text-intro__body {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: #444;
}

.text-intro__body p + p {
    margin-top: var(--space-md);
}

/* =============================================================================
   Accent variant — optional orange top border on section
   ============================================================================= */
.text-intro--accent {
    border-top: none; /* accent bar is internal, not a border */
}

/* =============================================================================
   Decorative circle background (motif WordPress)
   ============================================================================= */
.text-intro.has-circle-bg {
    position: relative;
    overflow: hidden;
}

.text-intro.has-circle-bg .text-intro__inner {
    position: relative;
    z-index: 1;
}

.text-intro .circle-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: min(50vw, 750px);
    pointer-events: none;
    color: #fcfbf2;
}

.text-intro .circle-bg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .text-intro {
        padding: var(--space-xl) 0;
    }

    .text-intro__inner {
        text-align: left;
    }

    .text-intro__accent-bar {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .text-intro__body {
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    }
}

/* === css/blocks/service-features.css === */
/**
 * Block: Service Features
 * Grille de fonctionnalites pour les pages services.
 */

.service-features {
}

/* Section title */
.service-features__section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 500;
    color: var(--color-anthracite);
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* CTA */
.service-features__cta {
    text-align: center;
    margin-top: var(--space-xl);
}

/* Grid layout */
.service-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Feature item */
.service-features__item {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--space-xl);
    box-shadow: var(--shadow-light);
    transition: box-shadow 0.3s, transform 0.3s;
}

.service-features__item:hover {
    box-shadow: var(--shadow-natural);
    transform: translateY(-4px);
}

/* Icon */
.service-features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--color-beige);
    color: var(--color-vert-fonce);
    margin-bottom: var(--space-lg);
}

.service-features__icon svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}

/* Title */
.service-features__title {
    font-size: clamp(18px, 1.125rem + 0.3vw, 22px);
    color: var(--color-anthracite);
    margin-bottom: var(--space-sm);
}

/* Description */
.service-features__desc {
    color: #555;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* Bullet list */
.service-features__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features__bullets li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-xs);
    line-height: 1.6;
    color: #555;
}

.service-features__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-olive);
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .service-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .service-features__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .service-features__item {
        padding: var(--space-lg);
    }
}

/* === css/blocks/showcase-cards.css === */
/**
 * Showcase Cards — Grille de cartes avec effet hover reveal
 *
 * Image visible par défaut, contenu bullet-list au survol.
 */

/* =============================================================================
   Layout
   ============================================================================= */
.showcase-cards {
    padding: var(--space-2xl) 0;
}

.showcase-cards__title {
    font-size: var(--font-size-large);
    font-weight: 500;
    color: var(--color-vert-fonce);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.showcase-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

/* =============================================================================
   Card
   ============================================================================= */
.showcase-card {
    background: var(--color-beige);
    border-radius: 16px;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    text-align: center;
    cursor: default;
}

/* Body — grid stacking to overlay image and content */
.showcase-card__body {
    display: grid;
    min-height: 280px;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.showcase-card__visual,
.showcase-card__reveal {
    grid-row: 1;
    grid-column: 1;
    transition: opacity 0.35s ease;
}

/* Image — visible by default */
.showcase-card__visual {
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}

.showcase-card__visual img {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Reveal content — hidden by default */
.showcase-card__reveal {
    opacity: 0;
    display: flex;
    align-items: center;
    padding: var(--space-sm);
}

.showcase-card__reveal ul {
    list-style: disc;
    text-align: left;
    padding-left: 1.2em;
    margin: 0;
}

.showcase-card__reveal li {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-anthracite);
    margin-bottom: 0.5em;
}

.showcase-card__reveal li:last-child {
    margin-bottom: 0;
}

/* Hover — swap image for content */
.showcase-card:hover .showcase-card__visual {
    opacity: 0;
}

.showcase-card:hover .showcase-card__reveal {
    opacity: 1;
}

/* =============================================================================
   Card title — always visible
   ============================================================================= */
.showcase-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-anthracite);
    line-height: 1.3;
    margin: 0;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .showcase-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .showcase-cards {
        padding: var(--space-xl) 0;
    }

    .showcase-cards__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .showcase-card__body {
        min-height: 220px;
    }

    .showcase-card__visual img {
        max-height: 200px;
    }
}

@media (max-width: 480px) {
    .showcase-cards__grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* =============================================================================
   Tap to reveal — JS toggle (touch + click)
   ============================================================================= */
.showcase-card.is-tapped .showcase-card__visual {
    opacity: 0;
}

.showcase-card.is-tapped .showcase-card__reveal {
    opacity: 1;
}

/* === css/blocks/features-with-image.css === */
/**
 * Features With Image — Image laterale + grille 2x2 de features + CTAs.
 *
 * Layout split sur fond beige : image ~40 % avec badges,
 * grille 2x2 features ~60 %, boutons CTA en bas.
 * Equivalent WordPress « qce-hp__vision ».
 */

/* =============================================================================
   Section
   ============================================================================= */
.features-with-image {
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

/* =============================================================================
   Inner — flex layout
   ============================================================================= */
.features-with-image__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    align-items: center;
}

/* =============================================================================
   Image column
   ============================================================================= */
.features-with-image__media {
    position: relative;
    width: 100%;
}

.features-with-image__media > img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

/* =============================================================================
   Image slider (multi-images)
   ============================================================================= */
.features-with-image__slider {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.features-with-image__slider .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.features-with-image__slider .swiper-button-prev,
.features-with-image__slider .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.features-with-image__slider .swiper-button-prev::after,
.features-with-image__slider .swiper-button-next::after {
    font-size: 14px;
}

.features-with-image__slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.features-with-image__slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-orange);
}

/* =============================================================================
   Badges overlaid on image
   ============================================================================= */
.features-with-image__badges {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.features-with-image__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-white);
    color: var(--color-anthracite);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.features-with-image__badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

/* =============================================================================
   Features column
   ============================================================================= */
.features-with-image__content {
    width: 100%;
}

/* =============================================================================
   Section title & subtitle
   ============================================================================= */
.features-with-image__section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 500;
    color: var(--color-anthracite);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.features-with-image__section-subtitle {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    line-height: 1.6;
    color: #555;
    margin-bottom: var(--space-xl);
}

/* =============================================================================
   2x2 grid
   ============================================================================= */
.features-with-image__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

/* =============================================================================
   Feature item
   ============================================================================= */
.features-with-image__item {
    padding: 0;
}

.features-with-image__icon {
    margin-bottom: var(--space-sm);
    color: var(--color-orange);
}

.features-with-image__icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.features-with-image__title {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 600;
    color: var(--color-anthracite);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.features-with-image__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #555;
}

/* =============================================================================
   CTA buttons
   ============================================================================= */
.features-with-image__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* =============================================================================
   Image masks (blob, wave)
   ============================================================================= */
.fwi-mask img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fwi-mask--blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M0 32C0 14.3 14.3 0 32 0h296c17.7 0 32 14.3 32 32v80c0 17.7-14.3 52-32 52h-8c-17.7 0-32 14.3-32 32v8c0 17.7 14.3 32 32 32h8c17.7 0 32 14.3 32 32v100c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V280c0-17.7 14.3-32 32-32h8c17.7 0 32-14.3 32-32v-8c0-17.7-14.3-32-32-32h-8C14.3 176 0 161.7 0 144V32Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M0 32C0 14.3 14.3 0 32 0h296c17.7 0 32 14.3 32 32v80c0 17.7-14.3 52-32 52h-8c-17.7 0-32 14.3-32 32v8c0 17.7 14.3 32 32 32h8c17.7 0 32 14.3 32 32v100c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V280c0-17.7 14.3-32 32-32h8c17.7 0 32-14.3 32-32v-8c0-17.7-14.3-32-32-32h-8C14.3 176 0 161.7 0 144V32Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fwi-mask--wave {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fwi-mask--wave img {
    aspect-ratio: 638 / 383;
}

/* When mask is used, disable the default border-radius */
.features-with-image__media .fwi-mask img {
    border-radius: 0;
}

/* =============================================================================
   Dark background variant — light text
   ============================================================================= */
.features-with-image--dark .features-with-image__section-title,
.features-with-image--dark .features-with-image__title {
    color: var(--color-orange);
}

.features-with-image--dark .features-with-image__section-subtitle,
.features-with-image--dark .features-with-image__desc {
    color: rgba(255, 255, 255, 0.85);
}

/* =============================================================================
   Desktop — side by side
   ============================================================================= */
@media (min-width: 768px) {
    .features-with-image__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-with-image__inner {
        flex-direction: row;
        align-items: stretch;
    }

    .features-with-image__media {
        width: 40%;
        flex-shrink: 0;
    }

    .features-with-image__media > img {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__slider {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__slider .swiper-slide img {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Image right: reverse order */
    .features-with-image--image-right .features-with-image__inner {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1280px) {
    .features-with-image__grid {
        gap: var(--space-2xl) var(--space-xl);
    }
}

/* === css/blocks/seo-expandable.css === */
/**
 * SEO Expandable — Block CSS
 *
 * Collapsible content block with gradient overlay.
 * Default collapsed height: 200px. Smooth expand/collapse
 * using max-height transition. Toggle button with circular
 * icon matching WordPress design.
 */

/* Section */
.block--seo-expandable {
}

/* Title */
.seo-expandable__title {
    margin-bottom: var(--space-xl);
    color: var(--color-vert-fonce);
}

/* Wrapper (relative for gradient positioning) */
.seo-expandable__wrapper {
    position: relative;
}

/* Content area */
.seo-expandable__content {
    line-height: 1.7;
    color: #444;
    transition: max-height 0.5s ease;
    overflow: hidden;
}

.seo-expandable__content.is-collapsed {
    max-height: 200px;
}

.seo-expandable__content.is-expanded {
    max-height: 3000px; /* generous upper bound for long content */
}

/* Inner HTML typography */
.seo-expandable__content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-vert-fonce);
    font-size: clamp(18px, 1.125rem + 0.3vw, 22px);
}

.seo-expandable__content p {
    margin-bottom: var(--space-md);
}

.seo-expandable__content ul,
.seo-expandable__content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.seo-expandable__content ul {
    list-style: disc;
}

.seo-expandable__content ol {
    list-style: decimal;
}

.seo-expandable__content li {
    margin-bottom: var(--space-xs);
}

.seo-expandable__content a {
    color: var(--color-vert-fonce);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.seo-expandable__content a:hover {
    color: var(--color-orange);
}

/* Gradient overlay (visible when collapsed) */
.seo-expandable__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--color-white) 10%, transparent 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.seo-expandable__gradient.is-hidden {
    opacity: 0;
}

/* Toggle button — circular icon with text */
.seo-expandable__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-xs) 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-vert-fonce);
    cursor: pointer;
    transition: color 0.2s;
}

.seo-expandable__toggle:hover {
    color: var(--color-orange);
}

.seo-expandable__toggle:focus-visible {
    outline: 2px solid var(--color-vert-fonce);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Arrow icon — circular container matching WordPress SVG toggle */
.seo-expandable__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-vert-fonce);
    transition: background-color 0.2s, transform 0.3s ease;
    flex-shrink: 0;
}

.seo-expandable__toggle-icon::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
    transform: rotate(45deg);
    margin-top: -2px;
}

.seo-expandable__toggle:hover .seo-expandable__toggle-icon {
    background: var(--color-orange);
}

/* When expanded, rotate arrow upward */
.seo-expandable__toggle[aria-expanded="true"] .seo-expandable__toggle-icon {
    transform: rotate(180deg);
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .seo-expandable__content.is-collapsed {
        max-height: 160px;
    }

    .seo-expandable__gradient {
        height: 80px;
    }
}

/* === css/blocks/cta-prefooter.css === */
/**
 * CTA Pre-footer — Appel a l'action avant le pied de page
 *
 * Deux variantes :
 * 1. Défaut — Fond beige, texte anthracite, bouton vert (style WordPress).
 * 2. .cta-prefooter--orange — Fond orange, texte blanc, bouton outline blanc.
 *
 * 2 colonnes : image gauche (coins arrondis), texte droite avec
 * h2 + paragraphe + bouton.
 */

/* =============================================================================
   Section — Default (beige, matches WordPress)
   ============================================================================= */
.cta-prefooter {
    color: var(--color-anthracite);
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

/* =============================================================================
   Inner layout
   ============================================================================= */
.cta-prefooter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
}

/* =============================================================================
   Image column
   ============================================================================= */
.cta-prefooter__media {
    flex-shrink: 0;
    width: 100%;
}

.cta-prefooter__media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* =============================================================================
   Text column
   ============================================================================= */
.cta-prefooter__content {
    width: 100%;
}

.cta-prefooter__title {
    font-size: var(--font-size-xlarge);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
    color: var(--color-anthracite);
}

.cta-prefooter__desc {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    color: #555;
}

/* =============================================================================
   Orange variant (legacy / optional)
   ============================================================================= */
.cta-prefooter--orange {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.cta-prefooter--orange .cta-prefooter__title {
    color: var(--color-white);
}

.cta-prefooter--orange .cta-prefooter__desc {
    color: var(--color-white);
    opacity: 0.92;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .cta-prefooter {
        padding: var(--space-2xl) 0;
    }

    .cta-prefooter__title {
        font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
    }
}

@media (min-width: 768px) {
    .cta-prefooter__inner {
        flex-direction: row;
        align-items: center;
    }

    .cta-prefooter__media {
        width: 50%;
    }

    .cta-prefooter__content {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .cta-prefooter__media img {
        border-radius: 20px;
        max-height: 400px;
    }

    .cta-prefooter__inner {
        gap: var(--space-3xl);
    }
}