/*---------A LAFFICHE------------*/
.legend-container {
    width: 1065px;
    max-width: 100%;
    margin: 0 auto;
    padding-right: 24px;
    z-index: 1;
}
.legend-container .bl-affiche img {
    margin-bottom: 8px;
}


.legend-container .bl-affiche, .legend-container .bl_title {
    text-align: right;

}
.bl_ondisplay {
    background: center no-repeat;
    position: relative;
    display: flex;
    justify-content:center;
    align-items: flex-end; 
    background-size: cover;
    height: 500px;
    color: #fff !important;
    padding: 40px 0;
    z-index: 0;
}
.bl_ondisplay::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.3;
}

/* conteneur */
.wrapper--container {max-width: 1280px; margin: 0 auto; width: calc(100% - 32px);}
.wrapper--container p, .wrapper--container ul li {font: 14px/22px SFR-Regular;}

/* image disney */
.container--img-disney {text-align: center;}
.container--img-disney img {border-radius: 8px; width: 100%;}

/* Pour profiter de l'offre */
#pourprofiterdeloffre > bol-resume-option-block > div.pres {padding: 0; max-width: 1280px; width: calc(100% - 64px); gap: 40px; justify-content: flex-start; margin: 0 auto 40px;}
#pourprofiterdeloffre > bol-resume-option-block > div.pres .sous-titre {margin: 0;min-height: 470px;display: flex;}
.steps--enjoy-offer { width: 100%; }
.Media .steps--enjoy-offer .wrapper > div {background-color: #222;}
.steps--enjoy-offer .wrapper > div:not(.cstm-enjoy-offer) {height: 100%;}
.steps--enjoy-offer .wrapper > .cstm-enjoy-offer {height: 100%; max-height: 164px;}
.steps--enjoy-offer .wrapper > div {background-color: #FFFFFF;border-radius: 8px;box-shadow: 0px 8px 16px rgba(24, 24, 24, 0.02);padding: 24px;display: flex;align-items: center; width: 100%;}
.steps--enjoy-offer .wrapper .list_steps {display: flex;gap: 24px; text-align: center; width: 100%;}
.steps--enjoy-offer .wrapper .elem_step {margin: 0; display: flex; gap: 16px; flex-direction: column; height: 100%; flex: 1 1 0;}
.steps--enjoy-offer .wrapper .cstm-enjoy-offer .elem_step {gap: 24px;}
.steps--enjoy-offer .list_steps .elem_step .elem_step-item {background: #181818;margin: 0 auto;width: 24px;height: 24px;border-radius: 50%;font: 14px/24px SFR-Bold;color: white;}
body.Media .steps--enjoy-offer .list_steps .elem_step .elem_step-item {background: #FFFFFF; color: #181818;}
.steps--enjoy-offer .list_steps .elem_step .text {display: flex; flex-direction: column; gap: 16px;}
.steps--enjoy-offer .list_steps .elem_step-title { font: 16px/24px SFR-Bold; }
.steps--enjoy-offer .list_steps p:not(.elem_step-title) {font: 14px/22px SFR-Regular;}
.steps--enjoy-offer .wrapper .cstm-enjoy-offer .elem_step-title {font: 14px/22px SFR-Bold;}
.steps--enjoy-offer .cstm-enjoy-offer .elem_step div {display: grid; gap: 8px;}
.pres .sous-titre .steps--enjoy-offer .list_steps .elem_step p {padding: 0;}
.steps--enjoy-offer .wrapper { display: flex; padding: 0px; gap: 40px; height: 100%; flex-direction: column;}
.steps--enjoy-offer .wrapper .list_steps .elem_step a { width: fit-content; margin: 0 auto;}

/* Resumé tableau section */
.resume-description { margin-top: 40px;} /*css sprécifisue à la page netflix*/
.resume--tab-section .container {width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; display: grid; gap: 24px;}
.resume--tab-section .intro {font: 14px/22px SFR-Regular;}
.resume--tab-section .container .categories {background-color: #222;padding: 24px;border-radius: 12px;display: grid;}
.resume--tab-section .catTitle {display: flex; gap: 24px; margin-bottom: 18px; align-items: center;}
.resume--tab-section .catTitle img {width: 40px;}
.resume--tab-section .text{font: 14px/22px SFR-Regular; color:#ffffff; padding-left: 64px; display: grid; gap: 16px; margin-bottom: 24px;}
.resume--tab-section .text:last-child {margin-bottom: 0;}

/* Bloc à l'affiche */
.banner { position: relative; }
.banner .visuel { width: 100%; }
.legend-container { position: absolute; bottom: 5%; left: 5%; text-align: left; }
.legend-container .logo { margin-bottom: 5px; }

/* avertissement */
.adv__yellow { background: #FFCD00; padding: 8px 0; margin: 40px 0;  }
.adv__yellow > div { color: #181818;text-align: center;}

/* Résumé présentation */
#lame_presentation, .lame_resume--presentation {  max-width: 1280px; margin: 0 auto; width: calc(100% - 64px); display: grid; gap: 24px; }
#lame_presentation .wrapper, .lame_resume--presentation > .wrapper, .lame_resume--presentation .contenair .wrapper {display: flex; background: #222; border-radius: 12px; padding: 24px; text-align: center; justify-content: center; gap: 40px; font: 14px/22px SFR-Regular;}
#lame_presentation .wrapper > div, .lame_resume--presentation > .wrapper > div, .lame_resume--presentation .contenair .wrapper > div {flex: 1;}
#lame_presentation .wrapper > div, .lame_resume--presentation > .wrapper > div {flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; }
#lame_presentation .wrapper > div > div, .lame_resume--presentation > .wrapper > div > div {display: grid; gap: 16px;}
#lame_presentation .wrapper div img, .lame_resume--presentation > .wrapper div img{margin: 0 auto; width: 65px;}
#lame_presentation .wrapper div p.title, .lame_resume--presentation > .wrapper div p.title{font-family:SFR-Bold;}
#lame_presentation p, .lame_resume--presentation p { font: 14px/22px SFR-Regular;} 

/* Chaines LOGO html libre */
.lame_chaine-container-channels {display: grid; gap: 24px;}
.lame_chaine-container-channels > p {font: 16px/24px SFR-Bold;}
.lame_chaine-container-channels .wrapper .bloc1 {background: #222; border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; width: 100%;}
.lame_chaine-container-channels .wrapper .bloc2{padding: 24px; display: flex; gap: 40px; background: #222; border-radius: 12px; width: 100%;}
body:not(.Media) .lame_chaine-container-channels .wrapper .bloc2 {background: white;}
.lame_chaine-container-channels .more-option {display: flex;flex-direction: column;align-items: baseline;gap: 8px;}
.lame_chaine-container-channels .more-option .title-pages {font: 14px/22px SFR-Bold;}
.lame_chaine-container-channels .more-option a {border: 1px solid #FFFFFF; border-radius: 20px; display: flex; align-items: center; padding: 5px 16px; font: 14px/22px SFR-Regular; color: white; justify-content: center;}
.lame_chaine-container-channels .more-option a:active {background: #FFFFFF; color: #181818; font: 14px/22px SFR-Bold;}

/* Box présentation */
#lame_amazon, .lame_box--presentation {max-width: 1280px; width: calc(100% - 32px); margin: 0 auto; display: grid; gap: 24px;}
#lame_amazon .wrapper, .lame_box--presentation .wrapper {gap: 40px; display: flex}
#lame_amazon .container, .lame_box--presentation .container {display: grid; gap: 24px;}
#lame_amazon .container .lame_amazon-box, .lame_box--presentation .container .lame_amazon-box {display: grid; gap: 24px;}
#lame_amazon .container .lame_amazon-box > p, .lame_box--presentation .container .lame_amazon-box > p {font: 14px/22px SFR-Bold;}
#lame_amazon .container .lame_amazon-box .wrapper .bloc1, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc1 {background: #222; border-radius: 12px; padding: 24px; display: grid; gap: 24px; text-align: center;font: 14px/22px SFR-Bold; flex: 1 1 0;}
#lame_amazon .container .lame_amazon-box .wrapper .bloc1, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc1 > div p:last-child {font: 14px/22px SFR-Regular;}
#lame_amazon .container .lame_amazon-box .wrapper .bloc1 img, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc1 img{max-height: 70px; margin: 0 auto auto;}
#lame_amazon .container .lame_amazon-box .wrapper .bloc2, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc2{padding: 24px 40px; display: flex; gap: 32px; background: #222; border-radius: 12px;}

/* Autre pack après le h1 */
.lame_other-pack-option {max-width: 1280px; margin: 0 auto; width: calc(100% - 32px); padding: 0}
.lame_other-pack-option div{margin: auto; display: flex; align-items: baseline; gap: 16px; justify-content: center; }
.lame_other-pack-option > div > p {font-family: 'SFR-Bold'; font-size: 16px;}
.lame_other-pack-option > div input[name="choix-option"] + label{margin: 0;}
.lame_other-pack-option div label a{padding: 3px 16px; color: #fff; font-family: 'SFR-Regular';}

/* conteneur logo avec texte */
.conteneur--logo_desc .wrapper{display: flex; background: #222; border-radius: 12px; padding: 24px; text-align: center; justify-content: center; gap: 40px; font-size: 14px;}
.conteneur--logo_desc .wrapper > div{flex: 1 1 0; display: flex; flex-direction: column; gap: 24px;}
.conteneur--logo_desc .wrapper > div > div {display: grid; gap: 16px;}
.conteneur--logo_desc .wrapper div img{margin: 0 auto; width: 65px; max-height: 70px;}
.conteneur--logo_desc .wrapper div p.title{font-family: SFR-Bold;}
.conteneur--logo_desc .wrapper div p { font: 14px/22px SFR-Regular;}  

/* Dropdown channels */
.lame__canal-channels .canal-channels-container {display: grid; gap: 24px;}
.lame__canal-channels .canal-channels-container .introText { font: 14px/22px SFR-Regular; display: grid; gap: 16px; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups { display: grid; gap: 16px; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element { width: 100%; border-radius: 12px; overflow: hidden; position: relative; font: 16px/20px SFR-Bold; box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.04); }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element input { opacity: 0; position: absolute; width: 100%; height: 65px; cursor: pointer; z-index: 1; display: block; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .category { width: 100%; display: flex; justify-content: space-between; padding: 24px; background-color: #222; align-items: center; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .category > div {display: flex;}
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .category p {font: 14px/22px SFR-Bold;}
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .arrow { transition: .3s ease; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element input:checked ~ .category .arrow { transform: rotate(180deg); }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .channels { max-height: 0; transition: max-height 0.3s ease; background-color: #222; font: 16px/20px SFR-Bold; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element input:checked ~ .channels { transition: max-height 0.8s ease; max-height: 500px; }
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .channels .channels-wrapper { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; padding: 0 24px 24px 24px;}
.lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .channels .channels-wrapper li:last-of-type { margin-left: auto; }

@media (max-width: 1100px) {
    
    body.Media .wrapper--container {width: calc(100% - 64px);}
    
    .resume--tab-section .container .categories {padding: 16px;}
    .resume--tab-section .container {width: calc(100% - 64px); gap: 16px;}
    .resume--tab-section .catTitle {margin-bottom: 8px; gap: 16px;}
    .resume--tab-section .text {padding-left: 56px;}
    
    #lame_presentation, .lame_resume--presentation {width: calc(100% - 64px);gap: 16px;}
    /* #lame_presentation .contenair, .lame_resume--presentation .contenair{ margin: auto } */
    #lame_presentation .wrapper, .lame_resume--presentation > .wrapper, .lame_resume--presentation .contenair .wrapper{ margin: auto; flex-direction: column; gap: 24px;}
	#lame_presentation .wrapper > div, .lame_resume--presentation > .wrapper > div{gap: 16px}
	#lame_presentation .wrapper > div > div, .lame_resume--presentation > .wrapper > div > div {gap: 8px}
	
	#lame_amazon, .lame_box--presentation {width: calc(100% - 64px); gap: 16px;}
    #lame_amazon .container .wrapper, .lame_box--presentation .container .wrapper {flex-direction: column; gap: 24px; margin: 0;}
    #lame_amazon .container .lame_amazon-box .wrapper .bloc1 img, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc1 img {margin: 0 auto;}
    #lame_amazon .container .wrapper .bloc2, .lame_box--presentation .container .wrapper .bloc2{padding: 24px 32px; flex-wrap: wrap;}
	#lame_amazon .container .lame_amazon-box, .lame_box--presentation .container .lame_amazon-box {gap: 16px;}
	#lame_amazon .container .lame_amazon-box .wrapper .bloc1, .lame_box--presentation .container .lame_amazon-box .wrapper .bloc1 {padding: 16px; gap: 16px;}
	
	.lame_other-pack-option {width: calc(100% - 64px);}
	
	.conteneur--logo_desc .wrapper{ margin: auto; flex-direction: column; gap: 24px;}
	.conteneur--logo_desc .wrapper > div{gap: 16px}
	.conteneur--logo_desc .wrapper > div > div {gap: 8px}
	
	.adv__yellow {padding: 8px 0; margin: 24px 0;}
	
	/* Pour profiter de l'offre */
	#pourprofiterdeloffre > bol-resume-option-block > div.pres{flex-direction: column; align-items: center;gap: 24px; margin: 0 auto 24px;}
	body.Media #pourprofiterdeloffre div.pres .sous-titre{width:100%;}
	.steps--enjoy-offer {max-width: 400px; margin: 0 auto;}
	.steps--enjoy-offer .wrapper > div {width: 100%; padding: 16px;}
	.steps--enjoy-offer .wrapper{gap: 24px;}
	.steps--enjoy-offer .wrapper .list_steps{gap: 40px; flex-direction: column;}
	.steps--enjoy-offer .list_steps .elem_step-title {font: 14px/22px SFR-Bold;}
	.steps--enjoy-offer .wrapper .cstm-enjoy-offer .elem_step {gap: 16px;}
	
	/* Chaines LOGO html libre */
	.lame_chaine-container-channels {gap: 16px;}
	.lame_chaine-container-channels > p {font: 14px/22px SFR-Bold;}
	.lame_chaine-container-channels .wrapper .bloc1 {padding: 16px; gap: 24px;}
	.lame_chaine-container-channels .wrapper .bloc2 {padding: 16px; gap: 24px;}

}

@media (max-width: 768px) {
    
    body.Media .wrapper--container {width: calc(100% - 32px);}
    
    .resume--tab-section .container {width: calc(100% - 32px); gap: 16px;}
    .resume--tab-section .subtitle {font-size:24px;line-height:28px; margin-bottom:36px;}
    .resume--tab-section .catTitle {margin-bottom: 16px;}
    
    #lame_presentation, .lame_resume--presentation {width: calc(100% - 32px)}
    #lame_presentation .wrapper > div, .lame_resume--presentation > .wrapper > div{margin: 0 auto;}
    
    #lame_amazon, .lame_box--presentation {width: calc(100% - 32px);}
	#lame_amazon .container .wrapper .bloc2, .lame_box--presentation .container .wrapper .bloc2{padding: 16px; gap: 16px;}
	
	.lame_other-pack-option {width: calc(100% - 32px);}
	.lame_other-pack-option div{flex-direction: column; align-items: center;}
	.lame_other-pack-option > div > label{width: unset; }
	
	.lame__canal-channels .canal-channels-container .introText { font: 14px/22px SFR-Regular; }
    .lame__canal-channels .canal-channels-container .canal-channels-channelsGroups-Element .channels .channels-wrapper { padding: 0 24px 24px; }
	
	.conteneur--logo_desc .wrapper > div{margin: 0 auto;}
	
	/* Pour profiter de l'offre */
	#pourprofiterdeloffre > bol-resume-option-block > div.pres{width: calc(100% - 32px);}
	
	/* Chaines LOGO html libre */
	.lame_chaine-container-channels .wrapper .bloc1 {justify-content: center; flex-direction: column;}
	.lame_chaine-container-channels .wrapper .bloc2 {justify-content: center; flex-direction: column;}
}   


/*---------RESUME------------*/

.bl_all_channels .resume { font-size: 14px;color: #fff;}
.bl_all_channels p {line-height:14px;font-size: 16px; padding-bottom:27px;}
.bl_all_channels p.intro {line-height: 26px;font-size: 19px;padding-bottom: 27px;}
.resume ul {list-style-type: disc;  padding-left: 16px; }
.bl_all_channels ul li {padding-bottom: 20px; line-height: 22px;}
.h2-html p { line-height: 26px;}
.sous-titre p { line-height: 20px;}
.bl_all_channels .resume ul li {
    min-width: unset;
    max-width: unset;
    width: unset;
    margin: 10px;
}


@media screen and (min-width: 992px) {.bl_all_channels .resume ul  {max-width: 80%; }}


/*---------CHAINES------------*/

#bl_all_channels .bl_channels .elem_channel {
    display: inline-block;
}