.content {max-width: 1280px; width: calc(100% - 64px); margin: 0 auto;}
.edito-white {background: #FFF; padding: 24px; border-radius: 8px;}
.edito-dark {color:#FFF; background-color: #222; padding: 24px; border-radius: 8px;}
.btn6:focus-visible {outline: 2px solid #fff;}

/*Bento*/
.intestudio-bento {display: grid;grid-auto-columns: 1fr;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 424px 1fr;gap: 40px;grid-template-areas: "a a a" "b c d";}
.intestudio-bento.grid-row-3-6 {grid-template-areas: "hero hero hero hero hero hero" "a    a    b    b    c    c   " "d    d    d    e    e    e   ";grid-template-rows: 424px max-content;}
.immersive {display: flex; flex-direction: column; color: #FFF; padding: 24px; border-radius: 8px;}
.immersive .titre {font: 24px/normal SFR-Bold; margin: 0 0 8px 0;}
.immersive > img {margin: 0 0 16px 0;}
.immersive p:not(:last-of-type) {margin: 0 0 8px 0;}
.immersive p:has(+ a[class^="btn"]) {margin: 0 0 24px 0;}
.immersive a[class^="btn"] {margin: auto 0 0 0;}
.immersive ul {margin-left: 16px;list-style-position: outside;}
.immersive small {font: 12px/normal SFR-Regular;}
.intestudio-bento > :first-child {grid-area: a; justify-content: end;}
.intestudio-bento.grid-row-3-6 > :first-child {grid-area: hero}
.intestudio-bento.grid-row-3-6 > :nth-child(2) {grid-area: a;}
.intestudio-bento.grid-row-3-6 > :nth-child(3) {grid-area: b;}
.intestudio-bento.grid-row-3-6 > :nth-child(4) {grid-area: c;}
.intestudio-bento.grid-row-3-6 > :nth-child(5) {grid-area: d;}
.intestudio-bento.grid-row-3-6 > :nth-child(6) {grid-area: e;}

/*Immersive section*/
.immersiveFull {display: flex; flex-direction: column; justify-content: flex-end; color: #FFF; padding: 80px 0;}
.immersiveFull .titre {font: 32px/normal SFR-Bold; margin: 0 0 8px 0;}
.immersiveFull p {max-width: 620px;}
.immersiveFull .sousTitre + .texte {margin: 40px 0;}
.immersiveFull .titre + .texte:not(:last-of-type) {margin: 0 0 40px;}
.immersiveFull a {width: fit-content;}

/*Service TV*/
#Service-tv {color: #FFF; background-color: var(--clr-black); padding: 80px 0;}
#Service-tv .content > p {margin: 4px 0 40px;}	
#Service-tv .carteLigne {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0 auto;}
#Service-tv img {width: 100%; height: auto; border-radius: 8px;}


@media all and (max-width: 1100px) {
    .content {max-width: 486px; width: calc(100% - 32px);}
    .content a {width: 100%;}
    .edito-white, 
    .edito-dark {padding: 16px;}
    
    /*Bento*/
    .intestudio-bento {grid-template-columns: 1fr; grid-template-rows: 360px 1fr 1fr 1fr; gap: 16px; grid-template-areas: "a" "b" "c" "d";}
    .intestudio-bento.grid-row-3-6 {grid-template-areas: "hero" "a" "b" "c" "d" "e";grid-template-rows: 398px 1fr 1fr 1fr 1fr 1fr;}
    .immersive {padding: 16px;justify-content: end;}
    .immersive .titre {font: 18px/normal SFR-Bold; margin: 0;}
    .immersive .titre br {display: none;}
    .immersive > img {width: 40px; height: 40px;}
    .immersive p:has(+ a[class^="btn"]) {margin: 0;}
    .immersive a[class^="btn"] {margin: 16px 0 0;}
    
    /*Immersive section*/
    .immersiveFull {padding: 0 0 40px;}
    .immersiveFull .titre {font: 24px/normal SFR-Bold;}
    .immersiveFull .sousTitre + .texte {margin: 24px 0;}
    .immersiveFull .titre + .texte:not(:last-of-type) {margin: 0 0 24px;}
    .immersiveFull p {max-width: 100%;}
    .immersiveFull a {width: 100%;}
    
    /*Service TV*/
    #Service-tv {padding: 40px 0;}
    #Service-tv .carteLigne {grid-template-columns: 1fr; gap: 24px;}
	#Service-tv .content > p {margin: 4px 0 24px;}	
}