/**
 * CSS de la page des boisson
 * @author GBI - GN
 * @date 31/05/2023
 * @file boisson.css
 */
div.boisson {
    margin-top:40px;
    margin-bottom:20px;
    float:left;
    width:100%;
    height:680px;
    overflow: hidden; 
    position:relative;
}
div.boisson #prev {
    z-index: 10;
    color: #FFFFFF;
    background:url('../img/left_arrow_hover.png') no-repeat center;
    width:38px;
    height:60px;
    position: absolute;
    border: none;
    top: calc(50% - 30px);
    left: 20px;
    font-size: 60px;
    outline: none;
    cursor:pointer;
}
div.boisson #next {
    z-index: 10;
    background:url('../img/right_arrow_hover.png') no-repeat center;
    width:38px;
    height:60px;
    position: absolute;
    border: none;
    top: calc(50% - 30px);
    right: 20px;
    font-size: 60px;
    outline: none;
    cursor:pointer;
}
div.boisson .circles {
    position:absolute;
    bottom:0px;
    left:calc(50% - 155px);
    z-index: 9000;
}
div.boisson .circle {
    border: #F9725F 2px solid;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: transparent;
    display: inline-block;
    cursor: pointer;
}
div.boisson .circle:hover {
    border: #FFFFFF 2px solid;
}
div.boisson #slider {
    width:100%;
    height:inherit;
}
div.boisson #slider .boisson {
    height: 550px;
    width: 50%;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}
div.boisson #slider .ctn {
    float:right;
    width:50%;
}
div.boisson #slider .ctn div.titre {
    margin-top:125px;
    float:left;
    width:100%;
    height:50px;
    text-align:center;
    line-height:50px;
    font-family: 'Kanit';
    font-size:18px;
    font-weight: bold;
}
div.boisson #slider .ctn div.titre span {
   /* border-bottom:2px solid #F9725F;*/
}
div.boisson #slider .ctn  div.text {
    float:left;
    width:100%;
    height:auto;
    margin-top:10px;
    margin-bottom:40px;
}
div.boisson #slider .ctn  div.text span {
    display:block;
    margin:auto;
    margin-left:40px;
    margin-right:100px;
    font-family: 'Kanit';
    font-size:18px;
    overflow:hidden;
    line-height:25px;
    /*text-align:justify;*/
    text-align: left;
}
div.boisson #slider .ctn  div.text span.detail {
    margin-top:20px;
}
/* ACROCHE */
.ligneTopAcroche {
    float:left;
    display:block;
    width:100%;
    height:0px;
    margin-top:40px;
    border-top:1px solid #F9725F;
}
.ligneBottomAcroche {
    float:left;
    display:block;
    width:100%;
    height:1px;
    margin-bottom:40px;
    border-bottom:1px solid #F9725F;
}
.acroche {
    float:left;
    width:100%;
    height:40px;
    background:transparent;
    height:auto;
    text-align:center;
    line-height:20px;
    font-family: 'Kanit';
    font-size:18px;
    padding-top:20px;
    padding-bottom:20px;
    font-style: italic;
}

/**
 * CSS Spécifique pour le mobile
 */
@media (max-width: 1000px) {
    div.boisson {
        height:auto;
    }
    div.boisson #slider .boisson {
        float:unset;
        width:100%;
        height:80%;
        background-position:center;
    }
    div.boisson #slider div.ctn  {
        float:unset;
        width:100%;
    }
    div.boisson #slider div.ctn div.titre {
        font-size:36px;
    }
    div.boisson #slider div.ctn div.text span.texte1 {
        font-size:36px;
        line-height:40px;
    }
    div.boisson #slider div.ctn div.text span.texte2 {
        font-size:36px;
        line-height:40px;
    }
    div.boisson #slider div.ctn div.text span.detail {
        font-size:36px;
        text-align: left;
        line-height:40px;
    }
    .acroche {
        font-size:36px;
        text-align: center;
        line-height:40px;
        margin-left:10%;
        margin-right:10%;
        width:80%;
    }
}