/* gratuit : feuille propre à ce chantier (voir CHANGES-WORDPRESS.md). Chargée après site.css sur les pages publiques.
   Pages des cours offerts : souffle continu (pack débutant, 10950), pack joueurs wobbles + rythme (34594), bases du rythme (48560).
   Tout est préfixé gratuit- ; le formulaire d'inscription (Simple LMS) n'est restylé que dans .gratuit-formulaire. */

/* ---------- Icônes (même trait doré que les atouts du thème) ---------- */
.gratuit-ico--video, .gratuit-pack .gratuit-pack--video { --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='5' width='18' height='14' rx='3'/%3E%3Cpath d='M10 9.5v5l4.5-2.5z'/%3E%3C/svg%3E"); }
.gratuit-ico--mail, .gratuit-pack .gratuit-pack--mail { --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='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.gratuit-ico--guide, .gratuit-pack .gratuit-pack--guide { --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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.gratuit-ico--conseils, .gratuit-pack .gratuit-pack--conseils { --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='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.gratuit-ico--eleves { --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%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.3a6.5 6.5 0 0 1 3.5 5.7'/%3E%3C/svg%3E"); }
.gratuit-ico--cadeau { --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='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M5 12v9h14v-9M7.5 8a2.5 2.5 0 1 1 4.5-2.5A2.5 2.5 0 1 1 16.5 8'/%3E%3C/svg%3E"); }

/* ---------- Hero : promesse à gauche, formulaire à droite (dessous sur téléphone) ---------- */
.gratuit-hero { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70); } /* haut comme l'accueil : l'en-tête flottant ne cache plus le titre sur téléphone */
.gratuit-hero .wp-block-columns { gap: clamp(2rem, 4vw, 4.5rem); }
.gratuit-hero h1.wp-block-heading { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.8rem); }
.gratuit-confiance { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.gratuit-confiance > * { margin: 0; }
.gratuit-confiance .wk-preuve { margin: 0; }
.gratuit-visages { display: flex; flex: none; }
.gratuit-visages > .wp-block-image { margin: 0 0 0 -.7rem; }
.gratuit-visages > .wp-block-image:first-child { margin-left: 0; }
@media (max-width: 30rem) {
	.gratuit-confiance { flex-direction: column; align-items: flex-start; gap: .6rem; }
}
.gratuit-visages img { display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--wk-creme); box-shadow: 0 4px 12px rgba(57, 41, 29, .18); }

/* ---------- Carte d'inscription ---------- */
.gratuit-formulaire.wk-carte { position: relative; padding: clamp(1.4rem, .9rem + 2vw, 2.2rem); background: var(--wk-creme); border: 1.5px solid rgba(196, 135, 56, .4); box-shadow: 0 30px 60px -28px rgba(57, 41, 29, .4); scroll-margin-top: 6rem; }
.gratuit-formulaire::before { content: ""; position: absolute; inset: -1.5px -1.5px auto; height: 6px; border-radius: var(--wk-rayon-grand) var(--wk-rayon-grand) 0 0; background: linear-gradient(90deg, var(--wk-or), var(--wk-ambre)); }
.gratuit-formulaire > * { margin-block: 0; }
.gratuit-formulaire > * + * { margin-block-start: 1rem; }
.gratuit-formulaire .wk-carte__num { color: var(--wk-or-texte); }
.gratuit-formulaire h2.wp-block-heading { margin-top: .35rem; font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.15; max-width: none; }
.gratuit-pack { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .6rem; }
.gratuit-pack li { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.3; color: var(--wk-taupe); }
.gratuit-pack li::before { content: ""; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(196, 135, 56, .14) no-repeat center / 1.2rem var(--ico); }
.gratuit-pack li strong { color: var(--wk-ecorce); font-weight: 800; }
.gratuit-prerequis { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--wk-rayon); background: rgba(196, 135, 56, .1); font-size: var(--wp--preset--font-size--s); line-height: 1.4; color: var(--wk-ecorce); }
.gratuit-prerequis::before { content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: .05rem; background: no-repeat center / contain 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
.gratuit-prerequis a { color: var(--wk-or-texte); font-weight: 800; }

/* Formulaire Simple LMS dans la carte : deux champs côte à côte, gros bouton pilule */
.gratuit-formulaire .wk-inscription { margin-top: 1.4rem; }
.gratuit-formulaire .wk-inscription .registration-form { grid-template-columns: 1fr 1fr; gap: .8rem; }
.gratuit-formulaire .wk-inscription .form-group input { background: #fff; }
.gratuit-formulaire .wk-inscription .btn-register, .gratuit-formulaire .wk-inscription .btn-register:hover { grid-column: 1 / -1; width: 100%; height: 3.5rem; font-size: var(--wp--preset--font-size--m); }
.gratuit-formulaire .wk-inscription .btn-register:disabled { opacity: .7; cursor: wait; }
.gratuit-formulaire .wk-inscription .form-message { padding: .8rem 1rem; border-radius: var(--wk-rayon); font-size: var(--wp--preset--font-size--s); line-height: 1.45; }
.gratuit-formulaire .wk-inscription .form-message.error { background: rgba(184, 56, 43, .1); color: var(--wk-erreur); }
.gratuit-formulaire .wk-inscription .form-message.success { background: rgba(74, 155, 126, .14); color: #2F6B55; }
.gratuit-formulaire .wk-inscription .registration-info { margin-top: .75rem; text-align: center; }
/* Élève déjà connecté : un seul bouton « Commencer » / « Continuer » */
.gratuit-formulaire .simple-lms-continue-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 3.5rem; margin: 0; border: 0; border-radius: var(--wk-rayon-bouton); background: var(--wk-or); color: var(--wk-sur-or); font: 800 var(--wp--preset--font-size--m) / 1 var(--wk-police); cursor: pointer; }
.gratuit-formulaire .simple-lms-continue-btn:hover { background: var(--wk-or-survol); }
@media (max-width: 30rem) {
	.gratuit-formulaire .wk-inscription .registration-form { grid-template-columns: 1fr; }
}

/* ---------- Programme : liste numérotée des vidéos (shortcode [wakademy_gratuit type="programme"]) ---------- */
.gratuit-programme { list-style: none; counter-reset: gratuit; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; }
.gratuit-programme li { counter-increment: gratuit; display: flex; align-items: center; gap: .9rem; margin: 0; padding: .65rem 1rem .65rem .7rem; border-radius: var(--wk-rayon); background: var(--wk-carte); border: 1px solid rgba(57, 41, 29, .08); font-weight: 700; }
.gratuit-programme li::before { content: counter(gratuit); flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--wk-or); color: var(--wk-sur-or); font-size: var(--wp--preset--font-size--xs); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Programme en chapitres (page 10950) : titre du chapitre à gauche, nombre de vidéos en pastille à droite. */
.gratuit-programme--chapitres li span { margin-left: auto; flex: none; padding: .2rem .75rem; border-radius: var(--wk-rayon-bouton); background: var(--wk-creme); color: var(--wk-or-texte); font-size: var(--wp--preset--font-size--xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gratuit-avant-gout { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--s); color: var(--wk-taupe); }

/* ---------- Choisir par niveau : composant .wk-cursus de site.css, variante « cours offerts » ----------
   Deux voies côte à côte sur ordinateur (une carte « Vous débutez », deux cartes « déjà le souffle continu »),
   sans la flèche vers L'art du didgeridoo ; la carte de la page ouverte porte « Vous êtes ici ». */
.gratuit-cursus .wk-cursus__voie--debut .wk-cursus__carte:first-child:not(.gratuit-ici)::after { content: none; }
.gratuit-cursus .wk-cursus__carte.gratuit-ici { border: 2px solid var(--couleur); }
.gratuit-cursus .wk-cursus__cartes .wk-cursus__carte.gratuit-ici::after { content: "Vous êtes ici"; position: absolute; z-index: 2; top: .85rem; right: .85rem; bottom: auto; left: auto; width: auto; height: auto; transform: none; padding: .32rem .8rem; border-radius: 50px; background: rgba(255, 255, 255, .94); color: var(--wk-ecorce); font-size: var(--wp--preset--font-size--xs); font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
@media (min-width: 782px) {
	.gratuit-cursus { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 1.5rem; align-items: start; }
	.gratuit-cursus .wk-cursus__voie--debut .wk-cursus__cartes { grid-template-columns: 1fr; }
	.gratuit-cursus .wk-cursus__voie:not(.wk-cursus__voie--debut) .wk-cursus__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wk-section .gratuit-cursus .wk-cursus__voie--debut .wk-cursus__visuel { aspect-ratio: 3 / 2; }
	.gratuit-cursus .wk-cursus__voie:not(.wk-cursus__voie--debut) .wk-cursus__carte h3.wp-block-heading { font-size: var(--wp--preset--font-size--l); }
}

/* ---------- Le prof, version courte (pages wobbles et rythme) ---------- */
.wk-section > .gratuit-prof { max-width: var(--wk-largeur-encadre, 56rem); } /* encadré seul : resserré (16/09/2026) */
.gratuit-prof { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--wk-rayon-grand); background: var(--wk-creme); border: 1px solid rgba(57, 41, 29, .1); box-shadow: var(--ombre-carte); }
.gratuit-prof > *, .gratuit-prof > .wp-block-group > * { margin-block: 0; }
.gratuit-prof > .wp-block-group > * + * { margin-block-start: .5rem; }
.gratuit-prof .gratuit-prof__photo { flex: none; }
.gratuit-prof .gratuit-prof__photo img { display: block; width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; }
@media (max-width: 40rem) {
	.gratuit-prof { flex-direction: column; text-align: center; }
}

/* ---------- Pack joueurs (page 34594 : wobbles + bases du rythme + 2 bonus) ---------- */
.gratuit-ico--wobble, .gratuit-pack .gratuit-pack--wobble { --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='M2 12c1.7-4.7 3.3-4.7 5 0s3.3 4.7 5 0 3.3-4.7 5 0 3.3 4.7 5 0'/%3E%3C/svg%3E"); }
.gratuit-ico--rythme, .gratuit-pack .gratuit-pack--rythme { --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 12h3.5l2-5 4 10 2.5-7 1.5 2H21'/%3E%3C/svg%3E"); }
.gratuit-ico--son, .gratuit-pack .gratuit-pack--son { --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 9.5h3l4.5-4v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }

/* Hero : les deux souffles dessinés (wobbles, rythme), décalés */
.gratuit-hero__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.gratuit-hero .gratuit-hero__duo .gratuit-hero__visuel { aspect-ratio: 3 / 4; }
.gratuit-hero__duo .gratuit-hero__visuel:last-child { margin-top: 2.5rem; }
@media (max-width: 781px) {
	.gratuit-hero .gratuit-hero__duo .gratuit-hero__visuel { aspect-ratio: 4 / 3; }
	.gratuit-hero__duo .gratuit-hero__visuel:last-child { margin-top: 1.25rem; }
}

/* Contenu du pack : 4 tuiles (2 cours, 2 bonus), la carte entière mène à la première leçon */
.wk-section .gratuit-contenu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.wk-section .gratuit-contenu > *, .wk-section .gratuit-tuile > * { margin: 0; }
.gratuit-tuile { position: relative; display: flex; flex-direction: column; gap: .4rem; padding-bottom: 1.25rem; border-radius: var(--wk-rayon-grand); background: var(--wk-carte); border: 1px solid rgba(57, 41, 29, .08); overflow: hidden; transition: transform .35s var(--wk-ease), box-shadow .35s var(--wk-ease), border-color .35s; }
.gratuit-tuile:hover { transform: translateY(-4px); border-color: rgba(196, 135, 56, .5); box-shadow: 0 16px 34px rgba(57, 41, 29, .14); }
.gratuit-tuile > :not(.gratuit-tuile__visuel, .gratuit-tuile__badge) { padding-inline: 1.25rem; }
.wk-section .gratuit-tuile .gratuit-tuile__visuel { display: block; aspect-ratio: 16 / 10; margin-bottom: .6rem; background: var(--ico) no-repeat center / 3.4rem, linear-gradient(135deg, rgba(196, 135, 56, .26), rgba(227, 168, 98, .08)); }
.gratuit-tuile--bonus .gratuit-tuile__visuel { background-color: var(--wk-creme); }
.wk-section .gratuit-tuile .gratuit-tuile__badge { position: absolute; top: .8rem; left: .8rem; padding: .3rem .8rem; border-radius: 50px; background: var(--wk-or); color: var(--wk-sur-or); font-size: var(--wp--preset--font-size--xs); font-weight: 800; letter-spacing: .03em; }
.gratuit-tuile h3.wp-block-heading { font-size: var(--wp--preset--font-size--m); line-height: 1.2; max-width: none; }
.wk-section .gratuit-tuile h3 a { color: inherit; text-decoration: none; }
.wk-section .gratuit-tuile h3 a:hover { color: var(--wk-or-texte); }
.gratuit-tuile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gratuit-tuile p:not([class*="__"]) { font-size: var(--wp--preset--font-size--s); line-height: 1.4; color: var(--wk-taupe); }
.wk-section .gratuit-tuile .gratuit-tuile__infos { margin-top: auto; padding-top: .3rem; font-size: var(--wp--preset--font-size--xs); font-weight: 800; color: var(--wk-or-texte); font-variant-numeric: tabular-nums; }
@media (max-width: 62rem) {
	.wk-section .gratuit-contenu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
	.wk-section .gratuit-contenu { grid-template-columns: 1fr; gap: .75rem; }
	.gratuit-tuile { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; row-gap: .15rem; align-content: center; padding: .85rem 1rem .85rem .85rem; }
	.gratuit-tuile > :not(.gratuit-tuile__visuel, .gratuit-tuile__badge) { grid-column: 2; padding-inline: 0; }
	.wk-section .gratuit-tuile .gratuit-tuile__visuel { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; aspect-ratio: auto; min-height: 5.5rem; margin: 0; border-radius: var(--wk-rayon); background-size: 2.4rem, auto; }
	.wk-section .gratuit-tuile .gratuit-tuile__badge { position: static; grid-column: 2; justify-self: start; padding: .12rem .6rem; }
	.gratuit-tuile:hover { transform: none; }
}

/* Chiffres réels en anneaux (38 % des élèves avancés ont commencé par ces cours) */
.wk-section .gratuit-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 3rem; margin-bottom: 2.5rem; }
.wk-section .gratuit-stats > * { margin: 0; }
.gratuit-stat { --pct: 0; display: flex; align-items: center; gap: 1rem; max-width: 24rem; font-size: var(--wp--preset--font-size--s); line-height: 1.4; color: var(--wk-taupe); }
.gratuit-stat--38 { --pct: 38; }
.gratuit-stat--51 { --pct: 51; }
.gratuit-stat strong { position: relative; flex: none; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; color: inherit; font-size: var(--wp--preset--font-size--l); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gratuit-stat strong::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--wk-or) calc(var(--pct) * 1%), rgba(196, 135, 56, .2) 0); -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%); mask: radial-gradient(closest-side, transparent 80%, #000 81%); }
.gratuit-stat a { color: var(--wk-or-texte); font-weight: 800; }
/* Sur la bande sombre : chiffres blancs, texte crème, lien doré clair */
.wk-section--bande .gratuit-stat { color: rgba(255, 255, 255, .82); }
.wk-section--bande .gratuit-stat strong { color: #fff; }
.wk-section--bande .gratuit-stat a { color: var(--wk-ambre); }
@media (max-width: 36rem) {
	.wk-section .gratuit-stats { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.gratuit-stat strong { width: 5.25rem; height: 5.25rem; font-size: var(--wp--preset--font-size--m); }
}

/* ---------- Mode sombre ---------- */
@media (prefers-color-scheme: dark) {
	body.wk-sombre .gratuit-formulaire.wk-carte { border-color: rgba(227, 168, 98, .35); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); }
	body.wk-sombre .gratuit-visages img { border-color: #1C1C1E; }
	body.wk-sombre .gratuit-programme li, body.wk-sombre .gratuit-prof { border-color: rgba(255, 255, 255, .12); }
	body.wk-sombre .gratuit-formulaire .wk-inscription .form-message.success { color: #6FB99A; }
	body.wk-sombre .gratuit-tuile { border-color: rgba(255, 255, 255, .12); }
}