/* Pages Télécharger de Biarritz Blackout (GDD §13.1, cartes #2190 et #2198) : charte pixel des menus
   (GDD §9) comme la page d'accueil (web/shell.html) : fond et logo de l'écran titre agrandis d'un nombre
   entier, police pixel du jeu (../police_pixel.js) pour les titres et les boutons, panneau d'encre aux coins
   taillés, boutons à tranche qui s'enfoncent. Les marches à suivre restent en texte courant, lisible.
   Tout est sur le site (COOP/COEP) : aucune police ni ressource externe. */
:root {
	--encre: #1d2230;
	--creme: #fff4dc;
	--jaune: #ffd34a;
	--rouge: #ff3b30;
	--bleu: #4aa3ff;
	--lisere: #3a4568;
	--gris: #b8c0cc;
	--nuit: #121827;
	--p: 2px;
	--coins: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
	--coins2: polygon(calc(var(--p) * 2) 0, calc(100% - var(--p) * 2) 0, calc(100% - var(--p) * 2) calc(var(--p) * 2), 100% calc(var(--p) * 2), 100% calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) 100%, calc(var(--p) * 2) 100%, calc(var(--p) * 2) calc(100% - var(--p) * 2), 0 calc(100% - var(--p) * 2), 0 calc(var(--p) * 2), calc(var(--p) * 2) calc(var(--p) * 2));
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { background: var(--encre); }

body {
	min-height: 100vh;
	color: var(--creme);
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: clamp(15px, 0.5vw + 13px, 17px);
	line-height: 1.5;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}

/* Fond de l'écran titre, fixe, agrandi d'un nombre entier (taille posée par telecharger.js). */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--encre) url(../fond_titre.png) center / var(--fond-taille, cover) no-repeat;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

main {
	max-width: 800px;
	margin: 0 auto;
	padding:
		calc(env(safe-area-inset-top, 0px) + 16px)
		calc(env(safe-area-inset-right, 0px) + 16px)
		calc(env(safe-area-inset-bottom, 0px) + 24px)
		calc(env(safe-area-inset-left, 0px) + 16px);
}

/* Page d'index : plus large, pour que les quatre tuiles tiennent sur une rangée quand l'écran le permet. */
main.large { max-width: 1040px; }

/* ---------- Police pixel (../police_pixel.js) ---------- */

[data-px] { display: inline-block; }

h1[data-px], h2[data-px], p[data-px] { display: block; }

.px-pret { position: relative; }

.px-pret > .px-texte {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
}

.px-image {
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	pointer-events: none;
}

/* ---------- En-tête : logo du jeu ---------- */

.entete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.logo { display: block; line-height: 0; }

.logo img {
	display: block;
	width: 408px;
	max-width: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.retour {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--creme);
	text-decoration: none;
	text-align: left;
}

.retour:hover, .retour:focus-visible { color: var(--jaune); outline: none; }

/* ---------- Panneau d'encre (BkUi.PANNEAU) ---------- */

.panneau {
	padding: calc(var(--p) * 8) calc(var(--p) * 10) calc(var(--p) * 10);
	background: rgba(29, 34, 48, 0.94);
	box-shadow: inset 0 0 0 var(--p) var(--encre), inset 0 calc(var(--p) * 2) 0 0 var(--lisere);
	clip-path: var(--coins);
}

h1, h2 {
	display: block;
	margin: 0;
	color: var(--jaune);
	font-weight: normal;
}

h1 { text-align: center; margin-bottom: 8px; }

h2 { margin: 26px 0 6px; }

.sous-titre {
	margin: 0 0 20px;
	text-align: center;
}

p { margin: 8px 0; }

a { color: var(--jaune); }

b { color: #fff; }

/* ---------- Boutons pixel (BkPixel.bouton, comme web/shell.html) ---------- */

.pxb, .tuile, .bouton, .copier, .ouvrir {
	--c: var(--creme);
	--c-tranche: #736e63;
	--c-lisere: #fff9ec;
	--c-bas: #d1c8b4;
	--c-survol: #fff6e4;
	--c-appui: #d9cfbb;
	position: relative;
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0 0 calc(var(--p) * 2);
	border: 0;
	background: none;
	color: var(--encre);
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.pxb::before, .tuile::before, .bouton::before, .copier::before, .ouvrir::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--p) * 2);
	bottom: 0;
	background: var(--c-tranche);
	box-shadow: inset 0 0 0 var(--p) var(--encre);
	clip-path: var(--coins);
}

.dessus {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--p) * 2);
	height: 100%;
	padding: calc(var(--p) * 4) calc(var(--p) * 8);
	background: var(--c);
	box-shadow:
		inset 0 0 0 var(--p) var(--encre),
		inset 0 calc(var(--p) * 2) 0 0 var(--c-lisere),
		inset 0 calc(var(--p) * -2) 0 0 var(--c-bas);
	clip-path: var(--coins);
}

:is(.pxb, .tuile, .bouton, .copier, .ouvrir):is(:hover, :focus-visible) .dessus { background: var(--c-survol); }

:is(.pxb, .tuile, .bouton, .copier, .ouvrir):active::before { display: none; }

:is(.pxb, .tuile, .bouton, .copier, .ouvrir):active .dessus {
	transform: translateY(calc(var(--p) * 2));
	background: var(--c-appui);
}

:is(.pxb, .tuile, .bouton, .copier, .ouvrir):focus-visible::after {
	content: '';
	position: absolute;
	inset: calc(var(--p) * -3);
	border: calc(var(--p) * 2) solid var(--jaune);
	clip-path: var(--coins2);
	pointer-events: none;
}

/* Bouton de téléchargement : jaune, comme « Partie rapide ». */
.bouton {
	--c: var(--jaune);
	--c-tranche: #735f21;
	--c-lisere: #ffe79c;
	--c-bas: #d1ad3d;
	--c-survol: #ffdd72;
	--c-appui: #d9b33f;
	margin: 4px 0 10px;
	max-width: 100%;
}

.bouton[aria-disabled="true"] {
	--c: #4a5068;
	--c-tranche: #21242f;
	--c-lisere: #9b9fac;
	--c-bas: #3d4255;
	--c-survol: #4a5068;
	--c-appui: #4a5068;
	color: #9aa1b5;
	pointer-events: none;
}

.copier { margin: 2px 0 6px; }

/* « Ouvrir Steam » (section Ajouter à Steam, carte #2291) : bouton crème, secondaire. */
.ouvrir { margin: 4px 0 8px; max-width: 100%; }

/* Cible tactile d'au moins 44 px (tranche comprise). */
.bouton, .copier, .ouvrir { min-height: 44px; }

.bouton .dessus, .copier .dessus, .ouvrir .dessus { min-height: calc(44px - var(--p) * 2); }

.copier .dessus, .ouvrir .dessus { padding: calc(var(--p) * 2) calc(var(--p) * 6); }

/* Tuiles des plateformes (page d'index). Le texte pixel est une image d'une taille donnée : le nombre de
   colonnes (4, 2 ou 1) est choisi par telecharger.js pour qu'aucun titre ne déborde de sa tuile ; sans
   script, 2 colonnes, 1 sur téléphone. Les sous-titres (data-px-coupe) se coupent aux mots. */
.tuiles {
	display: grid;
	grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
	gap: calc(var(--p) * 8) calc(var(--p) * 6);
	margin: 22px 0;
}

@media (max-width: 520px) {
	.tuiles { --colonnes: 1; }
}

.tuile { display: block; min-width: 0; min-height: 44px; }

.tuile .dessus {
	min-height: 100%;
	padding: calc(var(--p) * 7) calc(var(--p) * 6);
}

.tuile small[data-px] {
	display: block;
	width: 100%;
	text-align: center;
}

/* Bouton de téléchargement : son libellé se coupe aux mots s'il ne tient pas sur une ligne. */
.bouton [data-px-coupe] { display: block; width: 100%; }

.tuile small { color: var(--encre); opacity: 0.8; }

/* ---------- Texte courant ---------- */

.info {
	margin: 0;
	font-size: clamp(14px, 0.3vw + 13px, 15px);
	color: var(--gris);
}

/* Lien dans le texte : zone de toucher agrandie à 44 px sans changer la ligne. */
.info a, footer a {
	display: inline-block;
	padding: 12px 4px;
	margin: -12px -4px;
}

.carte {
	margin: 14px 0;
	padding: 14px 16px 12px;
	background: var(--nuit);
	box-shadow: inset 0 0 0 var(--p) #2a3552;
	clip-path: var(--coins);
}

ol, ul { padding-left: 24px; }
li { margin: 6px 0; }

code, pre {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 14px;
}

code { color: var(--jaune); }

pre {
	margin: 8px 0;
	padding: 12px;
	background: var(--nuit);
	box-shadow: inset 0 0 0 var(--p) #2a3552;
	clip-path: var(--coins);
	color: var(--creme);
	white-space: pre-wrap;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
}

/* Pied de page sur une plaque d'encre : lisible sur toutes les teintes du fond. */
footer {
	display: table;
	margin: 24px auto 0;
	padding: 12px 18px;
	background: rgba(29, 34, 48, 0.94);
	box-shadow: inset 0 0 0 var(--p) var(--encre);
	clip-path: var(--coins);
	text-align: center;
	font-size: 15px;
	color: var(--creme);
}