body { background-color: var(--clr-bg); }
main { max-width: 1280px; width: calc(100% - 64px); margin: 0 auto; }
h1 { text-align: center; margin: 40px 0; }
/*.margBottom{margin:0 0 16px 0;}*/
#Top { background: #fff; padding: 24px; border-radius: 8px;}
#Top .container{ display: Flex; gap: 24px;}
#Top .pourcentage{ background-color: var(--clr-black); color: #FFF; text-align: center; display: flex; flex-direction: column; gap: 16px; justify-content: center; width: 100%; max-width: 376px; padding: 8px; border-radius: 8px; min-height: 376px;}
#Top .pourcentage .price {width: fit-content; margin: 0 auto;}
#Top .price .L {font: 40px/1 SFR-Bold;}
#Top .price .R {font: 24px/1 SFR-Bold;}
#Top .price + .p {font: 24px/normal SFR-Bold;}
/*#Top .texte div{ display: inline-block; width: 30%; vertical-align: top;}*/
#Top .texte {display: flex; gap: 24px; flex-direction: column;}
#Top .texte > p {font: 24px/normal SFR-Bold;}
#Top .texte .Audit-conformite {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px;}
#Top .Audit-conformite ul {margin-left: 8px;}
#Top .Audit-conformite p {font: 16px/normal SFR-Bold; margin-bottom: 8px;}
#Top a{ display: block; width: fit-content; margin: 32px 0 0 0;}

#Top .cont { display: block; columns: 2;}
#Top .inf { width: 100%; }
#Top .inf>p{ font-size: 24px; font-family: 'SFR-Bold'; display: block; margin: 0 0 8px 0;}
#Top .inf .cont>div{ font-size: 14px; padding: 16px 0; border-bottom: 1px solid var(--clr-black);}
#Top .inf .cont>div:last-child{ border: none;}
#Top .inf .cont>div span { display: block; font-family: 'SFR-Bold'; margin: 0 0 4px 0;}
#Top .inf .cont>div span + p{ display: block; }
#Top .inf .cont>div span + ul{ list-style-position: inside; }

.row-2 {grid-row: span 2 / span 2;}

.S { padding: 40px 0; }
.S h2 { display: block; margin: 0 0 40px 0;}
.S h2+p{ display: block; margin: -40px 0 40px 0; font-size: 14px; }
.S .C{ background-color: #FFFFFF; margin: 0 0 40px 0; padding: 24px; border-radius: 8px; font-size: 14px;}
.S .C:last-child{ margin: 0;}
.S .C ul { list-style-position: inside; }
.S h3 { margin: 0 0 24px 0; }


@media all and (max-width: 1100px) {
    #Top .container {flex-direction: column; gap: 16px;}
    #Top .pourcentage {max-width: none; min-height: 351px; padding: 0; justify-content: center; flex-direction: row; gap: 40px; text-align: left; align-items: center;}
    #Top .pourcentage .price {margin: 0;}
    #Top .price .L {font: 58px/normal SFR-Black;}
    #Top .price .R {font: 32px/64px SFR-Bold;}
    #Top .texte > p {font: 16px/normal SFR-Bold;}
    #Top .texte {gap: 16px;}
    #Top .Audit-conformite > div p {margin-bottom: 0;}
    #Top a {margin: 0 auto;}
    #Top .pourcentage p:not(.price) {max-width: 288px;}
}

@media all and (max-width: 768px) {
    #Top .pourcentage {min-height: 148px;}
    #Top .price .L {font: 32px/normal SFR-Black;}
    #Top .price .R {font: 18px/36px SFR-Bold;}
    #Top .texte .Audit-conformite {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px;}
    #Top .pourcentage p:not(.price) {font: 16px/normal SFR-Bold; max-width: 148px;}
}