/* === 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/legal-text.css === */
/**
 * Block: Legal Text
 * Pages juridiques — conteneur etroit avec typographie de lecture.
 */

.legal-text {
}

.legal-text__body {
    color: var(--color-anthracite);
    line-height: 1.75;
    font-size: var(--font-size-small);
}

/* Headings inside legal content */
.legal-text__body h1 {
    font-size: var(--font-size-large);
    margin-bottom: var(--space-xl);
    color: var(--color-vert-fonce);
}

.legal-text__body h2 {
    font-size: clamp(20px, 1.25rem + 0.5vw, 26px);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    color: var(--color-vert-fonce);
}

.legal-text__body h3 {
    font-size: clamp(18px, 1.125rem + 0.3vw, 22px);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    color: var(--color-anthracite);
}

/* Paragraphs */
.legal-text__body p {
    margin-bottom: var(--space-md);
}

/* Lists */
.legal-text__body ul,
.legal-text__body ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}

.legal-text__body ul {
    list-style: disc;
}

.legal-text__body ol {
    list-style: decimal;
}

.legal-text__body li {
    margin-bottom: var(--space-xs);
    line-height: 1.7;
}

.legal-text__body li::marker {
    color: var(--color-vert-fonce);
}

/* Links */
.legal-text__body a {
    color: var(--color-vert-fonce);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.legal-text__body a:hover {
    color: var(--color-orange);
}

/* Tables (for data processing tables in privacy policy, etc.) */
.legal-text__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
    font-size: var(--font-size-small);
}

.legal-text__body th,
.legal-text__body td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid #ddd;
    text-align: left;
}

.legal-text__body th {
    background: var(--color-beige);
    font-weight: 700;
    color: var(--color-vert-fonce);
}

/* Emphasis */
.legal-text__body strong {
    font-weight: 700;
}

/* Horizontal rules */
.legal-text__body hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: var(--space-xl) 0;
}

/* Blockquotes */
.legal-text__body blockquote {
    border-left: 3px solid var(--color-vert-fonce);
    padding-left: var(--space-lg);
    margin: var(--space-lg) 0;
    color: #555;
    font-style: italic;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .legal-text__body {
        font-size: 15px;
    }

    .legal-text__body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}