/*
 * V4 front — BASE DE RENDU .em-rubrique (champs, grille, médias).
 *
 * Règles de rendu communes du moteur V4 (lignes/colonnes + champs simples).
 * NOTE refactor : dupliqué pour l'instant depuis l'admin
 * (inc/rubriques/admin/pages/overview-styles.php) — à consolider en source
 * unique en fin de chantier.
 */

.em-rubrique {
    position: relative;
    overflow: hidden;
    background-color: var(--em-rubrique-bg, #0f172a);
    color: var(--em-rubrique-text, #e2e8f0);
    padding: var(--em-rubrique-pt, 18px) var(--em-rubrique-pr, 20px) var(--em-rubrique-pb, 18px) var(--em-rubrique-pl, 20px);
    font-family: var(--em-rubrique-font, inherit);
}

/* Calque image de fond séparé (opacité + miroir). */
.em-rubrique::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--em-rubrique-bg-image, none);
    background-size: var(--em-rubrique-bg-size, cover);
    background-repeat: var(--em-rubrique-bg-repeat, no-repeat);
    background-position: var(--em-rubrique-bg-position, center);
    opacity: var(--em-rubrique-bg-opacity, 1);
    transform: var(--em-rubrique-bg-transform, none);
    pointer-events: none;
}

.em-rubrique > * {
    position: relative;
    z-index: 1;
}

.em-rubrique__row {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
}

.em-rubrique__row + .em-rubrique__row {
    margin-top: 10px;
}

.em-rubrique__col {
    box-sizing: border-box;
    min-width: 0;
}

.em-rubrique__col--left {
    text-align: left;
}

.em-rubrique__col--center {
    text-align: center;
}

.em-rubrique__col--right {
    text-align: right;
}

.em-rubrique__col--justify {
    text-align: justify;
}

.em-rubrique__sep {
    width: 100%;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .25;
    margin: 8px 0;
}

.em-rubrique__spacer {
    display: block;
    height: 12px;
}

.em-rubrique__arrow {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
}

.em-rubrique__arrow + .em-rubrique__arrow,
.em-rubrique__arrow + .em-rubrique__arrow-link,
.em-rubrique__arrow-link + .em-rubrique__arrow,
.em-rubrique__arrow-link + .em-rubrique__arrow-link {
    margin-left: var(--em-rubrique-arrow-gap, 12px);
}

.em-rubrique__field {
    margin: 0 0 4px;
}

/* Champs composites : texte + image (ex. « Stream » + logo Mayami) et
   texte + texte sur une MÊME ligne, comme le title-line du site. */
.em-rubrique__textimg,
.em-rubrique__texttext {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.em-rubrique__textimg .em-rubrique__field,
.em-rubrique__texttext .em-rubrique__field {
    margin: 0;
}

/* Alignement du bloc composite selon l'alignement de la colonne hôte. */
.em-rubrique__col--center .em-rubrique__textimg,
.em-rubrique__col--center .em-rubrique__texttext {
    justify-content: center;
}

.em-rubrique__col--right .em-rubrique__textimg,
.em-rubrique__col--right .em-rubrique__texttext {
    justify-content: flex-end;
}

.em-rubrique__col--justify .em-rubrique__textimg,
.em-rubrique__col--justify .em-rubrique__texttext {
    justify-content: space-between;
}

.em-rubrique__link {
    color: var(--em-rubrique-link, inherit);
    text-decoration: var(--em-rubrique-underline, none);
    margin: 0 8px;
}

.em-rubrique__link:not(.em-rubrique__link--media):visited {
    color: var(--em-rubrique-link-visited, var(--em-rubrique-link, inherit));
}

.em-rubrique__link:hover {
    color: var(--em-rubrique-link-hover, var(--em-rubrique-link, inherit));
}

.em-rubrique__field--rich a,
.em-rubrique__field--rich a:visited,
.em-rubrique__field--rich a:hover,
.em-rubrique__field--rich a:focus {
    color: inherit;
    text-decoration: none;
}

.em-rubrique__link:focus,
.em-rubrique__link:active,
.em-rubrique__link:focus-visible {
    outline: none;
    box-shadow: none;
}

.em-rubrique__link--media {
    display: inline-flex;
    align-items: center;
    margin: 0;
    text-decoration: none;
    color: var(--em-rubrique-link, inherit);
}

.em-rubrique__link--media:hover {
    color: var(--em-rubrique-link-hover, var(--em-rubrique-link, inherit));
}

.em-rubrique__icon {
    font-size: 26px;
    line-height: 26px;
    margin: 0 7px;
    vertical-align: middle;
}

.em-rubrique__link--media .em-rubrique__icon {
    margin: 0 7px;
    color: inherit;
}

.em-rubrique__button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    border: 2px solid #111;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
    line-height: 1.1;
}

.em-rubrique__button:hover {
    filter: brightness(1.06);
}

.em-rubrique__button:focus,
.em-rubrique__button:active,
.em-rubrique__button:focus-visible {
    outline: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
}

/* --- Bouton : formes / animations (mêmes options que le Badge animé). Les
   keyframes em-rubrique-badge-* sont définies dans components.css (même bundle). */
.em-rubrique__button--shape-pill {
    border-radius: 999px;
}

.em-rubrique__button--shape-square {
    border-radius: var(--em-rubrique-button-radius, 6px);
}

/* Triangle : clip-path → ni bordure ni ombre CSS, marge haute pour loger le texte. */
.em-rubrique__button--shape-triangle,
.em-rubrique__button--shape-triangle:focus,
.em-rubrique__button--shape-triangle:active,
.em-rubrique__button--shape-triangle:focus-visible {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 22px 30px 12px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.em-rubrique__button--anim-wiggle {
    animation: em-rubrique-badge-wiggle 4s ease-in-out infinite;
}

.em-rubrique__button--anim-pulse {
    animation: em-rubrique-badge-pulse 2.4s ease-in-out infinite;
}

.em-rubrique__button--anim-bounce {
    animation: em-rubrique-badge-bounce 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .em-rubrique__button--anim-wiggle,
    .em-rubrique__button--anim-pulse,
    .em-rubrique__button--anim-bounce {
        animation: none;
    }
}

.em-rubrique__chip {
    display: inline-block;
    font-size: 12px;
    opacity: .8;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 6px;
    margin: 2px;
}

.em-rubrique__swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .4);
    vertical-align: middle;
    margin: 2px;
}

@media (max-width: 760px) {
    /* V4 mobile only: masquer la cellule L3C2 de la section Stream
       (texte "Available Everywhere" dans le template actuel). */
    .emv4-section--stream > .em-rubrique > .em-rubrique__row[data-em-row="3"] > .em-rubrique__col[data-em-col="2"] {
        display: none;
    }

    /* V4 mobile only (CTA): les boutons sont dans une MEME cellule, puis wrap.
       On applique le spacing sur le conteneur qui wrap réellement. */
    .emv4-section--cta > .em-rubrique .em-rubrique__col[data-em-has-button="1"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 12px;
    }

    .emv4-section--cta > .em-rubrique .em-rubrique__col[data-em-has-button="1"] .em-rubrique__button {
        margin-right: 0 !important;
    }

    /* V4 mobile only (Footer) */
    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="1"] {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        column-gap: 10px;
    }

    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="1"] > .em-rubrique__col[data-em-col="1"] {
        text-align: left;
    }

    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="1"] > .em-rubrique__col[data-em-col="2"] {
        text-align: right;
        white-space: nowrap;
    }

    /* Masque "May 29th | A release campaign." (L1C3). */
    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="1"] > .em-rubrique__col[data-em-col="3"] {
        display: none;
    }

    .emv4-section--footer .em-rubrique__row[data-em-row="1"] .em-rubrique__imgwrap .em-rubrique__image {
        width: 170px !important;
        max-width: 170px;
        height: auto;
    }

    .emv4-section--footer .em-rubrique__row[data-em-row="1"] .em-rubrique__imgwrap .em-rubrique__tape {
        width: 76px;
        height: 16px;
        top: -8px;
    }

    /* Plateformes + réseaux sur la même ligne (row 3), copyright en dessous. */
    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="3"] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 8px;
    }

    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="3"] > .em-rubrique__col[data-em-col="1"] {
        order: 1;
        flex: 1 1 auto;
        text-align: left;
    }

    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="3"] > .em-rubrique__col[data-em-col="3"] {
        order: 2;
        flex: 0 0 auto;
        text-align: right;
        white-space: nowrap;
    }

    .emv4-section--footer > .em-rubrique > .em-rubrique__row[data-em-row="3"] > .em-rubrique__col[data-em-col="2"] {
        order: 3;
        flex: 1 1 100%;
        text-align: center;
    }

    .emv4-section--footer .em-rubrique__field--text_2 {
        font-size: 13px;
        line-height: 1.25;
    }
}