/*
 * responsive.css
 * Points de rupture : 960px (tablette), 640px (mobile).
 * Le menu bascule en panneau plein écran sous 960px.
 */

@media (max-width: 960px) {
	:root {
		--space-xl: 5rem;
		--space-lg: 3rem;
	}

	.nav__burger {
		display: flex;
	}

	.nav__list {
		position: fixed;
		inset: var(--header-height) 0 0 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-md);
		background: color-mix(in srgb, var(--bg) 94%, transparent);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		transform: translateX(100%);
		transition: transform var(--transition-med);
		z-index: 90;
	}

	.nav__list.is-open {
		transform: translateX(0);
	}

	.nav__link {
		font-size: 1.4rem;
	}

	.about__grid,
	.contact__grid {
		grid-template-columns: 1fr;
	}

	.education__grid {
		grid-template-columns: 1fr;
	}

	/* Le curseur personnalisé et l'effet tilt n'ont pas de sens au tactile,
	   ils sont déjà neutralisés côté JS via matchMedia. */
}

@media (max-width: 640px) {
	:root {
		--space-xl: 4rem;
		--header-height: 64px;
	}

	.hero__cta .btn {
		width: 100%;
		text-align: center;
	}

	.about__stats {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xs);
	}

	.stat {
		padding: var(--space-sm);
	}

	.stat__value {
		font-size: 1.8rem;
	}

	.timeline {
		padding-left: var(--space-sm);
	}

	.timeline__marker {
		left: calc(-1 * var(--space-sm) - 7px);
	}

	.timeline__card,
	.contact__form,
	.project-card__body,
	.edu-card,
	.skill-card {
		padding: var(--space-sm);
	}

	.projects__grid {
		grid-template-columns: 1fr;
	}

	.footer__inner {
		flex-direction: column;
		text-align: center;
	}
}