/* =========================================================
   REALISATIONS COMPLEMENTAIRES COMMUNITY MANAGEMENT
   ========================================================= */

.apollo-community-extra {
    position: relative;

    min-height: 150vh;

    padding:
        clamp(140px, 12vw, 210px)
        0
        clamp(160px, 14vw, 240px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 24%,
            rgba(190,85,237,.045),
            transparent 28%
        ),
        var(--apollo-bg);
}


/* =========================================================
   MASQUE DE L'ANCIENNE TIMELINE GAUCHE
   ========================================================= */

.apollo-community-extra-left-mask {
    position: absolute;

    left: calc(var(--apollo-line-x) - 18px);
    top: 0;
    bottom: 0;

    width: 40px;

    z-index: 9;

    background: var(--apollo-bg);

    pointer-events: none;
}


/* =========================================================
   TIMELINE DROITE
   ========================================================= */

.apollo-community-extra-line {
    position: absolute;

    right: 7vw;
    top: 0;
    bottom: 0;

    width: 4px;

    z-index: 6;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255,255,255,.025);

    pointer-events: none;
}

.apollo-community-extra-line-progress {
    position: absolute;

    inset: 0;

    transform: scaleY(0);
    transform-origin: top;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            #be55ed,
            #e069ff
        );

    box-shadow:
        0 0 14px rgba(190,85,237,.26);
}


/* =========================================================
   NODE
   ========================================================= */

.apollo-community-extra .apollo-community-extra-node {
    left: auto !important;
    right: 7vw !important;

    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translate(15px,-50%) !important;

    z-index: 20;

    border: 1px solid #be55ed;

    background: var(--apollo-bg);

    box-shadow:
        0 0 0 8px rgba(190,85,237,.045),
        0 0 24px rgba(190,85,237,.42);
}

.apollo-community-extra
.apollo-community-extra-node::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background: #e069ff;

    box-shadow:
        0 0 16px rgba(224,105,255,.9);
}


/* =========================================================
   INNER
   ========================================================= */

.apollo-community-extra-inner {
    position: relative;

    z-index: 12;
}


/* =========================================================
   INTRO
   ========================================================= */

.apollo-community-extra-heading {
    max-width: 1200px;

    margin-bottom:
        clamp(100px, 10vw, 170px);
}

.apollo-community-extra-heading h2 {
    max-width: 1150px;

    margin: 0;
}

.apollo-community-extra-heading > p {
    max-width: 780px;

    margin: 30px 0 0;

    font-size: clamp(17px,1.15vw,22px);

    line-height: 1.55;

    color: #92929d;
}


/* =========================================================
   ROW
   ========================================================= */

.apollo-extra-row {
    display: grid;

    grid-template-columns:
        minmax(400px,.78fr)
        minmax(560px,1.22fr);

    align-items: center;

    gap:
        clamp(70px,8vw,145px);

    opacity: 0;

    transform:
        translateY(70px);

    will-change:
        opacity,
        transform;
}

.apollo-extra-row + .apollo-extra-row {
    margin-top:
        clamp(170px,16vw,290px);
}


/* =========================================================
   COPY
   ========================================================= */

.apollo-extra-copy {
    max-width: 580px;
}

.apollo-extra-project-head {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;
}

.apollo-extra-index {
    color: #666773;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;
}

.apollo-extra-category {
    display: inline-flex;

    padding:
        8px
        12px;

    border: 1px solid
        rgba(224,105,255,.26);

    border-radius: 999px;

    color: #cf75f2;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;
}

.apollo-extra-client {
    display: block;

    margin-bottom: 13px;

    color: #e069ff;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .13em;
}

.apollo-extra-copy h3 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(40px,3.3vw,62px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.035em;
}

.apollo-extra-copy > p {
    max-width: 560px;

    margin: 28px 0 0;

    color: #92929d;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   TAGS
   ========================================================= */

.apollo-extra-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}

.apollo-extra-tags span {
    padding:
        8px
        11px;

    border: 1px solid
        rgba(255,255,255,.09);

    border-radius: 999px;

    color: #777984;

    font-size: 10px;
}


/* =========================================================
   POSTER
   ========================================================= */

.apollo-extra-poster-wrap {
    position: relative;

    width: min(100%, 680px);

    justify-self: end;

    overflow: hidden;

    border: 1px solid
        rgba(255,255,255,.10);

    border-radius: 24px;

    background: #0c0c10;

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.32);
}

.apollo-extra-poster-wrap img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   VIDEO
   ========================================================= */

.apollo-extra-video-wrap {
    position: relative;

    overflow: hidden;

    border: 1px solid
        rgba(255,255,255,.10);

    border-radius: 24px;

    background: #08080c;

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.32);
}

.apollo-extra-video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #08080c;
}


/* =========================================================
   MEDIA LABEL
   ========================================================= */

.apollo-extra-media-label {
    position: absolute;

    left: 22px;
    top: 22px;

    z-index: 6;

    padding:
        9px
        13px;

    border: 1px solid
        rgba(255,255,255,.17);

    border-radius: 999px;

    background:
        rgba(8,8,12,.62);

    backdrop-filter:
        blur(12px);

    color: #fff;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;
}


/* =========================================================
   PLAY
   ========================================================= */

.apollo-extra-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 88px;
    height: 88px;

    display: grid;

    place-items: center;

    z-index: 8;

    padding: 0;

    transform:
        translate(-50%,-50%);

    border: 1px solid
        rgba(255,255,255,.22);

    border-radius: 50%;

    background:
        rgba(10,10,15,.58);

    backdrop-filter:
        blur(15px);

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}

.apollo-extra-play span {
    margin-left: 5px;

    color: #fff;

    font-size: 20px;
}

.apollo-extra-play:hover {
    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:
        rgba(190,85,237,.27);
}

.apollo-extra-video-wrap.is-playing
.apollo-extra-play {

    opacity: 0;

    pointer-events: none;
}


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

@media (max-width:1100px) {

    .apollo-community-extra {
        min-height: auto;

        padding:
            110px
            0;
    }

    .apollo-community-extra-line {
        display: none;
    }

    .apollo-community-extra-left-mask {
        display: none;
    }

    .apollo-community-extra
    .apollo-community-extra-node {

        left:
            var(--apollo-line-x) !important;

        right:
            auto !important;

        transform:
            translate(-15px,-50%) !important;
    }

    .apollo-extra-row {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .apollo-extra-poster-wrap {
        justify-self: start;

        width: min(100%,600px);
    }

    .apollo-extra-row + .apollo-extra-row {
        margin-top: 130px;
    }
}

/* =========================================================
   COMMUNITY EXTRA - AJUSTEMENTS V2
   ========================================================= */

@media (min-width: 1101px) {

    /* La timeline droite continue au-delà de la section */
    .apollo-community-extra {
        overflow: visible;
    }

    .apollo-community-extra-line {
        bottom: -260px;
    }

    /* Affiche Tacos plus petite */
    .apollo-extra-row-poster {
        grid-template-columns:
            minmax(420px, .9fr)
            minmax(500px, 1.1fr);
    }

    .apollo-extra-poster-wrap {
        width: min(100%, 560px);
    }

    /* Vidéo Parc Spirou plus importante */
    .apollo-extra-row-video {
        grid-template-columns:
            minmax(350px, .62fr)
            minmax(720px, 1.38fr);

        gap: clamp(55px, 6vw, 105px);
    }

    .apollo-extra-row-video .apollo-extra-video-wrap {
        width: calc(100% + 70px);
        max-width: 980px;

        justify-self: end;
    }

    /* Un peu moins d'espace entre les deux projets */
    .apollo-extra-row + .apollo-extra-row {
        margin-top: clamp(125px, 11vw, 190px);
    }
}


/* =========================================================
   COMMUNITY EXTRA - TIMELINE CONTINUE
   ========================================================= */

@media (min-width: 1101px) {

    /*
     * La nouvelle timeline de droite traverse toute la section.
     * Elle reprend exactement le même axe que le Community.
     */
    .apollo-community-extra-line {
        top: 0 !important;
        bottom: -2px !important;

        right: 7vw !important;

        overflow: visible !important;

        background: #be55ed !important;

        box-shadow:
            0 0 10px rgba(190,85,237,.18);
    }

    /*
     * Plus de progression propre à cette section :
     * la ligne est déjà entièrement dessinée.
     */
    .apollo-community-extra-line-progress {
        display: none !important;
    }
}


/* =========================================================
   COMMUNITY EXTRA - REVEAL NATUREL
   ========================================================= */

.apollo-extra-row {
    opacity: 0;

    transform: translateY(38px);

    transition:
        opacity .75s ease,
        transform .9s cubic-bezier(.2,.7,.2,1);
}

.apollo-extra-row.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   COMMUNITY EXTRA - CONTINUITE TIMELINE DROITE
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line {
        background: transparent !important;

        box-shadow: none !important;

        overflow: visible !important;
    }

    /*
     * Dans cette section sans scroll-lock,
     * la ligne sera pilotée par le scroll réel.
     */
    .apollo-community-extra-line-progress {
        display: block !important;

        transform: scaleY(0);
        transform-origin: top center;

        background: #e069ff;

        box-shadow:
            0 0 12px rgba(224,105,255,.22);
    }
}


/* =========================================================
   COMMUNITY -> COMMUNITY EXTRA
   RACCORD TIMELINE
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line {
        top: -2px !important;
        right: 7vw !important;

        background: transparent !important;
    }

}

/* =========================================================
   V3 - AJUSTEMENTS CREATION / VIDEO
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-extra-row-poster .apollo-extra-poster-wrap {
        transform: translateX(-55px);
    }

}

/* =========================================================
   V3 - POSTER INTERACTIF
   ========================================================= */

.apollo-extra-poster-wrap {
    transform-style: preserve-3d;
    will-change: transform;

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
}

.apollo-extra-poster-wrap img {
    transform: scale(1.015);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.apollo-extra-poster-wrap.is-hovering {
    box-shadow:
        0 45px 110px rgba(0,0,0,.42);
}

.apollo-extra-poster-wrap.is-hovering img {
    transform: scale(1.035);
}


/* =========================================================
   V3 - POSTER TILT 3D
   ========================================================= */

.apollo-extra-row-poster {
    perspective: 1200px;
}

.apollo-extra-poster-wrap {
    transform-style: preserve-3d;

    will-change: transform;

    transition:
        transform .18s ease-out,
        box-shadow .3s ease;
}

.apollo-extra-poster-wrap img {
    transform: translateZ(0);
    transition: none !important;
}

.apollo-extra-poster-wrap.is-tilting {
    box-shadow:
        0 50px 120px rgba(0,0,0,.48);
}

/* Le label flotte très légèrement au-dessus */
.apollo-extra-poster-wrap .apollo-extra-media-label {
    transform: translateZ(25px);
}


/* =========================================================
   V4 - COMMUNITY EXTRA
   Rapproche le premier projet du bloc d'introduction
   ========================================================= */

.apollo-community-extra .apollo-extra-intro {
    margin-bottom: 45px !important;
}

.apollo-community-extra .apollo-extra-intro p {
    margin-bottom: 0 !important;
}

.apollo-community-extra .apollo-extra-row:first-of-type {
    margin-top: 0 !important;
}


/* =========================================================
   V4 - ESPACEMENT INTRO -> PREMIER PROJET
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-heading {
        margin-bottom: 90px !important;
    }

    .apollo-community-extra-heading > p {
        margin-bottom: 0 !important;
    }

    .apollo-extra-row-poster {
        margin-top: 0 !important;
    }

}


/* =========================================================
   V4 - PREMIER PROJET PLUS PROCHE DE L'INTRO
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-heading {
        margin-bottom: 70px !important;
    }

    .apollo-extra-row-poster {
        align-items: start !important;
    }

    .apollo-extra-row-poster .apollo-extra-copy {
        padding-top: 35px;
    }

}

/* =========================================================
   V4 - COMMUNITY EXTRA / REDESIGN
   ========================================================= */

.apollo-community-extra-heading {
    max-width: 980px;
    margin-bottom: 85px !important;
}

.apollo-community-extra-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 24px;

    color: #e069ff;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.apollo-community-extra-heading h2 {
    max-width: 900px;
    margin: 0;

    font-family: inherit !important;
    font-size: clamp(58px, 4.6vw, 88px) !important;
    font-weight: 600 !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;

    color: #fff !important;
}

.apollo-community-extra-heading > p {
    max-width: 760px;

    margin: 28px 0 0 !important;

    font-family: inherit !important;
    font-size: clamp(17px, 1.15vw, 22px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;

    color: #92929d !important;
}

/* Premier projet plus proche de l'intro */
@media (min-width: 1101px) {

    .apollo-extra-row-poster {
        margin-top: 0 !important;
    }

    .apollo-extra-row-poster .apollo-extra-copy {
        padding-top: 15px;
    }

}

.apollo-community-extra-node {
    display: none !important;
}

/* =========================================================
   V4 - TIMELINE CONTINUE SANS NODE
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line {
        top: 0 !important;
        bottom: -2px !important;
        right: 7vw !important;

        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .apollo-community-extra-line-progress {
        display: block !important;

        width: 100%;
        height: 100%;

        transform: scaleY(0);
        transform-origin: top center;

        background: #e069ff;

        box-shadow:
            0 0 12px rgba(224,105,255,.22);
    }

}

/* =========================================================
   V4 FINAL - TIMELINE COMMUNITY EXTRA
   Continuite sans node et sans ligne pre-dessinee
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;
        right: 7vw !important;

        width: 4px !important;

        overflow: hidden !important;

        background: transparent !important;
        box-shadow: none !important;

        pointer-events: none;
    }

    .apollo-community-extra-line-progress {
        display: block !important;

        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        transform: scaleY(0);
        transform-origin: top center;

        background: #e069ff;

        box-shadow:
            0 0 12px rgba(224,105,255,.22);
    }

    .apollo-community-extra-node {
        display: none !important;
    }
}

/* =========================================================
   V4 FINAL - COMMUNITY EXTRA
   Resserrement vertical + continuité timeline
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra {
        min-height: auto !important;

        padding-top: 70px !important;
        padding-bottom: 120px !important;

        overflow: visible !important;
    }

    .apollo-community-extra-inner {
        position: relative;
    }

    .apollo-community-extra-heading {
        margin-bottom: 70px !important;
    }

    /* Pas de node : aucune pause dans cette section */
    .apollo-community-extra-node {
        display: none !important;
    }

    /*
     * La ligne prend toute la section.
     * Pas de track secondaire ni d'effet de double ligne.
     */
    .apollo-community-extra-line {
        top: 0 !important;
        bottom: 0 !important;

        right: 7vw !important;

        width: 4px !important;

        overflow: hidden !important;

        background: rgba(224,105,255,.12) !important;
        box-shadow: none !important;
    }

    .apollo-community-extra-line-progress {
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        transform-origin: top center !important;

        background: #e069ff !important;

        box-shadow:
            0 0 10px rgba(224,105,255,.20) !important;
    }

    /* Premier projet directement après l'intro */
    .apollo-extra-row-poster {
        margin-top: 0 !important;
    }

}

/* =========================================================
   V4 FINAL - COMMUNITY EXTRA SANS TIMELINE PROPRE
   ========================================================= */

.apollo-community-extra-line,
.apollo-community-extra-line-progress,
.apollo-community-extra-node {
    display: none !important;
}


/* =========================================================
   V4 FINAL - RACCORD COMMUNITY -> CREATION
   Aucun node, aucune animation propre
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra {
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 120px !important;
        overflow: visible !important;
    }

    .apollo-community-extra-line {
        display: block !important;

        position: absolute !important;
        top: -2px !important;
        bottom: -2px !important;
        right: 7vw !important;

        width: 4px !important;

        background: #e069ff !important;

        border-radius: 999px !important;

        box-shadow:
            0 0 12px rgba(190,85,237,.24) !important;

        overflow: visible !important;
        pointer-events: none !important;
        z-index: 7 !important;
    }

    .apollo-community-extra-line-progress,
    .apollo-community-extra-node {
        display: none !important;
    }

    .apollo-community-extra-heading {
        margin-bottom: 70px !important;
    }
}

/* =========================================================
   V4 FINAL - COMPACTAGE CREATION & PRODUCTION
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra {
        min-height: auto !important;

        padding-top: 40px !important;
        padding-bottom: 120px !important;
    }

    .apollo-community-extra-heading {
        margin-bottom: 65px !important;
    }

}

/* =========================================================
   V4 - SUPPRESSION DOUBLE TIMELINE COMMUNITY EXTRA
   Le parent sert uniquement de rail invisible.
   Seule la progression reste visible.
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line {
        background: transparent !important;
        box-shadow: none !important;
    }

    .apollo-community-extra-line-progress {
        display: block !important;
    }

}


/* =========================================================
   V4 FINAL - CONTINUITE TIMELINE COMMUNITY EXTRA
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra {
        position: relative !important;
    }

    .apollo-community-extra-line {
        display: block !important;

        position: absolute !important;
        top: -2px !important;
        bottom: 0 !important;
        right: 7vw !important;

        width: 4px !important;

        background: transparent !important;
        box-shadow: none !important;

        overflow: hidden !important;
        pointer-events: none !important;
        z-index: 7 !important;
    }

    .apollo-community-extra-line-progress {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background: #e069ff !important;

        border-radius: 999px !important;

        box-shadow:
            0 0 12px rgba(190,85,237,.24) !important;

        transform: scaleY(0);
        transform-origin: top center !important;
    }

    .apollo-community-extra-node {
        display: none !important;
    }

}

/* =========================================================
   V4 FINAL - NETTOYAGE TIMELINE CREATION & PRODUCTION
   ========================================================= */

@media (min-width: 1101px) {

    /* Aucun point dans cette section */
    .apollo-community-extra .apollo-node,
    .apollo-community-extra-node {
        display: none !important;
    }

    /*
     * Le conteneur est totalement invisible.
     * Seule la partie déjà parcourue doit apparaître.
     */
    .apollo-community-extra-line {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .apollo-community-extra-line::before,
    .apollo-community-extra-line::after {
        display: none !important;
        content: none !important;
    }

    .apollo-community-extra-line-progress {
        background: #e069ff !important;
        box-shadow:
            0 0 10px rgba(224,105,255,.22) !important;
    }

}

/* =========================================================
   V4 FINAL - RACCORD VISUEL TIMELINE
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line-progress {
        width: 4px !important;

        background: #e069ff !important;

        border-radius: 999px !important;

        box-shadow:
            0 0 12px rgba(190,85,237,.24) !important;

        opacity: 1 !important;
    }

}

/* =========================================================
   V4 - COMMUNITY EXTRA
   La timeline visuelle est désormais portée par Community
   ========================================================= */

@media (min-width: 1101px) {

    .apollo-community-extra-line,
    .apollo-community-extra-line-progress {
        display: none !important;
    }

    .apollo-community-extra-node,
    .apollo-community-extra .apollo-node {
        display: none !important;
    }

}

/* =========================================================
   APOLLO HOME V4 - COMMUNITY EXTRA MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .apollo-community-extra {
        min-height: auto !important;
        padding: 65px 24px 75px !important;
        overflow: hidden !important;
    }

    .apollo-community-extra-inner {
        width: 100% !important;
        max-width: none !important;
    }

    /* ---------- INTRO ---------- */

    .apollo-community-extra-heading {
        max-width: 100% !important;
        margin-bottom: 48px !important;
    }

    .apollo-community-extra-eyebrow {
        margin-bottom: 20px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .apollo-community-extra-heading h2 {
        max-width: 100% !important;

        font-size: clamp(42px, 11vw, 54px) !important;
        line-height: .98 !important;
        letter-spacing: -.04em !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .apollo-community-extra-heading > p {
        max-width: 100% !important;
        margin-top: 22px !important;

        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* ---------- PROJETS ---------- */

    .apollo-extra-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .apollo-extra-row + .apollo-extra-row {
        margin-top: 80px !important;
    }

    .apollo-extra-copy {
        max-width: 100% !important;
    }

    .apollo-extra-project-head {
        margin-bottom: 20px !important;
    }

    .apollo-extra-category {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }

    .apollo-extra-client {
        font-size: 10px !important;
    }

    .apollo-extra-copy h3 {
        max-width: 100% !important;

        font-size: 34px !important;
        line-height: 1.02 !important;
        letter-spacing: -.035em !important;
    }

    .apollo-extra-copy > p {
        max-width: 100% !important;
        margin-top: 20px !important;

        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .apollo-extra-tags {
        gap: 7px !important;
        margin-top: 22px !important;
    }

    .apollo-extra-tags span {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }

    /* ---------- TACOS / POSTER ---------- */

    .apollo-extra-row-poster .apollo-extra-poster-wrap {
        width: 82% !important;
        max-width: 290px !important;

        justify-self: center !important;

        transform: none !important;

        border-radius: 18px !important;
    }

    .apollo-extra-row-poster .apollo-extra-poster-wrap img {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    /* ---------- PARC SPIROU / VIDEO ---------- */

    .apollo-extra-row-video .apollo-extra-video-wrap {
        width: 100% !important;
        max-width: none !important;

        justify-self: stretch !important;

        border-radius: 18px !important;
    }

    .apollo-extra-video {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    .apollo-extra-media-label {
        font-size: 9px !important;
    }

}