/**
 * ANAVA Responsive
 * Media queries et adjustments : desktop 1440 • tablette 768 • mobile 390
 */

/* ============================================
   BREAKPOINT: TABLETTE (768px)
   ============================================ */

@media (max-width: 768px) {
	:root {
		--section-spacing: var(--section-spacing-tablet);
		--container-padding: var(--container-padding-tablet);
	}

	html {
		font-size: 14px;
	}

	body {
		font-size: var(--body-size-tablet);
	}

	/* Typographie */
	h1 {
		font-size: var(--h1-size-tablet);
		line-height: var(--h1-line-height-tablet);
	}

	h2 {
		font-size: var(--h2-size-tablet);
		line-height: var(--h2-line-height-tablet);
	}

	h3 {
		font-size: var(--h3-size-tablet);
		line-height: var(--h3-line-height-tablet);
	}

	h4 {
		font-size: 22px;
		line-height: 1.35;
	}

	p {
		margin-bottom: var(--spacing-lg);
	}

	/* Grille */
	.grid--3-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--4-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Boutons */
	.btn {
		height: 48px;
		font-size: 15px;
		padding: 10px 20px;
	}

	.btn-lg {
		height: 52px;
	}

	/* Cartes expériences */
	.card-experience__content {
		padding: var(--spacing-lg);
	}

	.card-experience__image {
		height: 200px;
	}

	/* Conteneur */
	.container {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}

	/* Section spacing */
	section {
		padding: var(--section-spacing-tablet) 0;
	}

	/* Hero */
	.hero {
		min-height: var(--hero-min-height-tablet);
	}

	/* Flex */
	.flex--column-tablet {
		flex-direction: column;
	}

	.flex--wrap-tablet {
		flex-wrap: wrap;
	}

	/* Masquer les éléments desktop-only */
	.hide-tablet {
		display: none !important;
	}

	/* Afficher les éléments tablet-only */
	.show-tablet {
		display: block !important;
	}
}

/* ============================================
   BREAKPOINT: MOBILE (390px)
   ============================================ */

@media (max-width: 390px) {
	:root {
		--section-spacing: var(--section-spacing-mobile);
		--container-padding: var(--container-padding-mobile);
	}

	html {
		font-size: 14px;
	}

	body {
		font-size: var(--body-size-mobile);
	}

	/* Typographie */
	h1 {
		font-size: var(--h1-size-mobile);
		line-height: var(--h1-line-height-mobile);
		letter-spacing: -0.3px;
		margin-bottom: var(--spacing-lg);
	}

	h2 {
		font-size: var(--h2-size-mobile);
		line-height: var(--h2-line-height-mobile);
		margin-bottom: var(--spacing-lg);
	}

	h3 {
		font-size: var(--h3-size-mobile);
		line-height: var(--h3-line-height-mobile);
		margin-bottom: var(--spacing-md);
	}

	h4 {
		font-size: 18px;
		line-height: 1.4;
		margin-bottom: var(--spacing-md);
	}

	h5, h6 {
		font-size: 16px;
		margin-bottom: var(--spacing-md);
	}

	p {
		margin-bottom: var(--spacing-md);
		font-size: var(--body-size-mobile);
	}

	small, .small {
		font-size: 13px;
	}

	/* Grille */
	.grid--2-cols,
	.grid--3-cols,
	.grid--4-cols {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

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

	/* Flex */
	.flex {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.flex--between {
		justify-content: flex-start;
	}

	.flex--row-mobile {
		flex-direction: row;
	}

	.flex--column-mobile {
		flex-direction: column;
	}

	/* Boutons */
	.btn {
		height: 44px;
		font-size: 14px;
		padding: 8px 16px;
		width: 100%;
		border-radius: var(--radius-round);
	}

	.btn-lg {
		height: 44px;
		font-size: 14px;
		padding: 8px 16px;
	}

	.btn-sm {
		height: 40px;
		font-size: 12px;
		padding: 6px 12px;
	}

	.btn-block {
		width: 100%;
	}

	/* Cartes expériences */
	.card-experience {
		border-radius: var(--radius-md);
	}

	.card-experience__image {
		height: 180px;
	}

	.card-experience__content {
		padding: var(--spacing-lg);
	}

	.card-experience__title {
		font-size: 20px;
		line-height: 1.25;
		margin-bottom: var(--spacing-sm);
	}

	.card-experience__description {
		font-size: 13px;
		line-height: 1.5;
		margin-bottom: var(--spacing-md);
	}

	.card-experience__label {
		font-size: 11px;
		padding: 4px 8px;
		margin-bottom: var(--spacing-sm);
	}

	/* Conteneur */
	.container {
		padding-left: var(--container-padding-mobile);
		padding-right: var(--container-padding-mobile);
	}

	/* Section spacing */
	section {
		padding: var(--section-spacing-mobile) 0;
	}

	/* Hero */
	.hero {
		min-height: var(--hero-min-height-mobile);
	}

	.hero__content {
		padding: var(--spacing-2xl) var(--spacing-lg);
	}

	.hero__title {
		font-size: var(--h1-size-mobile);
		line-height: 1.25;
	}

	.hero__description {
		font-size: 14px;
		line-height: 1.5;
	}

	/* Formulaires */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="date"],
	input[type="time"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px; /* Évite zoom sur mobile */
		padding: 12px 12px;
	}

	.form-group {
		margin-bottom: var(--spacing-lg);
	}

	label {
		font-size: 13px;
		margin-bottom: 6px;
	}

	/* Espacements utilitaires */
	.mt-3xl { margin-top: var(--spacing-2xl); }
	.mb-3xl { margin-bottom: var(--spacing-2xl); }

	/* Image aspects */
	.image-hero,
	.aspect-ratio-16-9 {
		aspect-ratio: 4 / 3;
	}

	/* Masquer les éléments mobile-hidden */
	.hide-mobile {
		display: none !important;
	}

	/* Afficher les éléments mobile-only */
	.show-mobile {
		display: block !important;
	}

	/* Overflow horizontal */
	.overflow-hidden {
		overflow-x: hidden;
	}
}

/* ============================================
   PETITS ÉCRANS (< 390px)
   ============================================ */

@media (max-width: 360px) {
	body {
		font-size: 15px;
	}

	h1 {
		font-size: 32px;
		line-height: 1.25;
	}

	h2 {
		font-size: 24px;
		line-height: 1.3;
	}

	.btn {
		height: 40px;
		font-size: 13px;
		padding: 6px 14px;
	}

	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	section {
		padding: 48px 0;
	}
}

/* ============================================
   GRANDS ÉCRANS (> 1440px)
   ============================================ */

@media (min-width: 1920px) {
	:root {
		--container-max-width: 1440px;
	}

	h1 {
		font-size: 72px;
	}

	h2 {
		font-size: 48px;
	}

	.hero {
		min-height: 700px;
	}

	section {
		padding: 144px 0;
	}
}

/* ============================================
   TABLET LANDSCAPE (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
	.grid--3-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--4-cols {
		grid-template-columns: repeat(2, 1fr);
	}

	h1 {
		font-size: 42px;
	}

	h2 {
		font-size: 32px;
	}
}

/* ============================================
   UTILITÉS RESPONSIVES
   ============================================ */

/* Afficher/masquer par breakpoint */
@media (min-width: 1024px) {
	.show-desktop-only {
		display: block !important;
	}

	.hide-desktop {
		display: none !important;
	}
}

/* Print styles */
@media print {
	body {
		background-color: transparent;
		font-size: 12pt;
	}

	.no-print {
		display: none !important;
	}

	a {
		text-decoration: underline;
	}

	button,
	input,
	select,
	textarea {
		border: 1px solid #000;
	}

	img {
		max-width: 100%;
	}
}