/* CSS Document */
#contenu-page {
    gap:24px;
}
#variete-col-a {
    width:calc(70% - 24px);    
}
#variete-col-b {
   width:calc(30% - 24px);

}
#variete-col-b-content {
   border-left:1px solid #fac864;
   padding-left:24px; 
}
#variete-informations {
    background-color: #f2f2f2;
    padding:10px 15px;
}

#fruit-section h2, #arbre-section h2 {
    border-bottom:1px solid #bbdeb0;
}

.variete-ligne {
    display:flex;
    gap:16px;
}
.variete-info {
    width:calc(50% - 16px);
}

.variete-info h4 {
    font-size:18px;
     margin:4px 0!important;
}
.variete-info p {
    margin:4px 0!important;
}

.detail-section-content {
    display:flex;
    gap:32px;
}

.detail-media {
    width:300px;
    height:300px;
    background-color:#fff;
}
.detail-informations {
    width:600px;
}

#arbre-photo, #fruit-photo {
    background-size:40px;
    background-position:center;
    background-repeat:no-repeat;
    background-color: #fff;
    
    
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:space-around;
}    

#arbre-photo {
    background-image:url('/varietes/img/tree.svg');
    background-color: #F3F4F6;
}

#fruit-photo.pomme {
    background-image:url('/varietes/img/pomme.png');
    background-color: #F3F4F6;
}
#fruit-photo.poire {
    background-image:url('/varietes/img/poire.png');
    background-color: #F3F4F6;
}

#arbre-photo span, #fruit-photo span {
    color:#aaa;
    margin-top:70px;
}

#slider-variete, #slider-arbre {
    display:block;
    
    height:300px;
    margin:0!important;
}
#slider-variete li, #slider-arbre li {
    display:block;
    width:100%;
    height:100%;
    margin:0!important;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;    
}

.lSAction>a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url(../img/controls.png);
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: .5;
    -webkit-transition: opacity .35s linear 0s;
    transition: opacity .35s linear 0s;
    
    background-color:initial;
    background-size:initial;
    border-radius:0;
}

.lSAction>.lSPrev {
    background-position: 0 0!important;
    left: 10px!important;
-webkit-transform: initial;
    transform: initial;    
}
.lSAction>.lSNext {
    background-position: -32px 0!important;
    right: 10px!important;
}
.lSPager {
    margin-top: -40px!important;
}
.lSSlideOuter .lSPager.lSpg>li {
    margin:0!important;
}
.lSSlideOuter .lSPager.lSpg>li a {
    background-color: #ddd!important;
}
.lSSlideOuter .lSPager.lSpg>li.active a, .lSSlideOuter .lSPager.lSpg>li:hover a {
    background-color: #fff!important;
}


#variete-col-b h2 {
    margin-top:0;
}
#variete-appellation {
        display:flex;
        flex-direction:column;
        gap:24px;
}
#variete-appellation .variete-info * {
        text-align:center;
}

.greffons-info {
    border-top:1px solid #d2d2d2;
    padding-top:5px;
    font-size:14px!important;
}

.greffons-info a {
    text-decoration:underline!important;
}

#variete-col-b-content .variete-info {
    width:100%!important;
}

@media (max-width: 1000px) {
    .detail-section-content {
        display:block;
    }
     .detail-media, .detail-informations {
        width:100%;
    }
    .detail-media {
        margin-bottom:24px;
    }    
}

@media (max-width: 768px) {
    .detail-section-content, .variete-ligne {
        display:block;
    }
    .variete-info, .detail-media, .detail-informations {
        width:100%;
    }
    #contenu-page {
        flex-direction:column;
    }
    #variete-col-a, #variete-col-b {
        width:100%;
    }
    #variete-col-b-content { 
        border:0; 
        padding-left:0px;  
    }
    #variete-appellation {
        display:flex;
        gap:24px;
        justify-content:space-between;
        flex-direction:row;
    }
    


}