/*  Préinscription CSS 15/12/2015
Maison de la formation
--------------------- Charte graphique
bleu 42 170 223  gris pale (fond) 235 235 235  orange 239 128 30 
gris foncé 88 88 88 bleu foncé 54 169 225 gris foncé texte 51 51 51
barre de menu noire 79px
police scada
    ---------------------------------------*/      
*{margin:0;padding:0;}
body {font-family:Scada,Helvetica,Arial,Sans-serif;color:rgb(51,51,51);width:100%;background-color:white;} /*rgb(235,235,235);}*/
li {list-style:none;margin:6px 0;font-size:16px;}
input, select {font-size:16px;background-color:rgb(235,235,235);margin-left:5px;}
label {padding-right:5px;}
footer {width:100%;background-color:rgb(88,88,88);height:300px;}
.externe {background-color:rgb(235,235,235);margin-top:-8px;}
.titrebloc {margin:1%;font-size:1.2em;font-weight:900;color:rgb(42,170,233)}
.titreretour {margin:1%;font-size:1.5em;font-weight:900;color:rgb(88,88,88);text-align:center;}
.oblig, .oblig2 {color:red;font-size:1em;margin: 0 10px;}
.oblig2 {margin:10px;}
.larg50 {width:50px;}
.larg150 {width:150px;}
.larg180 {width:180px;}
.champs {display: -webkit-flex;
		display:-webkit-box;-webkit-flex-wrap:wrap;-webkit-flex-direction:row;
		display:-ms-flexbox;-ms-flex-wrap:wrap;-ms-flex-direction:row;
		display:flex;flex-wrap:wrap;flex-direction:row;}
.unchamp {
		display: -webkit-flex;
		-webkit-flex-direction:column;
		display:-ms-flexbox;-ms-flex-direction:column;
		display:flex;flex-direction:column;}
.pied {width:49%;}
.pied p {color:white;font-size:.85em;padding-top:15px;}
.pied h3 {color:white;font-size:1.3em;padding:15px 0 10px 10px;font-weight:500;}
.pied li , .pied li a{color:white;padding:0 0 5px 35px;text-decoration:none;}

#entete, #zone_formulaire, #pieddepage {width:100%;max-width:1300px;padding:0;margin:0 auto;}
#pieddepage{display: -webkit-flex;
		-webkit-flex-wrap:wrap;-webkit-flex-direction:row;
		display:-ms-flexbox;-ms-flex-wrap:wrap;-ms-flex-direction:row;
		display:flex;flex-wrap:wrap;flex-direction:row;padding:15px 0 10px 10px;}

#entete  {height:145px;text-align:center;background-color:white;
	font-family:Scada,Helvetica,Arial,Sans-serif;font-size:1.5em;}   
#entete, #barre, #zone-formulaire {position:relative;}
#contenu_entete {
		display:-webkit-box;-webkit-flex-wrap:nowrap;-webkit-justify-content:space-between;
		display:-ms-flexbox;-ms-flex-wrap:nowrap;-ms-flex-pack:justify;
		display:flex;flex-wrap:nowrap;justify-content:space-between;}
#titrepage  {height:100px;margin-top:1px;text-align:center;font-weight:600;
	font-family:Scada,Helvetica,Arial,Sans-serif;font-size:45px;color:rgb(42,170,223)}
#logo { border: none;}
#logo img {width:130px;}
#logo2 {width:130px;}
#logo2 img {width:134px;}
#barrenav {width:100%;height:45px;background-color:black;color:white;}
#identite, #coordonnees, #representant_legal, #candidature, #envoi_de_fichier, #renseignements, #recap, #retour_formulaire 
	{background-color:white;border-radius:6px;border:1px solid rgb(51,51,51);}
#identite label {display:block;float:left;width:240px;margin-left:40px;text-align:right;}
#coordonnees label {display:block;float:left;width:245px;margin-left:40px;text-align:right;}
#representant_legal label {display:block;float:left;width:240px;margin-left:40px;text-align:right;}
#candidature label {display:block;float:left;width:245px;margin-left:40px;}
/* Couleur bleue pour les valeurs des champs liés à la candidature SMA 25.11.25 */
#candidature .annee-radio-group label,
#candidature .site-radio-group label,
#candidature .prepa-radio-group label {
    color: rgb(42,170,233);  /* même bleu que la charte */}
#renseignements li {margin-left:30px;}
#renseignements label {display:block;float:left;width:550px;}
#recap p+p {margin-left:30px;margin-top:10px;line-height:20px}
#effacer, #validation {font-size:1.2em;background-color:rgb(42,170,233);height:60px;width:150px;
	margin:5px 140px;color:white;border:outset 3px rgb(54,169,225);  border-radius:15px;box-shadow: 4px 4px 0px rgb(51,51,51); }
#imgsecure{margin-left:400px;}
#labsecurite, #connucomment, #labelconnu  {margin-left:30px;}
#mentions_legales a {text-decoration:none;color:white;font-size:1.2em;font-weight:800;margin-top: 2%;}
#resultat {text-align:center;font-size:1.5em;color:white;padding-top:5px;}

#logo-uimm { width: 100px;  }


/* =========================
   MAQUETTE 2025 - MISE À JOUR VISUELLE
   ========================= */

/* Couleurs de base */
:root {
	--bleu-fonce: #005677; /* R0 V86 B119 */
	--bleu-clair: #0DA3DD; /* R13 V163 B221 */
	--gris-section: #F2F2F2; /* R242 V242 B242 */
	--gris-champ: #E0E0E0;   /* R224 V224 B224 */
}

/* Fond général en dégradé vertical */
body {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	color: var(--bleu-fonce);
	background: linear-gradient(to bottom, var(--bleu-fonce) 0%, var(--bleu-clair) 100%);
}

/* En-tête */
#entete {
	background: transparent;
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
}

/* Conteneurs de section */
section {
	background-color: var(--gris-section);
	border-radius: 20px;
	padding: 25px 25px 20px 25px;
	margin-bottom: 30px;
}

/* Titres de sections */
.titrebloc {
	background: linear-gradient(to right, var(--bleu-fonce) 0%, var(--bleu-clair) 100%);
	color: #FFFFFF;
	padding: 10px 20px;
	border-radius: 20px 20px 0 0;
	margin: -25px -25px 20px -25px;
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
}

/* Titres principaux / questions */
#titrepage,
label {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: var(--bleu-clair);
}

/* Libellés des petites mentions, pied de page, etc. */
.pied p,
.pied li,
.pied li a {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
}

/* Champs de saisie */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
select,
textarea {
	background-color: var(--gris-champ);
	border: 1px solid var(--bleu-clair);
	border-radius: 12px;
	padding: 6px 10px;
	color: var(--bleu-fonce);
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
}

input::placeholder,
textarea::placeholder {
	color: var(--bleu-fonce);
	opacity: 0.7;
}

/* Bouton principal */
#validation {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: var(--bleu-clair);
	color: #FFFFFF;
	border-radius: 999px;
	border: none;
	box-shadow: none;
	width: 220px;
	height: 60px;
	margin: 20px auto;
	display: block;
	font-size: 1.3em;
	cursor: pointer;
}

/* Survol bouton */
#validation:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}

/* Zone "Divers" radio + champ texte */
#connucomment li {
	margin: 4px 0;
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	color: var(--bleu-fonce);
}

/* Ajustement du label du bloc "Divers" */
#labelconnu {
	color: var(--bleu-clair);
	font-weight: bold;
}



/* ===== Overrides header + nav ===== */
#titrepage {
	color: #FFFFFF;
}

#barre,
#barrenav {
	display: none;
}



/* ===== Ajustements complémentaires (Titre + footer) ===== */
#contenu_entete {
	justify-content: flex-start;
}

#titrepage {
	font-size: 38px; /* légèrement plus petit que la valeur d'origine */
	text-align: center;
	margin: 0 auto;
}

footer,
#pieddepage {
	display: none;
}



/* ===== Ajustements 2025-UI ===== */

/* Logo un peu plus petit (20% de moins) */
#logo img {
	width: 104px; /* 130px - 20% */
	height: auto;
}

/* Alignement vertical du titre et du logo dans l'en-tête */
#contenu_entete {
	align-items: center;
}

/* Le titre principal peut rester centré, avec une marge nulle en haut */
#titrepage {
	margin-top: 0;
}

/* Titres de sections sans gras */
.titrebloc {
	font-weight: normal;
}



/* ===== Fond dégradé horizontal 50/50 (bleu foncé / bleu clair) ===== */
body {
	background: linear-gradient(90deg,
		var(--bleu-fonce) 0%,
		var(--bleu-fonce) 50%,
		var(--bleu-clair) 50%,
		var(--bleu-clair) 100%);
}



/* ===== Ajustements supplémentaires (dégradé entête + titres sections + courbure) ===== */

/* Appliquer le même dégradé horizontal sur l'entête */
#entete {
	background: linear-gradient(90deg,
		var(--bleu-fonce) 0%,
		var(--bleu-fonce) 50%,
		var(--bleu-clair) 50%,
		var(--bleu-clair) 100%);
}

/* Titres de sections : taille augmentée + flèche à droite, sans gras */
.titrebloc {
	font-size: 1.5em;
	font-weight: normal;
	position: relative;
}

.titrebloc::after {
	content: "›";
	color: #FFFFFF;
	float: right;
	font-size: 1.2em;
}

/* Harmoniser la courbure des sections avec les blocs titres */
#identite,
#coordonnees,
#representant_legal,
#candidature,
#envoi_de_fichier,
#recap,
#retour_formulaire {
	border-radius: 20px;
	overflow: hidden;
}



/* ===== Ajustements sections (ombre légère + suppression bordure + flèche espacée) ===== */

/* Enlever le trait d'entourage et ajouter un ombrage léger */
#identite,
#coordonnees,
#representant_legal,
#candidature,
#envoi_de_fichier,
#recap,
#retour_formulaire {
	border: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Laisser de l'espace pour la flèche (environ 5 caractères) */
.titrebloc {
	padding-right: 3em;
}

/* Positionner la flèche à une distance constante du bord droit */
.titrebloc::after {
	position: absolute;
	right: 1em;
	float: none;
}



/* ===== BLOC DE SURCHARGE 2025 - FOND, ENTÊTE, SECTIONS, TITRES ===== */

/* Fond global dégradé horizontal 50/50 */
body {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	color: var(--bleu-fonce);
	background: linear-gradient(
		90deg,
		var(--bleu-fonce) 0%,
		var(--bleu-fonce) 50%,
		var(--bleu-clair) 50%,
		var(--bleu-clair) 100%
	);
}

/* Entête avec le même dégradé */
#entete {
	background: linear-gradient(
		90deg,
		var(--bleu-fonce) 0%,
		var(--bleu-fonce) 50%,
		var(--bleu-clair) 50%,
		var(--bleu-clair) 100%
	);
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
}

/* Alignement logo + titre dans l'entête */
#contenu_entete {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#logo img {
	width: 104px; /* 20% plus petit que 130px */
	height: auto;
}

#titrepage {
	font-size: 38px;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}

/* Sections : fond, courbure, ombrage léger, sans bordure */
#identite,
#coordonnees,
#representant_legal,
#candidature,
#envoi_de_fichier,
#recap,
#retour_formulaire {
	background-color: #F2F2F2;     /* gris clair */
	border-radius: 20px;
	border: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	overflow: hidden;
}

/* Titres de sections */
.titrebloc {
	background: linear-gradient(to right, var(--bleu-fonce), var(--bleu-clair));
	color: #FFFFFF;
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	font-weight: normal;      /* sans gras */
	font-size: 1.5em;         /* taille augmentée */
	padding: 10px 20px;
	border-radius: 20px 20px 0 0;
	margin: -25px -25px 20px -25px;
	position: relative;
	padding-right: 3em;       /* espace pour la flèche (~5 caractères) */
}

/* Flèche simple vers la droite, espacée du texte */
.titrebloc::after {
	content: "›";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
	color: #FFFFFF;
}


/* ===== Surcharges maquette – bandeau, fond, labels ===== */

/* 1. Fond du corps : dégradé VERTICAL bleu foncé -> bleu clair
   (et plus le bandeau 2 couleurs en bas) */
body {
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	color: #005677; /* bleu foncé */
	background: linear-gradient(
		to bottom,
		#005677 0%,
		#0DA3DD 100%
	);
}

/* 2. Bandeau haut (logo + titre) d’une seule couleur : bleu foncé */
#entete {
	background: #005677;
}

/* 3. Alignement logo + titre dans l’entête */
#contenu_entete {
	display: flex;
	justify-content: flex-start;   /* logo aligné à gauche */
	align-items: center;           /* centrage vertical */
}

#logo img {
	width: 104px;                  /* version réduite du logo */
	height: auto;
}

#titrepage {
	font-size: 38px;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}

/* 4. Sections (Identité, Coordonnées, Représentant légal, Candidature, Divers)
      – fond, arrondis, ombre légère sans bordure */
#identite,
#coordonnees,
#representant_legal,
#candidature,
#envoi_de_fichier,
#recap,
#retour_formulaire {
	background-color: #F2F2F2;           /* gris clair sections */
	border-radius: 20px;
	border: none;                        /* on supprime le trait */
	box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* ombre douce */
	overflow: hidden;
}

/* 5. Titres de sections : bandeau bleu, flèche, taille augmentée */
.titrebloc {
	background: linear-gradient(to right, #005677, #0DA3DD);
	color: #FFFFFF;
	font-family: "Arial Nova", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.5em;              /* +1 taille environ */
	padding: 10px 20px;
	border-radius: 20px 20px 0 0;
	margin: -25px -25px 20px -25px;
	position: relative;
	padding-right: 3em;            /* espace pour la flèche (~5 caractères) */
}

.titrebloc::after {
	content: "›";
	position: absolute;
	right: 1em;                    /* flèche à droite, espacée du texte */
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
	color: #FFFFFF;
}

/* 6. Labels au-dessus des champs (comme la maquette) */
#identite label,
#coordonnees label,
#representant_legal label,
#candidature label,
#recap label {
	display: block;
	float: none;
	width: auto;
	text-align: left;
	margin: 0 0 4px 0;
	padding-right: 0;
}

/* On enlève le décalage à gauche des champs dans ces blocs */
#identite input,
#identite select,
#coordonnees input,
#coordonnees select,
#representant_legal input,
#representant_legal select,
#candidature input,
#candidature select,
#recap input,
#recap select {
	margin-left: 0;
}



/* Groupes de boutons radio en ligne dans la section Candidature */
#candidature .radio-inline-group {
	display: inline-block;
	margin-left: 10px;
}

#candidature .radio-inline-group label {
	font-weight: normal;
	margin-right: 12px;
	margin-left: 0.4em;
	display: inline-block;
}

#candidature .radio-inline-group input[type="radio"] {
	margin-left: 10px;
}

/* Mise en évidence de l'option sélectionnée dans les groupes radio
   (année, site, préparation de diplôme) */
#candidature .radio-inline-group input[type="radio"] + label {
	border: 1px solid var(--bleu-clair);
	border-radius: 20px;
	padding: 3px 10px;
}

#candidature .radio-inline-group input[type="radio"]:checked + label {
	border-color: var(--bleu-fonce);
	background-color: var(--bleu-clair);
	color: #ffffff;
}

/* Champ "Lequel ?" affiché sur la même ligne que les radios (uniquement si OUI) */
#candidature .prepadiplome-detail {
	display: none;
	margin-left: 16px;
	vertical-align: middle;
}

#candidature .prepadiplome-detail label.inline-label {
	display: inline-block;
	font-weight: normal;
	margin: 0 8px 0 0;
	white-space: nowrap;
}

#candidature .prepadiplome-detail input {
	display: inline-block;
	margin-left: 0;
}



#identite ul.champs li {
    margin-right: 160px;
}
#identite ul.champs li:last-child {
    margin-right: 0;
}


/* --------- Mise en forme spécifique du bloc Identité --------- */
#identite ul.champs {
	flex-wrap: nowrap; /* tous les champs d'une ligne restent côte à côte */
}

#identite ul.champs > li {
	margin-right: 5ch; /* écartement horizontal de 5 caractères entre les champs */
}

#identite ul.champs > li:last-child {
	margin-right: 0;
}

/* Libellés alignés à gauche et sur une seule ligne */
#identite label {
	margin-left: 0 !important;
	width: auto !important;
	text-align: left;
	white-space: nowrap; /* évite le retour à la ligne sur 'Lieu de naissance' */
}

/* Champs sans décalage supplémentaire */
#identite input,
#identite select {
	margin-left: 0;
}

/* Largeur adaptée au format JJ/MM/AAAA pour la date de naissance */
#identite #datenais {
	width: 10ch;
}

/* Largeur du champ prénom à 20 caractères */
#identite #prenom {
	width: 20ch;
}


/* ------------------------------------------
   Coordonnées : présentation en colonnes
   ------------------------------------------ */

#coordonnees ul.coord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    margin-left: 40px;
    margin-right: 40px;
    list-style-type: none;
    padding-left: 0;
}

#coordonnees ul.coord-grid > li.champ {
	display:flex;
	flex-direction:column;
	flex:1 1 260px;
}

/* On casse l'ancien flottement des labels uniquement dans la grille coordonnées */
#coordonnees ul.coord-grid label {
	margin-left:0;
	width:auto;
	text-align:left;
	float:none;
	margin-bottom:4px;
}

/* Inputs / selects à 100% de la largeur de leur bloc */
#coordonnees ul.coord-grid input,
#coordonnees ul.coord-grid select {
	width:100%;
	max-width:100%;
}

/* Ordre visuel des champs (l'ordre dans le DOM reste celui de la saisie) */









/* === Ajustement largeur champs Coordonnées en unités 'ch' === */
#adresse { width: 25ch !important; }
#adresse2 { width: 25ch !important; }
#cp { width: 5ch !important; }
#ville { width: 20ch !important; }
#pays { width: 20ch !important; }
#telephone { width: 10ch !important; }
#email { width: 25ch !important; }
#email2 { width: 25ch !important; }

/* === Ajustements demandés (V9) === */
/* Téléphone : 10 caractères en affichage */
#telephone { width: 10ch !important; }
/* Adresse / Adresse (suite) : affichage 25 caractères (saisie conservée) */
#adresse { width: 25ch !important; }
#adresse2 { width: 25ch !important; }

/* === Ajustements largeur champs Coordonnées (IDs réels) === */
#ad1 { width: 25ch !important; }   /* Adresse : affichage 25 */
#ad2 { width: 25ch !important; }   /* Adresse (suite) : affichage 25 */
#cp { width: 5ch !important; }     /* Code postal : affichage 5 */
#ville { width: 20ch !important; } /* Ville : affichage 20 */
#pays { width: 20ch !important; }  /* Pays (select) : affichage 20 */
#tel1 { width: 10ch !important; }  /* Téléphone : affichage 10 */
#email { width: 25ch !important; } /* Email : affichage 25 */
#email2 { width: 25ch !important; }/* Confirmation : affichage 25 */

/* === Mise en grille section Identité (3 colonnes) === */
#identite ul.identite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 40px;
    margin-left: 40px;
    margin-right: 40px;
    list-style-type: none;
    padding-left: 0;
}


/* === Correctif disposition section Identité (consignes: 3 colonnes, 2 lignes) === */
/* Ordre de saisie INCHANGÉ (HTML inchangé), positionnement visuel via grid-placement */
#identite ul.identite-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px 40px;
    margin-left: 40px;
    margin-right: 40px;
    list-style-type: none;
    padding-left: 0;
}
#identite ul.identite-grid > li{
    grid-column: auto !important;
    width: auto;
}

/* Positionnement via sélecteurs structurels */
#identite ul.identite-grid > li:has(#civ), #identite ul.identite-grid > li:has(select[name="civ"]){grid-column:1 !important;grid-row:1 !important;}
#identite ul.identite-grid > li:has(#datenais), #identite ul.identite-grid > li:has(input[name="datenais"]){grid-column:1 !important;grid-row:2 !important;}
#identite ul.identite-grid > li:has(#nom), #identite ul.identite-grid > li:has(input[name="nom"]){grid-column:2 !important;grid-row:1 !important;}
#identite ul.identite-grid > li:has(#lieunais), #identite ul.identite-grid > li:has(input[name="lieunais"]){grid-column:2 !important;grid-row:2 !important;}
#identite ul.identite-grid > li:has(#prenom), #identite ul.identite-grid > li:has(input[name="prenom"]){grid-column:3 !important;grid-row:1 !important;}
#identite ul.identite-grid > li:has(#nationalite), #identite ul.identite-grid > li:has(select[name="nationalite"]){grid-column:3 !important;grid-row:2 !important;}



/* === Identité : disposition en 3 colonnes / 2 lignes (Civilité+Date / Nom+Lieu / Prénom+Nationalité) === */
/* Ordre de saisie conservé (HTML: 1..6) - placement visuel via grid */
#identite ul.identite-grid{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto;
    gap: 20px 40px;
    margin-left: 40px;
    margin-right: 40px;
    list-style-type:none;
    padding-left:0;
}
#identite ul.identite-grid > li{ min-width:0; }

/* Remplir la colonne visuellement (sans toucher aux valeurs/validations) */
#identite ul.identite-grid input,
#identite ul.identite-grid select{
    width:100%;
    box-sizing:border-box;
}

/* Placement demandé */
#identite ul.identite-grid > li:nth-child(1){ grid-column:1; grid-row:1; } /* Civilité */
#identite ul.identite-grid > li:nth-child(2){ grid-column:2; grid-row:1; } /* Nom */
#identite ul.identite-grid > li:nth-child(3){ grid-column:3; grid-row:1; } /* Prénom */
#identite ul.identite-grid > li:nth-child(4){ grid-column:1; grid-row:2; } /* Date de naissance */
#identite ul.identite-grid > li:nth-child(5){ grid-column:2; grid-row:2; } /* Lieu de naissance */
#identite ul.identite-grid > li:nth-child(6){ grid-column:3; grid-row:2; } /* Nationalité */



/* === Ajustements longueurs Identité === */

#identite input[name="nom"] { width: 20ch !important; }
#identite input[name="prenom"] { width: 20ch !important; }



/* === Ajustements longueurs Identité (V5_260223.6) === */
/* Date de naissance : retour valeurs précédentes (JJ/MM/AAAA) */


/* Civilité : affichage 8 caractères (select) */
/* Nom : affichage 25 caractères */
#identite input[name="nom"] { width: 25ch !important; }

/* Lieu de naissance : affichage 25 caractères */
#identite input[name="lieunais"] { width: 25ch !important; }

/* Nationalité : affichage 22 caractères (select) */
#identite select[name="nationalite"] { width: 22ch !important; }



/* Nom : affichage réel 25 caractères (même en MAJUSCULES) */
#identite input[name="nom"] {
    width: 25ch !important;
    max-width: 25ch !important;
}

/* Nationalité : affichage 25 caractères */
#identite select[name="nationalite"] {
    width: 25ch !important;
    max-width: 25ch !important;
}



/* Nationalité : +4 caractères (29ch) */
#identite select[name="nationalite"] {
    width: 29ch !important;
    max-width: 29ch !important;
}


/* === Civilité : règle unique, propre et stable (10 caractères max) === */


/* === Civilité largeur fixe définitive === */


/* === Ajustement +3 caractères en pixels === */

/* Civilité : 95px + 36px */


/* Date de naissance : ~156px + 36px = 192px */


/* === Ajustement largeur fixe 115px === */


/* === Ajustement largeur fixe 110px === */

#identite select#civilite{
    width: 110px !important;
    max-width: 110px !important;
    box-sizing: border-box;
}

#identite input[name="datenais"]{
    width: 110px !important;
    max-width: 110px !important;
    box-sizing: border-box;
}