/* ===========================================================
   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-radius: 12px;
	--ds-pad:    20px;
}

/* ===========================================================
   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
   =========================================================== */

/* cards : déjà rendu par le plugin (par défaut). */

/* list : forcer une seule colonne, alignement horizontal photo + texte */
.danz-studio-widget--danz-prof-fiches.danz-design--list .danz-prof-card,
.danz-studio-widget--danz-prof-fiches.danz-design--list .danz-prof,
.danz-studio-widget--danz-prof-fiches.danz-design--list > * > div {
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	gap: 20px;
	align-items: center;
	margin-bottom: 16px;
	padding: var(--ds-pad);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}
.danz-studio-widget--danz-prof-fiches.danz-design--list img {
	width: 100px !important; height: 100px !important;
	border-radius: 50% !important;
	object-fit: cover;
	flex-shrink: 0;
}

/* minimal : photos rondes en grille avec nom dessous */
.danz-studio-widget--danz-prof-fiches.danz-design--minimal img {
	border-radius: 50% !important;
	aspect-ratio: 1; object-fit: cover;
}
.danz-studio-widget--danz-prof-fiches.danz-design--minimal .danz-prof__bio,
.danz-studio-widget--danz-prof-fiches.danz-design--minimal .danz-prof-card__bio {
	display: none !important;
}

/* story : grandes cartes avec image full-width */
.danz-studio-widget--danz-prof-fiches.danz-design--story > * > div {
	border-radius: var(--ds-radius);
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(15,23,42,.10);
	margin-bottom: 32px;
}
.danz-studio-widget--danz-prof-fiches.danz-design--story img {
	width: 100% !important;
	aspect-ratio: 16/9;
	object-fit: cover;
}

/* circular : photos rondes uniquement */
.danz-studio-widget--danz-prof-fiches.danz-design--circular img {
	border-radius: 50% !important;
	aspect-ratio: 1; object-fit: cover;
	box-shadow: 0 4px 12px rgba(15,23,42,.08);
}

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

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

/* centered : info au-dessus, carte en dessous */
.danz-studio-widget--danz-contact-page.danz-design--centered .danz-contact-page,
.danz-studio-widget--danz-contact-page.danz-design--centered > * {
	display: flex !important;
	flex-direction: column !important;
	text-align: center;
	gap: 24px;
}

/* 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;
}

/* ===========================================================
   ACCOUNT — designs
   =========================================================== */

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

/* sidebar : nav verticale + contenu à droite */
.danz-studio-widget--danz-compte-complet.danz-design--sidebar > * {
	display: grid !important;
	grid-template-columns: 240px 1fr;
	gap: 32px;
}
.danz-studio-widget--danz-compte-complet.danz-design--sidebar nav,
.danz-studio-widget--danz-compte-complet.danz-design--sidebar .danz-account-tabs,
.danz-studio-widget--danz-compte-complet.danz-design--sidebar [role="tablist"] {
	flex-direction: column !important;
	display: flex !important;
	gap: 4px;
}

/* cards : sections empilées en cartes */
.danz-studio-widget--danz-compte-complet.danz-design--cards [role="tabpanel"],
.danz-studio-widget--danz-compte-complet.danz-design--cards .danz-account-section {
	background: var(--ds-bg);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	padding: var(--ds-pad);
	margin-bottom: 16px;
	box-shadow: 0 2px 6px rgba(15,23,42,.04);
}

/* dashboard : grille 2x2 */
.danz-studio-widget--danz-compte-complet.danz-design--dashboard > * {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 768px) {
	.danz-studio-widget--danz-compte-complet.danz-design--dashboard > * {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================
   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: #ffffff; }
body.danz-preview-mode .danz-skip-link { display: none; }

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