/*Style lame blanche*/
.edito-white {padding: 24px; border-radius: 8px; background: white;}
.edito-white picture {display: flex;}
.edito-white picture img {border-radius: 8px;}

/*Style conteneur*/
.content {max-width: 1280px; width: calc(100% - 64px); margin: 0 auto;}

/*POPIN studio*/
.POPIN.studio h3 {margin-bottom: 40px;}
.POPIN.studio > ul {column-count: 4; margin-bottom: 24px;}
.POPIN.studio ul {list-style-type: none;}
.POPIN.studio li > p {font: 14px/normal SFR-Bold; margin-bottom: 4px;}
.POPIN.studio > ul > li:not(:last-child) {margin-bottom: 16px; break-inside: avoid-column;}
.POPIN.studio a.link {margin-left: auto; display: flex; width: fit-content;}
.POPIN.studio p[aria-level="4"] {font: 16px/normal SFR-Bold; margin-bottom: 16px;}
.POPIN.studio hr {margin: 24px 0; border-bottom: 1px solid #A0A0AB;}
.POPIN.studio .popin-footer {padding: 16px 0 24px; margin-bottom: -25px; position: sticky; bottom: -25px; background: white; width: 100%;}

/*Plus smartphone*/
#Plus-smartphone {display: grid; gap: 40px;}
#Plus-smartphone .edito-white {display: flex; flex-direction: column; break-inside: avoid-column;}
#Plus-smartphone .edito-white:nth-child(odd) {margin-bottom: 40px;}
#Plus-smartphone ul {color: white; column-gap: 40px; column-count: 2; list-style: none;}
#Plus-smartphone li p:last-child {font: 32px/normal SFR-Bold; margin-top: 16px;}
#Plus-smartphone #prix-p {height: 421px; justify-content: flex-end; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_prixp_desktop.webp) top left / cover no-repeat;}
#Plus-smartphone #aide-c {background: var(--clr-black);}
#Plus-smartphone #aide-c p:last-child {display: flex; gap: 16px; align-items: center;}
#Plus-smartphone #aide-c p:last-child:before {content: ""; height: 40px; width: 40px; flex: 0 0 40px; background: url(https://static.s-sfr.fr/assets/pictos/boutique_sfr_40_blanc.svg) top left / 40px 40px no-repeat; filter: brightness(0) saturate(100%) invert(45%) sepia(86%) saturate(465%) hue-rotate(305deg) brightness(103%) contrast(101%);}
#Plus-smartphone #pret-m {color: var(--clr-black);}
#Plus-smartphone #pret-m p:last-child {display: flex; gap: 16px; align-items: center;}
#Plus-smartphone #pret-m p:last-child:before {content: ""; height: 40px; width: 40px; flex: 0 0 40px; background: url(https://static.s-sfr.fr/assets/pictos/smartphone_casse_40_rouge.svg) top left / 40px 40px no-repeat;}
#Plus-smartphone #mode-p {height: 420px; justify-content: flex-end; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_modep_desktop.webp) top left / cover no-repeat;}
#Plus-smartphone > a {width: fit-content; margin: 0 auto;}

/*Option montre connectée*/
#Montre-co {display: flex; flex-direction: column; justify-content: flex-end; color: #FFF; padding: 80px 0; height: 433px; background: url(https://static.s-sfr.fr/assets/backgrounds/immersive/desk_kv-montre-co_immersive-full.webp) center / cover;}
#Montre-co .titre {font: 32px/normal SFR-Bold; margin: 0 0 40px 0;}
#Montre-co .group-link {display: flex; gap: 16px;}
#Montre-co p {max-width: 620px;}
#Montre-co .titre + .texte {margin: 0 0 40px;}
#Montre-co a {width: fit-content;}

/*SFR TV*/
#SFR-TV {display: grid; gap: 40px;}
#SFR-TV figure {display: grid; gap: 8px; margin-bottom: 24px;}
#SFR-TV video {border-radius: 8px;}
#SFR-TV figcaption {font: 12px/normal SFR-Regular;}
#SFR-TV .transcription {margin-bottom: 40px;}
#SFR-TV a[class^="btn"] {width: fit-content;}

/*Multisurf*/
#Multisurf {display: flex; gap: 24px;}
#Multisurf > div {display: flex; flex-direction: column;}
#Multisurf p[aria-level="3"] {font: 24px/normal SFR-Bold; margin-bottom: 8px;}
#Multisurf p:last-of-type {margin-bottom: 24px;}
#Multisurf a[class^="btn"] {width: fit-content; margin-top: auto;}

/*SFR Cloud*/
#SFR-Cloud {display: flex; gap: 24px;}
#SFR-Cloud > div {display: flex; flex-direction: column;}
#SFR-Cloud p[aria-level="3"] {font: 24px/normal SFR-Bold; margin-bottom: 8px;}
#SFR-Cloud p:last-of-type {margin-bottom: 24px;}
#SFR-Cloud a[class^="btn"] {width: fit-content; margin-top: auto;}

@media all and (max-width: 1100px) {
	/*Style lame blanche*/
	.edito-white {padding: 16px;}
	.edito-white picture img {width: 100%; height: auto;}

	/*Style conteneur*/
	.content {width: calc(100% - 32px); max-width: 486px;}
	
	/*Plus smartphone*/
	#Plus-smartphone {gap: 24px;}
	#Plus-smartphone ul {column-gap: 0; column-count: 1;}
	#Plus-smartphone .edito-white:not(:last-child) {margin-bottom: 16px;}
	#Plus-smartphone li p:last-child {font: 18px/normal SFR-Bold;}
	#Plus-smartphone #prix-p {height: 237px; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_prixp_tablet.webp) top left / cover no-repeat;}
	#Plus-smartphone #mode-p {height: 237px; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_modep_tablet.webp) top left / cover no-repeat;}
	#Plus-smartphone > a {width: 100%;}
	
	/*Option montre connectée*/
	#Montre-co {height: 453px; background: url(https://static.s-sfr.fr/assets/backgrounds/immersive/tab_kv-montre-co_immersive-full.webp) top / cover; padding: 0 0 40px;}
	#Montre-co .titre {font: 24px/normal SFR-Bold; margin: 0 0 24px 0;}
	#Montre-co .sousTitre + .texte {margin: 24px 0;}
	#Montre-co .titre + .texte {margin: 0 0 24px;}
	#Montre-co p {max-width: 100%;}
	#Montre-co a {width: 100%;}
	#Montre-co .group-link {flex-direction: column;}
	
    /*SFR TV*/
	#SFR-TV {gap: 24px;}
	#SFR-TV figure {margin-bottom: 16px;}
	#SFR-TV .transcription {margin-bottom: 24px;}
	#SFR-TV .edito-white {gap: 16px;}
	#SFR-TV a[class^="btn"] {width: 100%;}
	
    /*Multisurf*/
	#Multisurf {flex-direction: column-reverse; gap: 16px;}
	#Multisurf p[aria-level="3"] {font: 18px/normal SFR-Bold;}
	#Multisurf p:last-of-type {margin-bottom: 16px;}
	#Multisurf a[class^="btn"] {width: 100%;}
	
    /*SFR Cloud*/
	#SFR-Cloud {flex-direction: column; gap: 16px;}
	#SFR-Cloud p[aria-level="3"] {font: 18px/normal SFR-Bold;}
	#SFR-Cloud p:last-of-type {margin-bottom: 16px;}
	#SFR-Cloud a[class^="btn"] {width: 100%;}
}

@media all and (max-width: 768px) {
	/*Plus smartphone*/
	#Plus-smartphone #prix-p {height: 215px; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_prixp_mobile.webp) top left / cover no-repeat;}
	#Plus-smartphone #mode-p {height: 215px; background: url(https://static.s-sfr.fr/media/mobile/visuel/26013_modep_mobile.webp) top left / cover no-repeat;}
	
	/*Option montre connectée*/
	#Montre-co {height: 531px; background: url(https://static.s-sfr.fr/assets/backgrounds/immersive/mob_kv-montre-co_immersive-full.webp) top / cover;}
}