/* ==========================================================================
   DOJO-EVENTS.CSS — Styles Events Manager du Dojo de St-Cergue
   ==========================================================================
   Surcharges de la feuille STOCK du plugin (events-manager.min.css).
   Chargé par functions.php APRÈS la feuille du plugin (deps: events-manager).

   ⚠️ Ne JAMAIS renommer ce fichier « events-manager.css » : EM détecterait
   ce nom dans le thème et le chargerait À LA PLACE de sa propre feuille.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RÈGLES HISTORIQUES — déplacées de style.css le 10.08.2026
   Tri effectué au passage :
   - SUPPRIMÉ (obsolète, le skeleton v3b ne génère plus ces éléments) :
     .em .icon-reversed (l'ancien H1 à icône), .em-event-info / .em-event-when
     h2-h3 (l'ancien bloc date/heure), l'ancien style du Booking Form
     (.em-booking-form-tickets en flex — remplacé par la section 6).
   - CONSERVÉ : .cours-infos (pages cours), les cartes de listes em-grid,
     les correctifs mobile de la page /enseignements/stages/ (documentés),
     l'image 4/3 des listes (séparée de la règle #right-sidebar).
   -------------------------------------------------------------------------- */

/* Image des listes d'événements (2 colonnes desktop) — ex-règle combinée avec #right-sidebar */
.em.em-list .em-item .em-item-image img {
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px 0 0 10px;
	max-height: 280px;
}

/* ===== Event page (règles historiques) ===== */
/*Event link*/
/*.em.pixelbones a {
	color: var(--accent-2)!important;
}*/
.cours-infos {
	display: flex;
	gap: 20px;
    flex-flow: wrap;
}
.cours-infos @media (max-width: 860px) {
	.cours-infos {
		flex-direction: column;
	}
	.cours-infos }
.em-item-info h3.em-item-title a {
	font-family: Poppins, sans-serif;
    font-weight: 300;
    line-height: 1.5em;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--contrast-5);
    color: var(--contrast)!important;
}
.em.em-list.em-grid>div.em-item {

	transition: all .3s ease-out;
}
.em.em-list.em-grid>div.em-item{
		border-radius: 15px;
}
/*.em.em-list.em-grid>div.em-item:last-child {
		border-radius: 0 15px 0 0;
}*/
.em.em-list.em-grid>div.em-item .em-item-image:not(.has-placeholder)>div img {
		border-radius: 15px 15px 0 0;
}
.em.em-list.em-grid>div.em-item:hover {
    transform: translate3d(-1px, -1px, 0px);
    transform-origin: right bottom;
}

/* --------------------------------------------------------------------------
   La barre blanche verticale de 4px sur le bloc d'infos des evenements

   Origine : events-manager.css (copie de la feuille du plugin) pose
       .em.em-list .em-item .em-item-info { border-left: 4px solid var(--default-border); }
   avec --default-border: #FFFFFF. C'est un separateur concu pour la mise en
   page desktop 2 colonnes (image a gauche, infos a droite).

   Pourquoi elle se voit : le corps de la carte n'est pas blanc mais en
   var(--base) (#f7f7f7). La barre blanche ressort donc sur toutes les cartes,
   grid comprises, et a toutes les largeurs — la regle n'est dans aucun
   media query.

   Sur la variante grid l'image est au-dessus et les infos en dessous : une
   bordure a GAUCHE n'y a aucun sens structurel. On la retire partout, et le
   padding du bloc d'infos passe de `10px 10px 20px 15px` (asymetrique, 19px a
   gauche avec la bordure contre 10px a droite) a `12px 20px 22px` : symetrique
   et plus aere. Verifie a 410px : le titre tient toujours sur une ligne, il
   reste 310px de largeur de texte utile.

   Le selecteur du padding reprend `> div.em-item` : c'est la forme utilisee
   par events-manager.css, plus specifique que `.em-grid .em-item`.
   -------------------------------------------------------------------------- */

.em.em-list .em-item .em-item-info,
.em.em-list.em-grid > div.em-item .em-item-info {
	border-left: 0;
}

.em.em-list.em-grid > div.em-item .em-item-info {
	padding: 12px 20px 22px;
}


/* --------------------------------------------------------------------------
   (Les anciens correctifs mobiles « Partie 1/2 » de la liste non-grid ont été
   remplacés le 11.08.2026 par la section 7 — cartes à toutes les largeurs.)
   -------------------------------------------------------------------------- */



/* ==========================================================================
   PAGE ÉVÉNEMENT — refonte v3b (10.08.2026)

   Sommaire :
     1. Cadre infos clés   (.dojo-keyfacts — généré par le format single event)
     2. Titres bicolores    (.dojo-accent)
     3. Section lieu        (.dojo-location)
     4. Bandeau « Nos autres stages »
                            (.dojo-others — GP Element, hook before_footer)
     5. Harmonisation Events Manager (liens, boutons — feuille stock)
     6. Zone inscription (billets · formulaire · paiement)

   Dépendances :
     - Format single event (Events > Settings > Formats) : classes dojo-*
     - Bandeau « autres stages » : GP Element before_footer + shortcode
       [dojo_autres_stages] défini dans functions.php du child theme
     - Variables GP : --accent, --base-2, --contrast, --contrast-2, --contrast-3

   NB : les anciennes règles .em-event-when / .em-event-info / .icon-reversed
   plus haut dans ce fichier sont devenues inertes (le nouveau format ne génère
   plus ces éléments). Sans effet de bord — nettoyage possible ultérieurement.
   ==========================================================================
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CADRE INFOS CLÉS
   -------------------------------------------------------------------------- */

.dojo-keyfacts {
	display: grid;
	/* auto-fit : la grille s'adapte au nombre de cellules réellement présentes
	   (les conditionnels {has_bookings}/{has_location} peuvent en masquer).
	   2 cellules = 2 colonnes pleines, 4 cellules = 4 colonnes. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(11, 5, 0, .07);
	margin: 8px 0 48px;
}

.dojo-keyfacts .kf {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 20px 22px;
	border-right: 1px solid var(--contrast-3);
}

.dojo-keyfacts .kf:last-child {
	border-right: none;
}

.dojo-keyfacts .kf-icon {
	color: var(--accent);
	font-size: 20px;
	margin-top: 2px;
	flex: none;
}

/* Libellé (DATES, LIEU, PRIX, INSCRIPTION) */
.dojo-keyfacts .kf-t {
	display: block;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--contrast-2);
	font-weight: 500;
}

/* Valeur principale */
.dojo-keyfacts .kf-v {
	display: block;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.35;
	margin-top: 2px;
	color: var(--contrast);
}

.dojo-keyfacts .kf-v a {
	text-decoration: none;
}

/* Sous-ligne (horaires, ville) */
.dojo-keyfacts .kf-s {
	display: block;
	font-size: 12.5px;
	color: var(--contrast-2);
	margin-top: 1px;
}

.dojo-keyfacts .kf-closed {
	color: var(--contrast-2);
}

/* Option : jours/mois avec majuscule (« Ven 11 Sept – Dim 13 Sept 2026 »).
   Décommenter pour activer. */
/*
.dojo-keyfacts .kf-dates .kf-v {
	text-transform: capitalize;
}
*/

/* Responsive : 2 colonnes en tablette, 1 en mobile */
@media (max-width: 900px) {
	.dojo-keyfacts {
		grid-template-columns: 1fr 1fr;
	}
	.dojo-keyfacts .kf {
		border-bottom: 1px solid var(--contrast-3);
	}
	.dojo-keyfacts .kf:nth-child(even) {
		border-right: none;
	}
}

@media (max-width: 520px) {
	.dojo-keyfacts {
		grid-template-columns: 1fr;
	}
	.dojo-keyfacts .kf {
		border-right: none;
	}
	.dojo-keyfacts .kf:last-child {
		border-bottom: none;
	}
}


/* --------------------------------------------------------------------------
   2. TITRES BICOLORES — mot accentué dans les h2 du format
   -------------------------------------------------------------------------- */

.dojo-accent {
	color: var(--accent);
}


/* --------------------------------------------------------------------------
   3. SECTION LIEU
   -------------------------------------------------------------------------- */

/* Sélecteur escaladé : la feuille stock pose margin:0 sur
   « .em.em-item.em-item-single > section » (0,3,1) et battait .dojo-location seul */
.em.em-item.em-item-single > section.dojo-location,
.dojo-location {
	margin-top: 48px;
}

.dojo-location-address {
	margin: 6px 0 16px;
}

/* Lien « Site web » du lieu (attribut de lieu #_LATT{Site web}).
   Filet de sécurité : si le champ est vide, EM rend un lien sans texte —
   la ligne entière est masquée, y compris si le conditionnel {has_att_…}
   n'est pas interprété dans les formats de lieu. */
.dojo-loc-website:has(a:empty),
.dojo-loc-website:has(a[href=""]) {
	display: none;
}

.dojo-loc-website a {
	word-break: break-word;
}

.dojo-location .em-location-map,
.dojo-location [id^="em-location-map"] {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--contrast-3);
}


/* --------------------------------------------------------------------------
   4. BANDEAU « NOS AUTRES STAGES »
   GP Element « After Content – Évènements », hook generate_before_footer :
   - hors du wrapper EM single → aucune règle single-event ne touche les tuiles
   - hors du conteneur boxé → pleine largeur native, pas de hack calc()
   - fond beige réglé dans le conteneur GB (pas de CSS)
   Le shortcode [dojo_autres_stages] (functions.php) affiche les 3 prochains
   stages en excluant l'événement courant. Rendu des tuiles = stock EM,
   identique à la home.
   -------------------------------------------------------------------------- */

/* Cartes : EM les rend transparentes — sur le fond beige elles doivent
   rester blanches. Coins arrondis + overflow pour un hover propre.
   (Contexte before_footer : CSS ordinaire, aucun !important nécessaire.) */
.dojo-others .em.em-list.em-grid > div.em-item {
	background-color: var(--base-2);
	border-radius: 15px;
	overflow: hidden;
}

/* Lien « Tous les stages → » */
.dojo-others .dojo-all-link {
	text-align: right;
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 17px;
	margin: 36px 0 0;
}

.dojo-others .dojo-all-link a {
	text-decoration: none;
}

.dojo-others .dojo-all-link a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. HARMONISATION EVENTS MANAGER (feuille stock du plugin)
   La feuille pixelbones d'EM est conçue pour être thémée par variables CSS
   (système HSL). On redéfinit l'accent : bleu (hue 220) → terracotta du site
   #B25124 = hsl(19, 66%, 42%). Liens, boutons, focus et états actifs de tous
   les blocs EM prennent la couleur du site — sans un seul !important.
   -------------------------------------------------------------------------- */

.em.pixelbones,
.em.pixelbones.input,
.pixelbones {
	--accent-hue: 19;
	--accent-s: 66%;
	--accent-l: 42%;
}

/* Boutons EM : typographie et arrondi du site (le fond vient des variables) */
.em.pixelbones .button,
.em.pixelbones button[type="submit"],
.em.pixelbones input[type="submit"] {
	border-radius: 15px;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   5b. TYPOGRAPHIE DU CONTENU (zone description des événements)
   Pixelbones écrase la typo du site dans tout le wrapper .em.pixelbones :
   h1–h6 { font-weight:300 !important; letter-spacing:-1px !important },
   h2 = calc(--font-size + 20px) = 43px, h3 = +14px = 37px… alors que le
   standard du site (GeneratePress + child) est h2 40px / h3 29px / h4 24px,
   Poppins 500, line-height 1.5. On recale tout le contenu de la page
   événement sur l'échelle du site — portée : le wrapper .em-item-single entier,
   car les titres générés par le skeleton (« Le lieu », « Inscription ») sont
   frères de la section .em-event-content, pas enfants. Recalage — ce qui
   neutralise aussi les tailles réglées à la main bloc par bloc dans
   GenerateBlocks (classes gb-headline-xxxxxxxx, sans !important).
   Les h3 numérotés de la zone inscription sont exclus explicitement.
   Les listes retrouvent le rendu WordPress (puces extérieures, retrait) :
   pixelbones les met en « inside » sans retrait.
   NB : la couleur des liens reste le terracotta pixelbones (cohérent avec
   l'accent du design) — non modifiée ici.
   Validé le 11.08.2026 sur Tao MBD et Han Yang.
   -------------------------------------------------------------------------- */

.em.pixelbones.em-item-single h2 {
	font-size: 40px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	margin: 0 0 20px !important;
}

.em.pixelbones.em-item-single h3:not(.em-booking-section-title) {
	font-size: 29px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	margin: 0 0 20px !important;
}

.em.pixelbones.em-item-single h4 {
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	margin: 0 0 20px !important;
}

.em.pixelbones.em-item-single h5 {
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

.em.pixelbones.em-item-single h6 {
	font-size: 18px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

.em.pixelbones.em-item-single ul {
	list-style: disc outside !important;
}

.em.pixelbones.em-item-single ol {
	list-style: decimal outside !important;
}

.em.pixelbones.em-item-single ul,
.em.pixelbones.em-item-single ol {
	margin: 0 0 1.5em 3em !important;
	padding-left: 0 !important;
}


/* ---------- Tableaux du contenu (bloc Tableau natif) ----------
   Programmes de voyage, grilles d'horaires… Le stock pixelbones les rend
   nus (filets gris, pas de fond) : on les habille comme les cartes du site.
   Le bloc Tableau de WordPress pose « thead { border-bottom: 3px solid } »
   en CSS inline (spécificité 0,1,0 mais chargé après) → contré ici. */
.em.pixelbones.em-item-single figure.wp-block-table {
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 14px;
	overflow: hidden;
	overflow-x: auto; /* mobile : défilement horizontal plutôt que compression */
	margin: 0 0 28px;
}

.em.pixelbones.em-item-single figure.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.em.pixelbones.em-item-single .wp-block-table thead {
	border-bottom: 0;
}

.em.pixelbones.em-item-single .wp-block-table thead th {
	background: #EFEAE3 !important;
	font-family: Poppins, sans-serif !important;
	font-weight: 600 !important;
	font-size: 12.5px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6E625A !important;
	padding: 14px 18px !important;
	border-bottom: 1px solid var(--contrast-3) !important;
	white-space: nowrap;
}

.em.pixelbones.em-item-single .wp-block-table tbody td {
	padding: 14px 18px !important;
	font-size: 15px !important;
	line-height: 1.5;
	border-bottom: 1px solid #F1EDE8 !important;
	vertical-align: top;
}

.em.pixelbones.em-item-single .wp-block-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.em.pixelbones.em-item-single .wp-block-table tbody tr:nth-child(even) td {
	background: #FCFAF8; /* zébrage très léger, lecture ligne à ligne */
}

/* Première colonne = repère (date, horaire) : terracotta, jamais coupée */
.em.pixelbones.em-item-single .wp-block-table tbody td:first-child {
	white-space: nowrap;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 14px !important;
	color: var(--accent);
}

/* Dernière colonne = donnée d'appoint : discrète */
.em.pixelbones.em-item-single .wp-block-table tbody td:last-child {
	white-space: nowrap;
	color: #6E625A;
	font-size: 14px !important;
}

@media (max-width: 760px) {
	.em.pixelbones.em-item-single .wp-block-table table {
		min-width: 640px; /* colonnes lisibles, la figure défile */
	}
	.em.pixelbones.em-item-single .wp-block-table thead th,
	.em.pixelbones.em-item-single .wp-block-table tbody td {
		padding: 12px 14px !important;
	}
}


/* --------------------------------------------------------------------------
   6. ZONE INSCRIPTION (billets · formulaire · paiement)
   Design validé sur maquette : parcours numéroté 1-2-3, billets en cartes,
   champs en 2 colonnes, récap + Stripe encadrés, CTA pleine largeur.
   Tout est du CSS sur le markup stock d'EM — aucun template modifié.
   -------------------------------------------------------------------------- */

/* ---------- Cadre général de la zone ---------- */
.em-event-bookings {
	counter-reset: dojo-section;
}

/* Espace au-dessus d'« Inscription » — même escalade que .dojo-location
   (le stock écrase le margin des <section> enfants directs du single) */
.em.em-item.em-item-single > section.em-event-bookings,
.em-event-bookings {
	margin-top: 48px;
}

/* Le lien « Se connecter » autonome au-dessus des billets fait doublon avec
   celui de la section informations : on masque SON TRIGGER seulement — le
   conteneur .em-login doit rester (il contient le formulaire de connexion
   que le trigger de la section 2 fait apparaître via JS). */
/* !important : le JS d'EM ré-affiche les triggers en style inline après
   un clic sur « Annuler » — sans lui, le lien du haut réapparaît. */
.em-event-booking-form > .em-login > .em-login-trigger {
	display: none !important;
}

/* ---------- Titres de section numérotés (1-2-3) ---------- */
/* Les !important ci-dessous sont nécessaires : la feuille stock impose en
   !important « h3 = 37px » et, sur les titres du formulaire, « 24px + border
   1px/3px + padding 15px » (l'effet cadre gris). dojo-events.css charge
   APRÈS elle (dépendance d'enqueue) : à spécificité égale, nous gagnons. */
.em.pixelbones h3.em-booking-section-title,
.em-event-bookings h3.em-booking-section-title {
	counter-increment: dojo-section;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: Poppins, sans-serif;
	font-weight: 500 !important;
	font-size: 18px !important;
	margin: 34px 0 6px !important;
	padding: 0 0 8px !important;
	border: none !important;
	border-bottom: 1px solid var(--contrast-3) !important;
	background: none !important;
	text-decoration: none;
	color: var(--contrast);
}

.em.pixelbones h3.em-booking-section-title::before,
.em-event-bookings h3.em-booking-section-title::before {
	content: counter(dojo-section);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: var(--accent);
	color: var(--base-2);
	font-size: 13px;
	font-weight: 600;
}

/* ---------- 1. Billets : la table EM rendue en cartes ---------- */
.em-tickets,
.em-tickets tbody {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.em-tickets thead {
	display: none; /* « Type de billet / Prix / Places » : porté par le design */
}

.em-tickets tr.em-ticket {
	display: grid;
	/* nom+description capés à 60% ; prix dans une colonne flexible alignée à
	   droite ; sélecteur dans une colonne FIXE de 90px — ainsi les « CHF » de
	   toutes les tuiles tombent sur la même verticale */
	grid-template-columns: minmax(0, 60%) 1fr 84px;
	gap: 2px 14px;
	align-items: center;
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 12px;
	padding: 14px 20px;
	margin-bottom: 10px;
}

.em-tickets td {
	border: none;
	padding: 0;
	background: none;
}

/* Nom + description du billet */
.em-tickets .em-bookings-ticket-table-type {
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 16px;
}

.em-tickets .em-bookings-ticket-table-type br {
	display: none;
}

.em-tickets .em-bookings-ticket-table-type .ticket-desc {
	display: block;
	font-family: Rubik, sans-serif;
	font-weight: 400;
	font-size: 15.5px;
	color: var(--contrast-2);
	line-height: 1.55;
	margin-top: 4px;
}

/* Prix */
.em-tickets tr.em-ticket .em-bookings-ticket-table-price {
	width: 100%;
	text-align: right !important; /* le stock force l'alignement des cellules */
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 17px;
	white-space: nowrap;
}

/* Sélecteur de places */
.em-tickets .em-bookings-ticket-table-spaces {
	text-align: right;
}

.em-tickets .em-bookings-ticket-table-spaces select {
	border: 1.5px solid var(--contrast-3);
	border-radius: 9px;
	min-width: 70px;
	width: auto;
	background-color: var(--base-2);
}

/* Billet épuisé : ligne grisée + badge « Complet » à la place du « N/D » */
.em-tickets tr.em-ticket:not(:has(select)) {
	opacity: .55;
}

.em-tickets tr.em-ticket:not(:has(select)) .em-bookings-ticket-table-spaces {
	font-size: 0; /* masque le « N/D » textuel d'EM */
}

.em-tickets tr.em-ticket:not(:has(select)) .em-bookings-ticket-table-spaces::after {
	content: "Complet";
	font-size: 13px;
	font-style: italic;
	color: var(--contrast-2);
	white-space: nowrap;
}

/* ---------- Billet unique ----------
   Avec UN seul billet, EM ne génère pas le tableau mais un champ « Places »
   nu (div.em-tickets-single). On l'habille comme les cartes multi-billets.
   Validé sur le rendu réel (Han Yang). */
.em-tickets-single .em-ticket {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 12px;
	padding: 16px 20px;
}

.em-tickets-single .em-ticket p.ticket-desc {
	flex: 1 1 60%;
	font-size: 15.5px;
	margin: 0 !important; /* pixelbones : p { margin-bottom: 25px !important } */
	color: var(--contrast);
}

.em-tickets-single .em-ticket p.em-tickets-spaces {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0 auto !important;
}

.em-tickets-single .em-ticket .em-tickets-spaces label {
	font-size: 13.5px;
	font-weight: 500;
	margin: 0;
}

.em-tickets-single .em-ticket select.em-ticket-select {
	width: auto;
	min-width: 70px;
	border: 1.5px solid var(--contrast-3);
	border-radius: 9px;
	background: var(--base-2);
}

.em-tickets-single .em-ticket .em-ticket-bookings:empty {
	display: none;
}

/* ---------- Infos participant (formulaire par billet) ----------
   Injecté par EM Pro quand qty > 0. Structure réelle (validée sur rendu) :
   un <tr> SANS classe contenant td.em-ticket-bookings, puis un
   div.em-ticket-booking par participant (strong = nom du formulaire,
   p.input-group par champ). Le stock impose display:block !important sur
   .input-group via « .em.em-event-booking-form .em-booking-form .input-group »
   (0,4,0) → préfixe .em.em-event-booking-form .em-booking-form requis. */

/* La ligne du tableau sort du layout table (sinon largeur de colonne) */
.em-tickets tbody tr:has(> td.em-ticket-bookings) {
	display: block;
}

.em-tickets td.em-ticket-bookings {
	display: block;
	width: 100%;
	padding: 0;
	counter-reset: attendee;
}

/* Variante billet unique (pas de tableau) */
.em-tickets-single .em-ticket .em-ticket-bookings {
	flex: 1 1 100%;
	counter-reset: attendee;
}

/* Une carte beige clair par participant */
.em.em-event-booking-form .em-booking-form .em-ticket-booking {
	counter-increment: attendee;
	background: #F4E6DC !important; /* stock : padding !important sur ce div */
	border-radius: 10px;
	padding: 14px 18px !important;
	margin: 8px 0 2px !important;
}

/* Titre du bloc (nom du formulaire participant) en libellé discret */
.em.em-event-booking-form .em-booking-form .em-ticket-booking strong {
	display: block;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8F3F1A;
	margin-bottom: 8px;
}

/* Numérotation automatique quand plusieurs participants */
.em.em-event-booking-form .em-booking-form .em-ticket-booking:not(:only-child) strong::after {
	content: " — participant " counter(attendee);
}

/* Champs : libellé + champ sur une ligne */
.em.em-event-booking-form .em-booking-form .em-ticket-booking p.input-group {
	background: none !important;
	border-radius: 0;
	padding: 0 !important;
	display: flex !important; /* stock : display block !important */
	align-items: center;
	gap: 12px;
	margin: 0 0 8px !important;
	font-size: 14px;
}

.em.em-event-booking-form .em-booking-form .em-ticket-booking p.input-group:last-child {
	margin-bottom: 0 !important;
}

.em.em-event-booking-form .em-booking-form .em-ticket-booking label {
	min-width: 130px;
	width: auto !important;
	margin: 0 !important;
	font-size: 13.5px;
	font-weight: 500;
}

.em.em-event-booking-form .em-booking-form .em-ticket-booking input.input {
	flex: 1;
	width: auto !important;
	padding: 8px 12px !important;
	border: 1.5px solid #E0CDBE !important;
	border-radius: 8px;
	background: var(--base-2) !important;
	font-size: 14px !important;
	margin: 0 !important;
	height: auto !important;
}

/* ---------- 2. Vos informations : grille 2 colonnes ---------- */
.em-booking-form-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
}

.em-booking-form-details > p {
	margin: 0;
}

.em-booking-form-details label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 5px;
	color: var(--contrast);
}

.em-booking-form-details input[type="text"],
.em-booking-form-details input[type="email"],
.em-booking-form-details input[type="tel"],
.em-booking-form-details select {
	width: 100%;
	border-color: var(--contrast-3);
}

/* Réorganisation logique des champs (l'ordre DOM d'EM est conservé,
   la grille réordonne) : nom/prénom · e-mail/tél · adresse · ville/NPA ·
   état/pays · consentement */
/* « Avez-vous déjà un compte ? Se connecter » : bandeau visible en tête de section */
.em-booking-form-details .em-login-trigger {
	order: 0;
	grid-column: 1 / -1;
	background: #F4E6DC;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--contrast);
}

.em-booking-form-details .em-login-trigger a {
	font-weight: 600;
}
.em-booking-form-details .input-last_name   { order: 1; }
.em-booking-form-details .input-first_name  { order: 2; }
.em-booking-form-details .input-user_email  { order: 3; }
.em-booking-form-details .input-dbem_phone  { order: 4; }
.em-booking-form-details .input-dbem_address { order: 5; grid-column: 1 / -1; }
.em-booking-form-details .input-dbem_city   { order: 6; }
.em-booking-form-details .input-dbem_zip    { order: 7; }
.em-booking-form-details .input-dbem_state  { order: 8; }
.em-booking-form-details .input-dbem_country { order: 9; }
.em-booking-form-details .em-consent-checkbox {
	order: 10;
	grid-column: 1 / -1;
	font-size: 16px;
	line-height: 1.6;
	color: var(--contrast);
}

/* ---------- 3. Récapitulatif ---------- */
.em-booking-form-summary {
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 12px;
	padding: 14px 20px;
}

.em-booking-form-summary .em-booking-summary {
	font-size: 14.5px;
}

/* ---------- Paiement (Stripe Elements) ---------- */
.em-booking-form .em-payment-gateways {
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 12px;
	padding: 18px 20px;
	margin-top: 16px;
}

/* ---------- CTA ---------- */
.em-booking-form-buttons {
	margin-top: 20px;
}

/* CTA « Réserver ma place » — sélecteurs (0,6,1)+ : la feuille stock cible
   ce bouton via « .em.pixelbones.input input[type=submit]:not([data-nostyle]) »
   (0,5,1) en !important (le div du formulaire porte la classe .input).
   Validé empiriquement sur les états actif ET désactivé. */
.em.pixelbones input[type="submit"].em-form-submit.em-button.em-booking-submit {
	display: block;
	width: 100%;
	/* le stock force height/line-height à 38px : avec le padding de 16px,
	   le texte débordait du cadre → hauteur libre, interligne normal */
	height: auto !important;
	line-height: 1.3 !important;
	padding: 16px !important;
	background: var(--accent) !important;
	color: var(--base-2) !important;
	border: none !important;
	border-radius: 15px !important;
	font-family: Poppins, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color .3s ease;
}

.em.pixelbones input[type="submit"].em-form-submit.em-button.em-booking-submit:hover {
	/* terracotta assombri (pas --accent-2 : orange vif #fb7500), texte blanc
	   épinglé (le stock le repassait en noir au survol) */
	background: #8F3F1A !important;
	color: var(--base-2) !important;
}

/* État désactivé (classe .disabled posée par EM tant que le formulaire est
   incomplet) : beige plein, volontaire et lisible */
.em.pixelbones input[type="submit"].em-form-submit.em-button.em-booking-submit.disabled,
.em.pixelbones input[type="submit"].em-form-submit.em-button.em-booking-submit:disabled {
	background: #D9C4B6 !important;
	color: var(--base-2) !important;
	border: none !important;
	cursor: not-allowed;
}

/* ---------- Résumé : respiration entre les cartes ---------- */
.em-booking-form-section-summary .em-booking-form-summary {
	margin-bottom: 18px;
}

.em-booking-form-section-confirm {
	margin-top: 18px;
}

.em-booking-form .em-payment-gateways p {
	margin: 0 0 10px;
	font-size: 15px;
}

/* Lignes du résumé (qty × billet × prix) */
.em-booking-summary .em-bs-row {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	font-size: 15px;
}

.em-booking-summary .em-bs-section-items .em-bs-row {
	border-bottom: 1px dashed var(--contrast-3);
}

.em-booking-summary .em-bs-cell-price {
	margin-left: auto;
	white-space: nowrap;
}

.em-booking-summary .em-bs-row-total {
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 17px;
}

/* ---------- Formulaire de connexion (révélé par « Se connecter ») ---------- */
/* Tuile pleine largeur ; le CONTENU (intro + formulaire) est centré dans
   une colonne de 560px, comme la page de connexion du site */
/* Les styles de carte sont portés par .em-login-content (masqué quand le
   formulaire est replié) et non par le conteneur .em-login — sinon une
   carte blanche VIDE apparaît au-dessus des billets tant que le visiteur
   n'a pas cliqué sur « Se connecter ». Sélecteur .em.em-… : le stock pose
   « padding: 0 » sur .em.em-event-booking-form .em-login. */
.em.em-event-booking-form .em-login {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

.em.em-event-booking-form .em-login .em-login-content {
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 16px;
	/* centrage du contenu par le padding : colonne de 560px au milieu.
	   (Les margin auto sur les <p> sont écrasés par pixelbones.) */
	padding: 64px max(24px, calc((100% - 560px) / 2)) 44px;
	margin-bottom: 28px;
}

/* Phrase d'intro (« Connectez-vous si vous avez déjà un compte ») */
.em-login .em-login-content > p:first-child {
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 18px;
}

/* Le formulaire en grille : Identifiant / Mot de passe côte à côte,
   puis la ligne d'actions, puis le passkey relégué en option secondaire
   (l'ordre visuel est géré par order — le DOM d'EM met le passkey avant) */
.em-login form.em-login-form {
	display: grid;
	grid-template-columns: 1fr; /* champs empilés, comme la page de connexion du site */
	gap: 4px;
}

.em-login form.em-login-form > p {
	margin: 0 0 12px;
}

.em-login form.em-login-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	margin-bottom: 5px;
}

.em-login form.em-login-form input[type="text"],
.em-login form.em-login-form input[type="password"] {
	width: 100%;
}

/* Actions : la feuille stock impose display:flex sur em-login-actions
   (boutons et options s'écrasaient sur une ligne) — on repasse en bloc.
   Sélecteurs longs : la règle stock des boutons de formulaire fait (0,5,0)
   en !important (.em.pixelbones .input .button:not(...) → 11px uppercase),
   il faut la dépasser. Validé visuellement sur le rendu déconnecté. */
.em-login .em-login-actions {
	grid-column: 1 / -1;
	order: 2;
	display: block !important;
	margin-top: 10px;
}

.em-login .em-login-buttons {
	display: flex !important;
	flex-direction: row;
	gap: 12px;
}

.em.pixelbones .em-login .em-login-actions .em-login-buttons button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	width: auto !important;
	padding: 14px !important;
	border-radius: 12px !important;
	font-family: Poppins, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.em.pixelbones .em-login .em-login-actions .em-login-buttons button.em-login-submit {
	background: var(--accent) !important;
	color: var(--base-2) !important;
	border: none !important;
}

.em.pixelbones .em-login .em-login-actions .em-login-buttons button.em-login-submit:hover {
	background: var(--accent-2) !important;
}

/* « Annuler » : bouton fantôme compact à droite */
.em.pixelbones .em-login .em-login-actions .em-login-buttons button.em-login-cancel {
	flex: 0 0 auto;
	background: transparent !important;
	border: 1px solid var(--contrast-3) !important;
	color: var(--contrast-2) !important;
	padding: 14px 32px !important;
	font-weight: 500 !important;
}

.em.pixelbones .em-login .em-login-actions .em-login-buttons button.em-login-cancel:hover {
	border-color: var(--contrast-2) !important;
	color: var(--contrast) !important;
	background: transparent !important;
}

.em-login .em-login-meta {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	font-size: 14px;
	margin-top: 16px;
	width: 100%;
}

.em-login .em-login-rememberme {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 14px;
}

.em-login .em-login-links {
	white-space: nowrap;
}

/* Connexion par clé d'accès : option secondaire sous un séparateur, centrée */
.em-login #secure-passkey-login-wrapper {
	grid-column: 1 / -1;
	order: 3;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--contrast-3);
	text-align: center;
	position: relative;
}

/* le « ou » centré sur le séparateur, comme la page de connexion du site */
.em-login #secure-passkey-login-wrapper::before {
	content: "ou";
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--base-2);
	padding: 0 14px;
	font-size: 14px;
	color: var(--contrast-2);
}

.em-login #secure-passkey-login-wrapper button {
	background: transparent;
	border: 1.5px solid var(--accent);
	color: var(--accent);
	border-radius: 12px;
	padding: 10px 24px;
	font-family: Poppins, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.em-login #secure-passkey-login-wrapper button:hover {
	background: var(--accent);
	color: var(--base-2);
}

@media (max-width: 640px) {
	.em-login form.em-login-form {
		grid-template-columns: 1fr;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.em-booking-form-details {
		grid-template-columns: 1fr;
	}
	.em-booking-form-details .input-dbem_address,
	.em-booking-form-details .em-consent-checkbox,
	.em-booking-form-details .em-login-trigger {
		grid-column: auto;
	}
	.em-tickets tr.em-ticket {
		grid-template-columns: 1fr auto;
	}
	.em-tickets .em-bookings-ticket-table-price {
		grid-column: 1;
	}
	/* Listes de la description : le retrait desktop (3em) mange trop de
	   largeur sur petit écran */
	.em.pixelbones.em-item-single ul,
	.em.pixelbones.em-item-single ol {
		margin-left: 1.25em !important;
	}
}


/* --------------------------------------------------------------------------
   7. LISTE DES ÉVÈNEMENTS — page /enseignements/stages/ (liste « non-grid »)
   Design validé sur maquette + bac à sable (11.08.2026) : chaque évènement
   est une CARTE HORIZONTALE (image 340px à gauche), qui s'empile en tuile
   verticale sous 760px — même langage visuel que les tuiles de l'accueil.
   Suppose le format de liste custom (voir kit-liste-stages) : date courte,
   heures seulement si pertinentes ({not_all_day}), prix (attribut Prix),
   S'inscrire / badge Complet. Icônes = celles du plugin (em-icon-*).
   Remplace les anciens correctifs mobiles « Partie 1/2 ».
   -------------------------------------------------------------------------- */

/* En-tête de mois (format d'en-tête de groupe : <h2 class="dojo-month">#s</h2>)
   — pixelbones impose h2 43px/300 : contre-!important nécessaires */
.em.pixelbones h2.dojo-month {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 24px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	margin: 44px 0 18px !important;
}

.em.pixelbones h2.dojo-month::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--contrast-3);
}

/* ---------- La carte ---------- */
.em.em-list:not(.em-grid) .em-item {
	display: grid;
	grid-template-columns: 1fr; /* sans image : une colonne */
	background: var(--base-2);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 20px 30px 0 #0000000d;
	margin-bottom: 26px;
	border: 0;
	padding: 0;
	transition: transform .3s ease-out, box-shadow .3s;
}

.em.em-list:not(.em-grid) .em-item:has(> .em-item-image) {
	grid-template-columns: 340px 1fr;
}

.em.em-list:not(.em-grid) .em-item:hover {
	transform: translate3d(-1px, -2px, 0);
	box-shadow: 0 24px 36px 0 #00000014;
}

/* Image : remplit la hauteur de la carte, coins gérés par overflow:hidden */
.em.em-list:not(.em-grid) .em-item .em-item-image {
	padding: 0;
}

.em.em-list:not(.em-grid) .em-item .em-item-image a {
	display: block;
	height: 100%;
}

.em.em-list:not(.em-grid) .em-item .em-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4/3;
	border-radius: 0; /* la règle historique arrondit à gauche : plus besoin */
	max-height: none;
	padding: 0;
}

/* Corps */
.em.em-list:not(.em-grid) .em-item .em-item-info {
	display: flex;
	flex-direction: column;
	border-left: 0 !important; /* barre blanche stock du layout 2 colonnes */
	border-top: 0;
	padding: 24px 30px 22px;
}

.em.em-list:not(.em-grid) .em-item h3.em-item-title {
	margin: 0 0 6px;
}

/* Méta : GRILLE À POSITIONS FIXES (esprit keyfacts, sans les cadres).
   Chaque type d'info a sa colonne attitrée sur TOUTES les cartes — priorité
   validée : quand (date, heures dessous) · où · combien. Une info absente
   laisse sa cellule vide au lieu de faire glisser les autres : l'œil
   retrouve la même structure de tuile en tuile.
   Spécificité (0,6,0) requise : le stock pose flex + flex-wrap sur
   « .em.em-list .em-item .em-item-info .em-item-meta » (0,5,0), et en
   colonne contrainte le wrap repliait les lignes en colonnes anarchiques. */
.em.em-list:not(.em-grid) .em-item .em-item-info .em-item-meta {
	display: grid;
	grid-template-columns: minmax(215px, 1.15fr) minmax(185px, 1fr) minmax(140px, .8fr);
	gap: 6px 26px;
	margin: 0 0 14px;
}

.em.em-list:not(.em-grid) .em-item .em-item-info .em-item-meta > div.em-item-meta-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	margin: 0;
	min-width: 0; /* un nom de lieu long passe à la ligne au lieu de déborder */
}

/* Les positions attitrées */
.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-date { grid-row: 1; grid-column: 1; }
.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-time { grid-row: 2; grid-column: 1; }
.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-location { grid-row: 1; grid-column: 2; }
.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-prices { grid-row: 1; grid-column: 3; }

/* Sous 1000px : une colonne — l'empilement suit l'ordre du markup,
   qui est l'ordre de priorité (date · heures · lieu · prix, voir kit) */
@media (max-width: 1000px) {
	.em.em-list:not(.em-grid) .em-item .em-item-info .em-item-meta {
		grid-template-columns: 1fr;
	}
	.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-date,
	.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-time,
	.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-location,
	.em.em-list:not(.em-grid) .em-item .em-item-meta > .em-event-prices {
		grid-row: auto;
		grid-column: auto;
	}
}

.em.em-list:not(.em-grid) .em-item .em-item-desc {
	font-size: 15.5px;
	max-width: 60ch;
	margin-bottom: 16px;
}

/* Actions : S'inscrire (terracotta) · Plus d'infos (lien) · badge Complet */
.em.em-list:not(.em-grid) .em-item .em-item-actions {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 22px;
	padding-top: 2px;
}

.em.pixelbones .em-item-actions a.em-event-book-now.button {
	display: inline-block;
	background: var(--accent) !important;
	color: var(--base-2) !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 11px 26px !important;
	font-family: Poppins, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	height: auto !important;
	line-height: 1.3 !important;
	transition: background .3s;
}

.em.pixelbones .em-item-actions a.em-event-book-now.button:hover {
	background: #8F3F1A !important;
	color: var(--base-2) !important;
}

.em.pixelbones .em-item-actions a.em-item-read-more {
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--contrast) !important;
	text-decoration: none;
	border: none !important;
	background: none !important;
}

.em.pixelbones .em-item-actions a.em-item-read-more:hover {
	color: var(--accent) !important;
	text-decoration: underline;
}

.dojo-full-badge {
	display: inline-block;
	background: #EFEAE3;
	color: #6E625A;
	font-family: Poppins, sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	font-style: italic;
	padding: 11px 22px;
	border-radius: 12px;
}

/* Mobile : la carte s'empile — identique aux tuiles de l'accueil */
@media (max-width: 760px) {
	.em.em-list:not(.em-grid) .em-item,
	.em.em-list:not(.em-grid) .em-item:has(> .em-item-image) {
		grid-template-columns: 1fr;
	}
	.em.em-list:not(.em-grid) .em-item .em-item-info {
		padding: 18px 20px 20px;
	}
	.em.em-list:not(.em-grid) .em-item .em-item-actions {
		flex-wrap: wrap;
		gap: 14px;
	}
}