/*Début caractéristiques*/

#carac3 {padding: 0 16px}
#carac3 .wrapper{max-width: 1280px; width: 100%; display: block; margin:auto;}
#carac3 .container{ display: flex; justify-content: space-between; gap: 40px; }
#carac3 .columns{ max-width: 620px; width: 100%; height: fit-content; background-color: #ffffff; padding: 24px; box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.04); border-radius: 12px; }
#carac3 .columns h3{font-size:24px; line-height:28px; text-align: center; margin-bottom: 16px;}
#carac3 .columns h4{font-size:16px; line-height:24px; display: flex; gap: 8px; align-items: center;}
#carac3 .columns h4 img{margin-right: 8px;}
#carac3 .columns h5{font-size: 14px; line-height: 18px;margin-top:16px;}
#carac3 .columns ul{margin: 16px 0 16px 24px;}
#carac3 .columns li{list-style-type: disc; font-size: 14px; line-height: 18px;}
#carac3 .columns .servicesP{display:flex; gap:4px; margin: 16px 0;}
#carac3 .columns .servicesP p{line-height: 40px;}
#carac3 .columns .scoreGlobal{display: flex; gap: 4px;}

#carac3 input[type='checkbox'] {display: none;}
#carac3 input[type='checkbox'] + label {display:block; position:relative;}
#carac3 input[type='checkbox'] + label .curt {width: 100%; height: 86px; position: absolute; bottom: 30px; background: linear-gradient(#ffffff2b, #fff); background: 			#fff; display:none;}
#carac3 input[type='checkbox']:checked + label .curt {width: 90%; background-color: transparent; height: 0; position: absolute; top: 0;}
#carac3 input[type='checkbox'] + label .content {height: 488px; overflow: hidden;}
#carac3 input[type='checkbox']:checked + label .content {height: auto; overflow: auto;}
#carac3 .vm, #carac3 .vp{font-family: "SFR-Bold"; font-weight: 700; font-size: 14px;}
#carac3 .vm {display: table; margin: 24px auto 0; cursor: pointer; position: relative;}
#carac3 .vm:after {content: '';width: 8px;height: 8px;border: 2px solid;transform: rotate(45deg);right: -17px;top: 0;position: absolute;border-top: 0;border-left: 0;}
#carac3 .vp {display: none; margin: 24px auto 0; cursor: pointer; position: relative;}
#carac3 .vp:after {content: '';width: 8px;height: 8px;border: 2px solid; transform: rotate(-135deg);right: -17px;top: 5px;position: absolute;border-top: 0;border-left: 0;}
#carac3 input[type='checkbox']:checked + label .vp {display: table;}
#carac3 input[type='checkbox']:checked + label .vm {display: none;}

@media screen and (max-width: 1100px) {
    #carac3 { padding: 0 32px;}
    #carac3 .vp {margin: 16px auto 0}
    #carac3 .vm {margin: 16px auto 0}
}

@media screen and (max-width: 768px) {
    #carac3 .columns {max-width: none;}
    #carac3 { padding: 0 16px;} 
    #carac3 .container{flex-wrap: wrap;}
}

/*Fin caractéristiques*/

/* Début lame débit TV */

#lame-debitTV {max-width: 1280px;margin: 0 auto 40px; width: calc(100% - 32px);}
#lame-debitTV .l-dT--container {background-color: white;padding: 24px;border-radius: 12px;box-shadow: 0px 0px 24px 4px rgb(0 0 0 / 4%);display: grid; gap: 24px;}
#lame-debitTV h3 {font-size: 24px;}
#lame-debitTV h4 {margin-bottom: 24px;}
#lame-debitTV picture img {width: 100%;}
#lame-debitTV .l-dT--container .l-dT--informations {display: grid;grid-template-columns: 2fr 2fr;}
#lame-debitTV .l-dT--container .l-dT--informations > div:first-child {padding-right: 24px; border-right: 1px solid #d2d2d2;}
#lame-debitTV .l-dT--container .l-dT--informations > div:last-child {padding-left: 24px;}
#lame-debitTV h3 {font-size: 24px; margin-bottom: 24px;}
#lame-debitTV .l-dT--container .l-dT--informations > div:first-child p {font-size: 14px;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages {display: grid;grid-template-columns: 2fr 2fr;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-jauge {display: flex; gap: 16px; align-items: center;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-jauge > div {display: grid;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-jauge > div .l-dT--informations_usages--container-jauge_item {display: flex; gap: 8px; align-items: center;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-badge {display: grid;gap: 8px;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-badge > * {width: max-content;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--badge {border-radius: 4px;display: inline-flex;padding: 4px 8px;background: #181818;color: white;gap: 8px;align-items: center;font-size: 12px;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--badge.wifi-5 {background-color: #444;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--badge.wifi-6 {background-color: #D90D25;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--channels {display: inline-flex;gap: 8px;font-size: 12px;align-items: center;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--channels p {text-transform: uppercase;}
#lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--badge a {color: white;text-decoration: underline;font-family: 'SFR-Bold';}
#lame-debitTV .l-dT--container .l-dT--stepper {display: grid;grid-template-columns: repeat(4, 1fr);text-align: center; font-size: 14px;font-family: 'SFR-Bold';}
#lame-debitTV .l-dT--container .l-dT--stepper img {margin-bottom: 16px;}

@media all and (min-width: 769px) and (max-width: 1100px) {
    #lame-debitTV .tablet-hidden {display: none;}
}

@media all and (max-width: 1100px) {
    #lame-debitTV {width: calc(100% - 64px); margin: 0 auto 24px;}
    #lame-debitTV .l-dT--container {padding: 16px; gap: 16px;}
    #lame-debitTV h4 {margin-bottom: 16px;}
    #lame-debitTV .l-dT--container .l-dT--informations {grid-template-columns: 1fr;}
    #lame-debitTV .l-dT--container .l-dT--informations > div:first-child {padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid #d2d2d2; border-right: 0;}
    #lame-debitTV .l-dT--container .l-dT--informations > div:last-child {padding-left: 0; padding-top: 16px;}
    #lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages {grid-template-columns: auto 1fr; gap: 16px;}
    #lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages .l-dT--informations_usages--container-badge {display: flex; flex-direction: column;}
    #lame-debitTV .l-dT--container .l-dT--stepper {grid-template-columns: 1fr;gap: 24px;}
}

@media all and (max-width: 768px) {
    #lame-debitTV {width: calc(100% - 32px)}
    #lame-debitTV .l-dT--container .l-dT--informations .l-dT--informations_usages {display: inline-flex;flex-direction: column; gap: 8px;}
}

/* Fin lame débit TV */

/* Lame blanche */
.lame-container {max-width: 1280px; margin: 0 auto; width: calc(100% - 64px);}
.lame-container p, .lame-container li {font: 14px/22px SFR-Regular;}
.lame-container ol {list-style: auto; padding-left: 20px;}
.lame-container ul {list-style: outside;padding-left: 20px;}
.lame-container ul.list-pictos {display: flex; list-style: none; gap: 24px; padding: 0;}
.lame-container ul.list-pictos li {flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; align-items: center;}
.lame-container ul.list-pictos p {font: 14px/22px SFR-Bold; text-align: center;}
.lame-container picture, .lame-container a.picture-link-responsive{display: none;}
.lame-container .bloc-picto {display: flex; justify-content: center; gap: 24px;}
.lame-container .bloc-picto .picto{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 16px;text-align: center;}
.lame-container .bloc-picto .picto p, .L .titreH4 {font: 14px/22px SFR-Bold;}
.lame-container  img {border-radius: 8px; max-width: 400px;}
.lame-container > div {display:flex; gap: 24px; background-color: #ffffff; margin-bottom: 40px; padding: 24px; border-radius: 8px;box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.04);}
.lame-container > div .L, .lame-container > div .R{display: flex; flex-direction: column; gap: 16px;}
.lame-container .claim-lame-container {display: grid; gap: 8px;}
.lame-container > div a {width: fit-content}

@media all and (max-width: 1100px) {
    .lame-container > div {flex-direction: column; gap: 0; margin-bottom: 24px; padding: 16px;}
    .lame-container h4 {font: 14px/22px SFR-Bold;}
    .lame-container .bloc-picto  {flex-direction: column;gap: 16px;}
	.lame-container > div .L, .lame-container > div .R {gap: 16px;}
    .lame-container > div .imgdesk{display: none;}
	.lame-container picture, .lame-container a.picture-link-responsive{display: flex; order: -1; margin: 0 auto;}
	.lame-container picture img{width: 100%;}
	.lame-container  img {max-width: none;}
	.lame-container ul.list-pictos {gap: 16px;}
}

@media all and (max-width: 768px) {
	.lame-container { width: calc(100% - 32px); }
    .lame-container > div{margin: 24px 0px;}
    .lame-container ul.list-pictos {flex-direction: column;}
    .lame-container ul.list-pictos li {flex-direction: row;}
}
/* Fin lame blanche */

/* Lame expérience TV*/
#blocTV{padding: 24px;}
#blocTV, #blocTV #ExperienceTV .generic-tab, #blocTV #ExperienceTV section {background-color: #181818; font-family: SFR-Regular; color: #ffffff; }
#blocTV h2{font-family: SFR-Bold; font-size: 32px; line-height: 48px; color: #ffffff;}
#blocTV #ExperienceTV section .wrapper{ display: flex; width: 100%; justify-content: flex-start;}
#blocTV #ExperienceTV{display: grid; max-width: 1280px; width: calc(100% - 32px); margin: 0 auto; gap: 24px;}
#blocTV #ExperienceTV .generic-tab{width: 100%; padding: 0; margin:0 auto 400px;}
#blocTV #ExperienceTV .generic-tab .container{display: flex; gap:24px;}
#blocTV #ExperienceTV .generic-tab .selector{ margin:0;}
#blocTV #ExperienceTV .generic-tab .selector,#blocTV #ExperienceTV .generic-tab .selector:after{max-width: 100%;color: #181818; background: #ffffff;}
#blocTV #ExperienceTV .generic-tab select {  font-family: SFR-Bold; color: #181818; background: #ffffff; }
#blocTV #ExperienceTV .generic-tab label, #blocTV #ExperienceTV .L {  font-family: SFR-Regular; margin:0; }
#blocTV #ExperienceTV .generic-tab label{ font-family: SFR-Bold; border: 1px SOLID #ffffff; display: flex; align-items: center; }
#blocTV #ExperienceTV .generic-tab label:hover, .generic-tab input:checked + label {background-color: #ffffff; color: #181818; transition: all.2s;}
#blocTV #ExperienceTV .R, #blocTV #ExperienceTV .L{width: 100%;}
#blocTV #ExperienceTV .R .behind, #blocTV #ExperienceTV .R .socle{max-width: 650px; width: 100%;}
#blocTV #ExperienceTV .R .behind{top: -25px;}
#blocTV #ExperienceTV .R{max-width: 650px; margin-top:28px;}
#blocTV #ExperienceTV .L{max-width: 590px; height: fit-content;}
#blocTV #ExperienceTV .L > div {display: flex; align-items: center;}
#blocTV #ExperienceTV .socle{z-index:1;}
#blocTV #ExperienceTV .generic-tab input + label + section{ align-items: initial; height: auto;}



@media screen and (max-width: 1100px){
    #blocTV {padding:16px;}
	#blocTV #ExperienceTV {gap: 16px;}
	#blocTV #ExperienceTV .generic-tab label {display: none;}
    #blocTV #ExperienceTV .generic-tab{margin:0 auto 545px; padding:0;}
    #blocTV #ExperienceTV .generic-tab select{color: #181818; background: #ffffff;}
    #blocTV #ExperienceTV section .wrapper{flex-direction: column; gap: 32px;}
    #blocTV #ExperienceTV .generic-tab .container{max-width: 264px;}
    #blocTV #ExperienceTV .R{max-width:704px;margin:0 auto;}
    #blocTV #ExperienceTV .R .behind, #blocTV #ExperienceTV .R .socle{max-width:704px; margin:0;}
    #blocTV #ExperienceTV .L{max-width:100%;}
    #blocTV #ExperienceTV .generic-tab input + label + section{height:408px; top: 56px;}
    #blocTV #ExperienceTV section .wrapper .L .title{line-height: 24px;}
    #blocTV #ExperienceTV .R .behind{top:0;}
}

@media screen and (max-width: 768px){
	#blocTV #ExperienceTV {width: calc(100% - 32px)}
    #blocTV #ExperienceTV .generic-tab{width: 100%; padding: 0;}
    #blocTV #ExperienceTV input:checked + label + section{ height:auto;}
	#blocTV #ExperienceTV section .wrapper{flex-direction: column-reverse; margin: 0;}
    #blocTV #ExperienceTV .behind{max-width:328px; width:100%;}
}

/* Fin lame expérience TV */

/* Lame chaineTV replace */
#tvBanner {width: 100%}
#chainestvReplace {/* margin-top:40px; */ padding: 0;}
#chainestvReplace .banners {display: flex;justify-content: center; background-color: #222222;}
#chainestvReplace .banners img {max-width: 1280px;width: 100%;text-align: center;}
#tabBanner,#mobBanner {display: none;}

@media (max-width: 768px) {
    #deskBanner, #mobBanner { display: none; }
    #tabBanner { display: block; }
}

@media (max-width: 360px) {
    #deskBanner, #tabBanner { display: none; }
    #mobBanner { display: block; }
}
/* Fin chaineTV replace */

/* Lame Appels */

    #dArrow label:after {position: absolute;display: inline-block;border-top: 0;border-left: 0;content: '';width: 8px;height: 8px;margin-left: 10px;border: 2px solid;border-top-color: currentcolor;border-top-style: solid;border-top-width: 2px;border-left-color: currentcolor;border-left-style: solid;border-left-width: 2px;transform: rotate(45deg);transform-origin: center center;top: 1px;border-top: 0;border-left: 0;
    }
    #dArrow input,#dArrow .submenu {display: none;}

    /*position the label*/
    #dArrow label {position: relative;display: block;cursor: pointer;}

    /*show the submenu when input is checked*/
    #dArrow input:checked~.submenu {display: block;}
    #dArrow input:checked~label:after {transform: rotate(225deg);top: 5px;}

    #appels--container {padding: 0 16px;margin-bottom: 40px;}
    #appels--container .appels-title {font-family: SFR-Bold;font-weight: 700;font-size: 32px;line-height: 36px;margin-bottom: 44px;}
    #appels--container .appels-main {border-radius: 12px;overflow: hidden; max-width: 1280px;width: 100%;margin: 0 auto;}
    #appels--container .appels-header {width: 100%;background: #181818;color: white;padding: 24px 24px 24px 8px;display: flex; gap: 8px; align-items: center; }
    #appels--container .appels-header-title {font-family: SFR-bold;font-size: 20px;line-height: 24px;}
    #appels--container .appels-content {padding: 24px 56px;background: white;display: flex;flex-direction: column;gap: 16px;font-size: 14px;line-height: 18px;}
    #appels--container label {font-family: SFR-bold; font-size: 14px; line-height: 18px;}
    #appels--container .appels-list {margin-top: 24px;position: relative; font-size: 14px;}
    #appels--container .appels-list ul {columns: 4; margin-bottom: 24px;}
    #appels--container .appels-list .appels-list-index {font-family: SFR-bold;margin-top: 18px;}
    #appels--container .appels-list .appels-list-index:first-child {margin-top: 0px;}
    #appels--container .appels-link {color: #E2001A;font-size: 14px;line-height: 18px;display: inline-block;width: 100%;text-align: right;}


    @media screen and (max-width: 1100px) {
        #appels--container .appels-title {font-size: 24px; line-height:28px;}
        #appels--container .appels-header-title {font-size: 16px; line-height: 20px;}
        #appels--container .appels-header {padding: 18px 18px 18px 8px;}
        #appels--container {padding: 0 32px;  margin-bottom: 24px;}
        #appels--container .appels-list ul {columns: 3;}
    }

    @media screen and (max-width: 768px) {
        #appels--container {padding: 0 16px;}
    }

/* Fin lame Appels */