/*!
Theme Name: Pures
Theme URI: https://pures.fr/
Author: Le naturographe
Author URI: https://www.lenaturographe.fr/
Description: Thème sur mesure pour Pures, boissons bio des Hautes-Alpes.
Version: 1.1.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pures
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.

Pures 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
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}


/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}


a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}


.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


    /* -------------------------------------------------------------
       VARIABLES & DESIGN TOKENS
       ------------------------------------------------------------- */
	   :root {
		--color-primary-dark: #233026; /* Vert Püres sombre */
		--color-accent-blue: #a3c9db;  /* Bleu montagne */
		--color-accent-sand: #d1a17b;  /* Sable/Limon */
		--color-light: #fbf9f6;
		--transition-smooth: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	  }
  
	  * {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	  }
  
	  body {
		background-color: var(--color-light);
		color: var(--color-primary-dark);
		overflow-x: hidden;
		line-height: 1.6;
	  }
  
	  /* Scrollbar personnalisé */
	  ::-webkit-scrollbar {
		width: 8px;
	  }
	  ::-webkit-scrollbar-track {
		background: var(--color-light);
	  }
	  ::-webkit-scrollbar-thumb {
		background: var(--color-accent-sand);
		border-radius: 4px;
	  }
  
  
	  

/* PURES — style.css
   Omnes (licence) → fallback Google Fonts Nunito */

   :root {
	--font:         'omnes-pro', 'Nunito', -apple-system, sans-serif;
	--c-dark:       #1a1a1a;
	--c-white:      #ffffff;
	--c-sky-t:      #e6f2fb;
	--c-sky-b:      #b6d2e8;
	--c-kombucha:   #1a1a2e;
	--c-ginger:     #3d6e28;
	--c-jus:        #df7514;
	--c-terrain-l:  #d4a868;
	--c-terrain-d:  #9a6c34;
	--pill-r:       100px;
	--z-bg:         0;
	--z-content:    2;
	--z-header:     10;
	--z-menu:       20;
	--z-loader:     30;
	--header-h:     60px;
  }
  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; }
  body {
	font-family: var(--font);
	background: var(--c-sky-t);
	color: var(--c-dark);
	overflow-x: hidden;
  }
  
  /* LOADER */
  #loader {
	position: fixed;
	inset: 0;
	z-index: var(--z-loader);
	background: var(--c-white);
	display: flex;
	align-items: center;
	justify-content: center;
	/* caché via JS si aucun SVG injecté, ou masqué par le loader externe */
  }
  
  /* HEADER */
  .site-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 32px;
	z-index: var(--z-header);
	pointer-events: none;
    z-index: 12;
  }
  
  .btn-menu {
	pointer-events: all;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 22px;
	border: 1.5px solid var(--c-dark);
	border-radius: var(--pill-r);
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--c-dark);
	cursor: pointer;
	transition: background .22s, color .22s;
  }
  .btn-menu:hover {
	background: var(--c-dark);
	color: var(--c-white);
  }
  
  /* MENU OVERLAY */

  header{
	display:none;
  }
  .menu-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	line-height: 1;
  }
  .icon-close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--c-dark);
	border-radius: 50%;
	font-size: 15px;
	color: var(--c-dark);
	transition: background .2s, color .2s;
  }
  .icon-close:hover {
	background: var(--c-dark);
	color: var(--c-white);
  }
  
  .menu-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
  }
  .menu-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border: 1.5px solid var(--c-dark);
	border-radius: var(--pill-r);
	font-family: var(--font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--c-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s;
  }
  .menu-pill:hover,
  .menu-pill--active {
	background: var(--c-dark);
	color: var(--c-white);
  }
  
  /* HERO — conteneur */
  .anim-hidden-left {
	opacity: 0;
	transform: translateX(-48px);
  }
  
  .anim-hidden-bottom {
	opacity: 0;
	transform: translateY(56px);
  }
  .hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
  }
  html { scroll-behavior: smooth; }

  #anim-logo {
	left: 100px;
	top: 70px;
  }
  /* HERO — arrière-plan */
  .hero-bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-bg);
  }
  
  .hero-sky {
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg,
	  #eaf5fd 0%,
	  #d2e8f6 35%,
	  #bbd6ec 70%,
	  #a8c8e0 100%
	);
  }
  
  .hero-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: left top;
  }
  
  
  .hero-terrain-img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 74%;
	height: auto;
	object-fit: contain;
	object-position: bottom;
  }
  
  /* HERO — colonne gauche */
  #anim-logo {
	z-index: 10;
  }
  
  /* Élément shimmer — masqué par défaut, GSAP le fait traverser */
  .logo-wave-shine {
	position: absolute;
	inset: 0;
	width: 55%;
	background: linear-gradient(
	  105deg,
	  transparent     20%,
	  rgba(255,255,255,0.42) 50%,
	  transparent     80%
	);
	transform: translateX(-120%);
	pointer-events: none;
	z-index: 1;
  }
  .hero-left {
	position: absolute;
	left: clamp(24px, 4vw, 60px);
	top: 0;
	bottom: 0;
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	max-width: 330px;
	padding-top: calc(var(--header-h) + 80px); /* compense l'espace libéré par le logo */
  }
  
  .logo-wrapper {
	width: clamp(385px, 20vw, 385px);
	position: relative;   /* nouveau */
  }
  .logo-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
  }
  
  .hero-tagline {
    font-size: clamp(12px, 2vw, 21px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-dark);
    left: 50px;
    position: absolute;
    top: 200px;
    width: max-content;
    font-weight: 600;
  }
  
  .hero-labels {    display: flex;
    flex-direction: column;
    gap: 0px;
    list-style: none;
    margin-left: 0;
    position: absolute;
    left: 50px;
    top: 260px;
    width: max-content;
  }
  .label {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--pill-r);
    font-family: var(--font);
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--c-white);
    width: fit-content;
    font-weight: 600;
  }
  
  /* Même repère que le slogan et les étiquettes (absolus, left: 50px) : juste sous JUS */
  .macaron {
	position: absolute;
	left: 50px;
	top: 380px;
	width: 82px;
	height: 82px;
	margin: 0;
  }
  .macaron img {
	width: 100%;
	height: 100%;
	display: block;
  }
  .label--kombucha {
	background-image: url('https://pures.fr/wp-content/uploads/2026/06/kombucha-bleu.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }
  .label--ginger   {
	background-image: url('https://pures.fr/wp-content/uploads/2026/06/ginger-beer-vert.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }
  .label--jus      {
	background-image: url('https://pures.fr/wp-content/uploads/2026/06/jus-orange.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }
  /* HERO — bouteilles */
  .hero-bottles {
	position: absolute;
	left: 20%;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: var(--z-content);
	display: flex;
	align-items: flex-end;
    padding-bottom: 0;
    margin: 0;
    justify-content: right;
  }
  .bottles-img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
  }
  
  /* Bouteilles placeholder CSS */
  .bottles-ph {
	display: flex;
	align-items: flex-end;
	gap: clamp(6px, 1vw, 16px);
  }
  .btl {
	border-radius: 8px 8px 5px 5px;
	background: linear-gradient(180deg,
	  rgba(225,175,85,.5)  0%,
	  rgba(195,135,55,.75) 55%,
	  rgba(160,100,40,.9)  100%
	);
	border: 1.5px solid rgba(255,255,255,.22);
	position: relative;
	flex-shrink: 0;
  }
  .btl::before { /* bouchon */
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	width: 30%;
	height: 14px;
	background: #8a8e8e;
	border-radius: 3px 3px 0 0;
  }
  .btl::after { /* étiquette factice */
	content: '';
	position: absolute;
	top: 30%;
	left: 5%;
	right: 5%;
	bottom: 25%;
	border-radius: 4px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.25);
  }
  .btl--1 { width: 50px; height: 195px; }
  .btl--2 { width: 56px; height: 250px; }
  .btl--3 { width: 56px; height: 268px; }
  .btl--4 { width: 50px; height: 218px; }
  
  /* HERO — accroche */
  .hero-caption {
    position: absolute;
    bottom: clamp(24px, 7%, 60px);
    left: clamp(100px, 3vw, 100px);
    max-width: 272px;
    font-size: clamp(12.5px, 1.82vw, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .32);
    z-index: var(--z-content);
  }
  /* STORY SECTION */
.story-section {
	display: grid;
	grid-template-columns: 80px 1fr 1fr;
	grid-template-rows: auto 1fr;
	min-height: 520px;
	background: #edf6fd;
	overflow: hidden;
  }
  /* Colonne logo vertical */
  .story-logo-col {
	grid-column: 1;
	grid-row: 1 / 3;
	position: relative;
	width: 80px;
	overflow: visible; /* permet au logo rotationné de déborder sans clip */
  }
  
  .story-logo-wrap {
	position: absolute;
	top: clamp(80px, 9vh, 130px);
	left: 50%;
	width: clamp(160px, 15vw, 220px);
	transform: translateX(-50%) rotate(-90deg);
	transform-origin: center center;
	/* opacity gérée par GSAP */
  }
  .story-section {
	overflow: visible;
  }
  /* Corps texte */
  .story-body {
	grid-column: 2;
	grid-row: 1 / 3;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 96px);
	display: flex;
	flex-direction: column;
	gap: 24px;
  }
  
  .story-title {
	font-family: var(--font);
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-dark);
  }
  
  .story-text {
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.75;
	max-width: 420px;
	color: var(--c-dark);
	text-align: justify;
  }

  .story-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    width: fit-content;
    padding: 10px 24px;
    border: 1.5px solid var(--c-dark, #1a1a1a);
    border-radius: 100px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-dark, #1a1a1a);
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
  }
  .story-cta:hover {
    background: var(--c-dark, #1a1a1a);
    color: #fff;
  }
  
  .story-img-team {
	width: 100%;
	object-fit: cover;
	border-radius: 6px;
	margin-top: auto;
  }
  
  /* Photo paysage */
  .story-img-landscape {
	grid-column: 3;
	grid-row: 1 / 3;
	margin: 0;
	overflow: hidden;
  }
  
  .story-img-landscape img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }
  /* SECTION PRODUITS */
.product-section {
	position: relative;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	.product-section { z-index: 12; }
  }

  /* Dots navigation (produits, home) */
  .prod-dots {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 16px;
	z-index: 30;
  }

  .prod-dot {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
	text-decoration: none;
  }

  .prod-dot span {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid rgba(223,112,32,0.4);
	background: transparent;
	transition: background 0.25s, border-color 0.25s, transform 0.25s;
  }

  .prod-dot--active span {
	background: #df7020;
	border-color: #df7020;
	transform: scale(1.3);
  }

  .prod-dot:hover span {
	border-color: #df7020;
	transform: scale(1.2);
  }

  .prod-dot::after {
	content: attr(data-label);
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	color: #1a1a1a;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 5px 14px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
  }

  .prod-dot:hover::after {
	opacity: 1;
  }

  @media (max-width: 860px) {
	.prod-dots { display: none; }
  }
  
  /* Panels */
  .product-panel {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 28% 72%;
	transform: translateY(100%);
	will-change: transform;
	background:url(/wp-content/uploads/2026/06/FOND_PAPIER-min.jpg) center;
	background-size: cover;
  }
  .product-panel[data-idx="0"] { transform: translateY(0); }
  .product-panel[data-idx="3"] .panel-right{ 
	background: url(/wp-content/uploads/2026/06/argousierFond.png) no-repeat;
	background-position: top right;
	background-size: auto;
   }
  
  /* Gauche */
  .panel-left {
	background: var(--bg, #333);
	display: flex;
	flex-direction: column;
	padding: 44px 28px 44px 36px;
  }
  
  .panel-nav {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	gap: 6px;
  }
  .pn-item {
	font-family: var(--font);
	font-size: clamp(10px, .85vw, 12px);
	font-weight: 400;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255,255,255,.28);
	line-height: 1;
  }
  .pn-active {
	font-weight: 800;
	color: #fff;
	font-size: clamp(11px, .95vw, 14px);
  }
  span.pn-item.pn-item-sub {
    padding-left: 20px;
    position: relative;
    font-weight: 500;
}
  span.pn-item.pn-item-sub:after {
    content: "";
    position: absolute;
    left: 2px;
    width: 4px;
    height: 155%;
    background: white;
    top: -5px;
}
  /* Logo rotaté dans le panel */
  .panel-logo-area {
	flex: 1;
	position: relative;
	overflow: visible;
  }
  .panel-logo-area .logo-svg {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: clamp(160px, 15vw, 230px);
	height: auto;
	transform: translateX(-50%) rotate(-90deg);
	transform-origin: center center;
	display: block;
  }
  .panel-logo-area .logo-svg path,
  .panel-logo-area .logo-svg .cls-678392 { fill: white; }
  
  /* Droite */
  .panel-right {
	position: relative;
	padding: 52px 52px 52px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
  }
  
  /* Tags */
  .panel-tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
    position: absolute;
    left: 52px;
    top: 40px;
    flex-direction: column;
    place-items: flex-start;
  }
  .ptag {
	padding: 4px 14px;
	border-radius: 100px;
	color: var(--tk, #fff);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }
  
  /* Contenu */
  .panel-vol {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-dark, #1a1a1a);
    margin-bottom: 0;
    display: inline-block;
    margin-left: 10px;
  }
  .panel-title {
	font-size: clamp(22px, 2.4vw, 38px);
	font-weight: 600;
	line-height: 1;
	color: var(--c-dark, #1a1a1a);
	max-width: 420px;
	margin-bottom: 18px;
  }
  .panel-desc {
	max-width: 360px;
    font-size: clamp(13px, 1.02vw, 15px);
	line-height: 1.8;
	color: rgba(26,26,26,.68);
	display: flex;
	flex-direction: column;
	margin-bottom: 28px;
	text-align: justify;
  }
  .panel-desc p {
    margin-bottom: 13px;
    line-height: 1.3;
}
  .panel-cta {
	display: inline-flex;
	align-items: center;
	padding: 2px 16px;
	border: 1.5px solid var(--c-dark, #1a1a1a);
	border-radius: 10px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--c-dark, #1a1a1a);
	text-decoration: none;
	width: fit-content;
	transition: background .2s, color .2s;
  }
  .panel-cta:hover { background: var(--c-dark, #1a1a1a); color: #fff; }
  
	/* Bouteille */
  	.panel-bottle,
	.panel-bottle-shadow {
	position: absolute;
	width: 100%;
	pointer-events: none;
	}
  
	.panel-bottle       { bottom: 20%; z-index: 1; max-width: 150px;}
	.panel-bottle-shadow { bottom: 19%; z-index: 0; max-width: 200px;}
	.panel-bottle-bg {
		position: absolute;
		bottom: 20%;
		left: 50%;
		xPercent: -50;
		max-width: 260px; /* un peu plus large que la bouteille */
		pointer-events: none;
		z-index: 0;
	  }
	  #panel-bottle-bg-ginger{
		max-width: 500px;
		bottom: 17%;
		margin-left:-7%;
	  }
	  #panel-bottle-bg-jus{
		max-width: 216px;
		bottom: 20%;
		margin-left:-9%;
	  }
	  #panel-bottle-bg-kombucha1{
		max-width: 490px;
		bottom: 17%;
		margin-left:5%;
	  }
	  #panel-bottle-bg-kombucha2{
		max-width: 450px;
		bottom: 14%;
		margin-left:-1%;
	  }
	  #panel-bottle-bg-ginger:before{
		content:"";
		background:url(/wp-content/uploads/2026/06/ginger_BG_shadow.png);
		background-size:100% 100%;
		
	  }
	  .panel-bottle-shadow { z-index: 1; }
	  .panel-bottle        { z-index: 2; }
  .panel-right {
	position: relative; /* ← containing block pour la bouteille */
  }
  .pn-item {
	color: rgba(255,255,255,.8);
	cursor: pointer;
	transition: color .2s;
	font-family: var(--font);
	font-size: clamp(10px, .85vw, 12px);
	font-weight: 400;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1;
  }
  .pn-item:hover { color: #fff; }
  .pn-active {
	color: #fff;
	font-weight: 800;
	font-size: clamp(11px, .95vw, 13px);
  }
  #story-logo .logo-svg path,
  #story-logo .logo-svg .cls-678392 {
	fill: white !important;
  }

  /* Logo de base : noir pur (pour inversion propre) */
#story-logo .logo-svg path,
#story-logo .logo-svg .cls-678392 {
  fill: #000 !important;
}

/* Overlay blanc — position gérée par JS */
#story-logo {
  position: relative;          /* contexte pour l'overlay */
  width: 200px;
}

.logo-white-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* clip-path mis à jour par JS */
}
.logo-white-overlay .logo-svg path,
.logo-white-overlay .logo-svg .cls-678392 {
  fill: #fff !important;
}
#boissons {
    z-index: 11;
}
/* Avis Section */
.avis-section {
	background: #d8e8f0;
	padding: 64px 0 72px;
	z-index: 11;
	position: relative;
  }
  
  .avis-header,
  .avis-footer {
    max-width: 95%;
    width: 1200px;
	margin:auto;
  }
  
  .avis-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 20px;
  }
  
  .avis-divider {
	height: 1px;
	background: rgba(0, 0, 0, 0.18);
  }
  
  /* Viewport + Track */
  .avis-viewport {
	overflow: hidden;
	width: 100%;
	padding: 40px 0;
  }
  
  .avis-track {
	display: flex;
	gap: 24px;
	width: max-content;
	padding: 0 80px;
	will-change: transform;
	cursor: grab;
  }
  
  .avis-track:active {
	cursor: grabbing;
  }
  
  /* Carte */
  .avis-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 36px 40px 32px;
	width: 400px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	user-select: none;
  }
  
  .avis-quote {
	font-size: 52px;
	line-height: 1;
	color: #97bf20;
	font-family: Georgia, serif;
  }
  
  .avis-text {
	font-size: 18px;
	line-height: 1.55;
	color: #1a1a1a;
	flex: 1;
	margin: 0;
  }
  
  .avis-author {
	font-size: 13px;
	color: #666;
	margin: 0;
  }
  
  .avis-stars {
	letter-spacing: 3px;
    font-size: 11px;
    color: #97bf20;
  }
  
  /* Scrollbar */
  .avis-scrollbar-wrap {
	margin-top: 32px;
  }
  
  .avis-bar-track {
	position: relative;
	height: 2px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	cursor: pointer;
  }
  
  .avis-bar-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 3px;
	background: #1a1a1a;
	border-radius: 3px;
	cursor: grab;
	will-change: transform;
	transition: height 0.15s;
  }
  
  .avis-bar-thumb:hover,
  .avis-bar-thumb:active {
	height: 5px;
	cursor: grabbing;
  }

  /* FOOTER */
  .ticker-band {
	background: #ffd49c;
	overflow: hidden;
	padding: 16px 0;
	position: relative;
	z-index: 11;
  }
  
  .ticker-wrap {
	display: flex;
	will-change: transform;
  }
  
  .ticker-set {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0;
  }
  
  .ticker-set span {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e97e3b;
	padding: 0 28px;
	white-space: nowrap;
  }
  
  .ticker-set .ticker-sep {
	color: #e97e3b;
	padding: 0;
	font-size: 18px;
  }
  /* Footer */
.site-footer {
	background: #df6520;
	color: white;
	overflow: hidden;
	z-index: 11;
	position: relative;
  }
  
  /* Top grid */
  .footer-top {
	display: grid;
	grid-template-columns: 3.6fr 1fr 1.2fr 0.9fr;
    gap: 48px;
    padding: 64px 0;
    width: 1200px;
    margin: auto;
    max-width: 95%;
  }
  .footer-col {
		max-width: 290px;
	}
  /* Titre de colonne */
  .footer-col-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: white;
	margin: 0 0 18px;
  }
  
  
  /* Texte */
  .footer-text {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 20px;
  }
  
  /* Input newsletter */
  .footer-form {
	margin-top: 20px;
  }
  
  .footer-input {
	width: 100%;
	padding: 12px 20px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: 100px;
	color: white;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
  }
  
  .footer-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
  }
  
  .footer-input:focus {
	border-color: white;
  }

  /* Lien vers le formulaire de contact (remplace l'ancien champ newsletter) */
  .footer-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 12px 24px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: 100px;
	color: white;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .footer-cta span { transition: transform 0.25s; }
  .footer-cta:hover {
	background: white;
	border-color: white;
	color: #df7020;
  }
  .footer-cta:hover span { transform: translateX(4px); }
  
  /* Liens */
  .footer-link {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	line-height: 1.9;
	transition: color 0.2s;
  }
  
  .footer-link:hover {
	color: white;
  }
  
  /* Colonne droite */
  .footer-col--right {
	text-align: left;
  }
  
  .footer-brand-copy {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: white;
	margin: 0 0 6px;
  }
  
  /* Réseaux sociaux */
  .footer-socials {
	display: flex;
	gap: 10px;
	margin-top: 20px;
  }
  
  .footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	color: white;
	transition: background 0.2s, border-color 0.2s;
  }
  
  .footer-social svg {
	width: 18px;
	height: 18px;
  }
  
  .footer-social:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: white;
  }
  
  /* Wordmark */
  .footer-wordmark-wrap {
    padding: 0 0%;
    line-height: 0;
    width: 1200px;
    margin: 0 auto -3%;
    max-width: 95%;
  }
  
  .footer-wordmark {
	width: 100%;
	height: auto;
	display: block;
	fill: white;
  }
  

  /* Menu overlay */
#menu-overlay {
  position: fixed;
  top: 7px;
  right: 24px;
  left: auto;           /* pas pleine largeur */
  width: auto;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 60px;
  background: transparent;
  visibility: hidden;
  /* pas de transform — géré par opacity/scale en JS */
}

.menu-mobile-header { display: none; } /* caché desktop */

.menu-logo { display: none; }

.menu-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  background: white;
  white-space: nowrap;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.menu-pill:hover,
.menu-pill--active {
  background: #1c1a18;
  color: #fff;
  border-color: #1c1a18;
}

.menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  background: transparent;
  color: #1a1a1a;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.menu-close:hover {
  background: #1c1a18;
  color: #fff;
}

/* Bouton close */
.menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1a1a1a;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.menu-close:hover {
  background: #1c1a18;
  color: #fff;
  border-color: #1c1a18;
}

/* Pills */
.menu-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.menu-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.menu-pill:hover,
.menu-pill--active {
  background: #1c1a18;
  color: #fff;
  border-color: #1c1a18;
}


  /* RESPONSIVE — tablette / mobile */
  @media (max-width: 1024px) {
	.footer-top {
	  grid-template-columns: 1fr 1fr;
	  gap: 40px;
	  padding: 56px 48px 48px;
	}
  
	.footer-wordmark-wrap {
	  padding-left: 24px;
	  margin-bottom: -5%;
	}
  }
  @media (max-width: 860px) {
  
	.hero {
	  height: auto;
	  min-height: 100svh;
	  display: flex;
	  flex-direction: column;
	}
  
	.hero-left {
	  position: relative;
	  inset: auto;
	  flex: none;
	  max-width: 100%;
	  padding: calc(var(--header-h) + 28px) 24px 0;
	  z-index: var(--z-content);
	}
  
	.hero-bottles {
	  position: relative;
	  inset: auto;
	  flex: none;
	  height: clamp(260px, 50vw, 380px);
	  width: 100%;
	  padding-bottom: 0;
	  z-index: var(--z-content);
	}
  
	.hero-terrain {
	  width: 100%;
	  height: 28%;
	}
  
	.hero-caption {
	  position: absolute;
	  top: 230px;
	  inset: auto;
	  max-width: 100%;
	  padding: 20px 24px 48px;
	  color: var(--c-dark);
	  text-shadow: none;
	  z-index: var(--z-content);
	}

	.hero-mountains {
	  height: 65%;
	}

	.hero-bg {
	  height: 100svh;
	}

	.hero-bg::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 30px;
	  background: #f6fcfe;
	  z-index: 1;
	  pointer-events: none;
	}

	#anim-tagline {
	  top: 80px;
	}

	#anim-labels {
	  top: 140px;
	}

	#menu-overlay { padding: 12px 20px; }
	.menu-pills   { gap: 6px; }
	.menu-pill    { padding: 7px 14px; font-size: 11px; }
	#anim-logo {
		position: absolute;
		top: auto;
		left: auto;
		margin: 10px 0 0 24px;
	  }
	  
	  .hero-left {
		padding-top: 16px;
	  }
	.story-section {
		grid-template-columns: 64px 1fr;
		grid-template-rows: auto auto;
	}
	.story-img-landscape {
		grid-column: 1 / 3;
		grid-row: 3;
		height: 260px;
	}
	.product-panel { grid-template-columns: 68px 1fr; }
	.panel-left { padding: 20px 10px; }
	.panel-nav { display: none; }
	.panel-logo-area .logo-svg { width: 120px; }
	.panel-right { padding: 28px 20px 28px 24px; }
	.panel-bottle { height: 60%; opacity: .8; }
  }
  
  @media (max-width: 860px) {
	#menu-overlay {
	  top: 0;
	  right: 0;
	  left: 0;
	  width: 100%;
	  border-radius: 0 0 20px 20px;
	  flex-direction: column;
	  align-items: stretch;
	  padding: 24px 24px 28px;
	  gap: 24px;
	  background: rgba(224, 238, 246, 0.92);
	  transform: translateY(-110%); /* slide desktop désactivé → mobile l'utilise */
	}
  
	.menu-mobile-header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
  
	.menu-logo {
	  display: block;
	  width: 48px;
	  height: auto;
	  fill: #1a1a1a;
	}
  
	.menu-pills {
	  flex-direction: column;
	  gap: 10px;
	}
  
	.menu-pill {
	  width: 100%;
	  justify-content: center;
	  padding: 14px 20px;
	  font-size: 12px;
	}
	.menu-close{
		position: fixed;
		top: 10px;
		right: 5px;
	}
  }
  @media (max-width: 640px) {
	.footer-top {
	  grid-template-columns: 1fr;
	  gap: 36px;
	  padding: 48px 24px 40px;
	}
  
	.footer-col--right {
	  border-top: 1px solid rgba(255, 255, 255, 0.15);
	  padding-top: 32px;
	}
  
	.footer-wordmark-wrap {
	  padding-left: 16px;
	  margin-bottom: -8%;
	}
  }
  @media (max-width: 480px) {
	.logo-wrapper { width: 185px; }
	.btl--1, .btl--4 { display: none; }
	.btl--2 { width: 50px; height: 210px; }
	.btl--3 { width: 50px; height: 230px; }
	.hero-caption { font-size: 13px; }

	.story-logo-col { display: none; }
	.story-section  { grid-template-columns: 1fr; }
	.story-body     { grid-column: 1; }
	.story-img-landscape { grid-column: 1; grid-row: 3; margin-top:17px; }
	.product-panel { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
	.panel-left { flex-direction: row; align-items: center; height: 56px; padding: 0 20px; }
	.panel-logo-area { flex: 0 0 auto; }
	.panel-logo-area .logo-svg { position: static; transform: none; width: 72px; }
	.panel-right { padding: 24px 20px; }
	.panel-bottle { height: 45%; opacity: .55; }
  }

/* PAGE HISTOIRE */

/* Header histoire (spécifique, ne touche pas la home) */
.hist-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 3vw, 40px);
  background: transparent;
  z-index: 100;
}

.hist-header-logo {
  display: block;
  width: clamp(80px, 10vw, 110px);
  color: #1a1a1a;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.15));
  transition: color 0.25s ease, opacity 0.2s;
}

.hist-header-logo:hover,
.hist-header-logo:focus { color: #3d3a36; }   /* hover discret (sinon a:hover → #191970) */
.hist-header-logo svg { width: 100%; height: auto; display: block; }

.hist-btn-menu {
  border-color: rgba(0,0,0,0.35);
  color: #1a1a1a;
  background: transparent;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
/* Hover comme sur l'accueil : bouton rempli, texte inversé (redéfinir color, sinon .btn-menu:hover → blanc sur clair) */
.hist-btn-menu:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

/* Thème clair — logo et bouton indépendants selon ce qu'il y a derrière chacun */
.hist-header--logo-light .hist-header-logo {
  color: #fff;
}
.hist-header--logo-light .hist-header-logo:hover,
.hist-header--logo-light .hist-header-logo:focus { color: #f4f0e7; }   /* logo blanc → crème au survol */
.hist-header--btn-light .hist-btn-menu {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.hist-header--btn-light .hist-btn-menu:hover {
  background: #fff;
  border-color: #fff;
  color: #1a1a1a;
}

/* Menu overlay sur page histoire — fond + centrage */
body:has(.hist-header) #menu-overlay {
  justify-content: center;
  top: 2px;
}
body:has(.hist-header) #menu-overlay .menu-pill {
  padding: 7px 22px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1a1a1a;
  border-color: rgba(0,0,0,0.12);
}
body:has(.hist-header) #menu-overlay .menu-pill:hover,
body:has(.hist-header) #menu-overlay .menu-pill.menu-pill--active {
  background: #1c1a18;
  color: #fff;
  border-color: #1c1a18;
}
body:has(.hist-header) #menu-overlay .menu-close {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.12);
}
body:has(.hist-header) #menu-overlay .menu-close:hover {
  background: #1c1a18;
  color: #fff;
}

/* Hero */
.hist-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hist-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hist-hero-bg img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.hist-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 40, 34, 0.7) 0%,
    rgba(30, 40, 34, 0.2) 40%,
    transparent 70%
  );
}

.hist-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 8vw, 100px) clamp(40px, 6vw, 100px);
  max-width: 700px;
}

.hist-hero-label {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
  padding: 0;
  border: none;
  background: none;
}

.hist-hero-title {
  font-family: var(--font);
  font-size: clamp(52px, 8.5vw, 110px);
  font-weight: 700;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hist-hero-sub {
  font-family: var(--font);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
  margin: 0 0 0;
  line-height: 1.25;
}

.hist-hero-scroll {
  margin-top: 40px;
  opacity: 0.6;
}

/* Container */
.hist-container {
  width: 1200px;
  max-width: 92%;
  margin: 0 auto;
  text-align: center;
}

/* Sections communes */
.hist-section {
  padding: clamp(72px, 9vw, 140px) 0;
}

.hist-section--dark {
  background: #2f3833;
}

.hist-section--dark .hist-section-title,
.hist-section--dark .hist-reseau-text p {
  color: rgba(255,255,255,0.9);
}

.hist-section-title {
  font-family: var(--font);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-dark);
  margin-bottom: clamp(36px, 5vw, 64px);
  position: relative;
  padding-bottom: 20px;
  text-align: left;
}

.hist-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #df6520;
  border-radius: 2px;
}

/* Text commun */
.hist-origin-text p,
.hist-evidence-text p,
.hist-evidence-close,
.hist-terroir-text p,
.hist-reseau-text p,
.hist-production-text p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--c-dark);
  margin-bottom: 1.3em;
  text-align: justify;
}

.hist-lead {
  font-size: clamp(18px, 1.4vw, 22px) !important;
  font-weight: 600;
  line-height: 1.55 !important;
}

/* Images communes */
.hist-origin-img img,
.hist-terroir-img img,
.hist-reseau-img img,
.hist-production-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Image reveal */
.hist-img-reveal {
  overflow: hidden;
  border-radius: 8px;
}
.hist-img-reveal img {
  clip-path: polygon(0% 110%, 100% 100%, 100% 100%, 0% 100%);
  transform: scale(1.08);
  will-change: clip-path, transform;
}

/* Origin */
.hist-origin-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.hist-origin-img {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}

.hist-origin-img img {
  aspect-ratio: 3 / 4;
}

/* Full-width image */
.hist-fullimg {
  width: 100%;
  height: 75vh;
  min-height: 450px;
  overflow: hidden;
  position: relative;
}

.hist-fullimg img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  display: block;
  will-change: transform;
}

/* Evidence */
.hist-evidence-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.hist-accent {
  font-weight: 700 !important;
  font-size: clamp(18px, 1.4vw, 24px) !important;
  color: #df6520 !important;
  font-style: italic;
  line-height: 1.5;
  margin: 32px 0;
  padding-left: 24px;
  border-left: 3px solid #df6520;
  text-align: left;
}

.hist-evidence-close {
  color: rgba(26,26,26,0.65);
}

/* Citation */
.hist-quote-section {
  background: #2f3833;
  padding: clamp(80px, 10vw, 160px) clamp(32px, 6vw, 80px);
}

.hist-quote-wrap {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hist-quote {
  margin: 0;
  position: relative;
}

.hist-quote-mark {
  display: block;
  font-family: Georgia, serif;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.5;
  color: #df6520;
  margin-bottom: 28px;
}

.hist-quote p {
  font-family: var(--font);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin: 0;
}

.hist-quote-author {
  margin-top: 36px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* Terroir */
.hist-terroir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  text-align: justify;
}

.hist-terroir-images {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hist-terroir-img {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.hist-terroir-img img {
  aspect-ratio: 3 / 2;
}

.hist-terroir-img figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Réseau */
.hist-reseau-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.hist-reseau-img {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

.hist-reseau-img img {
  aspect-ratio: 3 / 2;
}

/* Production */
.hist-production-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.hist-production-img {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.hist-production-img img {
  aspect-ratio: 3 / 4;
}

.hist-raisons {
  margin-top: 36px;
  padding: 36px;
  background: rgba(47, 56, 51, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(47, 56, 51, 0.08);
}

.hist-raisons-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.hist-raisons-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hist-raisons-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-dark);
  margin-bottom: 14px;
}

.hist-raisons-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #df6520;
}

/* Responsive Histoire */
@media (max-width: 860px) {
  .hist-hero {
    height: 75vh;
    min-height: 400px;
  }

  .hist-origin-grid,
  .hist-terroir-grid,
  .hist-reseau-grid,
  .hist-production-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hist-production-img { position: static; }
  .hist-fullimg { height: 40vh; min-height: 240px; }
}

@media (max-width: 480px) {
  .hist-hero-title { font-size: 32px; }
  .hist-hero-sub { font-size: 16px; }
  .hist-quote p { font-size: 18px; }
  .hist-section { padding: 56px 0; }
  .hist-header-logo { width: 72px; }
}

/* PAGE BOISSONS */

/* Hero */
.boi-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.boi-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.boi-hero-bg img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
}

.boi-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 40, 34, 0.75) 0%,
    rgba(30, 40, 34, 0.25) 40%,
    transparent 70%
  );
}

.boi-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(48px, 8vw, 100px) clamp(40px, 6vw, 100px);
  text-align: left;
}

.boi-hero-title {
  font-family: var(--font);
  font-size: clamp(52px, 8.5vw, 110px);
  font-weight: 700;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.boi-hero-sub {
  font-family: var(--font);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
  margin: 0 0 44px;
  line-height: 1.25;
}

.boi-hero-sub::before,
.hist-hero-sub::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: #df7020;
  border-radius: 2px;
  margin-bottom: 18px;
}

.boi-hero-select {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.boi-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 28px;
  border-radius: 100px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.28s, border-color 0.28s, color 0.28s, transform 0.22s, box-shadow 0.22s;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.boi-pill:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.95);
  color: #1e2e26;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

/* Container */
.boi-container {
  width: 1200px;
  max-width: 92%;
  margin: 0 auto;
  min-width: 0; /* sans ça, les enfants de grille refusent de rétrécir sous leur contenu */
}

/* Sections */
.boi-section {
  padding: clamp(64px, 8vw, 120px) 0;
}

.boi-section-title {
  font-family: var(--font);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 8px;
}

.boi-subtitle {
  font-family: var(--font);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
  font-style: italic;
  color: #df6520;
  margin-bottom: 28px;
}

.boi-section p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.8;
  color: var(--c-dark);
  margin-bottom: 1em;
  text-align: justify;
}

.boi-format {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(26,26,26,0.5) !important;
  margin-top: 16px;
}

/* Intro grid */
.boi-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.boi-intro-grid > * {
  min-width: 0;
}

.boi-intro-img {
  margin: 0;
}

.boi-intro-img {
  position: relative;
}
.boi-intro-img .boi-intro-bottles {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
/* Ombres sous les bouteilles : centrées sur chaque pied (gauche 23 %, droite 74 % de la largeur) */
.boi-intro-shadow {
  position: absolute;
  z-index: 0;
  width: 46%;
  height: auto;
  transform: translate(-50%, 45%);
  pointer-events: none;
}
.boi-intro-shadow--l { left: 23.2%; bottom: 2.1%; }
.boi-intro-shadow--r { left: 74.4%; bottom: 1.3%; }

/* Product sections */
.boi-products-wrap {
  position: relative;
}

.boi-product {
  display: grid;
  grid-template-columns: 10% minmax(0, 1fr);
  min-height: 100vh;
  background: url(/wp-content/uploads/2026/06/FOND_PAPIER-min.jpg) center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.boi-product .boi-product-sidebar {
  background: var(--accent, #333);
}

.boi-product .boi-container {
  padding: clamp(56px, 7vw, 100px) 0;
  align-self: center;   /* contenu centré verticalement dans la section (100vh) */
}

.boi-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.boi-product-grid > * {
  min-width: 0;
}

.boi-product-grid--reverse {
  direction: rtl;
}

.boi-product-grid--reverse > * {
  direction: ltr;
}

/* Bottle visual */
.boi-product-bottle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Aquarelles : leur base (thé, sureau, gingembre, ombre de la pomme) est posée sur la même
   ligne que le pied de la bouteille ; --dx décale l'image pour placer la bouteille au bon endroit
   de la composition. Largeurs calées sur une bouteille de 460 px de haut. */
.boi-product-bg {
  position: absolute;
  height: auto;
  z-index: 0;
  pointer-events: none;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  width: var(--w, 260px);
  max-width: none;
}

#kombucha-1 .boi-product-bg { --w: 400px; --dx: -70px; bottom: -1%; }   /* verveine derrière, thé au pied gauche */
#kombucha-2 .boi-product-bg { --w: 470px; --dx: 30px;  bottom: -1%; }    /* sureau à gauche, coing à droite */
#ginger     .boi-product-bg { --w: 400px; --dx: -30px; bottom: -2%; }     /* verveine derrière, rondelles au pied droit */
#jus        .boi-product-bg { --w: 250px; --dx: 85px;  bottom: -2%; }   /* pomme posée derrière, à droite */

.boi-product-shadow {
  position: absolute;
  bottom: -1.5%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 200px;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.boi-product-bottle {
  position: relative;
  z-index: 2;
  max-height: 460px;
  width: auto;
}

/* Product info */
.boi-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.boi-tag {
  padding: 4px 14px;
  border-radius: 100px;
  color: var(--tk, #fff);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.boi-product-title {
  font-family: var(--font);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-dark);
  margin-bottom: 12px;
}

.boi-product-hook {
  font-size: clamp(15px, 1.1vw, 17px) !important;
  font-weight: 600;
  font-style: italic;
  color: var(--accent, #333) !important;
  margin-bottom: 20px !important;
}

.boi-product-desc p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.75;
  color: rgba(26,26,26,0.7);
  margin-bottom: 12px;
  text-align: justify;
}

/* Dots navigation */
.boi-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.boi-dots.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.boi-dot {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  text-decoration: none;
}

.boi-dot span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(26,26,26,0.3);
  background: transparent;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.boi-dot--active span {
  background: var(--c-dark, #1a1a1a);
  border-color: var(--c-dark, #1a1a1a);
  transform: scale(1.3);
}

.boi-dot:hover span {
  border-color: var(--c-dark, #1a1a1a);
  transform: scale(1.2);
}

.boi-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-dark);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 5px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.boi-dot:hover::after {
  opacity: 1;
}

/* Responsive boissons */
@media (max-width: 860px) {
  .boi-intro-grid,
  .boi-product-grid,
  .boi-product-grid--reverse {
    grid-template-columns: minmax(0, 1fr);
    direction: ltr;
    gap: 32px;
  }

  .boi-product {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    border-radius: 0;
  }

  .boi-product .boi-container {
    padding: 56px 0;
  }

  .boi-product-sidebar {
    display: none;
  }

  .boi-product-visual {
    order: -1;
  }

  .boi-product-bottle-wrap {
    min-height: 300px;
  }

  .boi-product-bottle {
    max-height: 300px;
  }

  /* Fonds décoratifs — recentrés et réduits pour ne pas déborder */
  /* Aquarelles : même calage qu'en desktop, à l'échelle de la bouteille (300 / 460) */
  #kombucha-1 .boi-product-bg { --w: 260px; --dx: -46px; }
  #kombucha-2 .boi-product-bg { --w: 306px; --dx: 20px; }
  #ginger     .boi-product-bg { --w: 260px; --dx: -6px; }
  #jus        .boi-product-bg { --w: 163px; --dx: 55px; }

  .boi-product-info {
    text-align: center;
  }

  .boi-product-tags {
    justify-content: center;
  }

  .boi-product-desc {
    max-width: 480px;
    margin: 0 auto;
  }

  .boi-hero {
    height: 75vh;
    min-height: 420px;
  }

  .boi-hero-title {
    font-size: clamp(40px, 10vw, 72px);
  }

  .boi-hero-sub {
    font-size: clamp(16px, 3vw, 22px);
    margin-bottom: 32px;
  }

  .boi-hero-select {
    justify-content: flex-start;
  }

  .boi-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .boi-hero {
    padding: 0;
  }

  .boi-hero-inner {
    padding: 0 24px 40px;
  }

  .boi-hero-title {
    font-size: 32px;
  }

  .boi-hero-sub {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .boi-pill {
    padding: 8px 20px;
    font-size: 12px;
  }

  .boi-section {
    padding: 48px 0;
  }

  .boi-product .boi-container {
    padding: 40px 0;
  }

  .boi-product-bottle-wrap {
    min-height: 240px;
  }

  .boi-product-bottle {
    max-height: 240px;
  }

  /* Aquarelles à l'échelle d'une bouteille de 240 px */
  #kombucha-1 .boi-product-bg { --w: 209px; --dx: -37px; }
  #kombucha-2 .boi-product-bg { --w: 245px; --dx: 16px; }
  #ginger     .boi-product-bg { --w: 209px; --dx: -5px; }
  #jus        .boi-product-bg { --w: 130px; --dx: 44px; }

  .boi-product-title {
    font-size: 22px;
  }
}

/* BACK TO TOP (toutes les pages) */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #df7020;
}

@media (max-width: 480px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* Mobile (max-width: 860px)
   (anciennement style-mobile.css, fusionné ici
   pour ne charger qu'une seule feuille de style) */
@media (max-width: 860px) {

    :root {
      --header-h: 100px;
    }

    /* GLOBALS */
    body { overflow-x: hidden; }

    /* Logo hero : réduit sur tablette/mobile pour ne pas couvrir le tagline */
    .logo-wrapper { width: clamp(150px, 42vw, 185px) !important; }

    /* MENU */
    #btn-menu { display: flex; }

    /* HERO */
    .hero {
        position: relative;
        height: 100svh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #71bde1;
      }
        /* BG — couvre tout depuis le bord haut */
    .hero-bg {
        position: absolute;
        inset: 0;        /* top/right/bottom/left: 0 */
        z-index: 0;
    }
    .hero-section {
      flex-direction: column;
      height: 100svh;
      padding: 0;
      position: relative;
      overflow: hidden;
    }


    .hero-right {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
    }
      .hero-bottles {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        margin: 0;
        padding: 0;
      }
    .bottles-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: fill !important;
        object-position: center bottom;
        display: block;
        /* Image bouteilles optimisée mobile (remplit 100% de la largeur) */
        content: url('/wp-content/uploads/2026/06/GAMME-PURES-MOBILE-m.png');
      }
    /* Positionnement */
    .hero-mountains {
        position: absolute;
        top: 30px;
        left: 0;
        width: 100%;
        height: 55%;
        object-fit: cover;
        object-position: top center;
      }

    /* Texte en haut, au-dessus de l'image */
    .hero-left {
        position: relative;
        z-index: 2;
        padding: 96px 24px 0;   /* espace pour le logo au-dessus */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex: none;
      }
      #anim-tagline {
        font-size: clamp(26px, 8vw, 38px);
        line-height: 1.15;
        top: 80px;
        left: 23px;
      }

      #anim-labels {
        flex-wrap: wrap;
        gap: 1px;

        left: 20px;
        top: 140px;
      }

    /* À droite des étiquettes, sous le slogan (libre entre le slogan et l'accroche) */
    #anim-macaron {
      position: absolute;
      left: auto;
      right: 24px;
      top: 148px;
      width: 72px;
      height: 72px;
    }

    #hero-caption {
      font-size: 13px;
      margin-top: 12px;
      position: absolute;
      top: 230px;
    }

    /* LOGO SCROLLANT (désactivé mobile) */
    #story-logo,
    #logo-white-clipper { display: none !important; }

    /* STORY */
    .story-section {
      flex-direction: column !important;
      padding: 64px 24px 56px;
      gap: 0;
    }

    .story-logo-col { display: none !important; }

    .story-body {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .story-title {
      font-size: clamp(22px, 6vw, 32px);
      margin-bottom: 24px;
    }

    .story-text {
      font-size: 15px;
      line-height: 1.7;
    }

    .story-images,
    .story-photos {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 32px;
    }

    .story-images img,
    .story-photos img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      object-fit: cover;
    }

    /* PRODUCT SECTION */
    .product-section {
      height: auto !important;
      transform: none !important;
      overflow: visible !important;
      display: block !important;
    }

    /* Pin-spacer créé par ScrollTrigger — on le neutralise */
    .pin-spacer {
      height: auto !important;
      padding: 0 !important;
    }

    .product-panel {
      position: relative !important;
      transform: none !important;
      width: 100% !important;
      height: auto !important;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Force visibilité — le JS desktop masque ces éléments */
    .product-panel .panel-title,
    .product-panel .panel-desc,
    .product-panel .panel-cta,
    .product-panel .panel-vol,
    .product-panel .panel-tags,
    .product-panel .panel-bottle {
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
    }

    /* PANEL NAV (horizontal scroll) */
    .panel-left {
      position: static !important;
      width: 100% !important;
      height: auto !important;
      flex: none;
    }

    .panel-nav {
      position: static !important;
      width: auto !important;
      transform: none !important;
      display: flex !important;
      flex-direction: row !important;
      overflow-x: auto !important;
      gap: 24px !important;
      padding: 20px 24px !important;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .panel-nav::-webkit-scrollbar { display: none; }

    .pn-item-sub { display: none !important; }

    .pn-item {
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      font-size: 11px !important;
      letter-spacing: 0.14em !important;
    }

    /* PANEL RIGHT */
    .panel-right {
      flex: 1;
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      padding: 24px 24px 48px !important;
      gap: 12px;
    }

    /* BOUTEILLE */
    .panel-bottle-wrap {
      order: 0;
      margin-top: 100px;
    }

    .panel-bottle {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      width: auto !important;
      max-width: 130px !important;
      height: auto !important;
      max-height: 38vh !important;
      margin: 8px auto 0 !important;
      object-fit: contain !important;
    }

    .panel-bottle-bg,
    .panel-bottle-shadow {
      display: none !important;
    }

    /* TEXTES PANEL */
    .panel-tags {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 8px !important;
      transform: none !important;
      order: 0;
    }

    .panel-vol {
      transform: none !important;
      text-align: center !important;
      order: 1;
    }

    .panel-title {
      position: static !important;
      transform: none !important;
      font-size: clamp(20px, 5.5vw, 28px) !important;
      text-align: center !important;
      line-height: 1.2 !important;
      order: 2;
    }

    .panel-desc {
      transform: none !important;
      font-size: 13px !important;
      line-height: 1.65 !important;
      text-align: center !important;
      order: 3;
    }

    .panel-cta {
      transform: none !important;
      order: 4;
      margin-top: 8px;
    }

    /* AVIS */
    .avis-section { padding: 48px 0 56px; }

    .avis-header,
    .avis-footer  { padding: 0 24px; }

    .avis-track {
      padding: 0 24px;
      gap: 16px;
    }

    .avis-card {
      width: 76vw;
      max-width: 300px;
      padding: 28px 24px;
    }

    .avis-quote { font-size: 40px; }
    .avis-text  { font-size: 16px; }

    .avis-scrollbar-wrap { margin-top: 24px; }

    /* TICKER */
    .ticker-band { padding: 12px 0; }

    /* FOOTER */
    .footer-top {
      grid-template-columns: 1fr !important;
      gap: 36px !important;
      padding: 48px 24px 40px !important;
    }

    .footer-bottom {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 20px 24px !important;
      gap: 12px !important;
    }

    .footer-legal {
      flex-wrap: wrap !important;
      gap: 12px !important;
    }

    .footer-wordmark-wrap {
      padding-left: 12px !important;
      margin-bottom: -3% !important;
    }

} /* fin @media (max-width: 768px) */

/* CURSEUR PROGRESSION — product panels */
.scroll-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 8px rgba(223,112,32,0.35));
}

/* PAGE CONTACT */

/* Header contact */
.contact-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 3vw, 40px);
  z-index: 100;
  pointer-events: none;
}

.contact-header-logo {
  display: block;
  width: clamp(80px, 10vw, 110px);
  color: #fff;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.25));
  transition: opacity 0.2s;
  pointer-events: auto;
}
.contact-header-logo { transition: color 0.25s ease; }
/* Hover discret : blanc → crème (redéfini pour battre a:hover/a:focus d'Underscores → #191970) */
.contact-header-logo:hover,
.contact-header-logo:focus { color: #f4f0e7; }
.contact-header-logo svg { width: 100%; height: auto; display: block; }

.contact-btn-menu {
  border-color: rgba(0,0,0,0.28);
  color: #2f3833;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  transition: background 0.2s, color 0.2s;
}
.contact-btn-menu:hover {
  background: #2f3833;
  border-color: #2f3833;
  color: #fff;
}

/* Menu overlay sur page contact */
body:has(.contact-header) #menu-overlay {
  justify-content: center;
  top: 2px;
}
body:has(.contact-header) #menu-overlay .menu-pill {
  padding: 7px 22px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #2f3833;
  border: 1px solid rgba(47,56,51,0.15);
  border-radius: 100px;
}
body:has(.contact-header) #menu-overlay .menu-pill:hover,
body:has(.contact-header) #menu-overlay .menu-pill.menu-pill--active {
  background: #2f3833;
  color: #fff;
  border-color: #2f3833;
}
body:has(.contact-header) #menu-overlay .menu-close {
  color: #2f3833;
}

/* Layout principal */
.ct-main {
  display: flex;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Panneau gauche — photo + déco */
.ct-left {
  position: relative;
  z-index: 2;
  width: 42%;
  min-height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
}

.ct-left-bg {
  position: absolute;
  inset: 0;
}
.ct-left-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ct-left-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,28,22,0.82) 0%,
    rgba(30,52,40,0.65) 50%,
    rgba(15,28,22,0.78) 100%
  );
}

/* Aquarelles décoratives */
.ct-aqua {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Aquarelle frontière — sort de derrière le panneau gauche */
.ct-aqua--boundary {
  width: 82%;
  bottom: -1%;
  left: -44%;
  z-index: 1;
  opacity: 1;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
}

/* Pomme — bas-droit du panneau droit */
.ct-aqua--3 {
  width: 50%;
  bottom: -6%;
  right: -6%;
  opacity: 1;
  mix-blend-mode: multiply;
}

/* Contenu texte panneau gauche */
.ct-left-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(80px, 10vh, 120px) clamp(32px, 5vw, 60px) clamp(48px, 7vh, 80px);
}

.ct-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.2rem;
  font-family: var(--font);
}

.ct-title {
  margin: 0 0 1.8rem;
  line-height: 0.9;
  overflow: hidden;
}
.ct-title-line {
  display: block;
  /* 32vw ≈ largeur disponible (42vw panel - ~10vw padding) ; 9 chars → max ~3.5vw/char */
  font-size: clamp(36px, min(6.5vw, calc((42vw - clamp(64px, 10vw, 120px)) / 9.2)), 88px);
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.ct-title-line--accent {
  color: #df7020;
}

.ct-divider {
  width: 40px;
  height: 1.5px;
  background: rgba(223,112,32,0.6);
  margin-bottom: 2rem;
}

.ct-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ct-info li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  font-family: var(--font);
  letter-spacing: 0.02em;
}
.ct-info svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Panneau droit — formulaire */
.ct-right {
  flex: 1;
  min-height: 100vh;
  background: #faf7f2;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  z-index: 1;
}

.ct-form-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(90px, 12vh, 130px) clamp(32px, 5vw, 64px) clamp(48px, 7vh, 80px);
}

.ct-form-header {
  margin-bottom: 2.5rem;
}

.ct-form-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #df7020;
  margin: 0 0 0.7rem;
  font-family: var(--font);
}

.ct-form-title {
  font-size: clamp(24px, 3vw, 36px);
  font-family: var(--font);
  font-weight: 600;
  color: #1e2e26;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Champs formulaire */
.ct-fields {
  display: flex;
  flex-direction: column;
}

.ct-field {
  margin-bottom: 2rem;
}

/* Label toujours au-dessus */
.ct-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #df7020;
  margin-bottom: 0.5rem;
  font-family: var(--font);
  pointer-events: none;
}
.ct-label em {
  font-style: normal;
  opacity: 0.65;
}

/* Conteneur input + ligne animée */
.ct-input-wrap {
  position: relative;
}

/* Override agressif des styles WordPress/theme sur les inputs */
.ct-form .ct-input {
  display: block !important;
  width: 100% !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(47,56,51,0.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 8px 0 14px !important;
  font-size: 1.08rem !important;
  font-family: var(--font) !important;
  color: #1e2e26 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
  transition: border-color 0.3s !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.ct-form .ct-input:focus {
  border-bottom-color: #df7020 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ligne orange animée au bas du champ */
.ct-line {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #df7020;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.ct-form .ct-input:focus ~ .ct-line {
  width: 100%;
}

/* Textarea */
.ct-field--textarea {}
.ct-textarea {
  resize: none !important;
  min-height: 110px !important;
  line-height: 1.65 !important;
}

/* Bouton submit */
.ct-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

.ct-required-note {
  font-size: 0.68rem;
  color: rgba(47,56,51,0.4);
  font-family: var(--font);
  margin: 0;
  letter-spacing: 0.04em;
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: #df7020;
  color: #fff;
  border: none;
  padding: 0.85rem 1.8rem;
  font-size: 0.82rem;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.25s;
}
.ct-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ct-submit:hover::before { transform: translateX(0); }
.ct-submit:hover { background: #c8631a; }
.ct-submit:active { background: #b55717; }

.ct-submit-icon {
  display: flex;
  align-items: center;
  transition: transform 0.25s;
}
.ct-submit:hover .ct-submit-icon { transform: translateX(4px); }

/* État d'erreur */
.ct-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(220,40,40,0.07);
  border-left: 2.5px solid #c0392b;
  color: #c0392b;
  padding: 0.75rem 1rem;
  font-size: 0.83rem;
  font-family: var(--font);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
.ct-error svg { flex-shrink: 0; margin-top: 1px; }

/* État de confirmation */
.ct-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.ct-success-icon {
  margin-bottom: 0.5rem;
}

.ct-success-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-family: var(--font);
  font-weight: 600;
  color: #1e2e26;
  margin: 0;
  letter-spacing: -0.01em;
}

.ct-success-text {
  font-size: 0.95rem;
  font-family: var(--font);
  color: rgba(47,56,51,0.65);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}

.ct-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #df7020;
  text-decoration: none;
  margin-top: 0.5rem;
  border-bottom: 1px solid rgba(223,112,32,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.ct-back-link:hover { border-color: #df7020; }

/* Responsive mobile */
@media (max-width: 768px) {
  .ct-main {
    flex-direction: column;
  }

  /* Panneau gauche : hero avec infos */
  .ct-left {
    width: 100%;
    min-height: 52vw;
    max-height: 340px;
    flex-shrink: 0;
  }
  .ct-left-content {
    padding: 56px 24px 22px;
    justify-content: flex-end;
    gap: 0;
  }
  .ct-eyebrow {
    display: none;
  }
  .ct-divider {
    width: 28px;
    margin-bottom: 0.9rem;
  }
  .ct-title {
    margin-bottom: 0.7rem;
  }
  .ct-title-line {
    font-size: clamp(28px, min(9vw, calc((100vw - 48px) / 9.2)), 52px);
  }
  .ct-info {
    display: flex;
    gap: 0.5rem;
  }
  .ct-info li {
    font-size: 0.74rem;
    gap: 0.45rem;
  }
  .ct-info svg {
    width: 12px;
    height: 12px;
  }

  /* Panneau droit */
  .ct-right {
    min-height: unset;
    align-items: flex-start;
  }
  .ct-form-wrap {
    padding: 36px 24px 52px;
  }
  .ct-submit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .ct-submit {
    width: 100%;
    justify-content: center;
  }

  /* Aquarelles mobile — opacité réduite */
  .ct-aqua--boundary {
    width: 120%;
    left: -50%;
    bottom: -2%;
    opacity: 0.35;
  }
  .ct-aqua--3 {
    width: 65%;
    right: -8%;
    opacity: 0.3;
  }
  .contact-header-logo { color: #fff; }
}


/* PAGE POINTS DE VENTE (template-points-de-vente.php) */

/* Header : réutilise .contact-header, mais logo vert sur fond crème et non fixe */
.pdv-header { position: absolute; }
.pdv-header .contact-header-logo { color: #2f3833; filter: none; }   /* même couleur que le logo de l'accueil */
.pdv-header .contact-header-logo:hover,
.pdv-header .contact-header-logo:focus { color: #4b5650; }

.pdv-main {
  position: relative;
  overflow: hidden;
  overflow: clip;   /* clip ne crée pas de conteneur de scroll → .pdv-map reste sticky */
  background: #f4f0e7;
  color: #2f3833;
  font-family: var(--font);
  padding: clamp(110px, 14vh, 150px) clamp(20px, 5vw, 72px) 0;
}

/* Aquarelles */
.pdv-aqua {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.pdv-aqua--2 { width: clamp(160px, 18vw, 280px); bottom: 6%; left: -4%; opacity: 0.4; }

.pdv-hero,
.pdv-body,
.pdv-cta { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }

/* En-tête : titre à gauche, intro à droite, filet dessous */
.pdv-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: end;
}
.pdv-hero-head { min-width: 0; }
.pdv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #df7020;
  margin-bottom: 1.1rem;
}
.pdv-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: currentColor; }
.pdv-title {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #2f3833;
}
.pdv-title-accent { color: #2d6b3c; }
.pdv-hero-side { padding-bottom: 0.4rem; }
.pdv-intro {
  margin: 0 0 1rem;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  color: rgba(47,56,51,0.85);
}
.pdv-count {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47,56,51,0.6);
}
.pdv-count strong { color: #2d6b3c; font-size: 1.15em; letter-spacing: 0; }

.pdv-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(47,56,51,0.14);
}
.pdv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid rgba(47,56,51,0.15);
  background: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2f3833;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pdv-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.pdv-chip:hover { background: var(--c); border-color: var(--c); color: #fff; }
.pdv-chip:hover::before { background: #fff; }

/* Carte + liste */
.pdv-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 72px);
}

.pdv-map {
  position: sticky;
  top: var(--pdv-map-top, 24px);   /* calculé en JS : carte centrée verticalement dans l'écran */
  z-index: 0;
}
/* Carte détourée (WebP transparent) : posée directement sur le fond crème */
.pdv-map-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.pdv-map-btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.pdv-map-btn:hover img { transform: scale(1.02); }
.pdv-map-zoom {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  background: #2f3833;
  color: #fff;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pdv-sect { margin-bottom: clamp(32px, 4vh, 48px); scroll-margin-top: 24px; }
.pdv-sect-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--c);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
}
.pdv-sect-title span {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--c);
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  letter-spacing: 0;
}

.pdv-points { list-style: none; margin: 0; padding: 0; }
.pdv-point a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.pdv-point a:hover { background: rgba(255,255,255,0.75); }
.pdv-num {
  position: relative;
  isolation: isolate;
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  font-feature-settings: 'tnum';
}
/* Forme de pin (comme sur la carte), le chiffre reste droit */
.pdv-num::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #1c1a18;
  transition: background 0.2s;
}
.pdv-point a:hover .pdv-num::before { background: var(--c); }
.pdv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdv-name { font-weight: 700; font-size: 1rem; }
.pdv-addr { font-size: 0.88rem; color: rgba(47,56,51,0.7); line-height: 1.4; }
.pdv-go {
  flex: 0 0 auto;
  color: var(--c);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.pdv-point a:hover .pdv-go,
.pdv-point a:focus-visible .pdv-go { opacity: 1; transform: none; }


/* Bas de page */
.pdv-cta {
  margin-top: clamp(40px, 8vh, 96px);
  padding: clamp(48px, 8vh, 88px) 0 clamp(64px, 10vh, 110px);
  border-top: 1px solid rgba(47,56,51,0.12);
  text-align: center;
}
.pdv-cta-title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #2d6b3c;
  letter-spacing: -0.01em;
}
.pdv-cta-text { max-width: 520px; margin: 0 auto 1.8rem; line-height: 1.55; }
.pdv-cta-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.9rem;
  border-radius: 100px;
  background: #df7020;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s;
}
/* Hover repris du bouton « Envoyer » de la page contact (.ct-submit) */
.pdv-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pdv-cta-btn:hover::before { transform: translateX(0); }
.pdv-cta-btn:hover { background: #c8631a; color: #fff; }   /* sinon a:hover (Underscores) → midnightblue */
.pdv-cta-btn:active { background: #b55717; }
.pdv-cta-btn span, .pdv-cta-btn svg { position: relative; }
.pdv-cta-btn svg { transition: transform 0.25s; }
.pdv-cta-btn:hover svg { transform: translateX(4px); }

/* Carte agrandie */
.pdv-lightbox {
  width: min(94vw, 900px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: auto;
  background: #f4f0e7;
}
.pdv-lightbox::backdrop { background: rgba(28,26,24,0.75); backdrop-filter: blur(4px); }
.pdv-lightbox img { display: block; width: 100%; height: auto; }
.pdv-lightbox-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px -56px 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #2f3833;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}

/* Mobile */
@media (max-width: 860px) {
  .pdv-main { padding: 96px 16px 0; }
  .pdv-aqua--2 { display: none; }
  .pdv-hero { grid-template-columns: 1fr; gap: 20px; }
  .pdv-title { font-size: clamp(36px, 10.5vw, 52px); }
  .pdv-chips { padding-top: 20px; margin-top: 4px; }
  .pdv-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 6px;
    scrollbar-width: none;
  }
  .pdv-chips::-webkit-scrollbar { display: none; }
  .pdv-chip { white-space: nowrap; }
  .pdv-body { grid-template-columns: 1fr; gap: 36px; }
  .pdv-map { position: static; }
  .pdv-go { opacity: 1; transform: none; }
}

/* ACCUEIL — Macaron bio (logo AB)
   Charte AB : logo jamais tourné, déformé ni recoloré → seul l'anneau tourne. */
.ab-badge {
  --ab-gap: clamp(28px, 4.5vw, 72px);   /* même marge en bas et à droite */
  position: absolute;
  right: var(--ab-gap);
  bottom: var(--ab-gap);
  z-index: calc(var(--z-content) + 1);
  width: clamp(92px, 7.5vw, 120px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(30, 60, 40, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.ab-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Anneau et disque central translucides ; logo AB détouré (PNG) */
.ab-badge-disc { fill: #fff6; }
.ab-badge-line { fill: none; stroke: #2d6b3c; stroke-width: 0.8; stroke-dasharray: 2 3; opacity: 0.5; }
.ab-badge-ring text {
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: #2d6b3c;
}

/* Mobile : taille et position calculées en JS (template-home.php) d'après l'image des bouteilles */
@media (max-width: 860px) {
  .ab-badge { width: 100px; right: auto; left: 14px; bottom: auto; top: 50%; }
}

/* POINTS DE VENTE v2 — carte interactive (Leaflet + OSM) */
/* .pdv-map (sticky en desktop) sert de repère aux boutons de zones posés dans la carte :
   le bloc centré verticalement = la carte seule */
/* v2 : carte 60 % / liste 40 % (desktop) */
.pdv-body--live { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); }
.pdv-leaflet {
  height: min(74vh, 720px);
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  background: #eef0d8;
  box-shadow: 0 0 0 1px rgba(47,56,51,0.10), 0 18px 40px -24px rgba(47,56,51,0.35);
  z-index: 0;
}
/* Fond OSM recoloré : vert-jaune pâle et crème, comme la carte illustrée */
.pdv-leaflet .leaflet-tile-pane {
  filter: grayscale(1) sepia(0.45) hue-rotate(28deg) saturate(1.15) brightness(1.06) contrast(0.92);
}
.pdv-leaflet .leaflet-control-attribution {
  background: rgba(244,240,231,0.85);
  font-family: var(--font);
  font-size: 10px;
}
.pdv-leaflet .leaflet-control-zoom a {
  font-family: var(--font);
  color: #2f3833;
}

/* Pins : goutte noire numérotée (même forme que la liste) ; couleur du secteur au survol */
.pdv-pin-wrap { background: none; border: 0; }
.pdv-pin {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s;
  transform-origin: 50% 120%;
}
.pdv-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #1c1a18;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transition: background 0.2s;
}
.pdv-pin-wrap:hover .pdv-pin,
.pdv-pin-wrap.is-active .pdv-pin { transform: scale(1.25); }
.pdv-pin-wrap:hover .pdv-pin::before,
.pdv-pin-wrap.is-active .pdv-pin::before { background: var(--c); }

.pdv-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  background: #f4f0e7;
  box-shadow: 0 10px 30px -10px rgba(47,56,51,0.4);
}
.pdv-popup .leaflet-popup-tip { background: #f4f0e7; }
.pdv-popup .leaflet-popup-content {
  margin: 12px 16px;
  font-family: var(--font);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #2f3833;
}
.pdv-popup a { color: #df7020; font-weight: 700; text-decoration: none; }
.pdv-popup a:hover { color: #c8631a; }

/* Boutons de zones : en surimpression en bas à gauche de la carte (desktop), sous la carte en mobile */
.pdv-zones {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 500;   /* au-dessus des calques Leaflet (400) */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 140px);   /* laisse la place à la mention © OpenStreetMap */
}
.pdv-zones .pdv-zone:not(.is-active) { background: rgba(255,255,255,0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pdv-zone {
  padding: 7px 14px;
  border: 1px solid rgba(47,56,51,0.18);
  border-radius: 100px;
  background: rgba(255,255,255,0.7);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f3833;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pdv-zone:hover,
.pdv-zone.is-active { background: #2f3833; border-color: #2f3833; color: #fff; }

/* Adresse ciblée depuis un pin */
@keyframes pdv-flash { 0%, 60% { background: rgba(223,112,32,0.14); } 100% { background: transparent; } }
.pdv-point.is-flash a { animation: pdv-flash 1.6s ease-out; }

@media (max-width: 860px) {
  .pdv-body--live { grid-template-columns: 1fr; gap: 36px; }
  .pdv-zones { position: static; max-width: none; margin-top: 12px; }
  .pdv-leaflet { height: 62vh; min-height: 340px; border-radius: 14px; }
}

/* Groupes de pins (markercluster) : pastille verte avec le nombre de points */
.pdv-cluster { background: none; }
.pdv-cluster span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2d6b3c;
  box-shadow: 0 0 0 5px rgba(45,107,60,0.22), 0 4px 10px rgba(0,0,0,0.2);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.2s, background 0.2s;
}
.pdv-cluster:hover span,
.pdv-cluster.is-active span { transform: scale(1.15); background: #df7020; box-shadow: 0 0 0 5px rgba(223,112,32,0.25), 0 4px 10px rgba(0,0,0,0.2); }

/* v2 : titre de secteur cliquable → zoom sur la carte */
.pdv-sect-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pdv-sect-zoom-ico {
  margin-left: auto;
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s;
}
.pdv-sect-zoom:hover .pdv-sect-zoom-ico,
.pdv-sect-zoom:focus-visible .pdv-sect-zoom-ico { opacity: 1; transform: scale(1.15); }