/*!
Theme Name: Chateau de Sérame
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chateau_de_serame
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Chateau_de_Serame is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */


:root {
	--color-text: #000000;
	--color-text-light: #ffffff;
	--color-background: #ffffff;
	--font-urbanist: 'Urbanist', sans-serif;
	--font-pangaia: 'PP Pangaia', sans-serif;
	/* Custom Font Fallback */
	--font-underground: 'P22 Underground', sans-serif;
	/* Custom Font Fallback */
	--border-light: 1px solid #000000;
	--border-heavy: 3px solid #000000;
	scroll-behavior: smooth;
}


.vin-methode-nature {
	color: rgb(0, 97, 150, 1) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	margin-top: 0 !important;
}

.sans-sulfites {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	margin-top: 0 !important;
	color: #800000 !important;
}

body {
	margin: 0;
	--font-urbanist: 'Urbanist', sans-serif;
	--font-pangaia: 'PP Pangaia', sans-serif;
	font-family: var(--font-urbanist);
	background-color: var(--color-background);
	color: var(--color-text);
	overflow-x: hidden;
}

a {
	color: black !important;
}

a:link {
	color: black !important;
}

a:visited {
	color: black !important;
}


button {
	color: black !important;
}

button:link {
	color: black !important;
}

button:visited {
	color: black !important;
}

span {
	color: black !important;
}

span:link {
	color: black !important;
}

span:visited {
	color: black !important;
}

.discover-link img {
	width: 23px;
	height: 23px;
	transition: transform 0.3s ease;
}

/* unvisited link  */
a:visited {
	color: #000;
}

/* visited link    */

.discover-link:hover img {
	transform: translateX(5px);
}

.subnav-title,
.subnav-title-bold,
.subnav-title-light {
	font-family: 'P22 Underground', sans-serif;
	color: 'black';
	font-size: 1.8vw;
	line-height: 1.2vw;
	margin-bottom: 50px;
}

.subnav-title a:link,
.subnav-title-bold a:link,
.subnav-title-light a:link {
	color: #000;
}

.subnav-title a:visited,
.subnav-title-bold a:visited,
.subnav-title-light a:visited {
	color: #000;
}

/* visited link    */
.subnav-title {
	font-weight: 300;
}

.subnav-title-bold {
	font-weight: 600;
}

.subnav-title-light {
	font-family: 'P22 Underground', sans-serif;
	font-size: 53px;
	font-weight: 300;
}

.subnav-subtitle,
.subnav-subtitle-bold {
	font-family: 'Urbanist', sans-serif;
	font-size: 1.6vw;
	line-height: 1.2;
}

.subnav-subtitle {
	font-weight: 300;
}

.subnav-subtitle-bold {
	font-weight: 500;
}

#marquee {
	position: relative;
	/* doit être positionné pour left/margin fonctionner */
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	/* pousse l'élément vers la gauche jusqu'au bord de la fenêtre */
	margin-right: -50vw;
	/* symétrique à droite */
	width: 100vw;
	/* largeur viewport */
	box-sizing: border-box;
	/* inclut les bordures dans la largeur */
	padding: 0;
	/* annule la padding héritée si besoin */
}

/* CSS for section section:marquee */
.marquee-section {
	padding: 8vh 0;
}

/* CSS for section section:marquee */
.marquee-section-wines {
	padding: 16vh 0;

	padding-bottom: 5vh !important;
}

.marquee-animate {
	animation: marquee linear infinite;
}

.marquee-container {
	width: 100vw;
	margin: 0 auto;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	overflow: hidden;
	position: relative;
	height: 10vh;
}

.marquee-text {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'P22 Underground', sans-serif;
	font-size: 2.5vw;
	font-weight: 200;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	animation: marquee 40s linear infinite;
}


.marquee-text-miror {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'P22 Underground', sans-serif;
	font-size: 2.5vw;
	font-weight: 200;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	animation: marquee-miror 40s linear infinite;
}

/* CSS for section section:marquee */
.marquee-section-separator {
	padding: 8vh 0;
}

.marquee-container-separator {
	position: relative;
	/* pour que l'élément texte en absolute soit relatif à ce conteneur */
	width: 100%;
	/* margin: 0; */
	height: 10vh;
	overflow: hidden;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	/* box-sizing: border-box; */
	margin-top: 5vh;
	margin-bottom: 5vh;
}


.marquee-container-borderless {
	position: relative;
	/* pour que l'élément texte en absolute soit relatif à ce conteneur */
	width: 100%;
	height: 10vh;
	overflow: hidden;
}


/* texte du marquee */
.marquee-text-separator {
	position: absolute;
	left: 0;
	/* commencer au bord du conteneur full-bleed */
	top: 50%;
	transform: translateY(-50%);
	font-family: 'P22 Underground', sans-serif;
	font-size: 2.5vw;
	font-weight: 200;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	animation: marquee 40s linear infinite;
}

/* texte du marquee */
.marquee-text-separator-miror {
	position: absolute;
	left: 0;
	/* commencer au bord du conteneur full-bleed */
	top: 50%;
	transform: translateY(-50%);
	font-family: 'P22 Underground', sans-serif;
	font-size: 2.5vw;
	font-weight: 200;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
	animation: marquee-miror 40s linear infinite;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes marquee-miror {
	from {
		transform: translate(-50%, -50%);
	}

	to {
		transform: translate(0, -50%);
	}
}

@media (max-width: 768px) {
	.marquee-section {
		padding: 0px 0px;
	}

	.marquee-text {
		font-size: 5vw;
	}

	.marquee-container {
		height: 10vh;
	}
}

@media (max-width: 768px) {
	.marquee-section-wines {
		padding-top: 15vh;
		padding-bottom: 5vh !important;
	}

	.marquee-text {
		font-size: 5vw;
	}

	.marquee-text-miror {
		font-size: 5vw;
	}

	.marquee-text-separator {
		font-size: 5vw;
	}

	.marquee-text-separator-miror {
		font-size: 5vw;
	}

	.marquee-container {
		height: 10vh;
	}
}


.container {
	width: 100%;
	/* max-width: 1920px; */
	margin: 0 auto;
	padding: 0 56px;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* Responsive adjustments */
@media (max-width: 1200px) {
	.container {
		padding: 0 30px;
	}
}

@media (max-width: 768px) {
	.container {
		padding: 0 0px;
	}

	.hero-divier {
		padding: 0 0px;
		animation: none;
	}

	.underline {
		animation: none;
	}
}

/* CSS for section section:header */
.site-header {
	padding-top: 2%;
	padding-bottom: 5%;
}

html {
	scroll-behavior: auto;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 96vw;
	left: 2vw;
	margin: 0 auto;
	padding: 0 20px;
}

.header-logo img {
	width: 15vw;
	height: auto;
}

.main-nav ul {
	display: flex;
	align-items: center;
}

.main-nav li {
	padding: 0 25px;
	border-right: 1px solid var(--color-text);
}

.main-nav li:first-child {
	border-left: 1px solid var(--color-text);
}

.main-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1vw;
}

.main-nav a:hover {
	text-shadow: 0px 0px 1px #000000;
}

.hero-arrow:hover {
	filter: drop-shadow(1px 1px 1px gray);
}

.nav-number {
	font-family: var(--font-pangaia);
	font-weight: 300;
	font-size: 0.8vw;
}

.nav-text {
	font-family: 'Urbanist', sans-serif;
	font-weight: 300 !important;
	font-size: 1.2vw;
	white-space: nowrap;
	text-transform: uppercase;
}

.nav-text-bold {
	font-weight: 700;
}

/* ✅ Lien actif = texte et numéro en gras */
.main-nav .current-menu-item .nav-text,
.main-nav .current-menu-item .nav-number,
.main-nav .current_page_item .nav-text,
.main-nav .current_page_item .nav-number {
	font-weight: 600 !important;
	/* gras */
}


.contact-mobile {
	display: none;
}

@media (max-width: 768px) {

	/* En mobile : cacher contact du header, montrer dans le menu burger */
	.header-actions .contact-link {
		display: none;
	}

	.contact-mobile {
		font-size: 5vw !important;
		align-items: center;
		display: block;
	}
}

.header-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--font-urbanist);
	font-weight: 400;
	font-size: 1.2vw;
}

.header-actions .divider {
	width: 3vw;
	height: 1px;
	background-color: var(--color-text);
}

/* --- Burger --- */
.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	z-index: 1002;
	/* au-dessus du menu */
}

.burger span {
	width: 25px;
	height: 3px;
	background: var(--color-text);
	transition: all 0.4s ease;
}

/* --- État actif (croix) --- */
.burger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
	opacity: 0;
}

.burger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

.nav-close {
	display: none;
}

@media (max-width: 768px) {
	.main-nav {
		/* état fermé par défaut */
		opacity: 0;
		pointer-events: none;
		/* empêche les clics */
		transition: opacity 0.3s ease;
	}

	.main-nav.open {
		opacity: 1;
		pointer-events: auto;
		/* active les clics */
	}

	.header-container {
		display: flex;
		justify-content: flex-end;
		/* menu burger à droite */
		align-items: center;
		position: relative;
		/* nécessaire pour positionnement absolu du logo */
		padding: 0 1rem;
		height: 100%;
	}

	/* Logo centré horizontalement */
	.header-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Header ~10% de l’écran */
	.site-header {
		height: 5vh;
		border-bottom: 1px solid black;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		height: 100%;
	}

	/* Menu burger plein écran sous le header */
	.main-nav {
		position: fixed;
		top: 15vh;
		/* commence juste sous le header */
		left: 0;
		width: 100vw;
		height: 80vh;
		/* reste de l’écran */
		background: #fff;
		display: flex;
		flex-direction: column;
		/* colonne : croix en haut, puis ul */
		align-items: center;
		/* centrer horizontalement */
		transform: translateY(-20px);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
		z-index: 999;
		padding-top: 1rem;
		/* espace top pour la croix */
	}

	/* Menu ouvert */
	.main-nav.open {
		transform: translateY(0);
		opacity: 1;
	}

	/* Bouton croix centré */
	.main-nav .nav-close {
		font-size: 7vw;
		cursor: pointer;
		display: none;
		/* caché par défaut */
		margin-top: 2rem;
		margin-bottom: 2rem;
		/* espace avant les liens */
		text-align: center;
		width: 100%;
		/* pour centrer le symbole */
	}

	/* Afficher croix quand menu ouvert */
	.main-nav.open .nav-close {
		display: block;
	}

	/* Grille 2 colonnes pour les liens */
	.main-nav ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		/* <-- important : auto, pas 1fr */
		width: 100%;
		margin: 0;
		padding: 0;
		justify-items: center;
		align-items: start;
		position: relative;
		gap: 0.25rem 0;
		/* optionnel : ajuster l'espacement */
		box-sizing: border-box;
	}

	.main-nav ul::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 85%;
		background-color: #000;
		pointer-events: none;
	}

	.main-nav li,
	.main-nav a {
		height: auto !important;
		min-height: 0;
		width: 100%;
		box-sizing: border-box;
		overflow: visible;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.nav-number {
		font-size: 3.5vw;
		margin-bottom: 0.3rem;
	}

	.nav-text {
		display: inline-block;
		/* important pour que max-width soit pris en compte */
		box-sizing: border-box;
		max-width: calc(50vw - 2rem);
		/* moitié d'écran moins marge pour la ligne centrale */
		width: 100%;
		/* permet de remplir la cellule mais ne dépassera pas max-width */
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
		text-align: center;
		line-height: 1.05;
	}

	.nav-text * {
		display: inline;
		/* garder inline mais laisser le parent gérer le wrapping */
		white-space: normal;
	}



	/* Burger */
	.burger {
		display: flex;
		flex-direction: column;
		cursor: pointer;
		z-index: 1001;
	}

	.header-actions {
		display: none;
	}

	/* animation fade + slide depuis le haut */
	@keyframes fadeSlideDown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.main-nav ul li {
		opacity: 0;
		/* caché par défaut */
	}

	.main-nav ul li:nth-child(9) {
		grid-column: 1 / span 2;
		/* occupe les 2 colonnes */
		justify-self: center;
		/* centre horizontalement */
		align-self: center;
		/* centre verticalement dans sa rangée */
	}

	/* Quand le menu est ouvert, on anime chaque li avec un delay */
	.main-nav.open ul li {
		animation: fadeSlideDown 0.5s forwards;
	}

	/* Délais en cascade */
	.main-nav.open ul li:nth-child(1) {
		animation-delay: 0.1s;
	}

	.main-nav.open ul li:nth-child(2) {
		animation-delay: 0.1s;
	}

	.main-nav.open ul li:nth-child(3) {
		animation-delay: 0.3s;
	}

	.main-nav.open ul li:nth-child(4) {
		animation-delay: 0.3s;
	}

	.main-nav.open ul li:nth-child(5) {
		animation-delay: 0.5s;
	}

	.main-nav.open ul li:nth-child(6) {
		animation-delay: 0.5s;
	}

	.main-nav.open ul li:nth-child(7) {
		animation-delay: 0.7s;
	}

	.main-nav.open ul li:nth-child(8) {
		animation-delay: 0.7s;
	}

}

/* optionnel : réduire un peu la taille si nécessaire */
@media (max-width: 480px) {
	.nav-number {
		font-size: 4.5vw;
	}

	.nav-text {
		font-size: 5.5vw;
		max-width: calc(50vw - 1.2rem);
	}
}


@media (max-width: 1600px) {
	.main-nav li {
		padding: 0 15px;
	}
}

@media (max-width: 1300px) {
	.main-nav {
		padding: 0 0px;
		/* display: none; */
		/* On smaller screens, this would be replaced by a hamburger menu */
	}

	.header-container {
		justify-content: space-between;
	}
}

@media (max-width: 768px) {
	.site-header {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.header-logo img {
		width: 40vw;
		height: auto;
	}

	.header-actions {
		font-size: 16px;
	}
}




/* CSS for section section:hero */
.hero {
	/* padding-bottom: 10vh; */
	padding-bottom: 0vh;
}

.hero-section {
	/* padding-bottom: 10vh; */
	padding-top: 5vh;
}

.hero-gallery {
	width: 100%;
	height: 75vh;
	white-space: nowrap;
	position: relative;
	-webkit-overflow-scrolling: touch;
}

.hero-arrow {
	position: absolute;
	left: 30vw;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: auto;
	z-index: 10;
	cursor: pointer;
}


@media (min-width: 769px) {
	.hero-images {
		display: flex;
		gap: 70px;
		justify-content: center;
		/* left: 40vw; */
		position: relative;
		/* animation-duration: 0.1s; */
		animation-name: slidein;
		animation-duration: 1.5s;
	}

	.hero-images img {
		width: 15vw;
		height: 65vh;
		z-index: 0;
		object-fit: cover;
		/* border: 1px solid var(--color-text); */
	}
}

.underline {
	position: relative;
	z-index: -1;
	width: 200vw;
	left: -100vw;
	bottom: 0vh;
	animation-name: slide-down;
	animation-duration: 1.7s;
	border-bottom: 1px solid var(--color-text);
}

.hero-title {
	/* text-shadow: 0px 3px 6px #000000; */
	position: relative;
	left: -20px;
	bottom: 60vh;
	margin: 0;
	z-index: 2 !important;
	font-family: var(--font-underground);
	font-weight: 500;
	font-size: 3.5rem;
	line-height: 1.2;
	color: black;
	/* text-shadow: 0px 3px 6px #000000; */
	z-index: 5;
}

.hero-secondary {
	/* position: absolute; */
	right: 0vw;
	margin: 0;
	bottom: 10vh;
	font-family: var(--font-underground);
	font-weight: 500;
	font-size: 64px;
	line-height: 1.2;
	color: black;
	/* text-shadow: 0px 1px 1px gray; */
	z-index: 5;
}

.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.carousel-prev,
.carousel-next {
	display: none;
}


@media (max-width: 768px) {

	.hero-section-paysage {
		padding-bottom: 20vw;
	}

	.font-display-1 {
		font-size: 6vw !important;
	}

	.hero-title-paysage {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
		width: 100vw !important;
		padding: 2vh;
		align-content: center !important;
		align-self: center !important;
		max-width: 80vw !important;
		margin-bottom: 0px !important;
	}

	.hero-divider-paysage {
		margin-bottom: 5vw !important;
	}

	.story-content {
		display: grid !important;
		/* grid-template-columns: repeat(2, 1fr); */
		gap: 10px 10px;
		width: 100%;
		margin-bottom: 20px;
	}

	.story-text h2 {
		display: flex;
		width: 90vw !important;
		text-align: left !important;
		align-items: center !important;
		margin-bottom: 5vh !important;
	}

	.story-text p {
		width: 90vw !important;
	}

	.story-image img {
		object-fit: cover;
		width: 100% !important;
	}


	.font-body-lg {
		font-family: var(--font-underground);
		font-size: 4.5vw !important;
	}

	.font-body-md {
		font-family: var(--font-underground);
		font-size: 4vw !important;
	}

	.font-body-sm {
		font-family: var(--font-underground);
		font-size: 3.5vw !important;
	}

	.font-heading-1 {
		font-size: 5vw !important;
	}

	.font-heading-2 {
		font-size: 5vw !important;
	}

	.cta-arrow {
		width: 4vw !important;
	}

	.cta-title {
		font-size: 6vw !important;
	}

	.font-display-2 {
		font-size: 5.5vw !important;
	}

	.grid-item h3 {
		font-size: 6vw !important;
	}

	.tab img {
		width: 45vw !important;
		display: block;
		margin: 0 auto;
		object-fit: contain;
	}

	.arrow-icon {
		width: 3.5vw;
	}
}

.terroir-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5vw 5vw;
	width: 100%;
	margin-bottom: 120px;
}

.page-wrapper {
	max-width: 100vw;
	margin: 0 auto;
	padding: 0 5vw;
	box-sizing: border-box;
}

.page-wrapper-visite {
	max-width: 90vw;
	margin: 0 auto;
	padding: 0 0vw;
	box-sizing: border-box;
}

.terroir-section .tab {
	width: 90vw !important;
	left: 0vw !important;
}

.cta-link {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 5vh !important;
}


.ab-logo-footer {
	width: 1.8vw;
	height: auto;
}


.hero-section-paysage {
	padding-bottom: 10vh;
}

.hero-title-paysage {
	max-width: 40vw;
	margin-bottom: 33px;
}

.hero-title-cgv {
	max-width: 2200px;
	margin-bottom: 33px;
}


.hero-divider-paysage {
	margin-bottom: 5vw;
}

.story-content {
	display: flex;
	gap: 5vw;
	width: 90vw;
	align-items: flex-start;
}

.story-content-miror {
	display: flex;
	padding-top: 10vh;
	gap: 5vw;
	align-items: flex-end;
}

.spacing {
	height: 10vh;
}

.story-image {
	flex-shrink: 0;
}

.story-image img {
	width: 40vw;
	height: 70vh;
	object-fit: cover;
}

.story-text {
	text-align: right;
	padding-top: 5vh;
}

.story-text-miror {
	text-align: left;
	padding-top: 5vh;
}

.story-text h2 {
	margin-bottom: 12vh;
}

.story-text-miror h2 {
	margin-bottom: 12vh;
}

.story-text-visite {
	text-align: right;
	padding-bottom: 0vh;
	position: relative;
	padding-right: 0vw;
}

.story-text-visite h2 {
	border-right: 1px solid black !important;
	padding-right: 2vw;
	padding-top: 6vh;
	padding-bottom: 4vh;
}

@media (max-width : 768px) {
	.story-text-visite {
		text-align: left;
		padding-bottom: 0vh;
		position: relative;
		padding-left: 0vw;
	}

	.story-text-visite h2 {
		border-right: none !important;
		border-left: 1px solid black !important;
		padding-left: 2vw;
		padding-top: 6vh;
		padding-bottom: 4vh;
	}
}

.story-text-visite-miror {
	text-align: left;
	padding-bottom: 0vh;
	position: relative;
	padding-left: 0vw;
}

.story-text-visite-miror h2 {
	border-left: 1px solid black !important;
	padding-left: 2vw;
	padding-top: 6vh;
	padding-bottom: 4vh;
}

.story-text-paysage {
	text-align: right;
	padding-bottom: 0vh;
	position: relative;
	padding-right: 5vw;
}

.story-text-paysage h2 {
	border-right: 1px solid black;
	padding-right: 2vw;
	padding-top: 6vh;
	padding-bottom: 4vh;
}

.page-wrapper {
	max-width: 100vw;
	margin: 0 auto;
	padding: 0 5vw;
	box-sizing: border-box;
}


@media (max-width: 1200px) {
	.story-content {
		display: block;
		flex-direction: column;
		align-items: center;
		/* gap: 5vw; */
		width: 90vw;
		/* align-items: flex-start; */
	}

	.story-text {
		padding-top: 1vh !important;
	}

	.hero-divider-paysage {
		margin-bottom: 5vh !important;
	}

	.story-text h2 {
		margin-bottom: 0vh;
	}

	.story-text-miror {
		text-align: left;
		padding-top: 1vh;
	}

	.story-text-miror h2 {
		margin-bottom: 0vh;
	}

	h2 {
		padding: 0px;
	}

	.spacing {
		display: none;
	}

	.story-text {
		text-align: left;
		padding-top: 0;
		max-width: 50vw;
	}
}

@media (max-width: 1200px) {
	.hero-gallery {
		height: 60vh;
		padding-top: 5vh;
	}

	.hero-images-wrapper {
		overflow: hidden;
		width: 100%;
		position: relative;
	}

	.hero-images {
		display: flex;
		gap: 10px;
		width: max-content;
		animation: scrollLeft 20s linear infinite;
	}

	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}


	.hero-images img {
		flex: 0 0 50vw;
		/* chaque image prend 50% de la largeur de l'écran */
		max-width: 50vw;
		height: 50vh;
		/* hauteur fixe */
		object-fit: cover;
	}

	@keyframes scrollLeft {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}
}


/* CSS for section section:ticker */
.ticker-section {
	width: 100%;
	overflow: hidden;
}

.ticker-image {
	width: 100%;
	height: 100px;
	object-fit: cover;
}

.impact-container {
	width: 100%;
}

.impact-section {
	width: 100%;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 10vh;
}

.bg-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
	opacity: 0;
	transition: opacity 600ms ease;
}

.impact-card-grid {
	position: relative;
	height: 60vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.impact-overlay {
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.impact-grid {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: space-between;
	align-items: center;
}

.impact-item {
	position: relative;
	width: 25%;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	font-family: var(--font-urbanist);
	color: black;
	cursor: pointer;
	font-size: 1.2vw;
	opacity: 1;
	transform: none;
	padding-top: 10vh;
}

/* Hover / focus desktop */
.impact-card-grid.impact-active .impact-item {
	transform: scale(1.05);
}


.impact-year {
	position: absolute;
	z-index: 5;
	font-size: 4.5vw;
	font-weight: 700;
	color: #222;
	pointer-events: none;
	padding-top: 15vh;
	font-family: var(--font-urbanist);
}

.impact-mobile-grid {
	display: none;
}

@media (max-width: 1200px) {
	.impact-section {
		width: 100%;
		height: 60vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 5vh;
	}

	/* Masquer les calques hover desktop */
	.bg-layer,
	.impact-overlay {
		display: none;
	}

	/* Grid mobile 2x2 */
	.impact-card-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		width: 100%;
		height: auto;
		gap: 1vh;
		justify-items: center;
		align-items: center;
		padding: 0;
		box-sizing: border-box;
	}

	/* Items mobile */
	.impact-mobile-grid {
		display: contents;
	}

	.impact-item {
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		/* carré parfait */
		display: flex;
		flex-direction: column;
		/* empiler titre + texte */
		justify-content: center;
		/* centrage vertical */
		align-items: center;
		/* centrage horizontal */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		cursor: default;
		text-align: center;
		margin: 0;
		padding: 10px;
		box-sizing: border-box;
		color: white;
		text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
	}

	/* Masquer l'année desktop */
	.impact-overlay .impact-year {
		display: none;
	}

	/* Centrer l'année mobile */
	.impact-section>.impact-year {
		display: inline-block;
		width: 100%;
		padding-top: 60vh;
		text-align: center;
		font-size: 8vw;
		font-weight: 700;
		/* margin: 2vh 0; */
		color: #222;
	}

	/* Style des titres et textes */
	.impact-item .impact-title {
		font-size: 1.2rem;
		color: white !important;
		text-shadow: 0 0 6px rgba(0, 0, 0, 0.6) !important;
		font-weight: bold;
	}

	.impact-item .impact-text {
		font-size: 1rem;
		color: white !important;
		text-shadow: 0 0 6px rgba(0, 0, 0, 0.6) !important;
		margin-top: 0.3em;
	}

	/* Images de fond */
	.impact-item.impact-trees {
		background-image: url('images/Arbres plantés.jpg');
	}

	.impact-item.impact-lpo {
		background-image: url('images/REFUGE 2.jpg');
	}

	.impact-item.impact-bio {
		background-image: url('images/BIO.jpg');
	}

	.impact-item.impact-social {
		background-image: url('images/TRAVAIL IMPACT SOCIAL 2 (HORIZONTAL).jpg');
	}

	/* Année au-dessus de la grille */
}

/* CSS for section section:links */
.links-section {
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.links-container {
	display: flex;
	justify-content: center;
}

.link-card {
	position: relative;
	width: 50vw;
	/* overflow: hidden; */
}

/* voile noire au repos */
.link-card::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	/* voile initial : bas de l'image */
	pointer-events: none;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.7) 0%,
			/* bas bien noir */
			rgba(0, 0, 0, 0) 100%
			/* fondu vers le milieu */
		);
	transition: height 1s ease, opacity 1s ease;
	/* transition plus rapide */
}

/* au hover → le voile se lève et s’atténue */
.link-card:hover::after {
	height: 100%;
	/* le voile monte vers le haut */
	opacity: 0;
	/* devient transparent */
}

.link-card-overlay {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--color-background);
	z-index: 9;
	/* assure que l'overlay est au-dessus du gradient */
}

.link-card-overlay h2 {
	margin: 0;
	font-family: var(--font-underground);
	font-weight: 500;
	font-size: 2vw;
	position: relative;
	/* nécessaire pour que le z-index fonctionne */
	z-index: 10;
	white-space: nowrap;
}

.link-card-icon {
	width: 1.2vw;
	/* height: 1.5vw; */
}

@media (max-width: 1200px) {

	/* voile noire au repos */
	.link-card::after {
		display: none;
	}

	.links-section {
		padding-top: 20vw !important;
		padding-bottom: 5vh !important;
	}

	.links-container {
		display: flex;
		flex-direction: column;
		/* empile les cartes */
		width: 100%;
		padding: 0;
		gap: 2;
		/* ou un petit espace si tu veux */
	}

	.link-card {
		width: 100%;
		/* pleine largeur */
		height: auto;
		/* chaque carte prend 50% de la hauteur de l'écran */
		max-width: 100%;
		position: relative;
		/* plus de absolute */
		margin-bottom: 5vw;
	}

	.link-card-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.link-card-overlay {
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.link-card-overlay h2 {
		font-size: 6vw;
		padding-bottom: 5vw;
	}

	.link-card-icon {
		width: 4.5vw;
		padding-bottom: 5vw;
		height: auto;
	}
}



/* CSS for section section:footer */
.site-footer {
	position: relative;
	border-top: 1px solid var(--color-text);
	padding: 62px 0 50px;
}

.footer-container {
	display: grid;
	grid-template-columns: 2fr 1fr 2fr;
	align-items: stretch;
	/* alignement sur toute la hauteur */
	gap: 30px;
	left: 2vw;
	max-width: 96vw;
	margin: 0 auto;
	padding: 0 20px;
}

.footer-col-left {
	display: flex;
	flex-direction: column;
	justify-content: start;
	/* répartit nav, copyright, disclaimer, logo sur toute la hauteur */
	gap: 20px;
	/* ajustable pour l'espacement interne */
}

.footer-nav {
	display: flex;
	flex-direction: column;
	gap: 19px;
	font-family: var(--font-urbanist);
	font-weight: 400;
	font-size: 1vw;
}

.copyright {
	margin: 0;
	font-family: var(--font-urbanist);
	font-weight: 400;
	font-size: 1vw;
}

.disclaimer {
	margin: 0;
	font-family: var(--font-urbanist);
	font-weight: 400;
	font-size: 0.6vw;
	max-width: 18vw;
}

.footer-col-center {
	display: flex;
	flex-direction: column;
	/* CTA au-dessus du logo */
	align-items: center;
	justify-content: center;
	gap: 2vw;
	/* espace entre CTA et logo */
	text-align: center;
}

.footer-cta-title {
	font-family: var(--font-special);
	font-weight: 400;
	font-size: 1.5vw!important;
	line-height: 1;
	font-variant: small-caps;
	margin: 0;
	color: var(--color-text);
}

@media (min-width: 769px) {
	.footer-contact {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		/* aligne tout à droite */
	}

	.footer-social {
		order: 0;
		/* pour être avant les paragraphes si besoin */
		align-self: flex-end;
		/* ou flex-end selon alignement voulu */
	}
}

.footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	/* espace entre texte et icône */
	text-decoration: none;
}
.footer-contact button {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	/* espace entre texte et icône */
	text-decoration: none;
}

.footer-contact img.arrow-icon {
	vertical-align: middle;
	/* sécurité pour éviter les décalages */
}

.footer-contact img.arrow-icon {
	width: 0.5vw !important;
	/* taille obligatoire */
	height: 0.5vw !important;
	/* taille obligatoire */
	object-fit: contain;
}

/* Responsive mobile */
@media (max-width: 768px) {
	
	.footer-cta-title {
	font-family: var(--font-special);
	font-weight: 400;
	font-size: 4vw!important;
	line-height: 1;
	font-variant: small-caps;
	margin: 0;
	color: var(--color-text);
}
	.footer-col-center {
		gap: 4vw;
	}

	.footer-cta-title {
		padding-top: 5vw;
		font-size: 6vw;
	}

	.footer-col-center img {
		width: 50vw !important;
	}
}

.footer-center {
	flex-direction: column;
	gap: 4vw;
	padding-bottom: 1vw;
	width: 100%;
	display: flex;
	align-items: center;
}

.footer-col-center .footer-logo {
	width: 12vw;
}


.footer-logo {
	width: 12vw!important;
	height: auto;
}

.footer-col-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 2vw;
}

.footer-contact {
	font-family: var(--font-urbanist);
	font-size: 1vw;
	line-height: 1.5;
}

.footer-contact button {
	font-family: var(--font-urbanist);
	font-size: 0.8vw;
	line-height: 1.5;
	padding: 0!important;
}

.footer-contact h3 {
	margin: 0 0 16px;
	font-size: 1vw;
	font-weight: 400;
}

.footer-contact p,
.footer-contact a,
.footer-contact button {
	margin: 0 0 5px;
}

.footer-social {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-urbanist);
	font-size: 0.8vw;
}

.footer-social img {
	width: 1vw;
	height: 1vw;
}

.footer-logos {
	display: flex;
	align-items: center;
	/* aligne verticalement logo et badge */
	gap: 2vw;
	/* espace horizontal entre les deux */
}

@media (min-width: 769px) {
	.footer-logos {
		order: 1;
		position: absolute;
		bottom: 2.5vh !important;
		/* reste avec footer-col-left */
	}
}


@media (max-width: 768px) {
	.footer-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0vw !important;
	}

	.site-footer {
		padding-top: 0vh ! important;
	}

	.footer-nav {
		font-size: 5vw;
	}

	.copyright {
		font-size: 5vw;
	}

	.disclaimer {
		font-size: 3vw;
		max-width: 90vw;
	}


	.footer-col-left,
	.footer-col-right,
	.footer-col-center {
		align-items: center;
		text-align: center;
		width: 100%;
		font-size: 5vw;
	}

	.footer-col-right {
		order: 3;
		width: 100%;
		text-align: center;
		align-items: center;

	}

	.footer-contact a {
		display: inline-flex;
		align-items: center;
		gap: 0.3em;
		/* espace entre texte et icône */
		text-decoration: none;
	}

	.footer-contact img.arrow-icon {
		width: 2vw !important;
		/* taille obligatoire */
		height: 2vw !important;
		/* taille obligatoire */
		object-fit: contain;
		/* évite les déformations */
	}

	.footer-col-left {
		order: 4;
		width: 100%;
		text-align: center;
		align-items: center;
		margin-top: auto;
		color: gray !important;
	}

	.footer-col-left .footer-nav a,
	.footer-col-left .footer-nav a:hover {
		color: gray !important;
	}

	.footer-col-center img {
		padding-top: 3vh !important;
		width: 50vw !important;
	}

	.footer-col-center {
		order: 1;
		width: 100%;
		text-align: center;
		align-items: center;
	}

	.footer-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2vw;
		padding-bottom: 1vw;
	}

	.footer-center .footer-logo {
		width: 45vw !important;
	}

	.footer-contact {
		font-size: 4vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-contact button{
		font-size: 4vw;
		padding: 0!important;
		
	}

	.footer-contact h3 {
		margin: 3vw 3vw 3vw 3vw;
		font-size: 5vw;
		font-weight: 400;
	}

	.footer-contact p,
	.footer-contact a,
	.footer-contact button {
		margin: 0 0 0.5vw!important;
	}

	.footer-contact a[href*="visites"] {
		display: inline-flex;
		align-items: center;
		gap: 0.3em;
	}

	.footer-contact a[href*="visites"] .arrow-icon {
		width: 2vw;
		height: auto;
	}

	.footer-social {
		font-size: 4vw;
		margin-bottom: 2vw !important;
	}

	.footer-social img {
		width: 5vw;
		height: 5vw;
	}

	.footer-col-left {
		justify-content: center;
		/* recentre verticalement sur mobile */
		gap: 3vw;
	}

	.ab-logo-footer {
		width: 10vw;
		height: auto;
	}

	.footer-logos {
		display: flex;
		align-items: center;
		/* aligne verticalement logo et badge */
		gap: 10vw;
		padding-top: 3vw;
		/* pousse vers le bas */
		width: 100%;
		justify-content: center;
		order: 2;
		/* juste après l’instagram */

		/* espace horizontal entre les deux */
	}
}

.cta-title {
	font-family: var(--font-special);
	font-weight: 400;
	font-size: 2vw;
	line-height: 1;
	font-variant: small-caps;
}

.cta-section {
	text-align: center;
	padding: 100px 20px;
	/* Approximate vertical spacing */
}

/* Responsive mobile */
@media (max-width: 768px) {
	.footer-cta {
		padding: 40px 10px;
	}

	.footer-cta-title {
		font-size: 6vw;
	}
}


@media (min-width: 769px) {
	.carousel-btn {
		display: none;
	}
}

@media (max-width: 768px) {
	.cta h2 {
		font-size: 8vw !important;
	}

	.cta-title {
		font-family: var(--font-special);
		font-weight: 400;
		font-size: 6 vw !important;
		line-height: 1;
		font-variant: small-caps;
	}

	.cta-section {
		text-align: center;
		padding: 20px 20px;
		/* Approximate vertical spacing */
	}
}

.products-section {
	padding-bottom: 118px;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5vw;
	max-width: 80vw;
	margin: 0 auto;
	padding: 0 20px;
}

.product-card {
	text-align: center;
}

.product-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: 5vh;
}

.product-link {
	font-family: '_P22 Underground Medium Small Caps', sans-serif;
	font-size: 24px;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.product-link img {
	width: 15px;
	height: 15px;
	transition: transform 0.3s ease;
}

.product-link:hover img {
	transform: translateX(5px);
}

.link-card-overlay img {
	transition: transform 0.3s ease;
}

.link-card-overlay:hover img {
	transform: translateX(5px);
}

@media (max-width: 768px) {
	.products-carousel-wrapper {
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.products-grid {
		display: flex;
		transition: transform 0.4s ease;
	}

	.product-card {
		flex: 0 0 90vw;
		margin: 0 5vw;
		/* espace entre les cards */
		text-align: center;
	}

	.product-image {
		width: 100%;
		height: auto;
	}

	.carousel-btn {
		position: absolute;
		top: 30vh;
		transform: translateY(-50%);
		z-index: 10;
		background: white;
		color: white;
		border: none;
		font-size: 2rem;
		padding: 0.5rem 1rem;
		cursor: pointer;
	}

	.carousel-btn.left {
		left: 0.5rem;
	}

	.carousel-btn.right {
		right: 0.5rem;
	}
}


.wines-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5vw;
	max-width: 80vw;
	margin: 0 auto;
	padding: 0 20px;
	margin-bottom: 10vh;
}

.wine-card {
	display: flex;
	text-align: center;
	align-items: center;
}

.wine-card img {
	margin-bottom: 5vh;
	/* 8229 - (7617+584) */
}

.wine-card-info h3 {
	font-family: var(--font-primary);
	font-size: 40px;
	font-weight: 500;
	margin-bottom: 25px;
	/* 8302 - (8229+48) */
}

.wine-card-info p {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 32px;
	/* 8358 - (8302+24) */
}

.discover-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--font-urbanist);
	font-size: 1.8rem;
	font-weight: 600;
	font-variant: small-caps;
}

.discover-link img {
	width: 15px;
	height: 15px;
	margin: 0;
}

.all-wines-link {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 17px;
	font-family: '_P22 Underground Medium Small Caps', sans-serif;
	font-size: 2vw;
	font-weight: 600;
	font-variant: small-caps;
}

.all-wines-link img {
	width: 22px;
	height: 22px;
}


.section-ticker {
	min-height: 10vh;
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

@-webkit-keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

@keyframes slide-down {
	from {
		bottom: 60vh;
	}

	to {
		bottom: 0vh;
	}
}

@-webkit-keyframes slide-down {
	from {
		bottom: 60vh;
	}

	to {
		bottom: 0vh;
	}
}

.tab-wines {
	display: flex;
	/* aligne les boutons horizontalement */
	width: 90vw;
	/* laisse un peu de marge */
	margin: 0 auto;
	/* centre le conteneur */
	margin-bottom: 5vh;
	margin-top: 5vh;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	height: 15vh;
}

.tablinks-wines {
	flex: 1;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	/* min-height: 80px; */
}

.tablinks-wines img {
	width: 40%;
}

/* Border verticale entre les tabs sauf le dernier */
.tablinks-wines:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 10%;
	/* marge haut */
	bottom: 10%;
	/* marge bas */
	right: 0;
	/* bord droit du bouton */
	width: 1px;
	background-color: black;
}

.tab-wines .active {
	border-bottom: 3px solid black;
	border-top: 3px solid black;
}

.subnav-title-bold,
.subnav-title,
.subnav-title-light,
.subnav-subtitle-bold,
.subnav-subtitle {
	display: block;
	/* force chaque span sur sa ligne */
	text-align: center;
	/* centre le texte */
}

@media (max-width: 768px) {
	.tab-wines {
		display: flex;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 3vh;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		height: 10vh !important;
	}

	.tablinks-wines {
		flex: 1;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
		min-height: 80px;
	}

	.tablinks-wines img {
		width: 70%;
	}

	/* Chaque span devient un bloc centré */
	.subnav-title-bold,
	.subnav-title,
	.subnav-title-light,
	.subnav-subtitle-bold,
	.subnav-subtitle {
		margin-top: 1vh !important;
		margin-bottom: 1vh !important;
		display: block;
		text-align: center;
	}

	/* Titres */
	.subnav-title-bold,
	.subnav-title,
	.subnav-title-light {
		font-size: 3.5vw;
		font-weight: 600;
	}

	/* Sous-titres */
	.subnav-subtitle-bold,
	.subnav-subtitle {
		font-size: 3.5vw;
		font-weight: 400;
	}

	.tablinks-wines:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 20%;
		bottom: 20%;
		right: 0;
		width: 1px;
		background-color: black;
	}

	/* Onglet actif */
	.tab-wines .active {
		border-bottom: 3px solid black;
		border-top: 3px solid black;
	}

}

.tab {
	display: flex;
	width: 80vw;
	padding-bottom: 10vh;
	margin: 0 auto;
}

.tab a {
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: column;
	/* pour aligner texte verticalement */
	margin: auto;
	position: relative;

}

.tab button {
	background: none;
	border: none;
	cursor: pointer;
	position: relative;

	flex-grow: 1;
	/* base égale */
	flex-basis: 0;
	/* pour que flex-grow fonctionne */
	transition: flex-grow 0.5s ease, transform 0.5s ease;
}

.tab img {
	width: 50%;
	/* moitié de la largeur du bouton */
	min-height: 5rem;
	display: block;
	margin: 0 auto;
	transition: transform 0.5s ease, opacity 0.5s ease;
	transform: scale(0.6);
	opacity: 0.6;
}

/* Largeur des boutons quand actif / inactif */
.tab button.active {
	flex-grow: 5.1;
	/* ≈ 60% */
}

.tab button:not(.active) {
	flex-grow: 4.9;
	/* ≈ 40% */
}

/* Zoom image active */
.tab button.active img {
	transform: scale(0.8);
	opacity: 1;
}

/* Bordure du bas générale */
.tab button::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background: #000;

	transform: scaleX(0);
	/* cachée au départ */
	transition: transform 0.4s ease;
}

/* Première tab inactive : part de la gauche vers la droite */
.tab button:first-child:not(.active)::after {
	transform-origin: right;
	/* s’étend vers la gauche */
	transform: scaleX(1.5);
	/* déployée */
}

/* Première tab active : rétracte de gauche vers la droite */
.tab button:first-child.active::after {
	transform-origin: right;
	/* se rétracte vers la droite */
	transform: scaleX(0);
}

/* Seconde tab inactive : part de la droite vers la gauche */
.tab button:last-child:not(.active)::after {
	transform-origin: left;
	/* s’étend vers la droite */
	transform: scaleX(1.5);
	/* déployée */
}

/* Seconde tab active : rétracte de droite vers la gauche */
.tab button:last-child.active::after {
	transform-origin: left;
	/* se rétracte vers la gauche */
	transform: scaleX(0);
}


/* Bordure centrale entre les deux inactifs */
.tab button:first-child:not(.active)::before,
.tab button:last-child:not(.active)::before {
	content: "";
	position: absolute;
	top: 15%;
	bottom: 15%;
	height: 100%;
	width: 2px;
	background: #000;
	transition: opacity 0.8s ease;
}

.tab button:first-child:not(.active)::before {
	right: -1px;
}

.tab button:last-child:not(.active)::before {
	left: -1px;
}

.tablinks {
	float: left;
	cursor: pointer;
	height: auto;
	width: 35vw;
}

.quote {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 4vw;
	line-height: 1.2;
	text-align: center;
}

.font-display-1 {
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 2.8vw;
	line-height: 1;
	font-variant: small-caps;
}

.font-display-2 {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 3vw;
	line-height: 1.2;
}

.font-heading-1 {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 2.4vw;
	line-height: 1.2;
}

.font-heading-2 {
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 1.8vw;
	line-height: 1;
	font-variant: small-caps;
}

.quote-product {
	font-family: var(--font-primary);
	font-size: 1.6vw;
	font-weight: 300;
	line-height: 1.2;
	margin-bottom: 5vh;
	/* 5547 - (5033+464) */
}

.quote-product p {
	font-size: 1.6vw !important;
}

.quote-product footer {
	margin-top: 40px;
}

.font-body-xl {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 1.8vw;
	line-height: 1.2;
}

.font-body-xl-article {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 1.8vw;
	line-height: 1.2;
	padding-bottom: 0vw !important;
}



.font-body-lg {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 1.6vw;
	line-height: 1.2;
}

.font-body-md {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 1.2vw;
	line-height: 1.2;
}

.font-body-sm {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 1vw;
	line-height: 1.2;
}

.font-body-xs {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
}

.form-intro {
	font-family: var(--font-urbanist);
	font-weight: 300;
	font-size: 1.6vw;
	line-height: 1.4;
	text-align: center;
	max-width: 80vw;
}

.form-intro strong {
	font-family: var(--font-urbanist);
	font-weight: 500;
}


/* Style the tab content */

.tabcontent {
	display: none;
	/* padding: 6px 12px; */
	-webkit-animation: fadeEffect 0.5s;
	animation: fadeEffect 0.5s;
}

.tabcontent-wines {
	display: none;
	/* padding: 6px 12px; */
	-webkit-animation: fadeEffect 0.5s;
	animation: fadeEffect 0.5s;
}


/* Fade in tabs */
@-webkit-keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.info-item h3 {
	/* display: flex;    */
	vertical-align: top;
	font-family: 'P22 Underground', sans-serif;
	font-size: 2vw;
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 92px 0;
}

.info-item p {
	vertical-align: top;
	font-family: 'Urbanist', sans-serif;
	font-size: 1.5vw;
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
}

.divider-wines {
	font-family: 'P22 Underground', sans-serif;
	font-size: 2vw;
	font-weight: 250;
	line-height: 1;
	color: #000;
	align-self: center;
	margin-top: 0px;
}


.info-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0vw;
	max-width: 80vw;
	margin: 0 auto;
	align-items: top;
	align-content: center;
	text-align: center;
}

@media (max-width : 768px) {

	.info-container {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 0vw;
		max-width: 100vw;
		margin: 0 auto;
		align-items: top;
		align-content: center;
		text-align: center;
	}

	.info-section {
		padding: 5vw !important;

	}

	.divider-wines {
		display: none;
	}

	.info-item h3 {
		margin: 0 0 1vh 0;
		font-size: 5vw;
	}

	.info-item p {
		font-size: 4vw;
		margin: 0 0 3vh 0;
	}
}

.info-section {
	display: flex;
	justify-content: center;
	padding: 10vh 5vw;
	/* Approximate vertical spacing */
}

.info-container-visite {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.info-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.info-background img {
	width: 100%;
	height: 100%;
	opacity: 0.3;
	object-fit: cover;
}

.info-content {
	padding: 50px 95px;
	/* Approximate padding from design */
	width: 100%;
}

.info-description {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 1.8vw;
	line-height: 1.2;
	/* max-width: 1260px; */
	margin-bottom: 5vh;
	/* Approximate spacing */
}

.info-price {
	font-family: var(--font-primary);
	font-weight: 300;
	font-size: 1.6vw;
	line-height: 1.2;
	margin-bottom: 97px;
	/* Spacing from 1979 - 1882 */
}

.info-discover-link {
	display: inline-flex;
	align-items: center;
	gap: 1vw;
	font-family: var(--font-urbanist);
	font-weight: 600;
	font-size: 2vw;
	line-height: 1;
	/* font-variant: small-caps; */
}

.info-discover-link img {
	width: 1vw;
	height: 1vw;
	transition: transform 0.3s ease;
}

.info-discover-link:hover img {
	transform: translateX(5px);
}

@media (max-width: 1024px) {
	.info-section {
		padding: 80px 20px;
	}

	.info-content {
		padding: 40px;
	}

	.info-price {
		font-size: 28px;
		margin-bottom: 60px;
	}

	.info-discover-link {
		font-size: 32px;
	}
}

@media (max-width : 786px) {
	.info-description {
		font-size: 5vw !important;
	}
}


/* CSS for section section:form */
.form-section {
	padding: 0;
}

.form-container {
	/* max-width: 1752px; */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.waitlist-form {
	margin-top: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3vh;
	width: 100%;
}

.form-group {
	/* padding-left : 10vw; */
	width: 80%;
	max-width: 60vw;
	flex-direction: column;
	position: relative;
	align-items: center;
}

.form-input {
	width: 100%;
	height: 91px;
	border: 1px solid #000000;
	/* border-radius: var(--border-radius-large); */
	padding: 0 42px;
	font-family: var(--font-urbanist);
	font-weight: 400;
	font-size: 1.2vw;
	background-color: transparent;
}

.form-input::placeholder {
	color: #000000;
	opacity: 1;
}

.submit-button {
	margin-top: 5vw;
	/* 148px from last input bottom - 43px gap */
	display: inline-flex;
	align-items: center;
	gap: 23px;
	font-family: var(--font-p22);
	/* Using fallback */
	/* font-feature-settings: 'smcp' on; */
	/* Small Caps */
	font-size: 1.5vw;
	font-weight: 400;
	line-height: 1;
	/* text-transform: lowercase; */
	padding-bottom: 10vh;
}

.submit-icon {
	width: 23px;
	height: 23px;
}

@media (max-width : 1200px) {


	.story-image img {
		object-fit: cover;
		width: 100% !important;

	}
}

.submit-button-calendly {
	margin-top: 2vw;
	/* 148px from last input bottom - 43px gap */
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	border: none;
	background-color: white;
	gap: 23px;
	font-family: var(--font-p22);
	/* Using fallback */
	/* font-feature-settings: 'smcp' on; */
	/* Small Caps */
	font-size: 1.8vw;
	font-weight: 400;
	line-height: 1;
}

@media (max-width : 768px) {
	.story-image img {
		object-fit: cover;
		width: 100% !important;
	}

	.submit-button-calendly {
		margin-top: 2vw;
		/* 148px from last input bottom - 43px gap */
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-family: var(--font-p22);
		background-color: white;
		cursor: pointer;
		border: none;
		/* Using fallback */
		/* font-feature-settings: 'smcp' on; */
		/* Small Caps */
		font-size: 4vw;
		font-weight: 400;
		line-height: 1;
	}

	.submit-button {
		margin-top: 5vh;
		margin-bottom: 5vh;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-family: var(--font-underground);
		font-size: 4vw;
		font-weight: 300;
	}

	.form-intro {
		font-size: 4vw !important;
	}

	.form-input {
		width: 90%;
		/* au lieu de 80vw */
		height: 10vh;
		border: 1px solid #000000;
		border-radius: 2px;
		padding: 0 5vw;
		font-family: var(--font-urbanist);
		font-weight: 400;
		font-size: 4vw;
		background-color: transparent;
	}

	.form-group {
		padding-left: 0 !important;
		/* supprime la marge interne */
		width: 80vw;
		max-width: 80vw;
		/* enlève la restriction 60vw si tu veux pleine largeur */
		flex-direction: column;
		position: relative;
		align-items: flex-start;
		/* aligne à gauche */
	}

	.font-body-xl {
		font-size: 5vw !important;
	}

	.font-body-xl-article {
		font-size: 5vw !important;
		padding-bottom: 0vh !important;
	}

	.waitlist-form {
		margin-top: 5vh !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3vh;
		width: 100% !important;
		padding: 0 5vw;
		/* marge gauche + droite */
		box-sizing: border-box;
		/* inclut padding dans la largeur */
	}

	.waitlist-form .form-group {
		width: 100%;
		max-width: 500px;
		display: flex;
		justify-content: center;
	}

	.waitlist-form .form-input {
		width: 100%;
		box-sizing: border-box;
		padding: 0 5vw;
		/* padding interne si voulu */
	}


	.submit-icon {
		width: 3vw !important;
	}


	.story-text-miror h2 {
		display: flex;
		width: 90vw !important;
		text-align: right !important;
		align-items: center !important;
		margin-bottom: 5vh !important;
	}

	.story-text-miror p {
		width: 90vw !important;
	}

	.story-image img {
		object-fit: cover;
		width: 100% !important;
	}

	.spacing {
		display: none;
	}
}

/* CSS for section section:library */
#library {
	padding: 0vw;
	/* max-width: 80vw; */
	margin: 0 auto;
	overflow-x: hidden;
}

.library-nav {
	padding: 0;
	width: 90vw;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0vw;
	/* espace entre les liens */
	height: auto;
	/* laisse le conteneur s’adapter au contenu */
}

.library-nav a {
	font-family: var(--font-secondary);
	font-size: 2vw;
	font-weight: 400;
	text-transform: uppercase;
	font-variant: small-caps;
	line-height: 1;
	/* réduit la hauteur des liens */
	display: inline-block;
	padding: 5vh 0;
	/* hauteur contrôlée du lien */
}

.library-container {
	padding: 0;
}

.article-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* centre horizontalement les articles */
	gap: 60px;
}

.article-item {
	width: 100vw;
	/* largeur fixe à 80% de l’écran */
	margin: 0;
	/* supprime marges parasites */
	/* border: var(--border-light); */
}

.article-content-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 20vh;
	max-width: 65vw;
	margin: 0 auto;
	padding: 20px;
}

.article-title {
	font-family: var(--font-primary);
	font-size: 2.5vw;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

.discover-link {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
	white-space: nowrap;
}

.discover-link span {
	font-family: var(--font-secondary);
	font-size: 1.5vw;
	font-weight: 400;
	text-transform: uppercase;
	font-variant: small-caps;
	letter-spacing: 0.05em;
}

.discover-link img {
	width: 23px;
	height: 23px;
	transition: transform 0.3s ease;
}

.discover-link:hover img {
	transform: translateX(5px);
}

@media (max-width : 768px) {

	#library {
		padding: 2vh 0vw;
		/* max-width: 80vw; */
		margin: 0 auto;
		overflow-x: hidden;
	}

	.library-container {
		padding: 0;
	}

	.library-nav {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		/* gap: 4vw !important; */
		width: 90vw !important;
		padding: 0 !important;
		/* plus de padding inutile */
		height: auto !important;
	}

	.library-nav a {
		font-size: 4vw !important;
		line-height: 1.2 !important;
		padding: 0 0 !important;
		/* on supprime le padding vertical */
		display: flex !important;
		align-items: center !important;
		/* centre verticalement le texte */
		justify-content: center !important;
		text-align: center !important;
	}

	.article-title {
		max-width: 80vw;
		font-family: var(--font-primary);
		font-size: 5vw;
		font-weight: 400;
		line-height: 1.2;
		margin: 0;
	}

	.article-content-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 10vh;
		max-width: 90vw;
		padding: 5vw;
		gap: 2vh;
	}

	.discover-link {
		display: flex;
		align-items: center;
		gap: 10vw;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.discover-link span {
		display: none;
	}

	.article-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2vw;
	}

	.nav-separator {
		width: var(--border-heavy);
		height: 10vh;
		background-color: var(--color-text);
		flex-shrink: 0;
	}
}

.no-scroll {
	overflow: hidden;
	height: 100vh;
}

#popupOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	 visibility: hidden; 
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#popupOverlay.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.popupContent {
	background: #fff;
	padding: 5vw;
	text-align: center;
	border-radius: 1px;
	max-width: 90%;
	box-sizing: border-box;
}

.popup-logo {
	display: block;
	margin: 0 auto 2rem auto;
	max-width: 20vw;
	padding-bottom: 5vw;
	height: auto;
}

.popupContent h2 {
	margin-bottom: 3vw;
	font-family: var(--font-urbanist);
}

.popupContent p {
	/* max-width: 50%; */

	margin-bottom: 3vw !important;
	font-family: var(--font-urbanist);
}

.popup-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.popup-buttons button {
	font-family: var(--font-urbanist);
	padding: 1vw 0.5vw;
	border: 1px solid #000;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	font-size: 1vw;
	min-width: 15vw;
	transition: background 0.3s, color 0.3s;
}

.popup-buttons button:hover {
	border: 2px solid #000;
}

@media (max-width: 768px) {
	@media (max-width: 768px) {

		/* overlay couvrant tout l'écran et centré verticalement/horizontalement */
		#popupOverlay {
			position: fixed;
			/* important */
			inset: 0;
			/* top:0; right:0; bottom:0; left:0; */
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
			box-sizing: border-box;
			/* use 100dvh si tu veux corriger le comportement des barres d'URL sur certains mobiles */
			height: 100dvh;
			padding: 0;
		}

		/* popup centrée, scrollable si trop grande */
		.popupContent {
			width: 90vw;
			max-width: none;
			height: auto;
			padding: 5vw;
			box-sizing: border-box;
			border-radius: 10px;

			/* éviter que le contenu dépasse l'écran — laisser un petit marge */
			max-height: calc(100dvh - 6vw);
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			/* iOS */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.popup-logo {
			max-width: 60vw;
			padding-bottom: 4vw;
		}

		.popupContent h2 {
			font-size: 5vw;
			margin-bottom: 3vw;
		}

		.popupContent p {
			font-size: 6vw;
			margin-bottom: 4vw !important;
		}

		.popup-buttons {
			flex-direction: column;
			gap: 5vw;
			width: 100%;
		}

		.popup-buttons button {
			font-size: 4vw;
			min-width: 80%;
			padding: 3vw 0;
		}
	}

}

@media (min-width: 769px) {


	.scroll-down-arrow {
		position: absolute;
		left: 5vw;
		/* distance horizontale souhaitée */
		top: 50%;
		/* milieu du parent */
		transform: translateY(-50%) rotate(-45deg);
		/* centrage vertical + rotation */
		width: 1vw;
		height: 1vw;
		border-left: 4px solid black;
		border-bottom: 4px solid black;
		cursor: pointer;
		animation: bounce 3s infinite;
		z-index: 1000;
	}

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0) rotate(-45deg);
		}

		40% {
			transform: translateY(10px) rotate(-45deg);
		}

		60% {
			transform: translateY(5px) rotate(-45deg);
		}
	}
}

@media (max-width: 768px) {
	.scroll-down-arrow {
		display: none;
	}
}


/* NOS VINS */

.hero-section {
	position: relative;
	height: 80vh;
	display: flex;
	top: 10vh;
	margin-bottom: 20vh;
	align-items: center;
	justify-content: center;
}

.vin-methode-nature {
	color: blue !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	margin-top: 0 !important;
}

.sans-sulfites {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	margin-top: 0 !important;
	color: #800000 !important;
}

.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	/* margin-bottom: 10vh; */

}

.hero-background img {
	opacity: 0.8;
	width: 100%;
	height: 100%;
	/* bottom: 10vh; */
	/* background-position: bottom; */
	object-fit: cover;
	object-position: bottom;
}

.hero-content {
	max-width: 90vw;
	padding: 0 20px;
}

.hero-content p {
	font-family: 'Urbanist', sans-serif;
	font-size: 1.6vw;
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	color: #000000;
	/* text-shadow: 0px 4px 21.1px #ffffff, 0px 4px 21.1px #ffffff; */
	margin: 0;
	/* supprime marges par défaut */
	padding-bottom: 105vh !important;
	/* supprime padding forcé */
}

@media (max-width: 768px) {
	.tab-wines {
		margin-bottom: 0vw !important;
	}

	.hero-section {
		display: flex;
		flex-direction: column;
		/* empile texte puis image */
		height: auto;
		margin: 0 !important;
		/* supprime espace inutile */
		padding: 0 !important;
		/* supprime padding */
		top: 0 !important;
		/* supprime le décalage */
	}

	.hero {
		display: flex;
		flex-direction: column;
		/* empile texte puis image */
		height: auto;
		margin: 0 !important;
		/* supprime espace inutile */
		padding: 0 !important;
		/* supprime padding */
		top: 0 !important;
		/* supprime le décalage */
	}


	.hero-content {
		padding: 0vw !important;
		/* petit padding autour du texte */
		text-align: center;
		margin: 0;
		/* supprime marge */
	}

	.hero-content p {
		font-size: 4vw;
		margin: 0;
		/* colle au nav */
		padding: 0;
		top: 0vh !important;
		padding-bottom: 10vw !important;
		padding-top: 10vw !important;
		/* petit espace sous texte */
	}

	.hero-background {
		position: relative;
		/* image dans le flux normal */
		width: 100%;
		height: 40vw !important;
		margin: 0;
		margin-bottom: 10vw !important
			/* supprime marge */
	}

	.hero-background img {
		width: 100%;
		height: 40vw !important;
		object-fit: cover;
		object-position: bottom;
		display: block;
	}

	.marquee-section-wines {
		margin-bottom: 10vw !important;
		padding: 0 !important;
	}

	.info-section {
		margin-bottom: 0vw !important;
		padding: 0 !important;
	}

	.products-section {
		padding-bottom: 5vw !important;
	}
}

.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}


/* CSS for section section:info */
.info-section {
	padding-bottom: 5vw;
}

.product-title {
	font-family: 'Urbanist', sans-serif;
	font-size: 2vw;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 2vw 0;
}

.product-subtitle {
	font-family: 'Urbanist', sans-serif;
	font-size: 1.4vw;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 2vw 0;
	flex-grow: 1;
}

.product-link {
	font-family: '_P22 Underground Medium Small Caps', sans-serif;
	font-size: 1.2vw;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: auto !important;
}

.product-link img {
	width: 1vw;
	height: 1vw;
	transition: transform 0.3s ease;
}

.product-link:hover img {
	transform: translateX(5px);
}


@media (max-width: 768px) {
	.products-grid {
		grid-template-columns: 1fr;
	}

	.product-image {
		height: auto;
		margin-bottom: 40px;
	}

	/* CSS for section section:info */
	.info-section {
		padding-bottom: 5vw;
	}


	.product-card {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		min-height: 70vh;
		/* hauteur suffisante */
		padding: 4vw;
		gap: 4vw;
		/* marge égale entre tous les éléments */
	}

	.product-title {
		font-size: 6vw;
		margin: 0;
	}

	.product-subtitle {
		font-size: 5vw;
		flex-grow: 1 !important;
		margin: 0;
	}

	.product-link {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 4vw;
		font-weight: 400;
		gap: 1vw;
		margin: 0;
		/* margin gérée par gap */
		width: 100%;
	}

	.product-link img {
		width: 4vw;
		height: 4vw;
		transition: transform 0.3s ease;
	}

	/* .entry-content,
		.entry-content>* {
			margin: 0 !important;
			padding: 0 !important;
		} */


	@media (max-width: 1024px) {
		.hero-container {
			margin-top: 50px;
		}

		.hero-image {
			height: 400px;
		}
	}

	@media (max-width: 768px) {
		.hero-container {
			margin-top: 20px;
		}

		.hero-image {
			height: 300px;
		}

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

	.about-content {
		max-width: 75vw;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: right;
	}

	.about-text {
		margin-top: 93px;
		font-weight: 300;
		font-size: 40px;
		line-height: 48px;
		text-align: right;
		text-shadow: 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff;
	}

	@media (max-width: 1024px) {
		.about-section {
			padding-top: 80px;
		}

		.about-text {
			font-size: 24px;
			line-height: 1.5;
			text-align: center;
		}
	}

	@media (max-width: 768px) {
		.about-section {
			padding-top: 60px;
		}

		.about-text {
			margin-top: 40px;
			font-size: 18px;
		}
	}

	/* CSS for section section:features */
	.features-section {
		padding: 137px 20px 0;
	}

	.features-content {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 5vw;
		max-width: 80vw;
		margin: 0 auto;
	}

	.features-text-wrapper {
		flex-basis: 43vw;
		flex-shrink: 1;
	}

	.features-text-wrapper .section-title {
		text-align: left;
	}

	.features-text {
		margin-top: 85px;
		font-weight: 300;
		font-size: 40px;
		line-height: 48px;
		text-align: left;
		text-shadow: 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff, 0px 4px 9.9px #ffffff;
	}

	.features-image-wrapper {
		flex-basis: 642px;
		flex-shrink: 0;
	}

	.features-image {
		/* border: 1px solid #000000; */
		width: 40vw;
		height: auto;
	}

	@media (max-width: 1200px) {
		.features-content {
			flex-direction: column;
			align-items: center;
			gap: 40px;
		}

		.features-text-wrapper {
			flex-basis: auto;
			width: 100%;
			max-width: 836px;
		}

		.features-text-wrapper .section-title {
			text-align: center;
		}

		.features-text {
			text-align: center;
			font-size: 24px;
			line-height: 1.5;
			margin-top: 30px;
		}

		.features-image-wrapper {
			flex-basis: auto;
			width: 100%;
			max-width: 642px;
		}
	}

	@media (max-width: 768px) {
		.features-section {
			padding-top: 80px;
		}

		.features-text {
			font-size: 18px;
		}
	}

	@media (max-width: 768px) {
		.story-content {
			flex-direction: column;
		}

		.story-content .story-image {
			order: 1;
		}

		.story-content .story-text,
		.story-content .story-text-miror {
			order: 2;
			text-align: left;
			/* texte aligné à gauche */
		}
	}


	.story-content {
		display: flex;
		gap: 68px;
		align-items: flex-start;
	}

	.story-image {
		flex-shrink: 0;
	}

	.story-image img {
		width: 734px;
		height: 650px;
		object-fit: cover;
	}

	.story-text {
		text-align: right;
		padding-top: 50px;
	}

	.story-text h2 {
		margin-bottom: 120px;
	}

	/* CSS for section section:terroir-1 */
	.terroir-section {
		padding-top: 10vh;
		padding-bottom: 10vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.terroir-intro-title {
		text-align: right;
		align-self: flex-end;
		max-width: 50vw !important;
		width: 50vw !important;
		margin-bottom: 5vw;
	}

	.logo-showcase {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 60px;
		margin-bottom: 130px;
		width: 100%;
		min-height: 140px;
	}

	.logo-showcase .logo-serame {
		width: 40vw;
	}

	.logo-showcase .logo-argens {
		width: 40vw;
	}

	.logo-showcase .logo-divider {
		width: 3px;
		height: 220px;
		background-color: var(--color-text);
	}

	.quote {
		margin-bottom: 5vw;
		text-align: center;
	}

	.grid-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.grid-item.item-b {
		text-align: left;
	}

	.grid-item.item-c {
		text-align: right;
	}

	.grid-item h3 {
		margin-bottom: 60px;
	}

	.grid-item.item-e {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: 590px;
	}

	.cta-link {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 120px;
	}

	.cta-arrow {
		width: 23px;
		height: 23px;
		transition: transform 0.3s ease;
	}

	.cta-arrow:hover {
		transform: translateX(5px);
	}

	.section-divider {
		width: 100%;
	}

	@media (max-width: 1200px) {
		.terroir-grid {
			grid-template-columns: 1fr;
			gap: 60px;
		}

		.grid-item.item-b,
		.grid-item.item-c {
			text-align: center;
			max-width: 600px;
			justify-self: center;
		}
	}

	@media (max-width: 768px) {

		/* Grille Terroir en stack vertical */
		.terroir-grid {
			display: grid !important;
			grid-template-columns: 1fr !important;
			/* un item par ligne */
			gap: 2rem !important;
			/* espace entre items */
			width: 90% !important;
			margin: 0 auto !important;
			/* centre la grille */
			justify-items: center !important;
			/* centre chaque item */
		}

		/* Chaque item prend toute la largeur de la grille */
		.terroir-grid .grid-item {
			width: 100% !important;
			max-width: 90% !important;
			/* limite à 90% du viewport */
			text-align: center !important;
		}

		/* Images à l'intérieur centrées et responsive */
		.terroir-grid .grid-item img {
			width: 100% !important;
			height: auto !important;
			object-fit: cover;
		}

		/* Texte centré dans les items */
		.terroir-grid .grid-item h3,
		.terroir-grid .grid-item p {
			text-align: center !important;
			padding: 0vw !important;
			margin-top: 0vw !important;
			margin-bottom: 5vw;
		}

		.cta-link {
			margin-top: 5vw;
		}

		.terroir-intro-title {
			max-width: 80vw;
		}
	}

	/* CSS for section section:terroir-2 */
	/* Styles for this section are reused from #terroir-1 */
	#terroir-2 {
		padding-top: 0;
		/* No top padding as it follows the previous section */
	}


}