/*
Theme Name: Christophe Bellato
Theme URI: https://naturehumaine-cb.fr
Description: Thème personnalisé pour le site Christophe Bellato.
Author: Bastien Jalliffier-Verne
Version: 1.0
*/

body{
    background-color: #FFF5E5;
}


.shrikhand-regular {
    font-family: "Shrikhand", serif;
    font-weight: 400;
    font-style: normal;
  }
  
.bitter-regular {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }


.acceuil{

        .Premier{
            background-image: url("https://naturehumaine-cb.fr/wp-content/themes/Christophe-Bellato/images/imagedebut1.png");
            background-repeat: no-repeat;
            background-size: 100%;

        .descend{
            padding-top: 20% ;
        }

           h2{
             font-size: 40px;
             font-family: Shrikhand;
             text-align: center;
             color: #FFF5E5;
             background-color: #46512A;
             padding-right: 5px;
             padding-left: 15px;
             text-align: center;
             border-radius: 75px;
             padding-top: 7px;
             padding-bottom: 7px;
           }
        }

        .Deuxieme{
            
            background-color: #091606;
            
            .Ligne{
                display: flex;
                justify-content: center;
            }
            
            .Gauche {
                margin-top: 99px;
                margin-left: 75px;
            }
            .Millieu{
                margin-left: 57px;
                margin-top: 107px;
                margin-right: 55px;
                h3{
                    color: #FFF5E5;
                    font-family: Shrikhand;
                    font-size: 32px;
                    text-align: center;
                    margin-bottom: 25px;
                }
                .Texte{
                    color: white;
                    font-family: Bitter;
                    font-size:20px ;
                    text-align: center;
                    margin-bottom: 25px;
                    line-height: 136%;
                }
                .Boutons{
                    background-color: #9A5F20;
                    font-size: 16px;
                    padding: 20px;
                    margin-right: 190px;
                    margin-left: 190px;
                    border-radius: 10px;
                    font-family: Bitter ;
                    text-align: center;

                    a{
                        color: white;
                        text-decoration: none;
                    }

                    &:hover{
                        background-color:#4C4F21 ;
                    }
                }
                
            }

            .Droite{
                margin-top: 99px;
                text-align: center;
                background-color:#46512A  ;
                margin-right: 75px;
                margin-bottom: 151px;
                padding-right: 24px;
                padding-left:24px;
                padding-bottom: 49px;
                .guillemet{
                    font-size: 96px;
                    font-family: Shrikhand;
                    color: #091606;
                    text-decoration: none;
                }
                .Citation {
                    text-align:center;
                    font-family: Shrikhand;
                    font-size:24 ;
                    color: #FFF5E5;
                    line-height: normal;

                }


            }

        }

        .Troisieme{
            background-color: #46512A;

            h3{
                font-family:Shrikhand;
                font-size: 40px;
                color: #FFF5E5;
                text-align: center;
                margin-bottom: 3px;
            }

            .Intro{
                font-family: Bitter;
                font-size: 20px;
                text-align: center ;
                line-height: 136%;
                color: white;
            }

            div.flickity-viewport {
                width: 100%;
            }  
            .Slider{
                width: 100%;
                display: flex;
                padding-bottom: 200px;
                .Prestation{
                    width: 321px;
                    flex-shrink: 0;
                    margin-top: 52px;
                    margin-left: 150px;
                    .image{
                        img{
                            border-radius: 12px 12px 0px 0px;
                        }

                    }


                .Description{   
                    flex-shrink: 0;
                    background-color:#FFF5E5;
                    border-radius: 0px 0px 12px 12px;
                    width: 321px;
                    height: 188px;
                    flex-shrink: 0;

                    
                    
                    .Intitule{
                        font-family:Shrikhand;
                        font-size: 24px;
                        color: #091606;
                        text-align: left;
                        margin-left: 22px;
                        padding-top: 32px;
                        margin-bottom: 20px;
                    }
                    .Intitule2{
                        padding-top: 20px;
                        font-family:Shrikhand;
                        font-size: 24px;
                        color: #091606;
                        text-align: left;
                        margin-left: 22px;
                        margin-bottom: 4px;
                    }
                    .Nombre{
                        margin-left: 22px;
                        font-family: Bitter;
                        text-align: left;
                        color: #46512A;
                        font-size: 12px;
                        margin-bottom: 14px;
                    }
                    .Descrip{
                        margin-left: 22px;
                        font-family: Bitter;
                        text-align: left;
                        color: #091606;
                        font-size: 14px;
                    }
                    
                    }
                    .Cercle{
                        margin-left: 139px;
                        margin-right: 139px;
                        display: flex;
                        width: 22.217px;
                        height: 20px;
                        padding: 10px;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        flex-shrink: 0;
                        border-radius: 107px;
                        background: #9A5F20;
                    }
                }
            }
        }

        .Quatrieme{
            background-color: #FFF5E5;
            padding-bottom: 35px;
            h3 {
                font-family:Shrikhand ;
                font-size: 40px;
                text-align: center;
                color: #46512A;
                padding-bottom: 7px;
                padding-top: 7px;
            }

            .Intro{
                line-height: normal;
                font-family: Bitter;
                font-size: 20px;
                text-align: center;
                color: #000000;
                padding-bottom: 47px;
            }

            
            .Slider{

                margin-left: 80px;
                margin-top: 35px;
                display: flex;

div.flickity-viewport {
    width: 100%;
}

                .Polaroid{
                    
                    background-color: white;
                    margin-left: 100px; 

                    p{
                        padding-top: 25px;
                        padding-bottom: 25px;
                        text-align: center;
                    }
                }
            }

            .Bouton{
                margin-top: 41px;
                border-radius: 15px;
                margin-right: 625px;
                margin-left: 625px;
                padding: 20px;
                text-align: center;
                background-color:#9A5F20;

                a{
                    text-decoration: none;
                    color: white;
                }
                &:hover{
                    background-color:#4C4F21;
                }
            }
        }
    


        .Cinquieme{
            background-color: #FFF5E5;
            


            .Ensemble {
                display: flex;
                padding-top: 51px;
                padding-bottom: 78px;
                justify-content: center;
                .Image{
                    text-align: center;
                }
                .Texte{
                    padding-left: 130px;
                    padding-right: 95px;
                    background-color: #091606;
                    color: white;

                    .Titre{
                        font-family: Shrikhand ;
                        font-size: 32px;
                        color: #FFF5E5;
                        text-align: center;
                        padding-top: 87px;
                        line-height: normal;
                    }

                    .Description{
                        font-family: Bitter;
                        font-size: 20px;
                        text-align:center;
                        padding-top: 25px;
                        padding-bottom: 25px;
                        line-height: 136%;
                    }
                    .Bouton{
                        text-align: center;
                        background-color: #9A5F20;
                        margin-right: 250px;
                        margin-left: 250px;
                        padding: 20px;
                        border-radius: 10px;
                        &:hover{
                            background-color: #4C4F21;
                        }

                        a{
                            color: white;
                            text-decoration: none;
                            font-family: Bitter;
                            font-size: 16px;


                        }
                    }
                }
            }
        }
}