/* ==========================================================================
   Gestion Événements — styles front-end.

   Les couleurs (fond des cartes, texte, accent, boutons, cadre) sont
   pilotées par les réglages du plugin (Événements > Réglages >
   Apparence), injectés en variables CSS --evt-custom-* sur :root par
   EVT_Shortcodes::css_couleurs_personnalisees(). Le thème actif reste
   utilisé comme filet de secours si un réglage venait à être vide.
   ========================================================================== */

/* Police de marque du site ("Le Globe"), appliquée spécifiquement à la
   liste des événements (.evt-grille) — le reste du plugin (fiche
   événement, formulaire de réservation) continue d'hériter de la
   police du thème actif. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

.evt-grille {
	font-family: 'Satoshi', sans-serif;
}
.evt-grille .evt-carte-titre,
.evt-grille .evt-carte-titre a {
	font-family: 'Satoshi', sans-serif;
	color: var(--evt-texte);
}
.evt-grille .evt-carte-titre a:hover {
	color: var(--evt-accent);
	opacity: .8;
}

/* Variables globales de couleur (disponibles sur toutes les pages du
   plugin : liste, fiche événement, formulaire de réservation — pas
   seulement à l'intérieur de .evt-section, qui n'entoure que la
   liste). Le thème actif sert de filet de secours si un réglage du
   plugin est vide. */
:root {
	--evt-accent: var(--evt-custom-accent, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #6b4f3b)));
	--evt-accent-text: var(--evt-custom-accent-texte, var(--wp--preset--color--base, #ffffff));
	--evt-text-muted: var(--evt-custom-texte-secondaire, var(--wp--preset--color--tertiary, #6b6b6b));
	--evt-border: rgba(0, 0, 0, .1);
	--evt-texte: var(--evt-custom-texte, inherit);
	--evt-carte-fond: var(--evt-custom-fond-carte, #ffffff);
	--evt-carte-cadre: var(--evt-custom-cadre, transparent);
	--evt-bouton-voir-fond: var(--evt-custom-bouton-voir-fond, var(--evt-accent));
	--evt-bouton-voir-texte: var(--evt-custom-bouton-voir-texte, var(--evt-accent-text));
	--evt-submit-fond: var(--evt-custom-submit-fond, var(--evt-accent));
	--evt-submit-texte: var(--evt-custom-submit-texte, var(--evt-accent-text));
}

.evt-section {
	font-family: inherit;
	color: inherit;
	padding: 48px 20px;
	box-sizing: border-box;
}
.evt-section * { box-sizing: border-box; }

/* ===== Bandeau d'introduction ===== */
.evt-intro { max-width: 680px; margin: 0 auto 40px; text-align: center; }

:where(.evt-intro-label) {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--evt-accent);
	font-weight: 600;
}
.evt-intro-label { margin: 0 0 8px; }

.evt-intro-titre { margin: 0 0 12px; line-height: 1.25; }

:where(.evt-intro-separateur) { color: var(--evt-border); letter-spacing: 4px; }
.evt-intro-separateur { display: block; margin-bottom: 16px; font-size: 14px; }

:where(.evt-intro-texte) { color: var(--evt-text-muted); font-size: .95em; line-height: 1.8; }
.evt-intro-texte p { margin: 0 0 8px; }

/* ===== Onglets de filtre ===== */
.evt-onglets {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 36px;
}

:where(.evt-onglet) {
	background: transparent;
	border: 1px solid var(--evt-border);
	color: inherit;
	border-radius: 999px;
}
.evt-onglet {
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	padding: 8px 18px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
:where(.evt-onglet:hover) { border-color: var(--evt-accent); color: var(--evt-accent); }

:where(.evt-onglet-actif),
:where(.evt-onglet-actif:hover) {
	background: var(--evt-accent);
	border-color: var(--evt-accent);
	color: var(--evt-accent-text);
}

/* ===== Grille d'événements ===== */
.evt-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px 28px;
	max-width: 1160px;
	margin: 0 auto;
}

.evt-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--evt-carte-fond);
	color: var(--evt-texte);
	border: 1px solid var(--evt-carte-cadre);
	border-radius: 10px;
	overflow: hidden;
}

.evt-carte-image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
:where(.evt-carte-image) { background: var(--evt-border); }
.evt-carte-image-lien { display: block; width: 100%; height: 100%; }
.evt-carte-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .5s ease;
}
.evt-carte:hover .evt-carte-image img { transform: scale(1.04); }
:where(.evt-carte-image-placeholder) { background: var(--evt-border); }
.evt-carte-image-placeholder { width: 100%; height: 100%; }

.evt-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	font-weight: 600;
}
:where(.evt-badge) { border-radius: 999px; color: #fff; }
:where(.evt-badge-complet) { background: #a13d3d; }
:where(.evt-badge-gratuit) { background: #3f7d4d; }

/* Pastille date en évidence sur la vignette de la carte */
.evt-date-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	min-width: 52px;
	padding: 6px 8px;
}
:where(.evt-date-badge) {
	background: #fff;
	color: #1a1a1a;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.evt-date-badge-jour { font-size: 20px; font-weight: 800; }
.evt-date-badge-mois { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
:where(.evt-date-badge-mois) { color: var(--evt-accent); }

.evt-carte-contenu { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }

.evt-carte-titre { margin: 0 0 8px; line-height: 1.3; font-size: 1.15em; }
:where(.evt-carte-titre a) { color: inherit; text-decoration: none; }
:where(.evt-carte-titre a:hover) { color: var(--evt-accent); }

:where(.evt-carte-infos) { color: var(--evt-text-muted); }
.evt-carte-infos { font-size: 12px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

:where(.evt-carte-date) { color: var(--evt-accent); }
.evt-carte-date { font-weight: 700; }

.evt-carte-lieu::before { content: '📍 '; }

/* Pastilles prix / places restantes */
.evt-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

.evt-pastille {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	white-space: nowrap;
}
:where(.evt-pastille) { border-radius: 999px; background: rgba(0,0,0,.06); color: inherit; }

:where(.evt-pastille-prix) { background: var(--evt-accent); color: var(--evt-accent-text); }
:where(.evt-pastille-gratuit) { background: #3f7d4d; color: #fff; }

:where(.evt-pastille-places) { background: transparent; border: 1px solid var(--evt-border); color: var(--evt-text-muted); }
.evt-pastille-places { border-style: solid; border-width: 1px; }
:where(.evt-pastille-complet) { background: #a13d3d; border-color: #a13d3d; color: #fff; }

.evt-carte-excerpt { font-size: .9em; line-height: 1.7; margin: 0 0 16px; flex: 1; }

.evt-carte-footer {
	margin: 0;
	margin-top: auto;
}

/* Bouton "Voir +" : pleine largeur de la colonne, couleur configurable
   depuis les réglages (Événements > Réglages > Apparence). */
.evt-lien-voir {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	background: var(--evt-bouton-voir-fond);
	color: var(--evt-bouton-voir-texte);
	transition: opacity .2s ease, transform .2s ease;
}
.evt-lien-voir:hover { opacity: .88; color: var(--evt-bouton-voir-texte); transform: translateY(-1px); }

.evt-aucun { text-align: center; }
:where(.evt-aucun) { color: var(--evt-text-muted); font-style: italic; }

/* ===== Fiche événement : mise en page 2 colonnes (photo à gauche) ===== */
.evt-fiche-layout {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 8px;
}

.evt-fiche-media { position: sticky; top: 24px; }

.evt-hero-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}
:where(.evt-hero-image) { border-radius: 8px; }

.evt-hero-image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.evt-hero-infos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.evt-hero-info {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
}
:where(.evt-hero-info) {
	background: rgba(0,0,0,.06);
	color: var(--evt-texte);
	border-radius: 999px;
}
:where(.evt-hero-gratuit) { background: #3f7d4d; color: #fff; }
:where(.evt-hero-prix) { background: var(--evt-accent); color: var(--evt-accent-text); }
:where(.evt-hero-places) { background: rgba(0,0,0,.06); color: var(--evt-texte); }
:where(.evt-hero-complet) { background: #a13d3d; color: #fff; }

@media (max-width: 780px) {
	.evt-fiche-layout { grid-template-columns: 1fr; gap: 20px; }
	.evt-fiche-media { position: static; }
	.evt-hero-image { aspect-ratio: 16 / 9; max-height: 320px; }
}

/* ===== Description en tête de fiche événement ===== */
.evt-description { font-size: 1.05em; line-height: 1.8; margin-bottom: 24px; }

/* ===== Formulaire de réservation ===== */
.evt-reservation { margin-top: 32px; padding: 28px; max-width: 560px; }
:where(.evt-reservation) { border: 1px solid var(--evt-border); border-radius: 6px; }

.evt-reservation h3 { margin-top: 0; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.evt-badge-gratuit-inline {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 3px 10px;
	white-space: nowrap;
	flex-shrink: 0;
}
:where(.evt-badge-gratuit-inline) { background: #3f7d4d; color: #fff; border-radius: 999px; }
:where(.evt-badge-sur-place-inline) { background: #b45309; }

.evt-recap-gratuit { font-weight: 500; }
:where(.evt-recap-gratuit) { color: #3f7d4d; }

.evt-recap-sur-place { font-weight: 500; }
:where(.evt-recap-sur-place) { color: #b45309; }

/* Date de l'événement mise en évidence sur l'écran de réservation */
.evt-reservation-date {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	margin-bottom: 20px;
}
:where(.evt-reservation-date) {
	background: rgba(0,0,0,.03);
	border-left: 4px solid var(--evt-accent);
	border-radius: 4px;
}
.evt-reservation-date-jour { font-size: 30px; font-weight: 800; line-height: 1; }
:where(.evt-reservation-date-jour) { color: var(--evt-accent); }
.evt-reservation-date-detail { display: flex; flex-direction: column; line-height: 1.3; }
.evt-reservation-date-mois { font-size: 14px; font-weight: 700; text-transform: capitalize; }
.evt-reservation-date-heure { font-size: 13px; }
:where(.evt-reservation-date-heure) { color: var(--evt-text-muted); }
.evt-reservation-date-heure::before { content: '🕒 '; }

.evt-recap { font-size: .9em; margin-bottom: 18px; }
:where(.evt-recap) { color: var(--evt-text-muted); }

.evt-champ { margin-bottom: 14px; }
.evt-champ label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13px; }
.evt-champ input {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: inherit;
	background: #fff;
}
:where(.evt-champ input) { border: 1px solid var(--evt-border); border-radius: 4px; }
:where(.evt-champ input:focus) { outline: none; border-color: var(--evt-accent); }

.evt-montant-calcule { padding: 12px 14px; font-size: .9em; margin-bottom: 18px; line-height: 1.8; }
:where(.evt-montant-calcule) { background: rgba(0,0,0,.03); border: 1px dashed var(--evt-border); border-radius: 4px; }
:where(.evt-montant-acompte) { color: var(--evt-accent); }
.evt-montant-acompte { font-size: 1.1em; font-weight: 700; }

/* Bouton de réservation ("Réserver et payer l'acompte" / "...et payer"
   / "...gratuitement") : couleur configurable indépendamment du reste
   (Événements > Réglages > Apparence). S'appuie sur le style bouton du
   thème (.wp-element-button) quand il existe ; sinon fond plein visible. */
:where(.evt-btn) {
	background: var(--evt-submit-fond);
	color: var(--evt-submit-texte);
	border-radius: 4px;
}
.evt-btn,
.evt-btn-submit {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding: 12px 24px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: opacity .2s ease;
	width: 100%;
}
.evt-btn:hover,
.evt-btn-submit:hover { opacity: .88; color: var(--evt-submit-texte); }
.evt-btn[disabled] { opacity: .6; cursor: not-allowed; }

.evt-alert { padding: 12px 16px; margin-bottom: 18px; font-size: .9em; }
:where(.evt-alert) { border-radius: 4px; }
:where(.evt-alert-succes) { background: #eef3ea; color: #4b6b3b; border: 1px solid #cfe0c2; }
:where(.evt-alert-erreur) { background: #f7eae8; color: #a13d3d; border: 1px solid #eac9c4; }

.evt-complet { font-weight: 600; }
:where(.evt-complet) { color: #a13d3d; }

/* ===== Responsive ===== */
@media (max-width: 600px) {
	.evt-section { padding: 32px 16px; }
	.evt-onglets { gap: 4px; }
	.evt-onglet { padding: 6px 14px; font-size: 12px; }
}

/* ===== Admin (back-office, non concerné par le thème du site) ===== */
.evt-wrap .form-table th { width: 260px; }

/* Page "Contrôle d'accès" */
.evt-resultat-controle { margin-bottom: 24px; max-width: 420px; }
.evt-controle-carte { border-radius: 8px; padding: 18px 20px; text-align: center; }
.evt-controle-icone { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.evt-controle-titre { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.evt-controle-details { text-align: left; background: rgba(255,255,255,.6); border-radius: 6px; padding: 12px 14px; font-size: 13px; }
.evt-controle-details p { margin: 0 0 4px; }
.evt-controle-ok { background: #eef3ea; color: #1a7f37; }
.evt-controle-ok .evt-controle-details { color: #333; }
.evt-controle-attention { background: #fdf3e2; color: #b45309; }
.evt-controle-attention .evt-controle-details { color: #333; }
.evt-controle-erreur { background: #f7eae8; color: #b91c1c; }
.evt-controle-erreur .evt-controle-details { color: #333; }

/* Liste d'administration des événements (edit.php?post_type=evenement) */
.wp-list-table .column-evt_date,
.wp-list-table .column-evt_lieu { width: 12%; }
.wp-list-table .column-evt_prix,
.wp-list-table .column-evt_reservees,
.wp-list-table .column-evt_restantes { width: 10%; text-align: center; }

/* ==========================================================================
   Image Story — bouton de partage (sur chaque carte, façon Facebook) +
   modale de prévisualisation/génération de l'image (canvas généré côté
   navigateur, aucun traitement serveur).
   ========================================================================== */

.evt-story-btn {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}
:where(.evt-story-btn) {
	background: rgba(20, 20, 20, .55);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	backdrop-filter: blur(2px);
	transition: transform .2s ease, background .2s ease;
}
.evt-story-btn:hover { transform: scale(1.08); }
:where(.evt-story-btn:hover) { background: rgba(20, 20, 20, .8); }
.evt-story-btn svg { display: block; }

/* Superposition plein écran */
.evt-story-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 10, .85);
	padding: 24px 16px;
	box-sizing: border-box;
}
.evt-story-overlay * { box-sizing: border-box; }

.evt-story-modale {
	background: #fff;
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	padding: 20px;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1a1a1a;
}

.evt-story-titre { margin: 0 0 14px; font-size: 17px; font-weight: 700; padding-right: 30px; }

.evt-story-fermer {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	border: none;
	background: rgba(0,0,0,.06);
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
.evt-story-fermer:hover { background: rgba(0,0,0,.12); }

.evt-story-canvas-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	overflow: hidden;
	background: #111;
	margin-bottom: 16px;
}
.evt-story-canvas-wrap canvas { width: 100%; height: 100%; display: block; }

.evt-story-chargement {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	background: rgba(0,0,0,.35);
}
.evt-story-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: evt-story-rotation 0.8s linear infinite;
	margin-right: 8px;
}
@keyframes evt-story-rotation { to { transform: rotate(360deg); } }

.evt-story-erreur {
	color: #a13d3d;
	background: #f7eae8;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

.evt-story-note {
	color: #2c5b2c;
	background: #eef3ea;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

.evt-story-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.evt-story-action {
	flex: 1;
	min-width: 140px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	border: none;
	text-decoration: none;
}
.evt-story-action-telecharger { background: #1a1a1a; color: #fff; }
.evt-story-action-telecharger:hover { opacity: .88; color: #fff; }
.evt-story-action-facebook { background: #1877F2; color: #fff; }
.evt-story-action-facebook:hover { opacity: .88; color: #fff; }
.evt-story-action-partager { background: #EF7F74; color: #FFF3E5; }
.evt-story-action-partager:hover { opacity: .88; color: #FFF3E5; }
.evt-story-action[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
	.evt-story-modale { padding: 16px; max-width: 100%; }
}