/* =========================
   GOOGLE FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
/*"https://fonts.googleapis.com/css?family=Raleway&display=swap*/


/* ===== Base ===== */
/*
body {   /*conflit avec plan_stage3.css
    font-family: "Helvetica Neue", Arial, sans-serif;
	font-family: Raleway;
    background: #f4f6f9;
    margin: 0;
    padding: 32px 16px;  /* 40*0.8, 20*0.8 
    color: #333;
}
*/
/* ===== Conteneur principal ===== */
#form_registration {
    /*max-width: 1440px; /* 760*0.8 */
    margin: 0 auto;
    background: #ffffff;
    padding: 32px; /* 40*0.8 */
    border-radius: 6.4px; /* 8*0.8 */
    /*box-shadow: 0 6.4px 20px rgba(0,0,0,0.06); /* 8*0.8, 25*0.8 */
	background-color:#fafafa;
}

/* ===== Titres ===== */
#h1_form {
	font-size:20px; 
	color:#ffa500; 
	font-weight:400; 
	letter-spacing:.025em;
	line-height:1.1;
	padding:7px 0;
	text-align: left;
}

h2 {
	font-size:18px; 
	color:#ffa500; 
	font-weight:400; 
	letter-spacing:.025em;
	line-height:1.1;
	text-align: left;
	padding:7px 0;
}

#hr_form {
    border: none !important;           /* supprime la bordure par défaut */
    height: 1px !important;            /* épaisseur de la ligne */
    background-color: #ccc !important; /* couleur de la ligne */
    margin: 16px 0 !important;         /* espace avant et après */
}

#img_paypal {
	margin: 10px 0 0 26px;
	width: 150px;
}

/* ===== Groupes ===== */
.form-group {
    margin-bottom: 0;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
    padding: 6.4px; /* 8*0.8 */
    border-radius: 4.8px; /* 6*0.8 */
    position: relative;
}

.form-group.hovered {
    background-color: #f9faff;
}

.form-group.focused {
    background-color: #eef3ff;
    box-shadow: 0 0 0 1.6px rgba(91,124,250,0.15); /* 2*0.8 */
}

/* Ne pas écraser les erreurs */
.form-group .input-error {
    background: #fff5f5 !important;
}

/* ===== Labels ===== */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 4.8px; /* 6*0.8 */
    font-size: 11.2px; /* 14*0.8 */
    color: #444;
	text-align: left;
}

/* Labels * pour input required */
.form-group:has(input[required]) > label::after,
.form-group:has(select[required]) > label::after,
.form-group:has(textarea[required]) > label::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
}

/* juste pour droit de rétractation */
label.required::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
}

#asterisque {
	color:#e53935;
    font-weight: 700;
}

.radio-group label {
    font-weight: normal;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 4.8px; /* 6*0.8 */
}

/* ===== Inputs / Select / Textarea ===== */
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 8px 9.6px; /* 10*0.8, 12*0.8 */
    font-size: 11.2px; /* 14*0.8 */
    border: 1px solid #dcdfe6;
    border-radius: 4.8px; /* 6*0.8 */
    background: #fff;
    transition: all 0.16s ease;
    box-sizing: border-box;
}

input:hover,
select:hover {
    border-color: #bfc5ce;
}

input:focus,
select:focus {
    border-color: #5b7cfa;
    outline: none;
    box-shadow: 0 0 0 2.4px rgba(91,124,250,0.15); /* 3*0.8 */
}

/* ===== Radios / Checkbox ===== */
.radio-group input,
input[type="checkbox"] {
    margin-right: 4.8px; /* 6*0.8 */
}

/* ===== Messages d'erreur / succès ===== */
.input-error {
    border: 1.6px solid #e53935 !important; /* 2*0.8 */
    background: #fff5f5;
}

.error-message {
    color: #e53935;
    font-size: 10.4px; /* 13*0.8 */
    margin-top: 4.8px; /* 6*0.8 */
	padding: 5px;
}

.success-message {
    color: #2e7d32;
    font-weight: bold;
	padding: 5px;
}

/* pour le groupe RADIO */
.input-error-group {
    border: 1px solid red;
    padding: 8px;
    border-radius: 4px;
    background-color: #fff0f0; /* léger fond rouge pour attirer l’œil */
}

.input-error-group label {
    color: red; /* met le label du groupe en rouge */
    font-weight: bold;
}

.error-message-client {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

/* ===== Bloc rétractation ===== */
.retractation-label {
    display: flex;
    gap: 8px; /* 10*0.8 */
    align-items: flex-start;
    font-weight: normal;
    font-size: 10.4px; /* 13*0.8 */
    line-height: 1.2; /* approx 1.5*0.8 */
    background: #f9fafc;
    padding: 9.6px; /* 12*0.8 */
    border-radius: 4.8px; /* 6*0.8 */
    border: 0.8px solid #e3e6ec; /* 1*0.8 */
}

/* ===== Bouton ===== */
input[type="submit"] {
    width: 100%;
    background: #5b7cfa;
    color: white;
    padding: 11.2px; /* 14*0.8 */
    font-size: 12.8px; /* 16*0.8 */
    font-weight: 600;
    border: none;
    border-radius: 4.8px; /* 6*0.8 */
    cursor: pointer;
    transition: all 0.16s ease;
}

input[type="submit"]:hover {
    background: #4667e6;
}

input[type="submit"]:active {
    transform: translateY(0.8px); /* 1*0.8 */
}

/* ===== Messages d'aide flottants ===== */
.focus-message {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(8px, -40px); /* 10*0.8, -50*0.8 */
    background: #eef3ff;
    padding: 4.8px 8px; /* 6*0.8, 10*0.8 */
    border-radius: 3.2px; /* 4*0.8 */
    font-size: 12px; /* 13*0.8 */
    color: #333;
    box-shadow: 0 1.6px 4px rgba(0,0,0,0.1); /* 2*0.8, 5*0.8 */
    white-space: normal;
    //max-width: 320px; /* 400*0.8 */
    z-index: 10;
}

.form-group.focused .focus-message {
    display: block;
}

#submitBtn {
	font-family: Raleway;
	text-align: center !important;
	font-weight:600;
}

/* ======================================================
   MOBILE PORTRAIT – BASE (≤ 599px)
====================================================== */
@media (max-width: 599px) {

    #form_registration {
        padding: 0 3px 10px 3px; /* 25*0.8 */
    }

    label,
    .retractation-label,
    .radio-group label,
    .checkbox-label,
    input,
    select,
    textarea {
        font-size: 11.2px !important; /* 14*0.8 */
        line-height: 1.28 !important; /* 1.6*0.8 */
    }
	
    input, select, textarea { 
		font-size: 11.2px; 
		padding: 8px 9.6px; 
		text-align: left !important;
	}

	#h1_form {
		font-size:22px;
	}


    input[type="text"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        padding: 11.2px 12.8px !important; /* 14*0.8,16*0.8 */
    }

    input[type="submit"] {
        font-size: 16px !important; /* 20*0.8 */
        padding: 14.4px !important; /* 18*0.8 */
    }

    .error-message,
    .success-message {
        font-size: 12px !important; /* 16*0.8 */
		padding: 5px;
	}

    .form-group {
        margin-bottom: 0;
    }


	
	    .focus-message {
        display: none;
        position: absolute;

        /* 👉 on annule le positionnement desktop */
        left: 0;
        top: auto;
        transform: none;

        /* 👉 position au-dessus */
        bottom: 100%;
        margin-bottom: 6px;

        width: 100%;
        max-width: 100%;

        background: #eef3ff;
        padding: 8px;
        border-radius: 6px;
        font-size: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .form-group.focused .focus-message {
        display: block;
    }


    .form-row,
    .form-row2 {
        flex-direction: column;
    }

    .checkbox-group label,
    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 11.2px !important; /* 14*0.8 */
        gap: 8px; /* 10*0.8 */
    }

    .checkbox-group input,
    .radio-group input {
        width: 12px; /* 15*0.8 */
        height: 12px; /* 15*0.8 */
        margin-right: 4px; /* 5*0.8 */
    }

    .retractation-label {
        font-size: 12.8px !important; /* 16*0.8 */
        line-height: 1.28 !important; /* 1.6*0.8 */
        padding: 12.8px !important; /* 16*0.8 */
    }
}

/* ======================================================
   MOBILE PAYSAGE (600px – 767px)
====================================================== */
@media (min-width: 600px) and (max-width: 767px) {
    #form_registration { 
		padding: 0 3px 20px 3px; 
	}
    
	label, 
	.retractation-label, 
	.radio-group label, 
	.checkbox-label { 
		font-size: 12px; 
	}
	
	h2 {
		font-size:18px; 
	}
	
    input, select, textarea { 
		font-size: 12px; 
		padding: 8px 9.6px; 
		text-align: left !important;
	}
    input[type="submit"] { font-size: 13.6px; padding: 11.2px; }
    .checkbox-group input, .radio-group input { width: 14.4px; height: 14.4px; }
    .retractation-label { font-size: 11.2px; padding: 9.6px; }

	    .focus-message {
        display: none;
        position: absolute;

        /* 👉 on annule le positionnement desktop */
        left: 0;
        top: auto;
        transform: none;

        /* 👉 position au-dessus */
        bottom: 100%;
        margin-bottom: 6px;

        width: 100%;
        max-width: 100%;

        background: #eef3ff;
        padding: 8px;
        border-radius: 6px;
        font-size: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .form-group.focused .focus-message {
        display: block;
    }

}

/* ======================================================
   TABLETTE PORTRAIT (768px – 1023px)
====================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    #form_registration { 
		padding: 0 3px 15px 3px; /* 30*0.8 */
	} 
    
	label, 
	.retractation-label, 
	.radio-group label, 
	.checkbox-label, 
	#h1_form { 
		font-size: 12.8px;
	}

	#h1_form {
		font-size:22px;
	}
	
	h2 {
		font-size:18px; 
	}
	
    input, select, textarea { 
		font-size: 12.8px; 
		padding: 9.6px 11.2px; 
		text-align: left !important;
	}
    input[type="submit"] { font-size: 14.4px; padding: 12.8px; }
    .error-message, .success-message, .focus-message { 
		font-size: 12.8px;
		padding: 5px;
	}
    .form-group { margin-bottom: 0; }
    .checkbox-group input, .radio-group input { width: 16px; height: 16px; }
    .retractation-label { font-size: 12px; padding: 11.2px; }
	
	    .focus-message {
        display: none;
        position: absolute;

        /* 👉 on annule le positionnement desktop */
        left: 0;
        top: auto;
        transform: none;

        /* 👉 position au-dessus */
        bottom: 100%;
        margin-bottom: 6px;

        width: 100%;
        max-width: 100%;

        background: #eef3ff;
        padding: 8px;
        border-radius: 6px;
        font-size: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .form-group.focused .focus-message {
        display: block;
    }
		
}

/* ======================================================
   TABLETTE PAYSAGE (1024px – 1279px)
====================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    #form_registration {
		padding: 0 3px 28px 3px; 
	} /* 35*0.8 */
    
	label, 
	.retractation-label, 
	.radio-group label, 
	.checkbox-label, 
	#h1_form { 
		font-size: 12.8px; 
	}
	
	#h1_form {
		font-size:22px;
	}
	
	h2 {
		font-size:18px; 
	}
	
    input, select, textarea { 
		font-size: 12.8px; 
		padding: 9.6px 11.2px;
		text-align: left !important;
	}
    input[type="submit"] { font-size: 14.4px; padding: 12.8px; }
    .error-message, .success-message, .focus-message { 
		font-size: 12px; 
		white-space: normal; /* permet plusieurs lignes */
		width:100%;
		max-width: 100%; /* 400*0.8 */
		padding: 5px;
	}
    .form-group { margin-bottom: 0; }
    .checkbox-group input, .radio-group input { width: 16px; height: 16px; }
    .retractation-label { font-size: 12px; padding: 11.2px; }
	
/* Ligne horizontale de 3 inputs*/
.form-row {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row .form-group:first-child {
    flex: 0.46; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

/* Ajustement précis du select */
#civilite,
#civilite_cadeau,
#country {
    padding: 8px 9.6px;   /* 10*0.8, 12*0.8 */
    font-size: 12px;      /* 15*0.8 */
    height: 30.4px;       /* 38*0.8 */
}

/* Ligne horizontale de 2 inputs*/
.form-row2 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row2 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Ligne horizontale de 1 inputs*/
.form-row3 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row3 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row3 .form-group:first-child {
    flex: 0.3; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

/* Ligne horizontale de 1 inputs*/
.form-row4 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row4 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row4 .form-group:first-child {
    flex: 0.61; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

select {
    height: 34px; /* ou la hauteur que tu veux */
}	
}

/* ======================================================
   ORDINATEURS / LAPTOP (≥ 1280px)
====================================================== */
@media (min-width: 1280px) {
    #form_registration { 
		padding: 0 3px 22px 3px; 
	} /* 40*0.8 */
    
	label, 
	.retractation-label, 
	.radio-group label, 
	.checkbox-label, 
	#h1_form { 
		font-size: 11.2px; 
	}
	
	#h1_form {
		font-size:28px;
	}
	
	h2 {
		font-size:20px; 
	}
	
    input, select, textarea { 
		font-size: 11.2px; 
		padding: 8px 9.6px; 
		text-align: left !important;
	}
    input[type="submit"] { font-size: 12.8px; padding: 11.2px; }
    .error-message, .success-message, .focus-message { 
		font-size: 12px; 
		white-space: normal; /* permet plusieurs lignes */
		width:100%;
		max-width: 100%; /* 400*0.8 */
		padding: 5px;
	}
    .form-group { margin-bottom: 0; }
    .checkbox-group input, .radio-group input { width: 12.8px; height: 12.8px; }
    .retractation-label { font-size: 10.4px; padding: 9.6px; }

/* Ligne horizontale de 3 inputs*/
.form-row {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row .form-group:first-child {
    flex: 0.46; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

/* Ajustement précis du select */
#civilite,
#civilite_cadeau,
#country {
    padding: 8px 9.6px;   /* 10*0.8, 12*0.8 */
    font-size: 12px;      /* 15*0.8 */
    height: 30.4px;       /* 38*0.8 */
}

/* Ligne horizontale de 2 inputs*/
.form-row2 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row2 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Ligne horizontale de 1 inputs*/
.form-row3 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row3 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row3 .form-group:first-child {
    flex: 0.3; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

/* Ligne horizontale de 1 inputs*/
.form-row4 {
    display: flex;
    gap: 12.8px; /* 16 * 0.8 */
    align-items: flex-end; /* alignement propre des champs */
}

/* Chaque bloc */
.form-row4 .form-group {
    flex: 1; /* chaque champ prend la même largeur */
    margin-bottom: 0; /* évite le double espace vertical */
}

/* Civilité plus étroit */
.form-row4 .form-group:first-child {
    flex: 0.54; /* 0.5 * 0.8 pour réduire légèrement proportionnellement */
}

select {
    height: 34px; /* ou la hauteur que tu veux */
}


}

/* ======================================================
   GRANDS ÉCRANS (≥ 1440px)
====================================================== */
@media (min-width: 1440px) {
#form_registration {
    /*max-width: 720px; /* 900 * 0.8 */
    max-width: 100%; /* 900 * 0.8 */
    /*padding: 40px; /* 50 * 0.8 */
    padding: 0 3px 30px 3px; /* 50 * 0.8 */
}

h1.main-title {
	font-size: 20px;  /* taille désirée */
	padding:7px 0;
}

label, 
.retractation-label, 
.radio-group label, 
.checkbox-label { 
    font-size: 12.8px; /* 16 * 0.8 */
}

input, select, textarea { 
    font-size: 12.8px; /* 16 * 0.8 */
    padding: 0 12.8px; /* 14*0.8, 16*0.8 */ /*centre le texte verticalement dans select*/
	text-align: left !important;
}

input[type="submit"] { 
    font-size: 14.4px; /* 18*0.8 */
    padding: 14.4px; /* 18*0.8 */
}

.error-message, .success-message, .focus-message { 
		font-size: 12px; 
		white-space: normal; /* permet plusieurs lignes */
		width:100%;
		max-width: 100%; /* 400*0.8 */
		padding: 5px;
}

.form-group { 
    margin-bottom: 0; 
}

.checkbox-group input, .radio-group input { 
    width: 16px; /* 20*0.8 */
    height: 16px; /* 20*0.8 */
}

.retractation-label { 
    font-size: 12px; /* 15*0.8 */
    padding: 12.8px; /* 16*0.8 */
}
}