/* ==========================================================================
   Croc'Color – pages.css
   Styles spécifiques : accueil, galerie, blog, à propos, contact, single.
   ========================================================================== */

/* ----- Hero ----- */
.hero {
	padding: var(--sp-16) 0 var(--sp-20);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 10% 20%, rgba(255, 199, 154, 0.4), transparent 30%),
		radial-gradient(circle at 90% 70%, rgba(244, 162, 97, 0.25), transparent 35%);
	pointer-events: none;
	z-index: -1;
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--sp-12);
	align-items: center;
}

.hero__content { position: relative; z-index: 1; }

.hero__eyebrow {
	display: inline-block;
	background: var(--color-paper);
	color: var(--color-orange-deep);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	margin-bottom: var(--sp-4);
	box-shadow: var(--shadow-soft);
}

.hero__title {
	font-size: clamp(2.4rem, 5vw, var(--fs-5xl));
	font-weight: 800;
	margin-bottom: var(--sp-4);
	line-height: 1.05;
}

.hero__subtitle {
	font-size: var(--fs-lg);
	color: var(--color-text-soft);
	margin-bottom: var(--sp-6);
	max-width: 540px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-8);
}

.hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-6);
	color: var(--color-text-soft);
	font-family: var(--font-display);
	font-weight: 600;
}

.hero__features li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.hero__features span { font-size: 1.5rem; }

.hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.hero__blob {
	width: 100%;
	max-width: 460px;
	filter: drop-shadow(0 30px 40px rgba(231, 111, 81, 0.18));
	animation: hero-bob 6s ease-in-out infinite;
}

@keyframes hero-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-12px) rotate(2deg); }
}

.hero__crayons {
	position: absolute;
	display: flex;
	gap: var(--sp-2);
	transform: rotate(-12deg);
	left: 12%;
	bottom: 18%;
}

.hero__crayon {
	width: 18px;
	height: 140px;
	border-radius: 8px 8px 4px 4px;
	box-shadow: 0 10px 20px rgba(61, 48, 39, 0.18);
	position: relative;
}

.hero__crayon::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
	height: 16px;
	background: var(--color-text);
	clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}

.hero__crayon--orange { background: var(--color-orange); }
.hero__crayon--coral  { background: var(--color-coral); }
.hero__crayon--cream  { background: var(--color-mustard); }
.hero__crayon--brown  { background: #B57E58; }

/* ----- Hero : Thème du moment ----- */
.hero-theme {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

.hero-theme__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	width: min(100%, 440px);
	padding: var(--sp-10) var(--sp-10);
	border-radius: var(--radius-xl);
	background: linear-gradient(135deg, var(--theme-grad-from), var(--theme-grad-to));
	color: #fff;
	text-decoration: none;
	box-shadow: 0 30px 50px rgba(61, 48, 39, 0.18);
	overflow: hidden;
	isolation: isolate;
	transition: transform .25s ease, box-shadow .25s ease;
	animation: hero-bob 6s ease-in-out infinite;
}

.hero-theme__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.35), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(0, 0, 0, 0.12), transparent 50%);
	z-index: -1;
}

.hero-theme__link:hover,
.hero-theme__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 40px 60px rgba(61, 48, 39, 0.22);
}

.hero-theme__eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.85);
	color: var(--theme-accent);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero-theme__icon {
	font-size: clamp(4rem, 8vw, 6rem);
	line-height: 1;
	margin-top: var(--sp-2);
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}

.hero-theme__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, var(--fs-4xl));
	font-weight: 800;
	line-height: 1.1;
}

.hero-theme__tagline {
	font-size: var(--fs-base);
	line-height: 1.4;
	opacity: 0.95;
}

.hero-theme__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.95);
	color: var(--theme-accent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	transition: transform .2s ease;
}

.hero-theme__link:hover .hero-theme__cta,
.hero-theme__link:focus-visible .hero-theme__cta {
	transform: translateX(4px);
}

.hero-theme__sparkle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	pointer-events: none;
	animation: hero-theme-sparkle 4s ease-in-out infinite;
}

.hero-theme__sparkle--1 {
	width: 14px;
	height: 14px;
	top: 12%;
	right: 8%;
	animation-delay: 0s;
}

.hero-theme__sparkle--2 {
	width: 8px;
	height: 8px;
	top: 70%;
	right: 18%;
	animation-delay: 1s;
}

.hero-theme__sparkle--3 {
	width: 10px;
	height: 10px;
	bottom: 10%;
	left: 12%;
	animation-delay: 2s;
}

@keyframes hero-theme-sparkle {
	0%, 100% { transform: scale(0.6); opacity: 0.3; }
	50%      { transform: scale(1); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-theme__link,
	.hero-theme__sparkle {
		animation: none;
	}
}

/* ----- Categories grid (home) ----- */
.categories {
	padding-block: var(--sp-16);
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	margin: 0 var(--container-pad);
	box-shadow: var(--shadow-soft);
}

.categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-4);
}

.categories__empty { text-align: center; color: var(--color-text-soft); }

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-6) var(--sp-4);
	background: var(--cat-bg, var(--color-cream-soft));
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
	transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
	position: relative;
}

.category-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--cat-accent, var(--color-orange));
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	opacity: 0.6;
}

.category-card:hover {
	transform: translateY(-4px);
	border-color: var(--cat-accent, var(--color-orange));
	box-shadow: 0 16px 32px rgba(61, 48, 39, 0.12);
}

.category-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-paper);
	color: var(--cat-accent, var(--color-orange-deep));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2rem;
	box-shadow: var(--shadow-soft);
	transition: transform var(--t-base);
}

.category-card:hover .category-card__icon {
	transform: scale(1.1) rotate(-5deg);
}

.category-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lg);
}

.category-card__count {
	font-size: var(--fs-xs);
	opacity: 0.8;
}

/* Sous-catégories sur la page Catégories */
.categories__grid--page { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.category-card--page { align-items: flex-start; text-align: left; }

.category-card--page .category-card__icon { align-self: center; }
.category-card--page .category-card__name { align-self: center; }
.category-card--page .category-card__count { align-self: center; }

.category-card__subs {
	width: 100%;
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px dashed currentColor;
	opacity: 0.6;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-2);
	font-size: var(--fs-xs);
	font-family: var(--font-display);
	list-style: none;
}

.category-card__subs li::before { content: "·  "; }

/* ----- Featured coloriages ----- */
.featured-coloriages {
	padding-block: var(--sp-16);
}

.featured-coloriages__cta {
	text-align: center;
	margin-top: var(--sp-10);
}

/* ----- About snippet (home) ----- */
.about-snippet {
	padding-block: var(--sp-16);
	background: linear-gradient(135deg, var(--color-cream-soft) 0%, var(--color-orange-soft) 100%);
}

.about-snippet__inner {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--sp-10);
	align-items: center;
}

.about-snippet__title { font-size: var(--fs-3xl); }

.about-snippet__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-4);
}

.about-snippet__card {
	background: var(--color-paper);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	text-align: center;
}

.about-snippet__card h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-2);
}

.about-snippet__card p {
	margin: 0;
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
}

.about-snippet__card-icon {
	display: inline-block;
	font-size: 2rem;
	margin-bottom: var(--sp-2);
}

/* ----- Latest posts (home) ----- */
.latest-posts {
	padding-block: var(--sp-16);
}

.latest-posts__cta {
	text-align: center;
	margin-top: var(--sp-8);
}

/* ----- Archive coloriage / galerie ----- */
.search-results {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-10);
}

.archive-coloriage {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-10);
}

.coloriage-card.is-hidden {
	display: none;
}

/* ----- Single coloriage ----- */
/* Préfixe "div" : évite la collision avec body.single-coloriage (classe WP). */
div.single-coloriage {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-10);
}

.single-coloriage__layout {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--sp-10);
	align-items: start;
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--sp-12);
}

.single-coloriage__figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-cream-soft);
	border: 4px solid var(--color-cream-dark);
	aspect-ratio: 3 / 4;
}

.single-coloriage__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--color-white);
}

.single-coloriage__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 6rem;
	background: linear-gradient(135deg, var(--color-cream-soft), var(--color-orange-soft));
}

.single-coloriage__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	position: sticky;
	top: 100px;
}

.coloriage__terms {
	display: inline-block;
	margin-bottom: var(--sp-2);
}

.coloriage__terms a {
	background: var(--color-orange-soft);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text);
	margin-right: var(--sp-1);
}

.single-coloriage__header .coloriage-card__badge--serie {
	position: static;
	max-width: 100%;
	display: flex;
	margin-bottom: var(--sp-2);
}

.single-coloriage__title {
	font-size: var(--fs-3xl);
	margin: 0;
}

.single-coloriage__lead {
	margin: var(--sp-3) 0 0;
	color: var(--color-text-soft);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
}

.single-coloriage__excerpt {
	color: var(--color-text-soft);
}

/* Info panel : format / orientation / niveau / âge / téléchargements */
.coloriage-info {
	margin: 0;
	padding: var(--sp-4);
	background: var(--color-cream-soft);
	border-radius: var(--radius-md);
	border: 1px dashed var(--color-line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.coloriage-info__row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-2) 0;
	border-bottom: 1px dashed var(--color-line);
}

.coloriage-info__row:last-child {
	border-bottom: 0;
}

.coloriage-info__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.coloriage-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-paper);
	color: var(--color-orange-deep);
	flex-shrink: 0;
}

.coloriage-info__icon svg {
	width: 16px;
	height: 16px;
}

.coloriage-info__value {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-base);
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-self: end;
	text-align: right;
	justify-content: flex-end;
}

.coloriage-info__value strong {
	font-family: var(--font-display);
	font-weight: 700;
}

.coloriage-info__meta {
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
}

/* Niveau badge (couleur selon niveau) */
.niveau-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--color-cream-dark);
	color: var(--color-text);
}

.niveau-badge--tres-facile { background: #B8E0B8; color: #2D5A2D; }
.niveau-badge--facile      { background: #D5EBC8; color: #3F6E33; }
.niveau-badge--moyen       { background: #FFE3A1; color: #7A5A12; }
.niveau-badge--difficile   { background: #FFC79A; color: #8A3F1B; }
.niveau-badge--expert      { background: #F4A261; color: #5A2412; }

/* Description complète sous le panneau info */
.single-coloriage__description {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--sp-12);
}

.single-coloriage__description-title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-2xl);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.single-coloriage__description-title::before {
	content: "";
	width: 36px;
	height: 4px;
	background: linear-gradient(90deg, var(--color-orange), var(--color-coral));
	border-radius: var(--radius-pill);
}

.single-coloriage__description-content {
	font-size: var(--fs-lg);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.single-coloriage__description-content > * {
	margin-bottom: var(--sp-4);
}

.single-coloriage__description-content > *:last-child {
	margin-bottom: 0;
}

/* Cartes "tips" sous la description */
.single-coloriage__tips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-4);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 2px dashed var(--color-line);
}

.single-coloriage__tip {
	background: var(--color-cream-soft);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	text-align: center;
}

.single-coloriage__tip-icon {
	display: inline-block;
	font-size: 2rem;
	margin-bottom: var(--sp-2);
}

.single-coloriage__tip h3 {
	font-size: var(--fs-base);
	margin: 0 0 var(--sp-2);
}

.single-coloriage__tip p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
}

.single-coloriage__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--color-cream-soft);
	border-radius: var(--radius-md);
}

.single-coloriage__actions .btn {
	width: 100%;
}

.single-coloriage__taxonomy-title,
.single-coloriage__share-title {
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-bottom: var(--sp-2);
}

.single-coloriage__taxonomy-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.related-coloriages {
	margin-bottom: var(--sp-12);
}

.related-coloriages__title {
	text-align: center;
	margin-bottom: var(--sp-6);
}

/* ----- Single post ----- */
/* Préfixe "div" : évite la collision avec body.single-post (classe WP). */
div.single-post {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-10);
}

.single-post__article {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-card);
}

.single-post__header { margin-bottom: var(--sp-6); }

.single-post__meta {
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	margin-bottom: var(--sp-3);
}

.single-post__sep { color: var(--color-text-mute); }

.single-post__title {
	font-size: clamp(2rem, 4vw, var(--fs-3xl));
	margin: 0;
}

.single-post__thumbnail {
	margin: 0 0 var(--sp-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-post__thumbnail img {
	width: 100%;
	height: auto;
}

.single-post__content {
	font-size: var(--fs-lg);
	line-height: var(--lh-loose);
}

.single-post__content > * { margin-bottom: var(--sp-4); }

.single-post__footer {
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 2px dashed var(--color-line);
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	align-items: center;
}

.single-post__tags-label {
	font-family: var(--font-display);
	font-weight: 700;
	margin-right: var(--sp-2);
}

.single-post__footer a {
	display: inline-block;
	background: var(--color-cream-soft);
	color: var(--color-text);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-family: var(--font-display);
	font-weight: 600;
	margin-right: var(--sp-1);
}

.single-post__footer a:hover {
	background: var(--color-orange);
	color: var(--color-paper);
}

.post-navigation {
	margin: var(--sp-8) 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: block;
	background: var(--color-paper);
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	color: var(--color-text);
	box-shadow: var(--shadow-soft);
	transition: transform var(--t-fast);
}

.post-navigation a:hover { transform: translateY(-2px); }

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

.post-navigation__label {
	display: block;
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
	margin-bottom: var(--sp-1);
}

.post-navigation__title {
	font-family: var(--font-display);
	font-weight: 700;
}

/* ----- Page blog (template) ----- */
.page-blog {
	padding-top: var(--sp-4);
	padding-bottom: 0;
}

/* ----- Page apropos ----- */
.page-apropos {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-12);
}

.page-apropos__intro {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--sp-10);
	align-items: center;
	background: var(--color-paper);
	padding: var(--sp-8);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--sp-12);
}

.page-apropos__thumbnail {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.page-apropos__thumbnail img { width: 100%; height: auto; }

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

.page-apropos__content {
	font-size: var(--fs-lg);
	color: var(--color-text);
}

.page-apropos__content p { margin-bottom: var(--sp-4); }

.page-apropos__values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-6);
	margin-bottom: var(--sp-12);
}

.page-apropos__value {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	text-align: center;
	box-shadow: var(--shadow-soft);
}

.page-apropos__value-icon {
	display: inline-block;
	font-size: 3rem;
	margin-bottom: var(--sp-3);
}

.page-apropos__value h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-2);
}

.page-apropos__value p {
	color: var(--color-text-soft);
	margin: 0;
}

.page-apropos__cta {
	text-align: center;
	background: linear-gradient(135deg, var(--color-orange-soft) 0%, var(--color-coral) 100%);
	color: var(--color-paper);
	padding: var(--sp-12) var(--sp-6);
	border-radius: var(--radius-xl);
}

.page-apropos__cta h2 { color: var(--color-paper); margin-bottom: var(--sp-3); }

.page-apropos__cta p { font-size: var(--fs-lg); margin-bottom: var(--sp-6); }

.page-apropos__cta-buttons {
	display: flex;
	gap: var(--sp-3);
	justify-content: center;
	flex-wrap: wrap;
}

.page-apropos__cta .btn--ghost {
	color: var(--color-paper);
	border-color: var(--color-paper);
}

.page-apropos__cta .btn--ghost:hover {
	background: var(--color-paper);
	color: var(--color-orange-deep);
}

/* ----- Page contact ----- */
.page-contact {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-12);
}

.page-contact__layout {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--sp-10);
	align-items: start;
}

.page-contact__info {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-soft);
	position: sticky;
	top: 100px;
}

.page-contact__info-title {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-5);
}

.page-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
}

.page-contact__list li {
	display: flex;
	gap: var(--sp-3);
}

.page-contact__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.page-contact__list strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	margin-bottom: 2px;
}

.page-contact__list a, .page-contact__list span {
	color: var(--color-text-soft);
}

.page-contact__social h3 {
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-3);
}

.page-contact__form-wrap {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-card);
}

.contact-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.contact-form__row--actions { flex-direction: row; align-items: center; gap: var(--sp-3); }

.contact-form__notice {
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
	margin-top: var(--sp-3);
}

/* ----- 404 ----- */
.error-404 {
	padding-block: var(--sp-16);
	display: flex;
	justify-content: center;
}

.error-404__inner {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-12) var(--sp-8);
	text-align: center;
	box-shadow: var(--shadow-card);
	max-width: 600px;
}

.error-404__emoji {
	display: inline-block;
	font-size: 5rem;
	margin-bottom: var(--sp-4);
	animation: hero-bob 4s ease-in-out infinite;
}

.error-404__title {
	margin-bottom: var(--sp-4);
}

.error-404__text {
	color: var(--color-text-soft);
	margin-bottom: var(--sp-6);
}

.error-404__actions {
	display: flex;
	gap: var(--sp-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--sp-6);
}

.error-404__search {
	max-width: 400px;
	margin-inline: auto;
}

/* ----- Page default ----- */
.page-default {
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-10);
}

.page-default__article {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	padding: var(--sp-8);
	box-shadow: var(--shadow-card);
}

.page-default__thumbnail {
	margin: 0 0 var(--sp-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.page-default__content {
	font-size: var(--fs-lg);
}

.page-default__content > * { margin-bottom: var(--sp-4); }

/* ----- No results / Search ----- */
.no-results {
	background: var(--color-paper);
	padding: var(--sp-10);
	border-radius: var(--radius-xl);
	text-align: center;
	box-shadow: var(--shadow-soft);
}

.no-results__title { margin-bottom: var(--sp-4); }

.search-result {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
	box-shadow: var(--shadow-soft);
	margin-bottom: var(--sp-4);
}

.search-result__type {
	display: inline-block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--color-orange-soft);
	color: var(--color-text);
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--sp-2);
	font-family: var(--font-display);
	font-weight: 600;
}

.search-result__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-2);
}

.search-result__title a { color: var(--color-text); }

.search-result__excerpt {
	color: var(--color-text-soft);
	margin-bottom: var(--sp-2);
}

.search-result__link {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-orange-deep);
}

/* ----- Entry content (rendu de the_content) ----- */
.entry-content > * + * {
	margin-top: var(--sp-4);
}

.entry-content h2 { margin-top: var(--sp-8); }
.entry-content h3 { margin-top: var(--sp-6); }

.entry-content ul,
.entry-content ol {
	padding-left: var(--sp-6);
	list-style: disc;
}

.entry-content ol { list-style: decimal; }

.entry-content ul li,
.entry-content ol li {
	margin-bottom: var(--sp-2);
}

.entry-content figure {
	margin: var(--sp-6) 0;
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content a {
	border-bottom: 2px solid var(--color-orange-soft);
	transition: background var(--t-fast), color var(--t-fast);
}

.entry-content a:hover {
	background: var(--color-orange-soft);
}

/* ==========================================================================
   Sections par catégorie (galerie + taxonomie parente)
   ========================================================================== */
.cat-section {
	margin-bottom: var(--sp-12);
}

.cat-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	background: var(--cat-bg, var(--color-cream-soft));
	border-left: 5px solid var(--cat-accent, var(--color-orange));
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--sp-3) var(--sp-5);
	margin-bottom: var(--sp-5);
}

.cat-section__title-block {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.cat-section__emoji {
	font-size: 1.6rem;
	line-height: 1;
}

.cat-section__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-2xl);
	color: var(--color-text);
}

.cat-section__count,
.cat-section__sub-count {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-xs);
}

.cat-section__count {
	background: rgba(255, 255, 255, 0.5);
	color: var(--cat-accent, var(--color-orange-deep));
}

.cat-section__sub-count {
	background: var(--color-cream-soft);
	color: var(--color-text-soft);
}

.cat-section__see-all {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--cat-accent, var(--color-orange-deep));
	text-decoration: none;
}

.cat-section__see-all:hover { text-decoration: underline; }

.cat-section__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0 var(--sp-2) var(--sp-5);
}

.cat-section__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
	background: var(--color-paper);
	border: 1.5px solid var(--cat-bg, var(--color-line));
	text-decoration: none;
	transition: background var(--t-fast), color var(--t-fast);
}

.cat-section__pill:hover {
	background: var(--cat-bg, var(--color-cream-soft));
	color: var(--color-text);
}

/* Carousel rows */
.cat-row {
	margin-bottom: var(--sp-8);
}

.cat-row__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}

.cat-row__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-text);
	display: inline-flex;
	gap: var(--sp-2);
	align-items: center;
}

.cat-row__see-all {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--cat-accent, var(--color-orange-deep));
	text-decoration: none;
}

.cat-row__scroller {
	position: relative;
}

.cat-row__track {
	display: flex;
	gap: var(--sp-4);
	overflow-x: auto;
	padding: var(--sp-1) var(--sp-1) var(--sp-4);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--color-line) transparent;
	scroll-behavior: smooth;
}

.cat-row__track > * {
	scroll-snap-align: start;
	flex: 0 0 180px;
	max-width: 180px;
}

.cat-row__more {
	flex: 0 0 180px;
	max-width: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	background: var(--color-paper);
	border: 2px dashed var(--cat-accent, var(--color-line));
	border-radius: var(--radius-lg);
	color: var(--cat-accent, var(--color-orange-deep));
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--t-fast);
	min-height: 200px;
}

.cat-row__more:hover { background: var(--cat-bg, var(--color-cream-soft)); }
.cat-row__more span:first-child { font-size: 2rem; }

.cat-row__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-paper);
	color: var(--color-text);
	border: 1.5px solid var(--color-line);
	font-family: var(--font-display);
	font-size: 1.4rem;
	line-height: 1;
	box-shadow: var(--shadow-soft);
	cursor: pointer;
	z-index: 2;
	transition: background var(--t-fast), color var(--t-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cat-row__nav:hover {
	background: var(--cat-accent, var(--color-orange));
	color: var(--color-paper);
}

.cat-row__nav--prev { left: 4px; }
.cat-row__nav--next { right: 4px; }

@media (max-width: 479px) {
	.cat-row__nav { display: none; }
}

/* Filtered header (vue grille filtrée) */
.filtered-header {
	margin-bottom: var(--sp-6);
}
.filtered-header__title {
	font-size: var(--fs-2xl);
	margin: 0;
}

/* Page header avec emoji (sur taxonomie) */
.page-header__emoji {
	display: inline-block;
	margin-right: var(--sp-2);
	font-size: 0.9em;
	vertical-align: -0.05em;
}