/* Lecteur du mode Exercices (docs/UPDATE_EXERCICE.MD). Page autonome,
   mais alignee sur le langage visuel du site : papier blanc, vert et orange. */

:root {
	--ex-fond: #4f8d16;
	--ex-fond-lumiere: rgba(255, 255, 255, 0.32);
	--ex-fond-degrade: linear-gradient(145deg, #5c970f 0%, #3f7d19 46%, #285c22 100%);
	--ex-paper: var(--theme-surface-page);
	--ex-surface: var(--theme-surface-page);
	--ex-surface-2: var(--theme-surface-2);
	--ex-bordure: var(--theme-ligne);
	--ex-texte: var(--theme-texte);
	--ex-texte-doux: var(--theme-texte-doux);
	--ex-accent: #6ea937;
	--ex-accent-survol: #568e2d;
	--ex-orange: #df8b24;
	--ex-orange-fonce: #a25700;
	--ex-orange-doux: #fff2dd;
	--ex-focus: #df8b24;
	--ex-chrono: #df8b24;
	--ex-succes: #397a2e;
	--ex-echec: #b4423b;
	--ex-erreur: #b4423b;
	--ex-carte-fond: var(--ts-fond-fbfaf5);
	--ex-carte-rouge: #c62828;
	--ex-carte-noire: #1d1d1d;
}

/* Mode sombre (docs/UPDATE_MODE_SOMBRE.md) : feutre propre a la page
   Exercices, assombri comme --theme-fond-table. */
:root[data-theme="sombre"] {
	--ex-fond: #1b300b;
	--ex-fond-lumiere: rgba(255, 255, 255, 0.08);
	--ex-fond-degrade: linear-gradient(145deg, #223317 0%, #1b300b 46%, #13230d 100%);
}

@font-face {
	font-family: "Amaranth";
	src: url('/fonts/Amaranth-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Comfortaa";
	src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body.page-exercice {
	font-family: "Comfortaa", system-ui, sans-serif;
	background:
		radial-gradient(circle at 12% 10%, var(--ex-fond-lumiere), transparent 20rem),
		var(--ex-fond-degrade);
	color: var(--theme-texte);
	margin: 0;
	padding: 16px;
	line-height: 1.45;
}

#exercice-app {
	max-width: 1120px;
	margin: 0 auto;
}

.page-exercice a {
	color: var(--theme-texte);
}

.page-exercice button,
.page-exercice a {
	font: inherit;
}

.page-exercice :focus-visible {
	outline: 3px solid var(--ex-focus);
	outline-offset: 2px;
}

.page-exercice h1 {
	margin: 0 0 6px;
	font-size: 1.6rem;
	line-height: 1.2;
	font-family: "Amaranth", sans-serif;
}

.page-exercice h2 {
	margin: 0 0 8px;
	font-size: 1.1rem;
	font-family: "Amaranth", sans-serif;
	color: var(--ts-texte-568e2d);
}

.page-exercice h3 {
	margin: 12px 0 6px;
	font-size: 0.95rem;
	color: var(--theme-texte-doux);
}

[hidden] {
	display: none !important;
}

/* Navigation */

.exercice-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 16px;
	font-size: 0.95rem;
}

.exercice-nav a {
	color: var(--theme-texte-doux);
	text-decoration: none;
}

.exercice-nav a:hover {
	color: var(--theme-texte);
	text-decoration: underline;
}

/* Catalogue */

.exercice-catalogue-intro {
	color: var(--theme-texte-doux);
	margin: 0 0 12px;
}

.exercice-catalogue-filtres {
	margin: 18px 0 0;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 8px;
	background: var(--theme-surface-page);
	box-shadow: 0 10px 26px rgba(27, 57, 20, 0.16);
	overflow: hidden;
}

.exercice-filtres-essentiels {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(170px, 230px) auto;
	gap: 10px;
	align-items: end;
	padding: 12px;
	background: linear-gradient(180deg, var(--theme-surface), var(--theme-surface-2));
}

.exercice-filtre {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.exercice-filtre > span:first-child {
	color: var(--theme-texte-doux);
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
}

.exercice-filtre input,
.exercice-filtre select {
	width: 100%;
	box-sizing: border-box;
	min-height: 34px;
	border: 1px solid var(--theme-ligne);
	border-radius: 6px;
	background: var(--theme-surface-elevee);
	color: var(--theme-texte);
	font: inherit;
	font-size: 0.8rem;
	padding: 6px 9px;
}

.exercice-filtre input:focus,
.exercice-filtre select:focus {
	outline: 3px solid rgba(222, 143, 39, 0.28);
	border-color: var(--ex-orange);
}

.exercice-champ-recherche {
	position: relative;
	display: block;
}

.exercice-champ-recherche > i {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ts-texte-6f8668);
	font-size: 0.75rem;
	pointer-events: none;
}

.exercice-champ-recherche input {
	padding-left: 31px;
}

.exercice-filtres-avances-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	min-height: 34px;
	padding: 6px 11px;
	border: 1px solid #b9c9b2;
	border-radius: 6px;
	background: var(--theme-surface-accent);
	color: var(--ts-texte-356d2d);
	font-size: 0.76rem;
	font-weight: 800;
	cursor: pointer;
}

.exercice-filtres-avances-bouton:hover,
.exercice-filtres-avances-bouton[aria-expanded="true"] {
	border-color: #8bae79;
	background: var(--ts-fond-dfeecd);
}

.exercice-filtres-avances-bouton.actif {
	box-shadow: inset 3px 0 0 var(--ex-orange);
}

.exercice-filtres-avances-bouton small {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 9px;
	background: var(--ex-orange);
	color: #fff;
	font-size: 0.65rem;
}

.exercice-filtres-chevron {
	font-size: 0.66rem;
	transition: transform 0.18s ease;
}

.exercice-filtres-avances-bouton[aria-expanded="true"] .exercice-filtres-chevron {
	transform: rotate(180deg);
}

.exercice-filtres-avances {
	padding: 12px;
	border-top: 1px solid var(--theme-ligne);
	background:
		linear-gradient(var(--ts-fond-fffdf7-a950), var(--ts-fond-fffdf7-a950)),
		repeating-linear-gradient(90deg, #9b6a3d 0 2px, #b98756 2px 7px);
}

.exercice-filtres-avances-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
	color: var(--theme-texte);
	font-size: 0.78rem;
}

.exercice-filtres-avances-entete strong i {
	margin-right: 5px;
	color: var(--ex-orange);
}

.exercice-filtres-avances-grille {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 9px;
}

.exercice-filtres-reset {
	width: auto;
	padding: 4px 7px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--ts-texte-a25700);
	font: inherit;
	font-size: 0.68rem;
	font-weight: 700;
	cursor: pointer;
}

.exercice-filtres-reset:hover {
	background: var(--ts-fond-fff2dd);
}

.exercice-catalogue-compteur {
	margin: 0;
	padding: 7px 12px;
	border-top: 1px solid var(--ts-ligne-d8dfd4-a720);
	background: var(--ts-fond-f1f4ee);
	color: var(--ts-texte-59645a);
	font-size: 0.72rem;
	font-weight: 700;
}

.exercice-catalogue h1 {
	color: #fff;
	text-shadow: 0 2px 8px rgba(22, 44, 15, 0.28);
}

.exercice-catalogue-liste {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.exercice-catalogue-liste a {
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--theme-ligne);
	border-radius: 4px;
	background: var(--theme-surface-page);
	color: var(--theme-texte);
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(34, 64, 25, 0.12);
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.exercice-catalogue-liste a::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: #74a747;
	content: "";
}

.exercice-catalogue-liste a:hover {
	background: var(--theme-surface-2);
	border-color: #b7caa9;
	box-shadow: 0 11px 26px rgba(34, 64, 25, 0.17);
	transform: translateY(-1px);
}

.exercice-catalogue-liste a:hover::before {
	background: var(--ex-orange);
}

.exercice-catalogue-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 20px;
}

.exercice-catalogue-num {
	color: var(--theme-texte-doux);
	font-size: 0.85rem;
}

.exercice-catalogue-titre {
	display: block;
	font-weight: 600;
	margin: 2px 0 8px;
	color: var(--ts-texte-568e2d);
	font-family: "Amaranth", sans-serif;
	font-size: 1.1rem;
}

.exercice-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 0.8rem;
}

.exercice-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 0;
	border-radius: 0;
	background: transparent;
	color: var(--ts-texte-568e2d);
	font-weight: 800;
}

.exercice-enonce .exercice-badges {
	gap: 9px 14px;
	font-size: 0.98rem;
}

.exercice-enonce .exercice-badge {
	font-weight: 800;
}

/* ===== Ecran d'exercice (docs/UPDATE_EXERCICE.MD "Mise en page") =====
   Un ecran de jeu, pas une page : plateau, main et zone ANNONCE de jeu.css,
   en plein ecran. La geometrie vient de exercise-player.js#miseEnPage, en
   variables CSS posees sur #exercice-scene (--taille-plateau, --largeur-carte,
   --hauteur-carte, --haut-meta) ; le mode est une classe sur body
   (mode-standard, portrait, portrait-large, paysage-large). */

/* commun.css (qui definit .hidden) n'est pas charge sur cette page, alors
   que jeu.css s'en sert (#annonce_chrono). */
.page-exercice .hidden {
	display: none !important;
}

body.page-exercice.exercice-actif {
	padding: 0;
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
}

.exercice-actif #exercice-app {
	max-width: none;
}

.exercice-actif .exercice-nav {
	display: none;
}

.exercice-jeu {
	position: fixed;
	inset: 0;
}

/* Titre et balises meta */

.exercice-meta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 6px 52px 6px 10px;
	box-sizing: border-box;
	background: var(--ts-fond-fffdf7-a960);
	border-bottom: 1px solid var(--theme-ligne);
	box-shadow: 0 5px 18px rgba(34, 64, 25, 0.12);
}

.exercice-meta-ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.exercice-meta-retour {
	flex: none;
	color: var(--ts-texte-568e2d);
	text-decoration: none;
	padding: 2px 4px;
}

.page-exercice h1.exercice-titre {
	margin: 0;
	font-size: 1.2rem;
	color: var(--theme-texte);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bandeau colore du cours (couleur fixe par cours, cours.couleur ; couleur
   du texte choisie selon la luminance par exercise-player.js). */
.exercice-cours {
	flex: none;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: #4b5a50;
	color: #fff;
}

.exercice-badge i {
	color: var(--ex-orange);
	font-size: 1.35em;
	opacity: 1;
}

.exercice-icone-sans-chrono {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	color: var(--ex-orange);
	line-height: 1;
}

.exercice-icone-sans-chrono i {
	font-size: 1.2em;
}

.exercice-icone-sans-chrono::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.35em;
	height: 0.16em;
	border-radius: 999px;
	background: #b4423b;
	box-shadow: 0 0 0 1px var(--ts-ligne-fffdf7-a720);
	content: "";
	transform: translate(-50%, -50%) rotate(-42deg);
}

.exercice-badge-recompense {
	color: var(--ts-texte-a25700);
	padding: 8px 12px;
	border: 1px solid #e5a146;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--ts-fond-fff8ec), var(--ts-fond-fff2dd));
	box-shadow: 0 3px 10px rgba(186, 103, 15, 0.12);
}

.exercice-badge-statut {
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 0.72rem;
	background: var(--ts-fond-eef7ed);
	color: var(--ts-texte-257130);
}

.exercice-badge-statut.fait {
	background: var(--ts-fond-fff4df);
	color: var(--ts-texte-8b520d);
}

.exercice-badge-cours,
.exercice-badge-taux,
.exercice-badge-variante {
	color: var(--theme-texte-doux);
	font-weight: 700;
}

.exercice-badge-difficulte,
.exercice-badges .exercice-badge:first-child:not(.exercice-badge-difficulte) {
	font-size: 0;
	gap: 5px;
}

.exercice-badge-difficulte .exercice-difficulte-label,
.exercice-badges .exercice-badge:first-child:not(.exercice-badge-difficulte)::before {
	color: var(--ts-texte-568e2d);
	font: 800 0.78rem "Comfortaa", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	content: "Difficult\00e9 :";
}

.exercice-badge-difficulte {
	--ex-difficulty-star: url("/images/etoile_serie_argent.png");
}

.exercice-badge-difficulte.difficulte-or {
	--ex-difficulty-star: url("/images/etoile_serie_or.png");
}

.exercice-badge-difficulte.difficulte-heroique {
	--ex-difficulty-star: url("/images/etoile_serie_rouge.png");
}

.exercice-badge-difficulte .exercice-difficulte-etoiles {
	display: inline-flex;
	gap: 0;
	align-items: center;
}

.exercice-badge-difficulte .exercice-difficulte-etoiles i,
.exercice-badges .exercice-badge:first-child:not(.exercice-badge-difficulte)::after {
	display: inline-flex;
	width: 18px;
	height: 18px;
	background: center / contain no-repeat var(--ex-difficulty-star, url("/images/etoile_serie_argent.png"));
	content: "";
	filter: drop-shadow(0 1px 1px rgba(41, 55, 38, 0.22));
}

.exercice-badge-difficulte + .exercice-badge:not(.exercice-badge-cours):not(.exercice-badge-taux):not(.exercice-badge-variante):not(.exercice-badge-chrono):not(.exercice-badge-recompense) {
	display: none;
}

/* Presentation (enonce) : etoiles plus grandes et resserrees, chacune
   recouvrant 30 % de la precedente. */
.exercice-enonce .exercice-badge-difficulte .exercice-difficulte-etoiles {
	--taille-etoile: 28px;
}

.exercice-enonce .exercice-badge-difficulte .exercice-difficulte-etoiles i {
	width: var(--taille-etoile);
	height: var(--taille-etoile);
}

.exercice-enonce .exercice-badge-difficulte .exercice-difficulte-etoiles i + i {
	margin-left: calc(var(--taille-etoile) * -0.3);
}

/* Compte des cartes (contexte.comptesCartes) : "A 0/4"... */
.exercice-comptes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 0.8rem;
}

.exercice-compte {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--ts-fond-fbfaf5);
	color: var(--ts-texte-1d1d1d);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.exercice-compte b {
	margin-right: 2px;
}

.exercice-compte img {
	width: 20px;
	height: 28px;
	object-fit: contain;
	filter: drop-shadow(0 1px 2px rgba(34, 64, 25, 0.18));
}

.exercice-compte.epuise {
	background: var(--ts-fond-f3d2cc);
	color: var(--ts-texte-7a1e12);
}

/* Paysage large : le titre et les balises vivent en haut de la colonne de
   droite, au-dessus de la main - le plateau garde toute la hauteur. */
.paysage-large .exercice-meta {
	left: calc(var(--bord-droit-plateau, 50vw) + 16px);
	right: 52px;
	top: 8px;
	padding: 8px 10px;
	border: 1px solid var(--theme-ligne);
	border-radius: 4px;
}

/* Paysage large peu haut (telephone a l'horizontale) : la colonne de droite
   est etroite, le bandeau y passait sur 4 lignes et laissait trop peu de
   hauteur a la main en dessous (exercise-player.js#miseEnPage reduit alors
   les cartes) - bandeau compacte. */
@media (max-height: 480px) {
	.paysage-large .exercice-meta {
		top: 6px;
		gap: 2px 8px;
		padding: 4px 8px;
	}

	.paysage-large h1.exercice-titre {
		font-size: 1rem;
	}

	.paysage-large .exercice-meta .exercice-badges {
		gap: 2px 10px;
		font-size: 0.72rem;
	}

	.paysage-large .exercice-meta .exercice-badge-recompense {
		padding: 2px 8px;
		box-shadow: none;
	}
}

/* Portrait (non large) : la place manque vraiment - bandeau meta reduit a
   une ligne de titre et une ligne de balises plus petites. */
.portrait .exercice-meta,
.portrait-large .exercice-meta {
	gap: 3px 8px;
	padding: 4px 48px 4px 6px;
}

.portrait .exercice-badges,
.portrait .exercice-comptes {
	font-size: 0.72rem;
}

/* Scene : plateau + main */

.exercice-scene {
	position: absolute;
	top: var(--haut-meta, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

/* Plateau reel (jeu.css + Emplacement.js/Pion.js), taille et position de
   toc.js#resize dans tous les modes (exercise-player.js#miseEnPage).
   transform : meme containing block que dans le jeu reel (jeu.css suppose un
   #div_jeu transforme) - ici en identite pure. */
.exercice-scene #div_jeu {
	position: absolute;
	width: var(--taille-plateau, 80vmin);
	height: var(--taille-plateau, 80vmin);
	left: var(--plateau-gauche, 0px);
	top: var(--plateau-haut, 0px);
	transform: translateZ(0);
}

/* toc.js#resize force aussi .plateau (dont l'ombre) au carre en px. */
.exercice-scene #div_jeu .ombre_bois {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* jeu.css masque #emplacements jusqu'a toc.js#creerEmplacementsEtPions. */
.exercice-scene #emplacements {
	display: block;
}

/* Main : meme ancre que #div_main du jeu (axe central de l'eventail, les
   cartes Deck() sont translatees depuis ce point), calee comme toc.js#resize
   sous la derniere case du plateau (colonne de droite en paysage large). */
.exercice-scene #div_main {
	position: absolute;
	width: 0;
	height: var(--hauteur-carte, 100px);
	left: var(--main-gauche, 50%);
	top: var(--main-haut, 80%);
	z-index: 20;
}

.exercice-scene #div_main .card {
	cursor: pointer;
}

/* Carte selectionnee et pions jouables : aucun style propre ici - la carte
   est levee (rangeMain, comme toc.js) et les pions portent la classe du jeu,
   .pion_jouable (halo blanc de jeu.css), pour que le tutoriel montre
   exactement les reperes d'une vraie partie (retour de Corentin, 2026-10-13). */

/* Zone ANNONCE (jeu.css), reduite (2026-10-03) : boite ajustee a son contenu
   plutot que le grand cadre fixe du jeu, texte plus petit, pas de titre par
   defaut ; masquee une fois la carte jouee, pour laisser voir le tas central
   (exercise-player.js#annonceParDefaut/finTour). */
.exercice-scene #container_annonce {
	justify-items: center;
}

.exercice-scene #container_annonce.exercice-annonce-masquee {
	visibility: hidden;
}

.exercice-scene #annonce {
	width: fit-content;
	max-width: 100%;
	font-size: max(12px, calc(var(--taille-plateau, 600px) * 0.022));
	color: var(--ts-texte-2b2b2b);
}

.exercice-scene #annonce.sans-titre #annonce_title_text {
	display: none;
}

.exercice-scene #annonce_desc {
	justify-self: stretch;
	font-size: calc(var(--taille-plateau, 600px) * 0.024);
	pointer-events: all;
}

/* Masque (sans l'arreter) le chrono pendant la description d'une variante. */
#annonce_chrono.masque-variante {
	visibility: hidden;
}

.exercice-fermer-desc {
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	border: none;
	background: transparent;
	color: var(--ts-texte-a35a00);
	cursor: pointer;
	padding: 0.1em 0.3em;
	font-size: 1.1em;
}

.exercice-annonce-carte {
	text-align: left;
	font-size: 0.72em;
	line-height: 1.25;
	padding: 0.2em 0.3em;
}

.exercice-annonce-carte-titre {
	font-weight: 700;
	color: var(--ts-texte-d87500);
}

/* Options de la carte selectionnee (Valet, As 1/11, 7) : memes elements et
   styles que le jeu (views/fragments/jeu.html, jeu.css), places en px par
   exercise-player.js#afficheOptions au-dessus de la carte levee - leur
   affichage passe par l'attribut hidden des conteneurs. */
.exercice-scene .icone_choix,
.exercice-scene .as_choix,
.exercice-scene .sept {
	display: block;
	z-index: 30;
}

.exercice-scene .icone_choix,
.exercice-scene #sept_plus,
.exercice-scene #sept_moins {
	cursor: pointer;
}

/* Option du Valet retenue : halo blanc, l'autre en ombre noire
   (toc.js#affichageIconeValet). */
.exercice-scene .icone_choix[aria-pressed="true"] {
	box-shadow: 0 1px 0.5rem rgb(255, 255, 255);
}

.exercice-scene .icone_choix:focus-visible,
.exercice-scene .sept:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Cartes de variantes (images de l'ecran de preparation,
   /images/variantes/) : memes teintes que preparation.css (non chargee ici). */
.prep-variante-standard { --prep-tone: #8a8a8a; --prep-tone-rgb: 138, 138, 138; }
.prep-variante-orange { --prep-tone: #df731d; --prep-tone-rgb: 223, 115, 29; }
.prep-variante-jaune { --prep-tone: #c99b16; --prep-tone-rgb: 201, 155, 22; }
.prep-variante-violet { --prep-tone: #7447b8; --prep-tone-rgb: 116, 71, 184; }
.prep-variante-cyan { --prep-tone: #009da5; --prep-tone-rgb: 0, 157, 165; }

.exercice-variantes-tuiles {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px 0;
	padding-left: 6px;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: thin;
	scrollbar-color: rgba(104, 114, 105, 0.35) transparent;
}

/* Eventail de l'annonce : taille et recouvrement (0 a 30 %) calcules par
   exercise-player.js#ajusteVariantesAnnonce pour occuper tout le cadre
   d'annonce sans en deborder (--variante-largeur/-hauteur/-decalage). */
.exercice-variantes-tuiles.compactes {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0;
	padding: 0.2em 0;
	overflow: visible;
}

.exercice-variante {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	padding: 6px;
	border: 2px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--theme-texte);
	cursor: pointer;
	text-align: left;
	font-size: 0;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.exercice-variante + .exercice-variante {
	margin-left: -29px;
}

.exercice-variante:hover {
	transform: translateY(-2px);
	background: var(--ts-fond-ffffff-a620);
	box-shadow: 0 8px 18px rgba(34, 64, 25, 0.12);
}

.exercice-variante img {
	display: block;
	width: 96px;
	height: 132px;
	border-radius: 7px;
	object-fit: fill;
	filter: drop-shadow(0 4px 5px rgba(34, 64, 25, 0.25));
}

.exercice-variante.differente {
	border-color: #d84532;
	background: linear-gradient(180deg, var(--ts-fond-fff9f4), var(--ts-fond-fff0e8));
	box-shadow: 0 0 0 1px rgba(216, 69, 50, 0.18);
}

.exercice-variante-legende {
	display: none;
}

.exercice-variante-attention {
	display: none;
}

.exercice-variante-regle {
	display: none;
}

.exercice-variante.compacte {
	display: block;
	padding: 3px;
	border: 1px solid transparent;
	background: transparent;
	flex: 0 0 auto;
}

.exercice-variante.compacte + .exercice-variante.compacte {
	margin-left: calc(-1 * var(--variante-decalage, 1.2em));
}

/* Carte survolee ou au focus : passe devant ses voisines recouvrantes. */
.exercice-variante.compacte:hover,
.exercice-variante.compacte:focus-visible {
	z-index: 1;
}

.exercice-variante.compacte img {
	width: var(--variante-largeur, 2.7em);
	height: var(--variante-hauteur, 3.75em);
	border-radius: 0.22em;
	box-shadow: 0 1px 3px rgba(34, 64, 25, 0.24);
}

.exercice-variante.compacte.differente {
	border-color: #d84532;
	border-radius: 0.32em;
	background: var(--ts-fond-fff7f3);
}

.exercice-variante.compacte.differente img {
	box-shadow: 0 1px 3px rgba(34, 64, 25, 0.24);
}

/* Bouton flottant : rouvre l'enonce sans mettre le chrono en pause. */
.exercice-bouton-enonce {
	position: fixed;
	box-sizing: border-box;
	right: calc(env(safe-area-inset-right) + 12px);
	bottom: calc(env(safe-area-inset-bottom) + 76px);
	z-index: 1004;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	padding: 0;
	border: 2px solid #24521d;
	border-radius: 50%;
	background:
		linear-gradient(180deg, var(--ts-fond-ffffff-a940), var(--ts-fond-f8f0de-a960)),
		url("/images/wood.jpg");
	color: var(--ts-texte-568e2d);
	cursor: pointer;
	box-shadow:
		0 4px 0 rgba(32, 73, 25, 0.92),
		0 9px 18px rgba(6, 28, 7, 0.34);
	transition: transform .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease;
}

.page-exercice .exercice-bouton-enonce {
	font-size: 1.45rem; /* .page-exercice button (font: inherit) l'emporterait sinon */
}

.exercice-bouton-enonce span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.exercice-bouton-enonce i {
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}

.exercice-bouton-enonce:hover {
	border-color: var(--ex-orange);
	color: var(--ts-texte-a25700);
	transform: translateY(-2px);
	box-shadow:
		0 6px 0 rgba(132, 66, 5, 0.92),
		0 13px 22px rgba(6, 28, 7, 0.36);
}

.exercice-bouton-enonce:active {
	transform: translateY(2px);
	box-shadow:
		0 2px 0 rgba(132, 66, 5, 0.92),
		0 7px 14px rgba(6, 28, 7, 0.3);
}

/* Phase d'enonce : surcouche compacte, plateau et main voiles derriere. */
.exercice-enonce {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 28px);
	box-sizing: border-box;
	background:
		radial-gradient(circle at 50% 35%, rgba(255, 244, 211, 0.28), transparent 22rem),
		rgba(18, 45, 12, 0.58);
	-webkit-backdrop-filter: blur(5px) saturate(1.08);
	backdrop-filter: blur(5px) saturate(1.08);
}

.exercice-enonce-carte {
	width: 100%;
	max-width: 720px;
	max-height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
	padding: clamp(18px, 3.4vw, 30px);
	border: 8px solid transparent;
	border-radius: 10px;
	background:
		linear-gradient(145deg, var(--ts-fond-fffdf7-a980), var(--ts-fond-faf6eb-a980)) padding-box,
		url("/images/wood.jpg") border-box;
	background-size: auto, 14rem;
	box-shadow:
		0 18px 45px rgba(9, 29, 8, 0.38),
		inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.exercice-enonce-entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(110, 169, 55, 0.22);
	text-align: center;
}

.page-exercice .exercice-enonce-entete h2 {
	margin: 0;
	font-size: clamp(1.45rem, 4.5vw, 2rem);
	line-height: 1.05;
	color: var(--theme-texte);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.page-exercice .exercice-enonce-variantes h3,
.page-exercice .exercice-enonce-section-titre {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 8px;
	color: var(--theme-texte-doux);
	font-family: "Comfortaa", sans-serif;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.page-exercice .exercice-enonce-variantes h3 i,
.page-exercice .exercice-enonce-section-titre i {
	color: var(--ex-orange);
	font-size: 1.05em;
}

/* Les variantes suivent l'enonce (texte, contexte, compte des cartes). */
.page-exercice .exercice-enonce-variantes {
	margin-top: 16px;
}

.exercice-enonce-texte {
	margin: 0 0 8px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(0.98rem, 2vw, 1.08rem);
	line-height: 1.32;
	letter-spacing: 0;
	color: var(--theme-texte);
}

.exercice-enonce-contexte {
	margin: 0 0 8px;
	color: var(--theme-texte-doux);
}

/* Badges joueurs autour du plateau (exercise-player.js#poseBadgesJoueurs) :
   classes de commun.css, non charge sur cette page - memes valeurs, memes
   selecteurs simples pour que .image_profil_joueur.tour_en_cours (jeu.css,
   halo blanc du tour) garde la priorite. */
.image_profil_joueur {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--theme-surface-elevee);
	background-size: 100% 100%;
	border: 0.15em solid var(--ts-ligne-252525);
	width: 3.7em;
	height: 3.7em;
}

.image_profil_joueur_0 { background-color: #e00605; }
.image_profil_joueur_1 { background-color: #0f69aa; }
.image_profil_joueur_2 { background-color: #226c1a; }
.image_profil_joueur_3 { background-color: #ec9013; }

.pseudo_joueur_0 { background-color: #e00605; border: 0.1em solid #e00605; }
.pseudo_joueur_0.tour_en_cours { background-color: white; color: #e00605; }
.pseudo_joueur_1 { background-color: #0f69aa; border: 0.1em solid #0f69aa; }
.pseudo_joueur_1.tour_en_cours { background-color: white; color: #0f69aa; }
.pseudo_joueur_2 { background-color: #226c1a; border: 0.1em solid #226c1a; }
.pseudo_joueur_2.tour_en_cours { background-color: white; color: #226c1a; }
.pseudo_joueur_3 { background-color: #ec9013; border: 0.1em solid #ec9013; }
.pseudo_joueur_3.tour_en_cours { background-color: white; color: #ec9013; }

/* Integree au salon (iframe de #page_exercice_spa, views/index.html) : le
   retour au menu est le bouton de l'en-tete du jeu. */
.exercice-integre #exercice-lien-jeu {
	display: none;
}

.exercice-commencer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 18px;
	padding: 14px 18px;
	font-size: clamp(1.1rem, 3.2vw, 1.35rem);
	font-weight: 700;
	border-radius: 8px;
	background: linear-gradient(180deg, #f19a2a, #d97816);
	border: 2px solid #b95e0b;
	color: #fff;
	box-shadow:
		0 4px 0 #9f4d05,
		0 10px 22px rgba(91, 48, 9, 0.24);
	text-shadow: 0 1px 1px rgba(88, 41, 0, 0.42);
	transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.exercice-commencer:hover {
	background: linear-gradient(180deg, #ffab39, #df8219);
	filter: saturate(1.04);
	transform: translateY(-1px);
	box-shadow:
		0 5px 0 #9f4d05,
		0 14px 26px rgba(91, 48, 9, 0.28);
}

.exercice-commencer:active {
	transform: translateY(2px);
	box-shadow:
		0 2px 0 #9f4d05,
		0 8px 18px rgba(91, 48, 9, 0.22);
}

.exercice-commencer:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Resultat provisoire (en attendant l'ecran de correction). */
.exercice-jeu .exercice-resultat {
	position: fixed;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 150;
	width: min(520px, calc(100% - 24px));
	box-sizing: border-box;
	padding: 14px;
	border-radius: 8px;
	background: var(--theme-surface-page);
	border: 1px solid var(--theme-ligne);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

.exercice-actif .exercice-note,
.exercice-actif .exercice-erreur {
	position: fixed;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 250;
	margin: 0;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--theme-surface-page);
}

/* Petits ecrans : enonce compact, lisible sans defiler - la regle detaillee
   de chaque variante reste accessible en touchant sa carte sur le plateau. */
@media (max-width: 980px) {
	.exercice-filtres-avances-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.exercice-filtres-essentiels { grid-template-columns: minmax(0, 1fr) auto; }
	.exercice-filtre.recherche { grid-column: 1 / -1; }
	.exercice-filtres-avances-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.exercice-filtres-essentiels { grid-template-columns: 1fr; padding: 10px; }
	.exercice-filtre.recherche { grid-column: auto; }
	.exercice-filtres-avances-bouton { width: 100%; }
	.exercice-filtres-avances { padding: 10px; }
	.exercice-filtres-avances-grille { grid-template-columns: 1fr; gap: 7px; }
}

@media (max-width: 520px), (max-height: 520px) {
	.exercice-enonce { padding: 8px; }
	.exercice-enonce-carte { padding: 14px; border-width: 5px; }
	.exercice-enonce-entete { gap: 6px; margin-bottom: 10px; padding-bottom: 8px; }
	.page-exercice .exercice-enonce-entete h2 { font-size: 1.22rem; }
	.exercice-enonce .exercice-badges { gap: 6px 10px; font-size: 0.9rem; }
	.exercice-badge-recompense { padding: 6px 9px; }
	.exercice-variantes-tuiles { gap: 6px 0; padding-left: 4px; }
	.exercice-variante { padding: 4px; border-radius: 7px; }
	.exercice-variante + .exercice-variante { margin-left: -22px; }
	.exercice-variante img { width: 72px; height: 99px; border-radius: 5px; }
	.exercice-variante-regle { display: none; }
	.exercice-enonce-texte { font-size: 0.96rem; margin-top: 10px; }
	.exercice-commencer { margin-top: 12px; padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.exercice-catalogue-liste a,
	.exercice-filtres-chevron { transition: none; }
}

/* Resultat */

.exercice-resultat-titre {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1.1rem;
}

.exercice-resultat.reussi .exercice-resultat-titre { color: var(--theme-accent-texte); }
.exercice-resultat.echec .exercice-resultat-titre { color: var(--ts-texte-b4423b); }

.exercice-resultat p {
	margin: 0 0 8px;
}

.exercice-resultat-recompense {
	font-weight: 600;
}

.exercice-resultat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.exercice-bouton-principal,
.exercice-bouton-secondaire {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.exercice-bouton-principal {
	background: var(--ex-accent);
	color: #fff;
}

.exercice-bouton-principal:hover {
	background: var(--ex-accent-survol);
}

.exercice-enonce .exercice-commencer {
	background: linear-gradient(180deg, #f19a2a, #d97816);
	border-color: #b95e0b;
	color: #fff;
}

.exercice-enonce .exercice-commencer:hover {
	background: linear-gradient(180deg, #ffab39, #df8219);
}

.exercice-bouton-secondaire {
	background: transparent;
	color: var(--theme-texte);
	border-color: var(--theme-ligne);
}

.exercice-bouton-secondaire:hover {
	background: var(--theme-surface-2);
}

.exercice-note {
	margin: 12px 0 0;
	color: var(--theme-texte-doux);
}

.exercice-erreur {
	margin: 12px 0 0;
	color: var(--ts-texte-b4423b);
	font-weight: bold;
}