/* ==========================================================================
   OPTIC MARKET — responsive.css (v3)
   Le conteneur reste fluide (width: min(1280px, calc(100% - 48px))), donc
   1920 / 1600 / 1440 / 1366 / 1280 restent identiques et centrés. Les
   media queries ci-dessous redessinent chaque section pour tablette et
   surtout pour mobile — ce n'est pas une simple réduction du desktop.
   ========================================================================== */

/* --------------------------------------------------------------------
   TABLETTE — max-width: 1023px (1024px = largeur exacte de la maquette,
   qui doit donc utiliser les valeurs desktop, pas les valeurs tablette)
   -------------------------------------------------------------------- */
@media (max-width: 1023px) {

	:root {
		--container-gutter: 40px;
		--header-gutter: 40px;
		--offers-gutter: 40px;
	}

	.hero-title {
		font-size: 3.5rem;
	}

	.hero-visual {
		right: -12%;
		opacity: 0.9;
	}

	.features-grid {
		grid-template-columns: repeat(3, 1fr);
		row-gap: var(--space-lg);
	}

	.store-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--space-lg);
	}
}

/* --------------------------------------------------------------------
   MOBILE — max-width: 768px (redessiné section par section, pas réduit)
   -------------------------------------------------------------------- */
@media (max-width: 768px) {

	:root {
		--container-gutter: 24px;
		--header-gutter: 24px;
		--offers-gutter: 24px;
		--space-lg: 1.75rem;
		--space-xl: 2.5rem;
		--space-2xl: 3rem;
	}

	/* ---- Header ---- */
	.header-inner {
		grid-template-columns: auto 1fr auto;
		height: 76px;
	}

	.site-logo,
	.custom-logo {
		height: 46px;
	}

	.main-navigation {
		position: fixed;
		inset: 76px 0 0 0;
		justify-self: stretch;
		background: var(--color-white);
		transform: translateX(100%);
		transition: transform var(--duration) var(--ease);
		overflow-y: auto;
		z-index: 190;
	}

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

	.main-navigation .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--space-lg) var(--container-gutter);
	}

	.main-navigation .nav-menu a {
		display: block;
		width: 100%;
		padding-block: var(--space-md);
		font-size: 1.05rem;
		border-bottom: 1px solid var(--color-border);
	}

	.menu-toggle {
		display: flex;
	}

	/* ---- Hero : sur mobile, le visuel repasse en flux normal, sous le
	   bloc de texte (plus en position absolue), à taille pleine. Seule la
	   largeur est contrainte ; la hauteur reste "auto" pour préserver le
	   ratio d'origine de l'image à 100 % — aucune déformation possible. ---- */
	.hero-section {
		padding-block: var(--space-xl);
	}

	.hero-visual {
		position: static;
		right: auto;
		top: auto;
		transform: none;
		height: auto;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: var(--space-lg);
	}

	.hero-visual img {
		width: 80%;
		max-width: 340px;
		height: auto;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-title {
		font-size: 2.6rem;
	}

	.hero-description {
		max-width: 42ch;
	}

	.btn {
		width: 100%;
		justify-content: center;
	}

	/* ---- Avantages : liste empilée en une colonne, lisible sur iPhone ---- */
	.features-grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-lg);
	}

	.feature-item {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: var(--space-md);
	}

	.feature-icon {
		width: 52px;
		height: 52px;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.feature-body {
		align-items: flex-start;
		flex: 1 1 auto;
		min-width: 0;
	}

	.feature-item .feature-divider {
		display: none;
	}

	.feature-title,
	.feature-text {
		max-width: none;
		text-align: left;
	}

	/* ---- Offres : les 3 images l'une sous l'autre ---- */
	.offers-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	/* ---- Marques : logos qui s'adaptent en largeur, alignement conservé ---- */
	.brands-header {
		margin-bottom: var(--space-sm);
	}

	/* ---- Bloc magasin : tout est empilé, centré ---- */
	.store-grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-lg);
		text-align: center;
	}

	.store-illustration img {
		max-width: 280px;
		margin-inline: auto;
	}

	.contact-list {
		align-items: center;
	}

	.contact-item {
		justify-content: center;
	}

	.social-links {
		justify-content: center;
	}

	.store-map img {
		max-width: 320px;
		margin-inline: auto;
	}

	/* ---- Newsletter : empilé, pleine largeur ---- */
	.newsletter-inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.newsletter-intro {
		flex-direction: column;
		max-width: none;
	}

	.newsletter-form {
		width: 100%;
		flex-direction: column;
	}

	.newsletter-input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}

	.newsletter-submit {
		width: 100%;
		justify-content: center;
	}

	/* ---- Footer : copyright et liens légaux empilés ---- */
	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: var(--space-xs);
	}

	/* ---- Pages génériques / archives ---- */
	.archive-grid {
		grid-template-columns: 1fr;
	}

	.article-nav {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* --------------------------------------------------------------------
   PETIT MOBILE — max-width: 400px (iPhone SE et similaires)
   -------------------------------------------------------------------- */
@media (max-width: 400px) {

	.hero-title {
		font-size: 2rem;
	}
}