
<!-- Ajout de CSS pour les bordures d'erreur -->

    .error-border {
        border-color: #dc3545 !important;
        border-width: 2px !important;
    }
    
    .error-border-container {
        border-color: #dc3545 !important;
        border-width: 2px !important;
        background: #fff5f5 !important;
    }
    
    .field-error {
        color: #dc3545;
        font-size: 12px;
        margin-top: 5px;
    }
	
    .container_form { max-width: 665px; margin: 0px auto; padding: 20px; }
    .form-group { 
	margin-bottom: 0px; 
    	max-height: 95px;
	}
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input, select { 
		padding: 8px !important;
		border-radius: 4px !important;	
		font-family: Verdana, Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: normal !important;
		background: #fafafa !important;
		border: 1px solid #ddd !important;
		color: #888 !important;	
	}
	
    .required { color: red; }
    .error { color: red; font-size: 0.9em; }
    .success { color: green; font-size: 0.9em; }
    .file-info { font-size: 0.8em; color: #666; margin-top: 5px; }
    .file-info2 { font-size:12px; color: #ec6608; margin-top: 5px; }
    .btn_valider {
    	background-color: #e00800 !important;
    	border: 0 solid #43b9ea !important;
    	border-radius: 0;
    	color: #fff !important;
    	float: right;
    	font-family: "Roboto", "Roboto-Medium" !important;
    	font-weight: 600 !important;
    	font-size: 14px !important;
    	margin-right: 14px !important;
    	padding: 12px 45px 12px 45px;
    	text-align: center;
    	text-transform: uppercase;
    	margin-top: -40px;
    	width: max-content;
		cursor: pointer;

    }
    .btn_valider:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
    .loading {
        background: #f8f9fa;
        padding: 15px;
        border-left: 4px solid #015cc3;
        margin: 20px 0;
    }
    .error-message {
        background: #fff3f3;
        padding: 15px;
        border-left: 15px solid #dc3545;
        margin: 20px 0;
    }

	.success-message {
		background: #15de152b;
		padding: 15px;
		border-left: 15px solid #28a745;
		margin: 20px 0;
	}
    
    /* Styles CAPTCHA */
    .captcha-container {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        margin: 20px 0;
    }
    
    .captcha-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    
    .captcha-label {
        font-weight: bold;
        color: #333;
        font-size: 14px;
    }
    
    .captcha-refresh {
        background: #015cc3;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .captcha-refresh:hover {
        background: #014aa3;
    }
    
    .captcha-image-container {
        text-align: center;
        margin-bottom: 15px;
        padding: 10px;
        background: white;
        border-radius: 6px;
        border: 1px solid #dee2e6;
    }
    
    .captcha-image {
        width: 100%;
        max-width: 250px;
        height: auto;
        border-radius: 4px;
        margin: 0 auto;
        display: block;
    }
    
    .captcha-input-group {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    
    .captcha-input {
        flex: 1;
        padding: 10px;
        font-size: 16px;
        letter-spacing: 2px;
        text-align: center;
        font-weight: bold;
	max-width: 200px;
    }
    
    .captcha-audio {
        background: #f36f21;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .captcha-audio:hover {
        background: #f36f21;
    }
    
    .captcha-hint {
        font-size: 12px;
        color: #6c757d;
        margin-top: 5px;
        text-align: center;
    }
    
    .captcha-error {
        color: #dc3545;
        font-size: 13px;
        margin-top: 5px;
        display: none;
    }
    
    /* Styles case à cocher conditions */
    .conditions-group {
        margin: 20px 0;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }
    
    .conditions-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    
    .conditions-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 3px;
        cursor: pointer;
    }
    
    .conditions-label {
        font-size: 12px;
        line-height: 1.5;
        color: #333;
        cursor: pointer;
        flex: 1;
    }
    
    .conditions-link {
        color: #015cc3;
        text-decoration: underline;
        font-weight: bold;
        white-space: nowrap;
    }
    
    .conditions-link:hover {
        color: #014aa3;
    }
    
    .conditions-error {
        color: #dc3545;
        font-size: 13px;
        margin-top: 5px;
        margin-left: 28px;
        display: none;
    }

    .banniere-responsive {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    @media (max-width: 768px) {
        .form-group {
            margin-left: 0 !important;
            padding: 0 10px;
        }
        
        .banniere-responsive {
            width: 100%;
        }

        h4 {
            font-size: 16px !important;
            padding: 0 10px !important;
        }
        
        .captcha-input-group {
            flex-direction: column;
        }
        
        .captcha-image {
            max-width: 100%;
        }
        
        .conditions-checkbox {
            align-items: flex-start;
        }
        
        .conditions-label {
            font-size: 12px;
            line-height: 1.4;
        }
    }
   
   /************************ Checkbox Zoho product **********************************/
	.checkbox-group {
		font-family: Arial, sans-serif;
		background: #f8f9fa;
		padding: 20px;
		border-radius: 8px;
		max-width: 800px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	.checkbox-group h3 {
		margin-top: 0;
		color: #1e3a5f;
	}
	/* Disposition horizontale */
	.checkbox-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		align-items: center;
	}
	.checkbox-item {
		display: flex;
		align-items: center;
	}
	.checkbox-item label {
		margin-left: 8px;
		font-size: 16px;
		cursor: pointer;
		color: #333;
		white-space: nowrap;
	}
	.checkbox-item input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
		accent-color: #0078d4;
	}
	.result {
		margin-top: 15px;
		font-size: 14px;
		color: #e00800;
		background: #e9ecef;
		padding: 8px;
		border-radius: 4px;
		display: none;
	}


	/* Conteneur pour les champs en deux colonnes */
	.form-row-2col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px; /* espace entre les colonnes et les lignes */
		margin-bottom: 15px;
	}

	/* Chaque groupe de champ (label + input) s'adapte à la colonne */
	.form-group {
		margin-bottom: 0; /* on utilise le gap du grid à la place */
	}

	/* Pour les champs qui restent sur une seule colonne (agence, message) */
	.form-group-full {
		margin-bottom: 20px;
	}

	/* Ajustement du textarea et du select pour qu'ils prennent toute la largeur */
	#nom_agence, #message {
		width: 40%;
		box-sizing: border-box;
	}

	/* Conservation des styles existants pour le captcha et le bouton */
	.captcha-container {
		width: 100%;
	}