html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}  body {
margin: 0;
} main {
display: block;
} h1 {
font-size: 2em;
margin: 0.67em 0;
}  hr {
box-sizing: content-box;
height: 0;
overflow: visible;
} pre {
font-family: monospace, monospace;
font-size: 1em;
}  a {
background-color: transparent;
} abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
} b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
}  button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
} button,
input {
overflow: visible;
} button,
select {
text-transform: none;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
padding: 0.35em 0.75em 0.625em;
} legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
} [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
outline-offset: -2px;
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}  details {
display: block;
} summary {
display: list-item;
}  template {
display: none;
} [hidden] {
display: none;
}  *,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}  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%;
} 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;
} embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
} a {
color: #4169e1;
}
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
} 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%;
}   .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;
} .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%;
} .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;
} .comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
} .widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
} .page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
} .custom-logo-link {
display: inline-block;
} .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;
} .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;
}   .infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
} .infinity-end.neverending .site-footer {
display: block;
}   .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;
} #primary[tabindex="-1"]:focus {
outline: 0;
} .alignleft { float: left; margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright { float: right; margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
} :root {
--color-primary-dark: #233026; --color-accent-blue: #a3c9db; --color-accent-sand: #d1a17b; --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;
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-light);
}
::-webkit-scrollbar-thumb {
background: var(--color-accent-sand);
border-radius: 4px;
} :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 {
position: fixed;
inset: 0;
z-index: var(--z-loader);
background: var(--c-white);
display: flex;
align-items: center;
justify-content: center; } .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);
} 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);
} .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-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;
} #anim-logo {
z-index: 10;
} .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); }
.logo-wrapper {
width: clamp(385px, 20vw, 385px);
position: relative; }
.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;
} .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-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;
} .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 { content: '';
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
width: 30%;
height: 14px;
background: #8a8e8e;
border-radius: 3px 3px 0 0;
}
.btl::after { 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-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 {
display: grid;
grid-template-columns: 80px 1fr 1fr;
grid-template-rows: auto 1fr;
min-height: 520px;
background: #edf6fd;
overflow: hidden;
} .story-logo-col {
grid-column: 1;
grid-row: 1 / 3;
position: relative;
width: 80px;
overflow: visible; }
.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; }
.story-section {
overflow: visible;
} .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;
} .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;
} .product-section {
position: relative;
height: 100vh;
min-height: 600px;
overflow: hidden;
.product-section { z-index: 12; }
} .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; }
} .product-panel {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 28% 72%;
transform: translateY(100%);
will-change: transform;
background:url(//pures.fr/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(//pures.fr/wp-content/uploads/2026/06/argousierFond.png) no-repeat;
background-position: top right;
background-size: auto;
} .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;
} .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; } .panel-right {
position: relative;
padding: 52px 52px 52px 56px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
} .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;
} .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; } .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; 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(//pures.fr/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; }
.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;
} #story-logo .logo-svg path,
#story-logo .logo-svg .cls-678392 {
fill: #000 !important;
} #story-logo {
position: relative; width: 200px;
}
.logo-white-overlay {
position: absolute;
inset: 0;
pointer-events: none; }
.logo-white-overlay .logo-svg path,
.logo-white-overlay .logo-svg .cls-678392 {
fill: #fff !important;
}
#boissons {
z-index: 11;
} .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);
} .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;
} .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;
} .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;
} .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;
} .site-footer {
background: #df6520;
color: white;
overflow: hidden;
z-index: 11;
position: relative;
} .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;
} .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;
} .footer-text {
font-size: 14px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.75);
margin: 0 0 20px;
} .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;
} .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); } .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;
} .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;
} .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;
} .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 {
position: fixed;
top: 7px;
right: 24px;
left: auto; width: auto;
z-index: 999;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 12px;
border-radius: 60px;
background: transparent;
visibility: hidden; }
.menu-mobile-header { display: none; } .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;
} .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;
} .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;
} @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%); }
.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; }
}  .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; } .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;
} .hist-btn-menu:hover {
background: #1a1a1a;
border-color: #1a1a1a;
color: #fff;
} .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; } .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;
} 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;
} .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;
} .hist-container {
width: 1200px;
max-width: 92%;
margin: 0 auto;
text-align: center;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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);
} .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;
} .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;
} .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;
} .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;
} @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; }
}  .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);
} .boi-container {
width: 1200px;
max-width: 92%;
margin: 0 auto;
min-width: 0; } .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;
} .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;
} .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%; } .boi-products-wrap {
position: relative;
}
.boi-product {
display: grid;
grid-template-columns: 10% minmax(0, 1fr);
min-height: 100vh;
background: url(//pures.fr/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; }
.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;
} .boi-product-bottle-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
} .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%; } #kombucha-2 .boi-product-bg { --w: 470px; --dx: 30px;  bottom: -1%; } #ginger     .boi-product-bg { --w: 400px; --dx: -30px; bottom: -2%; } #jus        .boi-product-bg { --w: 250px; --dx: 85px;  bottom: -2%; } .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;
} .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;
} .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;
} @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;
}  #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;
} #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 {
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;
}
} @media (max-width: 860px) {
:root {
--header-h: 100px;
} body { overflow-x: hidden; } .logo-wrapper { width: clamp(150px, 42vw, 185px) !important; } #btn-menu { display: flex; } .hero {
position: relative;
height: 100svh;
display: flex;
flex-direction: column;
overflow: hidden;
background: #71bde1;
} .hero-bg {
position: absolute;
inset: 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; content: url(//pures.fr/wp-content/uploads/2026/06/GAMME-PURES-MOBILE-m.png);
} .hero-mountains {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 55%;
object-fit: cover;
object-position: top center;
} .hero-left {
position: relative;
z-index: 2;
padding: 96px 24px 0; 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;
} #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;
} #story-logo,
#logo-white-clipper { display: none !important; } .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 {
height: auto !important;
transform: none !important;
overflow: visible !important;
display: block !important;
} .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;
} .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-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 {
flex: 1;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 24px 24px 48px !important;
gap: 12px;
} .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;
} .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-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-band { padding: 12px 0; } .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;
}
}  .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));
}  .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; } .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;
} 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;
} .ct-main {
display: flex;
min-height: 100vh;
position: relative;
overflow: hidden;
} .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%
);
} .ct-aqua {
position: absolute;
pointer-events: none;
user-select: none;
} .ct-aqua--boundary {
width: 82%;
bottom: -1%;
left: -44%;
z-index: 1;
opacity: 1;
transform: rotate(-6deg);
mix-blend-mode: multiply;
} .ct-aqua--3 {
width: 50%;
bottom: -6%;
right: -6%;
opacity: 1;
mix-blend-mode: multiply;
} .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; 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;
} .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;
} .ct-fields {
display: flex;
flex-direction: column;
}
.ct-field {
margin-bottom: 2rem;
} .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;
} .ct-input-wrap {
position: relative;
} .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;
} .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%;
} .ct-field--textarea {}
.ct-textarea {
resize: none !important;
min-height: 110px !important;
line-height: 1.65 !important;
} .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); } .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; } .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; } @media (max-width: 768px) {
.ct-main {
flex-direction: column;
} .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;
} .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;
} .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; }
}  .pdv-header { position: absolute; }
.pdv-header .contact-header-logo { color: #2f3833; filter: none; } .pdv-header .contact-header-logo:hover,
.pdv-header .contact-header-logo:focus { color: #4b5650; }
.pdv-main {
position: relative;
overflow: hidden;
overflow: clip; background: #f4f0e7;
color: #2f3833;
font-family: var(--font);
padding: clamp(110px, 14vh, 150px) clamp(20px, 5vw, 72px) 0;
} .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; } .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; } .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); z-index: 0;
} .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';
} .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; } .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;
} .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; } .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); } .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;
} @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; }
} .ab-badge {
--ab-gap: clamp(28px, 4.5vw, 72px); 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; } .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;
} @media (max-width: 860px) {
.ab-badge { width: 100px; right: auto; left: 14px; bottom: auto; top: 50%; }
}   .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;
} .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;
} .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; } .pdv-zones {
position: absolute;
left: 14px;
bottom: 14px;
z-index: 500; display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 140px); }
.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; } @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; }
} .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); } .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); }