@import url('https://fonts.googleapis.com/css2?family=Sarala:wght@400;700&display=swap');

:root {
  --blue: rgb(0, 39, 106);
  --bluelight: rgb(102, 201, 203);
  --bluelight: #009FD8;
  --grey: rgb(89, 89, 89);
  --bluefonce: #00276a;
  --white: #FFF;
  --desktop: 1280px;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

span[id]::before {
  content: '';
  display: block;
  height:      75px;
  margin-top: -75px;
  visibility: hidden;
 
}
@media (max-width:1280px){
	span[id]::before {
		height:170px;
		margin-top: -170px;
	}
	
}


html{
	font-family:Sarala;
	font-weight:400;
	margin:0;
}
body{
	margin:0;
	padding-top:100px;
	@media (max-width:1280px){
		padding-top:200px;
	}
	
}
section{
	padding:100px 0;
	@media (max-width:1280px){
		padding:20px 0;
	}
}
header{
	background-color:var(--bluelight);
	padding:20px 0;
	position:fixed;
	width:100%;
	top:0;
	@media (max-width:1280px){
		padding:0;
	}
	
}
.header_menu{
	display:flex;
	align-items:center;
	padding-left:0;
	@media (max-width:800px){
		flex-direction:column;
	}
	li{
		&:nth-child(2){
			margin-left:100px;
			@media (max-width:800px){
				margin-left:0;
			}
		}
		list-style:none;
		a{
			text-decoration:none;
			padding:0 20px;
			color:var(--white);
			font-weight:500;
			text-transform:uppercase;
			display:block;
		}
	}
	
	
}
footer{
	padding:60px 0;
	background-color:var(--bluefonce);
	text-align:center;
	
}
footer *{
		color:var(--white);
	}
footer a{
	color:var(--white);
	text-decoration:none;
	
}
.container {
  max-width: 1280px;
  width: 100%;
  margin: auto;
  padding: 0 20px;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

.flex{
	@media (min-width: 1280px) {
		display:flex;
		align-items:start;
		gap:60px;
	}
	
	
}
.flex-grow{
		flex-grow:1;
	}

.radius-35{
	border-radius:35px;
}

h1{
	font-size:46px;
	font-weight:700;
	color:var(--blue); 
	/*color:var(--grey);*/
	line-height:50px;
	@media (max-width: 1280px) {
		font-size:34px;
		line-height:38px;
	}
}
.txt-secondary{
	color: var(--bluelight);
    text-transform: none;
	font-size:46px;
	font-weight:700;
	margin:0;
	
}
.title-4{
	color:var(--bluelight);
	font-size:16px;
	font-weight:700;
    letter-spacing: .96px;
    line-height: 1.75;
    text-transform: uppercase;
}
.title-2{
	color:var(--grey);
	font-size: 27px;
    font-weight: 700;
    line-height: 1.3;
}


p{
	font-size:17px;
	color:var(--grey);
	
}
a{
	color:var(--bluefonce);
}
main{
	details{
		max-width:600px;
		background: #fcfcfc;
		border-radius: 25px;
		box-shadow: 0 10px 30px rgba(87,87,87,.16);
		cursor: pointer;
		margin-top:20px;
		padding: 20px 30px 20px 45px;
	}


	details summary{
		color: var(--bluelight);
		font-weight:700;
		letter-spacing:.96px;
		display:flex;
		align-items:center;
	}

	details summary::marker{
		content:"";
		display:none;
	}

	details summary::after{
		flex-shrink:0;
		content:"+";
		border-radius:50%;
		color:var(--white);
		background-color:var(--bluelight);
		width:40px;
		height:40px;
		display:block;
		margin-left:auto;
		text-align:center;
		line-height:40px;
		font-size:26px;
	}

	details[open] summary{
		color:var(--bluefonce);
	}

	details[open] summary:after{
		content:"-";
		background-color:var(--bluefonce);
	}
}


.btn{
	background-color:var(--bluelight);
	color:var(--white);
	border-radius:30px;
	padding:10px 20px;
	text-decoration:none;
	font-weight:700;
	margin-top:30px;
}


.display-block{
	display:block;
}
.displaym-none{
	@media (max-width:800px) {
		display:none;
	}
}
.display-none{
	display:none;
}
.displaym-block{
	@media (max-width:800px) {
		display:block;
	}
}
.display-inlineblock{
	display:inline-block;
}
.align-text-center{
	text-align:center;
}

.color-bluelight{color:var(--bluelight);}
.color-bluefonce{color:var(--bluefonce);}
.color-white{color:white;}

.bg-bluefonce{background-color:var(--bluefonce);}
.bg-bluelight{background-color:var(--bluelight);}



.paiements{
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}

.paiements li{
	
	text-align:center;
    background: rgba(250,251,251,.4);
    border-radius: 35px;
    box-shadow: 0 10px 30px rgba(87,87,87,.16);
    margin: 30px 0 40px;
    padding: 20px 35px;
	list-style:none;
}
.paiements li a{
	display:block;
	
	margin:10px 0;
}

.regulariser summary:before{
	display:block;
	content:"";
	height:40px;
	width:40px;
	background-size:contain;
	background-repeat:no-repeat;
	margin-right:20px;
	flex-shrink:0;
}
.regulariser details:nth-child(1) summary::before{
	background-image:url(images/carte-bancaire.png);
}
.regulariser details:nth-child(2) summary::before{
	background-image:url(images/virement.png);
}
.regulariser details:nth-child(3) summary::before{
	background-image:url(images/prelevement-automatique.png);
}


form{
	max-width:700px;
	width:100%;
	
}

input,textarea,select{
	display:block;
	padding:1em 2em;
	border:1px solid #ddd;
	border-radius:15px;
	font-size:17px;
	margin:1em 0;
	max-width:700px;
	width:100%;
}
textarea{
	min-height:300px;
	max-width:none;
}
input[type=submit]{
	max-width:none;
	width:auto;
	
}

#verrue {
    background-image: url("https://sspcollect.com/wp-content/themes/theme-ssp-collect/build/images/forme-filet.80e60c01.png"), linear-gradient(rgb(0, 4, 45), rgb(0, 39, 106));
    background-position-x: calc(100% + 150px), 90%;
    background-position-y: 0%, 0%;
    background-repeat: no-repeat;
    background-size: 1200px, auto 100%;
    &>div {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 15px;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        &>div:nth-child(1) {
            &>div {
                display: inline-block;
                margin: auto;
                position: relative;
                z-index: 2;
                border-radius: 35px;
                &::after {
                    backdrop-filter: blur(60px);
                    background: hsla(0,0%,100%,.16);
                    border-radius: 35px;
                    box-shadow: 0 10px 30px rgba(87,87,87,.16);
                    content: "";
                    display: block;
                    height: 100%;
                    position: absolute;
                    right: 50px;
                    top: 50px;
                    width: 100%;
                    z-index: 1;
                }
                &>img {
                    border-radius: 35px;
                    display: block;
                    position: relative;
                    z-index: 2;
                    height: auto;
                    max-width: 100%;
                }
            }

        }
        &>div:nth-child(2) {
            padding: 0 0 0 60px;
            flex: 1;
            position: relative;
            &>div {
                align-items: flex-start;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                position: relative;
                z-index: 2;
                &>div {
                    align-items: flex-start;
                    display: flex;
                    justify-content: flex-start;
                    flex: 0 0 100%;
                    max-width: 100%;
                    margin: 0 0 30px;
                    &>div {
                        color: #fff;
                        font-size: 17px;
                        line-height: 1.5;
                        &>p:nth-child(1) {
                            margin: 0 0 10px;
                            &>span {
                                color: #66c9cb;
                                letter-spacing: normal;
                                text-transform: none;
                                font-size: 46px;
                                font-weight: 700;
                                line-height: 1.2;
                            }
                        }
                        &>p:nth-child(2) {
                            color: #fff;
                            margin-bottom: 0;
                            &>span {
                                color: #66c9cb;
                                letter-spacing: normal;
                                text-transform: none;
                                font-size: 17px;
                                line-height: 1.5;
                                font-family: Sarala,Arial,Verdana,sans-serif;
                                text-rendering: optimizeLegibility;
                            }
                            &>a {
                                color: #66c9cb;
                                letter-spacing: normal;
                                text-transform: none;
                                font-weight: 700;
                                font-size: 17px;
                                line-height: 1.5;
                                font-family: Sarala,Arial,Verdana,sans-serif;
                                text-rendering: optimizeLegibility;
                                text-decoration: none;
                                &>span {
                                    color: #fff;
                                    font-weight: 700;
                                    font-size: 17px;
                                    line-height: 1.5;
                                    font-family: Sarala,Arial,Verdana,sans-serif;
                                    text-rendering: optimizeLegibility;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}