/* ==================================================================
   Wakademy : jetons communs (couleurs, polices, formes).
   Chargée sur toutes les pages, leçons comprises : le thème ET les
   extensions (Simple LMS, waka-stage, waka-groupe, waka-payments…)
   s'en servent, pour une seule identité sur tout le site.
   Les valeurs viennent de theme.json (--wp--preset--…), avec des
   valeurs de secours si une page ne les charge pas.
   Définies sur body : le mode sombre (site.css) les change d'un coup.
   ================================================================== */

body {
	--wk-sable: var(--wp--preset--color--sable, #EFEAE2);
	--wk-sable-fonce: var(--wp--preset--color--sable-fonce, #E6DCCF);
	--wk-creme: var(--wp--preset--color--creme, #FAF7F4);
	--wk-ecorce: var(--wp--preset--color--ecorce, #39291D);
	--wk-taupe: var(--wp--preset--color--taupe, #6E6157);
	--wk-or: var(--wp--preset--color--or, #B8792F);
	--wk-or-survol: #A66C29;
	--wk-or-bord: var(--wp--preset--color--or-bord, #7E5424);
	--wk-or-texte: var(--wp--preset--color--or-texte, #7E5424);
	--wk-sur-or: var(--wp--preset--color--sur-or, #FAF7F4);
	--wk-sauge: var(--wp--preset--color--sauge, #4A9B7E);
	--wk-ambre: var(--wp--preset--color--ambre, #E89A4C);
	--wk-terracotta: var(--wp--preset--color--terracotta, #D86F4A);
	--wk-terracotta-texte: var(--wp--preset--color--terracotta-texte, #B0512E);
	--wk-erreur: var(--wp--preset--color--erreur, #B8382B);
	--wk-trait: rgba(57, 41, 29, .16);

	--wk-police: var(--wp--preset--font-family--poppins, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--wk-police-cartes: var(--wp--preset--font-family--nunito, Nunito, Poppins, system-ui, sans-serif);

	--wk-rayon-petit: 10px;
	--wk-rayon: 16px;
	--wk-rayon-grand: 28px;
	--wk-rayon-bouton: 50px; /* tous les boutons d'action en pilule, comme la pilule du menu et l'app */
	--wk-ombre: 0 18px 40px rgba(57, 41, 29, .16), 0 3px 8px rgba(57, 41, 29, .08);
}
/* Largeur et marge communes, sur :root (et non body) pour que theme.json (marge des sections,
   --wp--style--root--padding-*) puisse s'en servir ; body en hérite comme les autres jetons. */
/* ==================================================================
   TROIS LARGEURS, PAS UNE DE PLUS (règle arrêtée le 21/09/2026).

   Règle : un bloc touche EXACTEMENT le bord de la pastille du menu,
   ou il est NETTEMENT plus étroit et centré. Jamais entre les deux —
   c'est ce qui donnait l'impression de sections mal alignées.

   1. --wk-largeur          1 400 px : grilles de cartes, héros,
                            galeries, tout ce qui remplit la page.
                            Mêmes bords que la pastille du menu.
   2. --wk-largeur-encadre    896 px : un encadré seul, centré
                            (carte de prix, FAQ, formulaire, bandeau,
                            parcours, appel).
   3. --wk-largeur-texte      704 px : paragraphes et titres courants,
                            ~75 signes par ligne (norme de lisibilité).

   INTERDIT : toute largeur entre 900 et 1 400 px. Si un bloc semble
   avoir besoin de 1 000 ou 1 100 px, il passe à 896 ou à 1 400.
   ================================================================== */
:root {
	--wk-largeur: 87.5rem; /* 1 400 px : même largeur que l'espace élève et les leçons (Simple LMS) */
	--wk-largeur-encadre: 56rem;  /* 896 px */
	--wk-largeur-texte: 44rem;    /* 704 px, = contentSize de theme.json */
	/* Ancien nom, gardé le temps que les feuilles qui l'appellent encore soient reprises :
	   il ne vaut plus 64 rem (1 024 px, dans la bande interdite) mais la largeur d'encadré. */
	--wk-largeur-encadre-large: var(--wk-largeur-encadre);
	--wk-marge: 24px; /* marge latérale commune : la pastille du menu, les sections, Mon compte et tout ce qui est encadré s'alignent dessus (16 px sur téléphone) */
}

/* ---------- Simple LMS (leçons, bibliothèque de rythmes) ----------
   Ses couleurs et sa police deviennent celles du thème, sans toucher à sa
   feuille de style (qui existe en deux versions, lisible et compressée).
   Les couleurs écrites en dur dans sa feuille seront reprises plus tard. */
body {
	--color-white: var(--wk-creme);
	--wakademy-bg: var(--wk-sable);
	--wakademy-primary: var(--wk-or);
	--wakademy-text: var(--wk-ecorce);
	--wakademy-text-light: var(--wk-taupe);
	--wakademy-border: var(--wk-sable-fonce);
	--wakademy-white: var(--wk-creme);
	--waka-hover-active-bg: var(--wk-sable);
	--waka-bg-light: var(--wk-creme);
	--waka-text-dark: var(--wk-ecorce);
}
html body { font-family: var(--wk-police); }

/* ---------- Bouton commun ----------
   .wk-bouton pour le thème et les extensions. Tant que certaines extensions
   écrivent encore « elementor-button », ce nom reçoit le même style hors des
   pages construites avec Elementor (qui gardent le leur). */
.wk-bouton,
body:not(.elementor-page) .elementor-button:not(.waka-language-switcher-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--wk-rayon-bouton);
	background: var(--wk-or);
	color: var(--wk-sur-or);
	font: 700 1rem/1.2 var(--wk-police);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.wk-bouton:hover,
body:not(.elementor-page) .elementor-button:not(.waka-language-switcher-btn):hover {
	background: var(--wk-or-survol);
	color: var(--wk-sur-or);
}
.wk-bouton:active { background: var(--wk-or-bord); }
.wk-bouton--contour {
	background: transparent;
	color: var(--wk-ecorce);
	box-shadow: inset 0 0 0 2px var(--wk-or);
}
.wk-bouton--contour:hover { background: var(--wk-or); color: var(--wk-sur-or); }
.wk-bouton--petit { min-height: 2.6rem; padding: 0 1.1rem; font-size: .9375rem; }
.wk-bouton[aria-busy="true"] { opacity: .7; pointer-events: none; }

:focus-visible { outline: 3px solid var(--wk-or); outline-offset: 3px; }

/* Mouvement (repris du site Wakatoo) : une courbe douce, un ressort pour ce qui « se pose ». */
:root {
	--wk-ease: cubic-bezier(.22, .8, .26, 1);
	--wk-ressort: cubic-bezier(.34, 1.4, .64, 1);
}

/* Curseur « main » par défaut sur tout ce qui se clique (tokens.css est chargé partout, leçons comprises).
   Les règles plus précises (bouton désactivé, carte déjà choisie…) gardent la main sur celle-ci. */
button:not(:disabled), [role="button"], summary, select, label:has(> input[type="checkbox"], > input[type="radio"]) { cursor: pointer; }

/* Zone commune : même largeur que la pastille du menu. Pour tout ce qui est encadré
   (cartes, grilles, bandeaux, colonnes à fond) ; le texte courant reste à 44 rem, centré dedans. */
.wk-zone { width: min(100% - 2 * var(--wk-marge), var(--wk-largeur)); margin-inline: auto; }
@media (max-width: 47.9rem) { :root, body { --wk-marge: 16px; } }

/* ---------- Mode sombre ----------
   Jetons de body.wk-sombre (la classe est posée par le thème sur les pages publiques et Mon compte,
   par Simple LMS sur les leçons). Ici plutôt que dans site.css : tokens.css est chargé partout. */
@media (prefers-color-scheme: dark) {
	body.wk-sombre {
		color-scheme: dark;
		--wp--preset--color--sable: #1C1C1E;
		--wp--preset--color--sable-fonce: #252527;
		--wp--preset--color--creme: #2C2C2E;
		--wp--preset--color--ecorce: #F2F2F7;
		--wp--preset--color--taupe: #A1A1A6;
		--wp--preset--color--or-texte: #E3A862;
		--wp--preset--color--sauge: #346D58;
		--wp--preset--color--ambre: #A26C35;
		--wp--preset--color--terracotta: #974E34;
		--wp--preset--color--terracotta-texte: #E88A66;
		--wp--preset--color--erreur: #FF6B5E;
		--sable-rgb: 28, 28, 30;
		--trait: rgba(255, 255, 255, .14);
		--wk-trait: rgba(255, 255, 255, .14);
		--cadre: #3A3A3C;
		--pied-fond: #252527;
		--carte-fond: rgba(44, 44, 46, .85);
		--carte-bord: rgba(255, 255, 255, .08);
		--ombre-carte: 0 10px 28px -14px rgba(0, 0, 0, .6);
		--wk-ombre: 0 18px 40px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3);
		--bande-fond: #2C2C2E;
		--bande-texte: #F2F2F7;
	}
	html:has(> body.wk-sombre) { background: #1C1C1E; color-scheme: dark; }
	body.wk-sombre .wk-logo--clair { display: none; }
	body.wk-sombre .wk-logo--sombre { display: block; }
}