/* =============================================
   PUBLIC CSS — Extension Activités
   ============================================= */

:root {
	--av-primary:   #1F45C7;
	--av-accent:    #FFD41F;
	--av-primary-dk:#1636a3;
	--av-success:   #27ae60;
	--av-danger:    #e74c3c;
	--av-warning:   #f39c12;
	--av-neutral:   #6b7280;
	--av-text:      #1a1a2e;
	--av-bg:        #f8fafc;
	--av-card-bg:   #ffffff;
	--av-border:    #e2e8f0;
	--av-radius:    12px;
	--av-radius-sm: 8px;
	--av-shadow:    0 4px 16px rgba(31,69,199,.08);
	--av-shadow-hover: 0 8px 28px rgba(31,69,199,.16);
}

/* ── Reset base ── */
.av-liste-wrap,
.av-detail-wrap,
.av-confirmation-wrap,
.av-espace-membre { box-sizing: border-box; }

/* ── Grille liste ── */
.av-grille {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 20px !important;
	margin: 24px 0 !important;
}
.av-vide { color: var(--av-neutral); font-style: italic; text-align: center; padding: 40px 0; }

/* ── Carte activité ── */
.av-card-activite {
	background: var(--av-card-bg);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s, transform .25s;
	box-shadow: var(--av-shadow);
}
.av-card-activite:hover {
	box-shadow: var(--av-shadow-hover);
	transform: translateY(-3px);
}
.av-card-activite.av-passee { opacity: .65; }

.av-card-img-link { display: block; position: relative; }
.av-card-img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.av-card-img-placeholder {
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e8edf5, #c8d4ec);
	font-size: 3rem;
}

.av-badge-overlay {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
}
.av-badge-complet  { background: var(--av-danger); }
.av-badge-passee   { background: var(--av-neutral); }
.av-badge-annulee  { background: #7f1d1d; }
.av-badge-xl       { font-size: 1rem; padding: 6px 18px; }

.av-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: flex-start; }
.av-card-categorie {
	display: inline-block;
	align-self: flex-start;
	font-size: .75rem;
	font-weight: 700;
	color: #1F45C7;
	background: #F8D600;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 2px 10px;
	border-radius: 4px;
}
.av-card-titre {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--av-text);
	margin: 0;
	line-height: 1.3;
	min-height: calc(1.1rem * 1.3 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.av-card-titre a { color: var(--av-primary); text-decoration: none; }
.av-card-titre a:hover { color: var(--av-primary-dk); }
.av-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--av-neutral); }
.av-meta-item { display: flex; align-items: center; gap: 6px; }

/* ── Barre de places ── */
.av-card-places, .av-detail-places {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.av-places-barre {
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
}
.av-places-remplie {
	height: 100%;
	border-radius: 3px;
	transition: width .4s;
}
.av-places-texte { font-size: .82rem; color: var(--av-neutral); }

/* ── Boutons ── */
.av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--av-radius-sm);
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	border: 2px solid transparent;
	text-decoration: none;
	transition: all .2s;
	line-height: 1;
}
.av-btn-primary {
	background: var(--av-primary);
	color: #fff !important;
	border-color: var(--av-primary);
}
.av-btn-primary:hover { background: var(--av-primary-dk); border-color: var(--av-primary-dk); color: #fff !important; }
.av-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.av-btn-outline {
	background: transparent;
	color: var(--av-primary);
	border-color: var(--av-primary);
}
.av-btn-outline:hover { background: var(--av-primary); color: #fff; }
.av-full-width { width: 100%; }
.av-btn-link { background: none; border: none; color: var(--av-primary); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

/* ── Détail activité ── */
.av-detail-wrap { width: 100%; box-sizing: border-box; }

/* Layout détail : visuel gauche + contenu droite sur PC */
.av-detail-visuel {
	float: left;
	width: 40%;
	margin: 0 24px 24px 0;
}
.av-detail-visuel img {
	width: 100%;
	height: auto;
	border-radius: var(--av-radius);
	display: block;
}

.av-detail-image {
	position: relative;
	border-radius: var(--av-radius);
	overflow: hidden;
	margin-bottom: 28px;
	max-height: 420px;
}
.av-detail-image img { width: 100%; height: 420px; object-fit: cover; display: block; }

.av-detail-content { padding: 0 4px; }
.av-detail-header { margin-bottom: 24px; }
.av-detail-categorie {
	display: inline-block;
	align-self: flex-start;
	font-size: .75rem;
	font-weight: 700;
	color: #1F45C7;
	background: #F8D600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 12px;
	border-radius: 4px;
	margin-bottom: 8px;
}
.av-detail-titre { font-size: 2rem; font-weight: 800; color: var(--av-primary); margin: 8px 0 16px; line-height: 1.2; }
.av-detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .95rem; color: var(--av-neutral); margin-bottom: 4px; }
.av-detail-places { margin: 16px 0; }
.av-detail-cta { margin: 24px 0; }
.av-detail-description { margin-top: 28px; font-size: 1rem; line-height: 1.7; color: var(--av-text); }
.av-annule-msg { display: flex; align-items: center; gap: 8px; color: var(--av-danger); font-weight: 700; font-size: 1rem; }

/* ── Pop-up ── */
#av-popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100vh !important;
	background: rgba(0,0,0,.65) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
	margin: 0 !important;
}
html.av-popup-open,
html.av-popup-open body,
body.av-popup-open {
	overflow: hidden !important;
	height: 100% !important;
}

.av-popup {
	background: var(--av-card-bg);
	border-radius: var(--av-radius);
	padding: 24px;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 20px);
	overflow-y: auto;
	position: relative;
	box-shadow: 0 24px 64px rgba(0,0,0,.4);
	-webkit-overflow-scrolling: touch;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* ── Sélecteur de type avec +/- ── */
.av-type-bloc {
	border: 2px solid var(--av-border);
	border-radius: 10px;
	transition: border-color .2s, background .2s;
	padding: 14px 16px;
}
.av-type-bloc.av-type-selected {
	border-color: var(--av-primary);
	background: #eff6ff;
}
.av-type-bloc.av-type-disabled {
	opacity: .6;
	background: #f4f4f5;
}
.av-type-bloc.av-type-grise {
	opacity: .75;
	background: #f8f8f9;
	border-style: dashed;
}
.av-type-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.av-type-info { flex: 1; }
.av-type-titre { font-weight: 700 !important; font-size: 1rem !important; color: var(--av-text) !important; display: block !important; }
.av-type-prix  { font-size: .875rem !important; color: var(--av-primary) !important; font-weight: 600 !important; display: block !important; margin-top: 2px !important; }
.av-type-note  { font-size: .8rem !important; color: var(--av-neutral) !important; display: block !important; margin-top: 2px !important; }
.av-note-danger { color: var(--av-danger) !important; }
.av-note-link   { color: var(--av-primary) !important; font-weight: 600 !important; text-decoration: none !important; }
.av-note-link:hover { text-decoration: underline; }

/* Compteur +/- */
.av-counter {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.av-counter-btn {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: 2px solid var(--av-border) !important;
	background: #fff !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all .15s !important;
	color: var(--av-text) !important;
	line-height: 1 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.av-counter-btn:hover:not(:disabled) {
	border-color: var(--av-primary) !important;
	color: var(--av-primary) !important;
	background: #eff6ff !important;
}
.av-counter-btn:disabled {
	opacity: .35 !important;
	cursor: not-allowed !important;
}
.av-counter-val {
	font-size: 1.1rem;
	font-weight: 700;
	min-width: 24px;
	text-align: center;
	color: var(--av-text);
}

.av-popup-close {
	position: absolute;
	top: 16px; right: 16px;
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--av-neutral);
	padding: 4px 8px;
	border-radius: 4px;
}
.av-popup-close:hover { background: #f1f5f9; color: var(--av-text); }

.av-popup-titre { font-size: 1.25rem; font-weight: 800; color: var(--av-text); margin: 0 0 20px; padding-right: 32px; }

.av-popup-retour {
	background: none; border: none; color: var(--av-primary);
	cursor: pointer; font-size: .875rem; font-weight: 600;
	padding: 0; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.av-popup-retour:hover { text-decoration: underline; }

.av-popup-notif {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: 16px;
}
.av-notif-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.av-notif-success { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.av-notif-warning { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.av-notif-info    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* ── Bandeaux ── */
.av-bandeau-connexion {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: .875rem;
	margin-bottom: 16px;
	color: #1e40af;
}
.av-bandeau-connexion a { color: var(--av-primary); font-weight: 700; }
.av-bandeau-soft {
	background: #f8fafc;
	border: 1px solid var(--av-border);
	border-radius: 6px;
	padding: 8px 14px;
	font-size: .85rem;
	margin-bottom: 14px;
	color: var(--av-neutral);
}
.av-bandeau-soft a { color: var(--av-primary); font-weight: 600; }

/* ── Types d'inscription ── */
.av-choix-types { display: flex; flex-direction: column; gap: 10px; }
.av-type-bloc {
	border: 2px solid var(--av-border);
	border-radius: 10px;
	transition: border-color .2s, background .2s;
}
.av-type-bloc:has(input:checked) {
	border-color: var(--av-primary);
	background: #eff6ff;
}
.av-type-bloc.av-type-disabled {
	opacity: .55;
	background: #f8fafc;
}
.av-type-label {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px 14px;
	padding: 14px 16px;
	cursor: pointer;
}
.av-type-bloc.av-type-disabled .av-type-label { cursor: not-allowed; }
.av-type-titre { font-weight: 700; font-size: 1rem; color: var(--av-text); }
.av-type-prix  { font-size: .9rem; color: var(--av-primary); font-weight: 700; text-align: right; }
.av-type-note  { grid-column: 2 / -1; font-size: .8rem; color: var(--av-neutral); }
.av-note-danger { color: var(--av-danger); }
.av-note-link   { color: var(--av-primary); font-weight: 600; text-decoration: none; }
.av-note-link:hover { text-decoration: underline; }

/* ── Modes de paiement ── */
.av-modes-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.av-mode-label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 14px !important;
	border: 2px solid var(--av-border) !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	font-size: .95rem !important;
	font-weight: 400 !important;
	transition: border-color .15s, background .15s !important;
	background: #fff !important;
	color: var(--av-text) !important;
}
.av-mode-label:has(input:checked) {
	border-color: var(--av-primary) !important;
	background: #eff6ff !important;
	font-weight: 600 !important;
}

/* ── Formulaire popup ── */
.av-form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 14px !important; }
.av-form-group label { font-weight: 600 !important; font-size: .875rem !important; color: var(--av-text) !important; }
.av-form-grid-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
@media (max-width: 480px) { .av-form-grid-2 { grid-template-columns: 1fr !important; } }
.av-input {
	border: 1.5px solid var(--av-border) !important;
	border-radius: 6px !important;
	padding: 9px 12px !important;
	font-size: .95rem !important;
	color: var(--av-text) !important;
	background: #fff !important;
	transition: border-color .15s !important;
	width: 100% !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
	display: block !important;
}
.av-input:focus { outline: none !important; border-color: var(--av-primary) !important; box-shadow: 0 0 0 3px rgba(31,69,199,.12) !important; }

/* Forcer box-sizing sur tout le contenu de la popup */
.av-popup, .av-popup * {
	box-sizing: border-box;
}

.av-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; cursor: pointer; }
.av-checkbox-label input { margin-top: 2px; flex-shrink: 0; }
.av-checkbox-label span { display: inline; }
.av-checkbox-label a { color: var(--av-primary) !important; text-decoration: underline !important; display: inline !important; }

/* Récap */
.av-recap {
	background: #f0f4ff;
	border: 1px solid #c7d4f5;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .9rem;
	margin-bottom: 18px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	color: #1e3a8a;
}

/* Total */
.av-total {
	background: #f8fafc !important;
	border: 1px solid var(--av-border) !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	text-align: right !important;
	font-size: .95rem !important;
	margin-top: 10px !important;
	font-weight: 400 !important;
}
.av-total strong { font-weight: 700 !important; }
.av-adherent-confirm { color: var(--av-success) !important; font-weight: 600 !important; font-size: .9rem !important; }

/* ── Confirmation ── */
.av-confirmation-wrap {
	max-width: 680px;
	margin: 40px auto;
	text-align: center;
}
.av-confirmation-icon { font-size: 3.5rem; display: block; margin-bottom: 12px; }
.av-confirmation-ok h1,
.av-confirmation-erreur h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }

.av-confirmation-details {
	background: var(--av-card-bg);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	padding: 24px;
	text-align: left;
	margin: 20px 0;
	font-size: .95rem;
	line-height: 1.7;
}
.av-confirmation-cheque, .av-confirmation-surplace {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 16px 0;
}
.av-confirmation-paye { color: var(--av-success); font-weight: 700; }
.av-confirmation-email { color: var(--av-neutral); font-size: .875rem; margin-top: 12px; }
.av-confirmation-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ── Espace membre ── */
.av-espace-membre { max-width: 780px; }
.av-inscriptions-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.av-inscription-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 16px;
	background: var(--av-card-bg);
	border: 1px solid var(--av-border);
	border-radius: 10px;
	padding: 14px 18px;
}
.av-inscription-passee { opacity: .65; }
.av-inscription-annulee { border-color: #fca5a5; background: #fef2f2; }
.av-inscription-date {
	display: flex; flex-direction: column; align-items: center;
	background: #f0f4ff; border-radius: 8px; padding: 6px 10px;
}
.av-inscription-jour { font-size: 1.4rem; font-weight: 800; color: var(--av-primary); line-height: 1; }
.av-inscription-mois { font-size: .7rem; font-weight: 700; color: var(--av-neutral); text-transform: uppercase; }
.av-inscription-info { display: flex; flex-direction: column; gap: 4px; }
.av-inscription-titre { font-weight: 700; font-size: .95rem; color: var(--av-text); }
.av-inscription-titre a { color: inherit; text-decoration: none; }
.av-inscription-titre a:hover { color: var(--av-primary); }
.av-inscription-meta { font-size: .82rem; color: var(--av-neutral); }

/* ── Badges frontend ── */
.av-badge {
	display: inline-flex; align-items: center;
	padding: 2px 10px; border-radius: 20px;
	font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.av-badge-success  { background: #d4edda; color: #155724; }
.av-badge-danger   { background: #f8d7da; color: #721c24; }
.av-badge-warning  { background: #fff3cd; color: #856404; }
.av-badge-info     { background: #d1ecf1; color: #0c5460; }
.av-badge-neutral  { background: #e2e3e5; color: #383d41; }

/* ── Message email adhérent détecté — même style que .am-email-check ── */
.av-email-check {
	margin-top: 8px;
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--av-radius-sm);
	font-size: .9rem;
	color: #856404;
}
.av-email-check a {
	color: var(--av-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	/* Popup : 10px partout garanti */
	#av-popup-overlay { padding: 10px !important; }
	.av-popup {
		padding: 16px !important;
		max-height: calc(100vh - 20px);
		border-radius: 8px;
	}
	.av-popup-titre { font-size: 1rem; padding-right: 28px; }

	/* Grille formulaire en colonne sur mobile */
	.av-form-grid-2 { grid-template-columns: 1fr !important; }
	.av-form-grid-2 .av-form-group[style*="grid-column"] { grid-column: 1 !important; }

	/* Types d'inscription */
	.av-type-header { flex-wrap: wrap; gap: 8px; }
	.av-counter { margin-top: 4px; }

	/* Modes de règlement */
	.av-modes-list { gap: 6px; }
	.av-mode-label { padding: 10px 12px; font-size: .875rem; }

	/* Détail activité */
	.av-detail-titre { font-size: 1.4rem; }
	.av-detail-meta { gap: 8px; font-size: .85rem; flex-direction: column; }
	.av-detail-image img { height: 200px; }

	/* Grille activités */
	/* Visuel communication détail */
	.av-detail-visuel { float: none; width: 100%; margin: 0 0 16px 0; }
	/* Grille : auto-fill gère déjà le responsive */
	.av-card-img { height: 180px; }

	/* Espace membre */
	.av-inscription-item { grid-template-columns: 48px 1fr; }
	.av-inscription-statut { grid-column: 2; }
}