/**
 * Text Section — Section de contenu texte generique
 *
 * Titre h2, contenu HTML (paragraphes, listes), image optionnelle
 * a gauche ou a droite. Utilise pour vision-strategique etc.
 */

/* =============================================================================
   Section
   ============================================================================= */
.text-section {
    padding: var(--space-3xl) 0;
}

/* =============================================================================
   Inner layout — text only (no image)
   ============================================================================= */
.text-section__inner {
    max-width: var(--container-width);
}

/* =============================================================================
   Title
   ============================================================================= */
.text-section__title {
    font-size: var(--font-size-xlarge);
    font-weight: 500;
    color: var(--color-anthracite);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

/* =============================================================================
   Body — rich HTML content
   ============================================================================= */
.text-section__body {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: #444;
}

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

.text-section__body ul,
.text-section__body ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
}

.text-section__body ul {
    list-style: disc;
}

.text-section__body ol {
    list-style: decimal;
}

.text-section__body li {
    margin-bottom: var(--space-xs);
}

.text-section__body li::marker {
    color: var(--color-bleu);
}

.text-section__body strong {
    font-weight: 700;
    color: var(--color-anthracite);
}

.text-section__body a {
    color: var(--color-bleu);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.text-section__body a:hover {
    color: var(--color-bleu);
}

/* =============================================================================
   Optional CTA button
   ============================================================================= */
.text-section__cta {
    display: inline-block;
    margin-top: var(--space-lg);
}

/* =============================================================================
   Image
   ============================================================================= */
.text-section__media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* =============================================================================
   With-image variant — 2-column layout
   ============================================================================= */
.text-section--with-image .text-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.text-section--with-image .text-section__content {
    flex: 1;
    min-width: 0;
}

.text-section--with-image .text-section__media {
    flex-shrink: 0;
    width: 100%;
}

/* =============================================================================
   Mask & Badges (optionnel)
   ============================================================================= */
.text-section__media--overlay {
    overflow: visible;
}

.text-section__media--overlay img {
    border-radius: 0;
}

.text-section__img-wrapper {
    position: relative;
}

/* Blob mask — SVG inline URL-encoded */
.text-section__img-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;
}

.text-section__img-mask--blob img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Wave mask — landscape shape with circular cutouts */
.text-section__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;
}

.text-section__img-mask--wave img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 638 / 383;
    object-fit: cover;
}

/* Monogram mask — Vouchers Cloud coupon emblem */
.text-section__img-mask--monogram {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253.1 162.1'%3E%3Cpath d='M29.6,162.1h223.5v-59l-8-1.4c-10-1.8-17.2-10.5-17.2-20.7s7.2-18.9,17.2-20.7l8-1.4V0H0l29.6,162.1ZM233.7,19.3v24.3c-15,6-25.2,20.7-25.2,37.4s10.2,31.4,25.2,37.4v24.3h-97.1l21.6-123.5h75.5ZM90.4,57.5V19.3h48.3l-21.6,123.5H45.7L23.2,19.3h47.8v38.2h19.3Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253.1 162.1'%3E%3Cpath d='M29.6,162.1h223.5v-59l-8-1.4c-10-1.8-17.2-10.5-17.2-20.7s7.2-18.9,17.2-20.7l8-1.4V0H0l29.6,162.1ZM233.7,19.3v24.3c-15,6-25.2,20.7-25.2,37.4s10.2,31.4,25.2,37.4v24.3h-97.1l21.6-123.5h75.5ZM90.4,57.5V19.3h48.3l-21.6,123.5H45.7L23.2,19.3h47.8v38.2h19.3Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.text-section__img-mask--monogram img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 253.1 / 162.1;
    object-fit: cover;
}

/* Badge — floating pill */
.ts-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    white-space: nowrap;
    max-width: 260px;
}

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

.ts-badge--right {
    bottom: 21%;
    right: -5%;
}

.ts-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bleu);
    flex-shrink: 0;
    color: white;
}

.ts-badge__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.ts-badge__text {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-anthracite);
    line-height: 1.3;
    white-space: normal;
}

@media (min-width: 1024px) {
    .ts-badge {
        padding: 8px 20px 8px 8px;
        max-width: 300px;
    }

    .ts-badge__icon {
        width: 46px;
        height: 46px;
    }

    .ts-badge__icon svg {
        width: 26px;
        height: 26px;
    }

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

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

@media (min-width: 768px) {
    .text-section--with-image .text-section__inner {
        flex-direction: row;
        align-items: flex-start;
    }

    .text-section--with-image .text-section__media {
        width: 45%;
    }

    .text-section--with-image .text-section__content {
        width: 55%;
    }

    /* Image left: reverse the visual order */
    .text-section--image-left .text-section__inner {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1024px) {
    .text-section--with-image .text-section__media {
        width: 40%;
    }

    .text-section--with-image .text-section__content {
        width: 60%;
    }
}