/* BoM-donnes — feuille de style.
 *
 * Deux principes, et ils expliquent presque tout ce qui suit :
 *
 *   1. le ROUGE porte une information (♥ et ♦), il n'est jamais décoratif ;
 *   2. une main se lit en colonnes alignées — c'est une police à chasse fixe, et
 *      pas un choix esthétique : sans elle, un « 10 » et un « 1 » se confondent.
 */

:root {
	--rouge: #c0392b;
	--trait: #d6d3d1;
	--fond-carte: #fafaf9;
	--fond-doux: #f5f5f4;
	--texte: #1c1917;
	--discret: #78716c;
	--accent: #1d4ed8;

	/* LES DEUX ÉCHELLES DU PROJET
	 *
	 * `--taille-donne` : ce qui se PROJETTE. La donne et la séquence d'enchères se lisent
	 * à distance, dans une salle, par des gens qui ne sont pas devant l'écran. Elles
	 * prennent donc la MÊME taille, et cette variable est ce qui dit « les mêmes règles » —
	 * une seule définition, un seul endroit où les changer, aucune chance qu'elles
	 * divergent.
	 *
	 * `--taille-lecture` : ce qui se LIT. La question, la réponse, les indices, les
	 * explications des enchères. La proportionnalité n'est pas adaptée ici : un texte qui
	 * suit la largeur de l'écran devient illisible sur un téléphone et démesuré sur une
	 * projection. 16 px à l'écran, 12 px sur le papier (voir `@media print`).
	 */
	--taille-donne: clamp(14px, 5vw, 38px);
	/*
	 * `--taille-encheres` : la séquence d'enchères se projette AUSSI, mais moins fort. Ses
	 * cases ne portent qu'un mot (« Passe ») : à la taille de la donne, elles devenaient
	 * d'énormes pavés larges comme la page, constatés à l'écran et non dans un test. Même
	 * pente, autre magnitude.
	 */
	--taille-encheres: clamp(13px, 2.4vw, 24px);
	--taille-lecture: 16px;
}

* { box-sizing: border-box; }

/* LA PROPORTIONNALITÉ VIT SUR LA TABLE, PAS SUR LE DOCUMENT.
 *
 * Tout était en `rem`, donc tout suivait la largeur de l'écran : les mains (voulu), mais
 * aussi la description, les questions, les réponses et les boutons (pas voulu). Sur un
 * écran de 1 920, la prose se retrouvait à 34 px — un texte à projeter, pas à lire.
 *
 * Désormais la racine garde la taille de son navigateur (~16 px), la page se met à
 * 14 px, et c'est la TABLE qui porte l'échelle : ce qui est dedans est en `em`, donc suit
 * la table ; ce qui est dehors est en `em` d'une taille fixe, donc ne bouge plus.
 * Calibrage dans `.table`, et `@media print` en fin de feuille pour le papier.
 */

body {
	margin: 0;
	/* La page se LIT : 14 px, une taille de texte et non une taille d'écran. Ce qui doit
	 * grandir pour être projeté vit dans la table, et c'est la table qui s'en charge. */
	font-size: 14px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--texte);
	line-height: 1.5;
}

/* La barre du haut : trois cases, et rien d'autre — la marque à gauche, ce que la page met
   au centre, ce qu'elle met à droite. Une GRILLE et non un flex : c'est ce qui centre
   vraiment le nom de la donne, quelle que soit la longueur de la marque ou du sélecteur de
   langue. En flex, le nom se décalerait avec eux. */
header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: .75em;
	padding: .75em 1em;
	border-bottom: 1px solid var(--trait);
}

header a { font-weight: 600; text-decoration: none; color: inherit; }
header .marque { font-weight: 700; }

/* Le nom de la donne : un titre, mais un titre de BARRE. C'est l'exercice qui occupe
   l'écran, pas son nom. */
.titre-donne { font-size: 1.15em; font-weight: 700; margin: 0; text-align: center; }

/* La bascule de langue ferme la barre, à droite. */
header > .langues { justify-self: end; }

main {
	/* LA LARGEUR DU DOCUMENT EST CELLE D'UNE PAGE A4 : 21 cm, et non un nombre de
	 * pixels. C'est la seule mesure qui vaut dans les deux mondes à la fois —
	 * l'écran et le papier — parce que le CSS définit le centimètre physiquement
	 * (1 cm = 96/2,54 px = 37,8 px). 21 cm valent donc 794 px, et non 960 : les
	 * 960 px sont une largeur de grille web classique, pas la largeur d'une A4.
	 *
	 * Conséquence utile, et c'est ce que la mesure demandait : la table se cale à
	 * ~775 × 726 px, donc elle tient verticalement sur un 1920 × 1080 — c'est elle qui
	 * devait y tenir, et elle y tient. Le préambule de la page, lui, demande un
	 * défilement ; c'est admis. Et le jour où l'on imprime, la page a déjà la largeur du
	 * papier : rien à rattraper.
	 */
	max-width: 21cm;
	margin: 0 auto;
	padding: 1.5em 1em 4em;
}

/* Le rouge d'une couleur rouge : jamais décoratif, il porte l'information. */
.rouge { color: var(--rouge); }

.encart {
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-radius: .5em;
	padding: 1em 1.25em;
}

.encart h1 { margin-top: 0; font-size: 1.125em; }

/* Alpine : sans ceci, tout ce qui est masqué au départ clignote à l'écran. */
[x-cloak] { display: none !important; }

/* ---------- La table ---------- */

.plateau { margin: 1em 0 1.5em; }

/* ---------- La table : trois lignes, trois colonnes ----------
 *
 *	.   Nord   .
 *	Ouest  centre  Est
 *	.   Sud    .
 *
 * Les lignes 1 et 3 n'ont que leur colonne du milieu remplie : c'est ce qui donne
 * au tableau sa forme en croix. Les zones portent leurs noms (`n`, `w`, `e`, `s`,
 * `c`) pour qu'un changement de disposition se lise ici et nulle part ailleurs.
 *
 * LES TROIS COLONNES SONT À LA LARGEUR DE LEUR CONTENU — pour une main, c'est la
 * largeur de la COULEUR LA PLUS LONGUE : une main est un texte insécable, donc son
 * contenu ne se coupe pas, et « la largeur du contenu » se lit directement sur la
 * main la plus large.
 *
 * Aucune colonne ne s'étire pour remplir : la table se resserre sur la donne au lieu
 * d'étaler ses mains vers les bords.
 *
 * La colonne du milieu est à la largeur de son contenu, elle aussi, c'est-à-dire du
 * plus large de la boussole, de Nord et de Sud. C'est ce qui donne à Nord et à Sud
 * exactement la largeur de la plus longue de leurs deux mains — et la réponse à
 * « est-ce que ça marche aussi pour N et S ? » est oui, sans une ligne de plus : ils
 * sont dans cette colonne, donc dimensionnés avec elle.
 */
/* Le défilement horizontal de la table.
 *
 * Les trois colonnes ne passent JAMAIS en une seule : c'est la table qui défile,
 * et c'est la police proportionnelle (voir `html`) qui fait qu'elle tient
 * normalement. Un téléphone étroit fait défiler plutôt que d'empiler quatre mains
 * les unes sur les autres — une donne empilée ne se lit plus comme une donne.
 */
/* La table prend TOUTE la largeur de la page : elle sort du rembourrage de `main`
 * (-1em de chaque côté, exactement ce que `main` pose), sinon elle perd 9 % de la
 * largeur du papier pour rien. Sur un écran large ce rembourrage est invisible ; sur
 * une feuille imprimée, c'est 1,7 cm de la largeur d'une A4. */
.table-defilement { overflow-x: auto; margin-inline: -1em; }

.table {
	/* L'ÉCHELLE DE LA PROJECTION : la table porte SA taille, et tout ce qu'elle contient
	 * est en `em`, donc suit. La variable est partagée avec les enchères — mêmes règles,
	 * même valeur, un seul endroit à changer (voir `:root`).
	 *
	 * Son plafond est posé un peu bas exprès : à un cran au-dessus, la table dépassait la
	 * largeur du document de quelques pixels — et ce cheveu suffisait à faire apparaître
	 * un petit ascenseur horizontal. */
	font-size: var(--taille-donne);
	display: grid;
	grid-template-columns: max-content auto max-content;
	grid-template-areas:
		". n ."
		"w c e"
		". s .";
	/* La table se resserre sur son contenu et se centre tant qu'elle tient. Quand
	 * elle ne tient pas, le débordement va à DROITE : la première colonne reste
	 * atteignable et le défilement horizontal a un point de départ. (Des marges
	 * automatiques sur un bloc plus large que son conteneur valent zéro à gauche —
	 * c'est ce qui évite le piège classique du débordement centré, dont la partie
	 * gauche devient inatteignable.) */
	width: max-content;
	margin: 0 auto;
	gap: .5em .75em;
	align-items: center;
	background: var(--fond-doux);
	border: 1px solid var(--trait);
	border-radius: .5em;
	padding: .75em;
}

.siege-n { grid-area: n; }
.siege-w { grid-area: w; }
.siege-e { grid-area: e; }
.siege-s { grid-area: s; }
.centre  { grid-area: c; text-align: center; padding: 0 1em; }

/* Toutes les mains sont alignées à GAUCHE de leur case, sans exception.
 *
 * Les centrer était joli et faux : Nord et Sud occupent la MÊME colonne, et les
 * centrer chacun pour soi les décalait l'un par rapport à l'autre — le ♠ de Nord et
 * celui de Sud ne tombaient plus sur la même verticale, et la donnée ne se lisait
 * plus en colonnes. Alignées à gauche, les quatre mains s'alignent sur la même
 * règle de leur case, et les ♠♥♦♣ de deux mains d'une même colonne coïncident.
 */
.siege { justify-self: start; }

/* Plus de jeton « Ouest / Nord / Est / Sud » au-dessus des mains : la boussole du
   centre dit déjà l'orientation, et quatre noms autour d'une croix qu'ils décrivent
   sont du bruit. La règle `.jeton` a été retirée avec le gabarit qui l'employait. */

/* Une main : quatre lignes, chasse fixe — les colonnes restent alignées. */
.main {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .95em;
	line-height: 1.35;
}

.couleur { display: flex; gap: .4em; white-space: nowrap; }
.couleur .symbole { width: 1.1em; text-align: center; }
.couleur .cartes { letter-spacing: .04em; }

/* Les trois autres états d'une main ne ressemblent NI à une main, ni entre eux. */
.inconnue {
	font-family: ui-monospace, monospace;
	font-size: 1.25em;
	color: var(--discret);
	text-align: center;
	padding: .5em 1em;
	border: 1px dashed var(--trait);
	border-radius: .35em;
}

.sans-main {
	font-family: ui-monospace, monospace;
	color: var(--discret);
	text-align: center;
	padding: .5em 1em;
}

.absente { min-width: 1px; min-height: 1px; }

/* Le contrat est SOUS la grille, et non dedans : rien d'autre que les mains ne vit dans la
   table. Il est centré parce qu'il appartient à la table qu'il décrit.
 *
 * Il se PROJETTE aussi : c'est une des choses qu'on vient lire à distance, et à la taille
 * du texte courant personne ne le voyait. Il prend donc la taille de la donne, à 80 % —
 * assez pour être lu du fond de la salle, assez peu pour ne pas peser autant que les mains. */
.contrat {
	font-weight: 700;
	font-size: calc(var(--taille-donne) * .8);
	text-align: center;
	margin: .5em 0 0;
}

/* ---------- La boussole : l'orientation de la table ----------
 *
 * Un CERCLE, pas un carré : c'est une rose des vents, et c'est ce que dessine un
 * diagramme de bridge au centre de ses quatre mains. Les lettres sont celles de
 * la langue (O à l'ouest en français, W en anglais).
 */
.boussole {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	place-items: center;
	width: 4.5em;
	height: 4.5em;
	margin: .35em auto;
	border: 1px solid var(--trait);
	border-radius: 50%;
	color: var(--discret);
	font-size: .75em;
	letter-spacing: .04em;
	user-select: none;
}

.b-n { grid-area: 1 / 2; }
.b-o { grid-area: 2 / 1; }
.b-e { grid-area: 2 / 3; }
.b-s { grid-area: 3 / 2; }

/* LE SIÈGE AU TRAIT : celui qui doit jouer la carte suivante. Sa lettre est PLEINE — le même
   signe que la langue courante dans la bascule, et la même idée : ce qui est plein est ce qui
   est en jeu maintenant.
 *
 * La pastille se pose SUR la lettre : la boussole ne bouge pas, et les quatre places restent
 * celles d'un diagramme de bridge. */
.boussole .au-trait {
	color: #fff;
	background: var(--texte);
	border-radius: 50%;
	padding: 0 .22em;
}

/* Le point du centre : sans lui, quatre lettres dans un cercle se lisent comme une
   grille ; avec lui, comme une boussole. */
.boussole::after {
	content: "";
	grid-area: 2 / 2;
	width: .3em;
	height: .3em;
	border-radius: 50%;
	background: var(--trait);
}

/* LA LIGNE « DONNE PARTIELLE » N'A PLUS DE RÈGLE : `.resume` a quitté la page le 2026-10-11 (voir
 * « Les avertissements ont quitté la page », en bas de cette feuille). */

/* ---------- Les enchères ----------
 *
 * La séquence se lit À DISTANCE, comme la donne : c'est la même salle qui la regarde. Elle
 * suit donc la MÊME PENTE — une taille qui suit la largeur — mais d'une magnitude moindre :
 * ses cases ne portent qu'un mot, et à la taille de la donne elles devenaient des pavés
 * larges comme la page.
 *
 * Elle est CENTRÉE : sous une donne centrée, une séquence collée à gauche se lit comme une
 * légende, au lieu de se lire comme la suite de la donne.
 *
 * Les explications, elles, ne se projettent pas : elles se lisent.
 */
.encheres { font-size: var(--taille-encheres); text-align: center; margin-top: .75em; }

/* Les cases se réduisent à ce qu'elles CONTIENNENT, et la grille entière avec elles : la
   colonne la plus large est celle de son mot le plus long, « Passe ». `max-content` plutôt
   qu'une largeur devinée — c'est le contenu qui décide, et une enchère plus longue
   (« Contre », « XX ») élargit sa colonne sans rien casser ailleurs. */
.grille-encheres {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	width: max-content;
	gap: 1px;
	background: var(--trait);
	border: 1px solid var(--trait);
	border-radius: .35em;
	overflow: hidden;
	margin-inline: auto;
}

.entete, .appel {
	background: #fff;
	padding: .3em .4em;
	text-align: center;
	font-family: ui-monospace, monospace;
	/* TOUTES LES COLONNES DE LA MÊME LARGEUR, et c'est « Passe » qui la donne : c'est le mot
	 * le plus long du tableau des enchères. Des colonnes qui s'élargissaient au gré des
	 * appels donnaient des cases qui dansaient d'une ligne à l'autre — désagréable à l'œil,
	 * et gratuit puisqu'un seul mot décide.
	 *
	 * `ch` est la largeur d'un « 0 » dans une police à chasse fixe : 7 ch font « Passe » plus
	 * le rembourrage, et suivent la taille de la police. `nowrap` pour qu'un mot ne se coupe
	 * jamais en deux lignes plutôt que de déborder. */
	white-space: nowrap;
}

/* LA LARGEUR FIXE EST CELLE DES APPELS, PAS CELLE DE L'EN-TÊTE — et ce n'est pas un détail de
 * style : `ch` se mesure dans la police de l'ÉLÉMENT, et l'en-tête s'écrit à 0,7 em. Un
 * `width: 7ch` y valait donc les deux tiers de sa colonne (dont la largeur, elle, est donnée
 * par « Passe » à taille pleine) : la case se posait au DÉBUT de son aire, le fond de la grille
 * — la couleur des traits — apparaissait à sa droite, et le nom semblait aligné à gauche sur un
 * fond gris. Vu à l'écran sur la production, le 2026-10-11. Sans largeur, l'en-tête REMPLIT sa
 * colonne (le `stretch` par défaut d'une grille), son fond blanc couvre la case, et
 * `text-align: center` fait le reste. */
.appel { width: 7ch; }

.entete { font-size: .7em; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
.appel.vide { background: var(--fond-carte); }

.notes {
	margin: .6em 0 0;
	font-size: var(--taille-lecture);
	max-width: 40em;
	margin-inline: auto;
	text-align: left;
}
.notes dt { font-family: ui-monospace, monospace; font-weight: 600; float: left; margin-right: .5em; }
.notes dd { margin: 0 0 .25em; color: #44403c; }

/* ---------- Les cartes jouées, DANS le diagramme ----------
 *
 * Une carte déjà jouée se distingue dans la main, là où on la cherche : le fond la fait voir
 * de loin, l'italique la fait rester lisible de près. Elle RESTE dans la main — c'est sa
 * place, et c'est ce qu'on vient regarder.
 *
 * Le `box-shadow` élargit le fond de quelques dixièmes d'em SANS déplacer les caractères
 * suivants : un `padding` sur un élément en ligne décalerait la fin de la ligne, et une main
 * est un alignement de caractères. C'est la seule raison de cette astuce.
 *
 * `print-color-adjust` parce que les navigateurs n'impriment PAS les fonds par défaut : sans
 * lui, le marquage disparaîtrait de la feuille et il ne resterait que l'italique.
 */
/* Le DERNIER PLI joué se marque d'une autre couleur que les précédents : c'est celui qu'on vient
 * de lire, et le confondre avec les autres oblige à compter les plis pour savoir où l'on en est.
 * Deux classes sur la même carte — `jouee` dit qu'elle est tombée, `dernier` dit qu'elle est
 * tombée au dernier pli. Cette règle passe avant celle du jaune dans le fichier, et l'emporte par
 * sa spécificité ; aucun `!important` n'est nécessaire. */
.carte-main.jouee.dernier {
	background: #bbf7d0;
	box-shadow: 0 0 0 .1em #bbf7d0;
	print-color-adjust: exact;
}

.carte-main.jouee {
	font-style: italic;
	background: #fef3c7;
	box-shadow: 0 0 0 .1em #fef3c7;
	border-radius: .2em;
	print-color-adjust: exact;
}

/* Une couleur sans carte s'écrit d'un tiret, et il reste discret : c'est une absence, pas
   une information. */
.carte-main.vide { color: var(--discret); }

/* ---------- Masquer les cartes jouées, depuis la barre ----------
 *
 * Masquer ne veut pas dire « éteindre le marquage » : la carte QUITTE la main, comme au
 * bridge. La main se relit alors telle qu'elle était AVANT le coup, toutes ses cartes en
 * main — c'est l'autre façon de lire une donne, et la seule qui montre l'avant.
 *
 * Un siège qui ne montrait QUE ses cartes jouées retrouve sa marque (« ? », ou rien). Elle
 * est dans la page depuis le début, à côté des cartes, et c'est la feuille de style qui
 * choisit laquelle des deux se voit : aucun re-rendu, aucun état à rejouer côté serveur.
 *
 * LE TIRET D'UNE COULEUR VIDE part avec elles. Une chicane s'écrit d'un tiret quand la main
 * n'a rien dans une couleur ; en mode masqué, une couleur dont on n'a rien à montrer ne
 * s'écrit plus du tout — c'est le tiret qui s'efface, pas la ligne ni la couleur.
 */
.marque-cachee { display: none; }
.jeu-cache .carte-main.jouee { display: none; }
.jeu-cache .carte-main.vide { display: none; }
.jeu-cache .jeu-joue { display: none; }
.jeu-cache .marque-cachee { display: block; }

/* ---------- L'exercice ---------- */

/* Le titre d'un exercice vit dans la BARRE, au centre (voir `header`) : la page n'en porte
   plus. La description, le niveau et les étiquettes ne s'affichent plus ici — ils servent à
   CHOISIR un exercice depuis l'index, où ils restent. */

.meta { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin: .25em 0 1.25em; font-size: .8em; color: var(--discret); }
.meta .etiquette { background: var(--fond-doux); border: 1px solid var(--trait); border-radius: 1em; padding: .1em .6em; }

.barre-etapes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .5em 0;
	border-bottom: 1px solid var(--trait);
	margin-bottom: 1em;
}

.compteur { font-size: .875em; color: var(--discret); }

.bouton {
	font: inherit;
	font-size: .875em;
	padding: .35em .8em;
	border: 1px solid var(--trait);
	background: #fff;
	border-radius: .35em;
	cursor: pointer;
}

.bouton:hover:not(:disabled) { background: var(--fond-doux); }
.bouton:disabled { opacity: .45; cursor: default; }
.bouton.discret { font-size: .8em; color: var(--discret); }

/* Le titre d'étape a été RETIRÉ : la section ne sert que de séparateur à l'application,
   elle n'annonce rien au lecteur. Ce qui reste à l'écran, dans l'ordre : la barre de
   navigation, la donne, la séquence d'enchères et ses explications, puis la question —
   et la réponse, masquée derrière un bouton. Le numéro d'étape vit dans la barre. */

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* La question est la seule chose qu'on LIT dans une étape : elle prend la taille de
   lecture, pas celle de la projection. Sa taille ne suit ni l'écran ni la feuille — un
   texte qui rétrécit avec la fenêtre devient illisible sur un téléphone. */
.question {
	border-left: 3px solid var(--accent);
	padding: .25em 0 .25em .75em;
	margin: 1em 0;
	font-weight: 600;
	font-size: var(--taille-lecture);
}

.reponse { margin: 1em 0; font-size: var(--taille-lecture); }

.carte-reponse {
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-left: 3px solid #15803d;
	border-radius: 0 .35em .35em 0;
	padding: .6em .85em;
	margin-top: .5em;
}

.indice { margin: .75em 0; font-size: .9em; }
.indice > div { border-left: 3px solid #b45309; padding-left: .75em; margin-top: .35em; }

/* ---------- L'index ---------- */

.liste-exercices { list-style: none; padding: 0; display: grid; gap: .75em; }

.entree {
	display: block;
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-radius: .5em;
	padding: .85em 1em;
	text-decoration: none;
	color: inherit;
}

a.entree:hover { background: #fff; border-color: #a8a29e; }
.entree h2 { font-size: 1em; margin: 0 0 .2em; }
.entree p { margin: 0; color: #44403c; font-size: .9em; }
.entree .meta { margin-bottom: 0; }

.entree.erreur { border-color: var(--rouge); border-left-width: 3px; }
.erreur-texte { color: var(--rouge); font-size: .875em; font-family: ui-monospace, monospace; }

/* ---------- Les avertissements ont quitté la page (2026-10-11) ----------
 *
 * `.avertissements` (l'encadré « Ce que la lecture du fichier a signalé ») et `.resume` (la
 * ligne « Donne partielle — Est inconnue, Ouest inconnue ») n'ont plus de règle : ils ne
 * s'affichent plus. Ces remarques s'adressent à celui qui ÉCRIT la donne, et leur place est la
 * validation qui précède la publication (`mise run donnes`) — pas sous les yeux du lecteur, qui
 * n'y peut rien. Les laisser ici ferait croire qu'il suffit de replacer une classe pour les
 * faire revenir : ce n'est pas une disposition, c'est une décision.
 */

/* ---------- Aucune disposition d'écran étroit, et c'est délibéré ----------
 *
 * Il n'y a PAS de media query qui empile la table en une colonne. Quatre mains
 * empilées ne sont plus une donne : elles perdent la croix qui dit qui est en face
 * de qui. C'est la police proportionnelle qui fait tenir les trois colonnes, et le
 * défilement horizontal (`.table-defilement`) qui prend le relais quand elles ne
 * tiennent pas — un ascenseur, pas une autre disposition.
 */

/* ---------- La bascule de langue ---------- */

/* La bascule vit à côté du titre : c'est une propriété de la PAGE, pas de
   l'exercice — on ne la cherche pas au bas d'une page longue. */
.tete-exercice {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
	flex-wrap: wrap;
}

.langues {
	display: flex;
	align-items: baseline;
	gap: .35em;
	font-size: .8em;
	color: var(--discret);
	flex-wrap: wrap;
}

.langues-titre {
	font-size: .7em;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.langue {
	border: 1px solid var(--trait);
	border-radius: 1em;
	padding: .1em .55em;
	text-decoration: none;
	color: inherit;
}

a.langue:hover { background: var(--fond-doux); }

/* La langue courante n'est pas un lien — vers quoi mènerait-il ? Elle est pleine,
   et la différence se voit sans lire. */
.langue.courante {
	background: var(--texte);
	border-color: var(--texte);
	color: #fff;
}

/* ---------- L'impression : la feuille, et une feuille par segment ----------
 *
 * LA LARGEUR DE RÉFÉRENCE N'EST PLUS LA FENÊTRE : c'est la FEUILLE. Sans ces deux lignes,
 * la donne gardait la taille de l'écran, alors que la zone imprimable d'une A4 ne fait que
 * 718 px (21 cm moins 1 cm de marge de chaque côté) : elle tombait à un peu plus du tiers
 * du papier. `vw` se mesure ici sur la zone imprimable, donc les deux échelles du projet
 * se redéfinissent d'elles-mêmes — la donne et les enchères d'un côté, la prose de
 * l'autre, qui passe à une taille de papier ordinaire.
 *
 * RIEN D'INTERACTIF NE S'IMPRIME : la barre de navigation, en haut comme en bas, et tous
 * les boutons — « Suivant », « Voir la réponse », « Voir l'indice ». Sur une feuille, ils
 * ne mènent nulle part.
 *
 * TOUT L'EXERCICE S'IMPRIME, et pas seulement l'étape qu'on regarde. À l'écran, Alpine
 * masque les étapes inactives et les réponses non demandées par un STYLE EN LIGNE ; ici,
 * un `!important` de la feuille emporte le style en ligne. C'est ce qui fait qu'on imprime
 * l'exercice entier, toutes réponses visibles, sans avoir à cliquer chaque bouton avant
 * de lancer l'impression.
 *
 * UNE FEUILLE PAR SEGMENT : QUESTION AU RECTO, RÉPONSE AU VERSO. Chaque étape commence une
 * page, et la réponse commence la suivante — le recto porte donc la donne, les enchères,
 * leurs explications et la question, et le verso porte la réponse. Le compte tombe juste,
 * recto-verso-recto-verso, tant qu'un recto tient sur une page : c'est le seul endroit où
 * la mise en page dépend du contenu. `break-inside: avoid` protège au moins le bloc de
 * réponse d'une coupure au milieu.
 *
 * Ce bloc est en fin de feuille, et pas seulement par convention : les tests lisent la
 * PREMIÈRE règle portant un sélecteur, et une règle d'impression posée plus haut leur
 * faisait lire la mauvaise. Une lecture juste vaut mieux qu'un test qui se protège des
 * règles qu'il ne devrait pas voir.
 */
@media print {
	@page { size: A4; margin: 1cm; }

	:root {
		--taille-donne: 4.6vw;
		--taille-encheres: 2.4vw;
		--taille-lecture: 12px;
	}
	body { font-size: 12px; }

	.barre-etapes, .bouton, .langues { display: none !important; }

	.etape { display: block !important; }
	.carte-reponse, .indice > div { display: block !important; }

	.etape:not(:first-of-type) { break-before: page; }
	.carte-reponse { break-before: page; break-inside: avoid; }

	/* ET L'IMPRESSION MONTRE TOUT, quel que soit l'état des boutons : on n'imprime pas une
	 * page pour y laisser ce qu'on avait masqué à l'écran. Même règle que pour les réponses,
	 * appliquée aux cartes jouées — et au tiret d'une couleur vide, qui revient avec elles. */
	.jeu-cache .carte-main.jouee { display: inline !important; }
	.jeu-cache .carte-main.vide { display: inline !important; }
	.jeu-cache .jeu-joue { display: block !important; }
	.jeu-cache .marque-cachee { display: none !important; }
}