/* ============================================================
   ARCHERS AGATHOIS
   PAGE HORAIRES
============================================================ */

.aa-schedule-page {
    background: #090909;
    color: #ffffff;
    overflow: hidden;
}

.aa-schedule-page * {
    box-sizing: border-box;
}

.aa-schedule-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ============================================================
   HERO
============================================================ */

.aa-schedule-hero {
    position: relative;

    padding: 145px 0 85px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(245, 196, 0, 0.13),
            transparent 34%
        ),
        #090909;

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.aa-schedule-hero::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: 5%;
    top: -240px;

    border: 1px solid rgba(245,196,0,0.12);
    border-radius: 50%;

    pointer-events: none;
}

.aa-schedule-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #f5c400;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}

.aa-schedule-hero h1 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(52px, 7vw, 88px);
    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.045em;
}

.aa-schedule-hero h1 strong {
    color: #f5c400;
    font-weight: 900;
}

.aa-schedule-hero p {
    max-width: 650px;

    margin: 28px 0 0;

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

    font-size: 17px;
    line-height: 1.7;
}


/* ============================================================
   SECTION
============================================================ */

.aa-schedule-section {
    padding: 85px 0 110px;
}

.aa-schedule-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 40px;
}

.aa-schedule-heading h2,
.aa-free-training h2 {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(32px, 4vw, 46px);
    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.aa-schedule-heading h2 strong,
.aa-free-training h2 strong {
    color: #f5c400;
}

.aa-schedule-heading > p {
    max-width: 370px;

    margin: 0;

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

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

    text-align: right;
}


/* ============================================================
   PLANNING
============================================================ */

.aa-schedule-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: #111111;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;

    overflow: hidden;
}

.aa-schedule-day {
    min-width: 0;

    border-right:
        1px solid rgba(255,255,255,0.08);
}

.aa-schedule-day:last-child {
    border-right: 0;
}

.aa-schedule-day-title {
    min-height: 78px;

    padding: 19px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.aa-schedule-day-title strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.aa-schedule-day-title span {
    display: block;

    margin-top: 6px;

    color: #f5c400;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ============================================================
   ÉVÉNEMENTS
============================================================ */

.aa-schedule-events {
    padding: 13px;
}

.aa-schedule-event {
    position: relative;

    margin-bottom: 10px;
    padding: 17px 15px;

    background: #181818;

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

    border-left:
        3px solid #f5c400;

    border-radius: 9px;

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

.aa-schedule-event:last-child {
    margin-bottom: 0;
}

.aa-schedule-event:hover {
    transform: translateY(-2px);

    background: #1b1b1b;

    border-color: rgba(245,196,0,0.25);
}

.aa-schedule-time {
    display: block;

    margin-bottom: 8px;

    color: #f5c400;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.04em;
}

.aa-schedule-event > strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.3;
}

.aa-schedule-event small {
    display: block;

    margin-top: 6px;

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

    font-size: 10px;
    line-height: 1.4;
}


/* ============================================================
   ENTRAÎNEMENT LIBRE
============================================================ */

.aa-free-training {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, 0.5fr);

    gap: 20px;

    margin-top: 55px;
}

.aa-free-training-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px;

    background:
        radial-gradient(
            circle at 95% 50%,
            rgba(245,196,0,0.08),
            transparent 35%
        ),
        #111111;

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

    border-radius: 16px;
}

.aa-free-training-content > p {
    max-width: 650px;

    margin: 22px 0 0;

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

    font-size: 15px;
    line-height: 1.7;
}

.aa-free-training-note {
    padding-top: 18px;

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

    color: rgba(255,255,255,0.38) !important;

    font-size: 11px !important;
}


/* ============================================================
   CARTE CLÉ
============================================================ */

.aa-key-card {
    padding: 32px;

    background: #f5c400;

    color: #090909;

    border-radius: 16px;
}

.aa-key-icon {
    margin-bottom: 25px;

    font-size: 30px;
}

.aa-key-card > span {
    display: block;

    margin-bottom: 9px;

    color: rgba(0,0,0,0.55);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.aa-key-card > strong {
    display: block;

    font-size: 22px;
    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -0.025em;
}

.aa-key-card > p {
    margin: 15px 0 25px;

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

    font-size: 12px;
    line-height: 1.5;
}

.aa-key-price {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    padding-top: 18px;

    border-top:
        1px solid rgba(0,0,0,0.15);
}

.aa-key-price span {
    font-size: 11px;
    font-weight: 700;
}

.aa-key-price strong {
    font-size: 28px;
    font-weight: 900;
}


/* ============================================================
   LIEU + ESSAI
============================================================ */

.aa-schedule-bottom {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 20px;

    margin-top: 20px;
}

.aa-training-location,
.aa-training-trial {
    padding: 35px;

    border-radius: 16px;
}

.aa-training-location {
    background: #111111;

    border:
        1px solid rgba(255,255,255,0.08);
}

.aa-training-location h3,
.aa-training-trial h3 {
    margin: 0;

    color: #ffffff !important;

    font-size: 25px;
    font-weight: 900;

    letter-spacing: -0.025em;
}

.aa-training-location p {
    margin: 7px 0 18px;

    color: #f5c400;

    font-size: 14px;
    font-weight: 700;
}

.aa-training-location small {
    color: rgba(255,255,255,0.4);

    font-size: 11px;
}

.aa-training-trial {
    background: #111111;

    border:
        1px solid rgba(245,196,0,0.28);
}

.aa-training-trial a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;
    padding: 13px 17px;

    background: #f5c400;

    color: #090909 !important;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none !important;

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

.aa-training-trial a:hover {
    background: #ffd51a;

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .aa-schedule-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .aa-schedule-day {
        border-bottom:
            1px solid rgba(255,255,255,0.08);
    }

    .aa-free-training {
        grid-template-columns: 1fr;
    }

    .aa-key-card {
        display: grid;

        grid-template-columns:
            auto 1fr auto;

        align-items: center;

        gap: 20px;
    }

    .aa-key-icon {
        margin: 0;
    }

}


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

@media (max-width: 650px) {

    .aa-schedule-container {
        width: min(
            100% - 28px,
            1180px
        );
    }


    /* HERO */

    .aa-schedule-hero {
        padding: 120px 0 60px;
    }

    .aa-schedule-hero h1 {
        font-size: clamp(
            44px,
            14vw,
            62px
        );
    }

    .aa-schedule-hero p {
        font-size: 15px;
    }


    /* SECTION */

    .aa-schedule-section {
        padding: 60px 0 80px;
    }

    .aa-schedule-heading {
        display: block;

        margin-bottom: 28px;
    }

    .aa-schedule-heading > p {
        margin-top: 18px;

        text-align: left;
    }


    /* PLANNING */

    .aa-schedule-grid {
        display: block;

        background: transparent;

        border: 0;

        border-radius: 0;

        overflow: visible;
    }

    .aa-schedule-day {
        margin-bottom: 12px;

        background: #111111;

        border:
            1px solid rgba(255,255,255,0.09) !important;

        border-radius: 12px;

        overflow: hidden;
    }

    .aa-schedule-day-title {
        min-height: auto;

        padding: 17px 18px;
    }

    .aa-schedule-events {
        padding: 10px;
    }

    .aa-schedule-event {
        padding: 16px;
    }


    /* LIBRE */

    .aa-free-training {
        display: block;

        margin-top: 40px;
    }

    .aa-free-training-content {
        padding: 28px 23px;

        border-radius: 13px;
    }

    .aa-key-card {
        display: block;

        margin-top: 12px;
        padding: 25px;

        border-radius: 13px;
    }

    .aa-key-icon {
        margin-bottom: 18px;
    }


    /* BAS */

    .aa-schedule-bottom {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 12px;
    }

    .aa-training-location,
    .aa-training-trial {
        padding: 27px 23px;

        border-radius: 13px;
    }

}

/* ============================================================
   COULEURS DES CRÉNEAUX
============================================================ */

.aa-schedule-event {
    border-left-width: 3px;
}


/* JEUNES
============================================================ */

.aa-schedule-event--youth {
    background:
        linear-gradient(
            135deg,
            rgba(68, 180, 65, 0.18),
            rgba(68, 180, 65, 0.08)
        ) !important;

    border-color:
        rgba(68, 180, 65, 0.35) !important;

    border-left-color:
        #4fcb45 !important;
}

.aa-schedule-event--youth .aa-schedule-time {
    color: #70dc63;
}


/* ADULTES DÉBUTANTS
============================================================ */

.aa-schedule-event--adult {
    background:
        linear-gradient(
            135deg,
            rgba(47, 126, 224, 0.18),
            rgba(47, 126, 224, 0.08)
        ) !important;

    border-color:
        rgba(47, 126, 224, 0.35) !important;

    border-left-color:
        #3c8ef1 !important;
}

.aa-schedule-event--adult .aa-schedule-time {
    color: #68a9ff;
}


/* COMPÉTITEURS
============================================================ */

.aa-schedule-event--competitor {
    background:
        linear-gradient(
            135deg,
            rgba(163, 73, 231, 0.19),
            rgba(163, 73, 231, 0.08)
        ) !important;

    border-color:
        rgba(163, 73, 231, 0.36) !important;

    border-left-color:
        #b35af2 !important;
}

.aa-schedule-event--competitor .aa-schedule-time {
    color: #c77bff;
}


/* COMPÉTITIONS
============================================================ */

.aa-schedule-event--competition {
    background:
        linear-gradient(
            135deg,
            rgba(240, 153, 20, 0.23),
            rgba(240, 153, 20, 0.09)
        ) !important;

    border-color:
        rgba(240, 153, 20, 0.45) !important;

    border-left-color:
        #f2a31a !important;
}

.aa-schedule-event--competition > strong {
    color: #fff;
}

.aa-schedule-event--competition small {
    color: rgba(255,255,255,0.55);
}


/* LIEN CALENDRIER
============================================================ */

.aa-schedule-calendar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 14px;

    color: #f2a31a !important;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;
}

.aa-schedule-calendar-link span {
    transition: transform 0.2s ease;
}

.aa-schedule-calendar-link:hover span {
    transform: translateX(4px);
}


/* ============================================================
   LÉGENDE
============================================================ */

.aa-schedule-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 18px;
}

.aa-schedule-legend-item {
    display: inline-flex;
    align-items: center;

    gap: 8px;

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

    font-size: 11px;
}

.aa-schedule-legend-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.aa-schedule-legend-dot--youth {
    background: #4fcb45;
}

.aa-schedule-legend-dot--adult {
    background: #3c8ef1;
}

.aa-schedule-legend-dot--competitor {
    background: #b35af2;
}

.aa-schedule-legend-dot--competition {
    background: #f2a31a;
}


/* ============================================================
   PLANNING 7 JOURS
============================================================ */

.aa-schedule-grid {
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}


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

@media (max-width: 1100px) {

    .aa-schedule-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


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

@media (max-width: 650px) {

    .aa-schedule-grid {
        display: block;
    }

    .aa-schedule-day {
        margin-bottom: 12px;
    }

    .aa-schedule-legend {
        justify-content: flex-start;

        gap: 14px 20px;

        margin-top: 20px;
    }

}