/* ==========================================================================
   jackybejean.app — feuille de style unique.

   Les couleurs viennent du système visuel de Become President
   (Dev_Apple/Become President/Documentation/SYSTEME-VISUEL.md).
   Règle reprise du jeu : le contenu est le seul objet de papier, tout le
   reste est le plateau sur lequel il est posé.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
	/* Fonds */
	--board:          #F2EDE2;
	--paper:          #FBF8F1;
	--paper-next:     #F0EBDF;

	/* Encres */
	--ink:            #1C1A16;
	--ink-body:       #4A443A;
	--ink-secondary:  #8A8274;
	--ink-label:      #A9A192;

	/* Accents — le bleu engage, le rouge situe. Jamais l'inverse. */
	--accent:         #26406E;
	--accent-strong:  #B3352E;

	/* Filets : encre principale posée à une opacité, pas une teinte à part */
	--rule:           rgba(28, 26, 22, 0.14);
	--edge:           rgba(28, 26, 22, 0.07);
	--rail:           rgba(28, 26, 22, 0.10);
	--band:           rgba(255, 255, 255, 0.58);
	--band-active:    rgba(255, 255, 255, 0.96);

	--paper-shadow:   0 18px 40px -24px rgba(28, 26, 22, 0.35);

	/* Mesures */
	--measure:        44rem;
	--radius:         14px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--board:          #141311;
		--paper:          #2A251F;
		--paper-next:     #221E19;

		--ink:            #EFE9DC;
		--ink-body:       #B7AF9F;
		--ink-secondary:  #877F70;
		--ink-label:      #6D6659;

		--accent:         #3E5E96;
		--accent-strong:  #D0625A;

		--rule:           rgba(239, 233, 220, 0.16);
		--edge:           rgba(239, 233, 220, 0.09);
		--rail:           rgba(239, 233, 220, 0.13);
		--band:           rgba(239, 233, 220, 0.07);
		--band-active:    rgba(239, 233, 220, 0.17);

		--paper-shadow:   0 18px 40px -26px rgba(0, 0, 0, 0.7);
	}
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 1.5rem 1.25rem 3rem;
	background: var(--board);
	color: var(--ink-body);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	padding: 0.5rem 0.875rem;
	background: var(--paper);
	border-radius: 8px;
}

/* --- Titres : Bodoni Moda ----------------------------------------------- */

/* Bodoni Moda a des métriques de ligne très amples : sans interlignage
   explicite, un titre sur deux lignes s'étale d'un tiers de trop.
   Même correction que celle appliquée à la fonte embarquée dans l'app. */

h1, h2, h3, .wordmark {
	font-family: "Bodoni Moda", "Didot", "Times New Roman", serif;
	color: var(--ink);
	line-height: 1.15;
	font-weight: 600;
	text-wrap: balance;
}

h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 6vw, 2.75rem);
	letter-spacing: -0.01em;
}

/* 1,375rem et pas 1,5 : à 24 px, « Gratuit pour commencer, un achat unique pour la
   suite » dépasse de quelques pixels la largeur du papier et se coupe après « un ». */

h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.375rem;
	font-weight: 500;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.1875rem;
	font-weight: 500;
}

.lead {
	margin: 0 0 2rem;
	color: var(--ink-secondary);
	font-size: 1.1875rem;
	font-style: italic;
}

/* --- Header et footer --------------------------------------------------- */

.site-header,
.site-footer {
	max-width: var(--measure);
	margin: 0 auto;
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 0 0.25rem 1.25rem;
}

/* 28 px en large, 24 px sur un téléphone : au-delà, le nom et les deux liens ne
   tiennent plus sur la même ligne et la nav retombe sous lui. */

.wordmark {
	font-size: clamp(1.5rem, 4.5vw, 1.75rem);
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--ink);
}

/* En-tête des pages du domaine (mentions légales) : le logo du studio à la place
   du nom, comme sur l'accueil, en plus petit. Le SVG est plus haut que large : on
   fixe sa hauteur, la largeur suit. */

.wordmark-logo {
	line-height: 0;
}

.wordmark-logo img {
	height: 56px;
	width: auto;
	border-radius: 0;
}

.site-nav,
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	font-size: 0.9375rem;
}

.site-nav a,
.footer-nav a {
	color: var(--ink-secondary);
	text-decoration: none;
}

.site-nav a:hover,
.footer-nav a:hover {
	color: var(--accent);
}

.site-nav a[aria-current="page"] {
	color: var(--accent-strong);
}

.site-footer {
	padding: 2rem 0.25rem 0;
	color: var(--ink-label);
	font-size: 0.875rem;
}

.copyright {
	margin: 1rem 0 0;
	color: var(--ink-label);
}

/* --- Le papier ---------------------------------------------------------- */

.paper {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 3rem);
	background: var(--paper);
	border: 1px solid var(--edge);
	border-radius: var(--radius);
}

/* --- Contenu ------------------------------------------------------------ */

p, ul, ol, dl {
	margin: 0 0 1.125rem;
}

ul, ol {
	padding-left: 1.375rem;
}

li {
	margin-bottom: 0.375rem;
}

strong {
	color: var(--ink);
	font-weight: 600;
}

a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

blockquote {
	margin: 1.5rem 0;
	padding-left: 1.125rem;
	border-left: 2px solid var(--accent-strong);
	color: var(--ink);
	font-style: italic;
}

/* Un chemin ou une balise en code ne contient ni espace ni tiret : sans point de
   coupure autorisé, il élargit toute la page et la fait défiler à l'horizontale. */

code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/* Tableaux : rares, mais ils doivent pouvoir défiler seuls sur iPhone. */

table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

th, td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--rule);
}

th {
	color: var(--ink);
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.updated {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	color: var(--ink-label);
	font-size: 0.875rem;
}

/* Bouton d'action : le bleu, et rien d'autre. */

.button {
	display: inline-block;
	margin: 0.5rem 0.5rem 0.5rem 0;
	padding: 0.75rem 1.375rem;
	background: var(--accent);
	color: var(--paper);
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
}

/* Bloc à compléter avant mise en ligne — voir README. */

.todo {
	margin: 1.5rem 0;
	padding: 0.875rem 1.125rem;
	border: 1px dashed var(--accent-strong);
	border-radius: 10px;
	color: var(--accent-strong);
	font-size: 0.9375rem;
}

/* --- Racine du domaine : le logo en guise de titre ---------------------- */
/*
   Le h1 garde son rôle (le texte est l'alt de l'image) : seule l'apparence
   change. Centré comme un carton de studio ; le rayon global sur img est
   annulé, le logo n'a pas de cadre. Les dimensions du <img> donnent le ratio
   avant chargement, pour que le texte dessous ne saute pas. Le SVG est
   cadré au ras du dessin : toute la marge vient d'ici, pas du fichier.
*/

.title-logo {
	margin: 0 0 1.75rem;
	text-align: center;
	line-height: 0;
}

.title-logo picture {
	display: inline-block;
}

.title-logo img {
	width: clamp(124px, 33vw, 174px);
	height: auto;
	border-radius: 0;
}

/* --- Racine du domaine : la liste des apps ----------------------------- */
/*
   Une carte par application, entièrement cliquable : l'icône, le nom, une
   ligne, le statut. L'icône porte seule l'identité de l'app — la page du
   domaine reste sur le papier commun, quelle que soit l'app présentée.
*/

.apps {
	display: grid;
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.apps li {
	margin: 0;
}

.app-card {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	padding: 1rem;
	background: var(--paper-next);
	border: 1px solid var(--edge);
	border-radius: 12px;
	color: var(--ink-body);
	text-decoration: none;
}

.app-card:hover {
	border-color: var(--accent);
}

/* Même règle que .app-icon : l'icône sort déjà masquée, pas de second rayon. */

.app-card img {
	flex: none;
	width: 76px;
	height: 76px;
	border-radius: 0;
}

.app-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.app-card-name {
	font-family: "Bodoni Moda", "Didot", "Times New Roman", serif;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink);
}

.app-card-line {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.app-card-status {
	margin-top: 0.25rem;
	color: var(--ink-label);
	font-size: 0.8125rem;
}

/* --- Racine du domaine : les réseaux sociaux --------------------------- */
/*
   Un cartouche sous les cartes des apps, de leur largeur mais moins haut :
   les jeux d'abord. Fond BLANC en clair comme en sombre, et pas --paper-next : les
   chartes de Meta veulent les logos en couleur sur blanc (le « f » blanc dans
   le rond bleu de Facebook) et interdisent de les recolorer. Aucun texte à
   côté des logos (charte Facebook) : le nom est porté par aria-label.
   Écart entre logos ≥ un demi-logo (charte Facebook) : 32 px de logo, 48 px.
*/

.social {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin: 1rem 0 0;
	padding: 12px 20px;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid var(--edge);
	border-radius: 12px;
}

.social li {
	margin: 0;
}

.social a {
	display: block;
	line-height: 0;
}

.social img {
	width: 32px;
	height: 32px;
	border-radius: 0;
}

/* --- Le bloc d'en-tête --------------------------------------------------- */
/*
   Rendu par src/template.html quand la page porte « hero: true ». Trois
   colonnes sur une seule ligne : l'icône de l'application, le titre, le bouton
   de téléchargement. Posé sur le plateau, hors du papier — c'est une fiche
   d'app, la feuille de texte vient après.
*/

.hero {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.25rem;
	max-width: var(--measure);
	margin: 0 auto 2.5rem;
	padding: 0 0.25rem;
}

/* L'icône sort d'actool déjà masquée en squircle, sur le crème du plateau :
   ni rayon supplémentaire, ni ombre, sinon le masque se voit deux fois. */

.app-icon {
	width: 98px;
	height: 98px;
	border-radius: 0;
}

/* Titre calibré sur l'icône, pas sur la page : à 44 px il écraserait les
   76 px de l'icône posée à côté. */

.hero-text h1 {
	margin: 0;
	font-size: clamp(1.75rem, 5vw, 2.375rem);
}

/* Le genre fait partie du h1 — c'est lui que lisent les moteurs : « Deviens
   Président — jeu politique sur iPhone et iPad ». À l'écran, il passe sous le
   nom en petite étiquette : en corps de titre, le h1 tiendrait sur trois lignes
   à côté d'une icône de 98 px. Le tiret ne sert qu'au texte lu, pas à l'œil. */

.hero-genre {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-label);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}

.hero-sep {
	display: none;
}

/* 1 rem et non 1,0625 : le sous-titre doit tenir sur UNE ligne pour que le bloc
   titre + sous-titre + plateformes fasse la hauteur de l'icône (98 px). Sur deux
   lignes il la dépasse, et l'alignement cherché tombe à l'eau. */

.hero-text .lead {
	margin: 0.25rem 0 0;
	font-size: 1rem;
}

.platforms {
	margin: 0.375rem 0 0;
	color: var(--ink-label);
	font-size: 0.8125rem;
}

.hero .button {
	margin: 0;
	white-space: nowrap;
}

/* Le badge officiel App Store. Hauteur fixée, largeur libre : le fichier garde
   son ratio, et les lignes directrices d'Apple interdisent de le déformer ou de
   le recolorer. Le rayon global sur img est annulé — le badge porte déjà le sien.
   line-height: 0 sur le lien supprime l'espace fantôme sous une image en ligne. */

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

.badge img {
	width: auto;
	height: 44px;
	border-radius: 0;
}

/* App Store et Mac App Store côte à côte, sur leur propre ligne sous le bloc
   icône + titre, calés à gauche (choix de Jacky). Hors de la colonne du titre,
   les ~290 px des deux badges ne compriment plus rien ; ils passent l'un sous
   l'autre si la largeur manque. */

.badges {
	grid-column: 1 / -1;
	justify-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Les mêmes badges repris dans le corps de la page, à la fin de la section sur
   l'achat : calés à gauche comme dans l'en-tête (choix de Jacky), avec un peu
   d'air avant la section suivante. */

.paper .badges {
	margin: 1.5rem 0;
}

/* En attente du lien réel : la forme du bouton, sans le bleu qui engage. */

.button-waiting {
	background: transparent;
	border: 1px dashed var(--rule);
	color: var(--ink-label);
	font-weight: 500;
}

/* --- Les captures d'écran ------------------------------------------------ */

.shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 3vw, 1.5rem);
	margin: 2rem 0;
}

.shot {
	margin: 0;
}

/* <picture> est inline par défaut : sa boîte de ligne ajouterait quelques pixels
   sous l'image, avant la légende. Le passer en block les supprime. */

.shot picture {
	display: block;
}

.shot img {
	display: block;
	width: 100%;
	border: 1px solid var(--edge);
	border-radius: 12px;
}

.shot figcaption {
	margin-top: 0.625rem;
	color: var(--ink-secondary);
	font-size: 0.8125rem;
	text-wrap: balance;
}

/* Cadre vide en attente de la capture : il occupe la place exacte d'un écran
   d'iPhone, pour que rien ne se déplace à l'arrivée des images. */

.shot-empty::before {
	content: "";
	display: block;
	aspect-ratio: 9 / 19.5;
	border: 1px dashed var(--rule);
	border-radius: 12px;
	background: var(--paper-next);
}

/* La capture d'iPad. Un paysage 3/2 ne peut pas partager la grille des trois
   portraits 9/19,5 : les hauteurs de cellules seraient trop inégales et les
   légendes ne s'aligneraient plus. Elle vit donc HORS du triptyque, en pleine
   largeur du papier, et hérite du reste de .shot — bordure, rayon, légende.
   La marge reprend celle de .shots : le triptyque et elle respirent pareil. */

.shot-wide {
	margin: 2rem 0;
}

/* Le reportage vidéo de la page presse : mêmes bordure et rayon qu'une capture.
   Le fond noir couvre l'instant où l'image d'attente n'est pas encore là. */

.shot video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
	border: 1px solid var(--edge);
	border-radius: 12px;
}

/* Le bandeau presse, en tête de la page du jeu : une étiquette en rouge (le
   rouge situe) et une ligne d'encre, sur le papier d'en dessous. */

.press-band {
	margin: 0 0 1.75rem;
}

.press-band a {
	display: block;
	padding: 0.75rem 1rem;
	background: var(--paper-next);
	border: 1px solid var(--edge);
	border-radius: 10px;
	color: var(--ink);
	text-decoration: none;
}

.press-band a:hover {
	color: var(--accent);
}

.press-band-label {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--accent-strong);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Le dossard ---------------------------------------------------------- */
/*
   Thème propre, posé par le template sur <body class="app-le-dossard">. Les
   valeurs viennent de running-trail/Design/DESIGN-SYSTEM.md, qui fait foi :
   le bleu nuit du voile de scène pour le plateau, celui de l'encre pour le
   papier, le crème en texte, l'abricot pour l'action.

   Seuls les jetons changent : toute la mise en page reste celle du site. Les
   variables sont redéfinies sur le <body>, qui l'emporte sur :root par
   héritage — le thème est donc le même en mode clair et en mode sombre,
   comme dans l'app, qui n'a qu'un seul aspect.
*/

body.app-le-dossard {
	--board:          #050F19;
	--paper:          #0A2134;
	--paper-next:     #081826;

	--ink:            #F5E6D2;
	--ink-body:       rgba(245, 230, 210, 0.82);
	--ink-secondary:  rgba(245, 230, 210, 0.66);
	--ink-label:      rgba(245, 230, 210, 0.46);

	--accent:         #F2A15A;
	--accent-strong:  #F2A15A;

	--rule:           rgba(245, 230, 210, 0.16);
	--edge:           rgba(245, 230, 210, 0.16);

	color-scheme: dark;
}

/* Bebas Neue n'a qu'une graisse : la demander en 600 ferait fabriquer au
   navigateur un faux gras, épaissi à l'aveugle. La hiérarchie passe par la
   taille, comme dans l'app, et l'interlettrage de 3 % est celui de la planche. */

.app-le-dossard h1,
.app-le-dossard h2,
.app-le-dossard h3,
.app-le-dossard .wordmark {
	font-family: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.05;
}

/* Le japonais : Bebas n'a pas de kana, le navigateur retombe sur la police
   système, et la graisse 400 y donnerait Hiragino W3, trop maigre pour un
   titre. L'app place Hiragino Sans W6 derrière Bebas : même chose ici.
   font-synthesis: none empêche le 600 de fabriquer un faux gras sur les
   lettres latines, que Bebas garde ; l'interligne s'ouvre pour les kanji. */

.app-le-dossard:lang(ja) h1,
.app-le-dossard:lang(ja) h2,
.app-le-dossard:lang(ja) h3 {
	font-family: "Bebas Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	font-weight: 600;
	font-synthesis: none;
	line-height: 1.3;
}

.app-le-dossard h2 {
	font-size: 1.75rem;
}

.app-le-dossard h3 {
	font-size: 1.375rem;
}

/* 2,5 rem au plus : Bebas est étroite et supporte d'être plus grande que
   Bodoni, mais le bloc titre doit garder la hauteur de l'icône (98 px). */

.app-le-dossard .hero-text h1 {
	font-size: clamp(2rem, 6vw, 2.5rem);
}

/* « On tutoie, on raconte » : pas d'italique dans l'app, pas ici non plus. */

.app-le-dossard .lead,
.app-le-dossard blockquote {
	font-style: normal;
}

/* --- Étroit -------------------------------------------------------------- */
/* Le bouton passe sous le titre : sur une ligne, il le comprimerait à trois mots. */

@media (max-width: 40rem) {
	.hero {
		grid-template-columns: auto 1fr;
		gap: 1rem;
	}

	.hero .button {
		grid-column: 1 / -1;
		justify-self: start;
	}
}