/* ===========================================================
   Biodanz'Ill - style.css
   Version : 1.0
   Partie 1 / 3
   =========================================================== */


/* ===========================================================
   VARIABLES
   =========================================================== */

:root{

    --color-primary:#d07b4a;
    --color-primary-dark:#b56233;
    --color-secondary:#8f4d2e;

    --color-background:#faf6f1;
    --color-background-alt:#f3ede6;

    --color-white:#ffffff;

    --color-text:#444444;
    --color-title:#66331d;

    --color-border:#e4d6cb;

    --shadow-light:0 6px 18px rgba(0,0,0,.08);
    --shadow-medium:0 12px 28px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.30s ease;

    --max-width:1200px;

}


/* ===========================================================
   RESET
   =========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    background:var(--color-background);

    color:var(--color-text);

    line-height:1.7;

    font-size:18px;

    zoom: 0.8;

}


img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}


/* ===========================================================
   CONTAINER
   =========================================================== */

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}


/* ===========================================================
   TYPOGRAPHIE
   =========================================================== */

h1{

    font-size:3.4rem;

    color:var(--color-title);

    margin-bottom:20px;

    line-height:1.1;

}

h2{

    font-size:2.2rem;

    color:var(--color-title);

    margin-bottom:25px;

}

h3{

    color:var(--color-secondary);

    margin-bottom:15px;

    font-size:1.4rem;

}

p{

    margin-bottom:18px;

}


/* ===========================================================
   HEADER
   =========================================================== */

header{

    position:sticky;

    top:0;

    z-index:1000;

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

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--color-border);

}


.header-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:82px;

}


/* ===========================================================
   LOGO
   =========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:54px;

    height:auto;

}

.logo span{

    font-size:1.7rem;

    font-weight:700;

    color:var(--color-title);

}


/* ===========================================================
   NAVIGATION
   =========================================================== */

nav ul{

    display:flex;

    align-items:center;

    gap:34px;

}

nav a{

    color:var(--color-title);

    font-weight:600;

    transition:var(--transition);

}

nav a:hover{

    color:var(--color-primary);

}


/* ===========================================================
   BOUTON MENU MOBILE
   =========================================================== */

.menu-toggle{

    display:none;

    cursor:pointer;

    font-size:2rem;

}


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

.hero{

    padding:80px 0;

}

.hero img{

    -webkit-mask-image:
        radial-gradient(circle,
        black 70%,
        transparent 100%);

    mask-image:
        radial-gradient(circle,
        black 70%,
        transparent 100%);
}

.hero h1{
    font-size:4rem;
}

.hero-content{

    display:grid;

    grid-template-columns:

        1fr
        1fr;

    gap:60px;

    align-items:center;

}

.hero-text p{

    font-size:1.15rem;

    margin-bottom:30px;

}

.hero-image{

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    max-width:650px;

}


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

.button{

    display:inline-block;

    background:var(--color-primary);

    color:white;

    padding:

        15px
        34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow-light);

}

.button:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

}


/* ===========================================================
   SECTIONS
   =========================================================== */

section{

    padding:80px 0;

}

section:nth-child(even){

    background:var(--color-background-alt);

}/* À compléter */

/* ===========================================================
   CARTES
   =========================================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:40px;

}

.card{

    background:var(--color-white);

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-light);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-medium);

}

.card img{

    border-radius:12px;

    margin-bottom:20px;

}

.card h3{

    margin-bottom:15px;

}

.card p:last-child{

    margin-bottom:0;

}


/* ===========================================================
   PAGE BANNER
   =========================================================== */

.page-banner{

    background:linear-gradient(135deg,
        var(--color-primary),
        var(--color-primary-dark));

    color:white;

    text-align:center;

    padding:90px 20px;

}

.page-banner h1{

    color:white;

    margin-bottom:15px;

}

.page-banner p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

}


/* ===========================================================
   DEUX COLONNES
   =========================================================== */

.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.two-columns img{

    border-radius:var(--radius);

    box-shadow:var(--shadow-light);

}


/* ===========================================================
   LISTES
   =========================================================== */

.simple-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.simple-list li{

    background:var(--color-white);

    border-left:5px solid var(--color-primary);

    padding:18px 22px;

    border-radius:10px;

    box-shadow:var(--shadow-light);

}


/* ===========================================================
   LISTE AVEC ICÔNES
   =========================================================== */

.icon-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:30px;

}

.icon-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.icon-list span{

    width:34px;

    height:34px;

    border-radius:50%;

    background:var(--color-primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-weight:bold;

}


/* ===========================================================
   BÉNÉFICES
   =========================================================== */

.benefits{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

    margin-top:40px;

}

.benefit{

    background:white;

    padding:30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-light);

    text-align:center;

}

.benefit h3{

    margin-top:15px;

}


/* ===========================================================
   CITATION
   =========================================================== */

blockquote{

    background:white;

    border-left:6px solid var(--color-primary);

    padding:30px;

    border-radius:12px;

    font-style:italic;

    margin:45px 0;

    box-shadow:var(--shadow-light);

}


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

.pricing{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:40px;

}

.price-card{

    background:white;

    border-radius:var(--radius);

    text-align:center;

    padding:35px;

    box-shadow:var(--shadow-light);

}

.price{

    font-size:2.4rem;

    color:var(--color-primary);

    font-weight:bold;

    margin:20px 0;

}


/* ===========================================================
   STAGES
   =========================================================== */

.stage-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:40px;

}

.stage{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-light);

    transition:var(--transition);

}

.stage:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-medium);

}

.stage img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.stage-content{

    padding:30px;

}

.stage-date{

    color:var(--color-primary);

    font-weight:bold;

    margin-bottom:12px;

}


/* ===========================================================
   FAQ
   =========================================================== */

.faq{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:35px;

}

.faq-item{

    background:white;

    padding:25px;

    border-radius:12px;

    box-shadow:var(--shadow-light);

}

.faq-item h3{

    margin-bottom:10px;

}


/* ===========================================================
   CONTACT
   =========================================================== */

.contact{

    text-align:center;

}

.contact p{

    max-width:700px;

    margin:auto auto 35px auto;

}


/* ===========================================================
   SÉPARATEUR
   =========================================================== */

.separator{

    width:120px;

    height:4px;

    background:var(--color-primary);

    margin:0 auto 50px auto;

    border-radius:20px;

}

/* ===========================================================
   FOOTER
   =========================================================== */

footer{

    background:var(--color-title);

    color:white;

    padding:45px 0;

    text-align:center;

}

footer p{

    margin:8px 0;

}

footer a{

    color:white;

    transition:var(--transition);

}

footer a:hover{

    color:#ffd7c0;

}


/* ===========================================================
   ANIMATIONS
   =========================================================== */

.fade-in{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-in.visible{

    opacity:1;

    transform:none;

}


@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:none;

    }

}


.hero-text,
.hero-image{

    animation:fadeUp .9s ease both;

}


/* ===========================================================
   CLASSES UTILITAIRES
   =========================================================== */

.text-center{

    text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

.hidden{

    display:none;

}


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

@media (max-width:960px){

    h1{

        font-size:2.7rem;

    }

    h2{

        font-size:2rem;

    }

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-image{

        order:-1;

    }

    .two-columns{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    .header-content{

        height:72px;

    }

    .menu-toggle{

        display:block;

        color:var(--color-title);

    }

    nav{

        position:absolute;

        top:72px;

        left:0;

        width:100%;

        background:white;

        border-bottom:1px solid var(--color-border);

        display:none;

    }

    nav.open{

        display:block;

    }

    nav ul{

        flex-direction:column;

        gap:0;

    }

    nav li{

        width:100%;

    }

    nav a{

        display:block;

        padding:18px;

        border-bottom:1px solid var(--color-border);

    }

    section{

        padding:60px 0;

    }

    .page-banner{

        padding:70px 20px;

    }

    .cards,
    .benefits,
    .pricing,
    .stage-grid{

        grid-template-columns:1fr;

    }

}


@media (max-width:480px){

    body{

        font-size:16px;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.7rem;

    }

    .logo span{

        font-size:1.35rem;

    }

    .button{

        width:100%;

        text-align:center;

    }

    .card,
    .benefit,
    .price-card,
    .faq-item{

        padding:25px;

    }

}

nav a.active{
    color:var(--color-primary);
    font-weight:600;
}

nav a.active::after{
    width:100%;
}


/* ===========================================================
   FIN DU FICHIER
   =========================================================== */