/* ==========================================================
   UGCS
   HERO — PAGE D'ACCUEIL
   ========================================================== */


.ugcs-hero {

    /* ------------------------------------------------------
       COULEURS UGCS (charte graphique officielle)
       ------------------------------------------------------ */

    --ugcs-violet: #5B2167;
    --ugcs-violet-light: #A35BB5;
    --ugcs-dark: #171934;
    --ugcs-white: #FFFFFF;


    /* ------------------------------------------------------
       STRUCTURE
       ------------------------------------------------------ */

    position: relative;

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    min-height: 620px;

    overflow: hidden;

    background: var(--ugcs-white);
}


/* ==========================================================
   IMAGE
   ========================================================== */

.ugcs-hero__visual {

    position: absolute;

    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 70%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center right;
}


/* ----------------------------------------------------------
   FONDU BLANC → PHOTO
   ---------------------------------------------------------- */

.ugcs-hero__visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,

            #ffffff 0%,

            rgba(255, 255, 255, .98) 9%,

            rgba(255, 255, 255, .90) 17%,

            rgba(255, 255, 255, .58) 27%,

            rgba(255, 255, 255, .20) 38%,

            rgba(255, 255, 255, 0) 50%
        );

    pointer-events: none;
}


/* ==========================================================
   VAGUES
   ========================================================== */

.ugcs-hero__wave {

    position: absolute;

    left: 0;

    width: 100%;

    pointer-events: none;
}


/* ==========================================================
   VAGUE SUPÉRIEURE
   ========================================================== */

.ugcs-hero__wave--top {

    z-index: 5;

    top: -1px;

    width: 100%;

    height: 82px;
}


.ugcs-hero__wave--top .ugcs-hero__wave-fill {

    fill: var(--ugcs-white);
}


.ugcs-hero__wave--top .ugcs-hero__wave-line {

    fill: none;

    stroke: var(--ugcs-violet-light);

    stroke-width: 1.5;

    vector-effect: non-scaling-stroke;
}


/* ==========================================================
   VAGUE INFÉRIEURE
   ========================================================== */

.ugcs-hero__wave--bottom {

    z-index: 5;

    bottom: -1px;

    height: 80px;
}


.ugcs-hero__wave--bottom .ugcs-hero__wave-fill {

    fill: var(--ugcs-white);
}


/* ==========================================================
   CONTENEUR PRINCIPAL
   ========================================================== */

.ugcs-hero__container {

    position: relative;

    z-index: 3;

    width: min(
        1240px,
        calc(100% - 64px)
    );

    min-height: 620px;

    margin: 0 auto;

    display: flex;

    align-items: center;
}


/* ==========================================================
   COLONNE TEXTE
   ========================================================== */

.ugcs-hero__content {

    width: 46%;

    max-width: 540px;

    padding:

        70px
        0
        65px;
}


/* ==========================================================
   SURTITRE
   ========================================================== */

.single-content .ugcs-hero__eyebrow {

    margin: 0 0 12px;

    padding: 0;

    color: var(--ugcs-violet);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .02em;

    text-transform: uppercase;
}


/* ==========================================================
   TITRE
   ========================================================== */

.single-content .ugcs-hero__title {

    margin: 0;

    padding: 0;

    color: var(--ugcs-dark);

    font-size:
        clamp(
            48px,
            4.7vw,
            72px
        );

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.single-content .ugcs-hero__title span {

    display: block;

    margin: 0;

    padding: 0;
}


.single-content .ugcs-hero__title-accent {

    color: var(--ugcs-violet);
}


/* ==========================================================
   PETIT TRAIT SOUS LE TITRE
   ========================================================== */

.ugcs-hero__separator {

    width: 55px;

    height: 3px;

    margin:

        20px
        0;

    background:
        var(--ugcs-violet);
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.single-content .ugcs-hero__description {

    max-width: 470px;

    margin: 0;

    padding: 0;

    color: var(--ugcs-dark);

    font-size: 19px;

    line-height: 1.55;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.ugcs-hero__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 28px;
}


/* ==========================================================
   BOUTONS
   ========================================================== */

.ugcs-hero__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:

        0
        27px;

    border:

        2px
        solid
        var(--ugcs-violet);

    border-radius: 4px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    transition:

        background-color .2s ease,

        color .2s ease,

        border-color .2s ease,

        transform .2s ease;
}


/* ----------------------------------------------------------
   BOUTON PRINCIPAL
   ---------------------------------------------------------- */

.ugcs-hero__button--primary {

    gap: 18px;

    color:
        var(--ugcs-white);

    background:
        var(--ugcs-violet);
}


.ugcs-hero__button--primary:hover,
.ugcs-hero__button--primary:focus-visible {

    color:
        var(--ugcs-white);

    background:
        #461950;

    border-color:
        #461950;

    transform:
        translateY(-2px);
}


/* ----------------------------------------------------------
   BOUTON SECONDAIRE
   ---------------------------------------------------------- */

.ugcs-hero__button--secondary {

    color:
        var(--ugcs-violet);

    background:
        rgba(
            255,
            255,
            255,
            .88
        );
}


.ugcs-hero__button--secondary:hover,
.ugcs-hero__button--secondary:focus-visible {

    color:
        var(--ugcs-white);

    background:
        var(--ugcs-violet);

    transform:
        translateY(-2px);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1024px) {

    .ugcs-hero {

        min-height: 560px;
    }

    .ugcs-hero__container {

        width:
            min(
                960px,
                calc(100% - 48px)
            );

        min-height: 560px;
    }

    .ugcs-hero__content {

        width: 52%;

        padding:

            60px
            0;
    }

    .ugcs-hero__visual {

        width: 68%;

        background-position:
            60% center;
    }

    .single-content .ugcs-hero__title {

        margin: 0;

        padding: 0;

        font-size:
            clamp(
                42px,
                6vw,
                58px
            );
    }

    .single-content .ugcs-hero__description {

        font-size: 17px;
    }

    .ugcs-hero__wave--top {

        height: 70px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .ugcs-hero {

        min-height: auto;

        padding-top: 265px;

        background:
            var(--ugcs-white);
    }

    .ugcs-hero__visual {

        top: 0;

        right: 0;

        bottom: auto;

        width: 100%;

        height: 305px;

        background-size: cover;

        background-position:
            67% center;
    }

    .ugcs-hero__visual::after {

        background:

            linear-gradient(
                0deg,

                #ffffff 0%,

                rgba(
                    255,
                    255,
                    255,
                    .95
                ) 9%,

                rgba(
                    255,
                    255,
                    255,
                    .45
                ) 24%,

                rgba(
                    255,
                    255,
                    255,
                    0
                ) 44%
            );
    }

    .ugcs-hero__container {

        width:
            calc(100% - 40px);

        min-height: auto;

        display: block;
    }

    .ugcs-hero__content {

        width: 100%;

        max-width: none;

        padding:

            24px
            0
            45px;
    }

    .single-content .ugcs-hero__eyebrow {

        margin:

            0
            0
            8px;

        padding: 0;

        font-size: 13px;

        line-height: 1.3;
    }

    .single-content .ugcs-hero__title {

        margin: 0;

        padding: 0;

        font-size:
            clamp(
                38px,
                12vw,
                52px
            );

        line-height: .98;
    }

    .single-content .ugcs-hero__title span {

        margin: 0;

        padding: 0;
    }

    .ugcs-hero__separator {

        margin:

            18px
            0;
    }

    .single-content .ugcs-hero__description {

        margin: 0;

        padding: 0;

        font-size: 16px;

        line-height: 1.5;
    }

    .ugcs-hero__actions {

        gap: 12px;

        margin-top: 24px;
    }

    .ugcs-hero__button {

        width: 100%;
    }

    .ugcs-hero__wave--top {

        height: 58px;
    }

    .ugcs-hero__wave--bottom {

        height: 55px;
    }

}


/* ==========================================================
   ÉDITEUR — SUPPORT DES CHAMPS ÉDITABLES
   ========================================================== */

.ugcs-hero .ugcs-hero__field {

    display: block;

    width: 100%;

    border: 1px dashed transparent;

    background: transparent;

    padding: 2px 4px;

    margin: 0;

    color: inherit;

    font: inherit;

    line-height: inherit;

    letter-spacing: inherit;

    text-transform: inherit;

    resize: none;
}

.ugcs-hero .ugcs-hero__field:hover,
.ugcs-hero .ugcs-hero__field:focus {

    border-color: var(--ugcs-violet-light);

    outline: none;
}

.ugcs-hero .ugcs-hero__field--button {

    display: inline-block;

    width: auto;

    min-width: 80px;
}

.ugcs-hero__visual.ugcs-hero__visual--editable {

    /* Passe au-dessus du conteneur de texte (z-index 3) uniquement en
       mode édition, pour que le clic atteigne bien la zone image même
       là où le conteneur de texte la recouvre invisiblement. Cette
       classe n'existe jamais côté rendu final (render.php), donc le
       front-end n'est pas concerné. */
    z-index: 4;

    cursor: pointer;
}

.ugcs-hero__visual--editable:hover::before {

    content: "Cliquer pour changer l'image";

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(91, 33, 103, .55);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    text-align: center;
}