/*
Theme Name: Josée Quellier
Description: Theme WordPress sur-mesure pour le site de ceramique de Josee Quellier.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: josee-quellier
*/

:root {

	/* Couleurs */
	--color-marron-fonce: #401e05;
	--color-marron-texte: #523b2d;
	--color-marron-section: #76502f;
	--color-gris: #8b8b8b;
	--color-fond-creme: #eeeae4;
	--color-blanc: #fff;
	--color-blanc-casse: #f7f7f7;

	--font-heading: "Playfair", serif;
	--font-body: "Inter", sans-serif;

	/* Echelle de tailles (valeurs exactes de la maquette Figma) */
	--font-size-display: 90px;
	--font-size-xl: 35px;
	--font-size-lg: 26px;
	--font-size-md: 20px;
	--font-size-label: 18px;
	--font-size-base: 16px;
	--font-size-sm: 14px;
	--font-size-xs: 13px;

	/* Interlignages (valeurs litterales de la maquette, pas des ratios) */
	--line-height-display: 80px;
	--line-height-tight: 35px;
	--line-height-loose: 30px;
	--line-height-relaxed: 24px;

	/* Espacement des lettres */
	--tracking-nav: 0.8px;
	--tracking-label: 0.04em;
	--tracking-button: 0.08em;

	/* Espacements de section */
	--spacing-contact-cta: 96px;

	/* Panneau deroulant mobile (menu burger, filtres de creations) */
	--dropdown-shadow: 0 12px 24px rgb(0 0 0 / 10%);
	--dropdown-divider: rgb(64 30 5 / 10%);
	--dropdown-active-tint: rgb(64 30 5 / 6%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-fond-creme);
	color: var(--color-marron-fonce);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.5;
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.btn {
	display: inline-block;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: 400;
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--tracking-button);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.btn-outline-light {
	color: var(--color-blanc);
	border: 1px solid rgb(255 255 255 / 60%);
}

.btn-outline-light:hover {
	background-color: rgb(255 255 255 / 12%);
	border-color: var(--color-blanc);
}

.btn-filled {
	color: var(--color-blanc);
	background-color: var(--color-marron-fonce);
	border: none;
}

.btn-filled:hover {
	opacity: 0.85;
}

.section-title {
	position: relative;
	margin: 0 0 32px;
	padding-bottom: 16px;
	color: var(--color-marron-fonce);
	font-size: var(--font-size-xl);
	font-weight: 500;
	line-height: var(--line-height-tight);
	text-align: center;
}

.section-title::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 70px;
	height: 1px;
	content: "";
	background-color: var(--color-marron-texte);
	transform: translateX(-50%);
}

.section-title-light {
	color: var(--color-blanc);
	text-align: left;
}

.section-title-light::after {
	left: 0;
	background-color: rgb(255 255 255 / 60%);
	transform: none;
}

/* Header */

.site-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 24px 80px;
	background-color: var(--color-fond-creme);
	transition: background-color 0.3s ease;
}

.site-branding {
	justify-self: start;
}

.site-branding .custom-logo {
	display: block;
	height: 80px;
	width: auto;
}

/* On the Home header (transparent-over-hero), show the light logo variant instead of
   the default dark one — swap back once scrolled (see .is-scrolled, toggled by
   assets/js/interactions.js). Everywhere else, only the dark custom_logo exists. */
.custom-logo-link-white {
	display: none;
}

.home .site-header .custom-logo-link:not(.custom-logo-link-white) {
	display: none;
}

.home .site-header .custom-logo-link-white {
	display: block;
}

.home .site-header.is-scrolled .custom-logo-link:not(.custom-logo-link-white),
.home.has-menu-open .site-header .custom-logo-link:not(.custom-logo-link-white) {
	display: block;
}

.home .site-header.is-scrolled .custom-logo-link-white,
.home.has-menu-open .site-header .custom-logo-link-white {
	display: none;
}

.site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.site-title a {
	text-decoration: none;
}

.main-navigation {
	grid-column: 2;
}

.main-navigation ul {
	display: flex;
	gap: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	position: relative;
	font-family: var(--font-heading);
	font-size: var(--font-size-md);
	font-weight: 600;
	line-height: normal;
	letter-spacing: var(--tracking-nav);
	text-decoration: none;
	transition: color 0.3s ease, opacity 0.25s ease;
}

.main-navigation a:hover {
	opacity: 0.7;
}

.main-navigation .current-menu-item > a::after {
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 1px;
	content: "";
	background-color: var(--color-marron-texte);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.menu-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-marron-fonce);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle-bar + .menu-toggle-bar {
	margin-top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
	transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(4) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Home: header overlays the hero, transparent until the user scrolls */

.home .site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	background-color: transparent;
}

.home .site-header .site-title a,
.home .site-header .main-navigation a {
	color: var(--color-blanc);
	transition: color 0.3s ease, opacity 0.25s ease;
}

.home .site-header .menu-toggle-bar {
	background-color: var(--color-blanc);
}

.home .site-header.is-scrolled,
.home.has-menu-open .site-header {
	background-color: var(--color-fond-creme);
}

.home .site-header.is-scrolled .site-title a,
.home .site-header.is-scrolled .main-navigation a,
.home.has-menu-open .site-header .site-title a,
.home.has-menu-open .site-header .main-navigation a {
	color: var(--color-marron-fonce);
}

.home .site-header.is-scrolled .menu-toggle-bar,
.home.has-menu-open .site-header .menu-toggle-bar {
	background-color: var(--color-marron-fonce);
}

/* Scroll reveal */

.will-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.will-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Hero */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 632px;
	padding: 80px;
	background-color: var(--color-marron-section);
}

/* Kept out of the stacking order comparison with .section-bg below: any
   direct child of .hero/.page-banner other than the background layers
   needs its own stacking context, otherwise a position:absolute background
   layer paints above it regardless of DOM order (CSS2.1 painting order:
   positioned descendants always beat non-positioned ones). */
.hero > *:not(.section-bg),
.page-banner > *:not(.section-bg) {
	position: relative;
}

.section-bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
}

.section-bg-mobile {
	display: none;
}

/* Home: the hero stays pinned to the viewport while the rest of the content
   scrolls up and over it, stopping under the (also fixed) header. */
.home .hero {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: 100vh;
	height: 100dvh; /* stylelint-disable-line declaration-block-no-duplicate-properties -- dvh fallback: ignored by browsers that don't support it, avoids the vh/mobile-toolbar jump. */
	min-height: 0;
}

.home-content {
	position: relative;
	z-index: 2;
	margin-top: 100vh;
	margin-top: 100dvh; /* stylelint-disable-line declaration-block-no-duplicate-properties -- must match .home .hero's height exactly, see above. */
	background-color: var(--color-fond-creme);
}

.hero-content {
	width: 33.333vw;
}

.hero-title {
	margin-bottom: 24px;
	color: var(--color-blanc);
	font-size: var(--font-size-display);
	font-weight: 500;
	line-height: var(--line-height-display);
	text-shadow: 0 0 20px rgb(0 0 0 / 25%);
}

.hero-subtitle {
	margin: 0 0 32px;
	color: var(--color-blanc);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: var(--line-height-loose);
	text-shadow: 0 0 25px rgb(0 0 0 / 30%);
}

/* WYSIWYG output wraps its text in its own <p> — the outer element above
   already carries the intended spacing, so neutralize the inner one. */
.hero-subtitle p {
	margin: 0;
}

/* Creations preview */

.creations-preview {
	padding: 96px 80px;
}

.creations-preview-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
}

.creation-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.creation-card-image-wrap {
	display: block;
	width: 100%;
	overflow: hidden;
}

.creation-card-image {
	width: 100%;
	aspect-ratio: 9 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.creation-card:hover .creation-card-image {
	transform: scale(1.05);
}

.creation-card-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-marron-fonce);
}

.creation-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	color: var(--color-marron-fonce);
}

.icon-arrow-right {
	width: 16px;
	height: 16px;
}

/* Parcours preview */

.parcours-preview {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background-color: var(--color-marron-section);
}

.parcours-preview-content {
	position: relative;
	flex: 1 1 460px;
	max-width: 620px;
	padding: 96px 80px;
	overflow: hidden;
}

.parcours-preview-flower {
	position: absolute;
	right: -20px;
	bottom: -30px;
	width: 300px;
	height: auto;
	opacity: 0.1;
	pointer-events: none;
}

.parcours-preview-text {
	margin: 16px 0 32px;
	color: var(--color-blanc-casse);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
}

.parcours-preview-text p {
	margin: 0;
}

.parcours-preview-image {
	flex: 2 1 600px;
}

.parcours-preview-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	object-fit: cover;
}

/* Creations archive */

.creation-filters {
	display: flex;
	justify-content: center;
	gap: 40px;
	padding: 40px 80px;
}

.creation-filters-link {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-gris);
	text-decoration: none;
}

.creation-filters-link.is-active {
	color: var(--color-marron-fonce);
	border-bottom: 1px solid var(--color-marron-fonce);
}

/* Mobile-only replacement for .creation-filters, see the media query below. */
.creation-filters-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 20px;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-marron-fonce);
	background-color: rgb(242 239 234 / 50%);
	border: 1px solid rgb(213 195 195 / 80%);
	border-radius: 2px;
	cursor: pointer;
}

.creation-filters-toggle-icon {
	width: 12px;
	height: 12px;
	background-image: url(assets/images/arrow-right.svg);
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(90deg);
	transition: transform 0.25s ease;
}

.creation-filters-toggle[aria-expanded="true"] .creation-filters-toggle-icon {
	transform: rotate(-90deg);
}

.creation-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px 20px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
}

.creation-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
}

.creation-item-image-wrap {
	position: relative;
	overflow: hidden;
}

.creation-item-image {
	width: 100%;
	aspect-ratio: 9 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.creation-item:hover .creation-item-image {
	transform: scale(1.05);
}

.creation-item-badge {
	padding: 4px 13px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-marron-fonce);
	background-color: transparent;
	border: 1px solid var(--color-marron-texte);
	border-radius: 20px;
}

.creation-item-info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.creation-item-text {
	display: flex;
	flex-direction: column;
}

.creation-item-title {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-marron-fonce);
}

.creation-item-price {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 500;
	color: var(--color-gris);
}

/* Creation detail */

.creation-detail-back-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 80px 0;
}

.creation-detail-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-marron-fonce);
	font-family: var(--font-heading);
	font-size: var(--font-size-md);
	font-weight: 600;
	letter-spacing: var(--tracking-nav);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.creation-detail-back:hover {
	opacity: 0.7;
}

.creation-detail-back-icon {
	transform: scaleX(-1);
}

.creation-detail {
	display: grid;
	grid-template-columns: 630px 1fr;
	gap: 64px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 80px 64px;
}

.creation-detail-main-image {
	position: relative;
}

.creation-detail-main-image-tag {
	width: 100%;
	aspect-ratio: 9 / 10;
	object-fit: cover;
}

.creation-detail-thumbnails {
	display: flex;
	gap: 20px;
	margin-top: 16px;
}

.creation-detail-thumbnail {
	padding: 0;
	cursor: pointer;
	background: none;
	border: 3px solid transparent;
}

.creation-detail-thumbnail img {
	display: block;
	width: 142px;
	aspect-ratio: 9 / 10;
	object-fit: cover;
}

.creation-detail-thumbnail.is-active {
	border-color: var(--color-marron-fonce);
}

.creation-detail-info {
	max-width: 482px;
}

.creation-detail-info .creation-item-badge {
	margin-bottom: 30px;
}

.creation-detail-title {
	margin-bottom: 8px;
	font-size: 50px;
	line-height: 1.1;
}

.creation-detail-description {
	color: var(--color-marron-fonce);
	font-weight: 400;
	line-height: 26px;
}

.creation-detail-price {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 500;
	color: var(--color-gris);
}

.creations-related {
	padding: 0 80px;
}

.creations-related .creation-grid {
	padding-right: 0;
	padding-left: 0;
}

.creations-related-title {
	position: relative;
	margin: 0 0 32px;
	padding-bottom: 20px;
	font-size: var(--font-size-xl);
	line-height: var(--line-height-loose);
}

.contact-column-title::after,
.section-heading::after,
.creations-related-title::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 76px;
	height: 1px;
	content: "";
	background-color: var(--color-marron-texte);
}

/* Contact preview */

.contact-preview {
	padding: var(--spacing-contact-cta) 80px;
	text-align: center;
}

.contact-preview-text {
	margin: 0 auto 32px;
	color: var(--color-marron-fonce);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
}

.contact-preview-text p {
	margin: 0;
}

/* Page banner (Contact, Parcours, Creations, Mentions legales) */

.page-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 525px;
	padding: 0 80px;
	background-color: var(--color-marron-section);
}

.page-banner-title {
	color: var(--color-blanc);
	font-size: 70px;
	font-weight: 500;
	line-height: var(--line-height-display);
	text-shadow: 0 0 20px rgb(0 0 0 / 25%);
}

.page-banner-subtitle {
	max-width: 500px;
	margin: 16px 0 0;
	color: var(--color-blanc);
	font-size: 20px;
	font-weight: 400;
	text-shadow: 0 0 25px rgb(0 0 0 / 30%);
}

.page-banner-subtitle p {
	margin: 0;
}

.page-banner-plain {
	align-items: center;
	min-height: 180px;
	padding: 0 80px;
}

.page-banner-plain .page-banner-title {
	text-shadow: none;
}

.page-banner-legal {
	justify-content: center;
	background-color: var(--color-fond-creme);
}

.page-banner-legal .page-banner-title {
	color: var(--color-marron-fonce);
	font-size: 50px;
	line-height: var(--line-height-display);
}

/* Legal content (Mentions légales) */

.legal-content {
	max-width: 846px;
	margin: 0 auto;
	padding: 0 0 64px;
	color: var(--color-marron-fonce);
}

.legal-content h2 {
	margin-top: 48px;
	margin-bottom: 16px;
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 600;
	line-height: 30px;
}

.legal-content h2:first-child {
	margin-top: 0;
}

.legal-content p {
	margin: 0 0 16px;
	font-size: var(--font-size-base);
	line-height: 26px;
}

.legal-content a {
	color: var(--color-marron-fonce);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Contact page */

.contact-page {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 80px;
}

.contact-column-title {
	position: relative;
	margin: 0 0 36px;
	padding-bottom: 16px;
	font-size: 30px;
}

.contact-intro {
	margin-bottom: 24px;
	color: var(--color-marron-fonce);
	line-height: 26px;
}

.contact-intro p {
	margin: 0;
}

.contact-form-notice {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 4px;
}

.contact-form-notice-success {
	color: #2a5d34;
	background-color: #e3f2e5;
}

.contact-form-notice-error {
	color: #7a2727;
	background-color: #fbe6e6;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 413px;
}

.contact-form-field input,
.contact-form-field textarea {
	width: 100%;
	padding: 13px 20px;
	font-family: var(--font-body);
	font-size: 15px;
	background-color: rgb(242 239 234 / 50%);
	border: 1px solid rgb(213 195 195 / 80%);
	border-radius: 2px;
}

.contact-form-field textarea {
	resize: vertical;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
	color: rgb(82 59 45 / 60%);
}

.contact-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
}

.contact-form .btn {
	align-self: flex-start;
	border: none;
}

.contact-info-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-info-list li {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	color: var(--color-marron-fonce);
	line-height: 26px;
}

.contact-icon-circle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: #e5dcd1;
	border-radius: 50%;
}

.contact-icon-phone {
	width: 60px;
	height: 60px;
	transform: scaleX(-1);
}

.contact-icon-letter {
	width: 30px;
	height: 30px;
}

.contact-icon-maps {
	width: 50px;
	height: 50px;
}

.contact-info-list strong {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
}

.contact-info-list a {
	text-decoration: none;
}

.contact-info-flower {
	position: absolute;
	top: 347px;
	right: calc(50% - 50vw);
	width: 216px;
	height: auto;
	pointer-events: none;
}

/* Parcours page */

.parcours-blocks {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 80px 0;
}

.parcours-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 96px;
}

.parcours-block:last-child {
	margin-bottom: 0;
}

.parcours-block-reverse .parcours-block-text {
	order: 2;
}

.section-heading {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 16px;
	font-size: 30px;
	line-height: var(--line-height-loose);
}

.parcours-block-copy {
	color: var(--color-marron-fonce);
	line-height: 26px;
}

/* Les descriptions sous un titre restent en graisse normale même si le texte
   enrichi (ACF wysiwyg) contient du gras — l'accentuation visuelle n'est pas
   voulue ici, contrairement aux titres. */
.hero-subtitle strong,
.page-banner-subtitle strong,
.parcours-preview-text strong,
.contact-intro strong,
.parcours-block-copy strong,
.creation-detail-description strong {
	font-weight: 400;
}

.parcours-block-copy p:first-child {
	margin-top: 0;
}

.parcours-block-image img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 4px;
	object-fit: cover;
}

/* Footer */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 80px;
	background-color: rgb(194 183 163 / 30%);
}

.footer-branding .custom-logo {
	display: block;
	height: 60px;
	width: auto;
}

.footer-social {
	display: flex;
	align-items: center;
	gap: 20px;
}

.footer-social-label {
	font-family: var(--font-heading);
	font-size: var(--font-size-label);
	font-weight: 600;
	color: var(--color-marron-fonce);
	letter-spacing: var(--tracking-label);
}

.footer-social-icon {
	display: block;
	transition: opacity 0.25s ease;
}

.footer-social-icon:hover {
	opacity: 0.7;
}

.footer-social-icon img {
	display: block;
	width: 32px;
	height: 32px;
}

/* Home: the footer sits after .home-content, outside its stacking context, so it needs
   its own opaque layer to stay above the fixed hero (see .home .hero). The gradient
   trick keeps the same tinted look while making it fully opaque. */
.home .site-footer {
	position: relative;
	z-index: 2;
	background-image: linear-gradient(rgb(194 183 163 / 30%), rgb(194 183 163 / 30%));
	background-color: var(--color-fond-creme);
}

.footer-navigation ul {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	font-family: var(--font-heading);
	font-size: var(--font-size-label);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	color: var(--color-marron-fonce);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.footer-navigation a:hover {
	opacity: 0.7;
}

@media (width <= 900px) {

	.site-header,
	.hero,
	.creations-preview,
	.contact-preview,
	.site-footer,
	.creation-grid,
	.creation-detail-back-wrap,
	.creation-detail,
	.creations-related,
	.page-banner,
	.contact-page,
	.parcours-blocks,
	.legal-content {
		padding-right: 24px;
		padding-left: 24px;
	}

	.creation-filters-wrap {
		position: relative;
		padding: 40px 24px 0;
		margin-bottom: 40px;
	}

	.creation-filters-toggle {
		display: flex;
	}

	.creation-filters {
		position: absolute;
		top: 100%;
		right: 24px;
		left: 24px;
		z-index: 5;
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 0;
		background-color: var(--color-fond-creme);
		box-shadow: var(--dropdown-shadow);
	}

	.creation-filters.is-open {
		display: flex;
	}

	.creation-filters-link {
		padding: 16px 20px;
		color: var(--color-marron-fonce);
		border-top: 1px solid var(--dropdown-divider);
	}

	.creation-filters-link.is-active {
		background-color: var(--dropdown-active-tint);
		border-bottom: none;
	}

	.site-header {
		position: relative;
		grid-template-columns: 1fr auto;
	}

	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 5;
		grid-column: 1 / -1;
		display: none;
		background-color: var(--color-fond-creme);
		box-shadow: var(--dropdown-shadow);
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation li {
		border-top: 1px solid var(--dropdown-divider);
	}

	.main-navigation a {
		display: block;
		padding: 20px 24px;
		color: var(--color-marron-fonce);
	}

	.main-navigation .current-menu-item > a {
		background-color: var(--dropdown-active-tint);
	}

	.main-navigation .current-menu-item > a::after {
		display: none;
	}

	.home .site-header .main-navigation a {
		color: var(--color-marron-fonce);
	}

	body.has-menu-open {
		overflow: hidden;
	}

	.parcours-preview-content {
		padding: 48px 24px;
	}

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

	.creation-detail,
	.contact-page,
	.parcours-block {
		grid-template-columns: 1fr;
	}

	.parcours-block-reverse .parcours-block-text {
		order: 0;
	}

	/* At 4 thumbnails (main + 3 secondary), the row is wider than the mobile
	   content column — scroll it horizontally instead of overflowing the page. */
	.creation-detail-thumbnails {
		overflow-x: auto;
	}

	.creation-detail-thumbnail {
		flex-shrink: 0;
	}

	/* padding-top en dvh (et non px) pour garder la même proportion qu'à la
	   maquette (156px sur les 844px d'un iPhone 13/14) sur un écran plus bas
	   (iPhone SE...), où un décalage fixe rapprocherait trop le bouton de la
	   photo — voir docs/solutions/. */
	.hero {
		padding: 18.5dvh 24px 0;
		align-items: flex-start;
	}

	.hero-content {
		width: 100%;
	}

	.section-bg-desktop {
		display: none;
	}

	.section-bg-mobile {
		display: block;
	}

	.hero-title {
		font-size: 40px;
		line-height: 1.15;
	}

	.creations-preview {
		padding: 64px 24px;
	}

	:root {
		--spacing-contact-cta: 56px;
	}

	.site-footer {
		justify-content: center;
		padding: 40px 24px;
		text-align: center;
	}

	.footer-social {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 20px;
	}

	.footer-social-label {
		flex-basis: 100%;
	}

	.contact-info-flower {
		position: static;
		display: block;
		width: 180px;
		margin: 24px -24px 0 auto;
	}
}

@media (width <= 520px) {

	.creations-preview-grid,
	.creation-grid {
		grid-template-columns: 1fr;
	}
}