/**
 * Image Full — Image pleine largeur (edge-to-edge).
 *
 * Equivalent du bloc WordPress « wp-block-image alignfull ».
 * L'image sort du container et occupe 100 % du viewport.
 * Supporte un overlay optionnel avec titre, sous-titre et CTA.
 */

/* =============================================================================
   Section
   ============================================================================= */
.image-full {
    padding: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* =============================================================================
   Figure
   ============================================================================= */
.image-full__figure {
    margin: 0;
    line-height: 0;
    position: relative;
}

/* =============================================================================
   Image
   ============================================================================= */
.image-full__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Hero variant: fixed height with cover image */
.image-full--hero .image-full__img {
    height: 85vh;
    min-height: 500px;
    max-height: 900px;
}

/* =============================================================================
   Overlay (dark gradient for text readability)
   ============================================================================= */
.image-full__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* =============================================================================
   Content (title + subtitle + CTA)
   ============================================================================= */
.image-full__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg);
    color: #fff;
}

.image-full__title {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 0.6em;
    max-width: 800px;
}

.image-full__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    margin: 0 0 1.5em;
    max-width: 650px;
    opacity: 0.9;
}

.image-full__cta {
    margin-top: 0.5em;
    padding: 10px 28px;
    line-height: 1.6;
}

/* =============================================================================
   Caption (optional)
   ============================================================================= */
.image-full__caption {
    line-height: 1.5;
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    background: #f5f5f5;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .image-full--hero .image-full__img {
        height: 70vh;
        min-height: 400px;
    }

    .image-full__content {
        padding: var(--space-md);
    }
}