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

body {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 20px;
    line-height: 1.6;
    color: #474747;
    background-color: #ffff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: #1c4139 !important;
    font-family: 'Montserrat';
}

h2{
    color:#1c4139 !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

h3{
    color:#75b59a !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}



p {
    font-size: 18px;
    margin-bottom: 1rem;
    font-family: 'Montserrat';
}


p.base{
    color:#75b59a;
    font-weight: 700;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* Base du bouton */
.btn {
    display: inline-block;
    padding: 10px 20px !important;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius:50px !important;
}

/* Style du bouton primaire */
.btn-primary {
    background: #75b59a !important;
    color: #ffffff;
    font-weight: bold !important;
    border: 1px solid #75b59a !important;

}

.btn-primary:active,
.btn-primary:focus, 
.btn-primary:hover {
    background: #1c4139  !important;
    color:#fff !important;
    border:1px solid #1c4139  !important;
}



/* Style du bouton default */
.btn-default {
    background: #fff !important;
    color: #1E2655;
    font-weight: bold !important;
    border: 1px solid #1E2655 !important;
}

.btn-default:focus,
.btn-default:active,
.btn-default:hover {
    background: #1E2655 !important;
    color:#fff !important;
    border:1px solid #1E2655 !important;
}

/* Style du bouton secondary */
.btn-secondary {
    background-image: linear-gradient(to left bottom, #0c112f, #101941, #152054, #1b2867, #222f7b);
    color: #fff;
    font-weight: 400 !important;
    border: 1px solid #1E2655 !important;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover {
    background-image: linear-gradient(to right top, #0c112f, #101941, #152054, #1b2867, #222f7b);
    color:#fff !important;
    border:1px solid #fff !important;
}


.container{
    max-width: 1440px;
}

.img-fluid, .img-thumbnail {
    height: auto;
    max-width: 100%;
}

.border{border: 1px solid red;}

/*HEADER*/

header{
    margin-bottom: -70px;
    z-index: 1000;
    position: fixed;
    width: 100%;
}

header .row{
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.logo {
    position: relative;
    text-align: center;
}

.logo img{
    width: 180px;
    height: auto;
}

#navbarNav{
    justify-content: center;
}

.menu ul.navbar-nav{
    justify-content: space-around;
    margin-bottom: 0;
}

.menu ul.navbar-nav li.nav-item {
    list-style: none;

}

header{
    background: rgba(0,0,0,0.78);
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: transparent;
}

.header li a {
    display: block;
    padding: 20px 20px;
    font-family: 'Montserrat';
    color:#fff !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-transform:uppercase;
    border-bottom: 1px solid transparent;

}

.header li a:hover,
.header li a:active,
.header .menu-btn:hover {
    color: #75b59a;
    border-bottom: 1px solid #75b59a;
}

.header .logo strong{
    color:#fff;
    display: block;
}

/* menu */

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    z-index: 1000;
}

/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 10px;
    margin-top: -15px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #fff;
    display: block;
    height: 3px;
    position: relative;
    transition: background .2s ease-out;
    width: 22px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 6px;
}

.header .menu-icon .navicon:after {
    top: -6px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked ~ .menu {
max-height: 340px;
    width: 100%;
    background: rgba(0, 0, 0, 0.78);
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 34px;
    padding-right: 14px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}


#content img{border-radius:10px;}

.img-top{
    background: url('../img/img-top.jpg') no-repeat center center;
    background-size: cover;
    min-height: 800px;
    display: flex;
    align-items: center;
}

.titre-h1{
    width:50%;
    padding:60px 40px;
    background: rgba(245,250,254,0.5);
    border-radius: 10px;
    margin-left: 5%;
}

.titre-h1 h1{
    color:#1c4139;
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
}

.titre-h1 h1 span{
    font-size: 25px;
    font-weight: 700;
    color:#474747;
    display: block;
    text-transform: inherit;
}

.logo-rdc{
    text-align: center;
    margin-top: -80px;
}

.logo-rdc .baseline{
    text-transform: uppercase;
    margin-top: 5px;
    color:#000;
}

#intro{
    margin:120px auto 0;
}

#intro .row{
    align-items: center;
}

#intro .intro-text{
    text-align: right;
}

#concept{
    position: relative;
    padding-top: 80px
}

#concept h2{
    margin: 50px auto 20px;
    text-align: center;
}

#concept .block-concept{
    text-align: center;
    position: relative;
    z-index: 100;
}

#concept .block-concept h3{
    margin: 40px auto 20px;
}

#concept .block-concept p{
    font-size: 16px;
}

#concept .bg-concept{
    position: absolute;
    background: #fbf1db;
    width: 80%;
    margin-left: 10%;
    border-radius: 25px;
    height: 550px;
    top: 30%;
    z-index: 10;
}




#mission{
    padding-top: 200px;
}

#mission .row{
    display: flex;
    align-items: center;
}



#mission .mission-photo{
    display: flex;
    justify-content: flex-end;

}

#mission .mission-texte h2:before{
    content: url('./img/feuille.svg');
    width: 55px;
    display: block;
    transform: rotatey(180deg); 
}

p.base{
    color:#75b59a;
    font-weight: 700;
}

#mission .mission-texte strong{
    font-weight: 700;
}

#mission .mission-texte em{

}

#mission .mission-texte span{
    display: block;
    font-weight: 700;
}


#selection{
    padding-top: 200px;
    margin: 0 auto;
}


.selection-titre{
    text-align: center;
}

#selection .macaron {
    text-align: center;
    margin-bottom: -100px;
    z-index: 100;
}

#selection .macaron img{width: 212px;}


#selection .block-selection{
    padding: 40px;
    background: #75b59a;
    border-radius:25px;
    color:#fff;
}

#selection .block-selection-titre{
    text-align: center;
}

#selection .block-selection-titre h3:before{
    content: url('./img/tea-leaf.svg');
    width: 50px;
    display: block;
    margin: auto;
    text-align: center;
}

#selection .block-selection-titre h3{
    color:#fff !important;
    font-size: 25px !important;
    font-weight: 700;
}

#selection .block-selection-titre h3 span{
    color:#fff;
    display: block;
    font-size: 22px;
}

#selection .block-selection-producteur{
    display: flex;
    margin:60px auto; 
}
#selection .block-selection-description{
    min-height: 290px;
}

#selection .block-selection-producteur .icon{
    width: 40px;
    margin-right: 10px;
}

#selection .block-selection-producteur h4{
    color:#fff !important;
    font-size: 20px !important;
    font-weight: 700;
}

#selection .block-selection-producteur span{
    display: block;
    color:#fff;
    font-weight: 400;
    font-style:italic;
    font-size: 18px;
}

#selection .block-selection-image{
    margin: 50px auto;
    text-align: center;
}

#selection .block-selection h5{
    text-align: center;
    color:#fff !important;
    font-weight: 700;
    padding: 15px 0px;
}

#collection .selection-titre{
        padding-top: 200px;
    margin-bottom: 30px;

}

#collection .block-collection{
    background:#fbf1db;
    border-radius:25px;
    text-align: center;
    display: block;
    padding: 70px 40px 0;
    position: relative;
    display: flex;
    align-items: stretch;

}

#collection .block-collection img{
    box-shadow: 0 40px 60px rgba(0,0,0,0.15) !important;
    width: 200px;
    display: block;
    text-align: center;
    margin: auto;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}


#collection .block-collection:hover img{
    box-shadow:none !important;
}

#collection .block-collection  {
    display:block;
}

#collection .block-collection h2{
    color:#1c4139 !important;
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 15px;
    text-transform: inherit !important;
}

#collection .block-collection strong{
    color:#75b59a !important;
    font-size: 16px;
    text-transform: uppercase;
    min-height: 40px;
    display: block;
    margin-bottom: 40px;
}


#collection .block-collection .poids{
    max-width: 180px;
    background: #75b59a;
    margin: auto;
    text-align: center;
    border-radius: 5px 5px 0 0 ;
    padding: 5px;
}



#collection .block-collection .poids p{
    color:#fbf1db;
    margin-bottom: 0;
}


#choix {
    padding-top: 200px;
  
}

#choix .row{
    justify-content: center;
}


#choix .titre-choix{
    margin: 40px auto;
    text-align: center;

}

#choix .titre-choix img{
    height: 12px;
    max-width: 110px;
    border-radius: 0;
}

#choix .choix-carte {
    text-align: right;
}

#choix .choix-carte img{
    width: 340px;

}

#choix .choix-text{
    background: url('../img/bg-choix.png') no-repeat right center;
    padding-right: 50px;
    padding-left: 30px;
}


#boutique{padding-top: 100px;}

#boutique .bg-boutique{
    width: 80%;
    margin-left: 10%;
    background: #fbf1db;
    border-radius:25px;
    text-align: center;
    padding: 80px;
}

#boutique .row{ justify-content: center;}

#boutique .btn-link{ margin-top: 30px;}

#boutique .btn-primary:before{
    content: url('./img/shopping-bag.svg');
    width: 25px;
    display: inline-block;
    padding-right: 10px;
}

footer{ padding-top:60px; }

footer ul{
    display: flex;
    justify-content: space-around;
}

footer ul li{ list-style: none;}

footer ul li a{color:#000;}

footer ul li a:hover{color:#75b59a;}

footer span#copyright{
    display: flex;
    align-items: baseline;
}

footer span#copyright p{  padding-right: 10px;}


@media (max-width:1499px){
    .titre-h1 h1{font-size: 35px;}
    .titre-h1 h1 span { font-size: 22px;}

}


@media (max-width:1199px){
    .logo{text-align: center;}
    .menu{display: flex; justify-content: center;}
    .none{display: none;}
    footer ul li,
    footer ul li p{  font-size: 14px;}
}

@media (max-width:991px){
    header .container{width: 100%;max-width: inherit;}
    .menu{display: block; justify-content: inherit;}
    .header ul {padding-top:10px}
    .header li a { display: block;padding:10px;text-align: right;font-size: 16px;}
    .logo img{max-width: 110px;}



}

@media (min-width: 992px) {
    .header li { float: left;}
    .header li a {padding: 10px 20px; }
    .header .menu {clear: none;float: right; max-height: none;}
    .header .menu-icon { display: none; }

        

}

@media (max-width: 992px) {
        .titre-h1 {width: 70%;}
    #intro .row { align-items: center;flex-direction: column;justify-content: center;}
    #intro .row img{ text-align: center;margin: auto; display: flex;}
    #intro .intro-text {text-align: center !important;}
    #concept .bg-concept {   width: 98%;  margin-left: 1%;}
    #selection .macaron{margin-bottom: -40px;}
    .block-selection{margin: 10px auto;}
    #collection .row{flex-direction: column !important;}
    #collection .block-collection {  display: flex;padding: 40px;margin-bottom: 20px;        justify-content: space-around;}
    #collection .block-collection img{margin: inherit;}
    #choix .choix-carte { text-align: center;}
    #selection .block-selection-description {   min-height: inherit;}
    footer ul, footer span#copyright {display: block;text-align: center;}
}
    

@media (max-width:767px){
    #concept .bg-concept{  height: 85%;bottom: 0; margin-top: auto; }
    #concept .block-concept{margin-bottom: 80px;}
    #mission .mission-photo {  justify-content: center;margin-bottom: -40px;}
    .mission-texte{ background: rgba(255, 255, 255, 0.8);        padding: 20px 30px;
    border-radius: 25px;   box-shadow: 0 40px 60px rgba(0, 0, 0, 0.15);}
    #collection .block-collection {display: block;padding: 40px 20px 0;}
    #collection .block-collection img{margin: auto;}
    #boutique .bg-boutique {  padding: 40px 15px;}
    #mission .mission-photo{margin-bottom:0;}

}

  @media (max-width:425px){
    .titre-h1{  width: 100%; margin-left: 0; text-align: center; }
    #choix .choix-carte img {max-width: 100%;}
    #mission .mission-texte h2:before{width: 70px;padding: 15px 10px 15px 15px;border-radius: 50px;background: #fff;}
}