/* codeben.fr : blanc sur noir, Ubuntu Mono, la page se lit comme du balisage */

:root {
	--paper: #000;
	--ink: #fff;
	--muted: #a6a6a6;   /* texte secondaire, 8:1 sur noir */
	--dim: #6b6b6b;     /* balises fermantes, purement structurelles */
	--guide: #2e2e2e;   /* guides d'indentation */
	--indent: 2.5ch;
}

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

html { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Ubuntu Mono', ui-monospace, monospace;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: inherit; }
a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- ouverture ---------- */

.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1rem 4rem;
}

.typing-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo {
	font-size: clamp(2.6rem, 12vw, 5rem);
	font-weight: 700;
	line-height: 1.2;
	min-height: 1.2em;
	white-space: nowrap;
}

.subtitle {
	margin-top: .6em;
	font-size: clamp(1.25rem, 5.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.3;
	min-height: 1.3em;
	white-space: nowrap;
}

.input-cursor {
	display: inline-block;
	flex: none;
	width: 2px;
	height: 1em;
	margin-left: 8px;
	background: var(--ink);
	font-size: clamp(1.6rem, 6vw, 2.8rem);
	animation: blink .6s linear infinite alternate;
}
@keyframes blink {
	0%, 40% { opacity: 1; }
	60%, 100% { opacity: 0; }
}

.hero-nav {
	position: absolute;
	left: 0; right: 0;
	bottom: 2.5rem;
	display: flex;
	justify-content: center;
	gap: 3ch;
}
.hero-nav a {
	color: var(--muted);
	text-decoration: none;
	padding: .1em .4ch;
}

/* survol = vidéo inverse, comme une sélection de terminal */
.hero-nav a:hover,
.lien:hover,
.mail:hover {
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
}

/* ---------- corps : sections ouvertes et fermées comme des balises ---------- */

main {
	max-width: 82ch;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.tag + .tag { margin-top: 7rem; }

.tag-open,
.tag-close {
	font-size: clamp(1.8rem, 5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
}
.tag-close { color: var(--dim); }

/* le contenu d'une balise est indenté, avec un guide vertical comme dans un éditeur */
.tag-body,
.cat-body {
	margin-left: .5ch;
	padding-left: var(--indent);
	border-left: 1px solid var(--guide);
}
.tag-body {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.cat + .cat { margin-top: 4.5rem; }

.cat h3 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
}

.cat-intro {
	margin-top: .5rem;
	max-width: 66ch;
	color: var(--muted);
}

.cat-body { margin-top: 2rem; }

.projet + .projet { margin-top: 2.25rem; }

.projet h4 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
}

.projet p {
	margin-top: .35rem;
	max-width: 66ch;
}

.projet .stack {
	color: var(--muted);
	font-size: .95rem;
}

.lien {
	display: inline-block;
	margin-top: .45rem;
	padding: 0 .4ch;
	margin-left: -.4ch;
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

/* ---------- contact ---------- */

.contact-texte { max-width: 60ch; }

.mail {
	display: inline-block;
	margin-top: 1.25rem;
	margin-left: -.4ch;
	padding: 0 .4ch;
	font-size: clamp(1.4rem, 5.5vw, 2rem);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 2px;
	word-break: break-all;
}

/* ---------- pied ---------- */

.pied {
	max-width: 82ch;
	margin: 7rem auto 0;
	padding: 0 1.25rem 3rem;
	color: var(--dim);
	font-size: .95rem;
}

/* ---------- petits écrans ---------- */

@media (max-width: 600px) {
	:root { --indent: 1.5ch; }
	.tag + .tag { margin-top: 5rem; }
	.cat + .cat { margin-top: 3.5rem; }
	.cat h3 { font-size: 1.35rem; }
	.hero-nav { bottom: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.input-cursor { animation: none; }
}