/* ==========================================================================
   Croc'Color – components.css
   Boutons, cartes, formulaires, pagination, badges, etc.
   ========================================================================== */

/* Boutons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-base);
	line-height: 1;
	text-decoration: none;
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
	white-space: nowrap;
	border: 2px solid transparent;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
	color: var(--color-paper);
	box-shadow: 0 6px 16px rgba(231, 111, 81, 0.3);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	color: var(--color-paper);
	box-shadow: 0 10px 24px rgba(231, 111, 81, 0.4);
}

.btn--secondary {
	background: var(--color-orange-soft);
	color: var(--color-text);
}

.btn--secondary:hover { background: var(--color-orange); color: var(--color-paper); }

.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
}

.btn--ghost:hover {
	background: var(--color-text);
	color: var(--color-paper);
}

.btn--small {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
}

.btn--large {
	padding: var(--sp-4) var(--sp-8);
	font-size: var(--fs-lg);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* Coloriage card */
.coloriage-card {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--t-base), box-shadow var(--t-base);
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
}

.coloriage-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-orange-soft);
}

.coloriage-card__link {
	display: block;
	color: inherit;
	height: 100%;
}

.coloriage-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-cream-soft);
}

.coloriage-card__media .coloriage-card__link {
	position: absolute;
	inset: 0;
}

.coloriage-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}

.coloriage-card:hover .coloriage-card__image {
	transform: scale(1.05);
}

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

.coloriage-card__badge {
	position: absolute;
	top: var(--sp-3);
	background: var(--color-paper);
	color: var(--color-text);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
	z-index: 2;
	max-width: calc(50% - var(--sp-4));
}

.coloriage-card__badge--serie {
	left: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--color-text);
	color: var(--color-paper);
	text-decoration: none;
	transition: transform var(--t-fast), background var(--t-fast);
}

.coloriage-card__badge--serie:hover,
.coloriage-card__badge--serie:focus-visible {
	transform: translateY(-1px);
	background: var(--color-orange-deep);
	color: var(--color-paper);
}

.coloriage-card__badge--serie .coloriage-card__badge-pin {
	font-size: 0.95em;
}

.coloriage-card__badge--niveau {
	right: var(--sp-3);
}

.coloriage-card__badge--niveau-tres-facile { background: #E6F4DC; color: #4F7A3F; }
.coloriage-card__badge--niveau-facile      { background: #D5EBC8; color: #3F6E33; }
.coloriage-card__badge--niveau-moyen       { background: #FFE3A1; color: #7A5A12; }
.coloriage-card__badge--niveau-difficile   { background: #FFC79A; color: #8A3F1B; }
.coloriage-card__badge--niveau-expert      { background: #F5C6C6; color: #7A1F1F; }

.coloriage-card__body {
	padding: var(--sp-4) var(--sp-5) var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}

.coloriage-card__title {
	font-size: var(--fs-lg);
	margin: 0;
}

.coloriage-card__title a {
	color: var(--color-text);
	transition: color var(--t-fast);
}

.coloriage-card__title a:hover { color: var(--color-orange-deep); }

.coloriage-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
}

.coloriage-card__terms a {
	font-size: var(--fs-xs);
	background: var(--color-cream-soft);
	color: var(--color-text-soft);
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	transition: background var(--t-fast), color var(--t-fast);
}

.coloriage-card__terms a:hover {
	background: var(--color-orange-soft);
	color: var(--color-text);
}

/* Actions : overlay en bas de l'image — masqué sur mobile */
.coloriage-card__actions {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: none;
	gap: var(--sp-2);
	justify-content: center;
	padding: var(--sp-10) var(--sp-3) var(--sp-3);
	background: linear-gradient(transparent, rgba(30, 20, 10, 0.65));
}

/* Bouton télécharger : fond blanc pour lisibilité sur l'overlay sombre */
.coloriage-card__actions .btn--ghost {
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-text);
	border-color: transparent;
}

.coloriage-card__actions .btn--ghost:hover {
	background: #fff;
	color: var(--color-orange-deep);
}

/* Desktop (pointeur) : affiché, masqué par défaut, visible au survol */
@media (hover: hover) and (min-width: 900px) {
	.coloriage-card__actions {
		display: flex;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--t-base), transform var(--t-base);
		pointer-events: none;
	}

	.coloriage-card:hover .coloriage-card__actions {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Corps de carte plus compact sans les boutons */
	.coloriage-card__body {
		padding: var(--sp-3) var(--sp-3) var(--sp-3);
	}
}

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

.coloriage-grid--full { gap: var(--sp-6) var(--sp-5); }

.coloriage-grid__empty {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--sp-10);
	text-align: center;
	color: var(--color-text-soft);
	box-shadow: var(--shadow-soft);
}

/* Post card / post item */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-6);
}

.post-card {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	display: flex;
	flex-direction: column;
	transition: transform var(--t-base), box-shadow var(--t-base);
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-cream-soft);
}

.post-card__image,
.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 3rem;
}

.post-card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}

.post-card__meta,
.post-item__meta {
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.post-card__sep, .post-item__sep { color: var(--color-text-mute); }

.post-card__title {
	font-size: var(--fs-xl);
	margin: 0;
}

.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-orange-deep); }

.post-card__excerpt {
	color: var(--color-text-soft);
	margin: 0;
	flex: 1;
}

.post-card__link {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-orange-deep);
	margin-top: var(--sp-2);
}

/* Post list (blog) */
.post-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.post-item {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: var(--sp-6);
	background: var(--color-paper);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.post-item__media {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-cream-soft);
}

.post-item__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow);
}

.post-item:hover .post-item__image { transform: scale(1.04); }

.post-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.post-item__title {
	font-size: var(--fs-2xl);
	margin: 0;
}

.post-item__title a { color: var(--color-text); }
.post-item__title a:hover { color: var(--color-orange-deep); }

.post-item__excerpt {
	color: var(--color-text-soft);
}

.post-item__excerpt p { margin: 0; }

.post-item__link {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-orange-deep);
	margin-top: auto;
	align-self: flex-start;
}

/* Tags / pills */
.tag-pill {
	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;
	transition: background var(--t-fast), color var(--t-fast);
}

.tag-pill:hover {
	background: var(--color-orange);
	color: var(--color-paper);
}

/* Pagination */
.pagination {
	margin-top: var(--sp-10);
	display: flex;
	justify-content: center;
}

.pagination__list {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.pagination__list a,
.pagination__list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-pill);
	background: var(--color-paper);
	color: var(--color-text);
	font-family: var(--font-display);
	font-weight: 600;
	transition: background var(--t-fast), color var(--t-fast);
	box-shadow: var(--shadow-soft);
}

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

.pagination__list .current {
	background: var(--color-orange-deep);
	color: var(--color-paper);
}

/* Filter bar (legacy, conservé pour compat) */
.filter-bar {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--sp-8);
	padding: var(--sp-4);
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
}

.filter-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text);
	background: transparent;
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast);
	text-decoration: none;
}

.filter-bar__btn:hover { background: var(--color-cream-soft); }
.filter-bar__btn.is-active { background: var(--color-orange); color: var(--color-paper); }
.filter-bar__count {
	font-size: var(--fs-xs);
	background: rgba(255, 255, 255, 0.4);
	padding: 1px 7px;
	border-radius: var(--radius-pill);
}
.filter-bar__btn:not(.is-active) .filter-bar__count {
	background: var(--color-cream-soft);
	color: var(--color-text-soft);
}

/* ==========================================================================
   Filter bar coloriages (parents + sous-pills + niveau)
   ========================================================================== */
.filter-coloriages {
	background: var(--color-paper);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-10);
}

.filter-tabs {
	display: flex;
	gap: var(--sp-1);
	overflow-x: auto;
	border-bottom: 2px solid var(--color-line-soft);
	padding-bottom: var(--sp-2);
	scrollbar-width: thin;
}

.filter-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-base);
	color: var(--color-text-soft);
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--t-fast), color var(--t-fast);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.filter-tabs__item:hover { color: var(--color-text); background: var(--color-cream-soft); }

.filter-tabs__item.is-active {
	color: var(--filter-accent, var(--color-orange-deep));
	border-bottom-color: var(--filter-accent, var(--color-orange-deep));
	font-weight: 800;
}

.filter-tabs__emoji { font-size: 1.1em; }

.filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: var(--sp-3) 0 var(--sp-2);
	border-bottom: 1px dashed var(--color-line);
}

.filter-pills__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 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(--filter-accent, var(--color-line));
	text-decoration: none;
	transition: background var(--t-fast), color var(--t-fast);
}

.filter-pills__item:hover {
	background: var(--filter-accent, var(--color-orange-soft));
	color: var(--color-paper);
}

.filter-pills__item.is-active {
	background: var(--filter-accent, var(--color-orange));
	color: var(--color-paper);
	border-color: var(--filter-accent, var(--color-orange));
}

.filter-pills__count {
	font-size: var(--fs-xs);
	background: rgba(0, 0, 0, 0.08);
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	color: inherit;
}

.filter-pills__item.is-active .filter-pills__count {
	background: rgba(255, 255, 255, 0.25);
}

.filter-controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	padding: var(--sp-3) 0 0;
	align-items: center;
}

.filter-controls__group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.filter-controls__group--right {
	margin-left: auto;
}

.filter-controls__label {
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
	font-weight: 600;
}

.filter-controls__chip {
	background: var(--color-cream-soft);
	color: var(--color-text-soft);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	padding: 4px 14px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: background var(--t-fast), color var(--t-fast);
}

.filter-controls__chip:hover { background: var(--color-orange-soft); color: var(--color-text); }
.filter-controls__chip.is-active { background: var(--color-orange); color: var(--color-paper); }
.filter-controls__chip--tres-facile { background: #E6F4DC; color: #4F7A3F; }
.filter-controls__chip--facile      { background: #D5EBC8; color: #3F6E33; }
.filter-controls__chip--moyen       { background: #FFE3A1; color: #7A5A12; }
.filter-controls__chip--difficile   { background: #FFC79A; color: #8A3F1B; }
.filter-controls__chip--expert      { background: #F5C6C6; color: #7A1F1F; }

.filter-controls__chip--tres-facile.is-active { background: #6BB54A; color: #fff; }
.filter-controls__chip--facile.is-active      { background: #4A9A4A; color: #fff; }
.filter-controls__chip--moyen.is-active       { background: #C8902A; color: #fff; }
.filter-controls__chip--difficile.is-active   { background: #C84040; color: #fff; }
.filter-controls__chip--expert.is-active      { background: #8A1E1E; color: #fff; }

.filter-controls__select {
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-md);
	padding: 4px 10px;
	font-size: var(--fs-sm);
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-paper);
	cursor: pointer;
}

/* Formulaires */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	background: var(--color-paper);
	border: 2px solid var(--color-line);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-base);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea { resize: vertical; min-height: 140px; }

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-orange);
	box-shadow: 0 0 0 3px var(--color-orange-soft);
	outline: none;
}

label {
	display: inline-block;
	margin-bottom: var(--sp-2);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text);
}

/* Contact Form 7 */
.wpcf7-form p {
	margin-bottom: var(--sp-4);
}

.wpcf7-form-control-wrap { display: block; }

.wpcf7-submit,
.wpcf7-form input[type="submit"] {
	background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
	color: var(--color-paper);
	border: 0;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(231, 111, 81, 0.3);
	transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(231, 111, 81, 0.4); }

.wpcf7 .wpcf7-not-valid {
	border-color: var(--color-error);
}

.wpcf7-not-valid-tip {
	color: var(--color-error);
	font-size: var(--fs-sm);
	margin-top: 4px;
}

.wpcf7-response-output {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border: 2px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-cream-soft);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-success);
	background: rgba(111, 174, 122, 0.1);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--color-error);
	background: rgba(210, 101, 101, 0.08);
}

/* Search form */
.search-form {
	display: flex;
	gap: var(--sp-2);
}

.search-form__field { flex: 1; }

/* Social links */
.social-links {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.social-links__item {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-paper);
	color: var(--color-text);
	box-shadow: var(--shadow-soft);
	transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.social-links__item:hover {
	background: var(--color-orange);
	color: var(--color-paper);
	transform: translateY(-2px) rotate(-3deg);
}

/* Share buttons (single coloriage) */
.share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.share-buttons__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-cream-soft);
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
	flex-shrink: 0;
}

.share-buttons__btn:hover {
	transform: translateY(-2px);
}

.share-buttons__btn--facebook { background: #1877f2; color: #fff; }
.share-buttons__btn--facebook:hover { background: #0e5dc0; }

.share-buttons__btn--pinterest { background: #e60023; color: #fff; }
.share-buttons__btn--pinterest:hover { background: #b5001b; }

.share-buttons__btn--x { background: #000; color: #fff; }
.share-buttons__btn--x:hover { background: #333; }

.share-buttons__btn--copy { background: var(--color-cream-soft); color: var(--color-text); }
.share-buttons__btn--copy:hover { background: var(--color-orange); color: var(--color-paper); }
.share-buttons__btn--copy.is-copied { background: #22c55e; color: #fff; }

.share-buttons__icon-check { display: none; }
.share-buttons__btn--copy.is-copied .share-buttons__icon-copy { display: none; }
.share-buttons__btn--copy.is-copied .share-buttons__icon-check { display: inline; }

/* Comments */
.comments-area {
	margin-top: var(--sp-10);
	padding-top: var(--sp-8);
	border-top: 2px dashed var(--color-line);
}

.comments-title { margin-bottom: var(--sp-6); }

.comment-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.comment-body {
	background: var(--color-paper);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.comment-meta {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	margin-bottom: var(--sp-3);
}

.comment-author .fn {
	font-family: var(--font-display);
	font-weight: 700;
}

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

/* Notice / Info boxes */
.page-contact__notice {
	background: var(--color-cream-soft);
	border-left: 4px solid var(--color-orange);
	border-radius: var(--radius-md);
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-4);
}

/* ----- Emplacements publicitaires ----- */
.croccolor-ad {
	display: block;
	max-width: var(--container-max, 1140px);
	margin: var(--sp-8) auto;
	padding: var(--sp-3) var(--container-pad, 1.5rem);
	text-align: center;
}

.croccolor-ad__label {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
	margin-bottom: var(--sp-2);
}

.croccolor-ad__inner {
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.croccolor-ad__inner > * { max-width: 100%; }

/* Variantes resserrées dans les blocs déjà contenus */
.single-coloriage .croccolor-ad,
.archive-coloriage .croccolor-ad {
	margin-inline: 0;
	padding-inline: 0;
}