/* =========================================================
   ARCHERS AGATHOIS
   PAGE D'ACCUEIL
   ========================================================= */


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

.aa-hero{
    position:relative;

    width:100%;

    height:calc(100vh - 82px);
    min-height:650px;
    max-height:800px;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    margin:0 !important;
    padding:0 !important;

    background:
        url("../images/hero-archers-agathois.png")
        center center / cover
        no-repeat;

    color:#fff;
}


/* =========================================================
   OVERLAYS
========================================================= */

.aa-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.80) 30%,
            rgba(0,0,0,.52) 52%,
            rgba(0,0,0,.22) 78%,
            rgba(0,0,0,.12) 100%
        );

    z-index:1;

    pointer-events:none;
}


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

    position:absolute;

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

    height:42%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0,0,0,.38) 45%,
            rgba(0,0,0,.82) 100%
        );

    z-index:1;

    pointer-events:none;
}


.aa-hero-overlay{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(243,196,0,.08),
            transparent 30%
        );

    z-index:1;

    pointer-events:none;
}


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

.aa-hero-inner{
    position:relative;

    z-index:2;

    width:min(
        1450px,
        calc(100% - 60px)
    );

    margin:0 auto;

    padding:
        70px 0
        32px;
}


/* =========================================================
   CONTENT
========================================================= */

.aa-hero-content{
    max-width:720px;
}


.aa-hero-kicker{
    margin:0 0 18px;

    color:#f3c400;

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

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2.4px;
}


.aa-hero-title{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            48px,
            5.7vw,
            88px
        );

    line-height:.94;

    letter-spacing:-3px;

    font-weight:900;
}


.aa-hero-title span{
    color:#f3c400;
}


.aa-hero-text{
    margin:
        23px 0
        0;

    color:#c8c8c8;

    font-size:
        clamp(
            15px,
            1.2vw,
            18px
        );

    line-height:1.5;
}


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

.aa-hero-actions{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-top:28px;
}


.aa-hero-btn{
    min-height:48px;

    padding:0 21px;

    border-radius:8px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:13px;

    font-weight:900;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.aa-hero-btn:hover{
    transform:translateY(-2px);
}


/* Bouton principal */

.aa-hero-btn-primary{
    background:#f3c400;

    color:#090909;

    border:
        1px solid
        #f3c400;
}


.aa-hero-btn-primary:hover{
    background:#ffd21a;

    border-color:#ffd21a;

    color:#090909;

    box-shadow:
        0 8px 25px
        rgba(243,196,0,.18);
}


/* Bouton secondaire */

.aa-hero-btn-secondary{
    background:
        rgba(255,255,255,.04);

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

    color:#fff;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.aa-hero-btn-secondary:hover{
    border-color:#f3c400;

    color:#f3c400;

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


/* =========================================================
   INFORMATIONS EN BAS
========================================================= */

.aa-hero-infos{
    width:100%;

    max-width:880px;

    margin-top:48px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid
        rgba(255,255,255,.15);
}


.aa-hero-info{
    min-height:64px;

    padding:
        17px 22px
        0 0;
}


.aa-hero-info + .aa-hero-info{
    padding-left:25px;

    border-left:
        1px solid
        rgba(255,255,255,.12);
}


.aa-hero-info strong{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:13px;

    line-height:1.3;

    font-weight:900;
}


.aa-hero-info span{
    display:block;

    color:#8d8d8d;

    font-size:11px;

    line-height:1.4;
}


/* =========================================================
   ELEMENTOR
   Suppression des marges / espaces autour du Hero
========================================================= */

body.home .site-content,
body.home #content,
body.home .site-main{
    margin-top:0 !important;
    padding-top:0 !important;
}


body.home .ast-container{
    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;
}


body.home .elementor{
    margin:0 !important;
    padding:0 !important;
}


body.home .elementor-section,
body.home .elementor-container,
body.home .elementor-column,
body.home .elementor-widget-wrap,
body.home .elementor-element{
    margin-top:0;
}


body.home .elementor-widget-html{
    width:100%;

    margin:0 !important;

    padding:0 !important;
}


body.home .elementor-widget-html > .elementor-widget-container{
    width:100%;

    margin:0 !important;

    padding:0 !important;
}


/*
 * Permet au Hero de prendre réellement
 * toute la largeur de l'écran.
 */

.elementor .aa-hero{
    width:100vw;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    margin-top:0 !important;

    border:0 !important;
}


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

@media(max-width:1000px){

    .aa-hero{
        height:auto;

        min-height:700px;
        max-height:none;

        background-position:
            65% center;
    }


    .aa-hero-inner{
        width:
            calc(100% - 40px);

        padding:
            80px 0
            30px;
    }


    .aa-hero-content{
        max-width:620px;
    }


    .aa-hero-title{
        font-size:
            clamp(
                48px,
                8vw,
                72px
            );
    }


    .aa-hero-infos{
        max-width:100%;

        margin-top:45px;
    }

}


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

@media(max-width:700px){

    .aa-hero{
        height:auto;

        min-height:680px;

        align-items:flex-end;

        background-position:
            70% center;
    }


    .aa-hero::before{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.28) 0%,
                rgba(0,0,0,.55) 35%,
                rgba(0,0,0,.92) 68%,
                #080808 100%
            );
    }


    .aa-hero::after{
        display:none;
    }


    .aa-hero-inner{
        width:
            calc(100% - 30px);

        padding:
            100px 0
            25px;
    }


    .aa-hero-kicker{
        margin-bottom:14px;

        font-size:10px;

        letter-spacing:1.8px;
    }


    .aa-hero-title{
        font-size:
            clamp(
                44px,
                15vw,
                64px
            );

        line-height:.96;

        letter-spacing:-2px;
    }


    .aa-hero-text{
        margin-top:18px;

        font-size:15px;
    }


    /* Boutons */

    .aa-hero-actions{
        margin-top:24px;

        flex-direction:column;

        align-items:stretch;
    }


    .aa-hero-btn{
        width:100%;
    }


    /* Infos */

    .aa-hero-infos{
        margin-top:38px;

        grid-template-columns:1fr;

        border-top:
            1px solid
            rgba(255,255,255,.12);
    }


    .aa-hero-info{
        min-height:0;

        padding:
            12px 0;
    }


    .aa-hero-info + .aa-hero-info{
        padding-left:0;

        border-left:0;

        border-top:
            1px solid
            rgba(255,255,255,.08);
    }

}


/* =========================================================
   PETITS MOBILES
========================================================= */

@media(max-width:420px){

    .aa-hero{
        min-height:650px;
    }


    .aa-hero-inner{
        width:
            calc(100% - 24px);
    }


    .aa-hero-title{
        font-size:43px;
    }

}

/* =========================================================
   SUPPRESSION ESPACE BLANC ELEMENTOR
========================================================= */

body.home,
body.home #page,
body.home #content,
body.home .site-content,
body.home .site-main{
    margin:0 !important;
    padding:0 !important;
    background:#080808 !important;
}

/* Nouveaux conteneurs Elementor */
body.home .e-con,
body.home .e-con-inner{
    margin-top:0 !important;
    padding-top:0 !important;
    gap:0 !important;
    row-gap:0 !important;
    background:#080808 !important;
}

/* Widget HTML du hero */
body.home .elementor-widget-html{
    margin:0 !important;
    padding:0 !important;
}

body.home .elementor-widget-html .elementor-widget-container{
    margin:0 !important;
    padding:0 !important;
}

/* Hero collé au header */
body.home .aa-hero{
    margin-top:0 !important;
    border-top:0 !important;
}

/* =========================================================
   OVERVIEW
========================================================= */

.aa-overview{
    position:relative;

    width:100vw;

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

    padding:100px 0 110px;

    background:#0b0b0b;

    color:#fff;
}


.aa-section-inner{
    width:min(
        1450px,
        calc(100% - 60px)
    );

    margin:0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.aa-section-heading{
    max-width:820px;

    margin-bottom:55px;
}


.aa-section-kicker{
    margin-bottom:14px;

    color:#f3c400;

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;
}


.aa-section-heading h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            38px,
            4.5vw,
            64px
        );

    line-height:1;

    letter-spacing:-2px;

    font-weight:900;
}


.aa-section-heading h2 span{
    color:#f3c400;
}


.aa-section-heading p{
    max-width:700px;

    margin:22px 0 0;

    color:#8d8d8d;

    font-size:15px;

    line-height:1.7;
}


/* =========================================================
   GRID
========================================================= */

.aa-overview-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}


/* =========================================================
   CARD
========================================================= */

.aa-overview-card{
    position:relative;

    min-height:430px;

    padding:30px;

    border:
        1px solid
        #282828;

    border-radius:14px;

    background:#111;

    overflow:hidden;

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


.aa-overview-card:hover{
    transform:
        translateY(-4px);

    border-color:
        #3a3a3a;

    background:#131313;
}


.aa-overview-card-highlight{
    background:
        linear-gradient(
            150deg,
            rgba(243,196,0,.08),
            rgba(17,17,17,1) 45%
        );

    border-color:
        rgba(243,196,0,.28);
}


/* =========================================================
   NUMBER
========================================================= */

.aa-overview-number{
    position:absolute;

    top:20px;
    right:24px;

    color:#242424;

    font-size:64px;

    font-weight:900;

    line-height:1;

    pointer-events:none;
}


/* =========================================================
   ICON
========================================================= */

.aa-overview-icon{
    width:50px;
    height:50px;

    margin-bottom:35px;

    border:
        1px solid
        rgba(243,196,0,.30);

    border-radius:50%;

    display:grid;

    place-items:center;

    color:#f3c400;

    font-size:21px;
}


/* =========================================================
   CONTENT
========================================================= */

.aa-overview-card h3{
    margin:0 0 12px;

    color:#fff;

    font-size:24px;

    font-weight:900;

    letter-spacing:-.5px;
}


.aa-overview-card > p{
    min-height:48px;

    margin:0 0 25px;

    color:#808080;

    font-size:15px;

    line-height:1.6;
}


/* =========================================================
   LIST
========================================================= */

.aa-overview-card ul{
    list-style:none;

    margin:0;

    padding:0;
}


.aa-overview-card li{
    position:relative;

    padding:
        11px 0
        11px 18px;

    border-bottom:
        1px solid
        #202020;

    color:#cacaca;

    font-size:15px;
}


.aa-overview-card li::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:5px;
    height:5px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:#f3c400;
}


/* =========================================================
   TIMES
========================================================= */

.aa-overview-times{
    margin-top:5px;
}


.aa-overview-times > div{
    padding:12px 0;

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


.aa-overview-times strong{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:15px;

    font-weight:900;
}


.aa-overview-times span{
    display:block;

    color:#858585;

    font-size:15px;

    line-height:1.4;
}


/* =========================================================
   LINK
========================================================= */

.aa-overview-link{
    display:inline-flex;

    margin-top:25px;

    color:#f3c400;

    text-decoration:none;

    font-size:15px;

    font-weight:900;
}


.aa-overview-link:hover{
    color:#ffd21a;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .aa-overview{
        padding:
            80px 0;
    }


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


    .aa-overview-card-highlight{
        grid-column:
            1 / -1;
    }

}


@media(max-width:700px){

    .aa-overview{
        padding:
            65px 0;
    }


    .aa-section-inner{
        width:
            calc(100% - 30px);
    }


    .aa-section-heading{
        margin-bottom:35px;
    }


    .aa-section-heading h2{
        font-size:
            40px;
    }


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


    .aa-overview-card-highlight{
        grid-column:auto;
    }


    .aa-overview-card{
        min-height:0;

        padding:25px;
    }


    .aa-overview-number{
        font-size:52px;
    }

}

/* =========================================================
   WEAPONS
========================================================= */

.aa-weapons{
    width:100vw;

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

    padding:105px 0;

    background:#f4f1e9;

    color:#101010;
}


.aa-section-heading-centered{
    max-width:780px;

    margin:
        0 auto
        55px;

    text-align:center;
}


.aa-weapons .aa-section-kicker{
    color:#a17f00;
}


.aa-weapons .aa-section-heading h2{
    color:#111;
}


.aa-weapons .aa-section-heading h2 span{
    color:#d0a900;
}


.aa-weapons .aa-section-heading p{
    margin:
        20px auto 0;

    color:#666;
}


/* GRID */

.aa-weapons-grid{
    display:grid;

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

    gap:16px;
}


/* CARD */

.aa-weapon-card{
    border:
        1px solid
        #d7d2c8;

    border-radius:14px;

    background:#fff;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.aa-weapon-card:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0 18px 35px
        rgba(0,0,0,.08);
}


/* =========================================================
   WEAPONS - PHOTOS
========================================================= */

.aa-weapon-visual{
    position:relative;

    height:230px;

    display:flex;
    align-items:flex-end;

    padding:20px;

    overflow:hidden;

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


/* Images */

.aa-weapon-classique{
    background-image:
        url("../images/arc-classique.jpg");
}

.aa-weapon-poulies{
    background-image:
        url("../images/arc-poulies.jpg");
}

.aa-weapon-nu{
    background-image:
        url("../images/arc-nu.jpg");
}

.aa-weapon-longbow{
    background-image:
        url("../images/longbow.jpg");
}


/* Dégradé sur les photos */

.aa-weapon-visual::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 20%,
            rgba(0,0,0,.20) 55%,
            rgba(0,0,0,.88) 100%
        );

    z-index:1;
}


/* Numéro */

.aa-weapon-visual span{
    position:relative;

    z-index:2;

    color:#f3c400;

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

    font-weight:900;
}


/* Zoom très léger */

.aa-weapon-visual{
    transition:
        background-size .4s ease;
}

.aa-weapon-card:hover .aa-weapon-visual{
    background-size:105%;
}


/* CONTENT */

.aa-weapon-content{
    padding:24px;
}


.aa-weapon-content h3{
    margin:
        0 0 10px;

    color:#111;

    font-size:22px;

    font-weight:900;
}


.aa-weapon-content p{
    margin:0;

    color:#6f6f6f;

    font-size:14px;

    line-height:1.6;
}


/* RESPONSIVE */

@media(max-width:1050px){

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

}


@media(max-width:700px){

    .aa-weapons{
        padding:
            70px 0;
    }


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


    .aa-weapon-visual{
        height:180px;
    }

}

/* =========================================================
   TARIFS
========================================================= */

.aa-pricing{
    width:100vw;

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

    padding:105px 0;

    background:#090909;

    color:#fff;
}


/* HEADER */

.aa-pricing-header{
    display:grid;

    grid-template-columns:
        1.2fr .8fr;

    align-items:end;

    gap:70px;

    margin-bottom:55px;
}


.aa-pricing-header h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            40px,
            4.5vw,
            64px
        );

    line-height:1;

    letter-spacing:-2px;

    font-weight:900;
}


.aa-pricing-header h2 span{
    color:#f3c400;
}


.aa-pricing-header > p{
    max-width:500px;

    margin:0 0 4px;

    color:#888;

    font-size:15px;

    line-height:1.7;
}


/* GRID */

.aa-pricing-grid{
    display:grid;

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

    gap:14px;
}


/* CARD */

.aa-price-card{
    position:relative;

    min-height:245px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    border:
        1px solid
        #292929;

    border-radius:14px;

    background:#111;

    overflow:hidden;

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.aa-price-card:hover{
    transform:
        translateY(-4px);

    border-color:#454545;
}


.aa-price-card::before{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    top:-65px;
    right:-65px;

    border:
        1px solid
        #292929;

    border-radius:50%;
}


/* FEATURED */

.aa-price-card-featured{
    border-color:
        rgba(243,196,0,.55);

    background:
        linear-gradient(
            145deg,
            rgba(243,196,0,.10),
            #111 55%
        );
}


.aa-price-card-featured::before{
    border-color:
        rgba(243,196,0,.25);
}


.aa-price-badge{
    position:absolute;

    top:22px;
    left:24px;

    padding:7px 10px;

    border-radius:50px;

    background:#f3c400;

    color:#090909;

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* LABEL */

.aa-price-label{
    display:block;

    margin-bottom:12px;

    color:#a0a0a0;

    font-size:14px;

    font-weight:700;
}


/* PRICE */

.aa-price{
    display:flex;

    align-items:flex-start;

    gap:4px;
}


.aa-price strong{
    color:#fff;

    font-size:60px;

    line-height:.9;

    letter-spacing:-3px;

    font-weight:900;
}


.aa-price span{
    margin-top:3px;

    color:#f3c400;

    font-size:24px;

    font-weight:900;
}


.aa-price-card small{
    display:block;

    margin-top:12px;

    color:#666;

    font-size:11px;
}


/* BOTTOM */

.aa-pricing-bottom{
    margin-top:28px;

    padding-top:26px;

    border-top:
        1px solid
        #242424;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}


.aa-pricing-bottom p{
    margin:0;

    color:#888;

    font-size:14px;
}


.aa-pricing-button{
    display:inline-flex;

    align-items:center;

    gap:15px;

    min-height:48px;

    padding:0 20px;

    border-radius:8px;

    background:#f3c400;

    color:#090909;

    text-decoration:none;

    font-size:12px;

    font-weight:900;

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


.aa-pricing-button:hover{
    transform:translateY(-2px);

    background:#ffd21a;

    color:#090909;
}


.aa-pricing-button span{
    font-size:17px;
}


/* =========================================================
   TARIFS RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .aa-pricing-header{
        grid-template-columns:1fr;

        gap:25px;
    }


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

}


@media(max-width:700px){

    .aa-pricing{
        padding:70px 0;
    }


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


    .aa-price-card{
        min-height:210px;
    }


    .aa-pricing-bottom{
        align-items:flex-start;

        flex-direction:column;
    }


    .aa-pricing-button{
        width:100%;

        justify-content:space-between;
    }

}