/********************************
*
*	Charte graphique ASTRE
*
*	Couleurs issues du logo (logo_astre.svg) et de la page d'accueil.
*	Police Marianne (police de l'État), déjà utilisée par devenir-reserviste/.
*
*	Les composants sont préfixés "ch_".
*
*********************************/

@font-face {
	font-family: 'Marianne';
	src: url("../../devenir-reserviste/font/Marianne-Regular.woff2") format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Marianne';
	src: url("../../devenir-reserviste/font/Marianne-Medium.woff2") format('woff2');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Marianne';
	src: url("../../devenir-reserviste/font/Marianne-Bold.woff2") format('woff2');
	font-weight: 700;
	font-display: swap;
}

/********************************
*
*	Variables
*
*********************************/
:root {
	/* Couleurs de marque */
	--ch-marine:		#01172f;		/* Fond de la page d'accueil */
	--ch-bleu:			#005ca9;		/* Bleu du logo : actions principales, liens */
	--ch-bleu-fonce:	#004a88;		/* Survol des actions principales */
	--ch-rouge:			#e30613;		/* Rouge du logo : erreurs, alertes */
	--ch-gris-logo:		#485156;		/* Gris du logo */

	/* Neutres */
	--ch-texte:			#1e2a36;
	--ch-texte-doux:	#5b6773;
	--ch-bordure:		#c9d1d9;
	--ch-fond:			#f2f4f7;
	--ch-surface:		#ffffff;

	/* États */
	--ch-vert:			#18753c;		/* Succès, dossier abouti */
	--ch-vert-fond:		#e6f4ea;
	--ch-bleu-fond:		#e8f0f8;
	--ch-orange:		#9a4d00;		/* Dossier en cours de traitement */
	--ch-orange-fond:	#fff0db;
	--ch-gris-fond:		#eceff2;
	--ch-erreur-fond:	#fdecee;
	--ch-focus:			0 0 0 3px rgba(0, 92, 169, 0.25);

	/* Typographie */
	--ch-police:		'Marianne', Arial, Helvetica, sans-serif;
	--ch-taille:		15px;

	/* Formes */
	--ch-rayon:			6px;
	--ch-ombre:			0 10px 30px rgba(1, 23, 47, 0.35);
}

/********************************
*
*	Composants
*
*********************************/

/* L'attribut hidden l'emporte sur le display des composants (ch_bouton...) */
[hidden] {
	display: none !important;
}

/* Champ de formulaire : <div class="ch_champ"><label>…</label><input>…</div> */
.ch_champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.ch_champ label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ch-texte);
}

.ch_champ input {
	font-family: var(--ch-police);
	font-size: var(--ch-taille);
	color: var(--ch-texte);
	background-color: var(--ch-surface);
	border: 1px solid var(--ch-bordure);
	border-radius: var(--ch-rayon);
	padding: 10px 12px;
	transition: border-color 150ms, box-shadow 150ms;
}

.ch_champ input:focus {
	outline: none;
	border-color: var(--ch-bleu);
	box-shadow: var(--ch-focus);
}

/* Listes déroulantes et zones de texte : dans un ch_champ ou avec la classe ch_saisie */
.ch_champ select,
.ch_champ textarea,
.ch_saisie {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ch-police);
	font-size: 14px;
	color: var(--ch-texte);
	background-color: var(--ch-surface);
	border: 1px solid var(--ch-bordure);
	border-radius: var(--ch-rayon);
	padding: 8px 10px;
	transition: border-color 150ms, box-shadow 150ms;
}

.ch_champ textarea {
	resize: vertical;
	line-height: 1.5;
}

.ch_champ select:focus,
.ch_champ textarea:focus,
.ch_saisie:focus {
	outline: none;
	border-color: var(--ch-bleu);
	box-shadow: var(--ch-focus);
}

/* Bouton principal (utilisable sur <input>, <button> ou <a>) */
.ch_bouton {
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	font-family: var(--ch-police);
	font-size: var(--ch-taille);
	font-weight: 700;
	color: #fff;
	background-color: var(--ch-bleu);
	border: none;
	border-radius: var(--ch-rayon);
	padding: 12px 20px;
	cursor: pointer;
	transition: background-color 150ms;
}

.ch_bouton:hover {
	background-color: var(--ch-bleu-fonce);
}

.ch_bouton:focus-visible {
	outline: none;
	box-shadow: var(--ch-focus);
}

/* Variante contour blanc, pour les fonds sombres (à combiner avec ch_bouton) */
.ch_bouton.ch_contour {
	color: #fff;
	background-color: transparent;
	box-shadow: inset 0 0 0 2px #fff;
}

.ch_bouton.ch_contour:hover {
	color: var(--ch-marine);
	background-color: #fff;
}

.ch_bouton.ch_contour:focus-visible {
	box-shadow: inset 0 0 0 2px #fff, var(--ch-focus);
}

/* Variante secondaire, pour les fonds clairs (à combiner avec ch_bouton) */
.ch_bouton.ch_secondaire {
	color: var(--ch-bleu);
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--ch-bleu);
}

.ch_bouton.ch_secondaire:hover {
	background-color: var(--ch-bleu-fond);
}

.ch_bouton.ch_secondaire:focus-visible {
	box-shadow: inset 0 0 0 1px var(--ch-bleu), var(--ch-focus);
}

/* Petit bouton (à combiner avec ch_bouton) */
.ch_bouton.ch_petit {
	font-size: 13px;
	padding: 7px 12px;
}

/********************************
*
*	Pages de l'application (backoffice)
*	<body class="ch_appli"> + includes/entete.php + <main class="ch_contenu">
*
*********************************/
.ch_appli {
	margin: 0;
	font-family: var(--ch-police);
	font-size: var(--ch-taille);
	line-height: 1.5;
	color: var(--ch-texte);
	background-color: var(--ch-fond);
}

/* En-tête */
.ch_entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 12px 24px;
	background-color: var(--ch-surface);
	border-bottom: 1px solid var(--ch-bordure);
	box-shadow: 0 1px 3px rgba(1, 23, 47, 0.06);
}

.ch_entete_marque {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ch-texte);
}

.ch_entete_marque img {
	height: 44px;
	width: auto;
}

.ch_entete_marque span {
	font-weight: 700;
	padding-left: 14px;
	border-left: 1px solid var(--ch-bordure);
}

.ch_entete_nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.ch_entete_nav > a:not(.ch_bouton) {
	color: var(--ch-texte);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}

.ch_entete_nav > a:not(.ch_bouton):hover {
	color: var(--ch-bleu);
	text-decoration: underline;
}

.ch_entete_nav form {
	display: inline;
	margin: 0;
}

.ch_agent {
	font-size: 13px;
	color: var(--ch-texte-doux);
	text-align: right;
	line-height: 1.3;
}

.ch_agent strong {
	display: block;
	color: var(--ch-texte);
	font-size: 14px;
}

/* Zone admin : actions sensibles, en rouge */
.ch_admin {
	display: flex;
	gap: 8px;
	padding-left: 18px;
	border-left: 1px solid var(--ch-bordure);
}

.ch_admin .ch_bouton.ch_secondaire {
	color: var(--ch-rouge);
	box-shadow: inset 0 0 0 1px var(--ch-rouge);
}

.ch_admin .ch_bouton.ch_secondaire:hover {
	background-color: var(--ch-erreur-fond);
}

/* Contenu */
.ch_contenu {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 24px 48px;
}

.ch_titre_page {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-bottom: 20px;
}

.ch_titre_page h1 {
	font-size: 24px;
	margin: 0;
}

.ch_titre_page p {
	margin: 0;
	color: var(--ch-texte-doux);
}

/* Bloc blanc */
.ch_panneau {
	background-color: var(--ch-surface);
	border: 1px solid var(--ch-bordure);
	border-radius: 10px;
	overflow-x: auto;			/* Défilement horizontal si un tableau dépasse la largeur de la fenêtre */
}

/* Bloc blanc avec titre et contenu : <section class="ch_panneau"><h2 class="ch_panneau_titre">…</h2><div class="ch_panneau_corps">…</div></section> */
.ch_panneau + .ch_panneau {
	margin-top: 20px;
}

.ch_panneau_titre {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ch-texte-doux);
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid var(--ch-bordure);
	background-color: var(--ch-fond);
	border-radius: 10px 10px 0 0;
}

.ch_panneau_corps {
	padding: 18px 20px;
}

/* Liste d'informations libellé / valeur : <dl class="ch_infos"><dt>…</dt><dd>…</dd></dl> */
.ch_infos {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 10px 16px;
	margin: 0;
}

.ch_infos dt {
	font-size: 13px;
	color: var(--ch-texte-doux);
}

.ch_infos dd {
	margin: 0;
}

.ch_infos ul {
	margin: 0;
	padding-left: 18px;
}

/* Lien de retour */
.ch_retour {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--ch-bleu);
	text-decoration: none;
}

.ch_retour:hover {
	text-decoration: underline;
}

/* Animation de chargement (affichée par JS : style.display = "block") */
.ch_chargement {
	position: fixed;
	top: calc(50% - 24px);
	left: calc(50% - 24px);
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 5px solid var(--ch-bleu-fond);
	border-top-color: var(--ch-bleu);
	border-radius: 50%;
	animation: ch_rotation 0.8s linear infinite;
	z-index: 2000;
}

@keyframes ch_rotation {
	to {
		transform: rotate(360deg);
	}
}

/* Tableau */
.ch_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ch_table th {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ch-texte-doux);
	background-color: var(--ch-fond);
	padding: 10px 14px;
	border-bottom: 1px solid var(--ch-bordure);
	white-space: nowrap;
}

/* Icône email : <span class="ch_icone_mail"></span> (couleur = couleur du texte) */
.ch_icone_mail {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	background-color: currentColor;
	mask-image: url(icons/mail.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

.ch_table td .ch_icone_mail {
	color: var(--ch-rouge);
}

/* Colonne étroite centrée (icône) */
.ch_table .ch_centre {
	width: 1%;
	text-align: center;
}

/* Colonne qui porte le tri (flèche ↑ croissant / ↓ décroissant dans le titre) */
.ch_table th.ch_tri {
	color: var(--ch-bleu);
}

.ch_table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--ch-gris-fond);
	vertical-align: middle;
}

.ch_table tbody tr:last-child td {
	border-bottom: none;
}

.ch_table tbody tr:hover {
	background-color: var(--ch-bleu-fond);
}

.ch_table a {
	color: var(--ch-bleu);
	font-weight: 700;
	text-decoration: none;
}

.ch_table a:hover {
	text-decoration: underline;
}

.ch_table .ch_nombre {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ch_vide {
	padding: 40px 16px;
	text-align: center;
	color: var(--ch-texte-doux);
}

/* Pastille d'état : ch_badge + ch_recu | ch_en_cours | ch_succes | ch_clos */
.ch_badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.ch_badge.ch_recu {
	color: var(--ch-bleu);
	background-color: var(--ch-bleu-fond);
}

.ch_badge.ch_en_cours {
	color: var(--ch-orange);
	background-color: var(--ch-orange-fond);
}

.ch_badge.ch_succes {
	color: var(--ch-vert);
	background-color: var(--ch-vert-fond);
}

.ch_badge.ch_clos {
	color: var(--ch-texte-doux);
	background-color: var(--ch-gris-fond);
}

/* Écran sombre centré avec une carte blanche (connexion, messages) :
   <body class="ch_ecran"><div class="ch_carte">…</div></body> */
.ch_ecran {
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ch-police);
	font-size: var(--ch-taille);
	color: var(--ch-texte);
	background-color: var(--ch-marine);
}

.ch_carte {
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	padding: 36px 32px 32px;
	text-align: center;
	background-color: var(--ch-surface);
	border-radius: 10px;
	box-shadow: var(--ch-ombre);
	border-top: 4px solid var(--ch-bleu);
}

.ch_carte .ch_logo {
	display: block;
	width: 140px;
	height: auto;
	margin: 0 auto 20px;
}

.ch_carte h1 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}

.ch_carte p {
	color: var(--ch-texte-doux);
	margin: 0 0 28px;
}

.ch_carte form,
.ch_carte .ch_erreur {
	text-align: left;
}

/* Bouton sur toute la largeur de son conteneur (à combiner avec ch_bouton) */
.ch_bouton.ch_pleine_largeur {
	width: 100%;
	margin-top: 6px;
}

/* Lien secondaire discret (sous un formulaire par exemple) */
.ch_lien_discret {
	display: inline-block;
	margin-top: 20px;
	font-size: 14px;
	color: var(--ch-texte-doux);
}

.ch_lien_discret:hover {
	color: var(--ch-bleu);
}

/* Message d'information */
.ch_info {
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	color: var(--ch-texte);
	background-color: var(--ch-bleu-fond);
	border-left: 4px solid var(--ch-bleu);
	border-radius: var(--ch-rayon);
	padding: 12px 14px;
	margin-bottom: 18px;
}

/* Message d'erreur */
.ch_erreur {
	font-size: 14px;
	color: var(--ch-rouge);
	background-color: var(--ch-erreur-fond);
	border-left: 4px solid var(--ch-rouge);
	border-radius: var(--ch-rayon);
	padding: 10px 12px;
	margin-bottom: 18px;
}