/* AL Bénévoles — styles front-end */

.alb-wrap {
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
}

/* Indicateur d'étapes */
.alb-steps {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em;
	counter-reset: step;
}
.alb-step {
	flex: 1;
	text-align: center;
	font-size: 0.85em;
	color: #999;
	position: relative;
	padding-top: 2.4em;
}
.alb-step span {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 50%;
	background: #e0e0e0;
	color: #fff;
	font-weight: 700;
}
.alb-step.is-active { color: #222; font-weight: 600; }
.alb-step.is-active span { background: #2c7be5; }
.alb-step.is-done span { background: #2ecc71; }

/* Panneaux */
.alb-panel { display: none; }
.alb-panel.is-active { display: block; }
.alb-panel h3 { margin-top: 0; }

.alb-select,
.alb-field input {
	width: 100%;
	padding: 0.7em;
	font-size: 1em;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}
.alb-field { margin-bottom: 1em; }

/* Pot de miel anti-spam : hors écran, non focusable visuellement */
.alb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 0;
	width: 0;
	overflow: hidden;
}
.alb-field label { display: block; font-weight: 600; margin-bottom: 0.3em; }

/* Créneaux */
.alb-slots { margin-bottom: 1em; }
.alb-slot {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8em 1em;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 0.6em;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.alb-slot:hover { border-color: #2c7be5; }
.alb-slot input { margin: 0; }
.alb-slot-label { flex: 1; font-weight: 600; }
.alb-slot-places { font-size: 0.85em; color: #2ecc71; font-weight: 600; }
.alb-slot.is-full {
	opacity: 0.55;
	cursor: not-allowed;
	background: #f7f7f7;
}
.alb-full-tag { color: #e74c3c; }
.alb-empty, .alb-loading { color: #888; font-style: italic; }
.alb-multi-hint { font-size: 0.85em; color: #2c7be5; margin: 0 0 0.6em; font-weight: 600; }

/* Récap étape 3 */
.alb-recap {
	background: #f0f6ff;
	border-left: 3px solid #2c7be5;
	padding: 0.7em 1em;
	border-radius: 4px;
	margin-bottom: 1.2em;
}
.alb-recap-list { margin: 0.4em 0 0; padding-left: 1.2em; }
.alb-recap-list li { margin-bottom: 0.2em; }

/* Boutons */
.alb-actions {
	display: flex;
	justify-content: space-between;
	gap: 0.8em;
	margin-top: 1.2em;
}
.alb-btn {
	background: #2c7be5;
	color: #fff;
	border: none;
	padding: 0.75em 1.5em;
	font-size: 1em;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}
.alb-btn:hover { background: #1a68d1; }
.alb-btn:disabled { background: #b8c7dd; cursor: not-allowed; }
.alb-btn.alb-secondary { background: #e0e0e0; color: #333; }
.alb-btn.alb-secondary:hover { background: #d0d0d0; }
.alb-next, .alb-submit { margin-left: auto; }

/* Messages */
.alb-message {
	display: none;
	padding: 0.8em 1em;
	border-radius: 6px;
	margin-bottom: 1em;
}
.alb-message.is-error { background: #fdecea; color: #b71c1c; }
.alb-message.is-ok { background: #e8f5e9; color: #1b5e20; }

/* Succès */
.alb-success { text-align: center; }
.alb-success h3 { color: #2ecc71; }

/* =========================================================
   Tableau de bord public  [al_benevoles_stats]
   ========================================================= */
.alb-stats { width: 100%; }
.alb-stats-title { text-align: center; margin-bottom: 1em; }

/* Bandeau global */
.alb-stats-hero {
	background: linear-gradient(135deg, #2c7be5, #1a68d1);
	color: #fff;
	border-radius: 14px;
	padding: 2em 1.5em;
	text-align: center;
	margin-bottom: 1.8em;
	box-shadow: 0 6px 20px rgba(44, 123, 229, 0.25);
}
.alb-stats-hero.is-complete {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	box-shadow: 0 6px 20px rgba(46, 204, 113, 0.25);
}
.alb-stats-big { font-size: 1.7em; font-weight: 800; line-height: 1.2; }
.alb-stats-number { font-size: 1.3em; }
.alb-stats-sub { margin: 0.4em 0 0; opacity: 0.92; }

/* Barre de progression */
.alb-progress {
	position: relative;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	height: 26px;
	margin: 1.2em auto 0;
	max-width: 480px;
	overflow: hidden;
}
.alb-progress-bar {
	background: #fff;
	height: 100%;
	border-radius: 999px;
	transition: width 0.6s ease;
}
.alb-progress-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	line-height: 26px;
	font-size: 0.8em;
	font-weight: 700;
	color: #1a68d1;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.alb-stats-cta {
	display: inline-block;
	margin-top: 1.3em;
	background: #fff;
	color: #1a68d1;
	text-decoration: none;
	padding: 0.7em 1.8em;
	font-weight: 700;
}
.alb-stats-cta:hover { background: #f0f6ff; color: #1a68d1; }

/* Grille des stands */
.alb-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1em;
}
.alb-stats-card {
	border: 1px solid #e7e9ee;
	border-radius: 14px;
	padding: 1.2em 1.3em;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.alb-stats-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(20, 40, 80, 0.10);
}
.alb-stats-card.is-complete { background: #f5fbf7; border-color: #d3eede; }
.alb-stats-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.4em;
}
.alb-stats-card-head h3 { margin: 0; font-size: 1.1em; }
.alb-stats-card-desc { font-size: 0.85em; color: #666; margin: 0 0 0.6em; }
.alb-tag {
	font-size: 0.75em;
	font-weight: 700;
	padding: 0.25em 0.6em;
	border-radius: 999px;
	white-space: nowrap;
}
.alb-tag-need { background: #fff2e0; color: #c8650f; }
.alb-tag-ok { background: #e8f5e9; color: #1b5e20; }

/* Mini barre de progression par stand */
.alb-card-progress {
	height: 7px;
	background: #eef1f4;
	border-radius: 999px;
	overflow: hidden;
	margin: 0.2em 0 0.9em;
}
.alb-card-progress-bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #2c7be5, #4f9bff);
	transition: width 0.6s ease;
}
.alb-card-progress-bar.is-complete { background: linear-gradient(90deg, #2ecc71, #27ae60); }

/* Liste des créneaux */
.alb-stats-slots { list-style: none; margin: 0; padding: 0; }
.alb-stats-slots li {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0;
	border-top: 1px solid #f1f1f3;
	font-size: 0.92em;
}
.alb-stats-slots li:first-child { border-top: none; }
.alb-stats-slots li.is-full { opacity: 0.6; }
.alb-stats-slot-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ecc71;
	box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}
.alb-stats-slot-dot.is-full { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12); }
.alb-stats-slot-label { flex: 1 1 auto; }

/* Pastilles places restantes */
.alb-pill {
	flex: 0 0 auto;
	font-size: 0.78em;
	font-weight: 700;
	padding: 0.22em 0.7em;
	border-radius: 999px;
	white-space: nowrap;
}
.alb-pill-free { background: #e8f7ee; color: #1b8a4b; }
.alb-pill-full { background: #fdecea; color: #c0392b; }

.alb-stats-empty { color: #999; font-style: italic; margin: 0.3em 0 0; }

/* =========================================================
   Bandeau compact  [al_benevoles_cta]
   ========================================================= */
.alb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1em 1.4em;
	background: linear-gradient(135deg, #2c7be5, #1a68d1);
	color: #fff;
	border-radius: 14px;
	padding: 1.3em 1.6em;
	text-align: center;
	box-shadow: 0 6px 20px rgba(44, 123, 229, 0.25);
}
.alb-cta.is-complete {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	box-shadow: 0 6px 20px rgba(46, 204, 113, 0.25);
}
.alb-cta-text { font-size: 1.25em; font-weight: 700; }
.alb-cta-number { font-size: 1.35em; font-weight: 800; }
.alb-cta-btn {
	background: #fff;
	color: #1a68d1;
	text-decoration: none;
	padding: 0.65em 1.6em;
	font-weight: 700;
	white-space: nowrap;
}
.alb-cta-btn:hover { background: #f0f6ff; color: #1a68d1; }