/* =========================================================================
   Cursed Curiosity — styles du thème
   Mobile-first. Les tokens (couleurs, typos, espacements) viennent de
   theme.json ; ce fichier n'utilise que leurs variables CSS.
   Animations : transform / opacity uniquement + prefers-reduced-motion.
   Breakpoint desktop : 782px (convention WordPress).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Les sections gèrent leur propre respiration : pas d'écart automatique
   entre les blocs de premier niveau du template (header / main / footer). */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

::selection {
	background: var(--wp--preset--color--prune);
	color: var(--wp--preset--color--parchemin);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--or);
	outline-offset: 2px;
}

/* Liens : héritent de la couleur du contexte (sections claires ou sombres),
   soulignés discrètement, or au survol. */
a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--wp--custom--transition, 0.25s ease);
}

a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--or);
}

/* Classe utilitaire d'accessibilité (formulaire de recherche…). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   2. Registres typographiques utilitaires
   ---------------------------------------------------------------------- */

/* Eyebrow : EB Garamond italique — « — la missive — », « — catalogue — »… */
.cc-eyebrow {
	font-family: var(--wp--preset--font-family--garamond);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.03em;
	opacity: 0.85;
}

/* Séparateur ✦ : filets fins de part et d'autre (or, jamais en aplat). */
.cc-sep {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	color: var(--wp--preset--color--or);
	font-size: 0.9rem;
	line-height: 1;
}

.cc-sep::before,
.cc-sep::after {
	content: "";
	height: 1px;
	width: min(72px, 18vw);
	background: currentColor;
	opacity: 0.6;
}

/* Icônes SVG inline. */
.cc-icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* -------------------------------------------------------------------------
   3. Header
   ---------------------------------------------------------------------- */

.cc-header__bar {
	flex-wrap: nowrap;
}

.cc-header__brand {
	gap: 0.8rem;
}

.cc-header__logo img {
	display: block;
	max-height: 52px;
	width: auto;
}

/* Wordmark — Cinzel affiche les minuscules en petites capitales. */
.cc-wordmark {
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--cinzel);
	line-height: 1.1;
	text-decoration: none;
}

.cc-wordmark:hover {
	color: inherit;
}

.cc-wordmark__main {
	font-size: 1.45rem;
	letter-spacing: 0.18em;
}

.cc-wordmark__sub {
	font-size: 0.68rem;
	letter-spacing: 0.34em;
	color: var(--wp--preset--color--or);
}

.cc-header__end {
	gap: 1.25rem;
}

/* Menu principal : desktop uniquement (la barre basse prend le relais). */
@media (max-width: 781px) {
	.cc-header__nav {
		display: none;
	}
}

.cc-header__nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.cc-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--or);
}

/* Icônes d'action (recherche, compte, panier) — cibles tactiles ≥ 44px. */
.cc-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.cc-actions__btn {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: color var(--wp--custom--transition, 0.25s ease);
}

.cc-actions__btn:hover {
	color: var(--wp--preset--color--or);
}

/* Panier du header : desktop uniquement. */
@media (max-width: 781px) {
	.cc-actions__cart {
		display: none;
	}
}

/* Recherche <details> : panneau déroulant sous le header, sans JS. */
.cc-search {
	position: relative;
}

.cc-search summary {
	list-style: none;
}

.cc-search summary::-webkit-details-marker {
	display: none;
}

.cc-search__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 110;
	width: min(320px, 86vw);
	padding: 0.75rem;
	background: var(--wp--preset--color--bois-sombre);
	border: 1px solid var(--wp--preset--color--or);
}

.cc-search__panel form {
	display: flex;
	gap: 0.5rem;
}

.cc-search__panel input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	background: transparent;
	border: 1px solid rgba(238, 230, 213, 0.35);
	border-radius: 0;
	color: var(--wp--preset--color--parchemin);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.85rem;
}

.cc-search__panel input[type="search"]::placeholder {
	color: rgba(238, 230, 213, 0.55);
}

.cc-search__submit {
	padding: 0.55rem 0.9rem;
	background: var(--wp--preset--color--prune);
	border: none;
	border-radius: 0;
	color: var(--wp--preset--color--parchemin);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition, 0.25s ease);
}

.cc-search__submit:hover {
	background: var(--wp--preset--color--prune-clair);
}

/* -------------------------------------------------------------------------
   4. Badge compteur du panier (rouge brique, discret)
   ---------------------------------------------------------------------- */

.cc-actions__cart,
.cc-bottom-nav__icon {
	position: relative;
}

.cc-cart-count {
	position: absolute;
	top: 2px;
	right: -2px;
	display: grid;
	place-items: center;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.2rem;
	background: var(--wp--preset--color--rouge-brique);
	border-radius: 999px;
	color: #fff;
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.62rem;
	line-height: 1;
}

.cc-bottom-nav__icon .cc-cart-count {
	top: -6px;
	right: -10px;
}

.cc-cart-count.is-empty {
	display: none;
}

/* -------------------------------------------------------------------------
   5. Barre de navigation basse — MOBILE uniquement
   ---------------------------------------------------------------------- */

.cc-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	background: var(--wp--preset--color--parchemin);
	border-top: 1px solid rgba(28, 16, 8, 0.2);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.cc-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 56px;
	padding: 0.5rem 0.25rem;
	color: var(--wp--preset--color--bois-sombre);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: capitalize;
	transition: opacity var(--wp--custom--transition, 0.25s ease);
}

.cc-bottom-nav__item:hover {
	color: var(--wp--preset--color--bois-sombre);
	opacity: 0.75;
}

/* Onglet actif : fond sombre, comme sur les maquettes. */
.cc-bottom-nav__item.is-active {
	background: var(--wp--preset--color--bois-sombre);
	color: var(--wp--preset--color--parchemin);
}

.cc-bottom-nav__item.is-active:hover {
	color: var(--wp--preset--color--parchemin);
	opacity: 1;
}

/* La barre occupe le bas de l'écran : on réserve la place sous le contenu. */
@media (max-width: 781px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 782px) {
	.cc-bottom-nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   6. Panneau de menu (mobile) — :target sans JS, .is-open avec JS
   ---------------------------------------------------------------------- */

.cc-menu-panel {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 1.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity var(--wp--custom--transition, 0.25s ease),
		transform var(--wp--custom--transition, 0.25s ease),
		visibility 0s 0.25s;
}

.cc-menu-panel:target,
.cc-menu-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--wp--custom--transition, 0.25s ease),
		transform var(--wp--custom--transition, 0.25s ease);
}

/* Pas d'ascenseur derrière le panneau (posé par le JS). */
.cc-menu-lock {
	overflow: hidden;
}

.cc-menu-panel__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	color: var(--wp--preset--color--or);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-decoration: none;
}

.cc-menu-panel__nav {
	gap: 1.1rem;
}

.cc-menu-panel__nav .wp-block-navigation-item {
	justify-content: center;
}

.cc-menu-panel__nav .wp-block-navigation-item__content {
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-decoration: none;
}

/* Le panneau ne sert que sur mobile (le menu vit dans le header en desktop). */
@media (min-width: 782px) {
	.cc-menu-panel:target,
	.cc-menu-panel.is-open {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   7. Footer
   ---------------------------------------------------------------------- */

.cc-footer {
	border-top: 1px solid rgba(196, 168, 130, 0.25);
}

.cc-footer__motif {
	color: var(--wp--preset--color--or);
	font-size: 1.1rem;
}

.cc-footer__brand {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: 1.3rem;
	letter-spacing: 0.16em;
	line-height: 1.25;
}

.cc-footer__grid {
	row-gap: 2rem;
}

.cc-footer__menus {
	gap: 3rem;
}

.cc-footer__nav .wp-block-navigation-item__content {
	text-decoration: none;
	opacity: 0.85;
}

.cc-footer__nav .wp-block-navigation-item__content:hover {
	opacity: 1;
}

.cc-social {
	display: flex;
	gap: 0.9rem;
	margin-top: 0.75rem;
}

.cc-social__link img {
	display: block;
	width: 32px;
	height: 32px;
	transition: opacity var(--wp--custom--transition, 0.25s ease);
}

.cc-social__link:hover img {
	opacity: 0.75;
}

.cc-footer__legal {
	font-family: var(--wp--preset--font-family--elite);
	letter-spacing: 0.06em;
	opacity: 0.65;
}

/* -------------------------------------------------------------------------
   8. Boutons — micro-transitions (le reste vient de theme.json)
   ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--transition, 0.25s ease),
		color var(--wp--custom--transition, 0.25s ease),
		transform 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   9. Utilitaires de section
   ---------------------------------------------------------------------- */

/* Étiquette encadrée (« SALON PRIVÉ », « SCULPTURE »…). */
.cc-tag {
	display: inline-block;
	width: fit-content;
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	padding: 0.25rem 0.6rem;
}

/* Rangée d'en-tête de section : titre + lien « tout voir → ». */
.cc-section-head {
	row-gap: 0.25rem;
}

.cc-section-head h1,
.cc-section-head h2 {
	margin: 0;
}

.cc-more-link a {
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--or);
	padding-bottom: 2px;
}

/* Texte « machine à écrire » (sous-titres, méta). */
.cc-ui-text {
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cc-book-handle {
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

.cc-muted {
	font-style: italic;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   10. Cartes Polaroid (flip 3D — transform/opacity uniquement)
   Desktop : flip au survol. Clavier : :focus-within. Mobile : .is-flipped
   posée au tap par le JS. Sans JS, la face avant reste lisible et cliquable.
   ---------------------------------------------------------------------- */

.cc-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.cc-cards--book {
	grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 782px) {
	.cc-cards {
		gap: 1.75rem;
	}

	.cc-cards--specimens,
	.cc-cards--related {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cc-polaroid {
	position: relative;
	perspective: 1000px;
}

.cc-polaroid__inner {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

/* Déclencheurs du flip (jamais sur les cadres statiques : galerie, portraits). */
@media (hover: hover) {
	.cc-polaroid:not(.cc-polaroid--static):hover .cc-polaroid__inner {
		transform: rotateY(180deg);
	}
}

.cc-polaroid:not(.cc-polaroid--static):focus-within .cc-polaroid__inner,
.cc-polaroid.is-flipped .cc-polaroid__inner {
	transform: rotateY(180deg);
}

.cc-polaroid__face {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.cc-polaroid__front {
	position: relative;
	background: #f5efe2;
	border: 1px solid rgba(28, 16, 8, 0.18);
	padding: 0.6rem 0.6rem 0.7rem;
}

.cc-polaroid__back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem;
	text-align: center;
	background: var(--wp--preset--color--parchemin);
	border: 1px solid rgba(28, 16, 8, 0.3);
	overflow: hidden;
}

/* Cadre Polaroid statique (galerie produit, portrait du guide). */
.cc-polaroid--static {
	background: #f5efe2;
	border: 1px solid rgba(28, 16, 8, 0.18);
	padding: 0.6rem;
	margin: 0;
}

/* Photo + coins photo (or) en dégradés — un seul élément, aucune image. */
.cc-polaroid__photo {
	position: relative;
	display: block;
	margin: 0;
}

.cc-polaroid__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.cc-polaroid__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(196, 168, 130, 0.9) 0 8px, transparent 8px) left top,
		linear-gradient(225deg, rgba(196, 168, 130, 0.9) 0 8px, transparent 8px) right top,
		linear-gradient(45deg, rgba(196, 168, 130, 0.9) 0 8px, transparent 8px) left bottom,
		linear-gradient(315deg, rgba(196, 168, 130, 0.9) 0 8px, transparent 8px) right bottom;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

.cc-polaroid .wp-block-image {
	margin: 0;
}

/* Légende : nom (manuscrit) + prix (machine à écrire). */
.cc-polaroid__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.55rem;
}

.cc-polaroid__title {
	font-family: var(--wp--preset--font-family--garamond);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
}

.cc-polaroid__price {
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.78rem;
	white-space: nowrap;
}

.cc-polaroid__caption-line {
	font-family: var(--wp--preset--font-family--garamond);
	font-style: italic;
	font-size: 0.85rem;
	margin: 0.5rem 0 0;
}

.cc-polaroid__net {
	display: inline-block;
	width: fit-content;
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	padding: 0.15rem 0.45rem;
	margin: 0 0 0.5rem;
}

.cc-polaroid__desc {
	font-size: 0.9rem;
	line-height: 1.45;
	margin: 0;
}

.cc-polaroid__more-wrap {
	margin: 0;
}

.cc-polaroid__more {
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--or);
	padding-bottom: 2px;
}

/* -------------------------------------------------------------------------
   11. Étagère de livres — formations (survol/tap : le livre sort du rang)
   ---------------------------------------------------------------------- */

.cc-shelf {
	max-width: 660px;
	margin: 1.5rem auto 2rem;
}

.cc-shelf__row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 2.75rem 0 0;
}

.cc-book {
	position: relative;
}

.cc-book__spine {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 180px;
	background: linear-gradient(#f1e9d6, #ddd2b8);
	border: 1px solid rgba(28, 16, 8, 0.5);
	color: var(--wp--preset--color--bois-sombre);
	text-decoration: none;
	transition: transform 0.3s ease;
	box-shadow: inset 0 0 0 3px rgba(196, 168, 130, 0.35);
}

/* Un peu d'organique : hauteurs et largeurs qui varient. */
.cc-book:nth-child(2n) .cc-book__spine {
	height: 190px;
}

.cc-book:nth-child(3n) .cc-book__spine {
	width: 56px;
	height: 172px;
}

.cc-book__title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	max-height: 158px;
	overflow: hidden;
	white-space: nowrap;
}

@media (hover: hover) {
	.cc-book:hover .cc-book__spine {
		transform: translateY(-14px) rotate(-3deg);
	}
}

.cc-book:focus-within .cc-book__spine,
.cc-book.is-open .cc-book__spine {
	transform: translateY(-14px) rotate(-3deg);
}

/* Étiquette révélée au-dessus du livre. */
.cc-book__label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translate(-50%, 8px);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	background: var(--wp--preset--color--parchemin);
	color: var(--wp--preset--color--bois-sombre);
	border: 1px solid rgba(28, 16, 8, 0.4);
	padding: 0.35rem 0.6rem;
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 5;
}

@media (hover: hover) {
	.cc-book:hover .cc-book__label {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.cc-book:focus-within .cc-book__label,
.cc-book.is-open .cc-book__label {
	opacity: 1;
	transform: translate(-50%, 0);
}

.cc-shelf__board {
	height: 6px;
	background: linear-gradient(rgba(196, 168, 130, 0.7), rgba(196, 168, 130, 0.2));
}

/* -------------------------------------------------------------------------
   12. Newsletter (« la missive ») — formulaire non câblé (Brevo plus tard)
   ---------------------------------------------------------------------- */

.cc-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 540px;
	margin: 1.5rem auto 0;
}

.cc-newsletter input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 0.85rem 1rem;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(238, 230, 213, 0.35);
	border-radius: 0;
	color: var(--wp--preset--color--parchemin);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.85rem;
}

.cc-newsletter input[type="email"]::placeholder {
	color: rgba(238, 230, 213, 0.5);
}

.cc-newsletter button {
	padding: 0.85rem 1.4rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--parchemin);
	border-radius: 0;
	color: var(--wp--preset--color--parchemin);
	font-family: var(--wp--preset--font-family--elite);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition, 0.25s ease), color var(--wp--custom--transition, 0.25s ease);
}

.cc-newsletter button:hover {
	background: var(--wp--preset--color--parchemin);
	color: var(--wp--preset--color--brun-site);
}

/* -------------------------------------------------------------------------
   13. Boutons « outline » (contour, pour les fonds sombres et parchemin)
   ---------------------------------------------------------------------- */

.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

.is-style-outline .wp-block-button__link:hover {
	background: rgba(196, 168, 130, 0.15);
	color: inherit;
}

/* -------------------------------------------------------------------------
   14. prefers-reduced-motion : on coupe tout mouvement
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}