@import "common_style.css";
a{
    width:80%;
    text-align:center;
}
ul li a{
    width:0%;
}
.feature1{
    padding-top:20%;
    padding-bottom:0;
}
.close{
    font-size:50px;
    width:50px;
    height:50px;
    text-align:center;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    border-radius:50%;
    background-color:#c61e37;
    position:absolute;
    right:5%;
    top:5%;
    cursor:pointer;
}
.feature1{
    background-color:#00303e;
    padding-top:20%;
    position:relative;
}
.feature1 > div:not(:first-child){
    opacity:0.5;
}
@media only screen and (min-width:1200px){
    .feature1{
        padding-top:24px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:reverse;
        -ms-flex-direction:row-reverse;
        flex-direction:row-reverse;
        position:relative;
    }
    .feature1 div{
        width:55% !important;
        text-align:right;
    }
    .feature1 div:first-child{
        width:30% !important;
    }
}
.feature1__info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    border:6px solid #c61e37;
    border-radius:20px;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    width:60%;
    margin:0 auto -12%;
    position:relative;
    z-index:9;
    background-color:#fff;
    padding:5%;
}
@media only screen and (min-width:576px){
    .feature1__info{
        width:50%;
    }
}
@media only screen and (min-width:992px){
    .feature1__info{
        margin:0 auto -10%;
    }
}
.feature1__info img{
    margin-right:5%;
    width:35%;
}
@media only screen and (min-width:1200px){
    .feature1__info{
        position:absolute;
        left:30%;
        /* Le header est fixe : minimum 96px pour passer dessous quelle que soit la largeur. */
        top:max(96px, 6%);
        padding:2%;
    }
}
.feature1-info__content span{
    color:#c61e37;
}
.feature1-info__content p{
    color:#c61e37;
    font:normal normal 800 11px/13px Montserrat-ExtraBold;
}
@media only screen and (min-width:576px){
    .feature1-info__content p{
        font:normal normal 800 22px/27px Montserrat-ExtraBold;
    }
}
.feature1__title{
    padding-top:11%;
    width:80%;
    margin:auto;
}
@media only screen and (min-width:1200px){
    .feature1__title{
        padding-top:0;
        position:absolute;
        top:50%;
        left:2%;
        width:60%;
    }
}
.feature2{
    padding-top:5%;
}
.feature2__title{
    color:#00303e;
    width:90%;
    margin:auto;
}
@media only screen and (min-width:1200px){
    .feature2__title{
        width:85%;
    }
}
.feature2__content{
    width:85%;
    margin:auto;
}
.feature2-content__param{
    font:normal normal 800 50px/60px Montserrat-ExtraBold;
    letter-spacing:-2px;
    color:#c61e37;
    opacity:0.48;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    margin-bottom:-10px;
}
@media only screen and (min-width:576px){
    .feature2-content__param{
        font:normal normal 800 100px/120px Montserrat-ExtraBold;
        margin-bottom:-20px;
    }
}
@media only screen and (min-width:992px){
    .feature2-content__param{
        font:normal normal 800 150px/120px Montserrat-ExtraBold;
        margin-bottom:-10px;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content__param{
        font:normal normal 800 200px/120px Montserrat-ExtraBold;
        margin-bottom:0;
        width:105%;
    }
}
.feature2-content__param2{
    font:normal normal 800 50px/60px Montserrat-ExtraBold;
    letter-spacing:-2px;
    color:#c61e37;
    opacity:0.48;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    margin-bottom:-10px;
    width:100%;
    margin-top:-45px;
}
@media only screen and (min-width:576px){
    .feature2-content__param2{
        font:normal normal 800 100px/120px Montserrat-ExtraBold;
        margin-bottom:-50px;
        margin-top:-55px;
    }
}
@media only screen and (min-width:992px){
    .feature2-content__param2{
        font:normal normal 800 150px/120px Montserrat-ExtraBold;
        margin-bottom:-10px;
        margin-top:-9%;
        margin-right:-5%;
    }
    .feature2-content__param2{
        margin-left:-5%;
        margin-top:0%;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content__param2{
        font:normal normal 800 200px/120px Montserrat-ExtraBold;
        margin-bottom:0;
        width:105%;
    }
}
.feature2-content__param2--x{
    display:none;
}
@media only screen and (min-width:1200px){
    .feature2-content__param2--x{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content__param2--sm{
        display:none;
    }
}
.feature2-content__group{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
.feature2-content-group__item{
    position:relative;
    width:100%;
    border:5px solid #00303e;
    border-radius:20px;
    margin:0 1%;
    background-color:#fff;
    margin-bottom:30px;
    z-index:9;
}
@media only screen and (min-width:576px){
    .feature2-content-group__item{
        width:48%;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content-group__item{
        width:28%;
        margin-bottom:5%;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content-group__item:last-child{
        display:block;
    }
}
.feature2-content-group-item__image{
    padding:1rem;
    height: 449px;
}
.feature2-content-group-item__content{
    text-align:right;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:91%;
    margin-left:auto;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item__content{
        width:75%;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content-group-item__content{
        width:80%;
    }
}
.feature2-content-group-item-content__top p{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    font:normal normal normal 25px/32px Montserrat-Regular;
    letter-spacing:0;
    color:#00303e;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item-content__top p{
        font:normal normal normal 28px/30px Montserrat-Regular;
    }
}
@media only screen and (min-width:1200px){
    .feature2-content-group-item-content__top p{
        font:normal normal normal 20px/31px Montserrat-Regular;
    }
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__top p{
        font:normal normal normal 30px/37px Montserrat-Regular;
    }
}
.feature2-content-group-item-content__top p span:last-child{
    display:none;
}
@media only screen and (min-width:1200px){
    .feature2-content-group-item-content__top p span:last-child{
        display:block;
        margin-left:10px;
    }
}
.feature2-content-group-item-content__top p span:first-child{
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}
.feature2-content-group-item-content__top label{
    background:#00303e;
    text-align:right;
}
.feature2-content-group-item-content__top label span{
    font:normal normal normal 20px/27px Montserrat-Regular;
    letter-spacing:0;
    text-align:center;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item-content__top label span{
        font:normal normal normal 18px/24px Montserrat-Regular;
    }
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__top label span{
        font:normal normal normal 25px/37px Montserrat-Regular;
    }
}
.feature2-content-group-item-content__bottom{
    width:50%;
    margin-left:auto;
}
.feature2-content-group-item-content__bottom ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    margin:auto;
    width:100%;
}
.feature2-content-group-item-content__bottom ul li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.feature2-content-group-item-content__bottom ul li img{
    margin-right:10px;
}
.feature2-content-group-item-content__bottom img{
    width:20%;
}
.feature2-content-group-item-content__bottom span{
    font:normal normal normal 25px/32px Montserrat-Medium;
    letter-spacing:0;
    color:#00303e;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item-content__bottom span{
        font:normal normal normal 25px/30px Montserrat-Medium;
    }
}
@media screen and (min-width:860px){
    .feature2-content-group-item-content__top{
        text-align:right;
        margin-left:auto;
    }
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__bottom span{
        font:normal normal normal 30px/37px Montserrat-Medium;
    }
}
.feature2-content-group-item__content{
    text-align:center;
    margin:auto;
}
.feature2-content-group-item-content__top{
    text-align:right;
}
.feature2-content-group-item__button{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-top:10%;
    padding-bottom:1rem;
}
.feature2-content-group-item__button a{
    width:100%;
}
.feature2-content-group-item__button .border-shape{
    border:5px solid #00303e;
    padding:2px 2px 2px;
    white-space:normal;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item__button .border-shape{
        padding:2px 10px 2px;
    }
}
.feature2-content-group-item__button .border-shape span{
    color:#00303e;
    font:normal normal 600 17px/20px Montserrat-Bold;
    text-align:center;
}
@media only screen and (min-width:576px){
    .feature2-content-group-item__button .border-shape span{
        font:normal normal 600 17px/20px Montserrat-Bold;
    }
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item__button .border-shape span{
        font:normal normal 600 18px/26px Montserrat-Bold;
    }
}
.programmes__footer{
    background-color:#00303e;
}
.programmes__footer .footer-top{
    margin-bottom:40px;
}
.programmes__footer .footer-top__form{
    background-color:#00303e;
}
@media screen and (min-width:750px){
    .border-shape *{
        font:normal normal normal 20px/25px "Montserrat-Bold";
        padding:1% 15px;
    }
}
.feature3{background-color:#c61e37;}
.feature3__title, .feature4__title{
    color:#fff;
    margin:auto;
    text-align:right;
}
.feature4{background-color:#00303e;}
.feature3-content__param2{
    letter-spacing:-2px;
    color:#ffffff;
    opacity:0.48;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    margin-left:-5%;
}

/* --- Visuels des cartes programmes --- */
.feature2-content-group-item__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}
.feature2-content-group-item__image:hover img{
    filter:grayscale(100%);
}

/* Les cartes hors écran ne sont rendues qu'à l'approche du scroll. */
.feature2-content-group__item{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
}

/* --- Aucun programme à afficher (API indisponible ou liste vide) --- */
.programmes-vide{
    width:85%;
    margin:auto;
    text-align:center;
    padding:40px 0 80px;
}
.programmes-vide .feature2__title{
    text-align:center;
}
.programmes-vide p{
    font:normal normal normal 16px/26px Montserrat-Regular;
    color:#00303e;
    margin-top:30px;
}
@media only screen and (min-width:576px){
    .programmes-vide p{
        font:normal normal normal 24px/38px Montserrat-Regular;
    }
}
.programmes-vide a{
    display:inline;
    width:auto;
    color:#c61e37;
    font-family:Montserrat-Bold;
}

/* --- Refonte de l'intérieur des cartes programmes --- */
.feature2-content-group-item__content{
    width:calc(100% - 2rem);
    margin:0 auto;
    padding:0;
}
.feature2-content-group-item-content__top{
    width:100%;
    margin:0;
    text-align:center;
}
.feature2-content-group-item-content__top p{
    padding-right:0;
    margin-bottom:14px;
}
.feature2-content-group-item-content__top .carte-programme__nom{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
    font:normal normal 800 24px/30px Montserrat-ExtraBold;
    color:#00303e;
    margin-bottom:2px;
}
.feature2-content-group-item-content__top .carte-programme__ville{
    font:normal normal normal 18px/24px Montserrat-Regular;
    margin-bottom:14px;
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__top .carte-programme__nom{
        font:normal normal 800 27px/34px Montserrat-ExtraBold;
    }
    .feature2-content-group-item-content__top .carte-programme__ville{
        font:normal normal normal 20px/26px Montserrat-Regular;
    }
}
.feature2-content-group-item-content__top label{
    text-align:center;
    max-width:90%;
}
.feature2-content-group-item-content__top label span{
    white-space:nowrap;
    font:normal normal normal 18px/26px Montserrat-Regular;
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__top label span{
        font:normal normal normal 20px/28px Montserrat-Regular;
    }
}
.feature2-content-group-item-content__bottom{
    width:100%;
    margin:20px auto 0;
}
.feature2-content-group-item-content__bottom ul{
    align-items:center;
}
.feature2-content-group-item-content__bottom ul li{
    justify-content:flex-start;
    width:auto;
    min-width:70%;
}
.feature2-content-group-item-content__bottom ul li + li{
    margin-top:12px;
}
.feature2-content-group-item-content__bottom ul li img{
    width:34px;
    height:34px;
    flex-shrink:0;
    margin-right:14px;
}
.feature2-content-group-item-content__bottom ul li span{
    text-align:left;
    font:normal normal normal 20px/26px Montserrat-Medium;
}
@media only screen and (min-width:1400px){
    .feature2-content-group-item-content__bottom ul li span{
        font:normal normal normal 22px/30px Montserrat-Medium;
    }
}
.feature2-content-group-item__button{
    padding-top:28px;
    padding-bottom:1.5rem;
}
@media only screen and (max-width:576px){
    .feature2-content-group-item__image{
        height:300px;
    }
}