:root {
    --avs-block-padding: 1rem;
    --image-height: auto;
}

/* Paragraph Background */
.paragraph--type--background {
    --paragraph-background-media-url: none;
    --paragraph-background-color-rgba: rgba(255, 255, 255, 1);
    --paragraph-background-opacity: 0.1;
}

/* Paragraph Section */
.paragraph--type--section {
    position: relative;
    z-index: 1;
}

.paragraph--type--section::after {
    content: "";
    width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100%;
    z-index: -1;

    background-color: var(--paragraph-background-color-rgba);
    background-image: var(--paragraph-background-media-url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--paragraph-background-opacity);

    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
}

/*Paragraph Block*/

.block-style-card {
    border-radius: 22px;
    background-color: #ffffff;
    border: 1px solid #e3efef;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Paragraph Image*/

.image-paragraph {
    height: var(--image-height);
    overflow: hidden;
}

.paragraph--type--block.p-0 { --avs-block-padding: 0rem; }
.paragraph--type--block.p-2 { --avs-block-padding: 0.5rem; }
.paragraph--type--block.p-3 { --avs-block-padding: 1rem; }
.paragraph--type--block.p-4 { --avs-block-padding: 1.5rem; }

.image-paragraph.full-width .field--name-field-media-image {
    width: 100%;
    height: var(--image-height);
    margin: 0;
}

.image-paragraph.full-block {
    margin-left: calc(-1 * var(--avs-block-padding));
    margin-right: calc(-1 * var(--avs-block-padding));
    width: calc(100% + (2 * var(--avs-block-padding)));
    max-width: none;
}

.image-paragraph.image-style-avs-style {
    z-index: 1;
    border-radius: 30px 30px 30px 3px;
    overflow: hidden;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
    background: radial-gradient(circle at 10% 0, #e6f7f8 0, #ffffff 55%);
}

.image-paragraph img {
    width: 100%;
    margin: 0;
    height: var(--image-height) !important;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.25s ease;
}

.image-paragraph img:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .image-paragraph,.image-paragraph img {
        height: auto !important;
    }
}

/* Paragraph Titre */
.paragraph--type--title.title-style-bold, .paragraph--type--subtitle.title-style-bold { font-weight: bold; }
.paragraph--type--title.title-style-italic, .paragraph--type--subtitle.title-style-italic { font-style: italic; }

.paragraph--type--title.title-font-gilroy, .paragraph--type--subtitle.title-font-gilroy { font-family: 'Gilroy', sans-serif; }
.paragraph--type--title.title-font-bru, .paragraph--type--subtitle.title-font-bru {font-family: 'Born Ready Upright', sans-serif;}

.paragraph--type--title.title-color-primary, .paragraph--type--subtitle.title-color-primary { color: var(--avs-primary-color); }
.paragraph--type--title.title-color-orange, .paragraph--type--subtitle.title-color-orange { color: var(--avs-tertiary-color); }

.paragraph--type--title.title-alignment-start, .paragraph--type--subtitle.title-alignment-start { text-align: left; }
.paragraph--type--title.title-alignment-center, .paragraph--type--subtitle.title-alignment-center { text-align: center; }
.paragraph--type--title.title-alignment-end, .paragraph--type--subtitle.title-alignment-end { text-align: right; }



/* Paragraph Titre + Texte + Image */

.paragraph--type--title-text-image {
    display: grid;
    gap: 1rem;

    /* fallback 1 colonne */
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "text"
        "image";
}

/* Slots explicites (ne dépend plus de l'ordre DOM) */
.paragraph--type--title-text-image > .tti__title { grid-area: title; }
.paragraph--type--title-text-image > .tti__text { grid-area: text; }
.paragraph--type--title-text-image > .tti__image { grid-area: image; }

/* Quand un slot est absent, on ne met pas sa zone dans la grille */
.paragraph--type--title-text-image.no-title {
    grid-template-areas:
        "text"
        "image";
}

.paragraph--type--title-text-image.no-text {
    grid-template-areas:
        "title"
        "image";
}

.paragraph--type--title-text-image.no-image {
    grid-template-areas:
        "title"
        "text";
}

.paragraph--type--title-text-image.no-title.no-text {
    grid-template-areas: "image";
}

.paragraph--type--title-text-image.no-title.no-image {
    grid-template-areas: "text";
}

.paragraph--type--title-text-image.no-text.no-image {
    grid-template-areas: "title";
}

/* Variantes
   Note: ces règles s'appliquent quand les 3 zones existent. Quand un élément manque,
   les variantes restent OK car le wrapper manquant n'existe pas + les classes no-* ajustent.
*/

.paragraph--type--title-text-image.title-position-above-all {
    grid-template-areas:
        "title"
        "text"
        "image";
}

.paragraph--type--title-text-image.title-position-above-image.image-position-under {
    grid-template-areas:
        "text"
        "title"
        "image";
}

.paragraph--type--title-text-image.title-position-above-image.image-position-above {
    grid-template-areas:
        "title"
        "image"
        "text";
}

.paragraph--type--title-text-image.title-position-above-image.image-position-before {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "title text"
        "image text";
}

.paragraph--type--title-text-image.title-position-above-image.image-position-after {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
        "text title"
        "text image";
}

.paragraph--type--title-text-image.image-position-under:not(.title-position-above-image) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "text"
        "image";
}

.paragraph--type--title-text-image.image-position-above.title-position-above-all,
.paragraph--type--title-text-image.image-position-above.title-position-above-text,
.paragraph--type--title-text-image.image-position-above:not(.title-position-above-all):not(.title-position-above-text):not(.title-position-above-image) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "image"
        "text";
}

.paragraph--type--title-text-image.image-position-before.title-position-above-all,
.paragraph--type--title-text-image.image-position-before.title-position-above-text,
.paragraph--type--title-text-image.image-position-before:not(.title-position-above-image):not(.title-position-above-all):not(.title-position-above-text) {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "image text";
}

.paragraph--type--title-text-image.image-position-after.title-position-above-all,
.paragraph--type--title-text-image.image-position-after.title-position-above-text,
.paragraph--type--title-text-image.image-position-after:not(.title-position-above-image):not(.title-position-above-all):not(.title-position-above-text) {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
        "title title"
        "text image";
}

.paragraph--type--title-text-image.title-position-above-text.image-position-under {
    grid-template-areas:
        "title"
        "text"
        "image";
}

.paragraph--type--title-text-image.title-position-above-text.image-position-above {
    grid-template-areas:
        "image"
        "title"
        "text";
}

/* Ces variantes 2 colonnes n'ont de sens que s'il y a un titre. */
.paragraph--type--title-text-image.has-title.title-position-above-text.image-position-before {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "image title"
        "image text";
}

.paragraph--type--title-text-image.has-title.title-position-above-text.image-position-after {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
        "title image"
        "text image";
}

/* Fallback: si pas de titre, on repasse en empilement (image + texte). */
.paragraph--type--title-text-image.no-title.title-position-above-text.image-position-before,
.paragraph--type--title-text-image.no-title.title-position-above-text.image-position-after {
    grid-template-columns: 1fr;
    grid-template-areas:
        "text"
        "image";
}

.paragraph--type--title-text-image.title-position-above-text.image-position-before {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "image title"
        "image text";
}

.paragraph--type--title-text-image.title-position-above-text.image-position-after {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
        "title image"
        "text image";
}


.paragraph--type--title-text-image > .tti__image * {
    margin: 0 !important;
}

.paragraph--type--title-text-image > .tti__image img,
.paragraph--type--title-text-image > .tti__image picture,
.paragraph--type--title-text-image > .tti__image video {
    height: auto;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .paragraph--type--title-text-image {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "text"
            "image" !important;
    }
}

/* Paragraph Carousel */

.paragraph--type--slide {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.paragraph--type--slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.paragraph--type--slide .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0) 100%
    );
}