/* ==========================================================================
   Croc'Color – responsive.css
   Media queries pour adapter le thème aux tablettes et mobiles.
   Approche mobile-friendly : le base s'applique partout, on ajuste vers
   le bas (max-width).
   ========================================================================== */

/* Tablette large : on affiche le tagline */
@media (min-width: 1024px) {
	.site-header__tagline { display: block; }
}

/* Tablettes & en-dessous : navigation repliable */
@media (max-width: 960px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: var(--sp-4);
	}

	.site-header__toggle {
		display: inline-flex;
		order: 3;
	}

	.site-nav {
		order: 4;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-4);
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--t-base);
	}

	.site-nav.is-open {
		max-height: 80vh;
		overflow: auto;
		padding-bottom: var(--sp-4);
	}

	.site-nav__menu {
		flex-direction: column;
		gap: var(--sp-1);
		align-items: stretch;
	}

	.site-nav__menu a {
		display: block;
		text-align: center;
		padding: var(--sp-3);
	}

	.site-nav__menu .sub-menu {
		position: static;
		box-shadow: none;
		background: var(--color-cream-soft);
		padding: var(--sp-2);
		display: flex;
	}

	/* ── Dropdown catégories (mobile) ── */

	/* <li> en grid 2 col : lien (1fr) | bouton (auto)
	   La flèche reste toujours en row 1 même quand le dropdown est ouvert */
	.menu-item--has-cat-dropdown {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	/* padding-left compense le bouton (≈44px) pour re-centrer le texte */
	.menu-item--has-cat-dropdown > a {
		grid-column: 1;
		grid-row: 1;
		padding-left: 44px;
	}

	.nav-cat-dropdown__toggle {
		display: inline-flex;
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.nav-cat-dropdown__toggle:hover {
		background: var(--color-orange-soft);
	}

	/* Désactive le hover/focus-within du desktop sur mobile */
	.menu-item--has-cat-dropdown:hover .nav-cat-dropdown,
	.menu-item--has-cat-dropdown:focus-within .nav-cat-dropdown {
		display: none;
		transform: none; /* neutralise transform:translateX(-50%) du :hover desktop */
	}

	.menu-item--has-cat-dropdown.is-open .nav-cat-dropdown {
		display: grid;
		transform: none;
	}

	.nav-cat-dropdown {
		display: none;         /* caché par défaut — efface display:grid + visibility:hidden du desktop */
		opacity: 1;
		visibility: visible;
		position: static;
		transform: none;
		box-shadow: none;
		border: none;
		background: var(--color-cream-soft);
		border-radius: var(--radius-sm);
		min-width: 0;
		grid-column: 1 / -1;  /* span les 2 colonnes → pleine largeur */
		grid-row: 2;
		grid-template-columns: repeat(2, 1fr);
		padding: var(--sp-2);
		margin-top: var(--sp-1);
		transition: none;
	}

	.nav-cat-dropdown__item a {
		text-align: left;
	}
	/* ────────────────────────────────── */

	.site-nav__search {
		width: 100%;
	}

	.site-nav__search input[type="search"] {
		width: 100%;
		flex: 1;
	}

	.container--with-sidebar {
		grid-template-columns: 1fr;
	}

	.widget-area {
		position: static;
	}
}

/* Hero & sections home */
@media (max-width: 900px) {
	.hero {
		padding: var(--sp-12) 0 var(--sp-12);
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
		text-align: center;
	}

	.hero__subtitle { margin-inline: auto; }

	.hero__features { justify-content: center; }

	.hero__visual { min-height: 280px; }

	.hero__crayons {
		left: auto;
		right: 5%;
		bottom: 8%;
	}

	.about-snippet__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.single-coloriage__layout {
		grid-template-columns: 1fr;
		padding: var(--sp-5);
	}

	.single-coloriage__sidebar {
		position: static;
	}

	.page-apropos__intro {
		grid-template-columns: 1fr;
	}

	.page-apropos__visual { justify-content: center; }

	.page-contact__layout {
		grid-template-columns: 1fr;
	}

	.page-contact__info {
		position: static;
	}

	.post-item {
		grid-template-columns: 1fr;
	}

	.post-navigation {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next { text-align: left; }
}

/* Mobiles */
@media (max-width: 600px) {
	:root {
		--container-pad: 1rem;
	}

	.hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn { width: 100%; }

	.coloriage-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--sp-3);
	}

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

	.about-snippet__cards { grid-template-columns: 1fr; }

	.single-coloriage__layout,
	.single-post__article,
	.page-default__article,
	.page-apropos__intro,
	.page-contact__info,
	.page-contact__form-wrap,
	.error-404__inner,
	.single-coloriage__description {
		padding: var(--sp-5);
	}

	.coloriage-info__row {
		grid-template-columns: 1fr;
		gap: var(--sp-1);
	}

	.coloriage-info__value {
		justify-self: start;
		text-align: left;
		justify-content: flex-start;
	}

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

	.site-footer__menu { justify-content: center; }

	.filter-bar {
		padding: var(--sp-2);
		gap: var(--sp-1);
	}

	.filter-bar__btn {
		font-size: var(--fs-sm);
		padding: var(--sp-1) var(--sp-3);
	}

	.btn--large {
		padding: var(--sp-3) var(--sp-5);
		font-size: var(--fs-base);
	}

	.coloriage-card__actions {
		flex-direction: column;
	}

	.coloriage-card__actions .btn { width: 100%; }

	.page-header__title { font-size: clamp(1.6rem, 6vw, 2rem); }
}

/* Très petits écrans */
@media (max-width: 380px) {
	.coloriage-grid { grid-template-columns: 1fr; }
	.categories__grid { grid-template-columns: 1fr; }
}

/* Impression */
@media print {
	/* Masquer chrome et navigation sur toutes les pages */
	.site-header,
	.site-footer,
	.breadcrumbs,
	.single-coloriage__sidebar,
	.related-coloriages,
	.filter-bar,
	.pagination,
	.btn,
	.share-buttons,
	.site-nav__search {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	/* Sur la page coloriage : image seule, pleine page, sans rogner */
	/* Approche display:none + flux naturel — fonctionne sur desktop et mobile */
	@page { margin: 0; size: auto; }

	body.single-coloriage .single-coloriage__description,
	body.single-coloriage .single-coloriage__placeholder {
		display: none !important;
	}

	body.single-coloriage .single-coloriage__layout {
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		border: 0 !important;
		overflow: visible !important;
	}

	body.single-coloriage .single-coloriage__figure {
		width: 100% !important;
		height: 100vh !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #fff !important;
		aspect-ratio: unset !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: visible !important;
		break-inside: avoid !important;
		page-break-inside: avoid !important;
	}

	body.single-coloriage .single-coloriage__image {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100vh !important;
		object-fit: contain !important;
		display: block !important;
	}
}