/* === BW VIVANT — Animations & Effets humains === */

/* Orbes derrière tout le contenu sans couches GPU parasites */
/* overflow-x: hidden → les orbes/blobs fixes qui débordent (right/left négatifs)
   ne créent plus de scroll horizontal (sinon la carte hero paraît collée aux bords).
   Sans risque : aucun position:sticky dans le projet, la sidebar formation est fixed. */
html { background: #F9F9F9; overflow-x: hidden; }
body { background: transparent !important; overflow-x: hidden; }

/* Éléments structurels WordPress — doivent être transparents pour laisser passer les orbes */
.wp-site-blocks,
.wp-site-blocks > *,
header.wp-block-template-part,
main.wp-block-group,
.wp-block-group,
.wp-block-html,
.wp-block-post-content,
.entry-content,
.site-header,
.site-main,
.wp-block-template-part,
[class*="wp-container-core-group"] {
	background: transparent !important;
	background-color: transparent !important;
}

/* Footer : fond blanc opaque + aucune marge résiduelle de WordPress */
footer.wp-block-template-part {
	background: #ffffff !important;
	background-color: #ffffff !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 768px) {
	footer.wp-block-template-part {
		padding-bottom: 0 !important;
	}
}

/* ─────────────────────────────────────────────── */
/* 0. KEYFRAMES BLOBS                              */
/* ─────────────────────────────────────────────── */

@keyframes bw-blob-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(24px, -18px) scale(1.06); }
	66%      { transform: translate(-12px, 14px) scale(0.96); }
}

@keyframes bw-blob-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(-18px, 16px) scale(0.95); }
	66%      { transform: translate(20px, -10px) scale(1.05); }
}

@keyframes bw-blob-3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(14px, 18px) scale(1.04); }
}

@keyframes bw-orb-float {
	0%   { transform: translate3d(var(--bw-orb-offset-x, 0px), var(--bw-orb-offset-y, 0px), 0) scale(1); }
	25%  { transform: translate3d(calc(var(--bw-orb-offset-x, 0px) + 28px), calc(var(--bw-orb-offset-y, 0px) - 20px), 0) scale(1.07); }
	50%  { transform: translate3d(calc(var(--bw-orb-offset-x, 0px) + 10px), calc(var(--bw-orb-offset-y, 0px) - 34px), 0) scale(1.04); }
	75%  { transform: translate3d(calc(var(--bw-orb-offset-x, 0px) - 16px), calc(var(--bw-orb-offset-y, 0px) - 14px), 0) scale(0.97); }
	100% { transform: translate3d(var(--bw-orb-offset-x, 0px), var(--bw-orb-offset-y, 0px), 0) scale(1); }
}

@keyframes bw-orb-float-2 {
	0%   { transform: translate3d(0px, 0px, 0) scale(1); }
	30%  { transform: translate3d(-22px, 26px, 0) scale(1.06); }
	60%  { transform: translate3d(14px, 40px, 0) scale(0.96); }
	100% { transform: translate3d(0px, 0px, 0) scale(1); }
}

@keyframes bw-orb-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.72; }
}

/* ─────────────────────────────────────────────── */
/* 1. BLOBS DE FOND — injectés via JS (iOS-safe)  */
/* ─────────────────────────────────────────────── */

.bw-blob {
	position: fixed;
	pointer-events: none;
	border-radius: 50%;
	z-index: 0;
}

.bw-blob--1 {
	width: 800px;
	height: 800px;
	/* ponytail: halo descendu (-280px -> 0) pour qu'il ne teinte plus les premiers
	   pixels de la page : la barre Safari restant blanche, la difference dessinait
	   une ligne nette sous la Dynamic Island, sur toutes les pages (ce blob est
	   affiche uniquement sous 769px).
	   Calcul : sans taille explicite, radial-gradient(circle) prend le coin le
	   plus eloigne comme rayon, soit 566px ici — donc transparent a 340px du
	   centre, et non 240px. A top: 0 le centre est a y=400 : le bord transparent
	   passe 22px au-dessus de l'ecran, marge prise pour l'animation (-18px,
	   scale 1.06 qui porte le bord a 360px). */
	top: 0;
	right: -220px;
	background: radial-gradient(circle, rgba(251, 28, 210, 0.10) 0%, transparent 60%);
	animation: bw-blob-1 14s ease-in-out infinite;
}

.bw-blob--2 {
	width: 700px;
	height: 700px;
	bottom: -220px;
	left: -200px;
	background: radial-gradient(circle, rgba(var(--color-violet-rgb), 0.08) 0%, transparent 60%);
	animation: bw-blob-2 18s ease-in-out infinite;
}

/* Desktop : les blobs globaux sont masqués.
   Le glow desktop est géré localement dans .bw-hero pour éviter les interstices entre sections. */
@media (min-width: 769px) {
	.bw-blob--1,
	.bw-blob--2 {
		display: none;
	}
}

.bw-orb {
	position: fixed;
	top: -40px;
	right: -180px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(
		circle,
		rgba(251, 28, 210, 0.42) 0%,
		rgba(251, 28, 210, 0.22) 24%,
		rgba(115, 38, 155, 0.14) 48%,
		transparent 72%
	);
	filter: blur(8px);
	opacity: 1;
	animation: bw-orb-float 14s ease-in-out infinite, bw-orb-pulse 7s ease-in-out infinite;
}

@media (max-width: 768px) {
	.bw-orb {
		width: 360px;
		height: 360px;
		right: -120px;
		top: 8vh;
	}
}

.bw-orb--2 {
	position: fixed;
	top: 52vh;
	left: -160px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(
		circle,
		rgba(115, 38, 155, 0.38) 0%,
		rgba(var(--color-violet-rgb), 0.20) 28%,
		rgba(251, 28, 210, 0.10) 52%,
		transparent 72%
	);
	filter: blur(8px);
	opacity: 1;
	animation: bw-orb-float-2 17s ease-in-out infinite, bw-orb-pulse 9s ease-in-out infinite;
	animation-delay: -8s, -3s;
}

@media (max-width: 768px) {
	.bw-orb--2 {
		width: 300px;
		height: 300px;
		left: -100px;
		top: 55vh;
	}
}

/* Variante discrète pour les pages formation */
.bw-orb--subtle {
	opacity: 0.45;
}

/* Orbes à z-index: -1 — derrière tout le contenu par défaut.
   Aucun z-index nécessaire sur les sections ou les conteneurs. */

.bw-course-hero__inner {
	position: relative;
	z-index: 1;
}

/* ─────────────────────────────────────────────── */
/* 2. PAGE FADE-IN                                */
/* ─────────────────────────────────────────────── */

@keyframes bw-page-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

main {
	/* fill-mode: backwards → applique le from avant le départ mais ne persiste pas
	   le transform:translateY(0) après la fin, évitant le stacking context permanent
	   qui casse overflow:hidden sur Safari/WebKit mobile */
	animation: bw-page-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* ─────────────────────────────────────────────── */
/* 3. SCROLL REVEAL                               */
/* ─────────────────────────────────────────────── */

[data-bw-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-bw-reveal].bw-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Bento cards — délai géré par JS (transitionDelay inline) */
.bw-bento__grid .bw-card[data-bw-reveal] {
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease,
	            box-shadow 0.25s ease, border-color 0.25s ease;
}

.bw-bento__label[data-bw-reveal],
.bw-bento__title[data-bw-reveal] {
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ─────────────────────────────────────────────── */
/* 3. BARRE DE PROGRESSION (pages formation)      */
/* ─────────────────────────────────────────────── */

#bw-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--color-rose) 0%, var(--color-violet) 100%);
	z-index: var(--z-progress);
	transition: width 0.08s linear;
	pointer-events: none;
	border-radius: 0 2px 2px 0;
}

/* ─────────────────────────────────────────────── */
/* 5. CARDS TÉMOIGNAGES INCLINÉES                 */
/* ─────────────────────────────────────────────── */

.bw-reviews-grid__cards .bw-review-card:nth-child(3n+1) {
	transform: rotate(-0.7deg);
}

.bw-reviews-grid__cards .bw-review-card:nth-child(3n+2) {
	transform: rotate(0.5deg);
}

.bw-reviews-grid__cards .bw-review-card:nth-child(3n+3) {
	transform: rotate(-0.4deg);
}

.bw-reviews-grid__cards .bw-review-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bw-reviews-grid__cards .bw-review-card:hover {
	transform: rotate(0deg) translateY(-5px) !important;
	box-shadow: 0px 12px 36px 0px rgba(10, 11, 36, 0.10);
	z-index: 1;
}

/* ─────────────────────────────────────────────── */
/* 6. SECTION FORMATEURS                          */
/* ─────────────────────────────────────────────── */

.bw-trainers {
	padding: 80px 60px;
}

.bw-trainers__header {
	margin-bottom: 40px;
	text-align: center;
}

.bw-trainers__label {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-violet);
	margin: 0 0 8px;
}

.bw-trainers__title {
	font-family: var(--font-primary);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	color: var(--color-blue);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

.bw-trainers__track {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 8px;
	/* 4 cartes/rangée max → 7 formateurs = 4+3, jamais un seul orphelin en bas */
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.bw-trainers__track::-webkit-scrollbar {
	display: none;
}

/* ── Carte formateur ── */
.bw-trainer-card {
	/* 25% - part du gap (3 gaps de 20px répartis sur 4 cartes) = 4 par rangée pile */
	flex: 0 0 calc(25% - 15px);
	box-sizing: border-box;
	scroll-snap-align: start;
	background: #FFFFFF;
	border: 1px solid #E5E5EA;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0px 4px 24px 0px rgba(10, 11, 36, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bw-trainer-card:hover {
	transform: translateY(-5px);
	box-shadow: 0px 12px 36px 0px rgba(10, 11, 36, 0.10);
}

/* Photo : carré uniforme, sujet ancré en bas du cadre */
.bw-trainer-card__photo-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	background: #F0EEF5;
	flex-shrink: 0;
}

.bw-trainer-card__photo,
.bw-trainer-card__photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	display: block;
}

/* Placeholder initiales (si pas de photo) */
.bw-trainer-card__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-size: 48px;
	font-weight: 700;
	color: rgba(var(--color-violet-rgb), 0.25);
}

/* Contenu */
.bw-trainer-card__content {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.bw-trainer-card__name {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-blue);
	margin: 0;
}

.bw-trainer-card__role {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-violet);
	margin: 0;
}

.bw-trainer-card__bio {
	font-family: var(--font-primary);
	font-size: 12px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 6px 0 0;
}

/* Badge formation */
.bw-trainer-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 600;
	color: var(--color-violet);
	background: rgba(var(--color-violet-rgb), 0.08);
	border: 1px solid rgba(var(--color-violet-rgb), 0.18);
	border-radius: 999px;
	padding: 4px 10px;
	margin-top: auto;
	align-self: flex-start;
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.bw-trainers {
		padding: 56px 0 56px 20px;
		overflow: hidden;
	}
	.bw-trainers__header {
		padding-right: 20px;
		text-align: left;
	}
	/* ponytail: la section garde padding-right: 0 pour laisser les cartes
	   formateurs defiler jusqu'au bord. Le header et la piste ont chacun leur
	   compensation, l'intro avait ete oubliee : la photo collait au bord droit. */
	.bw-trainers__intro {
		padding-right: 20px;
	}
	.bw-trainers__track {
		flex-wrap: nowrap;
		/* ponytail: "safe" centre les cartes quand elles tiennent (2 formateurs sur
		   les pages formation) et retombe automatiquement a gauche quand elles
		   debordent (7 sur l'accueil), sans rendre la 1re carte inaccessible. */
		justify-content: safe center;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-right: 20px;
		scrollbar-width: none;
		gap: 14px;
	}
	.bw-trainers__track::-webkit-scrollbar { display: none; }
	.bw-trainer-card {
		flex: 0 0 180px;
	}
}

@media (max-width: 480px) {
	.bw-trainers {
		padding: 44px 0 44px 16px;
	}
	.bw-trainers__header {
		padding-right: 16px;
	}
	.bw-trainers__intro {
		padding-right: 16px;
	}
	.bw-trainers__track {
		padding-right: 16px;
	}
	.bw-trainer-card {
		flex: 0 0 165px;
	}
}

/* ─────────────────────────────────────────────── */
/* 7. BOUTON RETOUR EN HAUT — mobile only         */
/* ─────────────────────────────────────────────── */

#bw-back-to-top {
	display: none;
}

@media (max-width: 768px) {
	#bw-back-to-top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.82);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid #E5E5EA;
		box-shadow: 0px 4px 16px 0px rgba(10, 11, 36, 0.10);
		color: var(--color-violet);
		cursor: pointer;
		z-index: var(--z-float-btn);
		opacity: 0;
		transform: translateY(12px) scale(0.9);
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.3s ease;
	}

	/* Remonté par JS quand la sticky CTA formation est visible */
	#bw-back-to-top.bw-back-to-top--above-cta {
		bottom: calc(158px + env(safe-area-inset-bottom, 0px));
	}

	#bw-back-to-top.bw-back-to-top--visible {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	#bw-back-to-top svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}
}

/* ── Bloc "Qui sommes-nous" (homepage) ── */
.bw-about {
	padding: 80px 60px;
}
.bw-about__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.bw-about__photo { margin: 0; }
.bw-about__photo img,
.bw-trainers__photo img {
	width: 100%;
	/* ponytail: sans border-box, la bordure de 1px s'ajoutait au 100% */
	box-sizing: border-box;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	border: 1px solid #E5E5EA;
	box-shadow: 0px 4px 24px 0px rgba(10, 11, 36, 0.06);
}
.bw-about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.bw-about__label {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-violet);
	margin: 0;
}
.bw-about__title {
	font-family: var(--font-primary);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 700;
	color: var(--color-blue);
	line-height: 1.2;
	margin: 0;
}
.bw-about__text {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
}
.bw-about__points {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bw-about__points li {
	font-family: var(--font-primary);
	font-size: 15px;
	color: var(--color-blue);
	padding-left: 28px;
	position: relative;
	line-height: 1.5;
}
.bw-about__points li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-violet);
	font-weight: 700;
}
.bw-about__cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	background: linear-gradient(135deg, var(--color-rose) 0%, var(--color-violet) 100%);
	color: #FFFFFF;
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.bw-about__cta:hover { opacity: 0.9; }

/* ── Intro 2 colonnes de la section experts (photo podcast) ── */
.bw-trainers__intro {
	max-width: 1100px;
	margin: 0 auto 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.bw-trainers__intro .bw-trainers__header {
	margin-bottom: 0;
	text-align: left;
}
.bw-trainers__lead {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 14px 0 0;
}
.bw-trainers__photo { margin: 0; }

/* ── Séparateur 'Nos formateurs' entre l'intro et la grille ── */
.bw-trainers__sep {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1100px;
	margin: 8px auto 36px;
}
.bw-trainers__sep::before,
.bw-trainers__sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border, #E5E5EA);
}
.bw-trainers__sep-label {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-violet);
	white-space: nowrap;
}

.bw-trainers__photo img {
	max-height: 440px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 860px) {
	.bw-about,
	.bw-trainers__intro {
		grid-template-columns: 1fr;
	}
	.bw-about__inner,
	.bw-trainers__intro {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.bw-about { padding: 60px 24px; }
	.bw-about__photo { order: -1; }
	.bw-trainers__intro .bw-trainers__header { text-align: center; }
}

/* === BW CIBLE (à qui s'adressent nos formations) === */
.bw-cible {
	padding: 80px 24px;
}

.bw-cible__inner {
	max-width: 1160px;
	margin: 0 auto;
}

.bw-cible__label {
	text-align: center;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-violet);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}

.bw-cible__title {
	text-align: center;
	font-family: var(--font-primary);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 700;
	color: var(--color-blue);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 48px;
}

.bw-cible__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bw-cible__card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	text-align: left;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bw-cible__photo {
	width: 100%;
	aspect-ratio: 5 / 4;
}

.bw-cible__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bw-cible__body {
	padding: 28px 28px 32px;
}

.bw-cible__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	color: var(--color-violet);
	background: rgba(var(--color-violet-rgb), 0.08);
	margin-bottom: 18px;
}

.bw-cible__card-title {
	font-family: var(--font-primary);
	font-size: 19px;
	font-weight: 700;
	color: var(--color-blue);
	margin: 0 0 10px;
}

.bw-cible__card-desc {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0;
}

@media (max-width: 900px) {
	.bw-cible__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}
}
/* === END BW CIBLE === */

/* === A11Y : focus clavier visible (global) === */
.bw-card:focus-visible,
.bw-cible__card:focus-visible,
.bw-mega-card:focus-visible,
.bw-sheet-card:focus-visible,
.bw-header__nav-link:focus-visible,
.bw-header__cta-signup:focus-visible,
.bw-footer__link:focus-visible,
.bw-footer__col-link:focus-visible,
.bw-bottom-nav__item:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 2px;
}
/* === END A11Y FOCUS === */

/* === END BW VIVANT === */