/* ===========================================================
   Danz Builder — Frontend & preview-mode CSS.
   Breakpoints :
     - mobile  : ≤ 767px
     - tablet  : 768px → 1024px
     - desktop : ≥ 1025px
   =========================================================== */

/* === Spacer responsive ================================================== */
@media (max-width: 1024px) { .danz-spacer { height: var(--db-spacer-tab, inherit) !important; } }
@media (max-width: 767px)  { .danz-spacer { height: var(--db-spacer-mob, inherit) !important; } }

/* === Visibility utilities (per device) =================================== */
@media (max-width: 767px) {
	.danz-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.danz-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.danz-hide-desktop { display: none !important; }
}

/* === Columns ============================================================= */

/* Largeurs preservées par défaut (controls définissent grid-template-columns inline). */
.danz-columns { display: grid; min-width: 0; }
.danz-columns > .danz-columns__col { min-width: 0; }

/* --- Stack on tablet (default) and mobile --- */
@media (max-width: 1024px) {
	.danz-columns--stack-tablet {
		grid-template-columns: 1fr !important;
		gap: var(--db-cols-gap-tab, 20px) !important;
	}
}
@media (max-width: 767px) {
	.danz-columns--stack-mobile,
	.danz-columns--stack-tablet {
		grid-template-columns: 1fr !important;
		gap: var(--db-cols-gap-mob, 16px) !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.danz-columns--stack-mobile { gap: var(--db-cols-gap-tab, 20px) !important; }
}

/* --- Reverse stack order --- */
@media (max-width: 767px) {
	.danz-columns--stack-mobile.is-reverse-stack > .danz-columns__col,
	.danz-columns--stack-tablet.is-reverse-stack > .danz-columns__col {
		order: calc(-1 * var(--db-col-i, 0));
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.danz-columns--stack-tablet.is-reverse-stack > .danz-columns__col {
		order: calc(-1 * var(--db-col-i, 0));
	}
}

/* === Section container helper ============================================ */
.danz-section--boxed .danz-section__inner { padding: 0 24px; }
@media (max-width: 768px) {
	.danz-section--boxed .danz-section__inner { padding: 0 16px; }
}

/* === Buttons hover ====================================================== */
.danz-builder-content .danz-btn {
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.danz-builder-content .danz-btn:hover { filter: brightness(.96); }

/* === Studio widget wrappers ============================================= */
.danz-studio-widget { width: 100%; }
.danz-studio-widget--danz-horaire,
.danz-studio-widget--danz-prof-fiches {
	max-width: 100%;
}

/* Variables locales par widget — overridées via inline `--ds-*`. */
.danz-studio-widget {
	--ds-accent: var(--danz-color-primary, #6366f1);
	--ds-bg:     var(--danz-color-surface, #ffffff);
	--ds-text:   var(--danz-color-text, #0f172a);
	--ds-border: var(--danz-color-border, #e5e7eb);
	--ds-card:   var(--danz-card-bg, var(--danz-color-surface, #ffffff));
	--ds-text-filters: var(--ds-text);
	--ds-radius: 12px;
	--ds-pad:    20px;
}

/* ===========================================================
   PLANNING — couleurs personnalisables (Fond / Texte / Accent / Bordures)
   branchées sur les VRAIES classes .danz-fe-planning__* (le module est rendu
   en <div>, pas en <table> → les anciens sélecteurs tr/table ne matchaient
   jamais). On NE touche PAS aux couleurs par jour des cours.
   =========================================================== */
.danz-studio-widget.danz-studio-widget--danz-horaire,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filters,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__nav,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filter-select {
	background-color: var(--ds-bg) !important;
	border-color: var(--ds-border) !important;
}
/* « Tableau / cartes » = la grille + les cellules de jours (vue Liste / Cartes). */
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__grid,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__day {
	background-color: var(--ds-card) !important;
	border-color: var(--ds-border) !important;
}
/* Vue SEMAINE (table) : tableau + cellules + en-tête suivent « Tableau » + « Texte »
   (donc clair en thème clair, sombre en thème sombre, ET éditables). */
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-wrap,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-table,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-table thead,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-table th,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-time-col,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-day-col,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-time,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-cell,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__week-empty {
	background-color: var(--ds-card) !important;
	border-color: var(--ds-border) !important;
	color: var(--ds-text) !important;
}
/* Toggle « Afficher les filtres ». */
.danz-pl-no-filters .danz-fe-planning__filters { display: none !important; }
/* Texte du TABLEAU (grille, titres de jours). */
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__title,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__day-title {
	color: var(--ds-text) !important;
}
/* Texte des FILTRES + navigation (couleur séparée « Texte des filtres »). */
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filters,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filter-label,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filter-select,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__nav-range,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__nav-btn {
	color: var(--ds-text-filters) !important;
}
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__subtitle,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__cap-text {
	color: color-mix(in srgb, var(--ds-text) 62%, transparent) !important;
}
/* La pastille horaire n'est PAS forcée à l'accent (le texte resterait
   illisible sur l'accent) — elle suit le CSS du thème (fond tinté + texte
   lisible via --danz-color-text). Seuls la barre de capacité et le bouton
   filtres prennent l'accent. */
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__cap-bar-fill,
.danz-studio-widget.danz-studio-widget--danz-horaire .danz-fe-planning__filters-actions button {
	background-color: var(--ds-accent) !important;
	border-color: var(--ds-accent) !important;
}

/* ===========================================================
   PLANNING — designs (sélecteurs LARGES pour matcher les classes
   variables du module danz-studio : tr, [class*="planning"], etc.)
   =========================================================== */

/* default : pas d'override, rendu natif. */

/* CARDS : transforme chaque ligne du planning en carte colorée avec accent. */
.danz-studio-widget--danz-horaire.danz-design--cards [class*="planning"] tr,
.danz-studio-widget--danz-horaire.danz-design--cards [class*="planning"] li,
.danz-studio-widget--danz-horaire.danz-design--cards [class*="planning"] [role="row"]:not(:first-child),
.danz-studio-widget--danz-horaire.danz-design--cards .danz-fe-planning__row,
.danz-studio-widget--danz-horaire.danz-design--cards .danz-planning__row,
.danz-studio-widget--danz-horaire.danz-design--cards .danz-planning-item,
.danz-studio-widget--danz-horaire.danz-design--cards .danz-fe-empty-state {
	background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.08)) !important;
	border-left: 4px solid var(--ds-accent, var(--danz-color-primary, #6366f1)) !important;
	border-radius: 14px !important;
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
	box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
	display: block !important;
	transition: transform .15s, box-shadow .15s !important;
}
.danz-studio-widget--danz-horaire.danz-design--cards [class*="planning"] tr:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(99,102,241,.18) !important;
}
.danz-studio-widget--danz-horaire.danz-design--cards [class*="planning"] table {
	border-collapse: separate !important;
	border-spacing: 0 12px !important;
}

/* MINIMAL : épuré, sans fond, séparateurs fins. */
.danz-studio-widget--danz-horaire.danz-design--minimal [class*="planning"] tr,
.danz-studio-widget--danz-horaire.danz-design--minimal [class*="planning"] li,
.danz-studio-widget--danz-horaire.danz-design--minimal table tr {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0,0,0,.08) !important;
	padding: 14px 4px !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.danz-studio-widget--danz-horaire.danz-design--minimal [class*="filter"],
.danz-studio-widget--danz-horaire.danz-design--minimal .danz-fe-filters {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0,0,0,.08) !important;
	padding: 16px 0 !important;
	box-shadow: none !important;
}

/* DARK : fond sombre élégant avec accents néon. */
.danz-studio-widget--danz-horaire.danz-design--dark {
	background: #0a0a0a !important;
	color: #f1f5f9 !important;
	padding: 24px !important;
	border-radius: 16px !important;
}
.danz-studio-widget--danz-horaire.danz-design--dark *:not(.button):not(button):not(a) {
	color: inherit !important;
	background-color: transparent !important;
}
.danz-studio-widget--danz-horaire.danz-design--dark [class*="filter"],
.danz-studio-widget--danz-horaire.danz-design--dark .danz-fe-filters {
	background: rgba(255,255,255,.04) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-radius: 12px !important;
}
.danz-studio-widget--danz-horaire.danz-design--dark [class*="planning"] tr {
	border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.danz-studio-widget--danz-horaire.danz-design--dark select,
.danz-studio-widget--danz-horaire.danz-design--dark input[type="text"] {
	background: rgba(255,255,255,.06) !important;
	color: #f1f5f9 !important;
	border: 1px solid rgba(255,255,255,.18) !important;
}
.danz-studio-widget--danz-horaire.danz-design--dark .button,
.danz-studio-widget--danz-horaire.danz-design--dark button[type="submit"],
.danz-studio-widget--danz-horaire.danz-design--dark .danz-fe-btn--primary {
	background: linear-gradient(135deg, #818cf8, #f472b6) !important;
	color: #fff !important;
	border: 0 !important;
}

/* COMPACT : très dense, lignes serrées. */
.danz-studio-widget--danz-horaire.danz-design--compact [class*="planning"] table td,
.danz-studio-widget--danz-horaire.danz-design--compact [class*="planning"] table th {
	padding: 6px 8px !important;
	font-size: .85em !important;
}
.danz-studio-widget--danz-horaire.danz-design--compact [class*="planning"] tr {
	padding: 6px 8px !important;
}
.danz-studio-widget--danz-horaire.danz-design--compact [class*="filter"] {
	padding: 12px !important;
}

/* ===========================================================
   PROFESSEURS — designs : gérés NATIVEMENT par le shortcode
   [danz_prof_fiches] via l'attribut « layout » (8 layouts réels, CSS scopé
   par le plugin). Le widget Danz Builder passe le design choisi en layout —
   plus aucune surcharge CSS ici (les anciennes ciblaient des classes
   inexistantes — .danz-prof-card, > * > div… — donc « Choisir un design »
   ne faisait rien).
   =========================================================== */

/* ===========================================================
   CONTACT — designs
   =========================================================== */

/* split : déjà 2 colonnes par défaut (le shortcode produit info + map). */

/* centered : info au-dessus, carte en dessous.
   IMPORTANT : on cible la grille .danz-contact__grid — surtout PAS « > * »,
   qui forçait AUSSI le <style> inline du shortcode en display:flex et faisait
   donc apparaître son CSS en TEXTE sur la page (le bug). */
.danz-studio-widget--danz-contact-page.danz-design--centered .danz-contact__grid {
	grid-template-columns: 1fr !important;
	text-align: center;
	gap: 24px;
}

/* Garde-fou : le <style> inline du shortcode reste toujours masqué, quel que
   soit le design (aucune règle ne doit le rendre visible). */
.danz-studio-widget--danz-contact-page style { display: none !important; }

/* card : carte flottante sur image en arrière-plan */
.danz-studio-widget--danz-contact-page.danz-design--card {
	background: linear-gradient(135deg, var(--ds-accent), var(--danz-color-primary-dark, #4f46e5));
	border-radius: var(--ds-radius);
	padding: 60px 40px;
	color: #fff;
	box-shadow: 0 20px 48px rgba(99,102,241,.30);
}
.danz-studio-widget--danz-contact-page.danz-design--card * { color: inherit; }
.danz-studio-widget--danz-contact-page.danz-design--card a:not(.button) {
	color: rgba(255,255,255,.95); text-decoration: underline;
}

/* minimal : info uniquement, pas de carte */
.danz-studio-widget--danz-contact-page.danz-design--minimal iframe,
.danz-studio-widget--danz-contact-page.danz-design--minimal .danz-contact-map {
	display: none !important;
}
.danz-studio-widget--danz-contact-page.danz-design--minimal {
	max-width: 600px; margin: 0 auto;
}

/* ===========================================================
   COMPTE (danz_compte_complet) — rendu PROPRE + 2 styles.
   La vraie structure = .danz-fe-account--full (grille de panneaux),
   PAS la nav WooCommerce → on cible les bonnes classes.
   =========================================================== */

/* Base : grille fluide et lisible (corrige le rendu désordonné/illisible). */
.danz-studio-widget--danz-compte-complet .danz-fe-account--full {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
	gap: 20px !important;
	align-items: start;
}
.danz-studio-widget--danz-compte-complet .danz-fe-account--full > * {
	min-width: 0; /* empêche les débordements qui cassaient la mise en page */
}

/* Dashboard (masonry) : 2 colonnes qui COMBLENT les vides (les panneaux ont des
   hauteurs très différentes → une grille classique laisse de gros trous ; le
   multicol fait remonter les panneaux courts sous les courts → vrai dashboard). */
.danz-studio-widget--danz-compte-complet.danz-design--dashboard .danz-fe-account--full {
	display: block !important;
	column-count: 2;
	column-gap: 20px;
}
.danz-studio-widget--danz-compte-complet.danz-design--dashboard .danz-fe-account--full > .danz-fe {
	display: inline-block;
	width: 100%;
	margin: 0 0 20px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
@media (max-width: 860px) {
	.danz-studio-widget--danz-compte-complet.danz-design--dashboard .danz-fe-account--full {
		column-count: 1;
	}
}

/* Cartes empilées : 1 colonne centrée, chaque panneau en grande carte lisible. */
.danz-studio-widget--danz-compte-complet.danz-design--cards .danz-fe-account--full {
	grid-template-columns: 1fr !important;
	max-width: 780px;
	margin-inline: auto;
}

/* ===========================================================
   INSCRIPTION — designs
   =========================================================== */

/* compact : déjà par défaut */

/* card : carte avec ombre et padding */
.danz-studio-widget--danz-inscription-rapide.danz-design--card {
	background: var(--ds-bg);
	border-radius: var(--ds-radius);
	padding: 40px;
	box-shadow: 0 12px 32px rgba(15,23,42,.10);
	max-width: 520px; margin: 0 auto;
	border: 1px solid var(--ds-border);
}

/* wizard : étapes (visuellement séparées avec progress) */
.danz-studio-widget--danz-inscription-rapide.danz-design--wizard form {
	max-width: 600px; margin: 0 auto;
}
.danz-studio-widget--danz-inscription-rapide.danz-design--wizard form::before {
	content: 'Étape 1 sur 3';
	display: block;
	font-size: .75rem; font-weight: 700;
	color: var(--ds-accent);
	text-transform: uppercase; letter-spacing: .1em;
	margin-bottom: 8px;
}

/* inline : tout sur une ligne (pour newsletter style) */
.danz-studio-widget--danz-inscription-rapide.danz-design--inline form {
	display: flex !important;
	flex-direction: row !important;
	gap: 8px;
	align-items: stretch;
	max-width: 600px;
	margin: 0 auto;
}
.danz-studio-widget--danz-inscription-rapide.danz-design--inline form > *:not([type="submit"]):not(button) {
	flex: 1;
}
@media (max-width: 600px) {
	.danz-studio-widget--danz-inscription-rapide.danz-design--inline form {
		flex-direction: column !important;
	}
}

/* ===========================================================
   Buttons inside Studio widgets : adapter aux tokens du thème
   =========================================================== */
.danz-studio-widget .button,
.danz-studio-widget button[type="submit"],
.danz-studio-widget input[type="submit"],
.danz-studio-widget .filter-button,
.danz-studio-widget [class*="filter"] button {
	background: var(--ds-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--danz-btn-radius, 6px) !important;
	padding: var(--danz-btn-py, 12px) var(--danz-btn-px, 20px) !important;
	font-weight: var(--danz-btn-fw, 600) !important;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.danz-studio-widget .button:hover,
.danz-studio-widget button[type="submit"]:hover {
	filter: brightness(.92);
	transform: translateY(-1px);
}

/* === Preview / editor mode ============================================== */
body.danz-preview-mode { background: var(--danz-color-bg, #ffffff); }
body.danz-preview-mode .danz-skip-link { display: none; }

[data-db-id] { transition: outline-color .12s ease, box-shadow .12s ease; }