/* ==========================================================================
   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);
}

.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 : page de redirection ----------------------------- */

body.redirect {
	display: flex;
	min-height: 80vh;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.wordmark-large {
	margin: 0 0 1.75rem;
	font-family: "Bodoni Moda", "Didot", "Times New Roman", serif;
	font-size: clamp(2rem, 8vw, 3.25rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink);
}

.redirect-note {
	margin: 1.75rem 0 0;
	color: var(--ink-label);
	font-size: 0.875rem;
}

/* --- 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);
}

/* 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;
}

/* 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);
}

/* --- É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,
	.hero .badge {
		grid-column: 1 / -1;
		justify-self: start;
	}
}