<style type="text/css">
.reset {
	
}
	
* {
margin:0;
padding:0;
outline: 0;
border: 0;
font-family: 'Inter', sans-serif;
font-size:12px;
box-sizing: border-box;	
list-style-type: none;	
}
::placeholder {
color: #aaa;
}	
	
body {
	
}
	
header {
display: flex;
justify-content: center;
padding: 20px;	
box-shadow: 0px -5px 15px #00000029;
z-index: 2;
position: fixed;
top:0;
left:0;
width: 100%;	
z-index: 2;
background-color:#673de6; 	
height: 80px;	
}
	
header section {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

header section img {
    height: 100px;	
}
	
h1 {
font-size: 22px;	
margin-bottom: 40px;	
}		
	
			

h4 {
font-size: 12px;
margin-bottom: 20px;	
}	
	
	
.page {

    display: flex;
    justify-content: center;
	z-index: 1;	
	padding-top: 140px;
	padding-bottom: 75px;
}	

.home .page {	
padding-top: 90px;
	}
	
.page section {
    padding: 30px;	
	width: 1150px;
    display: flex;
    justify-content: center;
	   flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}	
	
	
.page section .flex {	
gap:40px;	
}
	
.produit {
display: flex;
flex: 1;	
}	
	
.produit .bloc_produit {
border: 1px solid #e9e9e9;
padding: 30px;	
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;		
}	
	
.produit .bloc_produit h2 {	
color: #673de6;	
font-size: 20px;
margin-bottom: 10px;	
}
	
.produit .bloc_produit h3 {		
font-size: 14px;	
margin-bottom: 10px;	
}	
	
	
.produit .bloc_produit .bloc_centrer {		
display: flex;
flex-wrap: wrap;
justify-content: center;	
}

.produit .bloc_produit .bloc_centrer img {		
margin: 20px;	
}
	
footer {
display: flex;
justify-content: center;
padding: 20px;
box-shadow: 0px -2px 15px #00000029;
position: fixed;
bottom: 0;
left:0;	
width: 100%;	
z-index: 2;	
height: 75px;
background-color: #fff;	
}	
	
footer section {	
text-align: center;	
}

footer section p {	
margin-bottom: 5px;
}

footer.bg {	
 background-color:#442c8f;		
}

footer.bg p {		
color: #fff;		
}
	
.bouton {
border-radius: 99px;
font-size: 15px;
padding: 7px 15px 7px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
cursor: pointer;
position: relative;
display: flex;
max-width: max-content;
align-items: center;
}	
.bt_connexion {	
position: absolute;
    left: 20px;
    top: 20px;
}	
	
.bt_violet {
background-color: #673de6;
border: 2px solid #673de6;	
}
	
.bt_violet:hover {
background-color: #fff;
border: 2px solid #673de6;	
color:#673de6;	
}	
	
	
.bt_blanc {

background-color: #673de6;
border: 2px solid #fff;	
color:#fff;	
}
	
.bt_blanc:hover {
background-color: #fff;
border: 2px solid #fff;
color:#673de6;		
}	
	
	
.bt_gris {
background-color: #aaa;
border: 2px solid #aaa;
pointer-events: none;	
}
	
.bt_gris:hover {
background-color: #fff;
border: 2px solid #673de6;	
color:#673de6;	
}	
	
.produit .bloc_produit ul {	
margin-bottom: 20px;	
}	
	
	

label{
    margin-bottom: 5px;
    display: block;
    font-size: 14px;
    color: #000 ;
    font-weight: bold;
}	
	
#form_log {
  width: 350px;
  border: 1px solid #e9e9e9;
  padding: 30px;
  border-bottom-left-radius: 30px;
  border-top-right-radius: 30px;
}

#form_log.double {	
  width: 600px;	
}

#form_log.simple {	
  width: auto;	
	padding: 0;
border:none;	
}	
	
#form_log.double .ligne {		
  display: grid;
  grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
  gap: 30px; /* Espace entre les colonnes */	
	}

	
	
/* Assurer que les champs de formulaire prennent toute la largeur */
#form_log input,
#form_log select,
#form_log textarea {
  width: 100%;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}
	
	
	
	
	
#form_log h2 {	
color: #673de6;	
font-size: 18px;
margin-bottom: 20px;	
}	
	
	
input, select, textarea, .lien_mail {
    font-size: 14px;
    border: 1px solid #e9e9e9;
    width: 100%;
    float: left;
    border-radius: 5px;
    padding: 15px 15px;
    margin-bottom: 15px;
}	
	
#form_log input, #form_log select {
border-radius: 5px;
border-color: #e9e9e9;	
padding: 10px;	
}	
	
#form_log input:hover, #form_log select:hover {	
border-color: #673de6;	
}	

.message_log {
    color: #FF5C5C;
    font-size: 12px;

	margin-bottom: 15px;
}	
	
.message_inscription {
    color: #FF5C5C;
    font-size: 12px;
text-align: center;
    margin-top: 30px;
}	
	
.mdp p {
    font-size: 11px;
    margin-top: 10px;
    text-align: center;
}
.mdp a {
	color: #673de6;
	font-size: 11px;
}

.mdp a:hover {
color: #FF8C42;
}		
	
.captcha {
	display: block;	
	    display: block;
    position: absolute;
    top: 25px;
    right: 10px;
	}

	.bloc_form {
	position: relative;	
	}	
	
.spinner {
  border: 2px solid #ffffff44;
  border-top: 2px solid white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}	
	
/* Exemple d’état hover si besoin */
.bouton.bt_violet:hover .spinner {
   border-top-color: #673de6; /* Le spinner prend aussi ce blanc automatiquement */
}	
	
.mobile {
display: none;		
}	
	
	
@media screen and (max-width: 1151px) {		
	
	
	
	
h1 {
	   font-size: 16px;	
}	
	
.mobile {
display: block;
width: 100%;	
}
	
	
.page section   {	
background: none!important;	
height: auto!important;		
}
	

	
	
.page section, #form_log, #form_log.double    {
width:100%!important;		
}
	


.produit {
    flex-wrap: wrap;
    flex-direction: column;
}	
.produit .bloc_produit .bloc_centrer img {		
display: none;	
}	

#form_log.double .ligne {
  grid-template-columns:none; /* Deux colonnes égales */
  gap: 0px; /* Espace entre les colonnes */
}
	
footer section p {
font-size: 11px;	
}

header {
	    justify-content: flex-start;
		height: 75px;	
	}

.page {
padding-top: 70px;		
}	
	
footer {
	
	height: 70px;
	}
	
header section img {
    height: 50px;
}	
	

	
}
	
body.home header {
    background-color: transparent!important;
}	
	
.bt_connexion2 {
display: none;		
}	
	
@media screen and (max-width: 901px) {		

.bt_connexion {
left:30px;	
}		
	
.bt_connexion2 {
display: block;
right:30px;	
left: inherit;	
background-color: #fff;
color:#673de6;	
}	
		
	
	body.home {
	background-image: none;	
	}	
	
body.home header {
    background-color: #442c8f!important;
}
	
section.home .flex {	
flex-direction: column;	
}	

	
.phone-mock {	
        width: 100% !important;
        height: 700px!important;
}	
	
}
	
	
	
</style>