.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   [MASTER-00] AXYSS WEBSITE — MASTER CSS
   Version de référence : 2026-09-12
   ==========================================================================

   NOMENCLATURE
   --------------------------------------------------------------------------
   [HOME-*]       Page d'accueil / Hero
   [HOME-RWD-*]   Responsive du Hero

   [EP1-*]        Page Episode 1
   [EP1-RWD-*]    Responsive Episode 1

   REGLES DE MAINTENANCE
   --------------------------------------------------------------------------
   1. Une règle fonctionnelle ne doit exister qu'à un seul endroit.
   2. Aucun correctif ajouté en fin de fichier pour écraser une ancienne règle.
   3. Pour modifier une zone, rechercher son identifiant unique :
      ex. [HOME-08] ou [EP1-04]
   4. Les Custom CSS locaux Elementor restent vides autant que possible.
   ========================================================================== */



/* ==========================================================================
   [HOME-01] HERO — ROOT
   ========================================================================== */

.axyss-hero {
    --axyss-footer-height: 108px;

    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 720px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #06101f;

    box-sizing: border-box;
}



/* ==========================================================================
   [HOME-02] HERO — SPLIT
   ========================================================================== */

.axyss-hero .axyss-split {
    position: absolute;

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

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    z-index: 1;

    box-sizing: border-box;
}



/* ==========================================================================
   [HOME-03] HERO — SCENES
   ========================================================================== */

.axyss-hero .axyss-split > .axyss-side {
    position: absolute;

    top: 0;
    left: 0;

    flex: none;

    width: 100%;
    max-width: 100%;

    height: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    box-sizing: border-box;
}



/* ==========================================================================
   [HOME-04] HERO — SCENE WITHOUT
   ========================================================================== */

.axyss-hero .axyss-side--without {
    z-index: 1;

    clip-path: polygon(
        0 0,
        57% 0,
        43% 100%,
        0 100%
    );
}



/* ==========================================================================
   [HOME-05] HERO — SCENE WITH
   ========================================================================== */

.axyss-hero .axyss-side--with {
    z-index: 2;

    clip-path: polygon(
        57% 0,
        100% 0,
        100% 100%,
        43% 100%
    );
}



/* ==========================================================================
   [HOME-06] HERO — OVERLAY WITHOUT
   ========================================================================== */

.axyss-hero .axyss-side--without::after {
    content: "";

    position: absolute;

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

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(22, 8, 2, 0.02) 0%,
        rgba(22, 8, 2, 0.03) 55%,
        rgba(4, 9, 17, 0.15) 82%,
        rgba(4, 9, 17, 0.30) 100%
    );

    pointer-events: none;
}



/* ==========================================================================
   [HOME-07] HERO — OVERLAY WITH
   ========================================================================== */

.axyss-hero .axyss-side--with::after {
    content: "";

    position: absolute;

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

    z-index: 1;

    background: linear-gradient(
        270deg,
        rgba(2, 16, 32, 0.02) 0%,
        rgba(2, 16, 32, 0.03) 55%,
        rgba(4, 9, 17, 0.15) 82%,
        rgba(4, 9, 17, 0.30) 100%
    );

    pointer-events: none;
}



/* ==========================================================================
   [HOME-08] HERO — DIAGONAL
   Bleu en haut → blanc au centre → brun en bas.
   Aucun halo.
   Fondu progressif autour du footer.
   ========================================================================== */

.axyss-hero .axyss-diagonal {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    z-index: 12;

    pointer-events: none;
}


.axyss-hero .axyss-diagonal::after {
    content: "";

    position: absolute;

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

    clip-path: polygon(
        56.84% 0,
        57.16% 0,
        43.16% 100%,
        42.84% 100%
    );

    background: linear-gradient(
        to bottom,

        rgba(88, 190, 255, 0.98) 0%,

        rgba(210, 241, 255, 0.98) 20%,

        rgba(255, 255, 255, 1.00) 48%,

        rgba(255, 246, 238, 0.98) 62%,

        rgba(255, 220, 190, 0.96) 76%,

        rgba(194, 111, 54, 0.92)
        calc(100% - var(--axyss-footer-height) - 18px),

        rgba(194, 111, 54, 0.38)
        calc(100% - var(--axyss-footer-height) + 8px),

        rgba(194, 111, 54, 0.00)
        calc(100% - var(--axyss-footer-height) + 30px)
    );
}



/* ==========================================================================
   [HOME-09] HEADER — ROOT
   ========================================================================== */

.axyss-home-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    min-height: 84px;

    padding: 12px 3.5%;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background-color: transparent;

    box-sizing: border-box;
}



/* ==========================================================================
   [HOME-10] HEADER — BRAND
   ========================================================================== */

.axyss-header-brand {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    flex: 0 0 auto;

    width: auto;
    min-width: 310px;

    gap: 3px;
}


.axyss-header-brand img {
    display: block;

    width: 210px;
    max-width: 210px;

    height: auto;
}


.axyss-header-brand p {
    margin: 0;

    white-space: nowrap;

    font-family: "Inter", Arial, sans-serif;

    font-size: 8px;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 2.4px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.88);

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}



/* ==========================================================================
   [HOME-11] HEADER — NAVIGATION
   ========================================================================== */

.axyss-header-nav {
    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    flex: 1 1 auto;

    gap: 42px;
}


.axyss-header-nav a {
    font-family: "Inter", Arial, sans-serif;

    font-size: 15px;
    line-height: 1;

    font-weight: 500;

    color: #ffffff;

    text-decoration: none;

    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.60);

    transition: color 0.25s ease;
}


.axyss-header-nav a:hover {
    color: #55baff;
}



/* ==========================================================================
   [HOME-12] HEADER — ACTIONS
   ========================================================================== */

.axyss-header-actions {
    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    width: auto;

    gap: 22px;
}


.axyss-header-demo .elementor-button {
    padding: 14px 24px;

    border-radius: 6px;

    background-color: #087cff;

    color: #ffffff;

    font-family: "Inter", Arial, sans-serif;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.22);
}


.axyss-header-languages {
    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.90);

    white-space: nowrap;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.60);
}



/* ==========================================================================
   [HOME-13] HERO — EPISODE NAVIGATION
   ========================================================================== */

.axyss-episode-nav {
    position: absolute;

    top: 39%;
    left: 30px;

    width: 60px;
    min-height: 200px;

    z-index: 35;
}


.axyss-episode-nav .elementor-widget-html {
    width: 100%;
}


.axyss-episode-nav .elementor-widget-container {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;
}


.axyss-episode-nav a {
    position: relative;

    display: flex;

    align-items: center;

    width: 55px;
    height: 40px;

    font-family: "Inter", Arial, sans-serif;

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;

    text-decoration: none;

    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.75);
}


.axyss-episode-nav a i {
    position: absolute;

    top: 50%;
    left: 34px;

    width: 11px;
    height: 11px;

    border: 1px solid rgba(255, 255, 255, 0.62);

    border-radius: 50%;

    transform: translateY(-50%);
}


.axyss-episode-nav a:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 26px;
    left: 39px;

    width: 1px;
    height: 28px;

    background-color: rgba(255, 255, 255, 0.34);
}


.axyss-episode-nav a.active i {
    border-color: #168cff;
}


.axyss-episode-nav a.active i::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background-color: #168cff;

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



/* ==========================================================================
   [HOME-14] HERO — DIALOGUES COMMON
   ========================================================================== */

.axyss-dialogue {
    position: absolute;

    z-index: 40;

    padding: 20px 24px;

    border-radius: 20px;

    box-sizing: border-box;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}


.axyss-dialogue .elementor-widget-text-editor,
.axyss-dialogue .elementor-widget-container {
    margin: 0;
    padding: 0;
}


.axyss-dialogue p {
    margin: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 16px;
    line-height: 1.45;

    font-weight: 500;

    color: #ffffff;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}



/* ==========================================================================
   [HOME-15] HERO — DIALOGUE WITHOUT
   ========================================================================== */

.axyss-dialogue--without {
    top: 16%;
    left: 23.5%;

    width: 300px;

    border: 1px solid rgba(255, 145, 72, 0.90);

    background-color: rgba(32, 14, 5, 0.88);
}


.axyss-dialogue--without::after {
    content: "";

    position: absolute;

    left: 36px;
    bottom: -16px;

    width: 22px;
    height: 22px;

    background-color: rgba(32, 14, 5, 0.88);

    border-left: 1px solid rgba(255, 145, 72, 0.90);
    border-bottom: 1px solid rgba(255, 145, 72, 0.90);

    transform: skewY(-38deg);
}



/* ==========================================================================
   [HOME-16] HERO — DIALOGUE WITH
   ========================================================================== */

.axyss-dialogue--with {
    top: 12%;
    right: 14%;

    width: 355px;

    border: 1px solid rgba(60, 179, 255, 0.92);

    background-color: rgba(3, 30, 54, 0.90);
}


.axyss-dialogue--with::after {
    content: "";

    position: absolute;

    left: 40px;
    bottom: -16px;

    width: 22px;
    height: 22px;

    background-color: rgba(3, 30, 54, 0.90);

    border-left: 1px solid rgba(60, 179, 255, 0.92);
    border-bottom: 1px solid rgba(60, 179, 255, 0.92);

    transform: skewY(-38deg);
}



/* ==========================================================================
   [HOME-17] HERO — PLAY
   ========================================================================== */

.axyss-episode-play {
    position: absolute;

    top: 40%;
    left: 51.6%;

    width: 190px;

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

    z-index: 45;

    text-align: center;
}


.axyss-episode-play .elementor-widget-html {
    width: 100%;
}


.axyss-episode-play .elementor-widget-container {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    text-align: center;
}


.axyss-play-link {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    color: #ffffff;

    text-align: center;
    text-decoration: none;
}


.axyss-play-button {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 86px;
    height: 86px;

    margin: 0 auto 10px auto;
    padding: 0;

    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 50%;

    background-color: rgba(8, 45, 82, 0.70);

    box-shadow:
        0 0 0 5px rgba(21, 140, 255, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.30);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.axyss-play-link:hover .axyss-play-button,
.axyss-play-button:hover {
    transform: scale(1.05);

    background-color: rgba(12, 76, 128, 0.84);
}


.axyss-play-button > span {
    display: block;

    width: 0;
    height: 0;

    margin-left: 6px;

    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 21px solid #ffffff;
}


.axyss-play-title {
    width: 100%;

    margin: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 18px;
    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;

    text-align: center;
    white-space: nowrap;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}


.axyss-play-duration {
    width: 100%;

    margin: 3px 0 0 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;
    line-height: 1.2;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.94);

    text-align: center;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}



/* ==========================================================================
   [HOME-18] HERO — MESSAGES
   ========================================================================== */

.axyss-hero-message {
    position: absolute;

    bottom: 15%;

    width: 38%;

    z-index: 35;

    text-align: center;
}


.axyss-hero-message--without {
    left: 4%;
}


.axyss-hero-message--with {
    right: 3%;
}


.axyss-message-label {
    margin: 0 0 10px 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}


.axyss-hero-message--without .axyss-message-label {
    color: #ff9148;
}


.axyss-hero-message--with .axyss-message-label {
    color: #40adff;
}


.axyss-message-title {
    margin: 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 44px;
    line-height: 1;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.62);

    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}


.axyss-message-highlight {
    margin: 8px 0 0 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 54px;
    line-height: 1;

    font-weight: 400;

    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}


.axyss-hero-message--without .axyss-message-highlight {
    color: #ff8643;
}


.axyss-hero-message--with .axyss-message-highlight {
    color: #299fff;
}



/* ==========================================================================
   [HOME-19] HERO — FOOTER
   ========================================================================== */

.axyss-hero-footer {
    position: absolute;

    left: 3%;
    right: 3%;
    bottom: 0;

    width: auto;

    height: var(--axyss-footer-height);
    min-height: var(--axyss-footer-height);

    margin: 0;
    padding: 14px 0 10px 0;

    z-index: 46;

    border-top: 1px solid rgba(255, 255, 255, 0.22);

    background: linear-gradient(
        to top,
        rgba(3, 10, 19, 0.68) 0%,
        rgba(3, 10, 19, 0.28) 68%,
        rgba(3, 10, 19, 0.00) 100%
    );

    box-sizing: border-box;
}


.axyss-hero-footer::before {
    content: none;

    display: none;
}


.axyss-hero-footer-left,
.axyss-episode-meta {
    display: none;
}



/* ==========================================================================
   [HOME-20] HERO — FOOTER RIGHT
   ========================================================================== */

.axyss-hero-footer-right {
    position: absolute;

    top: 50%;
    right: 0;

    width: 46%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    text-align: center;
}


.axyss-hero-footer-text {
    width: 100%;
    max-width: 470px;

    margin: 0;
    padding: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 600;

    color: #ffffff;

    text-align: center;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.80);
}


.axyss-hero-footer-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: auto;

    padding: 10px 22px;

    gap: 12px;

    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 8px;

    background-color: rgba(3, 17, 31, 0.48);

    font-family: "Inter", Arial, sans-serif;

    font-size: 14px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    text-decoration: none;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.60);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.axyss-hero-footer-button:hover {
    background-color: rgba(255, 255, 255, 0.10);

    border-color: rgba(255, 255, 255, 0.90);

    transform: translateY(-1px);
}



/* ==========================================================================
   [HOME-RWD-01] HERO — DESKTOP LARGE / LOW HEIGHT
   ========================================================================== */

@media (min-width: 1400px) and (max-height: 900px) {

    .axyss-hero {
        --axyss-footer-height: 100px;

        min-height: 720px;
    }


    .axyss-dialogue {
        padding: 18px 22px;
    }


    .axyss-dialogue p {
        font-size: 15px;
    }


    .axyss-dialogue--without {
        top: 16%;
        left: 23.5%;

        width: 290px;
    }


    .axyss-dialogue--with {
        top: 12.5%;
        right: 14%;

        width: 340px;
    }


    .axyss-episode-play {
        top: 40%;
        left: 51.6%;

        width: 175px;
    }


    .axyss-play-button {
        width: 80px;
        height: 80px;
    }


    .axyss-play-title {
        font-size: 17px;
    }


    .axyss-play-duration {
        font-size: 12px;
    }


    .axyss-hero-message {
        bottom: 15%;
    }


    .axyss-message-label {
        font-size: 11px;

        letter-spacing: 4px;
    }


    .axyss-message-title {
        font-size: 38px;
    }


    .axyss-message-highlight {
        font-size: 48px;
    }


    .axyss-hero-footer {
        padding-top: 12px;
        padding-bottom: 8px;
    }


    .axyss-hero-footer-text {
        font-size: 14px;
    }


    .axyss-hero-footer-button {
        padding: 9px 19px;

        font-size: 13px;
    }
}



/* ==========================================================================
   [EP1-01] EPISODE 1 — ROOT
   ========================================================================== */

.axyss-episode {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
    row-gap: 4px;
    column-gap: 0;

    overflow: hidden;

    background-color: #07111e;

    color: #ffffff;

    box-sizing: border-box;
}



/* ==========================================================================
   [EP1-02] EPISODE 1 — INTRO
   ========================================================================== */

.axyss-episode-intro {
    position: relative;

    width: 100%;

    height: 220px;
    min-height: 220px;

    margin: 0;

    padding:
        28px
        6%
        24px
        6%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: linear-gradient(
        90deg,
        #311507 0%,
        #16131a 43%,
        #071422 57%,
        #06365d 100%
    );

    box-sizing: border-box;
}



/* ==========================================================================
   [EP1-03] EPISODE 1 — INTRO TYPOGRAPHY
   ========================================================================== */

.axyss-episode-kicker {
    margin: 0 0 10px 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 12px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.76);
}


.axyss-episode-heading {
    max-width: 1100px;

    margin: 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 48px;
    line-height: 1.05;

    font-weight: 400;

    color: #ffffff;
}


.axyss-episode-lead {
    max-width: 780px;

    margin: 12px 0 0 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 16px;
    line-height: 1.5;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.82);
}



/* ==========================================================================
   [EP1-04] EPISODE 1 — STEP LAYOUT
   3 bandes horizontales compactes.
   ========================================================================== */

.axyss-episode-step {
    position: relative;

    width: 100%;

    height: 240px;
    min-height: 240px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #07111e;

    box-sizing: border-box;
}



/* ==========================================================================
   [EP1-05] EPISODE 1 — STEP SIDES
   Les images sont préparées pour partager le même cadrage.
   ========================================================================== */

.axyss-episode-step > .axyss-step-side {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 53%;
    max-width: none;

    height: 100%;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    box-sizing: border-box;
}



/* ==========================================================================
   [EP1-06] EPISODE 1 — WITHOUT SIDE
   Découpe de la moitié gauche + cadrage spécifique des scènes.
   ========================================================================== */

.axyss-episode-step > .axyss-step-side--without {
    left: 0;

    z-index: 1;

    clip-path: polygon(
        0 0,
        100% 0,
        88.7% 100%,
        0 100%
    );
}


/* --------------------------------------------------------------------------
   ETAPE 1 — PERSONNAGE DECALE VERS LA DROITE
   Libère la zone éditoriale située à gauche.
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-episode-step--01
> .axyss-step-side--without {
    background-position: 35% center;
}


/* --------------------------------------------------------------------------
   ETAPE 2 — CADRAGE STANDARD
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-episode-step--02
> .axyss-step-side--without {
    background-position: center center;
}


/* --------------------------------------------------------------------------
   ETAPE 3 — CADRAGE STANDARD
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-episode-step--03
> .axyss-step-side--without {
    background-position: center center;
}



/* ==========================================================================
   [EP1-07] EPISODE 1 — WITH SIDE
   ========================================================================== */

.axyss-episode-step > .axyss-step-side--with {
    right: 0;

    z-index: 2;

    clip-path: polygon(
        11.3% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}



/* ==========================================================================
   [EP1-08] EPISODE 1 — SIDE OVERLAYS
   ========================================================================== */

.axyss-step-side--without::after {
    content: "";

    position: absolute;

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

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(17, 6, 1, 0.34) 0%,
        rgba(17, 6, 1, 0.12) 42%,
        rgba(17, 6, 1, 0.04) 70%,
        rgba(5, 10, 16, 0.16) 100%
    );

    pointer-events: none;
}


.axyss-step-side--with::after {
    content: "";

    position: absolute;

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

    z-index: 1;

    background: linear-gradient(
        270deg,
        rgba(1, 20, 36, 0.20) 0%,
        rgba(1, 20, 36, 0.06) 45%,
        rgba(1, 20, 36, 0.04) 70%,
        rgba(5, 10, 16, 0.18) 100%
    );

    pointer-events: none;
}



/* ==========================================================================
   [EP1-09] EPISODE 1 — STEP DIAGONAL
   ========================================================================== */

.axyss-episode-step::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 5;

    clip-path: polygon(
        52.94% 0,
        53.06% 0,
        47.06% 100%,
        46.94% 100%
    );

    background: linear-gradient(
        to bottom,
        rgba(76, 185, 255, 0.92) 0%,
        rgba(225, 245, 255, 0.96) 35%,
        #ffffff 50%,
        rgba(255, 230, 205, 0.94) 70%,
        rgba(185, 101, 45, 0.90) 100%
    );

    pointer-events: none;
}



/* ==========================================================================
   [EP1-10] EPISODE 1 — STEP CONTENT LAYER
   Positionnement éditorial des contenus.
   ========================================================================== */

.axyss-step-side > * {
    z-index: 3;
}


/* --------------------------------------------------------------------------
   ETAPE 1 — GAUCHE
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-episode-step--01
.axyss-step-side--without
.axyss-step-number {
    position: absolute;

    top: 25px;
    left: 22px;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


.axyss-episode
.axyss-episode-step--01
.axyss-step-side--without
.axyss-step-title {
    position: absolute;

    top: 27px;
    left: 92px;

    width: 155px;

    margin: 0;
    padding: 0;
}


.axyss-episode
.axyss-episode-step--01
.axyss-step-side--without
.axyss-step-copy {
    position: absolute;

    top: 105px;
    left: 92px;

    width: 165px;

    margin: 0;
    padding: 0;
}


/* --------------------------------------------------------------------------
   ETAPE 1 — DROITE
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-episode-step--01
.axyss-step-side--with
.axyss-step-title {
    position: absolute;

    top: 26px;
    left: 10.5%;

    width: 205px;

    margin: 0;
    padding: 0;
}


.axyss-episode
.axyss-episode-step--01
.axyss-step-side--with
.axyss-step-copy {
    position: absolute;

    top: 108px;
    left: 10.5%;

    width: 205px;

    margin: 0;
    padding: 0;
}



/* ==========================================================================
   [EP1-11] EPISODE 1 — STEP TYPOGRAPHY
   Neutralisation de la typographie interne Elementor.
   ========================================================================== */


/* --------------------------------------------------------------------------
   NUMERO
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-step-number,
.axyss-episode
.axyss-step-number .elementor-widget-container {
    font-family: "Inter", Arial, sans-serif;

    font-size: 14px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    text-align: center;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
}


.axyss-episode
.axyss-step-number {
    border: 1px solid rgba(53, 170, 255, 0.90);

    border-radius: 50%;

    background-color: rgba(3, 18, 31, 0.42);
}


/* --------------------------------------------------------------------------
   TITRES
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-step-title,
.axyss-episode
.axyss-step-title .elementor-widget-container,
.axyss-episode
.axyss-step-title .elementor-heading-title,
.axyss-episode
.axyss-step-title h1,
.axyss-episode
.axyss-step-title h2,
.axyss-episode
.axyss-step-title h3,
.axyss-episode
.axyss-step-title h4 {
    margin: 0;
    padding: 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 25px;
    line-height: 1.05;

    font-weight: 400;

    color: #ffffff;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}


/* Ligne accent sous le titre */

.axyss-episode
.axyss-step-title::after {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-top: 9px;
}


.axyss-episode
.axyss-step-side--without
.axyss-step-title::after {
    background-color: #ff8b45;
}


.axyss-episode
.axyss-step-side--with
.axyss-step-title::after {
    background-color: #35aaff;
}


/* --------------------------------------------------------------------------
   TEXTES
   -------------------------------------------------------------------------- */

.axyss-episode
.axyss-step-copy,
.axyss-episode
.axyss-step-copy .elementor-widget-container,
.axyss-episode
.axyss-step-copy .elementor-widget-text-editor,
.axyss-episode
.axyss-step-copy p {
    margin: 0;
    padding: 0;

    font-family: "Inter", Arial, sans-serif;

    font-size: 12px;
    line-height: 1.42;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.90);

    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.82);
}


.axyss-episode
.axyss-step-copy p + p {
    margin-top: 4px;
}



/* ==========================================================================
   [EP1-12] EPISODE 1 — CONCLUSION LAYOUT
   ========================================================================== */

.axyss-episode-conclusion {
    position: relative;

    width: 100%;

    height: 150px;
    min-height: 150px;

    margin: 0;
    padding: 22px 5%;

    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

    background: linear-gradient(
        90deg,
        #2a1207 0%,
        #11131b 43%,
        #081522 57%,
        #06365d 100%
    );

    box-sizing: border-box;
}


.axyss-episode-conclusion > .axyss-conclusion-side {
    display: flex;

    flex-direction: column;

    justify-content: center;

    width: auto;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;
}


.axyss-episode-conclusion > .axyss-conclusion-side--without {
    flex: 0 0 22%;

    align-items: flex-start;

    text-align: left;
}


.axyss-episode-conclusion > .axyss-conclusion-center {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.axyss-episode-conclusion > .axyss-conclusion-side--with {
    flex: 0 0 22%;

    align-items: flex-end;

    text-align: right;
}



/* ==========================================================================
   [EP1-13] EPISODE 1 — CONCLUSION TYPOGRAPHY
   ========================================================================== */

.axyss-conclusion-kicker {
    font-family: "Inter", Arial, sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.axyss-conclusion-side--without .axyss-conclusion-kicker {
    color: #ff9148;
}


.axyss-conclusion-side--with .axyss-conclusion-kicker {
    color: #40adff;
}


.axyss-conclusion-copy {
    margin-top: 8px;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.76);
}


.axyss-conclusion-title {
    max-width: 900px;

    margin: 0;

    font-family: "DM Serif Display", Georgia, serif;

    font-size: 34px;
    line-height: 1.15;

    font-weight: 400;

    color: #ffffff;
}


.axyss-conclusion-highlight {
    color: #299fff;
}



/* ==========================================================================
   [EP1-14] EPISODE 1 — NEXT EPISODE CTA
   ========================================================================== */

.axyss-episode-next {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 14px;

    padding: 11px 20px;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 7px;

    background-color: rgba(255, 255, 255, 0.03);

    font-family: "Inter", Arial, sans-serif;

    font-size: 14px;
    line-height: 1;

    font-weight: 600;

    color: #ffffff;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.axyss-episode-next:hover {
    background-color: rgba(255, 255, 255, 0.09);

    border-color: rgba(255, 255, 255, 0.90);
}



/* ==========================================================================
   [EP1-RWD-01] EPISODE 1 — DESKTOP <= 1500
   ========================================================================== */

@media (max-width: 1500px) {

    .axyss-episode-heading {
        font-size: 42px;
    }


    .axyss-episode-step {
        height: 220px;
        min-height: 220px;
    }


    .axyss-step-title {
        font-size: 30px;
    }


    .axyss-conclusion-title {
        font-size: 30px;
    }
}/* End custom CSS */