/* =================================
   LUGE ALPINE
================================= */

.luge-hero{
    background:
        linear-gradient(
            rgba(19,35,61,0.75),
            rgba(40,71,109,0.82)
        ),
        url('/images/luge-alpine.jpg');

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

/* SECTION TEXTE */

.luge-section{
    padding: 90px 20px;
    background: #f8fbff;
}

.luge-container{
    max-width: 1100px;
    margin: auto;
}

.luge-container h2{
    color: var(--bleu-fonce);
    font-size: 42px;
    margin-bottom: 30px;
    font-weight: 800;
}

.luge-container p{
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* SCROLL DOUX */

html{
    scroll-behavior: smooth;
}

/* =================================
   SECTION TARIFS / HORAIRE
================================= */

.pricing-section{
    padding: 90px 20px;
    background:
        linear-gradient(
            180deg,
            #edf4fb 0%,
            #dfeaf5 100%
        );
}

/* TITRE DES SECTIONS */

.pricing-title{
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px;
}

.pricing-subtitle{
    display: inline-block;
    color: var(--bleu);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pricing-title h2,
.pricing-section > h2{
    text-align: center;
    color: var(--bleu-fonce);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 18px;
}

.pricing-title p{
    font-size: 1.1rem;
    color: #5f6b7a;
    line-height: 1.6;
}

/* =================================
   CARTES DE PRIX LUGE
================================= */

.luge-pricing-cards{
    max-width: 850px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

.luge-price-card{
    background: white;
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.10);
    transition: 0.3s ease;
}

.luge-price-card:hover{
    transform: translateY(-6px);
}

.luge-price-card-title{
    background: var(--bleu-fonce);
    color: white;
    padding: 28px 20px;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
}

.luge-price{
    padding: 35px 20px;
    font-size: 3rem;
    font-weight: 900;
    color: var(--bleu-fonce);
}

/* =================================
   TABLEAU HORAIRE
================================= */

.luge-table{
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 10px 25px rgba(0,0,0,0.08);
}

.luge-row{
    display: grid;
    grid-template-columns: 250px 1fr;
}

.luge-row div{
    padding: 20px;
    border-bottom: 1px solid #e7edf5;
}

.luge-header{
    background: var(--bleu-fonce);
    color: white;
    font-weight: 700;
}

.luge-row:not(.luge-header):nth-child(even){
    background: #f8fbff;
}

/* =================================
   RANDONNÉE ALPINE
================================= */

.rando-hero{
    background:
        linear-gradient(
            rgba(19,35,61,0.75),
            rgba(40,71,109,0.82)
        ),
        url('/images/randonnee-alpine.jpg');

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

/* SECTION TEXTE */

.rando-section{
    padding: 90px 20px;
    background: #f8fbff;
}

.rando-container{
    max-width: 1100px;
    margin: auto;
}

.rando-container h2{
    color: var(--bleu-fonce);
    font-size: 42px;
    margin-bottom: 30px;
    font-weight: 800;
}

.rando-container p{
    color: #555;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* RÈGLES */

.rando-rules{
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}

.rule-card{
    background: white;
    padding: 30px;
    border-radius: 18px;
    color: var(--bleu-fonce);
    font-weight: 600;
    box-shadow:
        0 10px 25px rgba(0,0,0,0.08);
    transition: .3s ease;
}

.rule-card:hover{
    transform: translateY(-5px);
}

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

@media(max-width:900px){

    .rando-rules{
        grid-template-columns: 1fr;
    }

    .rando-container h2{
        font-size: 30px;
    }

}

@media(max-width:768px){

    .luge-container h2{
        font-size: 30px;
    }

    .luge-pricing-cards{
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .luge-row{
        grid-template-columns: 1fr;
    }

    .pricing-section{
        padding: 70px 20px;
    }

    .pricing-title h2,
    .pricing-section > h2{
        font-size: 2.4rem;
    }

}

/* =========================================
   TARIFS RANDONNÉE ALPINE
========================================= */

.luge-pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    width: 100%;
    max-width: 1050px;

    margin: 50px auto 0;

    padding: 0 20px;

    box-sizing: border-box;
}


.luge-price-card {
    width: 100%;

    min-height: 190px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.luge-price-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}


.luge-price-card-title {
    min-height: 74px;

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

    padding: 15px 20px;

    background: var(--bleu-fonce);

    color: white;

    text-align: center;

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: 0.3px;
}


.luge-price {
    flex: 1;

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

    padding: 25px 20px;

    color: var(--bleu-fonce);

    font-size: 2.6rem;

    font-weight: 800;
}

@media (max-width: 950px) {

    .luge-pricing-cards {
        grid-template-columns: repeat(2, 1fr);

        max-width: 750px;
    }

}

@media (max-width: 600px) {

    .luge-pricing-cards {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 35px;
    }


    .luge-price-card {
        min-height: 160px;
    }


    .luge-price {
        font-size: 2.3rem;
    }

}