/* base ---------- */
h1 { font: 700 30px 'Playfair Display SC'; }

h2 { font: 400 36px 'Aboreto'; }

h3 { font: bold 80px 'Lora'; color:#BDBCB7; margin:0; }

p, li, a { font: 500  15px 'Raleway';}

span { font: 400 20px 'Oooh Baby'; color:#5a5e4f; }

html {
  scroll-margin: 2em;
}


@media screen and (min-width:1024px) {
    .mobile-version { display: none;}
    .process-crea-tablette, .process-crea-mobile { display: none;}

}
/*------------- Section accueil --------------------------*/


.container-accueil{
    position:relative;
    top:0;
}

.bandeau_wave-home {
    width:100%;
    position:relative;
    z-index:-1000;    
    display: block;
    margin:auto;
    height:auto;

}

.logo_principal-home {
    position:absolute;
    z-index:1000;
    transform: translateX(-50%);
    top: clamp(-35px, -11vh, 32%);
    left: 50%;
    width: 45%;
    height:90%;
    display: block;
}


.title_accueil {
    display:block;
    margin:auto;
    width: 50%;
    position:relative;
    top:-15vh;
    text-align: center;
}




/*------------- Section introduction --------------------------*/

.container_introduction {
    display: flex;
    width:86%;
    gap:3%;
    justify-content:space-evenly;
    align-items: center;
    margin: 100px auto 150px auto;
    color:#14272D;
}

.introduction_content, .introduction_image {
    width:50%;
}

.button_vert {
    padding: 11px 20px;
    height:auto;
    font: normal 20px 'Oooh Baby';
    color:#BDBCB7;
    background-color: #3c473f;
    border-radius:20px;
}

.button_vert:hover {
    background-color: #BDBCB7;
    border:1px solid #3c473f;
    color:#14272D;
}

.partie_button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.partie_button p {
    width: 61%;
}


.symbole-carre{
    width:30%;
    height:auto;
    display: block;
}

.symbole-carre img {
    width:100%;
    display: block;
}


/*------------- Section offre : identité visuelle --------------------------*/

.bloc-gauche_section {
    position: relative;
    display: block;
    margin-bottom:300px;
}

.bloc-gauche_content {
    display: block;
    background-color: #5A5E4F;
    color:#BDBCB7;
    width:58%;
    padding:6px 70px 45px 40px;
}

.bloc-gauche_title {
    display:flex;
    width:fit-content;
    align-items: center;
    gap:30px;
}

.bloc-gauche_texte {
    width:80%;
}

.titre-entree { font-size:20px; }

.button_beige {
    padding: 11px 20px;
    height:auto;
    font: normal 20px 'Oooh Baby';
    color:#14272D;
    background-color: #BDBCB7;
    border-radius:20px;
    width:fit-content;
    box-shadow:4px 4px 4px #3c473f;
}

.button_beige:hover {
    background-color: #5A5E4F;
    border:1px solid #BDBCB7;
    color:#BDBCB7;
}

.button-offre01 {
    display: block;
    position:relative;
    top:15px;
    left:55%;
}

.dame-ordi {
    width:fit-content;
    height:410px;
    position:absolute;
    z-index:10000;
    top:30%;
    left:52%;
}




/*------------- Section offre : site internet --------------------------*/

.site-internet_section {
    position: relative;
    display: block;
    margin-bottom:300px;
}

.site-internet_content {
    display: block;
    background-color: #5A5E4F;
    color:#BDBCB7;
    width:58%;
    text-align: end;
    padding:6px 50px 45px 70px;
    margin:auto 0 auto auto;
}

.site-internet_title {
    display:flex;
    width:fit-content;
    align-items: center;
    gap:30px;
    margin:auto 0 auto auto;
}

.site-internet_texte {
    width:80%;
    margin:auto 0 auto auto;
}

.button-offre02 {
    display: block;
    margin:20px 55% auto auto;
}

.figma-ordi {
    width:fit-content;
    height:410px;
    position:absolute;
    z-index:10000;
    top:30%;
    right:55%;
}




/*------------- Section offre : supports print --------------------------*/

.powerpoint-ordi {
    width:30%;
    position:absolute;
    z-index:10000;
    height:90%;
    top:30%;
    object-fit:cover;
    left:52%;
}




/*------------- Section bandeau contact --------------------------*/

.contact-section {
    display: block;
    width:100%;
    height:auto;
    position:relative;
    padding:100px 0;
    background-size:cover;
    background-image: url(https://melioreadesign.fr/wp-content/uploads/2026/02/flower-background.webp);
}

.contact-content {
    display: block;
    margin:auto;
    width:40%;
    height:auto;
    padding:20px 40px 65px 40px;
    background-color: #BDBCB7;
    border-radius:50px 0 50px 50px;
}

.span-contact {
    font-size: 45px;
}

.button-contact {
    position:relative;
    top:20px;
    left:70%;
}




/*------------- Section PORTFOLIO --------------------------*/
.section_portfolio {
    width:90%;
    height:auto;
    display: block;
    position:relative;
    margin:auto;
}

.title-portfolio { 
    font-size: 40px;
    margin: 250px 0 10px 10%;
    color:#14272D;
    padding-top:80px;
}

.subtitle-portfolio {
    font-size:30px;
    margin-left: 5%;
    margin-bottom:30px;
    color:#3C473F;
}

.lien-portfolio {
    text-decoration: underline;
    color:#14272D;
    font-size:25px;
    padding-left:40px;
    width:max-content;
}

.portfolio-image {
    display: flex;
    width:100%;
    margin:auto;
}

.candlisa, .brand-board {
    width: 50%;
    height:auto;
}

.brand-board_group{
    display: flex;
    flex-direction: column;
    gap:40px;
    width:50%;
    height:auto;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0;
    right:0;
}

.brand-board img {
    width: 100%;
    height:auto;
    display: block;
    margin:auto;
    padding:32px;
    background-color: rgba(60, 71, 63, 0.53);
    border-radius:20px;

}

.candlisa img { 
    width:100%;
    background-color: rgba(60, 71, 63, 0.53);
    border-radius:20px;
    display: block;
    margin:auto;
    padding-left:30px;
}

.portfolio-content img { width:100%; display: block;}

.groupe-portfolio {
    display: flex;
    flex-direction: column;
    gap:150px;
}

/*------------- Processus de création --------------------------*/
.process-crea img{
    width:100%;
    height:auto;
    display: block;
    margin:auto;
    margin-top:200px;
}




/*------------- Section Footer --------------------------*/
.section-footer {
    display: flex;
    width:90%;
    height:auto;
    margin:auto;
    margin-top:250px;
    align-items: center;
    justify-content: space-between;
}

.section-texte {
    width:30%;
    height:auto;
    color:#14272D;
}

.span-footer {
    font: bold 20px 'Playfair Display SC';
    color:#3C473F;
}

.email-footer {
    text-align: end;
    color:#14272D;
    font: normal 25px 'Oooh Baby';
    display: block;
    padding-top:15px;
}

.section-logo {
    width:20%;
    height:auto;
}

.logo-secondaire_footer img { 
    width:85%; 
    margin:auto;
    display: block;
    height:auto;
}

.groupe-logo_reseaux {
    display: grid;
    grid-template-columns: repeat(3, 0fr);
    gap: 26px;
    justify-content: center;
}

.section-tiret {
    width:18%;
    height:auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:20px;
    color:#14272D;
}

.section-plan {
    width:20%;
    height:auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:20px;
    color:#14272D;
}

.section-plan li { padding-left: 25px; }

.span-etoile {
    padding-right:20px;
    font-size:13px;
} 

.end-footer {
    display: block;
    width:max-content;
    margin:50px auto 100px auto;
    color:#14272D;
}

.span-end_footer {
    font: 500  15px 'Raleway';
    color:#3C473F;
}


@media screen and (min-width:767px) and (max-width:1023px) {
    /*------------- Section accueil --------------------------*/
    .logo_principal-home { height:95%; }
    .mobile-version { display: none; }

    /*------------- Section introduction --------------------------*/
    .container_introduction {
        width:90%;
        margin-bottom:100px;
    }
    
    .title_accueil {
        font-size:30px; 
        top:-10vh;
        width:66%;
    }

    p { font-size: 13px; }

    .introduction_content { width:56%; }

    .partie_button p{ width:55%;}


    /*------------- Section offre : identité visuelle --------------------------*/
    .dame-ordi {
        height:85%;
        left:60%
    }

    .bloc-gauche_content{ width:65%; }


    /*------------- Section offre : site internet --------------------------*/
    .site-internet_content { width:65%; }

    .figma-ordi {
        height:85%;
        right:60%;
    }


    /*------------- Section offre : supports print --------------------------*/
    .powerpoint-ordi {
        width:35%;
        left:60%;
    }

    /*------------- Section contact bandeau --------------------------*/
    .contact-content {
        width: 55%;
        padding: 20px 40px 50px 40px;
    }

    .button-contact {
        top: 15px;
        left:65%;
    }

    .process-crea-computer, .process-crea-mobile { display: none;}



    /*------------- Section Footer --------------------------*/
    .section-footer {
        width:95%;
        margin-top:170px;
    }

    .email-footer {
        font: normal 19px 'Oooh Baby';
    }

    .section-logo {
        width:20%;
        height:auto;
    }

    .logo-secondaire_footer img { 
        width:100%; 
    }

    .groupe-logo_reseaux {
        display: flex;
        gap: 0;
    }

    .groupe-logo_reseaux img { 
        width:100%;
        display: block;
    }

    .section-tiret { font-size:13px; }

    .section-plan { gap:15px; }

    .section-plan li { 
        padding-left: 10px; 
        font-size:13px;
    }

    .span-etoile { padding-right:15px; } 

    .section-plan h2 { font-size:25px; }
}



@media screen and (min-width:500px) and (max-width:766px) {
    .logo_principal-home { height:95%; }

}

@media screen and (max-width:766px) {
    h3 { font-size: 60px; }
    
    h2 { font-size: 28px; }

    /*------------- Section accueil --------------------------*/
    .logo_principal-home { width:50%; height:91%; }


    /*------------- Section introduction --------------------------*/
    .computer-version { display: none; }

    .container_introduction {
        width:90%;
        margin-bottom:100px;
        display: block;
        margin-top:35px;
    }
        
    .title_accueil {
        font-size:20px; 
        top:-5vh;
        width:66%;
    }

    p { font-size: 13px; }

    .introduction_content {
        width: 90%;
        margin: auto;
        margin-top: 50px;
    }

    .partie_button p{ 
        display:block;
        width:100%;
        margin:auto;
        margin-top:25px;
    }

    .partie_button { display: block; }

    .partie_button a {
        position: relative;
        top: 25px;
        left: 44%;    
    }

    .symbole-carre { 
        width:50%;
        margin:auto;
        display: block;
    }


    /*------------- Section offre : identité visuelle --------------------------*/
    .dame-ordi {
        height:60%;
        object-fit: cover;
        width:44%;
        left:52%;
        top:78%;
    }

    .button-offre01 { left:0; }

    .bloc-gauche_texte { width:100%; }

    .bloc-gauche_content{ 
        width:70%;
        padding: 6px 40px 45px 40px;
    }

    .titre-entree { font-size:18px; }


    /*------------- Section offre : site internet --------------------------*/
    .site-internet_content { 
        width:65%;
        padding:6px 40px 45px 40px; 
    }

    .site-internet_texte { width:100%; }

    .button-offre02 { margin: 25px 0 auto auto; }

    .figma-ordi {
        width: 45%;
        height: 54%;
        left:6%;
        top:78%;
    }


    /*------------- Section offre : supports print --------------------------*/
    .powerpoint-ordi {
        width:50%;
        height:50%;
        left:47%;
        top:78%;
    }

    /*------------- Section contact bandeau --------------------------*/
    .contact-content {
        width: 80%;
        padding: 20px 20px 50px 20px;
    }

    .button-contact {
        top: 15px;
        left:45%;
    }

    /*------------- Section PORTFOLIO --------------------------*/
    .title-portfolio { 
        font-size: 30px;
        margin-top:50px;
        margin-bottom:20px;
    }

    .subtitle-portfolio {
        font-size:20px;
        margin-left: -2%;
        margin-bottom:22%;
    }

    .lien-portfolio {
        font-size:17px;
        padding-left:40px;
    }

    .brand-board_group{
        width:50%;
        bottom:0;
        gap:18px;
        justify-content: end;
    }

    .brand-board img {
        width: 130%;
        padding:15px;
        border-radius:15px;
    }

    .candlisa img { 
        border-radius:15px;
        padding:10px;
    }

    .candlisa, .brand-board { margin:0; }

    .process-crea-tablette, .process-crea-computer { display: none;}



    /*------------- Section Footer --------------------------*/
    .section-footer {
        display: block;
        width:90%;
        height:auto;
        margin:auto;
        margin-top:190px;
    }

    .section-texte, .section-logo, .section-tiret, .section-plan { 
        width:85%;
        margin: 40px auto;
    }

    .section-tiret, .section-plan {
        width:max-content;
    }

    .end-footer {
        width:75%;
        text-align: center;
        display: block;
        margin:auto;
        margin-bottom:100px;
    }

}






/* État caché */
.fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

/* État visible */
.fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}