@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--color-bg: #EEF1F7;
	--color-surface: #FFFFFF;
	--color-border: #E3E8F0;
	--color-text: #1F2937;
	--color-text-muted: #6B7280;
	--color-primary: #1E3A5F;
	--color-primary-dark: #14283F;
	--color-danger: #DC2626;
	--color-danger-light: #FEE2E2;
	--color-success: #16A34A;
	--color-add: #0F9D6B;
	--color-highlight: #1E3A5F; /* bulle du responsable connecté : couleur d'identité de l'app, pas l'orange qui signifie « exonéré » dans le tableau */
	--color-primary-tint: #E9EDF4;
	--shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.08);
	--shadow-md: 0 6px 20px rgba(30, 58, 95, 0.10);
	--shadow-lg: 0 16px 40px rgba(30, 58, 95, 0.14);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 24px 12px;
	font-family: 'Inter', Calibri, sans-serif;
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.5;
}

.div_select_acces{
	width:100%;
	border-radius:10px;
	margin:auto auto auto auto;
	padding:auto auto auto auto;
	background-color:var(--color-surface);
	box-sizing:border-box;
}

.div_conteneur_page{
	width: min(1000px, 96vw);
	border-radius:18px;
	margin:auto;
	padding:0px 30px 30px 30px;
	background-color:var(--color-surface);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
    display:flex; /* Utiliser flexbox */
    flex-direction:column;
}

/* Pages avec barre d'onglets fixe en bas d'écran (voir .nav-onglets) : espace
   réservé en bas de la carte pour que le dernier contenu (tableau, boutons) ne se
   retrouve pas caché derrière la barre flottante. */
.div_conteneur_page--avec-onglets {
	padding-bottom: 110px;
}

/* Écrans de connexion : carte étroite centrée, au lieu du cadre large des pages de données
   qui laissait les champs isolés à gauche. */
.div_conteneur_page.page_connexion {
	width: min(440px, 94vw);
	padding: 0 24px 28px 24px;
	margin-top: 6vh;
}

.page_connexion .div_form {
	padding: 20px;
}

.page_connexion .form_cot {
	padding: 16px;
}

/* Les champs occupent toute la largeur de la carte : plus de vide à leur droite. */
.page_connexion .form_cot input[type=text],
.page_connexion .form_cot input[type=password] {
	width: 100%;
	box-sizing: border-box;
}

.page_connexion .form_cot label {
	display: block;
	margin-bottom: 4px;
}

/* Le label étant passé en block, le <br/> qui le suit dans le HTML ajoutait une ligne
   vide : le label se retrouvait plus proche du champ précédent que du sien. */
.page_connexion .form_cot label + br {
	display: none;
}

/* Boutons Retour / Valider côte à côte. La largeur laisse de la marge pour l'espace
   inter-éléments inline, sinon la paire déborde et le second bouton passe à la ligne. */
.page_connexion .form_cot button,
.page_connexion .form_cot input[type=submit] {
	width: calc(50% - 12px);
	min-width: 0;
	margin: 0 !important;
}

.page_connexion .form_cot button {
	margin-right: 10px !important;
}

/* Écran de choix du type d'accès : boutons empilés pleine largeur, plus lisibles
   que côte à côte dans une carte étroite. */
.page_connexion .div_select_acces button {
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
}

/* Lien vers la page de connexion appropriée quand un compte responsable/dirigeant se
   trompe d'espace (acces_resp.php / acces_resp_dir.php). Pas d'effet animé (toute
   animation testée posait un problème : flou en scale, déformation de la page en
   font-size) : comme du texte normal, souligné seulement au survol (comportement
   par défaut des liens de l'appli — voir a/a:hover plus bas, rien à ajouter ici). */
.lien-basculer-acces a {
	font-weight: 700;
}

/* Page "Modifier mot de passe" : formulaire simple à 3 champs, étroit et centré
   plutôt que d'utiliser toute la largeur pensée pour les formulaires à colonnes
   (cotisants/familles). Reprend le même traitement label/champ que les écrans de
   connexion. */
.page_reglages .div_principale {
	justify-content: center;
}

.page_reglages .div_form {
	width: min(420px, 100%);
}

/* Élargit la carte pour les pages de réglages à deux colonnes côte à côte (ex.
   admin_nombre_personnes_dir.php) : 420px suffit pour un seul champ, mais tasse deux colonnes
   l'une contre l'autre. Règle placée après .page_reglages .div_form ci-dessus : même
   spécificité, doit rester après dans le fichier pour l'emporter (voir CLAUDE.md). */
.page_reglages--large .div_form {
	width: min(760px, 100%);
}

.page_reglages .form_cot label {
	display: block;
	margin-bottom: 4px;
}

.page_reglages .form_cot label + br {
	display: none;
}

.page_reglages .form_cot input[type=password] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 16px;
}

/* Bandeaux de retour (erreur / succès), même principe que les badges : fond clair,
   texte en couleur pleine. */
.form-erreur {
	background-color: var(--color-danger-light);
	color: var(--color-danger);
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px 0;
}

.form-succes {
	background-color: #DCFCE7;
	color: #15803D;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px 0;
}

/* Le lien "Modifier mot de passe" saute directement sur ce formulaire (voir #carte-mdp
   dans user_menu.php) ; scroll-margin-top laisse malgré tout entrevoir le haut du
   panneau des totaux au-dessus, plutôt que de coller le formulaire au bord de l'écran. */
#carte-mdp {
	scroll-margin-top: 140px;
}

/* Flèche "haut" de la barre d'onglets (voir nav_principale.php) : ramène ici plutôt
   qu'au tout début de la page, avec un aperçu du panneau des totaux au-dessus. */
#haut-tableau {
	scroll-margin-top: 160px;
}

.scrolling-text {
	position: relative;
	top:0;
	text-align:center;
	font-size:26px;
	color:var(--color-primary);
    font-weight:800;
	letter-spacing: 6px;
	padding: 22px 0 18px 0;
	white-space: nowrap;
}

.scrolling-text::after {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	margin: 12px auto 0 auto;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--color-primary), #4FC3F7, #2DD4BF);
}

.div_en_tete{
	position: relative;
	width:100%;
	border-radius:14px;
	margin:0 auto auto auto;
	padding:auto auto auto auto;
	background-color:var(--color-surface);
	box-sizing:border-box;
}

.div_totaux {
	/* Épouse la largeur des bulles (largeur du contenu + le padding gauche/droite ci-dessous,
	   toujours le même, contrairement au padding haut/bas qui reste "discret"). Avec les 7
	   groupes de cette association, la rangée de bulles occupe déjà la quasi-totalité de la
	   largeur de la carte : ce padding généreux (30px) fait retomber la largeur du cadre tout
	   près de celle des autres cadres de l'en-tête (titre...) dans ce cas précis, sans avoir
	   besoin d'un cas particulier — et il reste le même quel que soit le nombre de groupes,
	   donc la distance entre les bulles extrêmes et la bordure de la carte ne varie jamais.
	   Ne pas monter au-delà d'environ 35px : au-delà, la rangée des 7 bulles réelles de cette
	   association (~863px) ne tient plus dans la largeur disponible et repasse à la ligne. */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 20px auto;
	padding: 16px 30px 18px 30px;
	border-radius:16px;
	background-color:var(--color-surface);
	border: 2px solid var(--color-border);
	box-shadow: var(--shadow-md);
	display: flex; /* Utilisation de flexbox */
	flex-direction: column;
	align-items: center; /* Alignement vertical au centre */
	box-sizing: border-box;
}

.user-menu {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
}

/* mon_espace_cotisant.php n'inclut pas user_menu.php (pas de menu déroulant, juste un lien
   Déconnexion — voir CLAUDE.md) : sans le padding du bouton .user-menu-toggle des autres pages,
   le texte se retrouvait collé au même top:16px, trop près du bord. */
.user-menu--cotisant {
	top: 24px;
}

.user-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	min-width: 0;
	margin: 0;
	white-space: nowrap;
}

.user-menu-toggle:hover {
	border-color: var(--color-primary);
}

.user-menu-role {
	color: var(--color-text-muted);
	font-weight: 500;
}

.user-menu-caret {
	font-size: 10px;
	color: var(--color-text-muted);
	display: inline-block;
	transition: transform 0.2s ease;
}

.user-menu.open .user-menu-caret {
	transform: rotate(180deg);
}

.user-menu-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	padding: 6px;
	min-width: 190px;
	flex-direction: column;
}

.user-menu.open .user-menu-dropdown {
	display: flex;
}

.user-menu-dropdown a {
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--color-text);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}

.user-menu-dropdown a:hover {
	background: var(--color-bg);
	text-decoration: none;
}

/* Filtre "Statut" dans l'en-tête du tableau (cotisations/cotisations_dir) : même principe que
   .user-menu ci-dessus (case cochée = classe "open" ajoutée en JS, fermeture au clic extérieur). */
.th-filtre {
	position: relative;
	white-space: nowrap; /* garde "Statut" et la flèche sur la même ligne, sans quoi le libellé passe au-dessus */
}

.th-filtre-toggle {
	/* Neutralise la règle générique button { min-width:90px; padding:8px 18px; ... } (voir
	   CLAUDE.md) qui sans ça élargit ce bouton bien au-delà du seul caractère de la flèche. */
	background: none;
	border: none;
	min-width: 0;
	width: auto;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	margin: 0 0 0 4px;
	font-size: 14px;
	font-weight: normal;
	color: inherit;
	vertical-align: middle;
}

/* position: fixed (et non absolute) + coordonnées calculées en JS (voir positionnerMenuFiltreStatut) :
   même raison que .pilule-select-menu (admin_groupes_dir.php) — le tableau défile dans son propre
   cadre (overflow-x:auto sur .div_tab), ce qui coupe tout ce qui dépasse verticalement en absolute,
   pire encore quand peu (ou zéro) lignes sont visibles et que le tableau se réduit en hauteur. */
.th-filtre-menu {
	display: none;
	position: fixed;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--shadow-md);
	padding: 6px;
	min-width: 150px;
	flex-direction: column;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	z-index: 500;
}

.th-filtre.open .th-filtre-menu {
	display: flex;
}

.th-filtre-menu label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--color-text);
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}

.th-filtre-menu label:hover {
	background: var(--color-bg);
}

.th-filtre-tous {
	font-weight: 700;
}

.th-filtre-separateur {
	height: 1px;
	background: var(--color-border);
	margin: 4px 6px;
}

.annee_totaux {
	width:70px; /* Largeur souhaitée */
	height:25px; /* Hauteur souhaitée */
	border-radius:8px;
	font-size: 20px;
    font-weight: 700;
    color:white;
    background-color:var(--color-primary);
	display: flex; /* Ajouté */
	justify-content: center; /* Centrage horizontal */
	align-items: center;     /* Centrage vertical */
	flex-shrink: 0;
}

.affich_totaux {
	position: static; /* Suit le flux normal, sous le badge de l'année */
	/* Largeur adaptée au contenu (nombre de groupes variable, pas figé à 7) : avec peu
	   de groupes, la rangée reste compacte et centrée au lieu de s'étirer sur toute la
	   largeur du cadre. max-width l'empêche de déborder ; flex-wrap prend le relais pour
	   repasser à la ligne plutôt que forcer un débordement quand il y a beaucoup de groupes. */
	width: fit-content;
	max-width: 100%;
	margin: 14px auto 0 auto;
	height: auto;
	padding:0px;
	border-radius:10px;
	background-color:var(--color-surface);
	display: flex; /* Utilisation de flexbox */
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; /* Alignement vertical au centre */
	gap: 4px; /* espacement d'origine : un gap plus large faisait déborder 7 groupes d'une ligne pour rien */
}

.div_montant_prenomresp {
    display: flex;
    flex-direction: column;
    align-items: center;
	flex-shrink: 0;
}

.montant {
	display: flex;
    align-items: center;
	justify-content: center; /* Centrer horizontalement le contenu */
    width: 80px;
    height: 80px;
    background-color: var(--color-primary-tint);
    border: 2px solid var(--color-primary);
	color: var(--color-primary-dark);
    border-radius: 50%; /* Rendre la div ronde pour créer une bulle */
    text-align: center;
    line-height: normal;
    font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
    margin-bottom: 5px; /* Marge pour séparer le montant et le prénom */
	box-shadow: var(--shadow-sm);
}

.montant_resp_connecte {
	display: flex;
    align-items: center;
	justify-content: center; /* Centrer horizontalement le contenu */
    width: 80px;
    height: 80px;
    background-color: var(--color-highlight);
	color: white;
    border-radius: 50%; /* Rendre la div ronde pour créer une bulle */
    text-align: center;
    line-height: normal;
    font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
    margin-bottom: 5px; /* Marge pour séparer le montant et le prénom */
	box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
}

.total {
	display: flex;
    align-items: center;
	justify-content: center; /* Centrer horizontalement le contenu */
    width: 92px;
    height: 92px;
    background-color: var(--color-success);
    border-radius: 50%; /* Rendre la div ronde pour créer une bulle */
    text-align: center;
    line-height: normal;
    font-size: 13px;
	font-weight: 700;
	color:white;
	white-space: nowrap;
    margin-bottom: 5px; /* Marge pour séparer le montant et le prénom */
	box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.Operateur {
    font-size: 18px;
	font-weight: 600;
	color: var(--color-text-muted);
    margin: 0 5px; /* Ajouter une marge pour l'espacement avec les montant_prenomresp */
	flex-shrink: 0;
}

.prenomresp {
    font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 500;
}

.groupe-label {
	font-size: 11px;
	color: var(--color-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
}

.texte_total {
    font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
}

/* Filtres (Responsable / Année) alignés horizontalement plutôt qu'empilés :
   raccourcit le panneau pour qu'il tombe à la même hauteur que celui des pages
   Cotisants/Familles, et donc que le bouton "Ajouter" et la barre d'onglets
   gardent la même position à l'écran d'une page à l'autre. */
.filtres_ligne {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.filtre_champ {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filtre_champ label {
	margin: 0;
	white-space: nowrap;
}

.div_form_select_annee_resp{
	display:flex;
	flex-direction: column; /* filtres au-dessus, champ de recherche en dessous */
	justify-content:center;
	align-items:center;
	gap: 12px;
	width:100%;
	border-radius:14px;
	margin:auto;
	padding:14px 18px;
	background-color:#EAFBF8;
	box-sizing:border-box;
	margin-bottom:20px;
	box-shadow: var(--shadow-sm);
}

/* Page Cotisations (portail responsable) : un seul filtre, aligné à gauche, avec le
   champ de recherche vraiment centré sur la largeur du panneau (et non simplement
   collé à côté du filtre) grâce à une 3e colonne fictive de largeur égale à droite.
   Doit rester déclarée après la règle de base ci-dessus pour la surcharger (même
   spécificité, l'ordre dans la feuille de style tranche). */
.div_form_select_annee_resp--horizontal {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 20px;
}

.div_form_select_annee_resp--horizontal .filtres_ligne {
	grid-column: 1;
	justify-self: start;
}

.div_form_select_annee_resp--horizontal .filtres_ligne + form {
	grid-column: 2;
	justify-self: center;
}

.div_recherche{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
	width:100%;
	border-radius:14px;
	margin:auto;
	padding:16px;
	background-color:#EAFBF8;
	box-sizing:border-box;
	margin-bottom:20px;
	box-shadow: var(--shadow-sm);
}

.dashboard{
	color: white;
	background-color:var(--color-primary);
	border:2px solid transparent;
	padding:10px 18px;
	border-radius:12px;
	text-decoration:none;
	font-weight:700;
	box-shadow: var(--shadow-sm);
	transition: all 0.25s ease;
}

.dashboard:hover{
	background-color:#4FC3F7;
	color:var(--color-primary-dark);
	text-decoration:none;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.div_principale{
	width:100%;
	border-radius:14px;
	margin:auto auto auto auto;
	padding:auto auto auto auto;
	background-color:var(--color-surface);
	display:flex; /* Utiliser flexbox */
    justify-content:space-between; /* Pour espacer les div enfants */
	align-items:flex-start; /* Forcer l'alignement en haut */
	gap: 16px;
	flex-wrap: wrap;
}

.div_form{
	display:block;
	width:100%;
	border-radius:16px;
	margin:0;
	padding:22px;
	background-color:#EAFBF8;
	box-sizing:border-box;
	box-shadow: var(--shadow-sm);
}

.form_cot{
	border-radius:12px;
	margin:0;
	padding:18px;
	background-color:var(--color-surface);
}

.div_tab{
	width:100%;
	border-radius:14px;
	margin:auto auto auto auto;
	padding:auto auto auto auto;
	background-color:var(--color-surface);
	box-sizing:border-box;
	overflow-x: auto; /* le tableau défile horizontalement dans son propre cadre au lieu de déborder de la page */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin:auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

th, td {
    padding: 5px 6px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 11.5px;
}

th {
    background-color: #EAFBF8;
	color: var(--color-primary);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.3px;
}

/* Boutons de téléchargement PDF/XLSX : leur style (padding, taille) est fixé en
   inline dans le PHP, donc on force ici des valeurs plus compactes avec !important
   pour que l'en-tête du tableau reste raisonnable en largeur. */
button[onclick="telechargerPDF()"],
button[onclick="telechargerExcel()"] {
	padding: 3px 6px !important;
	font-size: 10px !important;
	min-width: 0 !important;
	margin-right: 2px !important;
	border-radius: 6px !important;
}

button[onclick="telechargerPDF()"] img,
button[onclick="telechargerExcel()"] img {
	width: 12px !important;
	height: 12px !important;
	margin-right: 3px !important;
}

tbody tr {
	transition: background-color 0.15s ease;
}

tr:hover {
    background-color: #F7F9FC;
}

td.td_nom_prenom_cotisant{
	max-width: 130px; /* Ajustez cette valeur selon vos besoins */
	word-wrap: break-word; /* Permet au texte de revenir à la ligne */
	font-weight: 600;
}

td.td_comment{
	max-width: 150px; /* Ajustez cette valeur selon vos besoins */
	word-wrap: break-word; /* Permet au texte de revenir à la ligne */
}

/* Statut d'une cotisation : pastille colorée autour du texte plutôt que cellule entière
   colorée, dans le même esprit que les actions Modifier / Supprimer.
   Les variantes étoilées reprennent la même teinte en fond clair avec un texte foncé. */
td.statut {
	text-align: center;
	white-space: nowrap;
}

.badge-statut {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.badge-statut.statut-oui            { background-color: var(--color-success);      color: #FFFFFF; }
.badge-statut.statut-oui-etoile     { background-color: #DCFCE7;                   color: #15803D; }
.badge-statut.statut-non            { background-color: var(--color-danger);       color: #FFFFFF; }
.badge-statut.statut-non-etoile     { background-color: var(--color-danger-light); color: #B91C1C; }
.badge-statut.statut-exonere        { background-color: #EA580C;                   color: #FFFFFF; }
.badge-statut.statut-exonere-etoile { background-color: #FFEDD5;                   color: #C2410C; }

/* Statut Actif/Désactivé d'un responsable, page admin */
.badge-statut.statut-actif          { background-color: var(--color-success);      color: #FFFFFF; }
.badge-statut.statut-inactif        { background-color: var(--color-danger-light); color: var(--color-danger); }

/* Listes déroulantes Statut/Visibilité/Admin du tableau des groupes (admin_groupes_dir.php).
   Un <select> natif ne permet pas de garder le vert/rouge au survol d'un choix (le menu est
   dessiné par l'OS, pas par le CSS) : ce composant "pilule" recrée le même comportement en
   pur HTML/CSS/JS pour garder la main sur le survol et ajouter un effet de relief. */
.pilule-select {
	position: relative;
	display: inline-block;
	min-width: 84px;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.pilule-select:active            { box-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.pilule-select--actif           { background-color: var(--color-success);      color: #FFFFFF; }
.pilule-select--inactif         { background-color: var(--color-danger-light); color: var(--color-danger); }
.pilule-select--disabled        { cursor: not-allowed; opacity: 0.7; box-shadow: none; }

/* Cases à cocher du tableau "Accès admin par page, par groupe" (admin_dev.php) : même vert
   que les pilules Actif/Autorisée ci-dessus, plutôt que le bleu par défaut du navigateur. */
.case-acces-page {
	accent-color: var(--color-success);
}

/* position: fixed (et non absolute) + coordonnées calculées en JS (voir togglePiluleMenu) :
   le tableau défile horizontalement dans son propre cadre (overflow-x:auto sur .div_tab),
   ce qui coupe automatiquement tout ce qui dépasse verticalement en position absolute —
   fixed échappe à ce cadrage, indispensable pour les dernières lignes du tableau. */
.pilule-select-menu {
	display: none;
	position: fixed;
	z-index: 500;
	background-color: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.12);
	padding: 5px;
	min-width: 100px;
}
.pilule-select.open .pilule-select-menu { display: block; }

.pilule-select-option {
	padding: 6px 12px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 3px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
	transition: filter 0.1s ease, box-shadow 0.1s ease, transform 0.05s ease;
}
.pilule-select-option:last-child { margin-bottom: 0; }
.pilule-select-option--actif    { background-color: var(--color-success);      color: #FFFFFF; }
.pilule-select-option--inactif  { background-color: var(--color-danger-light); color: var(--color-danger); }
/* Survol/sélection : on garde la même couleur (vert ou rouge) mais assombrie + creusée,
   au lieu du gris terne par défaut du navigateur. */
.pilule-select-option:hover,
.pilule-select-option.is-selected {
	filter: brightness(0.87);
	box-shadow: inset 0 2px 5px rgba(0,0,0,0.28);
	transform: translateY(1px);
}

/* Panneau latéral de navigation entre les sous-sections de l'espace admin (Groupes,
   Années, Montants, Initialiser) — voir admin_nav.php. */
.admin-corps {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.admin-sidebar {
	width: 170px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: sticky;
	top: 16px;
}

.admin-sidebar-lien {
	padding: 10px 14px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
}

.admin-sidebar-lien:hover {
	background-color: var(--color-bg);
	text-decoration: none;
}

.admin-sidebar-lien--actif {
	background-color: #94A3B8;
	color: var(--color-primary-dark);
}

/* Page accessible en lecture seule pour ce compte admin (écriture coupée depuis
   admin_dev.php) : grisée mais toujours cliquable, contrairement à un lien désactivé. */
.admin-sidebar-lien--verrouillee {
	color: var(--color-text-muted);
}
.admin-sidebar-lien--verrouillee.admin-sidebar-lien--actif {
	background-color: var(--color-bg);
	color: var(--color-text-muted);
}

.admin-contenu {
	flex: 1;
	min-width: 0;
}

@media (max-width: 700px) {
	.admin-corps {
		flex-direction: column;
	}

	.admin-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		position: static;
	}
}

/* "EXONERE(E)" / "EXONERE(E)*" : texte nettement plus long que les autres statuts,
   ce qui élargissait la colonne Statut au point de faire apparaître une barre de
   défilement horizontale sur le tableau. */
.badge-statut.statut-exonere,
.badge-statut.statut-exonere-etoile {
	padding: 3px 7px;
	font-size: 9px;
}

/* Pastille des montants totaux (Pers./Esp/Vir/Chq) en tête de tableau, même
   principe que les badges de statut : fond clair, texte en couleur pleine. */
.badge-montant {
	display: inline-block;
	padding: 1px 6px; /* resserré : la pastille ne doit pas élargir la colonne par rapport au chiffre nu d'avant */
	border-radius: 999px;
	background-color: var(--color-danger-light);
	color: var(--color-danger);
	font-weight: 700;
	font-size: 12px; /* plus petit que les 15px hérités de .totals-row, pour la même raison */
}

tfoot,
.totals-row {
	color: var(--color-danger); /* Couleur du texte */
	font-size: 15px; /* Taille du texte en pixels */
	font-weight: 700; /* Gras */
	background-color: #F7F9FC; /* Couleur de fond */
	text-align: center; /* Alignement du texte au centre */
}

h1 {
	color:var(--color-primary-dark);
	background-color:#EAFBF8;
	margin-bottom:30px;
	text-align:center;
	padding: 14px 20px;
	border-radius: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	box-shadow: var(--shadow-sm);
}

a {
    color: var(--color-primary); /* Couleur de texte pour les liens */
    text-decoration: none; /* Supprimer la soulignement par défaut */
	font-weight: 500;
}

a:hover {
    text-decoration: underline; /* Souligner les liens au survol */
}

/* Actions de tableau détectées via le préfixe de l'URL, sans toucher au PHP */
td a[href^="modif_"] {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: #E8F1FF;
	color: #1D4ED8;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

td a[href^="modif_"]:hover {
	background-color: #1D4ED8;
	color: white;
	text-decoration: none;
}

td a[href^="supp_"] {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--color-danger-light);
	color: var(--color-danger);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

td a[href^="supp_"]:hover {
	background-color: var(--color-danger);
	color: white;
	text-decoration: none;
}

a[href^="nouveau_"],
a[href^="nouvelle_"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-add);
	font-weight: 700;
}

a[href^="nouveau_"]::before,
a[href^="nouvelle_"]::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-add);
	color: white;
	font-size: 13px;
	font-weight: 800;
}

/* Boutons "Ajouter"/"Modifier" du panneau intégré (remplacent les anciens liens vers des pages séparées) */
/* Ligne "Ajouter" : le bouton d'ajout à gauche, et sur la page Cotisations,
   le lien "Initialiser cotisations" aligné à droite sur la même ligne. */
.ligne-ajouter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 16px 0; /* écarte la ligne de la barre d'onglets juste au-dessus */
}

.lien-initialiser {
	color: var(--color-danger);
	font-weight: 500;
}

/* Groupe/année déjà initialisé : verrouillé par défaut, réactivable depuis
   admin_initialiser_dir.php (voir cotisations_initialisees). Le lien lui-même n'a pas de
   href quand il est verrouillé (rien à bloquer au clic) : pointer-events reste actif pour
   que le survol fonctionne, contrairement à un simple disabled. */
.lien-initialiser--verrouille {
	color: var(--color-text-muted);
	font-weight: 500;
	cursor: not-allowed;
}

/* Infobulle custom au survol du bouton verrouillé : explique pourquoi et invite à
   contacter un administrateur, plus lisible qu'un title natif. */
.lien-initialiser-verrou {
	position: relative;
	display: inline-block;
}
.lien-initialiser-verrou::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 0;
	width: max-content;
	max-width: 260px;
	background-color: var(--color-primary-dark);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 50;
	pointer-events: none;
}
.lien-initialiser-verrou:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.btn-ajouter {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	color: var(--color-add);
	font-weight: 700;
	background: none;
	border: none;
	margin: 14px 0 16px 0; /* écarte le bouton de la barre d'onglets juste au-dessus */
	padding: 0;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}

.btn-ajouter::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-add);
	color: white;
	font-size: 13px;
	font-weight: 800;
	margin-right: 2px;
}

/* Dans .ligne-ajouter, l'espacement est déjà porté par le conteneur */
.ligne-ajouter .btn-ajouter {
	margin: 0;
}

/* Boutons Télécharger PDF/XLSX (cotisations.php / cotisations_dir.php) : couleurs
   reconnaissables (rouge = PDF, vert = Excel, convention universelle), pilule avec
   relief et légère élévation au survol au lieu du bloc plat sans interaction d'origine. */
.btn-telecharger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: right;
	margin: 4px 10px 4px 0;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}
.btn-telecharger img {
	width: 14px;
	height: 14px;
	filter: brightness(0) invert(1);
}
.btn-telecharger:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn-telecharger:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

.btn-telecharger-pdf   { background-color: #DC2626; }
.btn-telecharger-pdf:hover   { background-color: #B91C1C; }

.btn-telecharger-xlsx  { background-color: #16A34A; }
.btn-telecharger-xlsx:hover  { background-color: #15803D; }

.btn-modifier {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: #E8F1FF;
	color: #1D4ED8;
	font-size: 13px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.2s ease;
}

.btn-modifier:hover {
	background-color: #1D4ED8;
	color: white;
}

/* Fenêtre modale d'ajout/modification (remplace la navigation vers une page séparée) */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
}

.modal-box {
	position: relative;
	background-color: var(--color-surface);
	border-radius: 16px;
	padding: 20px 24px;
	width: 100%;
	max-width: 720px;
	max-height: 95vh;
	/* auto, pas hidden : sur un écran bas (petit laptop, barre de favoris chargée...),
	   un contenu qui dépasse les 95vh devient scrollable au lieu d'être purement
	   rogné — sinon les boutons Enregistrer/Annuler peuvent devenir inatteignables. */
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	box-sizing: border-box;
}

.modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text-muted);
	padding: 4px;
}

.modal-close:hover {
	color: var(--color-danger);
}

.inline-panel h3 {
	margin: 0 24px 10px 0;
	color: var(--color-primary);
}

/* Barre d'onglets : fixée en bas de l'écran, à la même largeur que la carte, pour
   rester visible en permanence et délimiter le contenu de la page (voir
   .div_conteneur_page--avec-onglets pour l'espace réservé en bas de la carte).
   Les trois écrans sont des vues parallèles du même groupe. Chaque onglet reprend
   la couleur exacte du fond du panneau de recherche de sa page de destination ; la
   page courante se distingue par un trait épais en dessous, plutôt que par une
   différence d'opacité. */
.nav-onglets {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	width: calc(min(1000px, 96vw) - 60px); /* largeur du contenu de la carte (h1, panneaux...), pas de la carte elle-même : celle-ci a 30px de padding de chaque côté */
	z-index: 20;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* un peu d'espace entre les flèches et le groupe d'onglets ; l'espacement entre les onglets eux-mêmes reste porté par .nav-onglets-tabs */
	margin: 0;
	padding: 10px 14px 24px 14px; /* padding bas : espace visible sous les onglets, en plus de la place pour le trait de l'onglet actif */
	background-color: var(--color-surface);
	border-radius: 16px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
}

.nav-onglet {
	position: relative;
	padding: 9px 24px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary-dark);
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.nav-onglet:hover {
	text-decoration: none;
	box-shadow: var(--shadow-sm);
}

/* Trait sous l'onglet actif, même largeur que le rectangle, couleur reprise du
   badge de l'année dans le panneau des totaux. */
.nav-onglet--actif::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--color-primary);
}

/* Couleur propre à chaque écran, identique à celle du fond de son panneau de recherche */
.nav-onglet--cotisations { background-color: #EAFBF8; }
.nav-onglet--cotisants   { background-color: #F0B429; }
.nav-onglet--familles    { background-color: #4FC3F7; }

/* Groupe des 3 onglets : son propre espacement interne, distinct de celui qui
   sépare les flèches de défilement du reste (voir .nav-onglets). */
.nav-onglets-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Raccourcis "aller tout en bas" / "aller tout en haut" de part et d'autre des
   onglets, en chevron double épais (deux traits, pas un caractère de police), pour
   un rendu plus franc que la flèche fine d'origine. Le petit rebond continu signale
   que ce sont des boutons de défilement, pas des onglets supplémentaires. */
.nav-scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 2px;
	width: 26px;
	height: 26px;
	margin: 0; /* la règle générique button { margin:auto } absorbe l'espace libre d'un enfant flex et écarterait le bouton du groupe d'onglets */
	border: none;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	padding: 0;
	min-width: 0;
}

.nav-scroll:hover {
	background-color: var(--color-primary-tint);
}

.nav-scroll-chevron {
	width: 9px;
	height: 9px;
	border-right: 3px solid #2DD4BF;
	border-bottom: 3px solid #2DD4BF;
	border-radius: 1px;
}

.nav-scroll--bas .nav-scroll-chevron {
	transform: rotate(45deg); /* coin bas-droit tourné vers le bas : chevron vers le bas */
}

.nav-scroll--haut .nav-scroll-chevron {
	transform: rotate(225deg); /* même coin tourné à l'opposé : chevron vers le haut */
}

@keyframes nav-scroll-rebond-bas {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

@keyframes nav-scroll-rebond-haut {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

.nav-scroll--bas {
	animation: nav-scroll-rebond-bas 1.6s ease-in-out infinite;
}

.nav-scroll--haut {
	animation: nav-scroll-rebond-haut 1.6s ease-in-out infinite;
}

@media (max-width: 700px) {
	.nav-onglets-tabs {
		flex: 1;
	}

	.nav-onglet {
		flex: 1;
		text-align: center;
		padding: 9px 6px;
	}
}

/* Navigation entre les écrans (Cotisations → Cotisants → Familles).
   La flèche indique le sens : vers la droite pour avancer, vers la gauche pour revenir. */
.nav-avant::after {
	content: " \2192"; /* → */
	margin-left: 6px;
}

.nav-arriere::before {
	content: "\2190 "; /* ← */
	margin-right: 6px;
}

/* Date + heure courantes, rafraîchies chaque seconde, juste sous le menu déroulant.
   tabular-nums fige la largeur des chiffres : sans cela le texte tressaute à chaque seconde. */
.horodatage {
	position: absolute;
	top: 58px; /* sous le bouton du menu utilisateur (top:16px + sa hauteur) */
	right: 16px;
	z-index: 4;
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Espace admin : le gris habituel de .horodatage se fond trop dans l'identité grise de
   cet espace (#94A3B8 partout à proximité) — un ton plus foncé ressort mieux. */
.horodatage--admin {
	color: var(--color-primary-dark);
	font-weight: 600;
}

@media (max-width: 900px) {
	/* Le menu utilisateur repasse en flux normal sur petit écran (voir .user-menu) :
	   l'horloge doit suivre le même comportement pour rester sous lui. */
	.horodatage {
		position: static;
		display: block;
		text-align: right;
		margin: -6px 0 12px 0;
	}
}

/* Ligne de contexte sous le titre de la fenêtre (année, et responsable côté dirigeant) */
.modal-contexte {
	margin: -4px 0 14px 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

.modal-contexte strong {
	color: var(--color-primary);
	font-weight: 700;
}

.modal-contexte-sep {
	margin: 0 6px;
	color: var(--color-border);
}

/* Formulaire du panneau plus compact : évite d'avoir à faire défiler la fenêtre modale */
.modal-box label {
	font-size: 13px;
}

.modal-box select,
.modal-box input[type=text],
.modal-box input[type=number],
.modal-box textarea {
	font-size: 13px;
	padding: 6px 9px;
}

.modal-box textarea {
	min-height: 54px;
}

#panel_date_pmt {
	width: 100%;
}

.inline-panel-columns {
	display: flex;
	align-items: stretch;
}

.inline-panel-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 397px; /* hauteur du mode "Ajouter" : garde le même espacement (Statut/boutons) en mode "Modifier", où le contenu est naturellement plus court */
}

/* Variante compacte : la fenêtre se dimensionne à son contenu, sans hauteur plancher.
   Utilisée pour la modale des cotisants, dont les deux colonnes ont naturellement la même hauteur. */
.inline-panel-columns--compact .inline-panel-column {
	min-height: 0;
}


.inline-panel-cell {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px 4px;
}

/* Modale Ajouter/Modifier un cotisant : champs davantage espacés verticalement que le
   gap par défaut des autres panneaux (scopé à #cotisantForm pour ne pas changer les
   autres modales de l'appli, ex. celle des cotisations). */
/* Mesuré chez un utilisateur avec une petite fenêtre utile (barre de favoris chargée) :
   554px de hauteur, modale à 564px → ça débordait de 38px. Les valeurs ci-dessous sont
   calées pour tenir sous ~500px de haut, avec de la marge. */
#cotisantForm .inline-panel-cell {
	gap: 10px;
}

/* Case "Générer un mot de passe" centrée verticalement entre le champ Téléphone et les
   boutons Enregistrer/Annuler (qui restent en place, poussés en bas de leur colonne par
   .inline-panel-actions-bottom — indépendant de cette marge). */
.inline-panel-mdp-auto-label {
	margin-top: 14.5px;
}

/* Écart Désignation famille -> Position égal à celui de Nom -> Prénom (juste le gap
   standard de la cellule, plus de spacer dédié) ; Désignation famille descend d'autant
   plus (margin-top) pour compenser exactement le retrait du spacer, donc Position ne
   bouge pas — toujours aligné avec les boutons Enregistrer/Annuler. */
.inline-panel-label-designation {
	margin-top: 26px;
}

/* #panelCreateFields n'est pas directement enfant de .inline-panel-cell (il faut
   pouvoir le basculer en JS avec #panelEditCotisant), donc son propre espacement
   interne doit être redéfini pour que "Prénom" suive "Nom" au même rythme que
   les autres champs du panneau. */
#panelCreateFields,
#panelEditCotisant {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* Séparateurs entre les 4 parties du formulaire : chacun suit la hauteur réelle
   de son propre contenu (au lieu d'une grille où les 2 colonnes s'imposent
   mutuellement la même hauteur de ligne), et reste en retrait des bords. */
.inline-panel-hsep {
	height: 2px;
	background: var(--color-border);
	margin: 4px 16px 12px 16px;
}

.inline-panel-vsep {
	width: 2px;
	background: var(--color-border);
	margin: 16px 24px;
}

.inline-panel-static {
	font-weight: 600;
	color: var(--color-primary);
	padding: 9px 0;
}

.inline-panel-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	justify-content: flex-start;
}

.inline-panel-actions input[type=submit],
.inline-panel-actions button {
	margin: 0 !important;
}

.inline-panel-comment-label {
	margin-top: 10px;
}

/* Fait descendre les boutons Annuler/Enregistrer en bas de leur colonne, pour qu'ils
   s'alignent avec le bas de la colonne de gauche même si celle-ci est plus haute. */
.inline-panel-column > .inline-panel-cell:last-child {
	flex: 1;
}

/* Cale le bloc Espèces/Virement/Chèque sur le bas de sa colonne, pour qu'il finisse
   à la même ligne que les boutons Annuler/Enregistrer, y compris quand la partie du
   haut est plus courte (mode Modifier : une seule ligne "Cotisant" au lieu de Nom+Prénom). */
.inline-panel-cell-bottom-align {
	justify-content: flex-end;
}

.inline-panel-actions-bottom {
	margin-top: auto;
}

@media (max-width: 700px) {
	.inline-panel-columns {
		flex-direction: column;
	}

	.inline-panel-vsep {
		width: auto;
		height: 2px;
		margin: 4px 16px;
	}
}

label {
    color:var(--color-primary); /* Couleur de texte pour les étiquettes */
    font-weight:600; /* Police en gras pour les étiquettes */
}

.form_cot input[type=text],
.form_cot input[type=password],
.form_cot input[type=number]{
	width:150px;
	border: 1px solid var(--color-primary);
	border-radius:8px;
	padding:9px 9px 9px 12px;
	font-family: inherit;
	font-size: 14px;
	background-color: var(--color-surface);
	color: var(--color-text);
	transition: all 0.25s ease;
	background-position:3px 4px;
	background-size:12px;
}

.form_cot input[type=text]::placeholder,
.form_cot input[type=password]::placeholder,
.form_cot input[type=number]::placeholder {
	color: var(--color-text-muted);
}

.form_cot input[type=text]:focus,
.form_cot input[type=password]:focus,
.form_cot input[type=number]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* Neutralise le focus "couleur pleine" défini en inline par page (teal/or/bleu selon la section) :
   au focus, le champ reste blanc avec juste une bordure et un halo navy, quelle que soit la page. */
.couleur_focus:focus,
input.couleur_focus:focus,
textarea.couleur_focus:focus,
select.couleur_focus:focus {
	background-color: var(--color-surface) !important;
	border: 1px solid var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
	outline: none;
}

.form_cot input[type=text].input_taille_1{
	width:125px;
}

.form_cot input[type=text].input_taille_2{
	width:140px;
}

.form_cot input[type=text].input_taille_3{
	width:140px;
}

.form_cot input[type=text].input_taille_4{
	width:170px;
}


.form_cot textarea{
	border: 1px solid var(--color-border);
	border-radius:8px;
	padding:9px 9px 9px 12px;
	font-family: inherit;
	transition: all 0.25s ease;
}

.form_cot select{
	border: 1px solid var(--color-border);
	border-radius:8px;
	padding:8px;
	font-family: inherit;
	font-size: 14px;
	background-color: var(--color-surface);
	transition: all 0.25s ease;
	background-position:3px 4px;
	background-size:12px;
}

.form_cot select.select_taille_1{
	width:75px;
}

.form_cot select.select_taille_2{
	width:90px;
}

.form_cot select.select_taille_3{
	width:140px;
}

/* Filtre Responsable : la longueur du contenu varie beaucoup ("KEMEL Tahar (Groupe3)"
   à "SADDEDINE Fraouçène (Groupe2)") ; la boîte est élargie pour que même l'option
   la plus longue tienne sans être coupée. */
.form_cot select.select_taille_4{
	width: 260px;
}

.form_cot select, option{
	border: 1px solid var(--color-border);
	border-radius:8px;
	transition: all 0.25s ease;
}

.form_cot input[type=submit]{
	margin:14px auto auto 10px;
	border: none;
	min-width:90px;
	border-radius:999px;
	padding:9px 20px;
	color:white;
	background-color: var(--color-primary);
	font-weight:700;
	font-size: 14px;
	cursor: pointer;
	transition:all 0.25s ease;
	box-shadow: var(--shadow-sm);
}

.form_cot input[type=submit]:hover{
	background-color: var(--color-primary-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

button {
	margin:auto auto auto auto;
	border: 1px solid var(--color-border);
	min-width:90px;
	border-radius:999px;
	padding:8px 18px;
	color:var(--color-primary);
	background-color: var(--color-surface);
	font-weight:700;
	font-size: 14px;
	cursor: pointer;
	transition:all 0.25s ease;
}

button:hover{
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color:white;
}

/* Contrôles d'écriture désactivés en mode lecture seule (voir $admin_lecture_seule dans
   admin_auth.php) : grisés et non cliquables, sans dépendre du seul style natif du navigateur. */
button:disabled,
button:disabled:hover,
input[type=submit]:disabled,
input[type=text]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
.btn-ajouter:disabled,
.btn-modifier:disabled,
select:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background-color: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	transform: none;
	box-shadow: none;
}

/* Équivalent de :disabled pour un lien "Supprimer" (un <a> n'a pas d'état disabled natif) :
   même occasion que ci-dessus, saisie désactivée pour ce compte (voir ecriture_active, colonne
   "Saisie" de admin_groupes_dir.php) sur cotisations/cotisants/familles. !important nécessaire :
   td a[href^="supp_"] ci-dessus (specificité 0-1-2) fixe déjà sa propre couleur/fond rouge, plus
   spécifique qu'une simple classe (0-1-0) — sans ça le lien restait coloré malgré l'opacité.
   PAS de pointer-events:none : ça empêcherait le navigateur d'afficher son propre curseur "interdit"
   au survol (l'élément deviendrait invisible aux événements de souris, donc à :hover/cursor aussi).
   La vraie protection est de toute façon côté serveur (voir supp_*.php, revérifie ecriture_active
   avant le DELETE) — cliquer ici ne fait qu'un aller-retour sans effet, pas un vrai risque. */
.lien-desactive {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	color: var(--color-text-muted) !important;
	background-color: var(--color-surface) !important;
}

.fond_label{
	font-size: 20px;
    color:var(--color-primary);
}

.fond_texte{
	font-size: 16px;
}

/* Ligne "Responsable : nom (groupe)" dans le panneau de recherche (portail dirigeant) */
.div_recherche_contexte {
	margin-bottom: 16px; /* espace avec le champ de recherche juste en dessous */
}

.fond_groupe {
	font-size: 13px;
	color: var(--color-text-muted);
	margin-left: 6px;
}

/* Ecran de connexion (select_acces / acces_resp) */
.div_select_acces button {
	min-width: 180px;
	padding: 12px 20px;
}

@media (max-width: 900px) {

	.div_conteneur_page {
		padding: 0 16px 20px 16px;
	}

	.div_principale {
		flex-direction: column;
	}

	.div_form {
		width: 100%;
	}

	.user-menu {
		position: static;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 12px;
	}

	.affich_totaux {
		flex-wrap: wrap;
		gap: 12px;
	}

	table, thead, tbody, tfoot {
		display: block;
		width: 100%;
	}
}

/* Tableau de bord (dashboard_dir.php) : pastilles KPI (dont le filtre Année, en tuile
   comme le reste), barre latérale de filtres (Statut/Groupe) et grille de cartes
   (tableau + graphiques Chart.js) — même disposition que l'ancien classeur Tableau Public. */
.dashboard-kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.dashboard-kpi {
	position: relative;
	flex: 1;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background-color: var(--color-surface);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	padding: 10px 10px 8px 10px;
	text-align: center;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-kpi:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Liseré coloré en haut de chaque tuile : identifie la nature de la donnée d'un coup
   d'œil (neutre, montant, ou performance — voir les variantes --bon/--moyen/--faible). */
.dashboard-kpi::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #94A3B8;
}
.dashboard-kpi--montant::before { background: var(--color-primary); }
.dashboard-kpi--neutre::before  { background: #64748B; }
.dashboard-kpi--filtre::before  { background: var(--color-primary-dark); }
.dashboard-kpi--bon::before     { background: var(--color-success); }
.dashboard-kpi--bon .dashboard-kpi-valeur    { color: var(--color-success); }
.dashboard-kpi--moyen::before   { background: #EA580C; }
.dashboard-kpi--moyen .dashboard-kpi-valeur  { color: #EA580C; }
.dashboard-kpi--faible::before  { background: var(--color-danger); }
.dashboard-kpi--faible .dashboard-kpi-valeur { color: var(--color-danger); }

/* Colonne "Taux de cotisation" du tableau "Taux par groupe" : barre de progression neutre
   (couleur d'identité du dashboard, ni vert ni rouge) plutôt qu'un code vert/orange/rouge — ce
   taux n'a pas toujours le même sens (voir CLAUDE.md) : il mesure le % des cotisants dans les
   statuts cochés, donc un taux élevé de NON n'est pas "bon" alors qu'un taux élevé de OUI l'est.
   Une barre montre juste "combien", sans jamais suggérer bon/mauvais quel que soit le filtre. */
.dashboard-taux-cellule {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.dashboard-taux-valeur {
	font-weight: 700;
	color: var(--color-text);
	min-width: 32px;
}
.dashboard-taux-barre {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 7px;
	background: var(--color-border);
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}
.dashboard-taux-barre-remplie {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	/* Teal plus soutenu, volontairement différent du #2DD4BF déjà pris par "Chèque" dans le
	   camembert "Taux par mode de paiement" juste à côté, et du vert --color-success (badge OUI)
	   pour ne pas réintroduire l'ambiguïté "vert = bon signe" (voir plus haut). */
	background: #0D9488;
	border-radius: 999px;
	transition: width 0.25s ease;
}

.dashboard-kpi-valeur {
	font-size: 20px;
	font-weight: 800;
	color: var(--color-primary-dark);
	font-variant-numeric: tabular-nums;
}

.dashboard-kpi-libelle {
	font-size: 10.5px;
	color: var(--color-text-muted);
	font-weight: 600;
}

/* Tuile emblème CEVTA (à la place de l'ancien filtre Année, déplacé à côté du filtre
   Statut). Largeur fixée à celle de la colonne de filtres (150px), pas flex:1 comme les
   autres tuiles KPI : son bord droit s'aligne ainsi avec le séparateur vertical juste
   en dessous. Bande du haut en dégradé plutôt qu'une couleur unie, assortie au badge. */
.dashboard-kpi--logo {
	flex: 0 0 150px;
}
.dashboard-kpi--logo::before {
	background: linear-gradient(90deg, #2DD4BF, #14283F);
}
/* Rectangle à coins arrondis (plutôt qu'un rond, voir CLAUDE.md) : accueille un nom
   d'association de longueur variable (lu dans titre_association.txt) sans qu'il ait à
   contourner un bord circulaire. La largeur suit le texte (fit-content) jusqu'à max-width, qui
   correspond à peu près à ce que laisse la tuile (150px, voir .dashboard-kpi--logo) une fois
   son padding retiré ; la taille de police (voir $taille_police_logo dans
   dashboard_contenu.php) diminue avec la longueur du nom pour limiter le recours à la 2ème
   ligne. -webkit-line-clamp (et non text-overflow:ellipsis) pour la sécurité anti-débordement
   au-delà de 2 lignes : ellipsis sur du texte centré (justify-content/text-align:center) coupe
   le texte de façon incohérente des deux côtés au lieu de couper proprement la fin. */
.dashboard-logo-cevta {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, #2DD4BF, #14283F);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-align: center;
	line-height: 1.15;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Liste déroulante "maison" du filtre Année (remplace le <select> natif — voir le
   commentaire dans dashboard_dir.php : avec 26 options et une valeur sélectionnée loin
   dans la liste, Chrome scrollait la page pour lui faire de la place). Le bouton reprend
   le même style qu'avant : chiffre en gras dans la couleur d'identité, flèche maison. */
.dashboard-annee-select {
	position: relative;
}
.dashboard-annee-bouton {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-width: 90px;
	margin-top: 1px;
	padding: 3px 22px 3px 12px;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	color: var(--color-primary-dark);
	background-color: var(--color-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2314283F'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 9px 6px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dashboard-annee-bouton:hover {
	border-color: var(--color-primary);
	background-color: var(--color-surface);
}

/* Liste positionnée nous-mêmes (absolute, sous le bouton) plutôt que par le moteur natif
   du navigateur : elle ne peut donc pas déclencher un scroll de la page pour se faire de
   la place. Si elle ne tient pas à l'écran, c'est ELLE qui défile (overflow-y), pas la page. */
.dashboard-annee-liste {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: min(220px, 60vh);
	overflow-y: auto;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: var(--shadow-lg);
}
.dashboard-annee-liste li {
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-dark);
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
}
.dashboard-annee-liste li:hover {
	background-color: var(--color-bg);
}
.dashboard-annee-liste li.dashboard-annee-actif {
	background-color: var(--color-primary-dark);
	color: white;
}

/* Remplace l'ancienne pastille "Données au" (plus utile : les données sont désormais en
   direct, pas un instantané figé) par une simple barre de séparation de la même couleur. */
.dashboard-separateur {
	height: 3px;
	background-color: var(--color-primary-dark);
	border-radius: 2px;
	margin: 0 0 4px 0;
}

.dashboard-filtre-bloc {
	background-color: var(--color-surface);
	border-radius: 10px;
	border-left: 3px solid var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
	padding: 6px 8px 6px 7px;
}

.dashboard-filtre-bloc .groupe-label {
	font-size: 10px;
}

/* Le bloc Statut est étiré en hauteur par .dashboard-filtre-colonne > *:last-child (flex:1),
   pour que son cadre (bordure gauche arrondie, en forme d'accolade) rejoigne le bas de la
   colonne — sans ça, son contenu (label + cases) reste collé en haut de ce cadre étiré. */
.dashboard-filtre-bloc--statut {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Chaque filtre vit désormais dans la ligne de contenu qu'il pilote (Statut à côté du
   tableau, Groupe à côté du camembert "Taux par statut") plutôt que dans une colonne à
   part : largeur fixe pour ne pas grignoter l'espace des cartes, et il s'étire par
   défaut (align-items: stretch, valeur par défaut de .dashboard-ligne) sur toute la
   hauteur de la ligne pour rester visuellement au même niveau que celle-ci. */
.dashboard-filtre-bloc--ligne {
	width: 150px;
	flex-shrink: 0;
}

/* Empile le filtre Année au-dessus du filtre Statut (ligne 1 de la grille) : chacun
   garde son propre encart (.dashboard-filtre-bloc), juste rangés en colonne. */
.dashboard-filtre-colonne {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Sans ça, la colonne (étirée par align-items: stretch de .dashboard-ligne pour
   égaler la hauteur de la ligne) laisse un vide invisible sous le dernier bloc — son
   propre encart ne va alors pas jusqu'en bas, et l'écart avec la ligne suivante
   (Statut → Groupe) devient plus grand que celui entre Année et Statut. En étirant le
   dernier bloc lui-même, son cadre rejoint le bas de la colonne : les deux écarts
   (Année → Statut, Statut → Groupe) sont alors identiques. */
.dashboard-filtre-colonne > *:last-child {
	flex: 1;
}
.dashboard-filtre-bloc--annee {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dashboard-filtre-bloc--annee .groupe-label {
	align-self: flex-start;
}
.dashboard-filtre-bloc--annee .dashboard-annee-bouton {
	width: 100%;
}

/* Sépare visuellement chaque filtre de la carte qui le suit, et chaque paire de cartes
   entre elles, sur toute la hauteur de la ligne. Plus marqué que --color-border (trop
   pâle pour se voir entre des cartes déjà blanches) : teinte de la couleur principale. */
.dashboard-separateur-vertical {
	width: 2px;
	align-self: stretch;
	background-color: rgba(30, 58, 95, 0.22);
	border-radius: 1px;
	flex-shrink: 0;
}

/* Même traitement, à l'horizontale, entre les deux lignes du tableau de bord. */
/* Ne démarre qu'au niveau des cartes, pas sous la colonne de filtres (voir le
   commentaire dans dashboard_dir.php) : l'espace réservé reprend exactement la largeur
   de la colonne de filtres (150px) + son séparateur vertical + les espacements de la
   ligne (6px x2 + 2px), pour un alignement pixel-perfect avec le reste de la grille. */
.dashboard-separateur-horizontal-ligne {
	display: flex;
	align-items: center;
}
.dashboard-separateur-horizontal-espace {
	width: 164px;
	flex-shrink: 0;
}
.dashboard-separateur-horizontal {
	flex: 1;
	height: 2px;
	background-color: rgba(30, 58, 95, 0.22);
	border-radius: 1px;
}

/* Petite pastille de couleur devant chaque case Statut, assortie à la couleur de sa
   part dans le camembert "Taux par statut" : relie visuellement le filtre à ce qu'il
   filtre, sans avoir à lire le libellé pour deviner la couleur. */
.dashboard-puce {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.15); /* garde les teintes claires (OUI*/NON*) visibles sur fond blanc */
	flex-shrink: 0;
}

.dashboard-filtre-statuts--colonne {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 3px;
}

.dashboard-filtre-statuts label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
	font-size: 11px;
	margin-bottom: 0;
	white-space: nowrap;
	padding: 2px 4px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.dashboard-filtre-statuts label:hover {
	background-color: var(--color-bg);
}
.dashboard-filtre-statuts input[type=checkbox],
.dashboard-filtre-statuts input[type=radio] {
	accent-color: var(--color-primary);
	cursor: pointer;
}

/* Deux lignes fixes (table+paiement, puis statut+total) plutôt qu'un simple flex-wrap :
   la disposition reste identique quelle que soit la largeur d'écran, au lieu de se
   réarranger en une seule ligne de 4 cartes si la fenêtre est assez large. */
/* gap: 2px, pas 6 : avec la hauteur de 2px du séparateur horizontal entre les deux
   lignes (2 + 2 + 2 = 6), l'écart Statut → Groupe retombe exactement sur le même
   espacement que Année → Statut (6px, .dashboard-filtre-colonne) au niveau des filtres. */
.dashboard-grille {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-ligne {
	display: flex;
	gap: 6px;
}

.dashboard-carte {
	background-color: var(--color-surface);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	padding: 6px 8px;
	min-width: 0; /* laisse le canvas Chart.js rétrécir dans la carte au lieu de la faire déborder */
	transition: box-shadow 0.15s ease;
}
.dashboard-carte:hover {
	box-shadow: var(--shadow-md);
}

/* Tableau "Taux par groupe" et histogramme "Total par groupe" : un peu plus larges que
   les camemberts, mais SANS max-width — un plafond laisserait un vide dans la ligne au
   lieu de la remplir complètement (flex-grow répartit tout l'espace disponible). */
.dashboard-carte--large {
	flex: 1.1 1 240px;
}

/* Camemberts : cartes plus étroites, le camembert (largeur fixe) reste centré dedans
   même si la carte elle-même grandit un peu pour occuper toute la ligne. */
.dashboard-carte--petite {
	flex: 1 1 190px;
}

/* Tableau "Taux par groupe" : encore plus resserré que le style de tableau par défaut
   de l'appli, pour que les 7 lignes tiennent sans pousser la hauteur du tableau de bord. */
#tableauDashboard th,
#tableauDashboard td {
	padding: 2px 3px;
	font-size: 9px;
}

/* Colonnes de chiffres (tout sauf "Groupe") centrées : plus lisible pour comparer
   des valeurs verticalement qu'un alignement à gauche. */
#tableauDashboard th:not(:first-child),
#tableauDashboard td:not(:first-child) {
	text-align: center;
}

.dashboard-camembert {
	width: 170px;
	height: 170px;
	margin: 0 auto;
}

/* "Taux par statut" : libellés à l'extérieur des portions (voir le plugin JS
   legendeExterne), donc un canvas plus grand pour leur laisser la place. */
/* Même hauteur que .dashboard-camembert (donc toujours aligné avec l'histogramme), mais
   plus large : Chart.js dimensionne le cercle sur la plus petite des deux dimensions, la
   largeur en trop sert donc uniquement de marge pour les étiquettes extérieures (voir le
   plugin legendeExterne) sans jamais les faire dépasser du canvas. */
.dashboard-camembert--statut {
	width: 290px;
	height: 170px;
}

.dashboard-graph-large {
	height: 170px;
}

.dashboard-carte-titre {
	margin: 0 0 4px 0;
	padding-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-primary-dark);
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

/* Cette page n'a pas de barre d'onglets basse (contrairement à cotisations/cotisants/
   familles) : la marge basse standard du conteneur est inutilement grande ici. */
.div_conteneur_page--dashboard {
	padding-bottom: 8px;
}

/* Barre d'onglets basse en flux normal (pas flottante par-dessus le contenu comme sur
   les autres pages) : évite qu'elle recouvre la dernière ligne de graphiques sur un
   tableau de bord volontairement compact. */
.div_conteneur_page--dashboard .nav-onglets {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	width: 100%;
	margin: 10px 0 0 0;
}

@media (max-width: 900px) {
	.dashboard-ligne {
		flex-direction: column;
	}
	.dashboard-filtre-bloc--ligne {
		width: 100%;
	}
	.dashboard-separateur-vertical {
		width: 100%;
		height: 1px;
	}
	.dashboard-kpi--logo {
		flex-basis: 100%;
	}
	.dashboard-separateur-horizontal-espace {
		display: none;
	}
}