/**
 * Thème front-office du plugin CSE Listes.
 * Applique le système de design (papier / marine / vert / or, Inter) au rendu
 * du shortcode [cse_listes]. Tout est limité à la portée .cse-listes-frontend
 * pour ne pas déborder sur le thème du site.
 */

:root {
	--paper: #F4F2EB;
	--paper-2: #ECEAE1;
	--white: #FFFFFF;
	--ink: #21252B;
	--navy: #243F5C;
	--navy-dk: #1B3047;
	--green: #3B6B53;
	--gold: #C9A94E;
	--muted: #666B71;
	--line: #E1DED4;
	--tint-navy: #CAD9EC;
	--tint-green: #CDE4D5;
	--tint-gold: #EFDFA6;
	--serif: "Inter Tight", "Inter", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--radius: 16px;
	--radius-pill: 999px;
}

/* Conteneur général */
.cse-listes-frontend {
	font-family: var(--sans);
	color: var(--ink);
	background: var(--paper);
	padding: 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.cse-listes-frontend h3 {
	font-family: var(--serif);
	color: var(--navy);
	font-weight: 600;
}

/* Onglets en pilules */
.cse-listes-frontend .cse-tabs {
	border-bottom: none;
	gap: .5rem;
	margin-bottom: 1.15rem;
}

.cse-listes-frontend .cse-tab-btn {
	font-family: var(--sans);
	font-weight: 500;
	padding: .6rem 1.25rem;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--navy);
	border: 1.5px solid var(--line);
	box-shadow: none;
	transition: .18s ease;
}

.cse-listes-frontend .cse-tab-btn:hover {
	border-color: var(--navy);
}

.cse-listes-frontend .cse-tab-btn.is-active {
	background: var(--navy);
	color: var(--paper);
	border-color: var(--navy);
	box-shadow: none;
	font-weight: 600;
}

/* Colonnes façon carte */
.cse-listes-frontend .cse-two-col {
	gap: 1.25rem;
}

.cse-listes-frontend .cse-col {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.4rem 1.35rem;
}

.cse-listes-frontend .cse-col-head h3 {
	font-size: 1rem;
}

/* Badges d'indicateurs */
.cse-listes-frontend .cse-badge {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	border-radius: var(--radius-pill);
	padding: .28rem .6rem;
	background: var(--paper-2);
	color: var(--muted);
	border: 1px solid var(--line);
}

.cse-listes-frontend .cse-badge-info {
	background: var(--tint-navy);
	color: var(--navy-dk);
	border-color: transparent;
}

.cse-listes-frontend .cse-badge-ok {
	background: var(--tint-green);
	color: var(--green);
	border-color: transparent;
}

.cse-listes-frontend .cse-badge-warning {
	background: var(--tint-gold);
	color: #7A5B00;
	border-color: transparent;
}

.cse-listes-frontend .cse-badge-danger {
	background: #F6D6D0;
	color: #8A1F1F;
	border-color: transparent;
}

/* Cartes candidat */
.cse-listes-frontend .cse-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: 12px;
	padding: .7rem .85rem;
}

.cse-listes-frontend .cse-card[data-sexe="F"] {
	border-left-color: var(--green);
}

.cse-listes-frontend .cse-card.cse-rupture {
	background: var(--tint-gold);
	border-left-color: var(--gold);
}

.cse-listes-frontend .cse-card-order {
	color: var(--navy);
}

.cse-listes-frontend .cse-card-name {
	font-family: var(--serif);
	color: var(--ink);
}

.cse-listes-frontend .cse-card-meta {
	color: var(--muted);
}

.cse-listes-frontend .cse-sex {
	background: var(--tint-navy);
	color: var(--navy-dk);
}

.cse-listes-frontend .cse-sex-F {
	background: var(--tint-green);
	color: var(--green);
}

.cse-listes-frontend .cse-card-placeholder {
	border-color: var(--navy);
	background: var(--tint-navy);
}

/* Boutons (style pilule fantôme) */
.cse-listes-frontend .button {
	font-family: var(--sans);
	font-weight: 500;
	border-radius: var(--radius-pill);
	padding: .4rem .9rem;
	border: 1.5px solid var(--line);
	background: transparent;
	color: var(--navy);
	line-height: 1.6;
	transition: .18s ease;
}

.cse-listes-frontend .button:hover {
	border-color: var(--navy);
}

.cse-listes-frontend .button-link-delete {
	border-color: rgba(138, 31, 31, .4);
	color: #8A1F1F;
}

.cse-listes-frontend .button-link-delete:hover {
	border-color: #8A1F1F;
}

/* Bouton de verrouillage : plein (marine) */
.cse-listes-frontend .cse-access-logout {
	background: var(--navy);
	color: var(--paper);
	border-color: var(--navy);
}

.cse-listes-frontend .cse-access-logout:hover {
	background: var(--navy-dk);
	border-color: var(--navy-dk);
}

/* Boutons de réordonnancement */
.cse-listes-frontend .cse-reorder button {
	border-radius: 8px;
	border-color: var(--line);
	color: var(--navy);
	background: var(--white);
}

.cse-listes-frontend .cse-reorder button:hover {
	border-color: var(--navy);
}

/* Alerte de sièges */
.cse-listes-frontend .cse-alert {
	background: #F6D6D0;
	border: 1px solid #D63638;
	color: #8A1F1F;
	border-radius: 12px;
}

/* Fenêtre de connexion */
.cse-access-modal .cse-access-box {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--sans);
	color: var(--ink);
}

.cse-access-modal .cse-access-box h3 {
	font-family: var(--serif);
	color: var(--navy);
}

.cse-access-modal .cse-access-box input[type="text"],
.cse-access-modal .cse-access-box input[type="password"] {
	border: 1.5px solid var(--line);
	border-radius: 10px;
}

.cse-access-modal .cse-access-box input[type="text"]:focus,
.cse-access-modal .cse-access-box input[type="password"]:focus {
	border-color: var(--navy);
	outline: none;
}

/* Bouton principal de la fenêtre : plein (marine), pleine largeur */
.cse-access-modal .cse-access-submit {
	background: var(--navy);
	color: var(--paper);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	width: 100%;
	padding: .7rem 1rem;
	font-weight: 600;
	cursor: pointer;
}

.cse-access-modal .cse-access-submit:hover {
	background: var(--navy-dk);
	border-color: var(--navy-dk);
}

/* Porte d'entrée par mot de passe */
.cse-gate {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
}

.cse-gate-box {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.8rem 1.7rem;
	width: 340px;
	max-width: 90%;
	text-align: center;
	box-shadow: 0 6px 24px rgba(27, 48, 71, .08);
}

.cse-gate-box h3 {
	font-family: var(--serif);
	color: var(--navy);
	margin: 0 0 .4rem;
}

.cse-gate-box p {
	color: var(--muted);
	margin: 0 0 .8rem;
}

.cse-gate-box input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	font-size: 1rem;
}

.cse-gate-box input[type="password"]:focus {
	border-color: var(--navy);
	outline: none;
}

.cse-gate-box .cse-access-submit {
	background: var(--navy);
	color: var(--paper);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	width: 100%;
	padding: .7rem 1rem;
	font-weight: 600;
	cursor: pointer;
}

.cse-gate-box .cse-access-submit:hover {
	background: var(--navy-dk);
	border-color: var(--navy-dk);
}

.cse-gate-box .cse-access-error {
	background: #F6D6D0;
	border: 1px solid #D63638;
	color: #8A1F1F;
	border-radius: 8px;
	padding: .5rem .7rem;
	font-size: .85rem;
}

/* Barre profil / déconnexion */
.cse-listes-frontend .cse-access-bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
}

.cse-listes-frontend .cse-role-tag {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--green);
	border: 1px solid rgba(59, 107, 83, .4);
	padding: .25rem .6rem;
	border-radius: var(--radius-pill);
}

/* Espacements resserrés sur mobile pour la vue publique */
@media (max-width: 600px) {
	.cse-listes-frontend {
		padding: 1rem;
	}

	.cse-listes-frontend .cse-col {
		padding: 1rem;
	}

	.cse-listes-frontend .cse-two-col {
		gap: 1rem;
	}
}

/* Fenêtre « Créer un utilisateur » */
.cse-create-modal .cse-access-box select {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .7rem;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	font-size: 1rem;
	background: var(--white);
}

.cse-create-msg {
	border-radius: 8px;
	padding: .5rem .7rem;
	font-size: .85rem;
}

.cse-create-msg.cse-error {
	background: #F6D6D0;
	border: 1px solid #D63638;
	color: #8A1F1F;
}

.cse-create-msg.cse-ok {
	background: var(--tint-green);
	border: 1px solid var(--green);
	color: var(--green);
}