/*
____________________________________________________________
margin: Haut Droite Bas Gauche ;  // Marge exterieur
padding: Haut Droite Bas Gauche ; // Marge interieur
border-radius: HautGauche HautDroite BasDroite BasGauche ; => Courbure des angles
border: solid hsla(80, 90%, 40%, 0.5) ; 
____________________________________________________________

"#" 					: pour les id
"." 					: pour les classes
"" 						: pour les balises
* 						: sélecteur universel
A, B 					: s'applique aux balise A et B
A B 					: s'applique à la balise B contenue dans la balise A
A + B 					: s'applique à la balise B qui en suit après une balise A
A[attribut] 			: s'applique à la balise A qui possède un attribut
A[attribut="Valeur"] 	: s'applique à la balise A un attribut et une valeur exacte
A[attribut*="Y"] 		: s'applique à la balise A, un attribut et ça valeur comporte Y

____________________________________________________________
Rouge	: rgba(206, 17, 38, 1)	/ rgba(218, 41, 28, 1)
Vert	: rgba(61, 142, 51, 1)	/ rgba(4, 106, 56, 1)
Jaune	: rgba(252, 216, 86, 1)	/ rgba(255, 233, 0, 1)
Bleu	: rgba(0, 114, 198, 1)	/ rgba(0, 45, 114, 1)
____________________________________________________________

*/

.formulaire { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 500px; }
        
.formulaire .titre { color: var(--color-blue); font-size: 2rem; text-align: center; margin-top: 0; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.formulaire .section-title { font-size: 1rem; color: var(--color-green); text-align: left; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 0; font-weight: bold; }
.formulaire hr { 
	background-color: var(--color-yellow) ;
	height: 2px ;
	border: none ;
	width: 100% ;
	margin: 1em auto ;
 }

/* Gille à 2 colonnes */
.formulaire .grid-fields-2colum { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* Zone label + saisie */
.formulaire .field { margin-bottom: 12px; }

/* Noms du champs */
.formulaire label { display: block; font-weight: 600; text-align: left; color: #34495e; margin-bottom: 5px; font-size: 0.85rem; }
.formulaire label.required::after { content: " *"; color: #e74c3c; }

/* Description du champs */
.formulaire description { display: block; text-align: right; font-style: italic; font-weight: 600; color: #34495e; margin-bottom: 5px; font-size: 0.85rem; }

/* zonr de saisie */
.formulaire input { 
    width: 100%; padding: 10px; border: 2px solid #dfe6e9; border-radius: 6px; 
    box-sizing: border-box; font-size: 1rem; outline: none;
}
/* Zone de saisie selectionnée */
.formulaire input:focus { border-color: #3498db; }
/* Zone de saisie en lecture seul */
.formulaire input[readonly] { background-color: #f1f2f6; color: #2980b9; font-weight: bold; border-style: dashed; }

/*.formulaire .button-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }*/

/* Bouton */
.formulaire button { 
    padding: 15px 10px; color: white; border: none; border-radius: 8px; 
    cursor: pointer; font-size: 0.85rem; font-weight: bold; text-transform: uppercase;
}
/* Survole du bouton */
.formulaire button:hover { opacity: 0.8; transform: translateY(-1px) translateX(-1px); }

/* Bouton spécifique */
.formulaire .btn-total { background-color: #27ae60; }
.formulaire .btn-seg { background-color: #e67e22; }

/* Zone de résultat */
.formulaire .results { margin-top: 25px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
/* Zone avec information du résultat principale */
.formulaire .res-main { background: #2c3e50; color: #f1c40f; padding: 15px; text-align: center; }
/* Ligne titre de la zone de l'informtion principale */
.formulaire .res-main small { color: #bdc3c7; display: block; font-size: 0.7rem; margin-bottom: 5px; text-transform: uppercase; }
/* Ligne comportant le résultat principal */
.formulaire .res-main span { font-family: monospace; font-size: 2rem; font-weight: bold; }

.formulaire .res-sub { background: #ecf0f1; padding: 15px; font-size: 0.9rem; color: #57606f; border: 1px solid #dfe6e9; line-height: 1.8; }
.formulaire .res-sub b { color: #2c3e50; float: right; }
.formulaire .line { text-align: left; border-bottom: 1px solid #dcdde1; padding: 4px 0; clear: both; }
/*.formulaire .line:last-child { border-bottom: none; font-weight: bold; color: #2c3e50; }*/
.formulaire .highlight-blue { color: var(--color-blue) !important; }
.formulaire .highlight-red { color: var(--color-red) !important; }
.formulaire .highlight-green { color: var(--color-green) !important; }