/**
 * Homepage-only visual details that go beyond what theme.json settings can
 * express (decorative gradients, card shadows, pill buttons, hover states) —
 * adapted from the approved mockup (2-maquette-homepage-letriangledart.html).
 * Loaded only on the front page (see functions.php).
 */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hx-hero {
	position: relative;
	overflow: hidden;
}
.hx-hero::before {
	content: '';
	position: absolute; top: -80px; right: -80px;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(240,142,128,.18) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hx-hero::after {
	content: '';
	position: absolute; bottom: -40px; left: -60px;
	width: 280px; height: 280px;
	background: radial-gradient(circle, rgba(31,13,92,.07) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hx-hero-inner { position: relative; z-index: 1; }

.hx-cours-pill .wp-block-button__link {
	background: #fff; color: #1f0d5c;
	border: 1px solid rgba(31,13,92,.1);
	box-shadow: 0 4px 24px rgba(31,13,92,.08);
	font-size: 13px; font-weight: 500;
}
.hx-cours-pill .wp-block-button__link:hover { background: #1f0d5c; color: #fff; }

/* ── Étapes ───────────────────────────────────────────────────────────── */
.hx-step-card {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
	transition: background .2s, transform .2s;
	position: relative;
}
.hx-step-card:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
/* Pastille numérotée : à cheval sur le bord haut, légèrement en retrait à gauche. */
.hx-step-card > .hx-step-num {
	position: absolute; top: 0; left: 24px;
	transform: translateY(-50%);
	margin: 0;
}
.hx-step-card > .hx-step-num + * { margin-top: 0; }
.hx-step-card > p.hx-op-60 { color: #fff !important; opacity: .85; }
/* Tailles légèrement agrandies (16 → 18 px / 14 → 15 px) ; !important car
   les tailles sont posées en style inline par les blocs. */
.hx-step-card > p:not(.hx-op-60) { font-size: 18px !important; }
.hx-step-card > p.hx-op-60 { font-size: 15px !important; }
.hx-step-num {
	width: 48px; height: 48px; border-radius: 50%;
	background: #F08E80; color: #fff;
	font-size: 26px; font-weight: 900;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba(240,142,128,.4);
}
@media (max-width: 781px) {
	/* Cartes empilées : espace pour la pastille qui dépasse, padding resserré. */
	.wp-block-columns:has(> .hx-step-card) { row-gap: 40px; }
	.hx-step-card.wp-block-column {
		padding: 30px 22px 20px !important;
		border-radius: 24px !important;
	}
	.hx-step-card > .hx-step-num { width: 40px; height: 40px; font-size: 22px; left: 20px; }
	.hx-step-card > p { margin-block: 0; }
	.hx-step-card > p + p { margin-top: 4px; }
}

/* ── Planning ─────────────────────────────────────────────────────────── */
.hx-planning-card {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--wp--preset--color--base, #fff);
	border-radius: 20px;
	padding: 20px 24px;
	box-shadow: 0 4px 24px rgba(31,13,92,.08);
	transition: transform .2s, box-shadow .2s;
	border: 1px solid transparent;
}
.hx-planning-card > div:nth-child(2) { flex: 1 1 auto; }
.hx-planning-card:hover { transform: translateY(-2px); box-shadow: 0 12px 48px rgba(31,13,92,.14); border-color: #F08E80; }
.hx-planning-card.is-complet { opacity: .55; }
.hx-planning-day {
	min-width: 64px; text-align: center;
	background: #FDF0E6; border-radius: 12px;
	padding: 10px 8px;
}
.hx-planning-day-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #F08E80; }
.hx-planning-day-time { font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-weight: 700; color: #1f0d5c; }
.hx-planning-status {
	font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
	white-space: nowrap;
}
.hx-planning-status.is-dispo { background: #e8f7ee; color: #2d7a4f; }
.hx-planning-status.is-complet { background: #fce8e6; color: #c0392b; }
.hx-planning-status.is-peu { background: #fff3e0; color: #e67e22; }

/* ── Offres ───────────────────────────────────────────────────────────── */
.hx-offer-card {
	position: relative; overflow: hidden;
	box-shadow: 0 4px 24px rgba(31,13,92,.08);
	transition: transform .2s, box-shadow .2s;
}
.hx-offer-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(31,13,92,.14); }
.hx-offer-card.is-featured { border: 2px solid #1f0d5c; }

/* Cartes d'offres quand l'écran se réduit : 2 par ligne (2 × 2), puis 1 par
   ligne seulement sur très petits écrans où deux colonnes coupent les prix et
   les libellés. Même spécificité que la règle core du bloc columns qu'on
   écrase (.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column),
   et ce fichier est chargé après. 10px = moitié du gap de 20px entre colonnes. */
@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column.hx-offer-card {
		flex-basis: calc(50% - 10px) !important;
		box-sizing: border-box;
	}
}
@media (max-width: 479px) {
	.wp-block-columns > .wp-block-column.hx-offer-card {
		flex-basis: 100% !important;
	}
}
.hx-price-table { margin-top: 12px; }
.hx-price-table > * { margin-block: 0; }
.hx-price-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 6px 0;
}
a.hx-price-row { color: inherit; text-decoration: none; }
a.hx-price-row:hover .hx-price-unit, a.hx-price-row:focus-visible .hx-price-unit { text-decoration: underline; }
.hx-price-row:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06); }
.hx-price-row .hx-price-unit { font-size: 12px; opacity: .7; }
.hx-price-row .hx-price-amount {
	font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 700;
	color: #1f0d5c;
}
.hx-offer-featured-label {
	position: absolute; top: 14px; right: 14px;
	margin:0;
	background: #1f0d5c; color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 12px;
}
.hx-offer-featured-label + .wp-block-paragraph {
	margin-top: 0;
}

/* ── Ambiance ─────────────────────────────────────────────────────────── */
.hx-ambiance {
	position: relative; overflow: hidden;
}
.hx-ambiance::before {
	content: '';
	position: absolute; inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}
/* ── Avis ─────────────────────────────────────────────────────────────── */
.hx-avis-card { position: relative; box-shadow: 0 4px 24px rgba(31,13,92,.08); }
.hx-avis-quote-mark {
	position: absolute; top: 20px; right: 24px;
	font-family: "Playfair Display", Georgia, serif; font-size: 64px; line-height: 1;
	color: #FDF0E6; font-weight: 900; pointer-events: none;
}
.hx-avis-stars { color: #f4c542; letter-spacing: 2px; }

/* ── CTA final ────────────────────────────────────────────────────────── */
.hx-cta-final { position: relative; overflow: hidden; }
.hx-cta-final::before {
	content: '';
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(240,142,128,.12) 0%, transparent 60%);
	border-radius: 50%;
	pointer-events: none;
}

/* ── Boutons pilule (au cas où non couvert par les variations de theme.json) */
.hx-btn-pill .wp-block-button__link { border-radius: 32px !important; }

/* ── Opacité de texte secondaire (hors attributs de bloc, volontairement en classe
   pour ne pas casser la validation des blocs — voir note dans les patterns) ── */
.hx-op-60 { opacity: .6; }
.hx-op-65 { opacity: .65; }
.hx-op-70 { opacity: .7; }
.hx-op-75 { opacity: .75; }
.hx-op-80 { opacity: .8; }

@media (max-width: 768px) {
	.hx-hero-visual { display: none; }
	.hx-ambiance-photos { display: none; }
}

/* Mention "paiement en plusieurs fois" sous les tarifs de l'abonnement annuel */
.hx-offer-installments {
	margin: 4px 0 16px;
	padding: 6px 12px;
	border-radius: 18px;
	text-wrap: balance;
	background: #FDF0E6;
	color: #1f0d5c;
	font-weight: 600;
	text-align: center;
}

/* Hover des boutons des cartes d'offres : le thème parent force sinon
   accent-1 à 85 % (règle !important) sur tout bouton dont la couleur de
   fond n'est pas une couleur de palette — d'où le jaune et le violet clair
   qui virent au violet foncé. On reprend le même effet (85 %) mais avec la
   couleur propre à chaque carte. */
.hx-offer-card.is-unitaire .wp-block-button__link:hover { background-color: color-mix(in srgb, #F08E80 85%, transparent) !important; }
.hx-offer-card.is-carte .wp-block-button__link:hover { background-color: color-mix(in srgb, #e8a04a 85%, transparent) !important; }
.hx-offer-card.is-abonnement .wp-block-button__link:hover { background-color: color-mix(in srgb, #1f0d5c 85%, transparent) !important; }
.hx-offer-card.is-cadeau .wp-block-button__link:hover { background-color: color-mix(in srgb, #9c6bb5 85%, transparent) !important; }

/* Cartes d'offres par public : intertitres (Cours à l'unité / Abonnement annuel / Carte cadeau) */
.hx-offer-section {
	margin: 18px 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1f0d5c;
	opacity: .55;
}
.hx-offer-card .hx-price-table { margin-top: 4px; }
.hx-offer-card .hx-offer-installments { margin-top: 8px; margin-bottom: 4px; }

/* En-tête coloré de la carte d'offre : picto + titre à gauche, âge à droite, texte blanc sur la couleur du public.
   Le corps blanc (.hx-offer-body) porte le padding que la colonne n'a plus. */
.hx-offer-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
	padding: 24px 24px;
	background: #1f0d5c; color: #fff; /* couleur de la carte, ci-dessous */
}
.hx-offer-head > * { margin: 0; }
.hx-offer-head .hx-offer-title {
	flex: 1 1 auto;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 28px; font-weight: 900; line-height: 1.1;
	color: #fff;
}
.hx-offer-age {
	margin-left: auto;
	font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap;
	color: #fff;
}
.hx-offer-body { padding: 8px 24px 28px; }
.hx-offer-card.is-unitaire .hx-offer-head { background: #F08E80; }
.hx-offer-card.is-carte .hx-offer-head { background: #e8a04a; }
.hx-offer-card.is-abonnement .hx-offer-head { background: #1f0d5c; }
.hx-offer-card.is-cadeau .hx-offer-head { background: #9c6bb5; }
@media (max-width: 781px) {
	.hx-offer-head { padding: 20px 18px; }
	.hx-offer-head .hx-offer-title { font-size: 24px; }
	.hx-offer-body { padding: 4px 18px 24px; }
}

/* Phrase sous les cartes : renvoi vers les cartes cadeaux */
.hx-offer-gift-note { margin-top: 32px; font-size: 15px; color: #1f0d5c; }
.hx-offer-gift-note a { font-weight: 700; color: #1f0d5c; text-decoration: underline; }

/* Mention en bas des cartes : explique l'astérisque de « Abonnement annuel* ».
   Mise en avant (pastille blanche, texte plus grand et en gras) : c'est l'info
   qui explique le paiement en plusieurs fois. */
.hx-offer-footnote {
	display: table;
	margin: 28px auto 0;
	padding: 10px 20px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, 0.12);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #1f0d5c;
}
.hx-offer-footnote + .hx-offer-gift-note { margin-top: 16px; }