/* vente : pages de vente des formations payantes (conversation « Navigation Simple LMS »). Chargée après site.css sur les pages publiques. */

/* ---------- Couleur de chaque formation (mêmes teintes que .wk-cursus et Mon tableau de bord) ---------- */
.wk-vente-cycle--art { --couleur: #6B92C4; }
.wk-vente-cycle--souffles { --couleur: #4A9B7E; }
.wk-vente-cycle--coeur { --couleur: #8B5A8E; }
.wk-vente-cycle--passerelle { --couleur: #B8382B; }
.wk-vente-cycle--origines { --couleur: #7E5424; }
.wk-vente-cycle { display: inline-flex; align-items: center; gap: .5em; }
.wk-vente-cycle::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--couleur, var(--wk-or)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--couleur, var(--wk-or)) 25%, transparent); }

/* ---------- Largeur commune du site (tokens.css : --wk-largeur, --wk-marge ; règle validée le 15/09) ----------
   Tout ce qui est encadré (colonnes, grilles, bandeaux, carte de prix, bundle) va jusqu'aux bords de la pastille du menu :
   la section a déjà 24 px de marge de chaque côté (16 px sur téléphone), il suffit de lever la largeur de contenu (76 rem).
   Le texte courant (intro, FAQ, bio, appel final) garde sa largeur de lecture. vente.css étant chargée sur tout le site,
   la règle ne vise que les pages de vente (celles qui ont un haut de page .wk-vente-hero). Les avis ont leur propre règle
   de carrousel bord à bord (site.css). */
/* La bio (« Votre prof », .wk-auteur-methode) est du texte : elle garde la largeur de la FAQ (retour de Gauthier : même largeur). */
body:has(.wk-vente-hero) .wk-section > :is(.wp-block-columns:not(.wk-auteur-methode, .wk-vente-offre), .wk-vente-contenu, .wk-vente-rythmes, .wk-programme, .wk-vente-inclus, .wk-bundle) {
	max-width: var(--wk-largeur, 87.5rem);
}
/* L'encart de paiement (liste + carte de prix) est un encadré seul : resserré et centré (21/09/2026).
   À 1 400 px il laissait un grand vide entre la liste et le prix. */
body:has(.wk-vente-hero) .wk-section > .wk-vente-offre { max-width: var(--wk-largeur-encadre, 56rem); }

/* ---------- Le constat : un grand chiffre, puis la phrase ---------- */
.wk-vente-constat .wk-vente-constat__chiffre {
	margin: 0 auto;
	text-align: center;
	font-size: clamp(4.5rem, 14vw, 8rem);
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.04em;
	color: var(--wk-terracotta-texte);
}
.wk-vente-constat h2.wp-block-heading { margin-top: .5rem; }
.wk-vente-constat p.wk-texte-centre { color: var(--wk-taupe); }

/* ---------- La méthode : l'exemple écouté ---------- */
.wk-vente-audio { margin: 1rem 0; }
.wk-vente-audio audio { width: 100%; max-width: 26rem; display: block; }
.wk-vente-bonne-nouvelle { font-weight: 800; font-size: var(--wp--preset--font-size--m); color: var(--wk-or-texte); }
.wk-vente-phrase img { background: #fff; }
.wk-vente-aveu { max-width: 44rem; margin: var(--wp--preset--spacing--60, 3rem) auto 0; }

/* ---------- Programme : repères, puis un chapitre par carte ---------- */
.wk-vente-reperes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 2rem; }
.wk-vente-reperes span {
	padding: .4rem .95rem;
	border-radius: 999px;
	background: var(--wk-carte);
	border: 1px solid var(--wk-trait);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}
.wk-programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.wk-chapitre {
	display: flex;
	flex-direction: column;
	border-radius: var(--wk-rayon-grand);
	background: var(--wk-carte);
	border: 1px solid rgba(57, 41, 29, .1);
	overflow: hidden;
}
.wk-chapitre > * { margin: 0 1.25rem; }
.wk-chapitre .wk-chapitre__visuel { margin: 0; }
.wk-chapitre .wk-chapitre__visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.wk-chapitre .wk-chapitre__infos {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--xs, .8rem);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wk-or-texte);
}
.wk-chapitre h3.wp-block-heading { margin-top: .2rem; margin-bottom: .3rem; font-size: var(--wp--preset--font-size--m); }
.wk-chapitre > p:not(.wk-chapitre__infos) { color: var(--wk-taupe); font-size: var(--wp--preset--font-size--s); }
.wk-chapitre .wk-chapitre__detail { margin-top: auto; padding: .9rem 0 1.1rem; }
.wk-chapitre .wk-chapitre__detail summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	color: var(--wk-or-texte);
}
.wk-chapitre .wk-chapitre__detail summary::-webkit-details-marker { display: none; }
.wk-chapitre .wk-chapitre__detail summary::after { content: "+"; font-size: 1.2em; line-height: 1; transition: rotate .25s var(--wk-ease); }
.wk-chapitre .wk-chapitre__detail[open] summary::after { rotate: 45deg; }
.wk-chapitre .wk-chapitre__detail ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-chapitre .wk-chapitre__detail li + li { margin-top: .3rem; }

/* Téléphone : une ligne par chapitre, vignette à gauche */
@media (max-width: 47.9rem) {
	.wk-programme { grid-template-columns: 1fr; gap: .75rem; }
	.wk-chapitre { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: .9rem; padding: .75rem; }
	.wk-chapitre > * { margin: 0; grid-column: 2; }
	.wk-chapitre .wk-chapitre__visuel { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
	.wk-chapitre .wk-chapitre__visuel img { aspect-ratio: 1; border-radius: var(--wk-rayon-petit); }
	.wk-chapitre .wk-chapitre__infos { margin-top: .1rem; }
	.wk-chapitre .wk-chapitre__detail { grid-column: 1 / -1; padding: .6rem 0 0; }
}

/* ---------- Ce qui est inclus : deux icônes de plus pour les cartes « service » du thème ---------- */
.wk-service--wakatoo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='8' height='12' rx='1.5'/%3E%3Crect x='13' y='6' width='8' height='12' rx='1.5'/%3E%3Cpath d='M7 10v4M17 10l-2 2 2 2'/%3E%3C/svg%3E"); }
.wk-service--forum { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11v8H9l-4 3v-3H4z'/%3E%3Cpath d='M15 9h5v8h-1v3l-4-3h-5v-2'/%3E%3C/svg%3E"); }

/* ---------- Suivi en option : deux étapes numérotées ---------- */
.wk-vente-suivi { list-style: none; counter-reset: etape; padding: 0; margin: 0 0 .5rem; }
.wk-vente-suivi li { position: relative; counter-increment: etape; padding-left: 3rem; min-height: 2.2rem; }
.wk-vente-suivi li + li { margin-top: 1.1rem; }
.wk-vente-suivi li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: -.1rem;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--wk-or);
	color: var(--wk-sur-or);
	font-weight: 800;
}
.wk-vente-merci { font-size: var(--wp--preset--font-size--s); font-style: italic; color: var(--wk-taupe); }

/* ---------- Tarif : la liste et la carte de prix côte à côte ---------- */
.wk-vente-offre {
	margin-top: 2rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: var(--wk-rayon-grand);
	background: var(--wk-carte);
	border: 1px solid rgba(57, 41, 29, .12);
}
.wk-prix {
	padding: 1.75rem 1.5rem 1.4rem;
	border-radius: var(--wk-rayon-grand);
	background: var(--wk-creme);
	box-shadow: var(--wk-ombre);
	text-align: center;
}
.wk-prix > p { margin: 0; }
.wk-prix .wk-prix__promo {
	display: inline-block;
	margin-bottom: .9rem;
	padding: .3rem .9rem;
	border-radius: 999px;
	background: var(--wk-erreur);
	color: #fff;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}
.wk-prix .wk-prix__montant { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.wk-prix .wk-prix__montant s { margin-right: .35rem; font-size: .45em; font-weight: 500; color: var(--wk-taupe); vertical-align: middle; }
.wk-prix.is-promo .wk-prix__montant strong { color: var(--wk-erreur); }
.wk-prix .wk-prix__ou { margin-top: .5rem; color: var(--wk-taupe); }
.wk-prix .wp-block-buttons { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; margin-top: 1.4rem; }
.wk-prix .wp-block-button, .wk-prix .wp-block-button__link { width: 100%; text-align: center; }
.wk-prix .wk-prix__rassure { margin-top: 1rem; font-size: var(--wp--preset--font-size--xs, .8rem); color: var(--wk-taupe); }
/* « Déjà élève ? Connectez-vous » (visiteurs, quand l'achat sans compte est actif) */
.wk-prix .wk-prix__connexion { margin-top: .5rem; font-size: var(--wp--preset--font-size--xs, .8rem); color: var(--wk-taupe); }
.wk-prix .wk-prix__connexion a { color: var(--wk-or-texte); font-weight: 700; text-decoration: underline; }
.wk-prix .wk-prix__acces { font-weight: 700; }
.wk-vente-garantie { max-width: 40rem; margin: 2.5rem auto 0; text-align: center; }
.wk-vente-garantie h3.wp-block-heading { font-size: var(--wp--preset--font-size--m); margin-bottom: .4rem; }
.wk-vente-garantie p { margin: 0; color: var(--wk-taupe); }

/* ---------- Barre d'inscription collante : pilule en verre dépoli, comme le menu ---------- */
.wk-vente-barre {
	position: fixed;
	left: .75rem;
	right: .75rem;
	bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem .5rem .5rem 1.25rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wk-creme) 82%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: var(--wk-ombre);
	opacity: 0;
	transform: translateY(140%);
	pointer-events: none;
	transition: transform .4s var(--wk-ease), opacity .4s var(--wk-ease);
}
.wk-vente-barre.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wk-vente-barre .wk-vente-barre__prix { margin: 0; line-height: 1.2; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-vente-barre .wk-vente-barre__prix strong { display: block; font-size: var(--wp--preset--font-size--m); color: var(--wk-ecorce); }
.wk-vente-barre .wk-vente-barre__bouton {
	flex: none;
	padding: .75rem 1.4rem;
	border-radius: var(--wk-rayon-bouton);
	background: var(--wk-or);
	color: var(--wk-sur-or);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.wk-vente-barre .wk-vente-barre__bouton:hover { background: var(--wk-or-survol); }
@media (min-width: 64rem) {
	.wk-vente-barre { left: auto; right: 1.5rem; bottom: 1.5rem; width: 24rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wk-vente-barre, .wk-chapitre .wk-chapitre__detail summary::after { transition: none; }
}

/* ---------- Composez votre bundle (même module que le widget Elementor, habillé comme la page) ---------- */
.wk-bundle { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2rem; }
@media (min-width: 64rem) {
	.wk-bundle { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
	.wk-bundle .wk-bundle__recap { position: sticky; top: 6rem; }
}
.wk-bundle [hidden] { display: none !important; }
/* Toujours 2 colonnes (2 formations = 1 ligne pleine largeur ; 3-4 = grille 2×2) : les cartes remplissent
   toute la largeur/hauteur disponible au lieu de rester minuscules (retour de Gauthier, 18/09/2026). */
.wk-bundle__cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 26rem) {
	.wk-bundle__cartes { grid-template-columns: minmax(0, 1fr); }
}
.wk-bundle__cartes > li { margin: 0; }
.wk-bundle .wk-bundle__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 2px solid rgba(57, 41, 29, .1);
	border-radius: var(--wk-rayon-grand);
	background: var(--wk-carte);
	overflow: hidden;
	text-align: left;
	font: inherit;
	color: var(--wk-ecorce);
	cursor: pointer;
	transition: border-color .25s var(--wk-ease), box-shadow .25s var(--wk-ease), transform .25s var(--wk-ease);
}
.wk-bundle .wk-bundle__carte:hover { transform: translateY(-2px); box-shadow: var(--wk-ombre); }
.wk-bundle .wk-bundle__carte:focus-visible { outline: 3px solid var(--wk-or); outline-offset: 3px; }
.wk-bundle .wk-bundle__carte.is-choisie { border-color: var(--couleur, var(--wk-or)); background: var(--wk-creme); box-shadow: var(--wk-ombre); }
.wk-bundle .wk-bundle__carte.is-vedette { cursor: default; transform: none; }
.wk-bundle .wk-bundle__visuel { aspect-ratio: 16 / 9; transition: filter .25s var(--wk-ease); }
.wk-bundle .wk-bundle__carte:not(.is-choisie) .wk-bundle__visuel { filter: saturate(.3) brightness(1.08); }
.wk-bundle__coche {
	position: absolute;
	top: .6rem;
	right: .6rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(250, 247, 244, .92) no-repeat center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8792F' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	box-shadow: 0 2px 8px rgba(28, 20, 14, .18);
}
/* Formation retenue : coche dans le vert du thème (--wk-sauge, celui des listes « ce qui est
   inclus »), et non dans l'or — le vert dit « ajouté », l'or servait déjà au « + » (Gauthier, 21/09/2026). */
.wk-bundle__carte.is-choisie .wk-bundle__coche {
	background: var(--wk-sauge, #4A9B7E) no-repeat center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.wk-bundle__incluse { position: absolute; top: .6rem; left: .6rem; padding: .25rem .7rem; border-radius: 999px; background: var(--wk-or); color: var(--wk-sur-or); font-size: var(--wp--preset--font-size--xs, .8rem); font-weight: 700; }
.wk-bundle__texte { display: grid; gap: .2rem; padding: .85rem 1rem 1rem; }
.wk-bundle__cycle { font-size: var(--wp--preset--font-size--xs, .8rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--couleur, var(--wk-or-texte)); }
.wk-bundle__titre { font-size: var(--wp--preset--font-size--m); line-height: 1.25; }
.wk-bundle__prix { font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-bundle .wk-bundle__recap .wk-bundle__nombre { font-weight: 800; }
.wk-bundle .wk-bundle__recap .wk-bundle__separement { margin: .2rem 0 .9rem; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-bundle .wk-bundle__recap .wk-bundle__avantages { margin: 1.1rem 0 0; text-align: left; font-size: var(--wp--preset--font-size--s); }
.wk-bundle .wk-bundle__recap .wk-bundle__astuce { margin-top: .9rem; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-bundle [data-bundle-payer][aria-disabled="true"] { opacity: .45; cursor: default; }
.wk-bundle .wp-block-button__link:not([aria-disabled="true"]) { cursor: pointer; }
.wk-bundle--message { display: block; padding: 1.5rem; border-radius: var(--wk-rayon-grand); background: var(--wk-carte); text-align: center; }
.wk-vente-lien-bundle { margin-top: 1rem; font-size: var(--wp--preset--font-size--s); }
.wk-vente-lien-bundle a { color: var(--wk-or-texte); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
	.wk-bundle .wk-bundle__carte, .wk-bundle .wk-bundle__visuel { transition: none; }
}

/* ---------- Une ligne vers La méthode (au lieu de répéter la page) ---------- */
.wk-vente-methode { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wk-trait); text-align: center; }
.wk-vente-methode > p { margin: 0 auto; max-width: 44rem; }

/* ---------- Le contenu en chiffres, en bas du haut de page ---------- */
.wk-section .wk-vente-contenu {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--70, 3.5rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--wk-trait);
}
.wk-vente-contenu > p { margin: 0; padding: 0 1rem; text-align: center; font-size: var(--wp--preset--font-size--s); line-height: 1.3; color: var(--wk-taupe); }
.wk-vente-contenu > p + p { border-left: 1px solid var(--wk-trait); }
.wk-vente-contenu strong {
	display: block;
	margin-bottom: .25rem;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--couleur, var(--wk-or)) 70%, var(--wk-ecorce));
}
@media (max-width: 47.9rem) {
	.wk-section .wk-vente-contenu { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
	.wk-vente-contenu > p:nth-child(3) { border-left: 0; }
}

/* ---------- Les rythmes que vous jouerez : cartes Wakatoo jouables, puis l'enregistrement ---------- */
.wk-section .wk-vente-rythmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
/* WordPress (mise en page « flow ») pose une marge haute de 20 px sur chaque bloc SAUF le premier : dans une
   grille, les encarts 2 et 3 descendaient de 20 px et faisaient 20 px de moins que le premier (Gauthier, 21/09/2026). */
.wk-section .wk-vente-rythmes > .wk-vente-rythme { margin-block: 0; }
.wk-vente-rythme {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.4rem 1.25rem 1.25rem;
	border-radius: var(--wk-rayon-grand);
	background: var(--wk-carte);
	border: 1px solid rgba(57, 41, 29, .1);
	text-align: center;
	justify-content: flex-start; /* chapitre et titre alignés d'un encart à l'autre, même quand un rythme a une rangée de moins */
}
.wk-vente-rythmes .wk-vente-rythme > * { margin: 0; }
.wk-vente-rythme .wk-vente-rythme__chapitre { font-size: var(--wp--preset--font-size--xs, .8rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-or-texte); }
.wk-vente-rythme .wk-demo-cartes .rythm-header { margin-bottom: .9rem; }
.wk-vente-rythme .wk-demo-cartes .cards { --card-size: 60px; }
.wk-vente-rythme .wk-demo-cartes .wakatoo-audio-player { margin-top: 1rem; }
/* Interrupteur daltonien au-dessus des rythmes : posé par Simple_LMS_Vente (simple-lms), même réglage que Mon profil */
.wk-vente-daltonien { margin: 1.75rem 0 0; }
.wk-vente-daltonien + .wk-vente-rythmes { margin-top: 1.1rem; }
/* Dans la section « Les rythmes que vous jouerez », il n'y a plus que les cartes Wakatoo :
   la ligne « Le même rythme, au didgeridoo » et le lecteur MP3 sont retirés (Gauthier, 21/09),
   le lecteur de Wakatoo suffit. Les règles ci-dessous restent pour les pages e-book, qui
   réutilisent .wk-vente-rythme hors grille pour vendre leurs pistes audio. */
.wk-vente-rythme .wk-vente-audio { width: 100%; }
.wk-vente-rythme .wk-vente-audio audio { max-width: none; }

/* Les cartes « inclus » : rangée centrée, sans plafond par carte (21/09/2026) — les cartes s'étirent
   jusqu'aux bords de la pastille du menu, comme les autres grilles. Avec un plafond de 19 rem la rangée
   s'arrêtait à ~1 276 px : ni alignée, ni franchement plus étroite, donc lue comme un défaut d'alignement. */
.wk-services.wk-vente-inclus { display: flex; flex-wrap: wrap; justify-content: center; }
/* Cartes alignées à gauche comme partout ailleurs sur le site (21/09/2026) : un texte de trois
   lignes centré dans une carte se lit mal, et l'icône à gauche donne un point de départ commun. */
.wk-vente-inclus .wk-service { flex: 1 1 14rem; }
@media (max-width: 47.9rem) { .wk-vente-inclus .wk-service { max-width: none; } }


/* Programme sans visuel (formations sans captures de leçons) : liseré à la couleur de la formation */
.wk-programme--sans-visuel .wk-chapitre { border-top: 4px solid var(--couleur, var(--wk-or)); }
.wk-programme--sans-visuel .wk-chapitre .wk-chapitre__infos { margin-top: 1.1rem; color: var(--couleur, var(--wk-or-texte)); }
@media (max-width: 47.9rem) {
	.wk-programme--sans-visuel .wk-chapitre { display: flex; flex-direction: column; padding: .9rem 1rem; }
	.wk-programme--sans-visuel .wk-chapitre > * { margin: 0; }
	.wk-programme--sans-visuel .wk-chapitre .wk-chapitre__infos { margin-top: 0; }
	.wk-programme--sans-visuel .wk-chapitre .wk-chapitre__detail { padding-top: .6rem; }
}

/* ---------- Programme en parcours ([wakademy_programme], inc/programme.php, 18/09/2026) ----------
   Le trajet (départ → étapes → arrivée), puis chaque étape : objectif à gauche, chapitres reliés par un fil à droite.
   Couleur : celle de la formation (--couleur), plus soutenue d'étape en étape pour montrer la progression. */
body:has(.wk-vente-hero) .wk-section > .wk-programme-parcours,
.wk-programme-parcours { max-width: var(--wk-largeur-encadre, 56rem); margin: 2.5rem auto 3rem; --pp-accent: var(--couleur, var(--wk-or)); }
.wk-programme-parcours p, .wk-programme-parcours ol, .wk-programme-parcours ul { margin: 0; padding: 0; }
.wk-programme-parcours ol, .wk-programme-parcours ul, .wk-programme-parcours li { list-style: none; }
.wk-programme-parcours li::marker { content: none; }

/* 1. Le trajet : un chemin, pas un graphique (21/09/2026).
   Retour de Gauthier : « plus de barre mais des points qui s'enchaînent comme un chemin, et
   ensuite l'arrivée avec un drapeau planté (visuel ! aussi PC) ».
   On part d'en haut, on suit les points d'étape reliés par un trait, on arrive au drapeau.
   Même image sur ordinateur (chemin horizontal) et sur téléphone (chemin vertical).
   L'écart entre deux points suit le nombre de leçons : une longue étape occupe plus de chemin. */
.wk-programme-parcours__trajet {
	display: grid; grid-template-columns: minmax(0, 1fr);
	gap: 1.6rem; margin-bottom: 3.5rem; padding: 1.75rem 2.25rem 2rem;
	border-radius: var(--wk-rayon-grand); border: 1px solid var(--wk-trait);
}
.wk-programme-parcours__borne { display: grid; gap: .3rem; line-height: 1.25; }
.wk-programme-parcours__borne span {
	font-size: var(--wp--preset--font-size--xs, .75rem); font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--wk-taupe);
}
/* Le point de départ : en retrait, c'est le problème qu'on quitte. */
.wk-programme-parcours__borne:not(.wk-programme-parcours__borne--arrivee) {
	grid-row: 1; font-size: var(--wp--preset--font-size--s); font-weight: 600; color: var(--wk-taupe);
}
/* L'arrivée, en bas du chemin : la promesse, avec son drapeau planté. */
/* `.wk-programme-parcours p { padding: 0 }` plus haut est plus fort qu'une simple classe :
   on nomme la balise pour que la place réservée au drapeau tienne. */
.wk-programme-parcours p.wk-programme-parcours__borne--arrivee {
	position: relative; grid-row: 3; padding-left: 2.9rem; text-align: left;
	font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 800; letter-spacing: -.01em;
	color: var(--pp-accent);
}
.wk-programme-parcours__borne--arrivee span { color: var(--pp-accent); opacity: .85; }
.wk-programme-parcours__borne--arrivee::before {
	content: ""; position: absolute; left: .15rem; top: -.05rem; width: 1.7rem; height: 1.7rem;
	background: var(--pp-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V3'/%3E%3Cpath d='M5 4h12l-2.6 3.9L17 12H5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V3'/%3E%3Cpath d='M5 4h12l-2.6 3.9L17 12H5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le chemin : toujours vertical, sur ordinateur comme sur téléphone. Chaque étape est dite en
   bénéfice (« d'ancrer le sens du rythme en développant la pulsation ») et non par son nom seul :
   ce sont des phrases, elles ne tiennent pas côte à côte (Gauthier, 21/09/2026). Lues à la suite,
   elles forment l'argument : voilà où vous en êtes, voilà ce dont vous avez besoin, voilà où vous arrivez. */
.wk-programme-parcours__barre { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
.wk-programme-parcours__barre li { position: relative; min-width: 0; }
/* le trait qui descend vers le point suivant ; il fonce d'étape en étape */
.wk-programme-parcours__barre li:not(:last-child)::before {
	content: ""; position: absolute; left: calc(.8rem - 1.5px); top: 1.75rem; bottom: -1.15rem;
	width: 3px; border-radius: 999px;
	background: color-mix(in srgb, var(--pp-accent) calc(25% + var(--rang) * 18%), var(--wk-sable));
}
.wk-programme-parcours .wk-programme-parcours__barre a {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem;
	color: inherit; text-decoration: none; border-radius: var(--wk-rayon-petit);
}
.wk-programme-parcours__barre a:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 4px; }
.wk-programme-parcours__nom-etape { font-size: var(--wp--preset--font-size--s); font-weight: 600; line-height: 1.4; color: var(--wk-ecorce); }
/* le drapeau prolonge le chemin : un bout de trait le relie au dernier point */
.wk-programme-parcours__borne--arrivee::after {
	content: ""; position: absolute; left: calc(.8rem - 1.5px); top: -1.2rem; height: 1.2rem; width: 3px;
	border-radius: 999px; background: color-mix(in srgb, var(--pp-accent) 80%, var(--wk-sable));
}
.wk-programme-parcours__barre a:hover .wk-programme-parcours__nom-etape { color: var(--pp-accent); }
.wk-programme-parcours__barre a:hover .wk-programme-parcours__rang { transform: scale(1.12); }
.wk-programme-parcours__rang {
	flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
	border-radius: 50%; background: var(--pp-accent); color: #fff;
	font-size: .78rem; font-weight: 800; transition: transform .2s var(--wk-ease, ease);
	box-shadow: 0 0 0 4px var(--wk-sable);
}

/* 2. Étapes */
.wk-programme-parcours__etapes { display: grid; gap: 1.25rem; }
.wk-programme-parcours__etape {
	display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2.5rem; align-items: start;
	padding: 2rem 2.25rem; border-radius: var(--wk-rayon-grand);
	background: color-mix(in srgb, var(--pp-accent) 7%, var(--wk-sable));
	scroll-margin-top: 6rem;
}
.wk-programme-parcours__tete { position: sticky; top: 7rem; display: grid; gap: .35rem; }
.wk-programme-parcours__quand { font-size: var(--wp--preset--font-size--s); font-weight: 700; color: color-mix(in srgb, var(--pp-accent) 75%, var(--wk-texte, currentColor)); }
/* Le nom court de l'étape (« La pulsation ») reste en repère à côté du numéro : le titre, lui,
   dit le résultat (Gauthier, 21/09/2026 : « La pulsation ne veut rien dire »). */
.wk-programme-parcours__quand span { font-weight: 600; color: var(--wk-taupe); }
.wk-programme-parcours__quand span::before { content: "·"; margin: 0 .4rem 0 .15rem; opacity: .6; }
.wk-programme-parcours h3.wk-programme-parcours__nom { margin: 0; font-size: var(--wp--preset--font-size--xl); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.wk-programme-parcours__chiffres { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem !important; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }
.wk-programme-parcours__chiffres strong { color: var(--wk-texte, inherit); font-weight: 800; }

/* Chapitres reliés par un fil */
.wk-programme-parcours__chapitre { position: relative; }
.wk-programme-parcours__chapitre + .wk-programme-parcours__chapitre::before {
	content: ""; position: absolute; left: 1.2rem; top: -1.1rem; height: 1.6rem; width: 2px; margin-left: -1px;
	background: color-mix(in srgb, var(--pp-accent) 45%, transparent);
}
.wk-programme-parcours summary {
	display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto 1.5rem; align-items: center; gap: 1rem;
	padding: .55rem .6rem .55rem 0; border-radius: var(--wk-rayon); cursor: pointer; list-style: none;
}
.wk-programme-parcours summary::-webkit-details-marker { display: none; }
.wk-programme-parcours summary:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 2px; }
.wk-programme-parcours__n {
	display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	border: 2px solid var(--pp-accent); background: var(--wk-creme); font-weight: 800; font-size: var(--wp--preset--font-size--s);
}
.wk-programme-parcours details[open] .wk-programme-parcours__n { background: var(--pp-accent); color: #fff; }
.wk-programme-parcours__corps { display: grid; gap: .1rem; }
.wk-programme-parcours__titre { font-size: var(--wp--preset--font-size--m); font-weight: 800; line-height: 1.25; }
.wk-programme-parcours__phrase { font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); line-height: 1.4; }
.wk-programme-parcours__duree { display: grid; justify-items: end; font-size: var(--wp--preset--font-size--xs, .8rem); font-weight: 700; color: var(--wk-taupe); white-space: nowrap; text-align: right; }
.wk-programme-parcours__ouvrir { position: relative; width: 1.5rem; height: 1.5rem; }
.wk-programme-parcours__ouvrir::before, .wk-programme-parcours__ouvrir::after { content: ""; position: absolute; inset: 50% 20% auto; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: rotate .25s var(--wk-ease); }
.wk-programme-parcours__ouvrir::after { rotate: 90deg; }
.wk-programme-parcours details[open] .wk-programme-parcours__ouvrir::after { rotate: 0deg; }
.wk-programme-parcours summary:hover .wk-programme-parcours__titre { color: color-mix(in srgb, var(--pp-accent) 70%, var(--wk-texte, currentColor)); }
.wk-programme-parcours__detail { margin: .2rem 0 .8rem 3.4rem; padding: .9rem 1.1rem; border-radius: var(--wk-rayon); background: var(--wk-creme); }
.wk-programme-parcours__detail > p { font-size: var(--wp--preset--font-size--xs, .8rem); font-weight: 700; color: var(--wk-taupe); margin-bottom: .4rem !important; }
.wk-programme-parcours__detail li { position: relative; padding-left: 1.5rem; font-size: var(--wp--preset--font-size--s); line-height: 1.45; }
.wk-programme-parcours__detail li + li { margin-top: .35rem; }
.wk-programme-parcours__detail li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: .95rem; height: .95rem; background: var(--pp-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 61.99rem) {
	.wk-programme-parcours__etape { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 1.25rem; }
	.wk-programme-parcours__tete { position: static; }
}
@media (max-width: 47.99rem) {
	/* Téléphone : le même chemin, à la verticale. Le trait descend d'un point au suivant,
	   et le drapeau est planté tout en bas (retour de Gauthier, 21/09/2026). */
	.wk-programme-parcours__trajet { gap: 1.2rem; margin-bottom: 2rem; padding: 1.35rem 1.25rem; }

	.wk-programme-parcours summary { grid-template-columns: 2.2rem minmax(0, 1fr) 1.25rem; gap: .75rem; }
	.wk-programme-parcours__n { width: 2.2rem; height: 2.2rem; }
	.wk-programme-parcours__duree { grid-column: 2; grid-row: 2; display: flex; gap: .6rem; justify-items: start; }
	.wk-programme-parcours__ouvrir { grid-column: 3; grid-row: 1; }
	.wk-programme-parcours__chapitre + .wk-programme-parcours__chapitre::before { left: 1.1rem; }
	.wk-programme-parcours__detail { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wk-programme-parcours__ouvrir::before, .wk-programme-parcours__ouvrir::after, .wk-programme-parcours__rang { transition: none; }
}

/* ---------- L'effet « bonus » (21/09/2026) ----------
   Retour de Gauthier : « on ne sent pas l'effet BONUS comme avant ». L'ancienne page annonçait
   « Bonus 1 », « Bonus 2 »… : chaque avantage était nommé, ça donnait l'impression d'une pile de
   cadeaux. Les cartes plates l'avaient perdu.
   La pastille est écrite par le CSS : rien à ajouter dans les pages, et le mot « Bonus » s'écrit
   pareil en français et en anglais. Sans numéro à dessein : le nombre d'avantages change d'une
   formation à l'autre. */
.wk-vente-inclus .wk-service::after {
	content: "Bonus";
	display: inline-flex; align-items: center;
	padding: .26rem .75rem;
	border-radius: var(--wk-rayon-bouton);
	background: var(--wk-or);
	color: var(--wk-sur-or);
	font-size: var(--wp--preset--font-size--xs, .75rem);
	font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
}
/* Dans la carte : l'icône à gauche, la pastille à droite, sur la même ligne — le titre garde
   toute la largeur en dessous (en haut à droite, la pastille l'écrasait sur les écrans moyens). */
.wk-vente-inclus .wk-service {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem;
}
.wk-vente-inclus .wk-service::before { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.wk-vente-inclus .wk-service::after { grid-column: 2; grid-row: 1; justify-self: end; }
.wk-vente-inclus .wk-service > * { grid-column: 1 / -1; }
.wk-vente-inclus .wk-service > :first-child { margin-top: .9rem; }

/* Le bon de réduction est devenu un bonus comme les autres (21/09/2026) : même carte, même
   pastille, une icône de ticket. Retour de Gauthier : « je déteste ton design de faux coupons,
   on peut pas faire 4 encarts dans le même design ? » */
.wk-service--stage { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a2 2 0 0 0 0 4v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a2 2 0 0 0 0-4z'/%3E%3Cpath d='M15 6v2M15 11v2M15 16v2'/%3E%3C/svg%3E"); }

/* L'étiquette de valeur : « Valeur 39 € », juste sous le titre du bonus. Plus discrète que la
   pastille « Bonus » (fond doré léger, texte doré) pour qu'on lise le titre en premier.
   Piège : pas de règle sur `body.wk-sombre` seul — la classe est posée sur toutes les pages
   publiques, et les jetons sombres ne s'appliquent que dans @media (prefers-color-scheme: dark).
   Une couleur écrite sous `body.wk-sombre` s'applique donc AUSSI en clair : c'est ce qui rendait
   l'étiquette illisible (texte crème sur fond clair). Les jetons --wk-* basculent tout seuls. */
.wk-vente-inclus .wk-service__valeur {
	justify-self: start; width: fit-content;
	margin: .1rem 0 .35rem;
	padding: .2rem .65rem;
	border-radius: var(--wk-rayon-bouton);
	background: color-mix(in srgb, var(--wk-or) 16%, transparent);
	color: var(--wk-or-texte);
	font-size: var(--wp--preset--font-size--xs, .75rem);
	font-weight: 800; letter-spacing: .02em; line-height: 1.3;
}