/* ─────────────────────────────────────
TOKENS
───────────────────────────────────── */
:root {
--ink: #1a1f17;
--char: #2d3428;
--stone: #6b7261;
--warm: #a8ab9b;
--border: #dddad2;
--bg: #f5f3ef;
--bg2: #eeecea;
--white: #fafaf8;
--sage: #8a9b75;
--sage-l: #b5c4a0;
--sage-d: #5c6b4a;
--olive: #4a5a3a;
--fd: 'Fraunces', 'Playfair Display', Georgia, serif;
--fb: 'Spectral', 'PT Serif', 'Source Serif Pro', Georgia, serif;
--fm: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
/* ─── MOTION SYSTEM (Emil Kowalski) ───
Durations : escalier basé sur la nature de l'élément
Easings : custom curves > built-ins (plus de présence) */
--dur-xs: 120ms; /* press feedback, nav-link color */
--dur-sm: 180ms; /* tooltip, dropdown, button hover */
--dur-md: 240ms; /* card, image fade-in, intro-link */
--dur-lg: 320ms; /* section reveal, drawer link */
--dur-xl: 520ms; /* drawer/modal, page transition */
--ease: cubic-bezier(.22,1,.36,1); /* strong ease-out (legacy alias) */
--ease-out: cubic-bezier(.22,1,.36,1); /* entries, hovers */
--ease-out-soft: cubic-bezier(.16,1,.3,1); /* longer entries, hero */
--ease-in-out: cubic-bezier(.77,0,.175,1); /* on-screen movement */
--ease-drawer: cubic-bezier(.32,.72,0,1); /* iOS-like drawer */
/* ─── EYEBROW / CAPTION SYSTEM (brand identity) ───
Une seule échelle pour toutes les sur-titres / légendes / captions */
--eyebrow-size: .68rem;
--eyebrow-track: .26em;
--eyebrow-weight: 500;
}
/* Fraunces — dial in warmth on display via variable axes */
h1,
h2,
h3,
.logo,
.hero-title,
.section-title {
font-variation-settings: "opsz" 144, "SOFT" 50;
}
h4, h5, h6, .kicker + *, .quote, .label {
font-variation-settings: "opsz" 48, "SOFT" 30;
}
/* ─────────────────────────────────────
RESET
───────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--fb); color: var(--char); background: var(--bg); overflow-x: hidden; line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--fb); border: none; background: none; cursor: pointer; color: inherit; }
/* ─────────────────────────────────────
PROGRESS BAR
───────────────────────────────────── */
.progress {
position: fixed; top: 0; left: 0; height: 2px; width: 0;
background: var(--sage); z-index: 9999; transition: width .1s linear;
}
/* ─────────────────────────────────────
NAV
───────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 900;
transition: background .4s var(--ease), border-color .4s;
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(245,243,239,.94);
backdrop-filter: blur(16px);
border-bottom-color: var(--border);
}
.nav-inner {
max-width: 1280px; margin: 0 auto;
padding: 1.5rem 2rem;
display: flex; align-items: center; justify-content: space-between;
transition: padding .4s var(--ease);
}
.nav.scrolled .nav-inner { padding: .9rem 2rem; }
.logo {
font-family: var(--fd); font-size: 1.25rem; font-weight: 500;
color: #f5f3ef; letter-spacing: .01em; transition: color .4s;
flex-shrink: 0;
}
.logo em { font-style: italic; font-weight: 400; }
.nav.scrolled .logo { color: var(--ink); }
/* desktop links */
.nav-links {
display: flex; align-items: center; gap: .1rem; list-style: none;
}
.nav-link {
padding: .5rem 1rem; font-size: .68rem; font-weight: 400;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(245,243,239,.6); transition: color .3s;
position: relative;
}
.nav-link::after {
content: ''; position: absolute; bottom: .25rem; left: 1rem; right: 1rem;
height: 1px; background: currentColor; opacity: .5;
transform: scaleX(0); transform-origin: right;
transition: transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-link:hover { color: #f5f3ef; }
.nav.scrolled .nav-link { color: var(--stone); }
.nav.scrolled .nav-link:hover, .nav.scrolled .nav-link.active { color: var(--ink); }
.nav-cta {
padding: .45rem 1.2rem !important;
border: 1px solid rgba(245,243,239,.2); border-radius: 2px;
margin-left: .4rem; transition: background var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--sage); border-color: var(--sage); color: #f5f3ef !important; }
.nav.scrolled .nav-cta { border-color: var(--border); }
/* hamburger */
.hamburger {
display: none; flex-direction: column; justify-content: space-between;
width: 24px; height: 16px; cursor: pointer; z-index: 1001;
}
.hamburger span {
display: block; height: 1.5px; background: #f5f3ef;
transition: .35s var(--ease);
}
.nav.scrolled .hamburger span { background: var(--ink); }
.hamburger.open span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }
/* mobile drawer */
.nav-drawer {
display: none; position: fixed; inset: 0; z-index: 800;
background: var(--ink); padding: 6rem 2rem 2.5rem;
flex-direction: column; gap: 0; overflow-y: auto;
opacity: 0; transform: translateY(-8px);
transition: opacity var(--dur-lg) var(--ease-drawer), transform var(--dur-lg) var(--ease-drawer);
pointer-events: none;
}
.nav-drawer.open {
opacity: 1; transform: none; pointer-events: all;
}
.drawer-link {
font-family: var(--fd); font-size: 1.8rem; font-weight: 400;
color: rgba(245,243,239,.35); padding: .75rem 0;
border-bottom: 1px solid rgba(255,255,255,.06);
transition: color .25s;
}
.drawer-link:hover, .drawer-link.active { color: #f5f3ef; }
.drawer-cta {
display: inline-flex; margin-top: 1.5rem;
border: 1px solid rgba(245,243,239,.2); border-radius: 2px;
padding: .7rem 1.8rem; font-size: .7rem; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: #f5f3ef;
align-self: flex-start;
}
/* ─────────────────────────────────────
HERO
───────────────────────────────────── */
.hero {
min-height: 100dvh; position: relative; overflow: hidden;
background: var(--ink); display: flex; align-items: center;
}
.hero-img {
position: absolute; inset: -6%;
background: url('hero-elbasan.webp') center 38% / cover no-repeat;
opacity: .58; transform: scale(1.12) translate3d(0,0,0);
animation: kenBurns 42s cubic-bezier(.33,0,.67,1) infinite alternate;
will-change: transform;
filter: saturate(1.05) contrast(1.04);
}
@keyframes kenBurns {
0% { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
100% { transform: scale(1.22) translate3d( 1.5%, 1.5%, 0); }
}
.hero-fade {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 120% 80% at 30% 40%, rgba(26,31,23,.25) 0%, rgba(26,31,23,.8) 70%, rgba(26,31,23,.95) 100%),
linear-gradient(135deg, rgba(26,31,23,.88) 0%, rgba(26,31,23,.55) 45%, rgba(26,31,23,.25) 100%);
}
/* Grain filmique */
.hero::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
opacity: .14; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
}
.hero-content {
position: relative; z-index: 2;
width: 100%; max-width: 860px;
margin: 0 auto; padding: 8rem 2.5rem 5rem;
}
.hero-tag {
display: inline-flex; align-items: center; gap: .8rem;
font-size: .6rem; font-weight: 400; letter-spacing: .4em; text-transform: uppercase;
color: rgba(181,196,160,.65); margin-bottom: 2rem;
animation: up .8s var(--ease) .2s both;
}
.hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--sage); opacity: .6; }
.hero h1 {
font-family: var(--fd); font-weight: 400; color: #f5f3ef;
font-size: clamp(2.8rem, 6vw, 6rem);
line-height: 1.0; letter-spacing: -.025em; margin-bottom: 1.8rem;
}
.hero h1 em { font-style: italic; color: var(--sage-l); }
.hero-sub {
font-size: .97rem; color: rgba(245,243,239,.5); font-weight: 300;
line-height: 1.8; max-width: 440px; margin-bottom: 2.6rem;
animation: up .8s var(--ease) .85s both;
}
.hero-btns {
display: flex; gap: .75rem; flex-wrap: wrap;
animation: up .8s var(--ease) 1.05s both;
}
.hero-badges {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
margin-top: 2rem; animation: up .8s var(--ease) 1.25s both;
}
.badge {
padding: .25rem .75rem;
border: 1px solid rgba(245,243,239,.1); border-radius: 2px;
font-size: .58rem; color: rgba(245,243,239,.38); letter-spacing: .07em;
}
.badge-sep { color: rgba(245,243,239,.12); font-size: .6rem; }
@keyframes up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* scroll hint */
.scroll-hint {
position: absolute; bottom: 2rem; left: 2.5rem; z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: .5rem;
animation: up .8s var(--ease) 1.4s both;
}
.sh-line {
width: 1px; height: 40px; background: rgba(245,243,239,.12);
position: relative; overflow: hidden;
}
.sh-line::after {
content: ''; position: absolute; top: -100%; left: 0;
width: 100%; height: 100%; background: var(--sage-l);
animation: slide 2s var(--ease) infinite;
}
@keyframes slide { to { top: 200%; } }
.sh-txt {
font-size: .54rem; letter-spacing: .28em; text-transform: uppercase;
color: rgba(245,243,239,.3); writing-mode: vertical-lr;
}
/* ─────────────────────────────────────
BOUTONS
───────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: .55rem;
padding: .75rem 1.8rem; border-radius: 2px;
font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
transition: background var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out);
cursor: pointer; white-space: nowrap;
}
.btn-sage { background: var(--sage); color: #f5f3ef; border: 1px solid var(--sage); }
.btn-sage:hover { background: var(--sage-d); border-color: var(--sage-d); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: rgba(245,243,239,.6); border: 1px solid rgba(245,243,239,.2); }
.btn-ghost:hover { color: #f5f3ef; border-color: rgba(245,243,239,.45); }
/* ─────────────────────────────────────
STATS
───────────────────────────────────── */
.stats {
background: var(--ink); padding: 4.5rem 2rem;
border-top: 1px solid rgba(138,155,117,.1);
border-bottom: 1px solid rgba(138,155,117,.1);
}
.stats-grid {
max-width: 960px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4,1fr);
}
.stat {
padding: 2rem 1.5rem; text-align: center;
border-right: 1px solid rgba(245,243,239,.07);
}
.stat:last-child { border-right: none; }
.stat-n {
font-family: var(--fd); font-size: 2.8rem; font-weight: 400; font-style: italic;
color: #f5f3ef; line-height: 1; margin-bottom: .45rem; letter-spacing: -.03em;
}
.stat-l {
font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
color: rgba(245,243,239,.32); font-weight: 400;
}
/* ─────────────────────────────────────
SECTION COMMONS
───────────────────────────────────── */
.section { padding: 7rem 2rem; }
.ctn { max-width: 1200px; margin: 0 auto; }
.eyebrow {
font-size: .6rem; font-weight: 500; letter-spacing: .35em; text-transform: uppercase;
color: var(--sage-d); margin-bottom: .9rem; display: block;
}
.s-title {
font-family: var(--fd); font-size: clamp(1.8rem, 3.2vw, 2.8rem);
font-weight: 400; color: var(--ink); line-height: 1.15; letter-spacing: -.02em;
}
.s-title em { font-style: italic; color: var(--olive); }
/* ─────────────────────────────────────
INTRO BANNER
───────────────────────────────────── */
.intro-sec {
position: relative; overflow: hidden;
min-height: 560px; display: flex; align-items: center;
}
.intro-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center center;
filter: brightness(.85);
}
.intro-fade {
position: absolute; inset: 0;
background: linear-gradient(
to right,
rgba(26,31,23,.92) 0%,
rgba(26,31,23,.75) 35%,
rgba(26,31,23,.35) 65%,
rgba(26,31,23,0) 100%
);
}
.intro-content {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto; width: 100%;
padding: 6rem 2rem;
}
.intro-box { max-width: 520px; }
.intro-box .eyebrow { color: rgba(181,196,160,.65); margin-bottom: 1.1rem; }
.intro-title {
font-family: var(--fd); font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400; color: #f5f3ef; line-height: 1.1;
letter-spacing: -.02em; margin-bottom: 1.6rem;
}
.intro-title em { font-style: italic; color: var(--sage-l); }
.intro-body {
font-size: .9rem; color: rgba(245,243,239,.55);
font-weight: 300; line-height: 1.85;
margin-bottom: 1rem;
}
.intro-body + .intro-body { margin-bottom: 0; }
.intro-link {
display: inline-flex; align-items: center; gap: .5rem;
margin-top: 2rem; font-size: .6rem; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--sage-l); padding-bottom: .15rem;
border-bottom: 1px solid rgba(181,196,160,.35);
transition: gap .3s var(--ease), color .3s, border-color .3s;
}
.intro-link:hover { gap: .9rem; color: #f5f3ef; border-color: rgba(245,243,239,.4); }
.intro-caption {
position: absolute; bottom: 1.5rem; right: 2rem; z-index: 2;
font-size: .54rem; letter-spacing: .18em; text-transform: uppercase;
color: rgba(245,243,239,.3); font-weight: 400;
}
@media (max-width: 768px) {
.intro-sec { min-height: 480px; }
.intro-bg { filter: brightness(.55); }
.intro-fade {
background: linear-gradient(
to bottom,
rgba(26,31,23,.4) 0%,
rgba(26,31,23,.85) 50%,
rgba(26,31,23,.97) 100%
);
}
.intro-content { padding: 4rem 1.4rem; }
.intro-box { max-width: 100%; }
.intro-caption { display: none; }
}
/* ─────────────────────────────────────
CATÉGORIES — PREMIUM
───────────────────────────────────── */
.cats {
background: var(--ink);
}
.cats-intro {
max-width: 1280px; margin: 0 auto;
padding: 5rem 3rem 3rem;
display: flex; align-items: baseline; gap: 2rem;
}
.cats-eyebrow {
font-size: .54rem; font-weight: 600; letter-spacing: .35em;
text-transform: uppercase; color: var(--sage); flex-shrink: 0;
}
.cats-title {
font-family: var(--fd); font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 400; color: #f5f3ef; line-height: 1;
}
.cats-title em { font-style: italic; color: var(--sage-l); }
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,.04);
margin-top: 0;
}
.cat-card {
position: relative; overflow: hidden;
cursor: pointer; background: #0e1209;
aspect-ratio: 7/10;
}
.cat-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(.45) saturate(.75);
transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s;
}
.cat-card:hover .cat-photo {
transform: scale(1.1);
filter: brightness(.2) saturate(.5);
}
.cat-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,14,8,.95) 0%, rgba(10,14,8,.3) 40%, transparent 65%);
}
.cat-content {
position: absolute; inset: 0; z-index: 2;
padding: 2rem 1.8rem;
display: flex; flex-direction: column;
}
.cat-nr {
font-size: .48rem; letter-spacing: .22em;
color: rgba(245,243,239,.18); font-weight: 400;
text-transform: uppercase;
}
.cat-bottom { margin-top: auto; }
.cat-name {
font-family: var(--fd); font-style: italic; font-weight: 400;
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
color: #f5f3ef; line-height: 1.2;
transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover .cat-name { transform: translateY(-10px); }
.cat-sep {
width: 0; height: 1px; background: var(--sage);
margin: .8rem 0 0;
transition: width .6s .05s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover .cat-sep { width: 28px; }
.cat-sub {
font-size: .65rem; color: rgba(245,243,239,.0);
font-weight: 300; letter-spacing: .06em;
margin-top: .6rem;
max-height: 0; overflow: hidden;
transition: max-height .5s .08s cubic-bezier(.16,1,.3,1), color .45s .12s;
}
.cat-card:hover .cat-sub { max-height: 30px; color: rgba(245,243,239,.38); }
.cat-cta {
font-size: .54rem; letter-spacing: .2em; text-transform: uppercase;
font-weight: 500; color: var(--sage-l);
margin-top: 1.1rem;
opacity: 0; transform: translateY(8px);
transition: opacity .45s .12s, transform .45s .12s cubic-bezier(.16,1,.3,1);
display: flex; align-items: center; gap: .5rem;
}
.cat-card:hover .cat-cta { opacity: 1; transform: none; }
/* Ligne en bas */
.cat-card::after {
content: ''; position: absolute;
bottom: 0; left: 0; right: 0; height: 1.5px;
background: var(--sage);
transform: scaleX(0); transform-origin: left;
transition: transform .6s .05s cubic-bezier(.16,1,.3,1);
z-index: 3;
}
.cat-card:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
.cats-intro { padding: 4rem 1.5rem 2.5rem; flex-direction: column; gap: .5rem; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-card { aspect-ratio: 4/5; }
}
@media (max-width: 480px) {
.cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
.cat-card { aspect-ratio: 3/4; }
.cat-cta { opacity: 1; transform: none; }
.cat-sub { max-height: 20px; color: rgba(245,243,239,.3); }
}
.cta-btns { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
/* ─────────────────────────────────────
FOOTER
───────────────────────────────────── */
footer {
background: var(--white); border-top: 1px solid var(--border);
padding: 4.5rem 2rem 2.5rem;
}
.footer-grid {
max-width: 1200px; margin: 0 auto 3rem;
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
}
.footer-logo { font-family: var(--fd); font-size: 1.15rem; font-weight: 500; color: var(--ink); display: inline-block; margin-bottom: .7rem; }
.footer-logo em { font-style: italic; font-weight: 400; }
.footer-desc { font-size: .8rem; color: var(--stone); font-weight: 300; line-height: 1.7; max-width: 230px; }
.footer-certs { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.footer-cert {
font-size: .65rem; color: var(--stone); letter-spacing: .04em;
display: flex; align-items: center; gap: .45rem;
}
.footer-cert::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.f-col-title { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.1rem; }
.f-links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.f-links a { font-size: .8rem; color: var(--stone); font-weight: 300; transition: color .2s, transform .2s var(--ease); display: inline-block; }
.f-links a:hover { color: var(--ink); transform: translateX(3px); }
.footer-bot {
max-width: 1200px; margin: 0 auto;
border-top: 1px solid var(--border); padding-top: 1.4rem;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem;
}
.footer-copy { font-size: .68rem; color: var(--warm); }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { font-size: .68rem; color: var(--warm); transition: color .2s; }
.footer-legal a:hover { color: var(--stone); }
/* ─────────────────────────────────────
REVEALS
───────────────────────────────────── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.on { opacity: 1; transform: none; }
/* ─────────────────────────────────────
RESPONSIVE
───────────────────────────────────── */
/* tablet */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2) { border-right: none; }
.stat:nth-child(3) { border-top: 1px solid rgba(245,243,239,.07); }
.stat:nth-child(4) { border-right: none; border-top: 1px solid rgba(245,243,239,.07); }
}
/* mobile */
@media (max-width: 768px) {
/* nav */
.nav-links { display: none; }
.hamburger { display: flex; }
.nav-drawer { display: flex; }
.nav-inner { padding: 1rem 1.2rem; }
.nav.scrolled .nav-inner { padding: .8rem 1.2rem; }
/* hero */
.hero-content { padding: 6rem 1.4rem 3.5rem; }
.hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.6rem); }
.hero-tag { font-size: .54rem; letter-spacing: .25em; margin-bottom: 1.5rem; }
.hero-sub { font-size: .86rem; max-width: 100%; margin-bottom: 2rem; }
.hero-btns { flex-direction: column; align-items: stretch; gap: .5rem; }
.hero-btns .btn { justify-content: center; }
.hero-badges { gap: .4rem; margin-top: 1.4rem; }
.badge { font-size: .54rem; padding: .2rem .55rem; }
.badge-sep { display: none; }
.scroll-hint { display: none; }
/* stats */
.stats { padding: 3rem 1.2rem; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat { padding: 1.5rem 1rem; border-right: 1px solid rgba(245,243,239,.07); }
.stat:nth-child(2) { border-right: none; }
.stat:nth-child(3) { border-top: 1px solid rgba(245,243,239,.07); }
.stat:nth-child(4) { border-right: none; border-top: 1px solid rgba(245,243,239,.07); }
.stat-n { font-size: 2.2rem; }
.stat-l { font-size: .52rem; }
/* sections */
.section { padding: 4.5rem 1.2rem; }
/* categories */
.cats { background: var(--ink); padding: 6rem 0; }
.cats-head { flex-direction: column; align-items: flex-start; gap: .8rem; margin-bottom: 1.5rem; }
.cat-grid { grid-template-columns: 1fr; gap: 8px; }
.cat-card { aspect-ratio: 16/9; }
/* sur tactile : lien toujours visible */
.cat-lnk { opacity: 1; transform: none; }
.cat-body { padding: 1.3rem 1.5rem; }
.cat-name { font-size: 1rem; }
.cat-desc { font-size: .7rem; }
/* marquee */
.marquee-sec { padding: 2.2rem 0; }
.marquee-item { font-size: .95rem; }
/* cta */
.cta-sec { padding: 5rem 1.2rem; }
.cta-btns { flex-direction: column; align-items: stretch; }
.cta-btns .btn { justify-content: center; }
/* footer */
footer { padding: 3.5rem 1.2rem 2rem; }
.footer-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.footer-bot { flex-direction: column; align-items: flex-start; gap: .5rem; }
/* titles */
.s-title { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
}
@media (max-width: 480px) {
.hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
.cat-card { aspect-ratio: 4/3; }
.stat-n { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ─────────────────────────────────────
BANDE CONTACTS COMMERCIAUX
───────────────────────────────────── */
.contacts-band {
background: var(--white);
border-top: 1px solid var(--border);
padding: 5rem 2rem;
}
.contacts-band-inner {
max-width: 1200px; margin: 0 auto;
}
.contacts-band-head {
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
}
.contacts-band-title {
font-family: var(--fd); font-size: clamp(1.5rem, 2.8vw, 2.2rem);
font-weight: 400; color: var(--ink); line-height: 1.15;
}
.contacts-band-title em { font-style: italic; color: var(--olive); }
.contacts-band-sub {
font-size: .78rem; color: var(--stone); font-weight: 300;
margin-top: .4rem;
}
.contacts-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--border); border: 1px solid var(--border);
}
.contact-block {
background: var(--bg); padding: 2rem 2rem 1.8rem;
transition: background .3s;
}
.contact-block:hover { background: var(--bg2); }
.contact-region {
font-size: .56rem; font-weight: 600; letter-spacing: .22em;
text-transform: uppercase; color: var(--sage-d); margin-bottom: .5rem;
}
.contact-name {
font-family: var(--fd); font-size: 1.15rem; font-weight: 400;
font-style: italic; color: var(--ink); margin-bottom: 1.2rem;
line-height: 1.2;
}
.contact-links { display: flex; flex-direction: column; gap: .55rem; }
.contact-link {
display: flex; align-items: center; gap: .65rem;
font-size: .78rem; color: var(--stone); font-weight: 300;
text-decoration: none; transition: color .25s;
}
.contact-link:hover { color: var(--olive); }
.contact-link svg {
width: 14px; height: 14px; flex-shrink: 0;
stroke: var(--warm); fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
transition: stroke .25s;
}
.contact-link:hover svg { stroke: var(--sage-d); }
.contacts-general {
margin-top: 1px; background: var(--bg);
padding: 1.4rem 2rem;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1.5rem;
border-top: 1px solid var(--border);
}
.contacts-general-item { display: flex; flex-direction: column; gap: .15rem; }
.contacts-general-label {
font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--warm); font-weight: 500;
}
.contacts-general-val { font-size: .82rem; color: var(--stone); font-weight: 300; }
.contacts-general-val a { color: var(--stone); transition: color .2s; }
.contacts-general-val a:hover { color: var(--olive); }
@media (max-width: 768px) {
.contacts-band { padding: 4rem 1.2rem; }
.contacts-grid { grid-template-columns: 1fr; }
.contacts-general { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.4rem 1.2rem; }
}
/* ── MODALS CATÉGORIES INDEX ── */
.cat-modal-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(26,31,23,.65); backdrop-filter: blur(8px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
}
.cat-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: all; }
.cat-modal {
background: var(--white); border-radius: 6px;
width: 100%; max-width: 680px; max-height: 90vh;
overflow-y: auto; overflow-x: hidden;
transform: translateY(16px) scale(.97);
transition: transform .4s cubic-bezier(.22,1,.36,1);
position: relative;
}
.cat-modal-overlay.open .cat-modal { transform: none; }
/* Photo */
.cat-modal-photo {
height: 280px; width: 100%;
background-size: cover; background-position: center;
position: relative; flex-shrink: 0;
}
.cat-modal-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(26,31,23,.85) 0%, rgba(26,31,23,.2) 60%, transparent 100%);
}
.cat-modal-photo-text {
position: absolute; bottom: 1.6rem; left: 2rem; right: 4rem; z-index: 2;
}
.cat-modal-tag {
font-size: .55rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
color: var(--sage-l); display: block; margin-bottom: .4rem;
}
.cat-modal-title {
font-family: var(--fd); font-size: 1.8rem; font-weight: 400; font-style: italic;
color: #f5f3ef; line-height: 1.1;
}
.cat-modal-close {
position: absolute; top: 1rem; right: 1rem; z-index: 3;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(26,31,23,.5); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .25s;
}
.cat-modal-close:hover { background: rgba(26,31,23,.85); }
.cat-modal-close svg { width: 14px; height: 14px; stroke: #f5f3ef; stroke-width: 2; fill: none; }
/* Body */
.cat-modal-body { padding: 2rem; }
.cat-modal-desc {
font-size: .9rem; color: var(--stone); font-weight: 300; line-height: 1.75;
margin-bottom: 1.8rem;
}
.cat-modal-specs {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 3px;
overflow: hidden; margin-bottom: 1.8rem;
}
.cat-modal-spec { background: var(--bg); padding: .9rem 1rem; }
.cat-modal-spec-label {
font-size: .52rem; font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--warm); display: block; margin-bottom: .25rem;
}
.cat-modal-spec-val { font-size: .82rem; color: var(--ink); font-weight: 400; }
/* CTA */
.cat-modal-cta {
background: var(--ink); border-radius: 4px;
padding: 1.6rem 1.8rem;
}
.cat-modal-cta-top {
margin-bottom: 1.2rem;
}
.cat-modal-cta-top strong {
display: block; font-family: var(--fd); font-size: 1.1rem; font-weight: 400;
font-style: italic; color: #f5f3ef; margin-bottom: .3rem;
}
.cat-modal-cta-top p { font-size: .78rem; color: rgba(245,243,239,.4); font-weight: 300; }
.cat-modal-contacts { display: flex; flex-direction: column; gap: .5rem; }
.cat-modal-contact-link {
display: flex; align-items: center; justify-content: space-between;
padding: .75rem 1rem; border: 1px solid rgba(245,243,239,.1);
border-radius: 3px; text-decoration: none;
transition: border-color .25s, background .25s;
}
.cat-modal-contact-link:hover { border-color: var(--sage); background: rgba(138,155,117,.08); }
.cat-modal-contact-left { display: flex; flex-direction: column; gap: .1rem; }
.cat-modal-contact-region { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,243,239,.35); font-weight: 500; }
.cat-modal-contact-name { font-size: .8rem; color: #f5f3ef; font-weight: 400; }
.cat-modal-contact-val { font-size: .75rem; color: var(--sage-l); font-weight: 300; }
.cat-modal-contact-arrow { color: rgba(245,243,239,.3); font-size: .9rem; transition: color .25s, transform .25s; }
.cat-modal-contact-link:hover .cat-modal-contact-arrow { color: var(--sage-l); transform: translateX(3px); }
@media (max-width: 600px) {
.cat-modal-photo { height: 220px; }
.cat-modal-title { font-size: 1.4rem; }
.cat-modal-body { padding: 1.4rem; }
.cat-modal-specs { grid-template-columns: 1fr 1fr; }
.cat-modal-cta { padding: 1.2rem; }
}
/* ── MODAL PLANTES ── */
.plantes-modal-overlay {
position: fixed; inset: 0; z-index: 9100;
background: rgba(26,31,23,.7); backdrop-filter: blur(8px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
}
.plantes-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: all; }
.plantes-modal {
background: var(--white); border-radius: 6px;
width: 100%; max-width: 760px; max-height: 88vh;
display: flex; flex-direction: column;
transform: translateY(20px) scale(.97);
transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.plantes-modal-overlay.open .plantes-modal { transform: none; }
.plantes-modal-head {
padding: 1.8rem 2rem 1.4rem;
border-bottom: 1px solid var(--border);
display: flex; align-items: flex-start; justify-content: space-between;
flex-shrink: 0; gap: 1rem;
}
.plantes-modal-head-left {}
.plantes-modal-tag {
font-size: .55rem; font-weight: 600; letter-spacing: .25em;
text-transform: uppercase; color: var(--sage-d); display: block; margin-bottom: .3rem;
}
.plantes-modal-title {
font-family: var(--fd); font-size: 1.5rem; font-weight: 400;
font-style: italic; color: var(--ink); margin-bottom: .2rem;
}
.plantes-modal-sub { font-size: .75rem; color: var(--stone); font-weight: 300; }
.plantes-modal-close-btn {
width: 34px; height: 34px; border-radius: 50%;
background: var(--bg); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; transition: background .2s;
}
.plantes-modal-close-btn:hover { background: var(--bg2); }
.plantes-modal-close-btn svg { width: 13px; height: 13px; stroke: var(--stone); stroke-width: 2; fill: none; }
/* Search + filters */
.plantes-modal-toolbar {
padding: 1rem 2rem;
display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.plantes-search-wrap { position: relative; flex: 1; min-width: 180px; }
.plantes-search {
width: 100%; padding: .5rem .9rem .5rem 2.2rem;
border: 1px solid var(--border); border-radius: 2px;
font-family: var(--fb); font-size: .75rem; color: var(--char);
font-weight: 300; background: var(--bg);
transition: border-color .25s;
}
.plantes-search:focus { outline: none; border-color: var(--sage); }
.plantes-search-ico {
position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
width: 13px; height: 13px; stroke: var(--warm); fill: none; stroke-width: 1.8;
pointer-events: none;
}
.plantes-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.plantes-filter {
padding: .3rem .75rem; border: 1px solid var(--border); border-radius: 2px;
font-size: .58rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
color: var(--stone); background: var(--white); cursor: pointer;
transition: border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out);
}
.plantes-filter:hover { border-color: var(--sage); color: var(--olive); }
.plantes-filter.active { background: var(--ink); border-color: var(--ink); color: #f5f3ef; }
/* List */
.plantes-modal-list {
overflow-y: auto; flex: 1;
padding: .5rem 0;
}
.plantes-modal-item {
display: flex; align-items: center;
padding: .75rem 2rem; gap: 1rem;
border-bottom: 1px solid rgba(221,218,210,.4);
transition: background .2s;
cursor: default;
}
.plantes-modal-item:hover { background: var(--bg); }
.plantes-modal-item.hidden { display: none; }
.plantes-item-nr {
font-size: .5rem; font-weight: 600; letter-spacing: .12em;
color: var(--warm); text-transform: uppercase; width: 28px; flex-shrink: 0;
}
.plantes-item-name { font-family: var(--fd); font-size: .95rem; font-weight: 500; font-style: italic; color: var(--ink); flex: 1; }
.plantes-item-latin { font-size: .7rem; color: var(--stone); font-weight: 300; font-style: italic; flex: 1; }
.plantes-item-cat {
font-size: .52rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
color: var(--sage-d); padding: .15rem .55rem;
border: 1px solid var(--sage-l); border-radius: 2px;
background: rgba(138,155,117,.07); flex-shrink: 0;
}
/* Footer CTA */
.plantes-modal-footer {
padding: 1.2rem 2rem; border-top: 1px solid var(--border);
background: var(--ink); border-radius: 0 0 6px 6px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; flex-shrink: 0;
}
.plantes-modal-footer p { font-size: .78rem; color: rgba(245,243,239,.45); font-weight: 300; }
.plantes-modal-footer strong { display: block; font-size: .88rem; color: #f5f3ef; font-weight: 400; margin-bottom: .2rem; }
.plantes-modal-footer-btns { display: flex; gap: .5rem; }
.plantes-modal-btn {
padding: .55rem 1.2rem; border-radius: 2px;
font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
transition: background var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}
.plantes-modal-btn-sage { background: var(--sage); color: #f5f3ef; border: 1px solid var(--sage); }
.plantes-modal-btn-sage:hover { background: var(--sage-d); border-color: var(--sage-d); }
.plantes-modal-btn-ghost { background: transparent; color: rgba(245,243,239,.5); border: 1px solid rgba(245,243,239,.15); }
.plantes-modal-btn-ghost:hover { color: #f5f3ef; border-color: rgba(245,243,239,.35); }
@media (max-width: 600px) {
.plantes-modal-head { padding: 1.4rem; }
.plantes-modal-toolbar { padding: .8rem 1rem; }
.plantes-modal-item { padding: .65rem 1rem; gap: .6rem; }
.plantes-item-latin { display: none; }
.plantes-modal-footer { padding: 1rem; flex-direction: column; align-items: flex-start; }
}
/* ═════════════════════════════════════════════════════════════════
REFONTE 2026 — Motion + Layout
Niveau 1 (Layout) · Niveau 2 (Micro-interactions) · Niveau 3 (Polish)
═════════════════════════════════════════════════════════════════ */
/* ── REVEALS ENRICHIS ── */
.rv-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.22,1,.36,1); }
.rv-clip.on { clip-path: inset(0 0 0 0); }
.rv-blur { opacity: 0; filter: blur(12px); transform: translateY(24px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); }
.rv-blur.on { opacity: 1; filter: blur(0); transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-stagger.on > * { opacity: 1; transform: none; }
.rv-stagger.on > *:nth-child(1) { transition-delay: .05s; }
.rv-stagger.on > *:nth-child(2) { transition-delay: .18s; }
.rv-stagger.on > *:nth-child(3) { transition-delay: .31s; }
.rv-stagger.on > *:nth-child(4) { transition-delay: .44s; }
.rv-stagger.on > *:nth-child(5) { transition-delay: .57s; }
.rv-stagger.on > *:nth-child(6) { transition-delay: .70s; }
/* ── HERO KINETIC TYPOGRAPHY ── */
.hero h1 { overflow: visible; }
.hero h1 .kinetic-line {
display: block; overflow: hidden;
padding: 0 .04em .08em; /* laisse respirer les descendants ital */
margin: 0 -.04em;
}
.hero h1 .kinetic-word {
display: inline-block; will-change: transform, font-variation-settings;
transform: translateY(110%);
font-variation-settings: "opsz" 144, "SOFT" 0;
animation: kineticIn 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
.hero h1 .kinetic-word em { font-style: italic; color: var(--sage-l); }
.hero h1 .kinetic-line:nth-child(1) .kinetic-word { animation-delay: .35s; }
.hero h1 .kinetic-line:nth-child(2) .kinetic-word { animation-delay: .52s; }
.hero h1 .kinetic-line:nth-child(3) .kinetic-word { animation-delay: .69s; }
@keyframes kineticIn {
0% { transform: translateY(110%); font-variation-settings: "opsz" 144, "SOFT" 0; }
55% { font-variation-settings: "opsz" 144, "SOFT" 80; }
100% { transform: translateY(0); font-variation-settings: "opsz" 144, "SOFT" 50; }
}
/* ── CATS — BENTO GRID (>900px only, mobile garde le stack existant) ── */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr);
grid-template-areas:
"plantes chataignes fruits"
"plantes escargots fruits";
gap: 1px;
}
.cat-card[data-modal="plantes"] { grid-area: plantes; aspect-ratio: auto; }
.cat-card[data-modal="chataignes"] { grid-area: chataignes; aspect-ratio: auto; }
.cat-card[data-modal="escargots"] { grid-area: escargots; aspect-ratio: auto; }
.cat-card[data-modal="fruits"] { grid-area: fruits; aspect-ratio: auto; }
.cat-card[data-modal="plantes"] .cat-name { font-size: clamp(1.8rem, 2.2vw, 2.4rem); }
.cat-card[data-modal="plantes"] .cat-content { padding: 2.4rem 2.4rem; }
.cat-card[data-modal="fruits"] .cat-name { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
}
/* ── CARD HOVER ENRICHI ── */
.cat-card { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.cat-card .cat-photo { transition: transform 1.3s cubic-bezier(.16,1,.3,1), filter 1s; }
.cat-card:hover .cat-photo { transform: scale(1.08) rotate(.4deg); }
.cat-discover {
position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(245,243,239,.25);
display: flex; align-items: center; justify-content: center;
color: rgba(245,243,239,.75); font-size: .9rem;
opacity: 0; transform: scale(.6) rotate(-30deg);
transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, background .3s, color .3s;
pointer-events: none;
backdrop-filter: blur(6px);
}
.cat-card:hover .cat-discover {
opacity: 1; transform: scale(1) rotate(0);
border-color: var(--sage-l); background: rgba(138,155,117,.22); color: #f5f3ef;
}
/* ── MARQUEE UPGRADE (animation manquante + style éditorial) ── */
.marquee-sec {
background: var(--ink);
border-top: 1px solid rgba(138,155,117,.1);
border-bottom: 1px solid rgba(138,155,117,.1);
padding: 3.4rem 0; overflow: hidden; position: relative;
}
.marquee-sec::before, .marquee-sec::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2;
pointer-events: none;
}
.marquee-sec::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.marquee-sec::after { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.marquee {
display: flex; gap: 3rem; width: max-content;
animation: marqueeSlide 48s linear infinite;
will-change: transform;
}
.marquee-sec:hover .marquee { animation-play-state: paused; }
.marquee-item {
font-family: var(--fd); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400;
font-style: italic; color: rgba(245,243,239,.4); letter-spacing: -.015em;
font-variation-settings: "opsz" 144, "SOFT" 65;
display: flex; align-items: center; white-space: nowrap;
}
.marquee-item::after {
content: '✦'; color: var(--sage); font-size: .85rem; font-style: normal;
margin-left: 3rem; font-family: var(--fb);
font-variation-settings: normal;
}
.marquee-item:nth-child(2n) {
font-style: normal; font-family: var(--fb); font-weight: 300;
font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
color: rgba(245,243,239,.28);
font-variation-settings: normal;
}
@keyframes marqueeSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── CTA CONTACTS (était sans style du tout) ── */
.cta-contacts {
display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
background: rgba(245,243,239,.08); border-radius: 3px; overflow: hidden;
margin-top: 1rem; max-width: 820px; margin-left: auto; margin-right: auto;
}
@media (max-width: 768px) { .cta-contacts { grid-template-columns: 1fr; max-width: 100%; } }
/* ── MAGNETIC BUTTONS ── */
.magnetic, [data-magnetic] { transition: transform .35s cubic-bezier(.22,1,.36,1); will-change: transform; }
/* ═════════════════════════════════════════════════════════════════
OPTIM — a11y, SEO, perf, polish (sources : ui-ux-pro-max + 21st)
═════════════════════════════════════════════════════════════════ */
/* ── Skip-to-main (a11y) ── */
.skip-link {
position: absolute; top: -40px; left: 0; z-index: 10001;
padding: .6rem 1.2rem;
background: var(--ink); color: #f5f3ef;
font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
text-decoration: none; border-radius: 0 0 4px 0;
transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; outline: 2px solid var(--sage-l); outline-offset: 2px; }
/* ── Focus visible ── */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible, .nav-cta:focus-visible {
outline-color: var(--sage-l);
}
.nav-drawer .drawer-link:focus-visible,
.plantes-search:focus-visible {
outline-color: var(--sage-l);
outline-offset: 2px;
}
/* ── Scroll-margin pour ancres (évite cachet sous nav) ── */
section, header, footer { scroll-margin-top: 80px; }
/* ── Contrast boost sur les textes gris trop clairs (WCAG AA) ── */
.hero-sub { color: rgba(245,243,239,.72); } /* était .5, trop juste */
.intro-body { color: rgba(245,243,239,.7); } /* était .55 */
.plantes-item-latin { color: #5a6054; } /* fix contraste */
.cat-modal-contact-val { color: #c2d3ac; } /* fix contraste sage-l */
.process-step-desc, .timeline-item-desc { color: #505749; }
/* ── Timeline : ligne progressive animée (inspi 21st) ── */
.timeline-list::after {
content: ''; position: absolute; top: 0; left: 50%;
width: 2px; height: 0; max-height: 100%;
background: linear-gradient(to bottom, var(--sage), var(--olive));
transform: translateX(-50%);
transition: height 1.8s cubic-bezier(.22,1,.36,1);
box-shadow: 0 0 12px rgba(138,155,117,.3);
pointer-events: none;
}
.timeline-list.filled::after { height: 100%; }
@media (max-width: 768px) {
.timeline-list::after { left: 14px; }
}
/* ── Process : connecteur entre steps (inspi 21st) ── */
@media (min-width: 1025px) {
.process-grid { position: relative; }
.process-grid::before {
content: ''; position: absolute; top: 92px; left: 2rem; right: 2rem;
height: 1px; background: linear-gradient(to right,
transparent 0%, var(--border) 10%, var(--sage-l) 50%, var(--border) 90%, transparent 100%);
z-index: 0; pointer-events: none;
}
.process-step { position: relative; z-index: 1; }
.process-step-icon {
background: var(--white) !important; /* opaque pour couvrir la ligne */
}
.process-step:hover .process-step-icon { background: var(--sage) !important; }
}
/* ── Process : hover arrow CTA (inspi 21st) ── */
.process-step::after {
content: '→';
position: absolute; top: 1.6rem; right: 1.6rem;
font-size: 1rem; color: var(--warm);
opacity: 0; transform: translate(-6px,0);
transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s;
}
.process-step:hover::after {
opacity: 1; transform: none; color: var(--sage-d);
}
/* ── Contacts reassurance : icônes plus présentes ── */
.reassurance-item svg {
width: 20px; height: 20px;
padding: 0; border-radius: 50%;
}
/* ═════════════════════════════════════════════════════════════════
SECTION DRESSING — ponts, séparateurs, interludes, ornements
═════════════════════════════════════════════════════════════════ */
/* ── TRANSITIONS MINIMALES (Red Bull / Monocle / editorial pro) ──
Hard edges partout. Accent sur light↔light uniquement.
Le rythme visuel vient des gros numéros de chapitre flottants. */
/* Accent-rule : 2px de trait sage pour transitions light↔light */
.accent-rule {
height: 2px; width: 100%; margin: 0; border: 0;
background: var(--sage-d);
position: relative; z-index: 1;
display: block;
}
/* Variante fine avec traits décoratifs aux extrémités */
.accent-rule-decor {
height: 6rem; border: 0; margin: 0; padding: 0;
position: relative; display: flex; align-items: center; justify-content: center;
background: var(--white);
}
.accent-rule-decor::before, .accent-rule-decor::after {
content: ''; flex: 1; max-width: 44vw; height: 1px;
background: linear-gradient(to right, transparent 0%, var(--border) 50%, var(--border) 100%);
}
.accent-rule-decor::after {
background: linear-gradient(to left, transparent 0%, var(--border) 50%, var(--border) 100%);
}
.accent-rule-decor span {
font-family: var(--fb); font-size: .56rem; font-weight: 600;
letter-spacing: .32em; text-transform: uppercase;
color: var(--sage-d); padding: 0 1.8rem;
display: inline-flex; align-items: center; gap: .7rem;
}
.accent-rule-decor span::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--sage);
}
/* ── SHADOW SYSTEM — ombrages légers & modernes ── */
:root {
--sh-xs: 0 1px 2px rgba(26,31,23,.05);
--sh-sm: 0 2px 6px rgba(26,31,23,.06), 0 1px 2px rgba(26,31,23,.04);
--sh-md: 0 6px 18px rgba(26,31,23,.08), 0 2px 4px rgba(26,31,23,.05);
--sh-lg: 0 14px 36px rgba(26,31,23,.1), 0 4px 10px rgba(26,31,23,.06);
--sh-hover: 0 20px 48px rgba(26,31,23,.14), 0 6px 14px rgba(26,31,23,.08);
--sh-dark-sm: 0 2px 8px rgba(0,0,0,.3);
--sh-dark-md: 0 10px 28px rgba(0,0,0,.45);
}
/* Section edge-shadows (dépôt léger entre sections light↔light) */
.process-sec { box-shadow: inset 0 10px 20px -18px rgba(26,31,23,.18); }
.timeline-sec { box-shadow: inset 0 10px 20px -18px rgba(26,31,23,.14); }
.contacts-band { box-shadow: inset 0 10px 20px -18px rgba(26,31,23,.14); }
/* Cards avec ombre elegante au repos + hover lift */
.cat-card {
box-shadow: var(--sh-dark-sm);
transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.cat-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-dark-md);
}
.process-step {
box-shadow: var(--sh-xs);
transition: background .35s, box-shadow .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.process-step:hover {
transform: translateY(-3px);
box-shadow: var(--sh-md);
}
.contact-block {
transition: background .3s, box-shadow .4s cubic-bezier(.22,1,.36,1), transform .3s var(--ease);
}
.contact-block:hover {
transform: translateY(-2px);
box-shadow: var(--sh-sm);
}
/* Stats grid — léger inset pour depth */
.stats-grid {
box-shadow: inset 0 1px 0 rgba(245,243,239,.04);
}
.stat {
transition: background .3s var(--ease);
}
.stat:hover { background: rgba(138,155,117,.04); }
/* Timeline items — ombre très légère sur content au hover */
.timeline-item-content {
padding: .3rem .6rem;
border-radius: 3px;
transition: background .3s, box-shadow .4s var(--ease);
margin: -.3rem -.6rem;
}
.timeline-item:hover .timeline-item-content {
background: var(--bg);
box-shadow: var(--sh-xs);
}
/* Hero : ombre subtile sous les badges + sous les btns */
.hero-btns { filter: drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
/* Modal — shadow plus présente (déjà existante, renforcement) */
.cat-modal, .plantes-modal {
box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.3);
}
/* Nav quand scrolled — subtile cast shadow */
.nav.scrolled {
box-shadow: 0 4px 18px rgba(26,31,23,.06);
}ions sombres ── */
/* NB : on utilise z-index:-1 + isolation:isolate pour que le halo reste
derrière tous les enfants SANS forcer les positions des enfants
(important : intro-bg / intro-fade doivent rester absolute). */
.stats, .cats {
position: relative; isolation: isolate;
}
.stats::before, .cats::before {
content: ''; position: absolute;
width: 55%; height: 80%;
pointer-events: none; z-index: -1;
background: radial-gradient(ellipse at center, rgba(138,155,117,.12) 0%, transparent 60%);
}
.stats::before { top: -20%; right: -10%; }
.cats::before { bottom: -10%; left: -15%; }
/* intro-sec a déjà un background image complet — pas de halo supplémentaire */
/* ── Ornements botaniques SVG en coins ── */
.leaf-ornament {
position: absolute;
width: 140px; height: 140px;
opacity: .12;
pointer-events: none; z-index: 0;
color: var(--sage);
stroke: currentColor; fill: none; stroke-width: 1;
stroke-linecap: round; stroke-linejoin: round;
}
.leaf-ornament--tl { top: 2rem; left: 2rem; transform: rotate(-25deg); }
.leaf-ornament--tr { top: 2rem; right: 2rem; transform: rotate(25deg) scaleX(-1); }
.leaf-ornament--bl { bottom: 2rem; left: 2rem; transform: rotate(200deg); }
.leaf-ornament--br { bottom: 2rem; right: 2rem; transform: rotate(160deg) scaleX(-1); }
.leaf-ornament--dark { color: var(--sage-l); opacity: .18; }
@media (max-width: 768px) {
.leaf-ornament { width: 80px; height: 80px; opacity: .08; }
.leaf-ornament--tl, .leaf-ornament--tr { top: 1rem; }
.leaf-ornament--bl, .leaf-ornament--br { bottom: 1rem; }
}
/* Chapter markers supprimés */
.process-sec, .timeline-sec, .contacts-band {
position: relative;
}
.cats { position: relative; }
/* Après accent-rule, réduit le padding top */
.accent-rule + .process-sec,
.accent-rule + .timeline-sec,
.accent-rule + .contacts-band,
.accent-rule-decor + .timeline-sec,
.accent-rule-decor + .contacts-band { padding-top: 4.5rem !important; }
/* ── Print : basique mais présent ── */
@media print {
.nav, .hamburger, .nav-drawer, .scroll-indicator, .marquee-sec, .progress { display: none !important; }
.hero { min-height: auto; background: #fff; color: #000; }
.hero-img, .hero-fade, .hero::after { display: none; }
.hero h1, .hero-sub, .hero-tag { color: #000 !important; }
* { background: transparent !important; color: #000 !important; box-shadow: none !important; }
.cat-photo, .intro-bg { filter: none !important; }
}
/* ── SCROLL INDICATOR FLOTTANT ── */
.scroll-indicator {
position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 900;
display: flex; align-items: center; gap: .7rem;
padding: .55rem 1.05rem .55rem .9rem;
background: rgba(26,31,23,.82); backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(245,243,239,.08); border-radius: 999px;
opacity: 0; transform: translateY(16px);
transition: opacity .4s var(--ease), transform .4s var(--ease);
pointer-events: none;
font-family: var(--fb); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
color: rgba(245,243,239,.68); font-weight: 500;
}
.scroll-indicator.show { opacity: 1; transform: none; }
.scroll-indicator-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--sage-l);
box-shadow: 0 0 8px rgba(181,196,160,.4);
}
.scroll-indicator-pct {
color: var(--sage-l); font-weight: 600; min-width: 2.6em; text-align: right;
}
.scroll-indicator-sep { color: rgba(245,243,239,.15); margin: 0 .1rem; }
@media (max-width: 768px) { .scroll-indicator { display: none; } }
/* ── MODAL ENTRANCE UPGRADE (slide-right + blur progressif) ── */
.cat-modal, .plantes-modal {
transform: translateX(60px) scale(.97);
transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.cat-modal-overlay.open .cat-modal,
.plantes-modal-overlay.open .plantes-modal { transform: none; }
.cat-modal-overlay, .plantes-modal-overlay {
transition: opacity .4s cubic-bezier(.22,1,.36,1), visibility .4s, backdrop-filter .4s;
}
.cat-modal-overlay.open, .plantes-modal-overlay.open {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
.hero h1 .kinetic-word, .hero h1 .kc {
transform: none !important; animation: none !important;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.hero-img { animation: none !important; transform: scale(1.05) !important; }
.marquee, .stat-n { animation: none !important; }
.cursor-dot, .cursor-ring, .scroll-indicator, .cursor-trail { display: none !important; }
.plx { transform: none !important; }
.rv-clip { clip-path: inset(0 0 0 0) !important; }
.rv-blur { filter: none !important; opacity: 1 !important; transform: none !important; }
}
/* ═════════════════════════════════════════════════════════════════
PUSH 2 — Punch supplémentaire
═════════════════════════════════════════════════════════════════ */
/* ── KINETIC LETTER SPLIT (upgrade) ── */
.hero h1 .kc {
display: inline-block; will-change: transform, font-variation-settings;
transform: translateY(110%);
font-variation-settings: "opsz" 144, "SOFT" 0;
animation: kineticIn .85s cubic-bezier(.16,1,.3,1) forwards;
animation-delay: var(--d, 0s);
}
.hero h1 .kc-space { display: inline-block; width: .28em; }
.hero h1 .kc.em { font-style: italic; color: var(--sage-l); }
/* Désactive l'anim word-level dès que JS a splitté */
.js-split .hero h1 .kinetic-word {
transform: none !important; animation: none !important;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
/* ── BENTO VARIATIONS (aspect ratios variés) ── */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1.55fr 1fr .85fr;
grid-template-rows: minmax(340px, .9fr) minmax(260px, .75fr);
grid-template-areas:
"plantes chataignes fruits"
"plantes escargots fruits";
}
.cat-card[data-modal="chataignes"] .cat-content { padding: 1.6rem 1.5rem; }
.cat-card[data-modal="chataignes"] .cat-name { font-size: clamp(1.1rem, 1.35vw, 1.3rem); }
.cat-card[data-modal="escargots"] .cat-content { padding: 1.5rem 1.4rem; }
.cat-card[data-modal="escargots"] .cat-name { font-size: clamp(.95rem, 1.2vw, 1.15rem); }
.cat-card[data-modal="fruits"] .cat-content { padding: 2rem 1.6rem; }
.cat-card[data-modal="fruits"] .cat-name { font-size: clamp(1.2rem, 1.5vw, 1.55rem); }
/* Plantes = dominante, plus grand titre */
.cat-card[data-modal="plantes"] .cat-name { font-size: clamp(1.9rem, 2.4vw, 2.6rem); line-height: 1.05; }
.cat-card[data-modal="plantes"] .cat-sub { font-size: .72rem; }
}
/* ── CLICK RIPPLE (éditorial) ── */
.cat-card { position: relative; }
.ripple {
position: absolute; border-radius: 50%; pointer-events: none;
background: rgba(181,196,160,.35); transform: translate(-50%,-50%) scale(0);
animation: rippleFx .9s cubic-bezier(.22,1,.36,1) forwards;
mix-blend-mode: overlay; z-index: 4;
}
@keyframes rippleFx {
0% { opacity: .7; transform: translate(-50%,-50%) scale(0); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(9); }
}s loop + float) ── */
@keyframes statBreathe {
0%,100% { font-variation-settings: "opsz" 144, "SOFT" 40; }
50% { font-variation-settings: "opsz" 144, "SOFT" 75; }
}
.stat-n { animation: statBreathe 6s ease-in-out infinite; }
.stat-n.counting { animation: none; } /* pause pendant le count */
/* ── MAGNETIC — styles communs sur plus d'éléments ── */
.nav-link[data-magnetic],
.logo[data-magnetic],
.drawer-cta[data-magnetic],
.scroll-hint[data-magnetic] { display: inline-flex; }
/* ── SECTION TITLE FLOAT (subtil parallax sur h2 de section) ── */
.s-title, .cats-title, .contacts-band-title {
transition: transform .8s cubic-bezier(.22,1,.36,1);
}
/* ── CARDS : PLUS VIOLENT SUR HOVER ── */
.cat-card:hover .cat-photo {
transform: scale(1.12) rotate(.6deg);
filter: brightness(.18) saturate(.4);
}
.cat-card:hover .cat-overlay {
background: linear-gradient(to top, rgba(10,14,8,.98) 0%, rgba(10,14,8,.55) 45%, rgba(138,155,117,.12) 100%);
}
.cat-card .cat-overlay { transition: background .6s; }
.cat-card .cat-name { transform-origin: left bottom; }
.cat-card:hover .cat-name {
transform: translateY(-14px);
font-variation-settings: "opsz" 144, "SOFT" 80;
}
/* ── NAV LOGO hover ── */
.logo {
transition: color .4s, font-variation-settings .5s, letter-spacing .5s;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.logo:hover { font-variation-settings: "opsz" 144, "SOFT" 80; letter-spacing: .04em; }
/* ── HERO ENTRY PUNCH — tighten le timing, moins de staggered tardif ── */
.hero-tag { animation-delay: .15s !important; }
.hero-sub { animation-delay: 1.05s !important; }
.hero-btns { animation-delay: 1.2s !important; }
.hero-badges { animation-delay: 1.35s !important; }
/* ── BTN hover plus punchy ── */
.btn-sage::before,
.btn-ghost::before {
content: ''; position: absolute; inset: 0;
background: currentColor; opacity: 0; border-radius: inherit;
transform: scaleX(0); transform-origin: left;
transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s;
pointer-events: none; z-index: -1;
}
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn-sage:hover { background: var(--sage-d); }
/* ── CAT DISCOVER upgrade (rotate on hover) ── */
.cat-card:hover .cat-discover {
animation: discoverPop .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes discoverPop {
0% { opacity: 0; transform: scale(.4) rotate(-45deg); }
60% { transform: scale(1.15) rotate(8deg); }
100% { opacity: 1; transform: scale(1) rotate(0); border-color: var(--sage-l); background: rgba(138,155,117,.22); color: #f5f3ef; }
}
/* ── SCROLL INDICATOR sur nav active ── */
.nav-link::before {
content: ''; position: absolute; top: 50%; left: -6px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--sage-l);
transform: translateY(-50%) scale(0);
transition: transform .3s var(--ease);
}
.nav-link.viewing::before { transform: translateY(-50%) scale(1); }
/* ── LETTER kinetic reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
.hero h1 .kc { animation: none !important; transform: none !important; font-variation-settings: "opsz" 144, "SOFT" 50 !important; }
}
/* ═════════════════════════════════════════════════════════════════
PUSH 3 — Refonte sections basses (A/B/C/D/E/F)
═════════════════════════════════════════════════════════════════ */
/* ── B · ENRICHISSEMENT CAT-CARDS (specs tableau) ── */
.cat-specs {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: rgba(245,243,239,.08);
padding: 0; margin: 0 1.4rem 1.4rem;
opacity: 0; transform: translateY(14px);
transition: opacity .45s .1s var(--ease), transform .45s .1s var(--ease);
pointer-events: none;
}
.cat-card:hover .cat-specs { opacity: 1; transform: none; }
.cat-spec {
background: rgba(10,14,8,.82); backdrop-filter: blur(8px);
padding: .6rem .75rem;
border: 1px solid rgba(245,243,239,.06);
}
.cat-spec-label {
font-size: .48rem; letter-spacing: .22em; text-transform: uppercase;
color: rgba(181,196,160,.6); font-weight: 600; display: block; margin-bottom: .15rem;
}
.cat-spec-val {
font-size: .72rem; color: rgba(245,243,239,.9);
font-family: var(--fd); font-weight: 400;
font-variation-settings: "opsz" 48, "SOFT" 30;
line-height: 1.2;
}
/* Card plantes : specs sur 4 colonnes parce que plus large */
@media (min-width: 901px) {
.cat-card[data-modal="plantes"] .cat-specs { grid-template-columns: repeat(4, 1fr); }
}
/* Mobile : specs visibles en permanence (pas de hover) */
@media (max-width: 900px) {
.cat-specs { opacity: 1; transform: none; }
.cat-card .cat-sub { display: none; }
}
/* Décale le .cat-bottom pour ne pas chevaucher */
.cat-card .cat-content { padding-bottom: 5rem !important; }
@media (min-width: 901px) {
.cat-card[data-modal="plantes"] .cat-content { padding-bottom: 5.5rem !important; }
}
/* ── D · PROCESS (4 étapes, section claire) ── */
.process-sec {
background: var(--bg); padding: 7rem 2rem 6rem;
position: relative; overflow: hidden;
border-bottom: 1px solid var(--border);
}
.process-sec::before {
content: ''; position: absolute; top: -30%; right: -15%; width: 50%; height: 120%;
background: radial-gradient(ellipse, rgba(138,155,117,.08) 0%, transparent 60%);
pointer-events: none;
}
.process-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.process-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 3rem; margin-bottom: 4rem; flex-wrap: wrap;
}
.process-head-left { max-width: 480px; }
.process-eyebrow {
font-size: .58rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
color: var(--sage-d); display: block; margin-bottom: 1rem;
}
.process-title {
font-family: var(--fd); font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 400; color: var(--ink); line-height: 1.15; letter-spacing: -.02em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.process-title em { font-style: italic; color: var(--olive); }
.process-sub {
max-width: 380px;
font-size: .88rem; color: var(--stone); font-weight: 300; line-height: 1.8;
}
.process-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.process-step {
background: var(--white); padding: 2.4rem 2rem 2.2rem;
display: flex; flex-direction: column; gap: 1.2rem;
position: relative; transition: background .35s;
cursor: default;
}
.process-step:hover { background: var(--bg2); }
.process-step-nr {
font-size: .52rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
color: var(--warm);
}
.process-step-icon {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(138,155,117,.1); border: 1px solid rgba(138,155,117,.25);
display: flex; align-items: center; justify-content: center;
transition: background .4s, transform .5s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.process-step:hover .process-step-icon {
background: var(--sage); border-color: var(--sage);
transform: rotate(-8deg) scale(1.08);
}
.process-step-icon svg {
width: 22px; height: 22px; stroke: var(--sage-d); fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s;
}
.process-step:hover .process-step-icon svg { stroke: #f5f3ef; }
.process-step-title {
font-family: var(--fd); font-size: 1.2rem; font-weight: 400;
color: var(--ink); font-variation-settings: "opsz" 48, "SOFT" 30;
line-height: 1.2;
}
.process-step-title em { font-style: italic; color: var(--olive); }
.process-step-desc {
font-size: .76rem; color: var(--stone); font-weight: 300; line-height: 1.7;
}
.process-step-stat {
margin-top: auto; padding-top: 1rem;
border-top: 1px solid var(--border);
display: flex; align-items: baseline; gap: .5rem;
}
.process-step-stat-n {
font-family: var(--fd); font-style: italic; font-size: 1.35rem;
color: var(--olive); font-weight: 400;
font-variation-settings: "opsz" 48, "SOFT" 50;
}
.process-step-stat-l {
font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--warm); font-weight: 500;
}
@media (max-width: 1024px) {
.process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.process-sec { padding: 5rem 1.2rem 4rem; }
.process-grid { grid-template-columns: 1fr; }
.process-head { flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.process-step { padding: 1.8rem 1.5rem; }
}
/* ── E · TIMELINE (1991 → 2026) ── */
.timeline-sec {
background: var(--white); padding: 7rem 2rem 6rem;
position: relative;
}
.timeline-inner { max-width: 900px; margin: 0 auto; position: relative; }
.timeline-head {
text-align: center; max-width: 560px; margin: 0 auto 4rem;
}
.timeline-eyebrow {
font-size: .58rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase;
color: var(--sage-d); display: block; margin-bottom: 1rem;
}
.timeline-title {
font-family: var(--fd); font-size: clamp(2rem, 3.4vw, 2.8rem);
font-weight: 400; color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
font-variation-settings: "opsz" 144, "SOFT" 55;
}
.timeline-title em { font-style: italic; color: var(--olive); }
.timeline-list {
position: relative;
padding: 1rem 0;
list-style: none; margin: 0;
}
.timeline-list::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
width: 1px; background: linear-gradient(to bottom, transparent, var(--border) 8%, var(--border) 92%, transparent);
transform: translateX(-50%);
}
.timeline-item {
position: relative; display: grid;
grid-template-columns: 1fr auto 1fr; gap: 2rem;
padding: 1.6rem 0;
opacity: 0; transform: translateY(20px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.timeline-item.on { opacity: 1; transform: none; }
.timeline-item-year {
font-family: var(--fd); font-style: italic; font-size: 2.2rem; font-weight: 400;
color: var(--olive); line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 70;
letter-spacing: -.02em;
}
.timeline-item-dot {
width: 14px; height: 14px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--sage);
position: relative; z-index: 1;
margin: .5rem 0;
transition: background .3s, transform .3s;
}
.timeline-item:hover .timeline-item-dot { background: var(--sage); transform: scale(1.35); }
.timeline-item-content {}
.timeline-item-title {
font-family: var(--fd); font-size: 1.1rem; font-weight: 400;
color: var(--ink); margin-bottom: .3rem;
font-variation-settings: "opsz" 48, "SOFT" 30;
}
.timeline-item-desc {
font-size: .82rem; color: var(--stone); font-weight: 300; line-height: 1.7;
max-width: 340px;
}
/* Alternance gauche/droite */
.timeline-item:nth-child(odd) .timeline-item-year {
text-align: right; grid-column: 1;
}
.timeline-item:nth-child(odd) .timeline-item-content {
grid-column: 3;
}
.timeline-item:nth-child(even) .timeline-item-year {
grid-column: 3; text-align: left;
}
.timeline-item:nth-child(even) .timeline-item-content {
grid-column: 1; text-align: right;
}
.timeline-item:nth-child(even) .timeline-item-desc { margin-left: auto; }
.timeline-item-dot-cell { grid-column: 2; display: flex; justify-content: center; align-items: flex-start; }
@media (max-width: 768px) {
.timeline-sec { padding: 5rem 1.2rem 4rem; }
.timeline-list::before { left: 14px; }
.timeline-item { grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.2rem 0; }
.timeline-item:nth-child(odd) .timeline-item-year,
.timeline-item:nth-child(even) .timeline-item-year { grid-column: 2; text-align: left; font-size: 1.6rem; margin-bottom: .2rem; }
.timeline-item:nth-child(odd) .timeline-item-content,
.timeline-item:nth-child(even) .timeline-item-content { grid-column: 2; text-align: left; }
.timeline-item:nth-child(even) .timeline-item-desc { margin-left: 0; }
.timeline-item-dot-cell { grid-column: 1; }
.timeline-item-dot { margin: .5rem 0 0; }
}
/* ── A · CONTACTS-BAND RENFORCÉE (header + intro + reassurance) ── */
.contacts-band { padding: 7rem 2rem 5rem; }
.contacts-band-head {
flex-direction: column; align-items: flex-start;
gap: 1.4rem; margin-bottom: 3rem;
}
.contacts-band-eyebrow {
font-size: .58rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
color: var(--sage-d); display: block;
}
.contacts-band-title {
font-size: clamp(2rem, 4vw, 3.2rem) !important;
line-height: 1.05 !important;
font-variation-settings: "opsz" 144, "SOFT" 55;
}
.contacts-band-intro {
max-width: 560px;
font-size: 1rem; color: var(--stone); font-weight: 300; line-height: 1.8;
}
.contacts-band-reassurance {
display: flex; gap: 2rem; flex-wrap: wrap;
margin-top: 1.5rem; padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.reassurance-item {
display: flex; align-items: center; gap: .7rem;
font-size: .72rem; color: var(--char); font-weight: 300;
}
.reassurance-item svg {
width: 16px; height: 16px; stroke: var(--sage-d); fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.reassurance-item strong {
font-weight: 500; color: var(--ink);
}
@media (max-width: 768px) {
.contacts-band { padding: 5rem 1.2rem 3.5rem; }
.contacts-band-reassurance { gap: 1rem; flex-direction: column; }
}
/* ── F · FOOTER REFONTE (hiérarchie + certifs badges + newsletter) ── */
footer {
background: var(--ink); /* on passe le footer en dark éditorial */
color: rgba(245,243,239,.6);
padding: 5.5rem 2rem 2rem;
border-top: none;
}
.footer-hero {
max-width: 1200px; margin: 0 auto 4rem;
padding-bottom: 3.5rem; border-bottom: 1px solid rgba(245,243,239,.08);
}
.footer-logo {
font-family: var(--fd); font-weight: 400;
font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
color: #f5f3ef !important; line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 65;
display: block !important; margin-bottom: 1.4rem !important;
letter-spacing: -.02em;
}
.footer-logo em { font-style: italic; color: var(--sage-l); font-weight: 400; }
.footer-desc {
font-size: .9rem !important; color: rgba(245,243,239,.55) !important;
max-width: 420px !important; line-height: 1.75 !important;
margin-bottom: 1.8rem;
}
.footer-certs-v2 {
display: flex; flex-wrap: wrap; gap: .6rem;
}
.footer-cert-badge {
display: inline-flex; align-items: center; gap: .55rem;
padding: .5rem .85rem;
border: 1px solid rgba(245,243,239,.14);
border-radius: 999px; background: rgba(245,243,239,.02);
font-size: .62rem; color: rgba(245,243,239,.75);
font-weight: 500; letter-spacing: .08em;
transition: background .3s, border-color .3s;
}
.footer-cert-badge:hover {
background: rgba(138,155,117,.1); border-color: var(--sage);
}
.footer-cert-badge svg {
width: 14px; height: 14px; stroke: var(--sage-l); fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.footer-grid {
background: transparent;
max-width: 1200px; margin: 0 auto 2.5rem !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 2.5rem !important;
}
.footer-grid > div { padding: 0; }
.f-col-title {
color: #f5f3ef !important; font-size: .56rem !important;
letter-spacing: .28em !important;
}
.f-links a {
color: rgba(245,243,239,.5) !important; font-size: .78rem !important;
}
.f-links a:hover {
color: var(--sage-l) !important;
}
.footer-bot {
border-top: 1px solid rgba(245,243,239,.08) !important;
padding-top: 1.6rem !important;
}
.footer-copy, .footer-legal a {
color: rgba(245,243,239,.35) !important;
}
.footer-legal a:hover { color: rgba(245,243,239,.7) !important; }
@media (max-width: 1024px) {
.footer-hero { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 768px) {
footer { padding: 4rem 1.2rem 1.8rem; }
.footer-hero { margin-bottom: 2.5rem; padding-bottom: 2.5rem; }
.footer-grid { grid-template-columns: 1fr !important; }
}
/* ═════════════════════════════════════════════════════════════════
PRODUITS.HTML — Page catalogue
═════════════════════════════════════════════════════════════════ */
/* Hero compact */
/* Page-hero éditorial light, centré */
.page-hero {
background: var(--bg);
position: relative; overflow: hidden;
padding: 9rem 2rem 3.5rem;
border-bottom: 1px solid var(--border);
}
.page-hero::before {
content: ''; position: absolute;
top: -30%; right: -10%; width: 55%; height: 120%;
background: radial-gradient(ellipse, rgba(138,155,117,.14) 0%, transparent 65%);
pointer-events: none;
}
.page-hero::after {
content: ''; position: absolute;
bottom: -40%; left: -10%; width: 45%; height: 100%;
background: radial-gradient(ellipse, rgba(74,90,58,.08) 0%, transparent 60%);
pointer-events: none;
}
.page-hero-inner {
max-width: 1040px; margin: 0 auto; width: 100%;
position: relative; z-index: 1;
text-align: center;
}
.page-hero-eyebrow {
font-family: var(--fb);
font-size: .62rem; font-weight: 600; letter-spacing: .36em; text-transform: uppercase;
color: var(--sage-d); display: inline-flex; align-items: center; gap: .8rem;
margin-bottom: 1.8rem;
}
.page-hero-eyebrow::before,
.page-hero-eyebrow::after {
content: ''; display: inline-block; width: 22px; height: 1px; background: var(--sage-d);
}
.page-hero-title {
font-family: var(--fd); font-weight: 400; color: var(--ink);
font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1;
letter-spacing: -.028em; margin-bottom: 1.6rem;
font-variation-settings: "opsz" 144, "SOFT" 55;
max-width: 880px; margin-left: auto; margin-right: auto;
}
.page-hero-title em {
font-style: italic; color: var(--olive);
font-variation-settings: "opsz" 144, "SOFT" 75;
}
.page-hero-sub {
font-size: 1.02rem; color: var(--char); font-weight: 300;
line-height: 1.8; max-width: 620px; margin: 0 auto;
}
.page-hero-stats {
max-width: 1040px; margin: 3.6rem auto 0;
display: grid; grid-template-columns: repeat(4, 1fr);
padding-top: 2.4rem;
border-top: 1px solid var(--border);
position: relative; z-index: 1;
}
.page-hero-stat {
text-align: center;
border-right: 1px solid var(--border);
padding: 0 1rem;
}
.page-hero-stat:last-child { border-right: 0; }
.page-hero-stat-val {
display: block;
font-family: var(--fd); font-style: italic; font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: var(--olive); line-height: 1;
letter-spacing: -.02em;
font-variation-settings: "opsz" 144, "SOFT" 70;
}
.page-hero-stat-label {
display: block;
margin-top: .55rem;
font-family: var(--fb);
font-size: .56rem; letter-spacing: .28em; text-transform: uppercase;
color: var(--warm); font-weight: 500;
}
@media (max-width: 900px) {
.page-hero { padding: 7.5rem 1.4rem 3rem; }
.page-hero-stats { grid-template-columns: 1fr 1fr; gap: 1.4rem 0; padding-top: 1.8rem; margin-top: 2.5rem; }
.page-hero-stat { padding: 1rem; border-right: 0; }
.page-hero-stat:nth-child(odd) { border-right: 1px solid var(--border); }
.page-hero-stat:nth-child(3), .page-hero-stat:nth-child(4) { border-top: 1px solid var(--border); }
}
/* Toolbar sticky */
.catalog-toolbar {
position: sticky; top: 0; z-index: 500;
background: rgba(245,243,239,.92);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
padding: 1rem 2rem;
}
.nav ~ main .catalog-toolbar { top: 72px; } /* sous la nav collée */
.catalog-toolbar-inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.catalog-filters {
display: flex; gap: .3rem; flex-wrap: wrap; flex: 1; min-width: 260px;
}
.catalog-filter {
padding: .45rem .95rem;
border: 1px solid var(--border); border-radius: 999px;
font-family: var(--fb); font-size: .62rem; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--stone); background: var(--white); cursor: pointer;
transition: border-color var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out);
}
.catalog-filter:hover { border-color: var(--sage); color: var(--olive); }
.catalog-filter.active {
background: var(--ink); border-color: var(--ink); color: #f5f3ef;
}
.catalog-search-wrap { position: relative; width: 220px; }
.catalog-search {
width: 100%; padding: .55rem .9rem .55rem 2.1rem;
border: 1px solid var(--border); border-radius: 999px;
font-family: var(--fb); font-size: .78rem; font-weight: 300;
color: var(--char); background: var(--white);
transition: border-color .25s, box-shadow .25s;
}
.catalog-search:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(138,155,117,.15); }
.catalog-search-ico {
position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; stroke: var(--warm); fill: none; stroke-width: 1.8;
pointer-events: none;
}
.catalog-count {
font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--sage-d); white-space: nowrap;
}
@media (max-width: 768px) {
.catalog-toolbar { padding: .8rem 1rem; }
.nav ~ main .catalog-toolbar { top: 64px; }
.catalog-search-wrap { width: 100%; order: -1; }
.catalog-filters { gap: .3rem; }
.catalog-filter { font-size: .56rem; padding: .38rem .7rem; }
}
/* Featured specialty cards (châtaignes / fruits / escargots) */
.featured-specialty-sec {
background: var(--bg);
padding: 5rem 2rem 3rem;
}
.featured-specialty-inner {
max-width: 1280px; margin: 0 auto;
}
.featured-specialty-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.featured-specialty-eyebrow {
font-size: .56rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
color: var(--sage-d);
}
.featured-specialty-title {
font-family: var(--fd); font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 400; color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.featured-specialty-title em { font-style: italic; color: var(--olive); }
.featured-specialty-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.specialty-card {
background: var(--white); padding: 2rem;
border: 1px solid var(--border); border-radius: 4px;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
display: flex; flex-direction: column; gap: 1rem;
}
.specialty-card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-md);
border-color: var(--sage-l);
}
.specialty-card-tag {
font-size: .55rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
color: var(--sage-d);
}
.specialty-card-title {
font-family: var(--fd); font-style: italic; font-size: 1.5rem; font-weight: 400;
color: var(--ink); line-height: 1.15;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.specialty-card-desc {
font-size: .8rem; color: var(--stone); font-weight: 300; line-height: 1.7;
}
.specialty-card-specs {
margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem;
padding-top: 1rem; border-top: 1px solid var(--border);
}
.specialty-card-spec-label {
font-size: .5rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--warm); font-weight: 600;
}
.specialty-card-spec-val {
font-size: .75rem; color: var(--ink); font-weight: 400;
font-family: var(--fd);
font-variation-settings: "opsz" 48, "SOFT" 20;
}
.specialty-card-cta {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: .5rem; font-size: .62rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: var(--olive); transition: gap .25s var(--ease), color .25s;
}
.specialty-card:hover .specialty-card-cta { gap: .8rem; color: var(--sage-d); }
@media (max-width: 900px) {
.featured-specialty-grid { grid-template-columns: 1fr; }
}
/* Catalog grid — plantes */
.catalog-sec {
background: var(--white); padding: 4rem 2rem 7rem;
border-top: 1px solid var(--border);
}
.catalog-sec-inner { max-width: 1280px; margin: 0 auto; }
.catalog-sec-head {
margin-bottom: 2.5rem;
}
.catalog-sec-title {
font-family: var(--fd); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 400;
color: var(--ink); margin-bottom: .4rem;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.catalog-sec-title em { font-style: italic; color: var(--olive); }
.catalog-sec-sub {
font-size: .82rem; color: var(--stone); font-weight: 300;
}
.catalog-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
background: transparent; border: 0;
}
.catalog-item {
position: relative; overflow: hidden;
aspect-ratio: 3/4;
background: #0e1209;
border-radius: 4px;
border: 0; padding: 0;
font: inherit; color: inherit; text-align: left;
cursor: pointer;
transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
text-decoration: none;
display: block; width: 100%;
box-shadow: 0 2px 10px rgba(26,31,23,.08);
}
.catalog-item:hover {
z-index: 1;
transform: translateY(-4px);
box-shadow: 0 22px 46px rgba(26,31,23,.2), 0 6px 14px rgba(26,31,23,.1);
}
.catalog-item-bio {
position: absolute; top: .9rem; left: .9rem; z-index: 4;
font-family: var(--fb); font-size: .5rem; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: var(--ink); background: #e8eedd;
padding: .3rem .6rem; border-radius: 999px;
display: inline-flex; align-items: center; gap: .35rem;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.catalog-item-bio::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--sage-d);
}
@media (max-width: 900px) {
.catalog-grid { gap: 1rem; }
}
@media (max-width: 600px) {
.catalog-grid { gap: .9rem; }
.catalog-item-bio { font-size: .46rem; padding: .25rem .5rem; top: .7rem; left: .7rem; }
}
.catalog-item.hidden { display: none; }
.catalog-item-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(.55) saturate(.85);
transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s;
z-index: 0;
}
.catalog-item:hover .catalog-item-img {
transform: scale(1.08);
filter: brightness(.38) saturate(.7);
}
.catalog-item::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top,
rgba(10,14,8,.95) 0%,
rgba(10,14,8,.55) 45%,
rgba(10,14,8,.1) 75%,
transparent 100%);
pointer-events: none;
}
.catalog-item-content {
position: absolute; inset: 0; z-index: 2;
padding: 1.2rem 1.1rem;
display: flex; flex-direction: column; gap: .5rem;
color: #f5f3ef;
}
.catalog-item-top {
display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem;
}
.catalog-item-nr {
font-size: .5rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: rgba(245,243,239,.55);
}
.catalog-item-cat {
font-size: .48rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--sage-l); padding: .2rem .55rem;
border: 1px solid rgba(181,196,160,.35); border-radius: 999px;
background: rgba(10,14,8,.4); backdrop-filter: blur(6px);
}
.catalog-item-bottom {
margin-top: auto;
}
.catalog-item-name {
font-family: var(--fd); font-style: italic; font-size: 1.15rem; font-weight: 400;
color: #f5f3ef; line-height: 1.2;
font-variation-settings: "opsz" 48, "SOFT" 60;
transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.catalog-item:hover .catalog-item-name {
transform: translateY(-6px);
}
.catalog-item-latin {
font-size: .7rem; color: rgba(245,243,239,.62); font-weight: 300; font-style: italic;
line-height: 1.3; margin-top: .2rem;
}
.catalog-item-action {
margin-top: .7rem;
display: inline-flex; align-items: center; gap: .4rem;
font-size: .55rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--sage-l);
opacity: 0; transform: translateY(6px);
transition: opacity .35s .05s, transform .35s .05s var(--ease);
}
.catalog-item:hover .catalog-item-action {
opacity: 1; transform: none;
}
.catalog-item-action::after {
content: '→'; transition: transform .25s var(--ease);
}
.catalog-item:hover .catalog-item-action::after {
transform: translateX(4px);
}
.catalog-item-hoverline {
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: var(--sage);
transform: scaleX(0); transform-origin: left;
transition: transform .5s cubic-bezier(.22,1,.36,1);
z-index: 3;
}
.catalog-item:hover .catalog-item-hoverline { transform: scaleX(1); }
@media (max-width: 480px) {
.catalog-item-action { opacity: 1; transform: none; }
}
.catalog-empty {
grid-column: 1 / -1;
text-align: center; padding: 4rem 2rem;
color: var(--stone); font-size: .9rem;
background: var(--white);
}
.catalog-empty em {
font-family: var(--fd); font-style: italic; color: var(--olive);
font-variation-settings: "opsz" 48, "SOFT" 50;
}
@media (max-width: 1024px) {
.catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.catalog-sec { padding: 3rem 1.2rem 5rem; }
}
@media (max-width: 480px) {
.catalog-grid { grid-template-columns: 1fr; }
.catalog-item-action { opacity: 1; transform: none; }
}
/* Catalog grid tient compte du sticky nav + toolbar */
html { scroll-padding-top: 160px; }
/* ═════════════════════════════════════════════════════════════════
PLANT DETAIL MODAL (produits.html)
═════════════════════════════════════════════════════════════════ */
.plant-modal-overlay {
position: fixed; inset: 0; z-index: 9200;
background: rgba(26,31,23,.7);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
}
.plant-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: all; }
.plant-modal {
background: var(--white); border-radius: 6px;
width: 100%; max-width: 720px; max-height: 90vh;
display: flex; flex-direction: column;
transform: translateX(60px) scale(.97);
transition: transform .5s cubic-bezier(.22,1,.36,1);
overflow: hidden;
box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.25);
}
.plant-modal-overlay.open .plant-modal { transform: none; }
.plant-modal-photo {
height: 300px; flex-shrink: 0;
position: relative; overflow: hidden;
background: #0e1209;
}
.plant-modal-photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(.85);
}
.plant-modal-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(26,31,23,.9) 0%,
rgba(26,31,23,.3) 50%,
transparent 100%);
}
.plant-modal-photo-text {
position: absolute; bottom: 1.8rem; left: 2rem; right: 5rem; z-index: 2;
}
.plant-modal-tag {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .55rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
color: var(--sage-l); margin-bottom: .6rem;
}
.plant-modal-tag-bio {
font-family: var(--fb); font-size: .48rem; font-weight: 700;
letter-spacing: .22em; color: var(--ink); background: #e8eedd;
padding: .2rem .5rem; border-radius: 999px;
}
.plant-modal-name {
font-family: var(--fd); font-style: italic; font-weight: 400;
font-size: clamp(1.6rem, 3vw, 2.2rem); color: #f5f3ef;
line-height: 1.1; margin-bottom: .3rem;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.plant-modal-latin {
font-size: .85rem; color: rgba(245,243,239,.7); font-weight: 300;
font-style: italic;
}
.plant-modal-close {
position: absolute; top: 1rem; right: 1rem; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(26,31,23,.55); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .25s, transform .25s;
}
.plant-modal-close:hover { background: rgba(26,31,23,.85); transform: rotate(90deg); }
.plant-modal-close svg { width: 14px; height: 14px; stroke: #f5f3ef; stroke-width: 2; fill: none; }
.plant-modal-body {
padding: 2rem; overflow-y: auto; flex: 1;
}
.plant-modal-intro {
font-size: .92rem; color: var(--stone); font-weight: 300; line-height: 1.8;
margin-bottom: 2rem;
}
.plant-modal-intro em { font-family: var(--fd); font-style: italic; color: var(--olive); }
.plant-modal-specs {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 4px;
overflow: hidden; margin-bottom: 1.6rem;
}
.plant-modal-spec {
background: var(--bg); padding: 1rem 1.1rem;
}
.plant-modal-spec-label {
font-size: .5rem; font-weight: 600; letter-spacing: .22em;
text-transform: uppercase; color: var(--warm);
display: block; margin-bottom: .3rem;
}
.plant-modal-spec-val {
font-family: var(--fd); font-size: .9rem; color: var(--ink); font-weight: 400;
font-variation-settings: "opsz" 48, "SOFT" 30;
}
.plant-modal-spec-val em { font-style: italic; color: var(--olive); }
.plant-modal-cta {
background: var(--ink); border-radius: 4px;
padding: 1.4rem 1.6rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.plant-modal-cta-left strong {
display: block; font-family: var(--fd); font-size: 1rem; font-weight: 400;
font-style: italic; color: #f5f3ef; margin-bottom: .15rem;
font-variation-settings: "opsz" 48, "SOFT" 40;
}
.plant-modal-cta-left p {
font-size: .72rem; color: rgba(245,243,239,.55); font-weight: 300;
}
.plant-modal-cta-btn {
padding: .65rem 1.2rem; border-radius: 2px;
background: var(--sage); color: #f5f3ef;
border: 1px solid var(--sage);
font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
transition: background .25s, transform .25s var(--ease);
white-space: nowrap;
}
.plant-modal-cta-btn:hover { background: var(--sage-d); transform: translateY(-1px); }
@media (max-width: 600px) {
.plant-modal { max-height: 94vh; }
.plant-modal-photo { height: 220px; }
.plant-modal-photo-text { left: 1.2rem; right: 3.5rem; bottom: 1.2rem; }
.plant-modal-body { padding: 1.4rem; }
.plant-modal-specs { grid-template-columns: 1fr; }
.plant-modal-cta { flex-direction: column; align-items: stretch; text-align: center; }
.plant-modal-cta-btn { justify-content: center; }
}
/* Card : nom FR prominent, EN+latin discret */
.catalog-item-latin-en {
font-size: .65rem; color: rgba(245,243,239,.5); font-weight: 300;
line-height: 1.4; margin-top: .25rem;
}
.catalog-item-latin-en em {
font-style: italic;
}
/* Modal subtitle (EN + Latin) */
.plant-modal-subtitle {
font-family: var(--fb);
font-size: .78rem; color: rgba(245,243,239,.6); font-weight: 300;
letter-spacing: .02em;
}
.plant-modal-subtitle em {
font-style: italic; color: rgba(245,243,239,.75);
}
/* Modal prev/next nav */
.plant-modal-nav {
position: absolute; top: 50%; z-index: 4;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(26,31,23,.55); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transform: translateY(-50%);
transition: background .25s, transform .25s, opacity .25s;
color: #f5f3ef;
}
.plant-modal-nav:hover { background: rgba(26,31,23,.85); }
.plant-modal-nav:disabled { opacity: .3; cursor: not-allowed; }
.plant-modal-nav--prev { left: 1rem; }
.plant-modal-nav--next { right: 1rem; }
.plant-modal-nav--prev:hover:not(:disabled) { transform: translateY(-50%) translateX(-2px); }
.plant-modal-nav--next:hover:not(:disabled) { transform: translateY(-50%) translateX(2px); }
.plant-modal-nav svg {
width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Counter X / 80 en bas de la photo */
.plant-modal-counter {
position: absolute; bottom: 1rem; right: 1.4rem; z-index: 3;
font-family: var(--fb);
font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
color: rgba(245,243,239,.5); font-weight: 500;
}
.plant-modal-counter strong {
color: var(--sage-l); font-weight: 600;
}
@media (max-width: 600px) {
.plant-modal-nav { width: 38px; height: 38px; }
.plant-modal-nav--prev { left: .5rem; }
.plant-modal-nav--next { right: .5rem; }
}
/* ═════════════════════════════════════════════════════════════════
SHORTLIST + SORT + SHARE (produits.html)
═════════════════════════════════════════════════════════════════ */
/* Checkbox sur card */
.catalog-item-select {
position: absolute; top: .9rem; right: .9rem; z-index: 4;
width: 30px; height: 30px; border-radius: 50%;
border: 1.5px solid rgba(245,243,239,.4);
background: rgba(10,14,8,.4); backdrop-filter: blur(6px);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .25s, border-color .25s, transform .25s;
padding: 0;
}
.catalog-item-select:hover {
border-color: var(--sage-l);
background: rgba(138,155,117,.22);
}
.catalog-item-select svg {
width: 14px; height: 14px;
stroke: #f5f3ef; stroke-width: 2.5; fill: none;
stroke-linecap: round; stroke-linejoin: round;
opacity: 0; transition: opacity .25s;
}
.catalog-item.selected .catalog-item-select {
background: var(--sage); border-color: var(--sage);
}
.catalog-item.selected .catalog-item-select svg {
opacity: 1;
}
.catalog-item.selected {
outline: 2px solid var(--sage);
outline-offset: 2px;
}
@media (max-width: 600px) {
.catalog-item-select { width: 26px; height: 26px; top: .7rem; right: .7rem; }
}
/* Floating shortlist bar */
.shortlist-bar {
position: fixed; bottom: 1.4rem; left: 50%;
transform: translateX(-50%) translateY(140%);
z-index: 800;
max-width: calc(100vw - 2rem);
background: var(--ink); color: #f5f3ef;
border-radius: 999px;
padding: .65rem .65rem .65rem 1.4rem;
display: flex; align-items: center; gap: 1rem;
box-shadow: 0 18px 40px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2);
border: 1px solid rgba(245,243,239,.08);
opacity: 0; pointer-events: none;
transition: opacity .35s var(--ease), transform .4s cubic-bezier(.22,1,.36,1);
}
.shortlist-bar.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: all;
}
.shortlist-bar-count {
display: flex; align-items: baseline; gap: .5rem;
font-family: var(--fb); font-size: .76rem;
}
.shortlist-bar-count strong {
font-family: var(--fd); font-style: italic; font-size: 1.3rem;
color: var(--sage-l); font-weight: 400;
font-variation-settings: "opsz" 48, "SOFT" 60;
}
.shortlist-bar-count span {
font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
color: rgba(245,243,239,.55); font-weight: 500;
}
.shortlist-bar-sep {
width: 1px; height: 20px; background: rgba(245,243,239,.12);
}
.shortlist-bar-clear {
background: transparent; border: 0;
font-family: var(--fb); font-size: .6rem; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: rgba(245,243,239,.5); cursor: pointer; padding: .3rem .5rem;
transition: color .25s;
}
.shortlist-bar-clear:hover { color: #f5f3ef; }
.shortlist-bar-cta {
background: var(--sage); color: #f5f3ef;
padding: .75rem 1.4rem; border-radius: 999px; border: 0;
font-family: var(--fb); font-size: .62rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
transition: background .25s, transform .25s var(--ease);
}
.shortlist-bar-cta:hover { background: var(--sage-d); transform: translateY(-1px); }
.shortlist-bar-cta svg {
width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 600px) {
.shortlist-bar { padding: .55rem; gap: .5rem; bottom: 1rem; }
.shortlist-bar-count span { display: none; }
.shortlist-bar-sep { display: none; }
.shortlist-bar-cta { padding: .6rem 1rem; font-size: .58rem; }
}
/* Sort dropdown dans toolbar */
.catalog-sort {
position: relative;
}
.catalog-sort-btn {
padding: .55rem .9rem; padding-right: 2rem;
border: 1px solid var(--border); border-radius: 999px;
background: var(--white);
font-family: var(--fb); font-size: .62rem; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase;
color: var(--stone); cursor: pointer;
transition: border-color .25s, color .25s;
position: relative;
}
.catalog-sort-btn::after {
content: ''; position: absolute; right: .85rem; top: 50%;
width: 7px; height: 7px; margin-top: -4px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
}
.catalog-sort-btn:hover { border-color: var(--sage); color: var(--olive); }
.catalog-sort-menu {
position: absolute; top: calc(100% + .5rem); right: 0;
background: var(--white); border: 1px solid var(--border);
border-radius: 4px; min-width: 200px;
box-shadow: 0 14px 32px rgba(26,31,23,.12), 0 4px 10px rgba(26,31,23,.06);
padding: .35rem 0;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.catalog-sort.open .catalog-sort-menu {
opacity: 1; visibility: visible; transform: none;
}
.catalog-sort-option {
display: block; width: 100%; text-align: left;
padding: .55rem 1rem; background: transparent; border: 0;
font-family: var(--fb); font-size: .72rem; font-weight: 400;
color: var(--char); cursor: pointer;
transition: background .15s;
}
.catalog-sort-option:hover { background: var(--bg); }
.catalog-sort-option.active {
background: var(--bg2); color: var(--olive); font-weight: 500;
}
/* Share button dans plant modal */
.plant-modal-share {
position: absolute; top: 1rem; right: 4rem; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(26,31,23,.55); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .25s, transform .25s;
}
.plant-modal-share:hover { background: rgba(26,31,23,.85); transform: scale(1.05); }
.plant-modal-share svg {
width: 15px; height: 15px; stroke: #f5f3ef; stroke-width: 1.8; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
/* Toast notification */
.toast {
position: fixed; bottom: 5rem; left: 50%;
transform: translateX(-50%) translateY(30px);
z-index: 9999;
background: var(--ink); color: #f5f3ef;
padding: .8rem 1.4rem; border-radius: 999px;
font-family: var(--fb); font-size: .7rem; font-weight: 500;
letter-spacing: .08em;
opacity: 0; pointer-events: none;
display: inline-flex; align-items: center; gap: .6rem;
transition: opacity .3s, transform .3s var(--ease);
box-shadow: 0 14px 28px rgba(0,0,0,.25);
border: 1px solid rgba(245,243,239,.1);
}
.toast.visible {
opacity: 1; transform: translateX(-50%) translateY(0);
}
.toast svg {
width: 14px; height: 14px; stroke: var(--sage-l); fill: none; stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round;
}
/* ═════════════════════════════════════════════════════════════════
RESPONSIVE POLISH — pass ciblé mobile/tablet
═════════════════════════════════════════════════════════════════ */
/* Toolbar mobile : sort + count s'alignent proprement, pas de chevauchement */
@media (max-width: 768px) {
.catalog-toolbar-inner { gap: .8rem; }
.catalog-sort { order: 2; }
.catalog-count { order: 3; flex: 1; text-align: right; font-size: .56rem; }
.catalog-sort-btn { font-size: .56rem; padding: .45rem .8rem; padding-right: 1.8rem; }
.catalog-sort-menu { right: auto; left: 0; min-width: 180px; }
}
@media (max-width: 420px) {
.catalog-toolbar { padding: .7rem .9rem; }
.catalog-count { display: none; }
.catalog-filters { order: 1; width: 100%; }
.catalog-sort { order: 2; margin-left: auto; }
.catalog-filter { font-size: .52rem; padding: .32rem .6rem; letter-spacing: .08em; }
}
/* Shortlist bar : responsive texte et icônes */
@media (max-width: 480px) {
.shortlist-bar {
width: calc(100vw - 1.2rem);
max-width: none;
padding: .5rem .5rem .5rem 1rem;
gap: .5rem;
}
.shortlist-bar-count { gap: .35rem; }
.shortlist-bar-count strong { font-size: 1.1rem; }
.shortlist-bar-clear { padding: .25rem .35rem; font-size: .55rem; letter-spacing: .15em; }
.shortlist-bar-cta {
padding: .55rem .85rem; font-size: .56rem; letter-spacing: .14em;
gap: .35rem;
}
/* Texte CTA plus court sur mobile étroit */
.shortlist-bar-cta-text-full { display: none; }
}
@media (max-width: 360px) {
.shortlist-bar-clear { display: none; }
.shortlist-bar-count span { font-size: .55rem; letter-spacing: .14em; }
}
/* Plant modal : ajustements iPhone SE / étroit */
@media (max-width: 400px) {
.plant-modal {
max-height: 95vh; border-radius: 0;
}
.plant-modal-overlay { padding: 0; }
.plant-modal-photo { height: 200px; }
.plant-modal-photo-text {
left: 1rem; right: 3rem; bottom: 1rem;
}
.plant-modal-name { font-size: 1.4rem; }
.plant-modal-subtitle { font-size: .7rem; }
.plant-modal-nav { width: 34px; height: 34px; }
.plant-modal-nav--prev { left: .4rem; }
.plant-modal-nav--next { right: .4rem; }
.plant-modal-share { right: 3.2rem; width: 32px; height: 32px; }
.plant-modal-close { width: 32px; height: 32px; }
.plant-modal-body { padding: 1.2rem; }
.plant-modal-counter { font-size: .52rem; bottom: .7rem; right: 1rem; }
}
/* Page-hero très étroit : stats en 2x2 plus compactes */
@media (max-width: 420px) {
.page-hero { padding: 7rem 1rem 2.4rem; }
.page-hero-eyebrow { font-size: .55rem; letter-spacing: .3em; margin-bottom: 1.2rem; }
.page-hero-eyebrow::before, .page-hero-eyebrow::after { width: 14px; }
.page-hero-title { font-size: clamp(2rem, 9vw, 2.6rem); letter-spacing: -.02em; }
.page-hero-sub { font-size: .88rem; line-height: 1.65; }
.page-hero-stats { margin-top: 2rem; padding-top: 1.4rem; }
.page-hero-stat { padding: .8rem .5rem; }
.page-hero-stat-val { font-size: 1.5rem; }
.page-hero-stat-label { font-size: .48rem; letter-spacing: .22em; margin-top: .35rem; }
}
/* Featured specialty : cards plus compactes sur mobile */
@media (max-width: 600px) {
.featured-specialty-sec { padding: 3.5rem 1rem 2rem; }
.featured-specialty-head { margin-bottom: 1.4rem; }
.specialty-card { padding: 1.4rem; gap: .8rem; }
.specialty-card-title { font-size: 1.25rem; }
.specialty-card-desc { font-size: .76rem; line-height: 1.6; }
.specialty-card-specs { padding-top: .8rem; }
}
/* Cards : bio pill + select bouton un peu plus petits sur écrans très étroits */
@media (max-width: 420px) {
.catalog-item-bio {
font-size: .42rem; letter-spacing: .18em;
padding: .22rem .45rem; top: .6rem; left: .6rem;
}
.catalog-item-select {
width: 24px; height: 24px; top: .6rem; right: .6rem;
}
.catalog-item-select svg { width: 11px; height: 11px; }
.catalog-item-content { padding: .9rem .9rem; gap: .4rem; }
.catalog-item-name { font-size: 1rem; }
.catalog-item-latin-en { font-size: .58rem; }
.catalog-item-action { font-size: .5rem; letter-spacing: .15em; }
}
/* Catalogue grid : 480px = 1 col avec aspect plus court (pas 3/4 écrasé) */
@media (max-width: 480px) {
.catalog-item { aspect-ratio: 16/10; }
.catalog-grid { gap: .8rem; }
}
/* Nav : burger menu mobile plus safe-area-friendly */
@media (max-width: 768px) {
.nav.scrolled .nav-inner { padding: .75rem 1.1rem; }
.nav-drawer { padding: 5.5rem 1.4rem 2rem; }
.drawer-link { font-size: 1.5rem; padding: .65rem 0; }
}
/* Toast sur mobile : un peu plus bas pour pas chevaucher la shortlist bar */
@media (max-width: 600px) {
.toast { bottom: 6.5rem; font-size: .64rem; padding: .65rem 1.1rem; }
}
/* ═════════════════════════════════════════════════════════════════
LANGUAGE SWITCHER (i18n.js)
═════════════════════════════════════════════════════════════════ */
.lang-switch {
position: relative;
margin-left: .5rem;
display: inline-flex;
align-items: center;
}
.lang-switch-btn {
display: inline-flex; align-items: center; gap: .35rem;
padding: .4rem .65rem;
background: transparent;
border: 1px solid rgba(245,243,239,.18); border-radius: 2px;
cursor: pointer;
font-family: var(--fb);
font-size: .62rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(245,243,239,.65);
transition: color .25s, border-color .25s, background .25s;
}
.lang-switch-btn:hover {
color: #f5f3ef;
border-color: rgba(245,243,239,.35);
}
.lang-switch-btn svg {
width: 11px; height: 11px;
stroke: currentColor; fill: none; stroke-width: 1.5;
}
.nav.scrolled .lang-switch-btn {
border-color: var(--border);
color: var(--stone);
}
.nav.scrolled .lang-switch-btn:hover {
color: var(--ink);
border-color: var(--ink);
}
.lang-switch-menu {
position: absolute; top: calc(100% + .45rem); right: 0;
min-width: 160px;
background: var(--white); border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 14px 32px rgba(26,31,23,.14), 0 4px 10px rgba(26,31,23,.06);
padding: .3rem 0;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s, transform .2s var(--ease), visibility .2s;
z-index: 950;
}
.lang-switch.open .lang-switch-menu {
opacity: 1; visibility: visible; transform: none;
}
.lang-switch-option {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: .5rem .9rem;
background: transparent; border: 0;
font-family: var(--fb);
cursor: pointer;
transition: background .15s;
gap: .8rem;
}
.lang-switch-option:hover { background: var(--bg); }
.lang-switch-option.active {
background: var(--bg2);
}
.lang-switch-option .lang-code {
font-size: .6rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--olive);
min-width: 1.5em;
}
.lang-switch-option .lang-name {
font-size: .78rem; font-weight: 400;
color: var(--char);
}
.lang-switch-option.active .lang-name { font-weight: 500; color: var(--ink); }
/* Switcher dans le drawer mobile */
.nav-drawer .lang-switch {
margin-top: 1.4rem; margin-left: 0;
align-self: flex-start;
}
.nav-drawer .lang-switch-btn {
border-color: rgba(245,243,239,.2);
color: rgba(245,243,239,.75);
}
.nav-drawer .lang-switch-menu {
background: var(--char); border-color: rgba(245,243,239,.12);
}
.nav-drawer .lang-switch-option:hover { background: rgba(245,243,239,.06); }
.nav-drawer .lang-switch-option .lang-code { color: var(--sage-l); }
.nav-drawer .lang-switch-option .lang-name { color: rgba(245,243,239,.85); }
.nav-drawer .lang-switch-option.active { background: rgba(138,155,117,.15); }
@media (max-width: 768px) {
/* En desktop nav, on cache le switcher et on le montre dans le drawer */
.nav-inner .lang-switch { display: none; }
}
@keyframes heroV2Zoom {
0% { transform: scale(1.02) translateX(-1%); }
100% { transform: scale(1.08) translateX(1%); }
}
.trust-item {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--fb);
font-size: .68rem; font-weight: 500;
color: rgba(245,243,239,.8);
letter-spacing: .02em;
}
.trust-item svg {
width: 15px; height: 15px;
stroke: var(--sage-l); fill: none; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.trust-item strong {
font-family: var(--fd); font-style: italic;
color: #f5f3ef; font-weight: 400;
font-variation-settings: "opsz" 48, "SOFT" 30;
margin-right: .25rem;
}
/* Responsive hero v2 */
@media (max-width: 960px) {
.hero.hero-v2 { padding: 6.5rem 1.4rem 2.4rem; min-height: auto; }
.hero-v2-inner { grid-template-columns: 1fr; gap: 2.8rem; }
.hero-v2-right { aspect-ratio: 3/2; max-height: 440px; }
.hero-v2-badge { top: 1rem; right: 1rem; padding: .7rem 1rem; max-width: 140px; }
}hero-ctas .btn {
padding: .9rem 1.8rem;
border-radius: 2px;
font-size: .68rem;
}
@media (max-width: 600px) {
.page-hero--index { padding-top: 8rem; }
.page-hero-ctas { flex-direction: column; width: 100%; }
.page-hero-ctas .btn { justify-content: center; width: 100%; }
}
/* ─── Hero produits : version claire des stats (inversion du dark d'index) ─── */
.stats--light {
background: var(--bg) !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
}
.stats--light .stat {
border-right: 1px solid var(--border) !important;
}
.stats--light .stat:last-child { border-right: none !important; }
.stats--light .stat-n {
color: var(--olive) !important;
font-variation-settings: "opsz" 144, "SOFT" 60;
}
.stats--light .stat-l {
color: var(--stone) !important;
opacity: .85;
}
.stats--light:hover .stat-n,
.stats--light .stat:hover .stat-n { color: var(--ink) !important; }
/* Hero produits : caption subtle à la place des CTAs */
.hero--produits .hero-content { padding-bottom: 4rem; }
@media (max-width: 768px) {
.hero--produits .hero-badges { flex-wrap: wrap; }
}
/* ═════════════════════════════════════════════════════════════════
CAT CARDS v2 — reprise du pattern .catalog-item (produits.html)
Layout uniforme 4-col · aspect 3/4 · BIO pill · shadow+lift
Images base64 existantes conservées via .cat-photo (aucun touch HTML)
═════════════════════════════════════════════════════════════════ */
/* Layout : on sort de la bento asymétrique, passage en grille uniforme 4-col */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: repeat(4, 1fr) !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1.5rem !important;
background: transparent !important;
padding: 0 2rem;
max-width: 1440px; margin: 0 auto;
}
.cat-card[data-modal="plantes"],
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
grid-area: auto !important;
aspect-ratio: 3/4 !important;
min-height: 0;
}
}
@media (max-width: 1200px) and (min-width: 901px) {
.cat-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1.2rem !important; padding: 0 1.5rem; }
}
/* Card : radius, ombres, shadow-lift au hover (style catalog-item) */
.cat-card {
border-radius: 4px !important;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.22) !important;
transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1) !important;
}
.cat-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 22px 48px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.2) !important;
}
/* BIO pill (ajoutée via ::before, pas besoin de toucher au HTML) */
.cat-card::before {
content: 'Bio · Sauvage';
position: absolute; top: .9rem; left: .9rem; z-index: 4;
font-family: var(--fb);
font-size: .5rem; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: var(--ink); background: #e8eedd;
padding: .3rem .7rem .3rem 1.1rem;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.cat-card::before {
/* petit dot sage via background-image pour pas ajouter de contenu extra */
background-image: radial-gradient(circle at .5rem center, var(--sage-d) 2.5px, transparent 3px);
background-repeat: no-repeat;
}
/* On masque le badge ronde "cat-discover" devenu redondant */
.cat-card .cat-discover { display: none !important; }
/* Photo zoom plus subtil au hover (style catalog-item-img) */
.cat-card .cat-photo {
transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s !important;
filter: brightness(.55) saturate(.88) !important;
}
.cat-card:hover .cat-photo {
transform: scale(1.08) rotate(0) !important;
filter: brightness(.38) saturate(.72) !important;
}
/* Overlay gradient comme catalog-item (plus net, plus contrasté) */
.cat-card .cat-overlay {
background: linear-gradient(to top,
rgba(10,14,8,.95) 0%,
rgba(10,14,8,.55) 45%,
rgba(10,14,8,.1) 75%,
transparent 100%) !important;
}
/* Content : layout identique à catalog-item */
.cat-card .cat-content {
padding: 1.2rem 1.1rem !important;
padding-bottom: 1.2rem !important;
gap: .5rem;
}
.cat-card .cat-nr {
font-size: .5rem !important;
color: rgba(245,243,239,.55) !important;
font-weight: 600 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}
.cat-card .cat-bottom { margin-top: auto; }
.cat-card .cat-name {
font-family: var(--fd) !important;
font-style: italic !important;
font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
font-weight: 400 !important;
color: #f5f3ef !important;
line-height: 1.18 !important;
font-variation-settings: "opsz" 48, "SOFT" 60 !important;
transform: none !important; /* annule le translateY(-10px) au hover */
}
.cat-card:hover .cat-name {
transform: translateY(-6px) !important;
font-variation-settings: "opsz" 144, "SOFT" 80 !important;
}
.cat-card .cat-sep { display: none !important; } /* on simplifie */
.cat-card .cat-sub {
font-size: .7rem !important;
color: rgba(245,243,239,.62) !important;
font-weight: 300 !important;
font-style: italic;
letter-spacing: 0 !important;
margin-top: .2rem !important;
max-height: none !important;
opacity: 1 !important;
line-height: 1.3;
}
.cat-card .cat-cta {
margin-top: .7rem !important;
opacity: 0; transform: translateY(6px);
transition: opacity .35s .05s, transform .35s .05s var(--ease) !important;
font-size: .55rem !important;
font-weight: 600 !important;
letter-spacing: .18em !important;
text-transform: uppercase;
color: var(--sage-l) !important;
display: inline-flex !important;
align-items: center;
gap: .4rem;
}
.cat-card:hover .cat-cta {
opacity: 1 !important; transform: none !important;
}
/* On retire les specs tableau (simplification, on garde tout en bottom content) */
.cat-card .cat-specs { display: none !important; }
/* Hover line sage en bas (style catalog-item) — réutilise ::after */
.cat-card::after {
bottom: 0 !important; left: 0 !important; right: 0 !important;
height: 2px !important;
background: var(--sage) !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
z-index: 3 !important;
}
.cat-card:hover::after {
transform: scaleX(1) !important;
}
/* Responsive : 3 cols sur tablet, 2 sur mobile, 1 sur ultra-étroit */
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1rem !important;
padding: 0 1.2rem;
}
.cat-card { aspect-ratio: 3/4 !important; }
}
@media (max-width: 480px) {
.cat-grid { grid-template-columns: 1fr !important; gap: .9rem !important; }
.cat-card { aspect-ratio: 16/10 !important; }
.cat-card .cat-cta { opacity: 1 !important; transform: none !important; }
.cat-card::before { font-size: .46rem; padding: .25rem .55rem .25rem .9rem; top: .7rem; left: .7rem; }
}
/* Conserve la zone bottom du bentostyle original (padding important pour pas chevaucher le bio pill) */
.cat-card .cat-content {
padding-top: 3.2rem !important; /* laisse la place au bio pill */
}
/* ═════════════════════════════════════════════════════════════════
CATS section — bg clair (pour mettre en avant les cards sombres)
═════════════════════════════════════════════════════════════════ */
.cats {
background: var(--bg) !important;
padding: 7rem 0 8rem !important;
position: relative;
overflow: hidden;
}
/* Halos décoratifs sage subtils en fond */
.cats::before {
content: ''; position: absolute; top: -15%; right: -15%;
width: 55%; height: 70%;
background: radial-gradient(ellipse, rgba(138,155,117,.14) 0%, transparent 65%);
pointer-events: none; z-index: 0;
}
.cats > * { position: relative; z-index: 1; }
/* Intro : textes adaptés pour fond clair */
.cats-intro {
max-width: 1440px; margin: 0 auto;
padding: 0 2rem 3.5rem !important;
}
.cats-eyebrow {
color: var(--sage-d) !important;
font-family: var(--fb);
font-size: .6rem !important; font-weight: 600;
letter-spacing: .32em !important; text-transform: uppercase;
}
.cats-title {
color: var(--ink) !important;
font-variation-settings: "opsz" 144, "SOFT" 55;
font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
}
.cats-title em {
color: var(--olive) !important;
font-variation-settings: "opsz" 144, "SOFT" 75;
}
/* Leaf ornament sur fond clair : plus discret, olive tint */
.cats .leaf-ornament {
color: var(--sage) !important;
opacity: .12 !important;
}
/* Cards : ombres plus prononcées sur fond clair pour accentuer le lift */
.cat-card {
box-shadow: 0 4px 16px rgba(26,31,23,.08), 0 1px 3px rgba(26,31,23,.04) !important;
}
.cat-card:hover {
box-shadow: 0 30px 60px rgba(26,31,23,.18), 0 10px 24px rgba(26,31,23,.1) !important;
}
/* BIO pill : léger contour pour qu'elle ne se fonde pas avec le fond clair */
.cat-card::before {
box-shadow: 0 2px 8px rgba(26,31,23,.18), 0 0 0 1px rgba(138,155,117,.3) inset !important;
}
/* Responsive cats padding sur mobile */
@media (max-width: 900px) {
.cats { padding: 5rem 0 6rem !important; }
.cats-intro { padding: 0 1.4rem 2.5rem !important; }
}
@media (max-width: 600px) {
.cats { padding: 4rem 0 5rem !important; }
}
/* ═════════════════════════════════════════════════════════════════
CAT CARDS v3 — Bento asymétrique moderne
Plantes = dominante 2×2 · autres = 1×1 empilés
Radius 16px · hover scale · contenus toujours visibles
═════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1.3fr 1fr !important;
grid-template-rows: 360px 360px !important;
grid-template-areas:
"plantes chataignes"
"plantes fruits-escargots" !important;
gap: 1.5rem !important;
padding: 0 2rem !important;
max-width: 1440px; margin: 0 auto;
background: transparent !important;
}
/* Plantes : dominante 2 rows */
.cat-card[data-modal="plantes"] {
grid-area: plantes !important;
aspect-ratio: auto !important;
min-height: 100%;
}
/* Châtaignes : top-right */
.cat-card[data-modal="chataignes"] {
grid-area: chataignes !important;
aspect-ratio: auto !important;
min-height: 100%;
}
/* Fruits et Escargots : 2 sous-cards côte à côte en bottom-right */
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
grid-area: fruits-escargots !important;
aspect-ratio: auto !important;
min-height: 100%;
width: calc(50% - .375rem); /* moitié du fr moins la moitié du gap */
display: inline-block !important;
}
.cat-card[data-modal="fruits"] { margin-right: .75rem; float: left; }
.cat-card[data-modal="escargots"] { float: right; }
}
/* Fix : on ne peut pas avoir 2 cards dans la MÊME grid-area sans hacks.
Solution propre : utiliser une sous-grille ou restructurer avec cols explicites */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1.3fr 1fr 1fr !important;
grid-template-rows: 360px 360px !important;
grid-template-areas:
"plantes chataignes chataignes"
"plantes fruits escargots" !important;
gap: 1.5rem !important;
}
.cat-card[data-modal="chataignes"] {
grid-area: chataignes !important;
}
.cat-card[data-modal="fruits"] {
grid-area: fruits !important;
float: none !important; width: auto !important; margin-right: 0 !important;
display: block !important;
}
.cat-card[data-modal="escargots"] {
grid-area: escargots !important;
float: none !important; width: auto !important;
display: block !important;
}
}
/* ─── Card reset + style moderne ─── */
.cat-card {
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 6px 20px rgba(26,31,23,.08), 0 2px 4px rgba(26,31,23,.05) !important;
transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1) !important;
}
.cat-card:hover {
transform: translateY(-6px) scale(1.01) !important;
box-shadow: 0 34px 70px rgba(26,31,23,.22), 0 12px 28px rgba(26,31,23,.12) !important;
}
/* Plantes : typographie plus grande (dominante) */
.cat-card[data-modal="plantes"] .cat-name {
font-size: clamp(1.8rem, 2.6vw, 2.6rem) !important;
line-height: 1.05 !important;
}
.cat-card[data-modal="plantes"] .cat-sub {
font-size: .85rem !important;
margin-top: .5rem !important;
}
.cat-card[data-modal="plantes"] .cat-content {
padding: 2.2rem 2rem !important;
padding-top: 3.5rem !important;
}
/* Autres cards : compactes */
.cat-card[data-modal="chataignes"] .cat-name,
.cat-card[data-modal="fruits"] .cat-name,
.cat-card[data-modal="escargots"] .cat-name {
font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
}
/* Image zoom plus doux (ken burns léger au hover) */
.cat-card .cat-photo {
transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .7s !important;
filter: brightness(.58) saturate(.88) !important;
}
.cat-card:hover .cat-photo {
transform: scale(1.06) !important;
filter: brightness(.42) saturate(.75) !important;
}
/* Contenu permanent visible (pas seulement au hover) */
.cat-card .cat-cta {
opacity: 1 !important;
transform: none !important;
color: rgba(245,243,239,.85) !important;
display: inline-flex !important;
align-items: center;
gap: .5rem;
}
.cat-card:hover .cat-cta {
color: var(--sage-l) !important;
gap: .7rem;
}
/* Pill catégorie top-right (élégante) — on utilise :after (au lieu de la hover line) */
.cat-card::after {
/* Pill catégorie nombre 01/02/03/04 en top-right */
content: '' !important; /* sera override per-card ci-dessous */
position: absolute !important;
top: .9rem !important; right: .9rem !important;
left: auto !important; bottom: auto !important;
font-family: var(--fb);
font-size: .52rem; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: var(--ink);
background: rgba(245,243,239,.9); backdrop-filter: blur(6px);
padding: .35rem .7rem !important;
border-radius: 999px !important;
height: auto !important;
transform: none !important;
transition: background .3s, color .3s !important;
z-index: 4;
pointer-events: none;
}
.cat-card:hover::after {
background: var(--sage-l) !important;
}
.cat-card[data-modal="plantes"]::after { content: '01 · Plantes médicinales' !important; }
.cat-card[data-modal="chataignes"]::after { content: '02 · Châtaignes' !important; }
.cat-card[data-modal="fruits"]::after { content: '03 · Fruits & Légumes' !important; }
.cat-card[data-modal="escargots"]::after { content: '04 · Escargots' !important; }
/* BIO pill du coup en top-LEFT repositionnée */
.cat-card::before {
top: .9rem !important;
left: .9rem !important;
}
/* On masque le nr en haut gauche devenu redondant avec la pill catégorie */
.cat-card .cat-nr { display: none !important; }
/* Flèche discrète bottom-right qui indique le clic */
.cat-card .cat-content::after {
content: '→';
position: absolute; bottom: 1.2rem; right: 1.2rem;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(245,243,239,.1); backdrop-filter: blur(6px);
border: 1px solid rgba(245,243,239,.2);
color: #f5f3ef;
font-size: 1rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.8);
transition: opacity .4s, transform .4s var(--ease), background .3s;
z-index: 3;
pointer-events: none;
}
.cat-card:hover .cat-content::after {
opacity: 1; transform: scale(1);
background: var(--sage);
border-color: var(--sage);
}
/* Overlay gradient plus doux pour la photo soit plus visible */
.cat-card .cat-overlay {
background: linear-gradient(to top,
rgba(10,14,8,.85) 0%,
rgba(10,14,8,.35) 50%,
rgba(10,14,8,.05) 85%,
transparent 100%) !important;
}
/* Responsive bento */
@media (max-width: 1200px) and (min-width: 901px) {
.cat-grid { grid-template-columns: 1.2fr 1fr 1fr !important; }
}
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1rem !important;
padding: 0 1.2rem !important;
}
.cat-card { aspect-ratio: 3/4 !important; min-height: auto !important; }
.cat-card[data-modal="plantes"] { grid-column: span 2; aspect-ratio: 16/9 !important; }
}
@media (max-width: 480px) {
.cat-grid { grid-template-columns: 1fr !important; gap: .9rem !important; }
.cat-card,
.cat-card[data-modal="plantes"] { aspect-ratio: 16/10 !important; grid-column: auto !important; }
.cat-card .cat-content::after { display: none; }
.cat-card::after { font-size: .46rem; padding: .28rem .55rem !important; }
}
/* ═════════════════════════════════════════════════════════════════
CHAPTER BREAK — Pont éditorial entre intro-sec (dark) et cats (light)
Crée un moment de respiration + annonce du chapitre suivant
═════════════════════════════════════════════════════════════════ */
.chapter-break {
background: var(--bg);
padding: 0 2rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Halo radial sage discret en fond */
.chapter-break::before {
content: ''; position: absolute;
top: -20%; left: 50%; transform: translateX(-50%);
width: 60%; height: 120%;
background: radial-gradient(ellipse, rgba(138,155,117,.1) 0%, transparent 65%);
pointer-events: none;
}
/* Thread vertical : file conductrice qui descend de l'intro vers la nouvelle section */
.chapter-break-thread {
display: block;
width: 1px; height: 80px;
margin: 0 auto;
background: linear-gradient(to bottom,
transparent 0%,
var(--sage-d) 40%,
var(--sage-d) 100%);
position: relative;
z-index: 1;
}
.chapter-break-thread::after {
content: ''; position: absolute;
bottom: -4px; left: 50%; transform: translateX(-50%);
width: 9px; height: 9px; border-radius: 50%;
background: var(--sage-d);
box-shadow: 0 0 0 4px rgba(138,155,117,.18);
}
.chapter-break-inner {
max-width: 880px; margin: 3rem auto 0;
position: relative; z-index: 1;
}
.chapter-break-eyebrow {
display: inline-flex; align-items: center; gap: .9rem;
font-family: var(--fb);
font-size: .58rem; font-weight: 600;
letter-spacing: .32em; text-transform: uppercase;
color: var(--sage-d);
margin-bottom: 1.6rem;
}
.chapter-break-eyebrow::before,
.chapter-break-eyebrow::after {
content: ''; display: inline-block; width: 22px; height: 1px;
background: var(--sage-d);
}
.chapter-break-title {
font-family: var(--fd); font-weight: 400;
font-size: clamp(2.2rem, 4.2vw, 3.6rem);
color: var(--ink); line-height: 1;
letter-spacing: -.028em;
font-variation-settings: "opsz" 144, "SOFT" 50;
margin-bottom: 1.2rem;
}
.chapter-break-title em {
font-style: italic; color: var(--olive);
font-variation-settings: "opsz" 144, "SOFT" 80;
}
.chapter-break-sub {
font-family: var(--fb);
font-size: .78rem; font-weight: 300;
letter-spacing: .02em;
color: var(--stone);
max-width: 540px; margin: 0 auto;
}
/* Cats section : on réduit le padding-top puisque le chapter-break fait déjà le travail */
.chapter-break + .cats {
padding-top: 2rem !important;
}
/* On masque l'ancien cats-intro (redondant avec le chapter-break) */
.chapter-break + .cats .cats-intro {
display: none !important;
}
/* Responsive */
@media (max-width: 900px) {
.chapter-break { padding: 0 1.2rem 1rem; }
.chapter-break-thread { height: 56px; }
.chapter-break-inner { margin-top: 2rem; }
.chapter-break-eyebrow { font-size: .52rem; letter-spacing: .26em; }
.chapter-break-eyebrow::before,
.chapter-break-eyebrow::after { width: 14px; }
.chapter-break-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
.chapter-break-sub { font-size: .72rem; }
}
@media (max-width: 480px) {
.chapter-break { padding: 0 1rem 1rem; }
.chapter-break-thread { height: 44px; }
.chapter-break-inner { margin-top: 1.6rem; }
.chapter-break-title { font-size: clamp(1.6rem, 9vw, 2.2rem); margin-bottom: 1rem; }
}
/* ═════════════════════════════════════════════════════════════════
PASS A — Polish craft (taste-skill + soft-skill + emil)
Quick wins pour dé-AI-ifier
═════════════════════════════════════════════════════════════════ */
/* 4 · Tabular figures sur les chiffres (alignement pixel-perfect) */
.stat-n,
.page-hero-stat-val,
.process-step-stat-n,
.timeline-item-year,
.shortlist-bar-count strong,
.plant-modal-counter strong,
.catalog-count,
.catalog-item-nr,
.plantes-item-nr,
.scroll-indicator-pct {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 5 · text-wrap balance sur les titres (pas d'orphelin) */
h1,
h2,
h3,
.hero h1,
.page-hero-title,
.intro-title,
.cats-title,
.process-title,
.timeline-title,
.contacts-band-title,
.chapter-break-title,
.catalog-sec-title,
.featured-specialty-title,
.specialty-card-title,
.plant-modal-name {
text-wrap: balance;
}
/* Paragraphes : text-wrap pretty (dernières lignes mieux réparties) */
p, .hero-sub, .intro-body, .process-step-desc, .timeline-item-desc,
.page-hero-sub, .contacts-band-intro, .chapter-break-sub,
.plant-modal-intro, .specialty-card-desc, .catalog-sec-sub {
text-wrap: pretty;
}
/* 6 · :active state (feedback physique au clic) */
.btn:active,
.btn-sage:active,
.btn-ghost:active,
.page-hero-ctas .btn:active,
.cta-btn:active,
.plant-modal-cta-btn:active,
.shortlist-bar-cta:active,
.specialty-card:active {
transform: scale(.97) !important;
transition: transform var(--dur-xs) var(--ease-out) !important;
}
/* 7 · Shadows tintées (au lieu de rgba(0,0,0,.x) générique) */
:root {
/* Re-définit proprement les tokens existants avec teinte ink (#1a1f17) */
--sh-xs: 0 1px 2px rgba(26,31,23,.06);
--sh-sm: 0 2px 6px rgba(26,31,23,.07), 0 1px 2px rgba(26,31,23,.05);
--sh-md: 0 6px 18px rgba(26,31,23,.09), 0 2px 4px rgba(26,31,23,.06);
--sh-lg: 0 14px 36px rgba(26,31,23,.11), 0 4px 10px rgba(26,31,23,.07);
--sh-hover: 0 20px 48px rgba(26,31,23,.15), 0 6px 14px rgba(26,31,23,.09);
/* Dark shadows utilisent maintenant --ink plutôt que pur noir */
--sh-dark-sm: 0 2px 8px rgba(26,31,23,.35);
--sh-dark-md: 0 10px 28px rgba(26,31,23,.5);
}
/* Bonus Emil : cursor pointer explicite sur les interactifs (taste polish) */
button:not(:disabled), a, [role="button"],
.cat-card, .catalog-item, .catalog-item-select,
.specialty-card, .timeline-item:hover { cursor: pointer; }
/* Bonus : antialiasing pour rendu Geist propre */
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
/* Bonus : optimize legibility sur les gros titres Fraunces */
.hero h1,
.page-hero-title,
.chapter-break-title {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 1 : Stats asymétrique + Intro editorial split
(soft-skill : editorial split / nested architecture)
═════════════════════════════════════════════════════════════════ */
/* ─── STATS : layout asymétrique avec hero number ─── */
.stats {
background: var(--bg) !important;
padding: 6rem 2rem 7rem !important;
border-top: 0 !important;
border-bottom: 0 !important;
position: relative;
overflow: hidden;
}
.stats::before {
content: ''; position: absolute;
top: 20%; left: -15%; width: 50%; height: 70%;
background: radial-gradient(ellipse, rgba(138,155,117,.08) 0%, transparent 60%);
pointer-events: none;
}
.stats-grid {
max-width: 1280px; margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1.7fr 1fr 1fr 1fr !important;
background: var(--white) !important;
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(26,31,23,.06), 0 4px 12px rgba(26,31,23,.04);
position: relative; z-index: 1;
}
.stats-grid .stat {
background: var(--white) !important;
color: var(--ink) !important;
text-align: left !important;
padding: 3rem 2.5rem !important;
border-right: 1px solid var(--border) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: .8rem;
position: relative;
}
.stats-grid .stat:last-child {
border-right: 0 !important;
}
.stats-grid .stat .stat-n {
color: var(--ink) !important;
font-style: normal !important;
font-variation-settings: "opsz" 144, "SOFT" 60 !important;
margin-bottom: 0 !important;
letter-spacing: -.02em !important;
}
.stats-grid .stat .stat-l {
color: var(--stone) !important;
font-size: .56rem !important;
letter-spacing: .28em !important;
font-weight: 500;
text-transform: uppercase;
opacity: 1 !important;
}
/* HERO number (premier stat) : taille démente, italique, olive */
.stats-grid .stat:first-child {
padding: 3.5rem 3rem !important;
justify-content: space-between !important;
min-height: 260px;
}
.stats-grid .stat:first-child .stat-n {
font-family: var(--fd) !important;
font-style: italic !important;
font-size: clamp(5rem, 10vw, 8rem) !important;
color: var(--olive) !important;
line-height: 1 !important;
font-variation-settings: "opsz" 144, "SOFT" 85 !important;
letter-spacing: -.035em !important;
}
.stats-grid .stat:first-child::before {
content: 'La famille Sula en chiffres';
font-family: var(--fb);
font-size: .54rem; font-weight: 600;
letter-spacing: .32em; text-transform: uppercase;
color: var(--sage-d);
display: inline-flex; align-items: center; gap: .7rem;
}
.stats-grid .stat:first-child::before::after {
content: ''; display: inline-block; width: 20px; height: 1px; background: var(--sage-d);
}
.stats-grid .stat:first-child .stat-l {
font-size: .62rem !important;
color: var(--sage-d) !important;
font-weight: 600;
}
/* Stats secondaires : plus compactes */
.stats-grid .stat:not(:first-child) .stat-n {
font-size: clamp(2rem, 3vw, 2.6rem) !important;
font-family: var(--fd) !important;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 60 !important;
}
/* Hover subtle : la stat active gagne un peu */
.stats-grid .stat {
transition: background .4s ease;
}
.stats-grid .stat:hover {
background: var(--bg) !important;
}
/* Responsive stats */
@media (max-width: 900px) {
.stats { padding: 4rem 1.2rem 5rem !important; }
.stats-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto auto auto !important;
}
.stats-grid .stat:first-child {
grid-column: span 2;
padding: 2.5rem 2rem !important;
min-height: auto;
}
.stats-grid .stat:first-child .stat-n {
font-size: clamp(4rem, 14vw, 6rem) !important;
}
.stats-grid .stat:not(:first-child) {
border-top: 1px solid var(--border) !important;
padding: 2rem !important;
}
.stats-grid .stat:nth-child(2) { border-right: 1px solid var(--border) !important; }
.stats-grid .stat:nth-child(3) { border-right: 0 !important; }
.stats-grid .stat:nth-child(4) {
grid-column: span 2;
border-right: 0 !important;
}
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 2 : CAT CARDS v4 "Editorial Magazine Split"
Image top 55% séparée · content bottom light 45% · typo dominante
(soft-skill + taste-skill + emil-design-eng · premium éditorial)
═════════════════════════════════════════════════════════════════ */
/* Grid uniforme 2×2 sur desktop — chaque card a le même poids */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto auto !important;
grid-template-areas: none !important;
gap: 1.8rem !important;
padding: 0 2rem !important;
max-width: 1240px; margin: 0 auto;
background: transparent !important;
}
.cat-card[data-modal="plantes"],
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
grid-area: auto !important;
aspect-ratio: auto !important;
min-height: 540px;
display: grid !important;
grid-template-rows: 1fr auto !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
}
/* Card reset + shell premium */
.cat-card {
border-radius: 20px !important;
overflow: hidden !important;
background: var(--white) !important;
border: 1px solid rgba(138,155,117,.18) !important;
box-shadow: 0 10px 30px rgba(26,31,23,.06), 0 2px 6px rgba(26,31,23,.04) !important;
transition: transform .7s cubic-bezier(.22,1,.36,1),
box-shadow .7s cubic-bezier(.22,1,.36,1),
border-color .4s ease !important;
}
.cat-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 32px 56px rgba(26,31,23,.12), 0 10px 20px rgba(26,31,23,.07) !important;
border-color: rgba(138,155,117,.35) !important;
}
/* IMAGE TOP — occupe grid-row 1 (flex 55% via min-height) */
.cat-card .cat-photo {
position: relative !important;
inset: auto !important;
grid-row: 1 !important;
width: 100% !important;
height: 340px !important;
min-height: 340px;
filter: brightness(.95) saturate(1.05) !important;
transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s !important;
}
.cat-card:hover .cat-photo {
transform: scale(1.045) !important;
filter: brightness(1) saturate(1.12) !important;
}
/* Overlay très léger — juste une teinte sage en gradient */
.cat-card .cat-overlay {
position: absolute !important;
inset: 0 !important;
height: 340px !important;
background: linear-gradient(to bottom,
rgba(138,155,117,.08) 0%,
transparent 40%,
transparent 70%,
rgba(26,31,23,.1) 100%) !important;
pointer-events: none;
}
/* CONTENT BOTTOM — light, avec respirations */
.cat-card .cat-content {
position: relative !important;
inset: auto !important;
grid-row: 2 !important;
padding: 2.2rem 2rem 2rem !important;
background: var(--white) !important;
display: flex !important;
flex-direction: column !important;
gap: 1.1rem;
z-index: 2;
}
/* Numéro éditorial "Nº 01 / 04" en top-right de la content zone */
.cat-card .cat-nr {
position: absolute !important;
top: 1.6rem !important;
right: 1.8rem !important;
font-family: var(--fd) !important;
font-style: italic !important;
font-size: 1.15rem !important;
color: var(--olive) !important;
font-variation-settings: "opsz" 144, "SOFT" 70 !important;
letter-spacing: -.02em !important;
line-height: 1 !important;
opacity: 1 !important;
margin: 0 !important;
display: inline-flex;
align-items: baseline;
gap: .4rem;
}
.cat-card .cat-nr::before {
content: 'Nº';
font-family: var(--fb);
font-size: .52rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--stone);
font-style: normal;
font-variation-settings: normal;
}
.cat-card[data-modal="plantes"] .cat-nr::after { content: ' / 04'; font-family: var(--fb); font-style: normal; font-weight: 400; font-size: .68rem; color: var(--warm); font-variation-settings: normal; margin-left: .05em; }
.cat-card[data-modal="chataignes"] .cat-nr::after { content: ' / 04'; font-family: var(--fb); font-style: normal; font-weight: 400; font-size: .68rem; color: var(--warm); font-variation-settings: normal; margin-left: .05em; }
.cat-card[data-modal="fruits"] .cat-nr::after { content: ' / 04'; font-family: var(--fb); font-style: normal; font-weight: 400; font-size: .68rem; color: var(--warm); font-variation-settings: normal; margin-left: .05em; }
.cat-card[data-modal="escargots"] .cat-nr::after { content: ' / 04'; font-family: var(--fb); font-style: normal; font-weight: 400; font-size: .68rem; color: var(--warm); font-variation-settings: normal; margin-left: .05em; }
/* cat-bottom fait office de bloc flex principal du content */
.cat-card .cat-bottom {
display: flex !important;
flex-direction: column !important;
gap: .85rem;
margin-top: 0 !important;
}
/* NAME : Fraunces italic ink, typo dominante */
.cat-card .cat-name {
font-family: var(--fd) !important;
font-style: italic !important;
font-size: clamp(1.45rem, 1.9vw, 1.75rem) !important;
color: var(--ink) !important;
font-variation-settings: "opsz" 144, "SOFT" 60 !important;
line-height: 1.1 !important;
transform: none !important;
transition: font-variation-settings .5s ease !important;
letter-spacing: -.015em;
}
.cat-card:hover .cat-name {
transform: none !important;
font-variation-settings: "opsz" 144, "SOFT" 85 !important;
}
/* SEPARATOR : trait sage qui s'étend au hover */
.cat-card .cat-sep {
display: block !important;
width: 36px !important;
height: 1px !important;
background: var(--sage-d) !important;
margin: 0 !important;
transition: width .5s cubic-bezier(.22,1,.36,1) !important;
}
.cat-card:hover .cat-sep { width: 72px !important; }
/* SUB : Geist stone, meta info */
.cat-card .cat-sub {
color: var(--stone) !important;
font-family: var(--fb) !important;
font-style: normal !important;
font-size: .78rem !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
line-height: 1.55 !important;
max-height: none !important;
opacity: 1 !important;
margin-top: .2rem;
}
/* CTA : arrow inline avec gap animé */
.cat-card .cat-cta {
font-family: var(--fb) !important;
font-size: .62rem !important;
font-weight: 600 !important;
letter-spacing: .2em !important;
text-transform: uppercase;
color: var(--olive) !important;
display: inline-flex !important;
align-items: center;
gap: .55rem;
opacity: 1 !important;
transform: none !important;
margin-top: 1rem !important;
padding-top: 1rem !important;
border-top: 1px solid var(--border);
transition: gap .4s cubic-bezier(.22,1,.36,1), color .3s !important;
}
.cat-card:hover .cat-cta {
gap: .95rem !important;
color: var(--ink) !important;
}
/* BIO pill en top-left de l'IMAGE (plus sur le card entier) */
.cat-card::before {
content: 'Bio · Sauvage' !important;
position: absolute !important;
top: 1rem !important;
left: 1rem !important;
z-index: 4 !important;
font-family: var(--fb);
font-size: .5rem; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: var(--ink);
background: rgba(255,255,255,.92) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: .35rem .75rem .35rem 1.1rem !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(26,31,23,.12), 0 0 0 1px rgba(138,155,117,.2) inset !important;
background-image: radial-gradient(circle at .55rem center, var(--sage-d) 2.5px, transparent 3px) !important;
background-repeat: no-repeat !important;
box-sizing: border-box;
}
/* Hover-line : repositionnée sur la jointure image/content */
.cat-card::after {
content: '' !important;
position: absolute !important;
top: 340px !important;
bottom: auto !important;
left: 0 !important; right: 0 !important;
width: 100% !important;
height: 2px !important;
background: var(--sage-d) !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
z-index: 3 !important;
/* Neutralise les anciens pill styles */
background-image: none !important;
border-radius: 0 !important;
padding: 0 !important;
color: transparent !important;
font-size: 0 !important;
backdrop-filter: none !important;
}
.cat-card:hover::after { transform: scaleX(1) !important; }
/* Neutralise tout ce qui était avant (discover badge, specs) */
.cat-card .cat-discover { display: none !important; }
.cat-card .cat-specs { display: none !important; }
/* Responsive */
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
gap: 1rem !important;
padding: 0 1.2rem !important;
}
.cat-card[data-modal] {
min-height: 440px !important;
}
.cat-card .cat-photo,
.cat-card .cat-overlay { height: 260px !important; min-height: 260px !important; }
.cat-card::after { top: 260px !important; }
.cat-card .cat-content { padding: 1.8rem 1.4rem !important; }
.cat-card .cat-nr { top: 1.3rem !important; right: 1.4rem !important; font-size: 1rem !important; }
.cat-card .cat-name { font-size: 1.25rem !important; }
}
@media (max-width: 520px) {
.cat-grid { grid-template-columns: 1fr !important; }
.cat-card[data-modal] { min-height: 460px !important; }
.cat-card .cat-photo,
.cat-card .cat-overlay { height: 240px !important; min-height: 240px !important; }
.cat-card::after { top: 240px !important; }
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 3 : Ambient wash global (green fondu unifié)
Body fixe · halos radiaux sage/olive · grain subtle · sections light transparentes
═════════════════════════════════════════════════════════════════ */
/* Body : wash ink avec dégradé plus perceptible */
body {
background: linear-gradient(180deg,
#14180f 0%, /* deeper ink au top (continue depuis hero) */
#1a1f17 14%, /* --ink */
#242b1c 32%, /* clearing — dark sage */
#2c3421 50%, /* le plus clair (mi-page) */
#262d1e 68%,
#1c2218 86%,
#14180f 100% /* deeper ink au footer */
) !important;
background-attachment: fixed !important;
position: relative;
color: rgba(245,243,239,.75);
}
/* Grain texture global — très subtil, donne le feel "papier" / organique */
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
/* Le contenu doit passer au-dessus du grain */
main, header, footer, nav { position: relative; z-index: 2; }
/* Sections LIGHT : deviennent transparentes, le body wash apparaît */
.stats,
.cats,
.process-sec,
.timeline-sec,
.contacts-band,
.chapter-break,
.featured-specialty-sec,
.catalog-sec,
.page-hero:not(.hero) {
background: transparent !important;
}
/* Le container stats-grid reste opaque (white) pour lisibilité des chiffres */
/* Déjà géré : .stats-grid a bg white interne */
/* Le chapter-break garde son halo interne mais fond transparent */
.chapter-break::before { opacity: .5 !important; }
/* Cats halo : s'adapte au wash global (plus discret car le body en a déjà) */
.cats::before {
opacity: .5 !important;
background: radial-gradient(ellipse, rgba(138,155,117,.06) 0%, transparent 65%) !important;
}
/* Process section : subtil tint pour se distinguer sans casser le wash */
.process-sec {
background: linear-gradient(180deg,
rgba(245,243,239,.5) 0%,
rgba(238,235,222,.3) 50%,
rgba(245,243,239,.5) 100%) !important;
}
/* Timeline : très légère teinte pour créer une variation */
.timeline-sec {
background: rgba(250,250,248,.4) !important;
}
/* Contacts-band : white pâle pour finale */
.contacts-band {
background: rgba(250,250,248,.55) !important;
}
/* Les borders des sections claires deviennent plus subtiles (le wash les masquerait sinon) */
.process-sec,
.timeline-sec,
.contacts-band {
border-top: 1px solid rgba(138,155,117,.15) !important;
}
/* Accent-rule decor (entre process et timeline, timeline et contacts) : transparent */
.accent-rule-decor {
background: transparent !important;
}
/* Cat cards content (white bg) : un rien ink-tinted pour qu'on sente le wash */
.cat-card .cat-content {
background: rgba(255,255,255,.96) !important;
backdrop-filter: blur(2px);
}
/* Les textes muted prennent plus de corps sur le wash (meilleur contraste) */
.cats-title, .process-title, .timeline-title, .contacts-band-title {
color: var(--ink) !important;
}
/* Footer reste en ink solide (signature dark) — contraste final après la traversée */
footer { background: var(--ink) !important; }
/* Transitions plus douces entre sections sur le wash */
section, .stats { transition: background .6s ease; }
/* Responsive : fixed attachment peut bugger sur iOS, fallback scroll */
@media (max-width: 768px) {
body { background-attachment: scroll !important; }
body::before { position: absolute; }
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 4 : Fondu total (démarcations effacées)
Toutes les sections light deviennent pures transparences
Les borders/bgs qui créaient des "bandes" sont supprimés
═════════════════════════════════════════════════════════════════ */
/* Sections light : TOTALEMENT transparentes (pas de tint, pas de variation) */
.stats,
.cats,
.process-sec,
.timeline-sec,
.contacts-band,
.chapter-break,
.featured-specialty-sec,
.catalog-sec,
.page-hero:not(.hero) {
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* Chapter-break : halo interne effacé (sinon crée un spot visible) */
.chapter-break::before {
display: none !important;
}
/* Cats halo effacé aussi */
.cats::before {
display: none !important;
}
/* Accent-rule-decor : invisible (plus de trait entre sections) */
.accent-rule-decor {
background: transparent !important;
border: 0 !important;
height: 3rem !important;
}
.accent-rule-decor::before,
.accent-rule-decor::after,
.accent-rule-decor span {
display: none !important;
}
/* Stats container : fond blanc très doux + ombre ultra légère (moins "flottant block") */
.stats-grid {
background: rgba(255,255,255,.5) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(138,155,117,.12) !important;
box-shadow: none !important;
}
/* Cat-cards content zone : plus aéré, moins opaque, se fond avec le wash */
.cat-card .cat-content {
background: rgba(255,255,255,.82) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
/* Cat-cards shell : border plus discret, ombre réduite */
.cat-card {
border: 1px solid rgba(138,155,117,.14) !important;
box-shadow: 0 4px 14px rgba(26,31,23,.04) !important;
}
.cat-card:hover {
box-shadow: 0 16px 36px rgba(26,31,23,.08), 0 4px 10px rgba(26,31,23,.04) !important;
border-color: rgba(138,155,117,.28) !important;
}
/* Process steps container : plus de border, on laisse le wash passer */
.process-grid {
background: transparent !important;
border: 0 !important;
gap: 1.5rem !important;
}
.process-step {
background: rgba(255,255,255,.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border: 1px solid rgba(138,155,117,.12) !important;
border-radius: 16px !important;
}
.process-step:hover {
background: rgba(255,255,255,.85) !important;
}
/* Contacts grid : même traitement */
.contacts-grid {
background: transparent !important;
border: 0 !important;
gap: 1px !important;
}
.contact-block {
background: rgba(255,255,255,.55) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border: 1px solid rgba(138,155,117,.1) !important;
border-radius: 4px !important;
}
.contact-block:hover {
background: rgba(255,255,255,.85) !important;
}
.contacts-general {
background: rgba(255,255,255,.35) !important;
backdrop-filter: blur(6px) !important;
border: 1px solid rgba(138,155,117,.1) !important;
border-top: 1px solid rgba(138,155,117,.15) !important;
border-radius: 0 0 4px 4px !important;
}
/* Timeline : la ligne centrale garde sa présence, reste transparent */
.timeline-sec { padding-top: 5rem !important; padding-bottom: 5rem !important; }
/* Section padding harmonisés pour éviter le "bloc" visuel */
.cats, .process-sec, .timeline-sec, .contacts-band, .stats {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.chapter-break { padding-top: 2rem !important; padding-bottom: 0rem !important; }
/* Grain global atténué (sinon crée du bruit visible sur le wash uniforme) */
body::before {
opacity: .018 !important;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 5 : Full dark mode (wash ink sur toute la page)
Tous les contenus textuels s'adaptent au fond dark
═════════════════════════════════════════════════════════════════ */
/* Grain : moins visible sur dark, passe en screen blend */
body::before {
mix-blend-mode: screen !important;
opacity: .035 !important;
}
/* ─── STATS en dark ─── */
.stats-grid {
background: rgba(10,14,8,.38) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 1px solid rgba(245,243,239,.08) !important;
box-shadow: 0 20px 48px rgba(0,0,0,.3) !important;
}
.stats-grid .stat {
background: transparent !important;
border-right: 1px solid rgba(245,243,239,.08) !important;
}
.stats-grid .stat:last-child { border-right: 0 !important; }
.stats-grid .stat:hover { background: rgba(245,243,239,.02) !important; }
.stats-grid .stat .stat-n {
color: #f5f3ef !important;
}
.stats-grid .stat .stat-l {
color: rgba(245,243,239,.55) !important;
}
.stats-grid .stat:first-child .stat-n {
color: var(--sage-l) !important;
}
.stats-grid .stat:first-child::before {
color: var(--sage-l) !important;
}
.stats-grid .stat:first-child .stat-l {
color: var(--sage-l) !important;
}
/* ─── CHAPTER-BREAK en dark ─── */
.chapter-break-eyebrow {
color: var(--sage-l) !important;
}
.chapter-break-eyebrow::before,
.chapter-break-eyebrow::after {
background: var(--sage-l) !important;
}
.chapter-break-title {
color: #f5f3ef !important;
}
.chapter-break-title em {
color: var(--sage-l) !important;
}
.chapter-break-sub {
color: rgba(245,243,239,.6) !important;
}
.chapter-break-thread {
background: linear-gradient(to bottom, transparent 0%, var(--sage-l) 40%, var(--sage-l) 100%) !important;
}
.chapter-break-thread::after {
background: var(--sage-l) !important;
box-shadow: 0 0 0 4px rgba(181,196,160,.15) !important;
}
/* ─── CATS intro en dark ─── */
.cats-eyebrow {
color: var(--sage-l) !important;
}
.cats-title {
color: #f5f3ef !important;
}
.cats-title em {
color: var(--sage-l) !important;
}
/* ─── CAT-CARDS en dark ─── */
.cat-card {
background: rgba(10,14,8,.3) !important;
border: 1px solid rgba(245,243,239,.08) !important;
box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}
.cat-card:hover {
border-color: rgba(181,196,160,.25) !important;
box-shadow: 0 28px 56px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.2) !important;
}
/* Content zone : dark frosted glass */
.cat-card .cat-content {
background: rgba(10,14,8,.55) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
/* Textes en light */
.cat-card .cat-name {
color: #f5f3ef !important;
}
.cat-card .cat-sub {
color: rgba(245,243,239,.58) !important;
}
.cat-card .cat-nr {
color: var(--sage-l) !important;
}
.cat-card .cat-nr::before {
color: rgba(245,243,239,.45) !important;
}
.cat-card[data-modal] .cat-nr::after {
color: rgba(245,243,239,.3) !important;
}
.cat-card .cat-sep {
background: var(--sage-l) !important;
}
.cat-card .cat-cta {
color: var(--sage-l) !important;
border-top: 1px solid rgba(245,243,239,.08) !important;
}
.cat-card:hover .cat-cta {
color: #f5f3ef !important;
}
/* BIO pill : adaptée pour dark (fond ink, texte clair) */
.cat-card::before {
background: rgba(10,14,8,.82) !important;
color: var(--sage-l) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(181,196,160,.25) inset !important;
background-image: radial-gradient(circle at .55rem center, var(--sage-l) 2.5px, transparent 3px) !important;
}
/* Hover-line reste sage-l */
.cat-card::after {
background: var(--sage-l) !important;
}
/* ─── PROCESS en dark ─── */
.process-eyebrow {
color: var(--sage-l) !important;
}
.process-title {
color: #f5f3ef !important;
}
.process-title em {
color: var(--sage-l) !important;
}
.process-sub {
color: rgba(245,243,239,.65) !important;
}
.process-step {
background: rgba(10,14,8,.4) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(245,243,239,.08) !important;
}
.process-step:hover {
background: rgba(10,14,8,.58) !important;
border-color: rgba(181,196,160,.22) !important;
}
.process-step-nr {
color: rgba(245,243,239,.55) !important;
}
.process-step-icon {
background: rgba(181,196,160,.12) !important;
border-color: rgba(181,196,160,.25) !important;
}
.process-step-icon svg {
stroke: var(--sage-l) !important;
}
.process-step:hover .process-step-icon {
background: var(--sage) !important;
border-color: var(--sage) !important;
}
.process-step:hover .process-step-icon svg {
stroke: #f5f3ef !important;
}
.process-step-title {
color: #f5f3ef !important;
}
.process-step-title em {
color: var(--sage-l) !important;
}
.process-step-desc {
color: rgba(245,243,239,.62) !important;
}
.process-step-stat {
border-top: 1px solid rgba(245,243,239,.08) !important;
}
.process-step-stat-n {
color: var(--sage-l) !important;
}
.process-step-stat-l {
color: rgba(245,243,239,.5) !important;
}
.process-step::after {
color: rgba(245,243,239,.4) !important;
}
.process-step:hover::after {
color: var(--sage-l) !important;
}
/* Connecteur horizontal process en dark */
@media (min-width: 1025px) {
.process-grid::before {
background: linear-gradient(to right,
transparent 0%,
rgba(245,243,239,.1) 10%,
rgba(181,196,160,.35) 50%,
rgba(245,243,239,.1) 90%,
transparent 100%) !important;
}
.process-step-icon {
background: rgba(10,14,8,.9) !important;
}
}
/* ─── TIMELINE en dark ─── */
.timeline-eyebrow {
color: var(--sage-l) !important;
}
.timeline-title {
color: #f5f3ef !important;
}
.timeline-title em {
color: var(--sage-l) !important;
}
.timeline-list::before {
background: linear-gradient(to bottom, transparent, rgba(245,243,239,.15) 8%, rgba(245,243,239,.15) 92%, transparent) !important;
}
.timeline-list::after {
background: linear-gradient(to bottom, var(--sage-l), var(--olive)) !important;
box-shadow: 0 0 12px rgba(181,196,160,.4) !important;
}
.timeline-item-year {
color: var(--sage-l) !important;
}
.timeline-item-dot {
background: var(--ink) !important;
border-color: var(--sage-l) !important;
}
.timeline-item:hover .timeline-item-dot {
background: var(--sage-l) !important;
}
.timeline-item-title {
color: #f5f3ef !important;
}
.timeline-item-desc {
color: rgba(245,243,239,.58) !important;
}
.timeline-item-desc em {
color: var(--sage-l) !important;
}
.timeline-item:hover .timeline-item-content {
background: rgba(245,243,239,.04) !important;
box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}
/* ─── CONTACTS-BAND en dark ─── */
.contacts-band-eyebrow {
color: var(--sage-l) !important;
}
.contacts-band-title {
color: #f5f3ef !important;
}
.contacts-band-title em {
color: var(--sage-l) !important;
}
.contacts-band-intro {
color: rgba(245,243,239,.65) !important;
}
.contacts-band-reassurance {
border-top: 1px solid rgba(245,243,239,.1) !important;
}
.reassurance-item {
color: rgba(245,243,239,.72) !important;
}
.reassurance-item strong {
color: #f5f3ef !important;
}
.reassurance-item svg {
stroke: var(--sage-l) !important;
}
/* Contact blocks : dark frosted */
.contact-block {
background: rgba(10,14,8,.4) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(245,243,239,.08) !important;
}
.contact-block:hover {
background: rgba(10,14,8,.6) !important;
border-color: rgba(181,196,160,.22) !important;
}
.contact-region {
color: var(--sage-l) !important;
}
.contact-name {
color: #f5f3ef !important;
}
.contact-link {
color: rgba(245,243,239,.7) !important;
}
.contact-link:hover {
color: var(--sage-l) !important;
}
.contact-link svg {
stroke: rgba(181,196,160,.6) !important;
}
.contact-link:hover svg {
stroke: var(--sage-l) !important;
}
.contacts-general {
background: rgba(245,243,239,.04) !important;
border: 1px solid rgba(245,243,239,.08) !important;
border-top: 1px solid rgba(181,196,160,.18) !important;
}
.contacts-general-label {
color: rgba(245,243,239,.45) !important;
}
.contacts-general-val {
color: rgba(245,243,239,.72) !important;
}
.contacts-general-val a { color: rgba(245,243,239,.72) !important; }
.contacts-general-val a:hover { color: var(--sage-l) !important; }
/* Footer reste dark → match le body dark en continuité (plus de contraste, juste un renforcement subtil) */
footer {
background: rgba(10,14,8,.6) !important;
border-top: 1px solid rgba(245,243,239,.05) !important;
}
/* Modals : restent en light (forms + fiche produit = besoin de haute lisibilité) */
/* cat-modal, plant-modal : déjà en white bg via leur CSS, no override needed */
/* Borders génériques dans le dark mode */
.section-bridge, .accent-rule-decor {
border: 0 !important;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 6 : Affinage du fondu
Cards plus transparentes + section savoir-faire mieux fondue
═════════════════════════════════════════════════════════════════ */
/* ─── CAT-CARDS : fondues plus, borders presque invisibles ─── */
.cat-card {
background: rgba(245,243,239,.015) !important;
border: 1px solid rgba(245,243,239,.05) !important;
box-shadow: 0 6px 20px rgba(0,0,0,.2) !important;
}
.cat-card:hover {
background: rgba(245,243,239,.03) !important;
border-color: rgba(181,196,160,.2) !important;
box-shadow: 0 20px 42px rgba(0,0,0,.32), 0 6px 14px rgba(0,0,0,.18) !important;
}
.cat-card .cat-content {
background: rgba(10,14,8,.32) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
/* ─── STATS : container aussi plus fondu ─── */
.stats-grid {
background: rgba(245,243,239,.025) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border: 1px solid rgba(245,243,239,.06) !important;
box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}
/* ─── PROCESS STEPS : plus fondues ─── */
.process-step {
background: rgba(245,243,239,.02) !important;
border: 1px solid rgba(245,243,239,.05) !important;
}
.process-step:hover {
background: rgba(245,243,239,.04) !important;
border-color: rgba(181,196,160,.18) !important;
}
/* ─── CONTACT BLOCKS : plus fondus ─── */
.contact-block {
background: rgba(245,243,239,.02) !important;
border: 1px solid rgba(245,243,239,.05) !important;
}
.contact-block:hover {
background: rgba(245,243,239,.04) !important;
border-color: rgba(181,196,160,.18) !important;
}
.contacts-general {
background: rgba(245,243,239,.018) !important;
border: 1px solid rgba(245,243,239,.05) !important;
border-top: 1px solid rgba(181,196,160,.14) !important;
}
/* ─── INTRO SEC "Un savoir-faire" : fondue dans le wash dark ─── */
/* La photo devient plus sombre/tintée pour se raccorder au wash */
.intro-sec .intro-bg {
filter: brightness(.55) saturate(.8) !important;
opacity: .85 !important;
}
/* Le voile devient beaucoup plus opaque et étendu (la photo passe en second plan) */
.intro-sec .intro-fade {
background: linear-gradient(
to right,
rgba(20,24,15,.98) 0%,
rgba(20,24,15,.9) 40%,
rgba(20,24,15,.65) 70%,
rgba(20,24,15,.35) 100%
) !important;
}
/* Section elle-même : overlays sur haut et bas pour fondu avec le wash body */
.intro-sec {
position: relative;
}
.intro-sec::before,
.intro-sec::after {
content: '';
position: absolute; left: 0; right: 0;
height: 120px;
pointer-events: none;
z-index: 3;
}
.intro-sec::before {
top: 0;
background: linear-gradient(to bottom, rgba(20,24,15,1) 0%, transparent 100%);
}
.intro-sec::after {
bottom: 0;
background: linear-gradient(to top, rgba(20,24,15,1) 0%, transparent 100%);
}
/* Mobile : ajuste le voile en vertical */
@media (max-width: 768px) {
.intro-sec .intro-fade {
background: linear-gradient(
to bottom,
rgba(20,24,15,.55) 0%,
rgba(20,24,15,.9) 55%,
rgba(20,24,15,.98) 100%
) !important;
}
.intro-sec::before { height: 80px; }
.intro-sec::after { height: 80px; }
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 7 : Transparence poussée
Containers quasi-invisibles au repos, se révèlent au hover
═════════════════════════════════════════════════════════════════ */
/* Cat-cards : shell = none, content = juste blur doux sans tint */
.cat-card {
background: transparent !important;
border: 1px solid rgba(245,243,239,.035) !important;
box-shadow: 0 4px 14px rgba(0,0,0,.14) !important;
}
.cat-card:hover {
background: rgba(245,243,239,.018) !important;
border-color: rgba(181,196,160,.22) !important;
box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.14) !important;
}
.cat-card .cat-content {
background: rgba(10,14,8,.18) !important;
backdrop-filter: blur(22px) !important;
-webkit-backdrop-filter: blur(22px) !important;
}
/* Stats : container ultra-léger */
.stats-grid {
background: rgba(245,243,239,.012) !important;
backdrop-filter: blur(22px) !important;
-webkit-backdrop-filter: blur(22px) !important;
border: 1px solid rgba(245,243,239,.04) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
}
.stats-grid .stat {
border-right-color: rgba(245,243,239,.04) !important;
}
/* Process steps : ghostly */
.process-step {
background: rgba(245,243,239,.01) !important;
backdrop-filter: blur(14px) !important;
border: 1px solid rgba(245,243,239,.035) !important;
}
.process-step:hover {
background: rgba(245,243,239,.028) !important;
border-color: rgba(181,196,160,.2) !important;
}
/* Contact blocks : ghostly */
.contact-block {
background: rgba(245,243,239,.01) !important;
backdrop-filter: blur(14px) !important;
border: 1px solid rgba(245,243,239,.035) !important;
}
.contact-block:hover {
background: rgba(245,243,239,.028) !important;
border-color: rgba(181,196,160,.2) !important;
}
.contacts-general {
background: rgba(245,243,239,.008) !important;
border: 1px solid rgba(245,243,239,.035) !important;
border-top: 1px solid rgba(181,196,160,.12) !important;
}
/* Footer : aussi plus fondu avec le body */
footer {
background: rgba(10,14,8,.4) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border-top: 1px solid rgba(245,243,239,.04) !important;
}
/* Cert badges footer : ghost */
.footer-cert-badge {
background: rgba(245,243,239,.015) !important;
border: 1px solid rgba(245,243,239,.08) !important;
}
.footer-cert-badge:hover {
background: rgba(138,155,117,.08) !important;
border-color: var(--sage) !important;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 8 : Ajustements finaux
Photo intro plus lisible + filtre visuel subtil sur les cards
═════════════════════════════════════════════════════════════════ */
/* ─── INTRO savoir-faire : photo plus visible ─── */
.intro-sec .intro-bg {
filter: brightness(.78) saturate(.95) !important;
opacity: 1 !important;
}
.intro-sec .intro-fade {
background: linear-gradient(
to right,
rgba(20,24,15,.9) 0%,
rgba(20,24,15,.65) 42%,
rgba(20,24,15,.28) 72%,
rgba(20,24,15,.1) 100%
) !important;
}
@media (max-width: 768px) {
.intro-sec .intro-bg {
filter: brightness(.7) saturate(.9) !important;
}
.intro-sec .intro-fade {
background: linear-gradient(
to bottom,
rgba(20,24,15,.4) 0%,
rgba(20,24,15,.75) 50%,
rgba(20,24,15,.95) 100%
) !important;
}
}
/* ─── CAT-CARDS : filtre visuel sur le content zone ─── */
/* Tint gradient + saturate/brightness pour un "look" photographique premium */
.cat-card .cat-content {
background: linear-gradient(135deg,
rgba(10,14,8,.28) 0%,
rgba(15,20,11,.22) 50%,
rgba(138,155,117,.04) 100%) !important;
backdrop-filter: blur(22px) saturate(1.35) brightness(.98) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.35) brightness(.98) !important;
box-shadow: inset 0 1px 0 rgba(245,243,239,.07) !important;
}
/* Hover : le filtre s'intensifie légèrement */
.cat-card:hover .cat-content {
background: linear-gradient(135deg,
rgba(10,14,8,.38) 0%,
rgba(20,26,14,.3) 50%,
rgba(138,155,117,.08) 100%) !important;
backdrop-filter: blur(24px) saturate(1.45) brightness(1) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.45) brightness(1) !important;
}
/* Image zone : filtre léger pour distinction (tint sage subtle) */
.cat-card .cat-photo {
filter: brightness(.92) saturate(1.08) contrast(1.04) !important;
}
.cat-card:hover .cat-photo {
filter: brightness(1) saturate(1.15) contrast(1.05) !important;
}
/* Overlay top image : gradient plus sage tint pour unifier avec le wash */
.cat-card .cat-overlay {
background: linear-gradient(to bottom,
rgba(138,155,117,.12) 0%,
rgba(10,14,8,.08) 30%,
transparent 55%,
rgba(10,14,8,.25) 100%) !important;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 9 : Atténuation + intégration cards
Filtre softening réel · borders fantômes · fade avec sections autour
═════════════════════════════════════════════════════════════════ */
/* ─── Filtre ATTÉNUANT sur la card entière (image + content) ─── */
.cat-card {
filter: saturate(.78) brightness(.92) !important;
transition: filter .7s cubic-bezier(.22,1,.36,1),
transform .6s cubic-bezier(.22,1,.36,1),
box-shadow .6s cubic-bezier(.22,1,.36,1),
border-color .4s ease !important;
/* Border quasi-invisible au repos */
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}
/* Image : saturation encore plus muted au repos */
.cat-card .cat-photo {
filter: brightness(.82) saturate(.85) contrast(1) !important;
transition: filter 1.2s cubic-bezier(.22,1,.36,1), transform 1.4s cubic-bezier(.16,1,.3,1) !important;
}
/* Content zone : pas de saturate boost, désaturation subtile */
.cat-card .cat-content {
background: linear-gradient(135deg,
rgba(10,14,8,.22) 0%,
rgba(15,20,11,.18) 100%) !important;
backdrop-filter: blur(20px) saturate(.9) !important;
-webkit-backdrop-filter: blur(20px) saturate(.9) !important;
box-shadow: inset 0 1px 0 rgba(245,243,239,.05) !important;
}
/* ─── HOVER : les cards reprennent vie (saturation retrouvée) ─── */
.cat-card:hover {
filter: saturate(1) brightness(1) !important;
background: rgba(245,243,239,.015) !important;
border: 1px solid rgba(181,196,160,.18) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.16) !important;
}
.cat-card:hover .cat-photo {
filter: brightness(1) saturate(1.1) contrast(1.05) !important;
}
.cat-card:hover .cat-content {
background: linear-gradient(135deg,
rgba(10,14,8,.32) 0%,
rgba(15,20,11,.26) 100%) !important;
backdrop-filter: blur(22px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.1) !important;
}
/* ─── INTÉGRATION : section cats fondue avec chapter-break et marquee ─── */
.cats {
padding: 2rem 0 6rem !important; /* reduce top (chapter-break remplit déjà) */
position: relative;
}
/* Overlay top : fondu depuis le chapter-break */
.cats::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 120px;
pointer-events: none;
background: linear-gradient(to bottom,
var(--ink) 0%,
transparent 100%);
opacity: .35;
z-index: 0;
}
/* Gap entre cards un peu resserré pour flow plus organique */
@media (min-width: 901px) {
.cat-grid {
gap: 1.4rem !important;
padding: 0 2.2rem !important;
}
}
/* Marquee : fondu en entrée depuis cats */
.marquee-sec {
position: relative;
}
.marquee-sec::before {
content: '';
position: absolute;
top: -40px; left: 0; right: 0;
height: 80px;
pointer-events: none;
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.4) 60%,
rgba(10,14,8,.6) 100%);
z-index: 1;
}
.marquee { position: relative; z-index: 2; }
/* Chapter-break : le tout dernier padding-bottom réduit pour coller aux cards */
.chapter-break {
padding-top: 3rem !important;
padding-bottom: 1.5rem !important;
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 10 : POLISH COMPLET (les 2 pages)
Alignement dark mode produits · micro-détails · craft Emil
═════════════════════════════════════════════════════════════════ */
/* ─── PRODUITS.HTML : aligne toutes les sections sur le dark wash ─── */
/* Stats light sur produits : passe en dark frosted */
.stats--light {
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
.stats--light .stat {
background: transparent !important;
border-right: 1px solid rgba(245,243,239,.06) !important;
}
.stats--light .stat:last-child { border-right: 0 !important; }
.stats--light .stat-n {
color: var(--sage-l) !important;
}
.stats--light .stat-l {
color: rgba(245,243,239,.55) !important;
}
.stats--light:hover .stat-n,
.stats--light .stat:hover .stat-n { color: #f5f3ef !important; }
/* Featured specialty section (3 cards chataignes/fruits/escargots) */
.featured-specialty-sec {
background: transparent !important;
}
.featured-specialty-eyebrow {
color: var(--sage-l) !important;
}
.featured-specialty-title {
color: #f5f3ef !important;
}
.featured-specialty-title em {
color: var(--sage-l) !important;
}
.specialty-card {
background: rgba(245,243,239,.015) !important;
backdrop-filter: blur(14px) saturate(.95) !important;
-webkit-backdrop-filter: blur(14px) saturate(.95) !important;
border: 1px solid rgba(245,243,239,.06) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.14) !important;
}
.specialty-card:hover {
background: rgba(245,243,239,.03) !important;
border-color: rgba(181,196,160,.2) !important;
box-shadow: 0 20px 42px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.16) !important;
}
.specialty-card-tag {
color: var(--sage-l) !important;
}
.specialty-card-title {
color: #f5f3ef !important;
}
.specialty-card-desc {
color: rgba(245,243,239,.62) !important;
}
.specialty-card-specs {
padding-top: 1.2rem !important;
border-top: 1px solid rgba(245,243,239,.08) !important;
}
.specialty-card-spec-label {
color: rgba(245,243,239,.45) !important;
}
.specialty-card-spec-val {
color: #f5f3ef !important;
}
.specialty-card-spec-val em {
color: var(--sage-l) !important;
}
.specialty-card-cta {
color: var(--sage-l) !important;
}
.specialty-card:hover .specialty-card-cta {
color: #f5f3ef !important;
}
/* Catalog toolbar (sticky) : dark frosted */
.catalog-toolbar {
background: rgba(20,24,15,.85) !important;
backdrop-filter: blur(20px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
border-bottom: 1px solid rgba(245,243,239,.06) !important;
}
.catalog-filter {
background: transparent !important;
border: 1px solid rgba(245,243,239,.12) !important;
color: rgba(245,243,239,.62) !important;
}
.catalog-filter:hover {
border-color: var(--sage-l) !important;
color: var(--sage-l) !important;
}
.catalog-filter.active {
background: var(--sage-l) !important;
border-color: var(--sage-l) !important;
color: var(--ink) !important;
}
.catalog-search {
background: rgba(10,14,8,.4) !important;
border: 1px solid rgba(245,243,239,.1) !important;
color: #f5f3ef !important;
}
.catalog-search::placeholder {
color: rgba(245,243,239,.35) !important;
}
.catalog-search:focus {
border-color: var(--sage-l) !important;
background: rgba(10,14,8,.6) !important;
box-shadow: 0 0 0 3px rgba(181,196,160,.12) !important;
}
.catalog-search-ico {
stroke: rgba(245,243,239,.4) !important;
}
.catalog-sort-btn {
background: transparent !important;
border: 1px solid rgba(245,243,239,.12) !important;
color: rgba(245,243,239,.62) !important;
}
.catalog-sort-btn:hover {
border-color: var(--sage-l) !important;
color: var(--sage-l) !important;
}
.catalog-sort-menu {
background: rgba(20,24,15,.95) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(245,243,239,.1) !important;
box-shadow: 0 14px 32px rgba(0,0,0,.4) !important;
}
.catalog-sort-option {
color: rgba(245,243,239,.75) !important;
}
.catalog-sort-option:hover {
background: rgba(245,243,239,.04) !important;
}
.catalog-sort-option.active {
background: rgba(181,196,160,.08) !important;
color: var(--sage-l) !important;
}
.catalog-count {
color: var(--sage-l) !important;
}
/* Catalog section */
.catalog-sec {
background: transparent !important;
border-top: 1px solid rgba(245,243,239,.04) !important;
}
.catalog-sec-title {
color: #f5f3ef !important;
}
.catalog-sec-title em {
color: var(--sage-l) !important;
}
.catalog-sec-sub {
color: rgba(245,243,239,.55) !important;
}
/* Catalog-item (plant cards) : dark adapté + filtre atténuant */
.catalog-item {
background: transparent !important;
border: 1px solid transparent !important;
filter: saturate(.85) brightness(.95) !important;
box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
transition: filter .7s cubic-bezier(.22,1,.36,1),
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .5s cubic-bezier(.22,1,.36,1),
border-color .4s ease !important;
}
.catalog-item:hover {
filter: saturate(1) brightness(1) !important;
background: rgba(245,243,239,.02) !important;
border-color: rgba(181,196,160,.2) !important;
box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 6px 14px rgba(0,0,0,.18) !important;
}
.catalog-item-img {
filter: brightness(.85) saturate(.9) !important;
}
.catalog-item:hover .catalog-item-img {
filter: brightness(.95) saturate(1.05) !important;
}
/* Catalog empty state */
.catalog-empty {
background: rgba(245,243,239,.02) !important;
border: 1px solid rgba(245,243,239,.05) !important;
color: rgba(245,243,239,.6) !important;
}
.catalog-empty em {
color: var(--sage-l) !important;
}
/* Plant modal reste light (fiche produit) — OK */
/* ─── POLISH GLOBAL ─── */
/* Selection color (mise en évidence texte) */
::selection {
background: rgba(181,196,160,.35);
color: #f5f3ef;
}
::-moz-selection {
background: rgba(181,196,160,.35);
color: #f5f3ef;
}
/* Scroll padding pour que les anchors ne soient pas cachés par la nav */
html {
scroll-padding-top: 5rem;
}
/* Scrollbar custom (webkit + firefox) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(10,14,8,.5);
}
::-webkit-scrollbar-thumb {
background: rgba(138,155,117,.35);
border-radius: 10px;
border: 2px solid rgba(10,14,8,.5);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(138,155,117,.55);
}
html {
scrollbar-color: rgba(138,155,117,.35) rgba(10,14,8,.5);
scrollbar-width: thin;
}
/* Focus visible harmonisé sage-l sur dark mode */
*:focus-visible {
outline: 2px solid var(--sage-l) !important;
outline-offset: 3px !important;
border-radius: 2px;
}
/* Progress bar en haut : sage-l accent */
.progress {
background: var(--sage-l) !important;
box-shadow: 0 0 8px rgba(181,196,160,.4);
}
/* Scroll indicator flottant (bas-droite) adapté dark */
.scroll-indicator {
background: rgba(20,24,15,.85) !important;
backdrop-filter: blur(14px) !important;
border: 1px solid rgba(245,243,239,.08) !important;
color: rgba(245,243,239,.7) !important;
}
/* Nav en dark : quand scrolled, fond ink translucide */
.nav.scrolled {
background: rgba(20,24,15,.82) !important;
backdrop-filter: blur(18px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
border-bottom: 1px solid rgba(245,243,239,.06) !important;
}
.nav.scrolled .logo { color: #f5f3ef !important; }
.nav.scrolled .nav-link { color: rgba(245,243,239,.6) !important; }
.nav.scrolled .nav-link:hover,
.nav.scrolled .nav-link.active { color: var(--sage-l) !important; }
.nav.scrolled .nav-cta {
border-color: rgba(245,243,239,.25) !important;
color: #f5f3ef !important;
}
.nav.scrolled .nav-cta:hover {
background: var(--sage-l) !important;
border-color: var(--sage-l) !important;
color: var(--ink) !important;
}
.nav.scrolled .hamburger span { background: #f5f3ef !important; }
/* Language switcher dans dark mode */
.lang-switch-btn {
background: transparent !important;
border: 1px solid rgba(245,243,239,.15) !important;
color: rgba(245,243,239,.65) !important;
}
.lang-switch-btn:hover {
color: #f5f3ef !important;
border-color: rgba(245,243,239,.35) !important;
}
.nav.scrolled .lang-switch-btn {
border-color: rgba(245,243,239,.15) !important;
color: rgba(245,243,239,.65) !important;
}
.nav.scrolled .lang-switch-btn:hover {
color: var(--sage-l) !important;
border-color: var(--sage-l) !important;
}
.lang-switch-menu {
background: rgba(20,24,15,.95) !important;
backdrop-filter: blur(18px) !important;
border: 1px solid rgba(245,243,239,.1) !important;
}
.lang-switch-option { background: transparent !important; }
.lang-switch-option:hover { background: rgba(245,243,239,.04) !important; }
.lang-switch-option.active { background: rgba(181,196,160,.08) !important; }
.lang-switch-option .lang-code { color: var(--sage-l) !important; }
.lang-switch-option .lang-name { color: rgba(245,243,239,.8) !important; }
.lang-switch-option.active .lang-name { color: #f5f3ef !important; }
/* Skip link visible sur dark */
.skip-link {
background: var(--sage-l) !important;
color: var(--ink) !important;
}
.skip-link:focus {
outline: 2px solid #f5f3ef !important;
outline-offset: 2px !important;
}
/* Unification des easings (retire les ease-in-out génériques là où il reste) */
.hero-img, .cat-modal, .plantes-modal, .plant-modal {
transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
}
/* Process grid connecteur line en dark */
@media (min-width: 1025px) {
.process-step-icon {
background: rgba(10,14,8,.85) !important;
border-color: rgba(181,196,160,.28) !important;
}
}
/* Accent rule decor (entre process/timeline) en dark */
.accent-rule-decor {
background: transparent !important;
}
/* Recalage Stats-grid : le premier stat garde son look mais adapté */
.stats-grid .stat:first-child::before {
color: var(--sage-l) !important;
}
/* Contacts-general text adjust */
.contacts-general-label { color: rgba(245,243,239,.5) !important; }
.contacts-general-val, .contacts-general-val a {
color: rgba(245,243,239,.75) !important;
}
.contacts-general-val a:hover { color: var(--sage-l) !important; }
/* Process-step-title em accent */
.process-step-title em { color: var(--sage-l) !important; }
/* Timeline : gradient final */
.timeline-list::after {
box-shadow: 0 0 14px rgba(181,196,160,.4) !important;
}
/* Cat-modal & Plantes modal : border hairline sage-l au lieu de border par défaut */
.cat-modal, .plantes-modal, .plant-modal {
border: 1px solid rgba(245,243,239,.08) !important;
}
/* Bordure de séparation chapter-break : le thread devient plus présent */
.chapter-break-thread {
box-shadow: 0 0 20px rgba(181,196,160,.15);
}
/* Card content inner highlight : plus visible sur dark */
.cat-card .cat-content {
box-shadow: inset 0 1px 0 rgba(245,243,239,.08) !important;
}
/* Shortlist bar polish */
.shortlist-bar {
background: rgba(10,14,8,.9) !important;
backdrop-filter: blur(20px) saturate(1.2) !important;
border: 1px solid rgba(245,243,239,.1) !important;
box-shadow: 0 20px 44px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.22) !important;
}
/* Toast polish */
.toast {
background: rgba(10,14,8,.95) !important;
backdrop-filter: blur(18px) !important;
border: 1px solid rgba(245,243,239,.1) !important;
}
/* Reassurance svg sizes uniforme */
.reassurance-item svg {
width: 17px; height: 17px;
}
/* Header of the home page : reduce tension */
.hero-tag {
color: rgba(181,196,160,.72) !important;
}
/* Smooth scroll for internal anchors */
html { scroll-behavior: smooth; }
/* Disable fixed attachment on mobile (iOS Safari bug) */
@media (max-width: 768px) {
body { background-attachment: scroll !important; }
body::before { position: absolute !important; }
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 11 : HARMONISATION + LISIBILITÉ
Tokens dark unifiés · halos accentués · contrastes remontés
═════════════════════════════════════════════════════════════════ */
/* ─── TOKENS UNIFIÉS (dark mode) ─── */
:root {
/* Surfaces frosted (containers / cards / sections) */
--dk-surface-0: rgba(245,243,239,.015); /* quasi-null */
--dk-surface-1: rgba(245,243,239,.025); /* repos */
--dk-surface-2: rgba(245,243,239,.045); /* hover */
--dk-surface-3: rgba(10,14,8,.35); /* content zones (dark) */
--dk-surface-3-h: rgba(10,14,8,.5); /* content hover */
--dk-surface-top: rgba(20,24,15,.85); /* toolbars, nav */
/* Borders */
--dk-border: rgba(245,243,239,.06); /* hairline repos */
--dk-border-h: rgba(181,196,160,.22); /* hover sage */
--dk-border-div: rgba(245,243,239,.08); /* dividers */
/* Texts */
--dk-fg: #f5f3ef; /* titres & primary */
--dk-fg-2: rgba(245,243,239,.78); /* body (était .65, remonté) */
--dk-fg-3: rgba(245,243,239,.62); /* muted (était .55) */
--dk-fg-4: rgba(245,243,239,.45); /* labels discrets */
/* Blur standard */
--dk-blur: blur(18px) saturate(1.1);
/* Shadows */
--dk-sh-1: 0 4px 14px rgba(0,0,0,.14); /* repos */
--dk-sh-2: 0 18px 40px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.14); /* hover */
--dk-sh-3: 0 30px 60px rgba(0,0,0,.4); /* modals */
}
/* ─── LISIBILITÉ : remontée générale du contraste texte ─── */
.cat-card .cat-sub,
.process-step-desc,
.timeline-item-desc,
.contacts-band-intro,
.contact-link,
.specialty-card-desc,
.hero-sub {
color: var(--dk-fg-2) !important;
}
.cat-card .cat-nr::before,
.timeline-item-desc em,
.reassurance-item,
.footer-desc,
.stats-grid .stat .stat-l,
.process-step-nr,
.stats--light .stat-l,
.specialty-card-spec-label {
color: var(--dk-fg-3) !important;
}
.contacts-general-label,
.contact-modal-contact-region,
.plant-modal-spec-label {
color: var(--dk-fg-4) !important;
}
/* ─── HARMONISATION DES SURFACES (unification) ─── */
.stats-grid,
.cat-card:not(:hover),
.process-step:not(:hover),
.contact-block:not(:hover),
.specialty-card:not(:hover),
.catalog-item:not(:hover) {
background: var(--dk-surface-0) !important;
border: 1px solid var(--dk-border) !important;
backdrop-filter: var(--dk-blur) !important;
-webkit-backdrop-filter: var(--dk-blur) !important;
box-shadow: var(--dk-sh-1) !important;
}
.stats-grid:hover,
.cat-card:hover,
.process-step:hover,
.contact-block:hover,
.specialty-card:hover,
.catalog-item:hover {
background: var(--dk-surface-1) !important;
border-color: var(--dk-border-h) !important;
box-shadow: var(--dk-sh-2) !important;
}
/* Content zone content cards : reste plus opaque pour lisibilité texte */
.cat-card .cat-content {
background: linear-gradient(135deg,
var(--dk-surface-3) 0%,
rgba(15,20,11,.28) 100%) !important;
backdrop-filter: var(--dk-blur) !important;
-webkit-backdrop-filter: var(--dk-blur) !important;
}
.cat-card:hover .cat-content {
background: linear-gradient(135deg,
var(--dk-surface-3-h) 0%,
rgba(20,26,14,.4) 100%) !important;
}
/* Stats-grid borders internes alignées */
.stats-grid .stat {
border-right: 1px solid var(--dk-border-div) !important;
}
/* ─── HALOS STRATÉGIQUES pour accentuer la hiérarchie ─── */
/* Halo derrière le titre du chapter-break (met en avant l'annonce) */
.chapter-break-inner {
position: relative;
}
.chapter-break-inner::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 140%;
height: 260%;
background: radial-gradient(ellipse, rgba(181,196,160,.08) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
/* Halo sage derrière le hero stats (le "80+" éclaire sa zone) */
.stats {
position: relative;
}
.stats::before {
content: '';
position: absolute;
top: 20%; left: 5%;
width: 55%;
height: 90%;
background: radial-gradient(ellipse, rgba(181,196,160,.08) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.stats > * { position: relative; z-index: 1; }
/* Halo derrière le titre timeline (épicentre émotionnel) */
.timeline-head {
position: relative;
}
.timeline-head::before {
content: '';
position: absolute;
top: -30%; left: 50%;
transform: translateX(-50%);
width: 120%;
height: 200%;
background: radial-gradient(ellipse, rgba(181,196,160,.06) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
/* Halo derrière le titre contacts (dernière zone de conversion) */
.contacts-band-head {
position: relative;
}
.contacts-band-head::before {
content: '';
position: absolute;
top: -20%; left: -10%;
width: 80%;
height: 200%;
background: radial-gradient(ellipse, rgba(181,196,160,.1) 0%, transparent 65%);
pointer-events: none;
z-index: -1;
}
.contacts-band-head > * { position: relative; z-index: 1; }
/* ─── FADE DE TRANSITION HERO → BODY ─── */
/* Bande d'émergence juste après le hero (plus claire pour lire les premiers éléments) */
.hero + .stats::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 200px;
background: linear-gradient(to bottom,
rgba(10,14,8,.4) 0%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
/* ─── FADE DE TRANSITION AVANT FOOTER ─── */
/* Gradient sombre qui prépare à l'entrée dans le footer */
footer::before {
content: '';
position: absolute;
top: -80px; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.6) 100%);
pointer-events: none;
}
footer {
position: relative;
}
/* ─── ACCENT AMBIENT HOVER sur les CTAs primaires ─── */
.btn-sage,
.shortlist-bar-cta,
.plant-modal-cta-btn {
position: relative;
overflow: hidden;
}
.btn-sage::after,
.shortlist-bar-cta::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(245,243,239,.12) 0%, transparent 60%);
opacity: 0;
transition: opacity .4s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.btn-sage:hover::after,
.shortlist-bar-cta:hover::after {
opacity: 1;
}
/* ─── TITRES : accent sage-l uniforme + text-shadow doux pour détachement ─── */
.chapter-break-title em,
.cats-title em,
.process-title em,
.timeline-title em,
.contacts-band-title em,
.featured-specialty-title em,
.catalog-sec-title em,
.page-hero-title em,
.cat-card[data-modal] .cat-name em,
.intro-sec .intro-title em {
color: var(--sage-l) !important;
text-shadow: 0 0 30px rgba(181,196,160,.12);
}
/* ─── PARAGRAPHES : line-height généreux pour respiration ─── */
.intro-body,
.chapter-break-sub,
.process-sub,
.contacts-band-intro,
.specialty-card-desc,
.cat-modal-desc,
.plant-modal-intro {
line-height: 1.75 !important;
}
/* ─── SMOOTHING INTERNE des contenus ─── */
/* Les titres gagnent un poli supplémentaire quand en viewport */
h1, h2, h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ─── CORRECTIONS MICRO ─── */
/* Cat-card content top padding reste à 2.5rem (numéro + title respire) */
.cat-card .cat-content {
padding: 2.5rem 1.9rem 1.9rem !important;
}
/* Numéro éditorial des cat-cards : légèrement plus distancé */
.cat-card .cat-nr {
top: 1.4rem !important;
right: 1.5rem !important;
}
/* Process-step : padding resserré pour les 4 steps dense */
.process-step {
padding: 2rem 1.75rem !important;
}
/* Section cats : padding-top suit l'espace après chapter-break */
.cats { padding-top: 0 !important; padding-bottom: 6rem !important; }
.chapter-break { padding-bottom: 2.5rem !important; }
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 12 : CAT CARDS v5 "Floating Layer + Double-Bezel"
Nested architecture · arrow nested button · image vibrante · hover spring
(soft-skill : Doppelrand + Nested CTA · Apple/Arc-tier modernité)
═════════════════════════════════════════════════════════════════ */
/* ─── OUTER SHELL : enveloppe matérielle ─── */
.cat-card {
background: linear-gradient(135deg,
rgba(245,243,239,.025) 0%,
rgba(138,155,117,.035) 100%) !important;
border: 1px solid rgba(245,243,239,.08) !important;
border-radius: 24px !important;
padding: 6px !important;
overflow: hidden !important;
backdrop-filter: blur(20px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.1),
inset 0 1px 0 rgba(245,243,239,.07) !important;
transition: transform .6s cubic-bezier(.22,1,.36,1),
box-shadow .6s cubic-bezier(.22,1,.36,1),
border-color .5s ease !important;
filter: none !important;
/* La card est un conteneur flex pour l'inner core */
display: block !important;
position: relative;
min-height: 540px !important;
}
/* Outer shell hover : glow + lift */
.cat-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(181,196,160,.28) !important;
box-shadow:
0 0 0 1px rgba(181,196,160,.15),
0 24px 50px rgba(0,0,0,.35),
0 8px 18px rgba(0,0,0,.2),
inset 0 1px 0 rgba(245,243,239,.12) !important;
}
/* ─── INNER CORE : conteneur principal avec radius concentric ─── */
.cat-card::before { display: none !important; } /* la BIO pill passera sur l'inner */
/* L'inner core n'existe pas en HTML : on simule avec un fond sur le card */
/* Trick : on applique l'inner radius directement sur .cat-photo et .cat-content
qui sont les 2 enfants principaux, et on utilise overflow:hidden
+ les positions relative pour qu'ils se touchent au centre */
/* IMAGE TOP : l'inner part, radius top */
.cat-card .cat-photo {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 320px !important;
min-height: 320px !important;
border-radius: 18px 18px 0 0 !important;
overflow: hidden !important;
filter: brightness(.96) saturate(1.05) contrast(1.02) !important;
transition: transform 1.3s cubic-bezier(.16,1,.3,1), filter .5s !important;
}
.cat-card:hover .cat-photo {
transform: scale(1.06) !important;
filter: brightness(1.02) saturate(1.12) contrast(1.04) !important;
}
/* Image inner-highlight au top pour donner de la matière */
.cat-card .cat-photo::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(245,243,239,.15);
pointer-events: none;
z-index: 2;
}
/* Overlay image : gradient subtil */
.cat-card .cat-overlay {
position: absolute !important;
inset: 0 !important;
height: 320px !important;
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.05) 50%,
rgba(10,14,8,.35) 100%) !important;
border-radius: 18px 18px 0 0 !important;
pointer-events: none;
}
/* CONTENT : la partie basse avec radius bottom */
.cat-card .cat-content {
position: relative !important;
inset: auto !important;
border-radius: 0 0 18px 18px !important;
padding: 1.8rem 1.7rem 1.7rem !important;
background: linear-gradient(to bottom,
rgba(12,16,10,.72) 0%,
rgba(16,20,12,.82) 100%) !important;
backdrop-filter: blur(14px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
display: flex !important;
flex-direction: column !important;
gap: .9rem !important;
box-shadow: inset 0 1px 0 rgba(245,243,239,.08) !important;
min-height: calc(100% - 320px) !important;
}
/* ─── MICRO-BADGE flottant à la jointure image/content ─── */
/* La BIO pill (ancien ::before) + nouvelle position */
.cat-card > .cat-content::before {
content: 'Bio · Sauvage';
position: absolute;
top: -14px; left: 1.5rem;
z-index: 5;
font-family: var(--fb);
font-size: .48rem;
font-weight: 700;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ink);
background: var(--sage-l);
padding: .4rem .8rem .4rem 1.1rem;
border-radius: 999px;
box-shadow:
0 4px 12px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.3);
background-image: radial-gradient(circle at .55rem center, rgba(26,31,23,.7) 2.5px, transparent 3px);
background-repeat: no-repeat;
}
/* Numéro éditorial : moderne, plus grand, en flex top */
.cat-card .cat-nr {
position: relative !important;
top: auto !important; right: auto !important;
order: 1 !important;
align-self: flex-start !important;
font-family: var(--fb) !important;
font-size: .56rem !important;
font-weight: 600 !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
color: rgba(181,196,160,.75) !important;
font-style: normal !important;
font-variation-settings: normal !important;
line-height: 1 !important;
display: inline-flex;
align-items: center;
gap: .5rem;
}
.cat-card .cat-nr::before {
content: '';
display: inline-block;
width: 20px; height: 1px;
background: rgba(181,196,160,.5);
}
.cat-card[data-modal="plantes"] .cat-nr::after { content: ' · 01 / 04' !important; color: rgba(245,243,239,.35) !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; font-size: inherit !important; font-style: normal !important; font-variation-settings: normal !important; margin-left: 0 !important; }
.cat-card[data-modal="chataignes"] .cat-nr::after { content: ' · 02 / 04' !important; color: rgba(245,243,239,.35) !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; font-size: inherit !important; font-style: normal !important; font-variation-settings: normal !important; margin-left: 0 !important; }
.cat-card[data-modal="fruits"] .cat-nr::after { content: ' · 03 / 04' !important; color: rgba(245,243,239,.35) !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; font-size: inherit !important; font-style: normal !important; font-variation-settings: normal !important; margin-left: 0 !important; }
.cat-card[data-modal="escargots"] .cat-nr::after { content: ' · 04 / 04' !important; color: rgba(245,243,239,.35) !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; font-size: inherit !important; font-style: normal !important; font-variation-settings: normal !important; margin-left: 0 !important; }
/* Cat-bottom : structure en bloc content */
.cat-card .cat-bottom {
margin-top: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: .7rem !important;
flex: 1;
}
/* Nom : Fraunces italic, grand, moderne */
.cat-card .cat-name {
font-family: var(--fd) !important;
font-style: italic !important;
font-size: clamp(1.5rem, 1.9vw, 1.75rem) !important;
line-height: 1.05 !important;
color: #f5f3ef !important;
font-variation-settings: "opsz" 144, "SOFT" 60 !important;
letter-spacing: -.02em;
transform: none !important;
transition: font-variation-settings .6s cubic-bezier(.22,1,.36,1) !important;
}
.cat-card:hover .cat-name {
transform: none !important;
font-variation-settings: "opsz" 144, "SOFT" 88 !important;
}
/* Sep : trait sage-l qui s'anime */
.cat-card .cat-sep {
display: block !important;
width: 32px !important;
height: 1px !important;
background: rgba(181,196,160,.5) !important;
margin: .2rem 0 !important;
transition: width .5s cubic-bezier(.22,1,.36,1), background .3s !important;
}
.cat-card:hover .cat-sep {
width: 56px !important;
background: var(--sage-l) !important;
}
/* Sub : Geist petit, muted */
.cat-card .cat-sub {
font-family: var(--fb) !important;
font-style: normal !important;
font-size: .75rem !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
line-height: 1.5 !important;
color: rgba(245,243,239,.68) !important;
max-height: none !important;
opacity: 1 !important;
margin: 0 !important;
}
/* ─── ARROW BUTTON NESTED (pattern soft-skill : button-in-button) ─── */
/* On transforme le cat-cta en un bouton circulaire nested bottom-right */
.cat-card .cat-cta {
position: absolute !important;
bottom: 1.4rem !important;
right: 1.4rem !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: rgba(245,243,239,.06) !important;
border: 1px solid rgba(245,243,239,.1) !important;
backdrop-filter: blur(10px) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important; /* cache le "Découvrir →" texte */
margin: 0 !important;
padding: 0 !important;
border-top: 0 !important;
opacity: 1 !important;
transform: none !important;
gap: 0 !important;
color: transparent !important;
transition:
background .4s cubic-bezier(.22,1,.36,1),
border-color .4s,
transform .4s cubic-bezier(.22,1,.36,1) !important;
z-index: 3;
}
.cat-card .cat-cta::after {
content: '→' !important;
font-family: var(--fb);
font-size: 1.1rem;
font-weight: 400;
color: var(--sage-l);
letter-spacing: 0;
transition: transform .45s cubic-bezier(.22,1,.36,1), color .3s !important;
transform: none !important;
}
.cat-card:hover .cat-cta {
background: var(--sage-l) !important;
border-color: var(--sage-l) !important;
transform: scale(1.08) translate(2px, -2px) !important;
}
.cat-card:hover .cat-cta::after {
color: var(--ink) !important;
transform: translateX(2px) !important;
}
/* ─── HOVER LINE effacée (remplacée par glow border outer) ─── */
.cat-card::after {
display: none !important;
}
/* ─── Responsive ─── */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1.6rem !important;
padding: 0 2rem !important;
max-width: 1240px; margin: 0 auto;
}
.cat-card[data-modal] {
min-height: 560px !important;
}
}
@media (max-width: 900px) {
.cat-card .cat-photo,
.cat-card .cat-overlay { height: 280px !important; min-height: 280px !important; }
.cat-card .cat-content { padding: 1.5rem 1.3rem 1.3rem !important; }
.cat-card > .cat-content::before { left: 1.1rem; font-size: .44rem; padding: .3rem .65rem .3rem .95rem; }
.cat-card .cat-cta { width: 38px !important; height: 38px !important; bottom: 1.1rem !important; right: 1.1rem !important; }
.cat-card .cat-cta::after { font-size: 1rem; }
}
@media (max-width: 520px) {
.cat-card[data-modal] { min-height: 480px !important; }
.cat-card .cat-photo,
.cat-card .cat-overlay { height: 240px !important; min-height: 240px !important; }
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 13 : LAYOUT "Hero featured + row 3"
Plantes = hero wide split image/content · 3 autres en rangée égales
═════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1fr 1fr 1fr !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"plantes plantes plantes"
"chataignes fruits escargots" !important;
gap: 1.6rem !important;
padding: 0 2rem !important;
max-width: 1280px; margin: 0 auto;
}
.cat-card[data-modal="plantes"] { grid-area: plantes !important; }
.cat-card[data-modal="chataignes"] { grid-area: chataignes !important; }
.cat-card[data-modal="fruits"] { grid-area: fruits !important; }
.cat-card[data-modal="escargots"] { grid-area: escargots !important; }
/* ─── PLANTES HERO : split image 58% / content 42% ─── */
.cat-card[data-modal="plantes"] {
min-height: 420px !important;
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
grid-template-rows: auto !important;
}
.cat-card[data-modal="plantes"] .cat-photo {
grid-column: 1 !important;
grid-row: 1 / -1 !important;
height: 100% !important;
min-height: 100% !important;
border-radius: 18px 0 0 18px !important;
}
.cat-card[data-modal="plantes"] .cat-overlay {
height: 100% !important;
border-radius: 18px 0 0 18px !important;
background: linear-gradient(to right,
transparent 0%,
rgba(10,14,8,.15) 80%,
rgba(10,14,8,.3) 100%) !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.cat-card[data-modal="plantes"] .cat-content {
grid-column: 2 !important;
grid-row: 1 / -1 !important;
border-radius: 0 18px 18px 0 !important;
min-height: 100% !important;
padding: 2.5rem 2.2rem 2.2rem !important;
justify-content: flex-end !important;
gap: 1.1rem !important;
}
/* BIO pill plantes : maintenant flottante à cheval sur le split vertical */
.cat-card[data-modal="plantes"] > .cat-content::before {
top: 1.5rem !important;
left: -14px !important;
transform: none !important;
}
/* Title plantes : plus grand (c'est le hero) */
.cat-card[data-modal="plantes"] .cat-name {
font-size: clamp(1.9rem, 2.6vw, 2.4rem) !important;
font-variation-settings: "opsz" 144, "SOFT" 70 !important;
}
.cat-card[data-modal="plantes"]:hover .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 95 !important;
}
/* Sub plantes : plus riche */
.cat-card[data-modal="plantes"] .cat-sub {
font-size: .82rem !important;
line-height: 1.65 !important;
}
/* Arrow button plantes : un peu plus gros */
.cat-card[data-modal="plantes"] .cat-cta {
width: 52px !important;
height: 52px !important;
bottom: 1.6rem !important;
right: 1.6rem !important;
}
.cat-card[data-modal="plantes"] .cat-cta::after {
font-size: 1.3rem !important;
}
/* Les 3 cards secondaires : aspect portrait compact */
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
min-height: 440px !important;
}
.cat-card[data-modal="chataignes"] .cat-photo,
.cat-card[data-modal="fruits"] .cat-photo,
.cat-card[data-modal="escargots"] .cat-photo,
.cat-card[data-modal="chataignes"] .cat-overlay,
.cat-card[data-modal="fruits"] .cat-overlay,
.cat-card[data-modal="escargots"] .cat-overlay {
height: 240px !important;
min-height: 240px !important;
}
.cat-card[data-modal="chataignes"] .cat-content,
.cat-card[data-modal="fruits"] .cat-content,
.cat-card[data-modal="escargots"] .cat-content {
padding: 1.5rem 1.4rem 1.3rem !important;
}
.cat-card[data-modal="chataignes"] .cat-name,
.cat-card[data-modal="fruits"] .cat-name,
.cat-card[data-modal="escargots"] .cat-name {
font-size: clamp(1.2rem, 1.4vw, 1.4rem) !important;
}
}
/* Responsive : tablet passe en stack classique */
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1rem !important;
padding: 0 1.2rem !important;
}
.cat-card[data-modal] {
grid-area: auto !important;
display: block !important;
min-height: 440px !important;
}
.cat-card[data-modal="plantes"] {
grid-column: span 2;
}
.cat-card[data-modal="plantes"] .cat-photo {
height: 280px !important;
border-radius: 18px 18px 0 0 !important;
}
.cat-card[data-modal="plantes"] .cat-overlay {
height: 280px !important;
border-radius: 18px 18px 0 0 !important;
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.05) 50%,
rgba(10,14,8,.35) 100%) !important;
}
.cat-card[data-modal="plantes"] .cat-content {
border-radius: 0 0 18px 18px !important;
padding: 1.8rem 1.5rem 1.4rem !important;
}
.cat-card[data-modal="plantes"] > .cat-content::before {
top: -14px !important;
left: 1.5rem !important;
}
}
@media (max-width: 520px) {
.cat-grid {
grid-template-columns: 1fr !important;
}
.cat-card[data-modal="plantes"] {
grid-column: auto;
}
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 14 : LAYOUT MIX G+H
Plantes hero vertical portrait + 3 secondaires landscape staggered
═════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
.cat-grid {
grid-template-columns: 1.3fr 1fr !important;
grid-template-rows: 1fr 1fr 1fr !important;
grid-template-areas:
"plantes chataignes"
"plantes fruits"
"plantes escargots" !important;
gap: 1.3rem !important;
padding: 0 2rem !important;
max-width: 1300px; margin: 0 auto;
}
.cat-card[data-modal="plantes"] { grid-area: plantes !important; }
.cat-card[data-modal="chataignes"] { grid-area: chataignes !important; }
.cat-card[data-modal="fruits"] { grid-area: fruits !important; }
.cat-card[data-modal="escargots"] { grid-area: escargots !important; }
/* ─── PLANTES HERO : portrait vertical dominant ─── */
.cat-card[data-modal="plantes"] {
min-height: 760px !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 460px 1fr !important;
}
.cat-card[data-modal="plantes"] .cat-photo {
height: 460px !important;
min-height: 460px !important;
border-radius: 18px 18px 0 0 !important;
grid-row: 1 !important;
grid-column: 1 !important;
}
.cat-card[data-modal="plantes"] .cat-overlay {
height: 460px !important;
border-radius: 18px 18px 0 0 !important;
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.05) 50%,
rgba(10,14,8,.35) 100%) !important;
}
.cat-card[data-modal="plantes"] .cat-content {
border-radius: 0 0 18px 18px !important;
grid-row: 2 !important;
padding: 2.6rem 2.2rem 2.2rem !important;
min-height: 100% !important;
}
.cat-card[data-modal="plantes"] .cat-name {
font-size: clamp(2rem, 2.8vw, 2.5rem) !important;
font-variation-settings: "opsz" 144, "SOFT" 70 !important;
}
.cat-card[data-modal="plantes"]:hover .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 95 !important;
}
.cat-card[data-modal="plantes"] .cat-sub {
font-size: .86rem !important;
line-height: 1.7 !important;
}
.cat-card[data-modal="plantes"] .cat-sep {
width: 44px !important;
}
.cat-card[data-modal="plantes"]:hover .cat-sep {
width: 72px !important;
}
.cat-card[data-modal="plantes"] .cat-cta {
width: 54px !important;
height: 54px !important;
bottom: 1.7rem !important;
right: 1.7rem !important;
}
.cat-card[data-modal="plantes"] .cat-cta::after {
font-size: 1.35rem !important;
}
.cat-card[data-modal="plantes"] > .cat-content::before {
top: -14px !important;
left: 2rem !important;
}
/* ─── 3 SECONDAIRES : landscape split image-left / content-right ─── */
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
display: grid !important;
grid-template-columns: 1fr 1.15fr !important;
grid-template-rows: auto !important;
min-height: 245px !important;
}
.cat-card[data-modal="chataignes"] .cat-photo,
.cat-card[data-modal="fruits"] .cat-photo,
.cat-card[data-modal="escargots"] .cat-photo {
height: 100% !important;
min-height: 100% !important;
border-radius: 18px 0 0 18px !important;
grid-column: 1 !important;
grid-row: 1 !important;
}
.cat-card[data-modal="chataignes"] .cat-overlay,
.cat-card[data-modal="fruits"] .cat-overlay,
.cat-card[data-modal="escargots"] .cat-overlay {
height: 100% !important;
border-radius: 18px 0 0 18px !important;
background: linear-gradient(to right,
transparent 0%,
rgba(10,14,8,.15) 75%,
rgba(10,14,8,.3) 100%) !important;
}
.cat-card[data-modal="chataignes"] .cat-content,
.cat-card[data-modal="fruits"] .cat-content,
.cat-card[data-modal="escargots"] .cat-content {
border-radius: 0 18px 18px 0 !important;
grid-column: 2 !important;
grid-row: 1 !important;
padding: 1.3rem 1.2rem 1.2rem !important;
justify-content: center !important;
min-height: 100% !important;
gap: .6rem !important;
}
.cat-card[data-modal="chataignes"] .cat-name,
.cat-card[data-modal="fruits"] .cat-name,
.cat-card[data-modal="escargots"] .cat-name {
font-size: clamp(1.15rem, 1.3vw, 1.3rem) !important;
line-height: 1.1 !important;
}
.cat-card[data-modal="chataignes"] .cat-sub,
.cat-card[data-modal="fruits"] .cat-sub,
.cat-card[data-modal="escargots"] .cat-sub {
font-size: .7rem !important;
line-height: 1.4 !important;
}
.cat-card[data-modal="chataignes"] .cat-cta,
.cat-card[data-modal="fruits"] .cat-cta,
.cat-card[data-modal="escargots"] .cat-cta {
width: 38px !important;
height: 38px !important;
bottom: 1rem !important;
right: 1rem !important;
}
.cat-card[data-modal="chataignes"] .cat-cta::after,
.cat-card[data-modal="fruits"] .cat-cta::after,
.cat-card[data-modal="escargots"] .cat-cta::after {
font-size: .95rem !important;
}
/* BIO pill : à cheval sur le joint vertical (entre image-left et content-right) */
.cat-card[data-modal="chataignes"] > .cat-content::before,
.cat-card[data-modal="fruits"] > .cat-content::before,
.cat-card[data-modal="escargots"] > .cat-content::before {
top: 1rem !important;
left: -14px !important;
font-size: .42rem !important;
padding: .28rem .6rem .28rem .85rem !important;
}
/* Numéro éditorial plus petit sur les secondaires */
.cat-card[data-modal="chataignes"] .cat-nr,
.cat-card[data-modal="fruits"] .cat-nr,
.cat-card[data-modal="escargots"] .cat-nr {
font-size: .48rem !important;
letter-spacing: .24em !important;
}
/* ─── STAGGERED OFFSET (le mouvement H) ─── */
/* Décalage subtil horizontal pour un feel organique magazine */
.cat-card[data-modal="chataignes"] {
transform: translateX(0) !important;
}
.cat-card[data-modal="fruits"] {
transform: translateX(18px) !important;
}
.cat-card[data-modal="escargots"] {
transform: translateX(0) !important;
}
/* Hover conserve l'offset + lift */
.cat-card[data-modal="chataignes"]:hover {
transform: translateY(-6px) translateX(0) !important;
}
.cat-card[data-modal="fruits"]:hover {
transform: translateY(-6px) translateX(18px) !important;
}
.cat-card[data-modal="escargots"]:hover {
transform: translateY(-6px) translateX(0) !important;
}
/* Plantes hover normal */
.cat-card[data-modal="plantes"]:hover {
transform: translateY(-6px) !important;
}
}
/* ─── Responsive ─── */
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1rem !important;
padding: 0 1.2rem !important;
}
.cat-card[data-modal] {
grid-area: auto !important;
display: block !important;
min-height: 440px !important;
transform: none !important;
}
.cat-card[data-modal="plantes"] {
grid-column: span 2;
min-height: 500px !important;
}
.cat-card[data-modal="plantes"] .cat-photo,
.cat-card[data-modal="plantes"] .cat-overlay {
height: 320px !important;
min-height: 320px !important;
border-radius: 18px 18px 0 0 !important;
}
.cat-card[data-modal="plantes"] .cat-overlay {
background: linear-gradient(to bottom,
transparent 0%,
rgba(10,14,8,.05) 50%,
rgba(10,14,8,.35) 100%) !important;
}
.cat-card[data-modal="plantes"] .cat-content {
border-radius: 0 0 18px 18px !important;
padding: 1.8rem 1.5rem 1.5rem !important;
}
.cat-card[data-modal="plantes"] > .cat-content::before {
top: -14px !important;
left: 1.5rem !important;
}
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
display: block !important;
min-height: 420px !important;
}
.cat-card[data-modal="chataignes"] .cat-photo,
.cat-card[data-modal="fruits"] .cat-photo,
.cat-card[data-modal="escargots"] .cat-photo {
height: 240px !important;
min-height: 240px !important;
border-radius: 18px 18px 0 0 !important;
}
.cat-card[data-modal="chataignes"] .cat-overlay,
.cat-card[data-modal="fruits"] .cat-overlay,
.cat-card[data-modal="escargots"] .cat-overlay {
height: 240px !important;
border-radius: 18px 18px 0 0 !important;
background: linear-gradient(to bottom,
transparent 0%, rgba(10,14,8,.05) 50%, rgba(10,14,8,.35) 100%) !important;
}
.cat-card[data-modal="chataignes"] .cat-content,
.cat-card[data-modal="fruits"] .cat-content,
.cat-card[data-modal="escargots"] .cat-content {
border-radius: 0 0 18px 18px !important;
padding: 1.5rem 1.4rem !important;
}
.cat-card[data-modal="chataignes"] > .cat-content::before,
.cat-card[data-modal="fruits"] > .cat-content::before,
.cat-card[data-modal="escargots"] > .cat-content::before {
top: -14px !important;
left: 1.2rem !important;
font-size: .44rem !important;
}
}
@media (max-width: 520px) {
.cat-grid {
grid-template-columns: 1fr !important;
}
.cat-card[data-modal="plantes"] {
grid-column: auto;
}
}
/* ═════════════════════════════════════════════════════════════════
PASS B — DROP 15 : LAYOUT FILMSTRIP 1×4 refined
4 cards égales en rangée · aspect 4/5 portrait · reveal cascade
═════════════════════════════════════════════════════════════════ */
@media (min-width: 1201px) {
.cat-grid {
grid-template-columns: repeat(4, 1fr) !important;
grid-template-rows: auto !important;
grid-template-areas: none !important;
gap: 1.6rem !important;
padding: 0 2rem !important;
max-width: 1440px; margin: 0 auto;
}
.cat-card[data-modal] {
grid-area: auto !important;
grid-column: auto !important;
aspect-ratio: 4/5 !important;
min-height: auto !important;
display: block !important;
transform: none !important;
}
.cat-card[data-modal="plantes"] { order: 1 !important; }
.cat-card[data-modal="chataignes"] { order: 2 !important; }
.cat-card[data-modal="fruits"] { order: 3 !important; }
.cat-card[data-modal="escargots"] { order: 4 !important; }
/* Reset any previous special case layout on plantes/secondaires */
.cat-card[data-modal="plantes"] {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.cat-card[data-modal] .cat-photo,
.cat-card[data-modal] .cat-overlay {
grid-column: 1 !important;
grid-row: 1 !important;
height: 62% !important;
min-height: 0 !important;
border-radius: 18px 18px 0 0 !important;
}
.cat-card[data-modal] .cat-photo {
position: absolute !important;
inset: 0 62% 0 0 !important;
height: auto !important;
left: 0; right: 0; top: 0; bottom: 38%;
}
.cat-card[data-modal] .cat-content {
position: absolute !important;
inset: 62% 0 0 0 !important;
border-radius: 0 0 18px 18px !important;
padding: 1.4rem 1.3rem 1.2rem !important;
justify-content: center !important;
gap: .6rem !important;
grid-column: auto !important; grid-row: auto !important;
min-height: 0 !important;
}
.cat-card[data-modal="chataignes"] .cat-overlay,
.cat-card[data-modal="fruits"] .cat-overlay,
.cat-card[data-modal="escargots"] .cat-overlay {
background: linear-gradient(to bottom, transparent 0%, rgba(10,14,8,.05) 50%, rgba(10,14,8,.35) 100%) !important;
}
.cat-card[data-modal] .cat-name {
font-size: clamp(1.15rem, 1.3vw, 1.35rem) !important;
line-height: 1.1 !important;
}
.cat-card[data-modal] .cat-sub {
font-size: .7rem !important;
line-height: 1.4 !important;
}
.cat-card[data-modal] .cat-cta {
width: 36px !important;
height: 36px !important;
bottom: 1rem !important;
right: 1rem !important;
}
.cat-card[data-modal] .cat-cta::after {
font-size: .95rem !important;
}
.cat-card[data-modal] > .cat-content::before {
top: -13px !important;
left: 1.1rem !important;
font-size: .42rem !important;
padding: .28rem .6rem .28rem .85rem !important;
}
.cat-card[data-modal] .cat-nr {
font-size: .48rem !important;
letter-spacing: .24em !important;
}
/* Featured touch : Plantes garde un accent subtil (badge "Flagship") */
.cat-card[data-modal="plantes"] .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 70 !important;
}
.cat-card[data-modal="plantes"]:hover .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 95 !important;
}
.cat-card[data-modal="plantes"] > .cat-content::before {
/* BIO pill sur plantes gagne un tag "flagship" via ::after... */
}
/* Hover : autres cards s'atténuent légèrement quand on hover une */
.cat-grid:hover .cat-card:not(:hover) {
filter: brightness(.85) saturate(.7) !important;
}
/* Reveal cascade au scroll (JS via .rv déjà existant + delays via CSS) */
.cat-card[data-modal="plantes"] { transition-delay: 0ms; }
.cat-card[data-modal="chataignes"] { transition-delay: 120ms; }
.cat-card[data-modal="fruits"] { transition-delay: 240ms; }
.cat-card[data-modal="escargots"] { transition-delay: 360ms; }
}
/* ─── Responsive ─── */
@media (min-width: 901px) and (max-width: 1200px) {
.cat-grid {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-areas: none !important;
gap: 1.4rem !important;
padding: 0 1.5rem !important;
}
.cat-card[data-modal] {
grid-area: auto !important;
aspect-ratio: 4/5 !important;
min-height: auto !important;
display: block !important;
transform: none !important;
}
.cat-card[data-modal="plantes"],
.cat-card[data-modal="chataignes"],
.cat-card[data-modal="fruits"],
.cat-card[data-modal="escargots"] {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.cat-card[data-modal] .cat-photo,
.cat-card[data-modal] .cat-overlay {
position: relative !important;
inset: auto !important;
height: 60% !important;
min-height: 0 !important;
border-radius: 18px 18px 0 0 !important;
}
.cat-card[data-modal] .cat-content {
position: relative !important;
inset: auto !important;
border-radius: 0 0 18px 18px !important;
padding: 1.6rem 1.5rem !important;
}
.cat-card[data-modal] > .cat-content::before {
top: -14px !important;
left: 1.3rem !important;
}
}
@media (max-width: 900px) {
.cat-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1rem !important;
}
.cat-card[data-modal] {
aspect-ratio: 4/5 !important;
display: block !important;
transform: none !important;
}
}
@media (max-width: 520px) {
.cat-grid {
grid-template-columns: 1fr !important;
}
.cat-card[data-modal] {
aspect-ratio: 4/3 !important;
}
}
/* ═════════════════════════════════════════════════════════════════
DROP 21 — MODERNITÉ ADDITIVE
Micro-interactions premium · sans toucher au layout ni aux couleurs
═════════════════════════════════════════════════════════════════ */
/* ─── 1. Scroll reveal avec blur→net (emil / gpt-tasteskill) ─── */
.rv {
opacity: 0;
transform: translateY(24px);
filter: blur(8px);
transition:
opacity .9s cubic-bezier(.22,1,.36,1),
transform .9s cubic-bezier(.22,1,.36,1),
filter .9s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform, filter;
}
.rv.on {
opacity: 1;
transform: none;
filter: blur(0);
}
/* ─── 2. Glow subtil sur les accents italiques (em) ─── */
/* Donne du relief et signature "dark UI premium" */
.chapter-break-title em,
.cats-title em,
.process-title em,
.timeline-title em,
.contacts-band-title em,
.featured-specialty-title em,
.catalog-sec-title em,
.page-hero-title em,
.intro-sec .intro-title em,
.cat-card .cat-name em,
.hero h1 em {
text-shadow:
0 0 24px rgba(181,196,160,.14),
0 0 1px rgba(181,196,160,.08);
}
/* ─── 3. Link underline draw (animation modern) ─── */
.intro-link,
.footer-legal a,
.f-links a,
.contact-link {
position: relative;
}
.intro-link::after,
.f-links a::after {
content: '';
position: absolute;
left: 0; bottom: -1px;
width: 0;
height: 1px;
background: currentColor;
transition: width .45s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.intro-link:hover::after,
.f-links a:hover::after {
width: 100%;
}
/* ─── 4. Buttons : fill slide-up au hover ─── */
.btn {
position: relative;
overflow: hidden;
z-index: 0;
isolation: isolate;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: currentColor;
transform: translateY(100%);
transition: transform .5s cubic-bezier(.22,1,.36,1);
z-index: -1;
opacity: .1;
}
.btn:hover::before {
transform: translateY(0);
}
/* Ne pas appliquer aux btn-sage qui a son propre hover */
.btn-sage::before { display: none; }
/* ─── 5. Arrow glide plus punchy sur les CTAs avec → ─── */
.cat-card .cat-cta::after,
.intro-link::before,
.specialty-card-cta::after {
display: inline-block;
transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.cat-card:hover .cat-cta::after {
transform: translateX(5px) !important;
}
/* ─── 6. Image cards : duotone subtil sage au repos ─── */
.cat-card .cat-photo {
transition:
filter .7s cubic-bezier(.22,1,.36,1),
transform 1.2s cubic-bezier(.16,1,.3,1) !important;
}
/* ─── 7. Smooth focus ring ─── */
*:focus-visible {
outline: 1.5px solid var(--sage-l);
outline-offset: 3px;
border-radius: 2px;
transition: outline-offset .2s ease;
}
/* ─── 8. Nav smooth transition quand elle scroll ─── */
.nav {
transition:
background .5s cubic-bezier(.22,1,.36,1),
backdrop-filter .5s ease,
border-color .5s ease,
padding .4s ease !important;
}
/* ─── 9. Stats : micro-lift au hover de chaque stat ─── */
.stats-grid .stat {
transition: transform .4s cubic-bezier(.22,1,.36,1), color .3s ease;
cursor: default;
}
.stats-grid .stat:hover {
transform: translateY(-2px);
}
.stats-grid .stat:hover .stat-n {
color: var(--sage-l) !important;
}
/* ─── 10. Timeline items : glissement subtile au hover ─── */
.timeline-item {
transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.timeline-item:hover {
transform: translateX(3px);
}
.timeline-item:nth-child(even):hover {
transform: translateX(-3px);
}
/* ─── 11. Process steps : arrow subtile qui glisse ─── */
.process-step {
transition:
background .4s ease,
border-color .4s ease,
transform .5s cubic-bezier(.22,1,.36,1) !important;
}
.process-step:hover {
transform: translateY(-3px);
}
/* ─── 13. Scroll indicator + progress : smooth ─── */
.progress {
transition: width .15s ease-out !important;
background: linear-gradient(to right, var(--sage), var(--sage-l)) !important;
box-shadow: 0 0 10px rgba(181,196,160,.3);
}
.scroll-indicator {
transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1) !important;
}
/* ─── 14. Contact blocks : subtle glow au hover ─── */
.contact-block {
transition:
background .4s ease,
border-color .4s ease,
box-shadow .5s cubic-bezier(.22,1,.36,1) !important;
}
.contact-block:hover {
box-shadow: 0 0 0 1px rgba(181,196,160,.12), 0 20px 50px rgba(0,0,0,.2) !important;
}
/* ─── 15. Drawer mobile : staggered links slide-in ─── */
.nav-drawer.open .drawer-link {
animation: drawerSlide .5s cubic-bezier(.22,1,.36,1) both;
}
.nav-drawer.open .drawer-link:nth-child(1) { animation-delay: .05s; }
.nav-drawer.open .drawer-link:nth-child(2) { animation-delay: .1s; }
.nav-drawer.open .drawer-link:nth-child(3) { animation-delay: .15s; }
.nav-drawer.open .drawer-link:nth-child(4) { animation-delay: .2s; }
@keyframes drawerSlide {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ─── 16. Selection : plus stylée ─── */
::selection {
background: rgba(181,196,160,.25);
color: #f5f3ef;
text-shadow: none;
}
::-moz-selection {
background: rgba(181,196,160,.25);
color: #f5f3ef;
text-shadow: none;
}
/* ─── 17. Prefers-reduced-motion respect ─── */
@media (prefers-reduced-motion: reduce) {
.rv, .rv.on { filter: none !important; transform: none !important; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ═════════════════════════════════════════════════════════════════
DROP 22 — CHIFFRES CLÉS : plus petits, simples, fondus
═════════════════════════════════════════════════════════════════ */
/* Tous les chiffres stats : taille uniforme réduite, moins d'emphase */
.stats-grid .stat-n,
.stats-grid .stat:first-child .stat-n {
font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
font-variation-settings: "opsz" 48, "SOFT" 30 !important;
letter-spacing: -.015em !important;
color: rgba(245,243,239,.85) !important;
opacity: .92;
}
/* Hover : très léger boost, reste discret */
.stats-grid .stat:hover .stat-n {
opacity: 1 !important;
color: var(--sage-l) !important;
}
/* Labels sous les chiffres : encore plus fondus */
.stats-grid .stat-l {
opacity: .58 !important;
font-size: .5rem !important;
letter-spacing: .26em !important;
}
/* Premier stat : reset (plus de hero giant) */
.stats-grid .stat:first-child {
padding: 2rem 1.5rem !important;
justify-content: center !important;
min-height: auto !important;
}
.stats-grid .stat:first-child::before {
display: none !important;
}
.stats-grid .stat:first-child .stat-l {
font-weight: 500 !important;
color: rgba(245,243,239,.58) !important;
opacity: 1 !important;
}
/* Container stats : padding interne réduit */
.stats-grid {
padding: 2.5rem 0 !important;
}
.stats-grid .stat {
padding: 1.5rem 1.5rem !important;
}
/* Process step stat number : aussi plus sobre */
.process-step-stat-n {
font-size: 1rem !important;
font-variation-settings: "opsz" 48, "SOFT" 30 !important;
opacity: .85 !important;
}
/* Timeline year : aussi réduit */
.timeline-item-year {
font-size: 1.4rem !important;
font-variation-settings: "opsz" 48, "SOFT" 40 !important;
opacity: .9 !important;
}
/* ═════════════════════════════════════════════════════════════════
DROP 23 — Calibrage chiffres + section stats
Remonte la taille des numbers, resserre le padding section
═════════════════════════════════════════════════════════════════ */
/* Outer stats section : plus compacte (moins de vide vertical) */
.stats {
padding: 3rem 2rem !important;
}
/* Stats-grid : padding interne resserré */
.stats-grid {
padding: 1.8rem 0 !important;
}
.stats-grid .stat {
padding: 1rem 1.5rem !important;
gap: .4rem !important;
}
/* Numbers : équilibre juste — visibles mais pas dominants */
.stats-grid .stat-n,
.stats-grid .stat:first-child .stat-n {
font-size: clamp(1.9rem, 2.7vw, 2.45rem) !important;
font-variation-settings: "opsz" 144, "SOFT" 45 !important;
letter-spacing: -.018em !important;
color: rgba(245,243,239,.92) !important;
opacity: 1 !important;
line-height: 1 !important;
}
/* Labels : lisibles mais secondaires */
.stats-grid .stat-l {
font-size: .54rem !important;
letter-spacing: .26em !important;
opacity: 1 !important;
color: rgba(245,243,239,.52) !important;
}
.stats-grid .stat:hover .stat-n {
color: var(--sage-l) !important;
}
.stats-grid .stat:first-child {
padding: 1rem 1.5rem !important;
min-height: auto !important;
justify-content: center !important;
}
@media (max-width: 900px) {
.stats { padding: 2.5rem 1.2rem !important; }
.stats-grid { padding: 1.4rem 0 !important; }
.stats-grid .stat { padding: 1rem 1rem !important; }
.stats-grid .stat-n { font-size: clamp(1.6rem, 5vw, 2rem) !important; }
}
/* ═════════════════════════════════════════════════════════════════
DROP 24 — RESPONSIVE POLISH
Audit complet + ajustements mobile/tablet · touch-friendly · rythme
═════════════════════════════════════════════════════════════════ */
/* Safe defaults : empêche le scroll horizontal + smooth font resize */
html, body {
overflow-x: hidden !important;
max-width: 100vw;
}
@supports (-webkit-touch-callout: none) {
body { -webkit-text-size-adjust: 100%; }
}
/* ─── TABLET LANDSCAPE (≤1024px) ─── */
@media (max-width: 1024px) {
.nav-inner { padding: 1.1rem 1.6rem !important; }
.section { padding: 5rem 1.6rem !important; }
.intro-content { padding: 4rem 1.6rem !important; }
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 2rem !important;
}
.cta-inner { max-width: 540px !important; }
}
/* ─── TABLET PORTRAIT (≤900px) ─── */
@media (max-width: 900px) {
/* Nav sticky plus compacte */
.nav-inner { padding: 1rem 1.3rem !important; }
.nav.scrolled .nav-inner { padding: .85rem 1.3rem !important; }
/* Hero : moins de paddings, titre tighter */
.hero-content { padding: 7rem 1.5rem 4rem !important; }
.hero h1 {
font-size: clamp(2.4rem, 8vw, 3.8rem) !important;
line-height: 1.02 !important;
}
.hero-sub {
font-size: .88rem !important;
max-width: 100% !important;
line-height: 1.7 !important;
margin-bottom: 2rem !important;
}
.hero-tag {
font-size: .5rem !important;
letter-spacing: .26em !important;
margin-bottom: 1.3rem !important;
}
.hero-btns { gap: .6rem !important; }
.hero-btns .btn { padding: .7rem 1.3rem !important; font-size: .6rem !important; }
.hero-badges { gap: .4rem !important; margin-top: 1.2rem !important; flex-wrap: wrap !important; }
.badge { font-size: .5rem !important; padding: .2rem .5rem !important; }
.badge-sep { display: none !important; }
/* Scroll hint : caché sur tablette (pas d'espace) */
.scroll-hint { display: none !important; }
/* Chapter-break : moins étouffé */
.chapter-break { padding: 4rem 1.4rem 2rem !important; }
.chapter-break-title { font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important; }
.chapter-break-sub { font-size: .74rem !important; }
.chapter-break-thread { height: 44px !important; }
/* Section titres généraux */
.s-title, .cats-title, .process-title, .timeline-title,
.contacts-band-title, .catalog-sec-title, .featured-specialty-title,
.cta-inner h2 {
font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
line-height: 1.1 !important;
}
/* Process en 2 cols puis 1 col */
.process-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1.2rem !important;
}
.process-sec { padding: 4.5rem 1.3rem !important; }
/* Timeline : ligne centrale passe à gauche 14px, tout stack à droite */
.timeline-sec { padding: 4rem 1.3rem !important; }
.timeline-head { margin-bottom: 2.5rem !important; }
/* Contacts-band 1 col */
.contacts-band { padding: 4.5rem 1.3rem !important; }
.contacts-grid { grid-template-columns: 1fr !important; }
.contact-block {
border-right: 0 !important;
border-bottom: 1px solid rgba(245,243,239,.08) !important;
padding: 2.2rem 1.6rem !important;
}
.contact-block:last-child { border-bottom: 0 !important; }
.contacts-general {
flex-direction: column !important;
align-items: flex-start !important;
gap: .9rem !important;
padding: 1.4rem 1.6rem !important;
}
.contacts-band-reassurance { flex-direction: column !important; gap: .8rem !important; }
/* Marquee plus petit */
.marquee-item { font-size: .95rem !important; }
.marquee { gap: 2rem !important; }
.marquee-item::after { margin-left: 2rem !important; }
/* Footer : stack */
.footer-hero {
padding-bottom: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1.8rem !important;
}
.footer-logo { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
.footer-bot {
flex-direction: column !important;
align-items: flex-start !important;
gap: .7rem !important;
}
}
/* ─── MOBILE LARGE (≤640px) ─── */
@media (max-width: 640px) {
/* Hero plus compact */
.hero-content { padding: 6rem 1.3rem 3rem !important; }
.hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
.hero-sub { font-size: .82rem !important; margin-bottom: 1.6rem !important; }
.hero-btns { flex-direction: column !important; align-items: stretch !important; }
.hero-btns .btn { justify-content: center !important; width: 100% !important; }
/* Stats 2x2 */
.stats { padding: 2.5rem 1.2rem !important; }
.stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
padding: 1.2rem 0 !important;
}
.stats-grid .stat {
padding: 1rem .8rem !important;
border-right: 1px solid rgba(245,243,239,.07) !important;
}
.stats-grid .stat:nth-child(2n) { border-right: 0 !important; }
.stats-grid .stat:nth-child(n+3) {
border-top: 1px solid rgba(245,243,239,.07) !important;
padding-top: 1.2rem !important;
}
.stats-grid .stat-n { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
.stats-grid .stat-l { font-size: .48rem !important; letter-spacing: .22em !important; }
/* Intro plus tight */
.intro-sec { min-height: 380px !important; }
.intro-content { padding: 3rem 1.3rem !important; }
.intro-box { max-width: 100% !important; }
.intro-title { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
.intro-body { font-size: .82rem !important; line-height: 1.75 !important; }
.intro-caption { display: none !important; }
/* Process 1 col */
.process-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
.process-step { padding: 1.6rem 1.2rem !important; }
/* Timeline : all elements stack left */
.timeline-list::before { left: 14px !important; }
.timeline-item {
grid-template-columns: 28px 1fr !important;
gap: 1rem !important;
padding: 1rem 0 !important;
}
.timeline-item:nth-child(odd) .timeline-item-year,
.timeline-item:nth-child(even) .timeline-item-year {
grid-column: 2 !important;
text-align: left !important;
font-size: 1.25rem !important;
margin-bottom: .3rem !important;
}
.timeline-item:nth-child(odd) .timeline-item-content,
.timeline-item:nth-child(even) .timeline-item-content {
grid-column: 2 !important;
text-align: left !important;
}
.timeline-item:nth-child(even) .timeline-item-desc { margin-left: 0 !important; }
.timeline-item-dot-cell {
grid-column: 1 !important;
justify-content: flex-start !important;
}
.timeline-item-dot { margin: .4rem 0 0 !important; }
/* Marquee encore plus petit */
.marquee-item { font-size: .82rem !important; }
/* Footer 1 col */
.footer-grid { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
footer { padding: 3.5rem 1.2rem 1.6rem !important; }
.footer-certs-v2 { gap: .4rem !important; }
.footer-cert-badge { font-size: .56rem !important; padding: .4rem .7rem !important; }
.footer-legal { flex-wrap: wrap !important; gap: .9rem !important; }
/* Lang switcher : pas d'icône globe (prend trop de place) */
.lang-switch-btn svg { display: none !important; }
.lang-switch-btn { padding: .35rem .55rem !important; }
}
/* ─── PHONE (≤420px) ─── */
@media (max-width: 420px) {
.hero-content { padding: 5.5rem 1rem 2.4rem !important; }
.hero h1 { font-size: clamp(1.8rem, 10vw, 2.5rem) !important; letter-spacing: -.02em !important; }
.hero-sub { font-size: .78rem !important; }
/* Sections paddings ultra-compacts */
.stats, .process-sec, .timeline-sec, .contacts-band, .chapter-break {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Cats grid gap réduit */
.cat-grid { gap: 1.2rem !important; }
/* Contact links : touch target 44px min */
.contact-link {
padding: .45rem 0 !important;
font-size: .8rem !important;
min-height: 44px;
display: flex;
align-items: center;
}
.contact-block { padding: 1.8rem 1.3rem !important; }
/* Nav : plus de padding pour touch */
.nav-cta { padding: .55rem 1rem !important; }
.hamburger { width: 22px; height: 16px; }
/* Progress bar plus visible */
.progress { height: 3px !important; }
}
/* ─── TOUCH-FRIENDLY (no hover devices) ─── */
@media (hover: none) and (pointer: coarse) {
/* CTAs toujours visibles, pas d'effet hover */
.cat-card .cat-cta { opacity: 1 !important; transform: none !important; }
.catalog-item-action { opacity: 1 !important; transform: none !important; }
/* Scroll-indicator masqué sur touch */
.scroll-indicator { display: none !important; }
/* Custom cursor jamais */
.cursor-dot, .cursor-ring, .cursor-trail { display: none !important; }
}
/* ─── iOS / Mobile Safari fixes ─── */
@media (max-width: 900px) {
/* Fixed attachment bug */
body { background-attachment: scroll !important; }
body::before { position: absolute !important; }
/* 100dvh déjà appliqué au hero, OK */
}
/* Safe area iOS notch */
@supports (padding: max(0px)) {
.nav-inner,
.hero-content,
footer {
padding-left: max(1.2rem, env(safe-area-inset-left)) !important;
padding-right: max(1.2rem, env(safe-area-inset-right)) !important;
}
}
/* ================================================================
DROP 25 v2 · PAGE À PROPOS — modules spécifiques
On réutilise au maximum les composants de l'index (hero, stats,
intro-sec, chapter-break, process-sec, timeline-sec, marquee,
contacts-band). Seuls 4 modules éditoriaux sont propres à /apropos :
- .ab-story (récit long avec drop cap + chapitres numérotés)
- .ab-pullquote (citation éditoriale inline dans le récit)
- .ab-presence (présence internationale en typographie éditoriale)
- .ab-manifesto (vision · citation fin de page)
- .ab-signature (clôture famille)
================================================================ */
/* ---------- STORY LONG ---------- */
.ab-story {
position: relative;
padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 3vw, 2rem);
background: #f6f4ee;
color: #1a1f17;
}
.ab-story::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(42,56,34,.18), transparent);
}
.ab-story-inner {
max-width: 720px;
margin: 0 auto;
}
.ab-story-chapter {
margin-bottom: clamp(3rem, 6vw, 5rem);
position: relative;
}
.ab-story-chapter:last-child { margin-bottom: 0; }
.ab-story-num {
display: inline-block;
font: 500 .78rem/1 'Fraunces', serif;
font-variation-settings: 'opsz' 24, 'SOFT' 35;
font-style: italic;
letter-spacing: .32em;
color: rgba(42,56,34,.55);
margin-bottom: 1rem;
padding-bottom: .7rem;
border-bottom: 1px solid rgba(42,56,34,.18);
min-width: 40px;
text-align: left;
}
.ab-story-chapter-title {
font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.15 'Fraunces', serif;
font-variation-settings: 'opsz' 96, 'SOFT' 40;
letter-spacing: -.015em;
color: #14180f;
margin: .4rem 0 1.6rem;
}
.ab-story-chapter-title em {
font-style: italic;
font-weight: 400;
color: #2a3822;
font-variation-settings: 'opsz' 96, 'SOFT' 75;
}
.ab-story-chapter p {
font: 400 1.02rem/1.85 'Spectral', serif;
color: rgba(26,31,23,.82);
margin: 0 0 1.25rem;
max-width: 65ch;
}
.ab-story-lead {
font-size: 1.12rem !important;
color: #1a1f17 !important;
}
/* Drop cap éditorial */
.ab-dropcap {
float: left;
font: 400 4.4rem/0.9 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 45;
color: #2a3822;
padding: .55rem .5rem 0 0;
margin: .2rem .1rem 0 0;
letter-spacing: -.02em;
}
.ab-story-signoff {
margin-top: 2.4rem !important;
padding-top: 1.6rem;
border-top: 1px solid rgba(42,56,34,.18);
font-size: 1rem !important;
color: rgba(42,56,34,.85) !important;
}
.ab-story-signoff em {
font-family: 'Fraunces', serif;
font-variation-settings: 'opsz' 48, 'SOFT' 60;
font-style: italic;
font-size: 1.08em;
}
/* ---------- PULL QUOTE ---------- */
.ab-pullquote {
margin: clamp(3rem, 6vw, 5rem) auto;
max-width: 720px;
padding: 2.4rem 1.6rem;
border-top: 1px solid rgba(42,56,34,.2);
border-bottom: 1px solid rgba(42,56,34,.2);
text-align: center;
position: relative;
}
.ab-pullquote::before {
content: "";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 24px;
background: #f6f4ee;
display: flex;
align-items: center;
justify-content: center;
}
.ab-pullquote p {
font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.5 'Fraunces', serif;
font-variation-settings: 'opsz' 72, 'SOFT' 55;
letter-spacing: -.005em;
color: #1a1f17;
margin: 0;
font-style: italic;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
/* ---------- PRÉSENCE INTERNATIONALE ---------- */
.ab-presence {
padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 3vw, 2rem);
background: #efece3;
color: #1a1f17;
}
.ab-presence-inner {
max-width: 1080px;
margin: 0 auto;
text-align: center;
}
.ab-presence-inner .eyebrow {
display: inline-block;
font: 500 .72rem/1 'Spectral', serif;
letter-spacing: .32em;
text-transform: uppercase;
color: rgba(42,56,34,.65);
margin-bottom: 1.4rem;
}
.ab-presence-title {
font: 400 clamp(2rem, 4.4vw, 3.4rem)/1.1 'Fraunces', serif;
font-variation-settings: 'opsz' 120, 'SOFT' 35;
letter-spacing: -.02em;
color: #14180f;
margin: 0 0 1.4rem;
}
.ab-presence-title em {
font-style: italic;
font-weight: 400;
color: #2a3822;
font-variation-settings: 'opsz' 120, 'SOFT' 75;
}
.ab-presence-lead {
font: 400 1.02rem/1.7 'Spectral', serif;
color: rgba(26,31,23,.75);
max-width: 620px;
margin: 0 auto 3.4rem;
}
.ab-countries-row {
list-style: none;
padding: 2.2rem 0 0;
margin: 0;
border-top: 1px solid rgba(42,56,34,.18);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
}
.ab-countries-row li {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
padding: 1.4rem .8rem;
border-right: 1px solid rgba(42,56,34,.14);
transition: background .4s ease;
}
.ab-countries-row li:last-child { border-right: none; }
.ab-countries-row li:hover { background: rgba(42,56,34,.05); }
.ab-country-year {
font: 400 clamp(1.15rem, 2vw, 1.5rem)/1 'Fraunces', serif;
font-variation-settings: 'opsz' 48, 'SOFT' 45;
color: #14180f;
letter-spacing: -.01em;
}
.ab-country-meta {
font: 500 .65rem/1 'Spectral', serif;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(42,56,34,.55);
}
/* ---------- MANIFESTO ---------- */
.ab-manifesto {
padding: clamp(5rem, 10vw, 10rem) clamp(1.2rem, 3vw, 2rem);
background: linear-gradient(180deg, #f6f4ee 0%, #efece3 100%);
text-align: center;
}
.ab-manifesto-inner {
max-width: 820px;
margin: 0 auto;
position: relative;
}
.ab-manifesto-mark {
display: block;
font: 400 6rem/0.5 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 65;
color: rgba(42,56,34,.25);
margin-bottom: 1rem;
letter-spacing: -.05em;
}
.ab-manifesto-text {
font: 400 clamp(1.5rem, 3vw, 2.3rem)/1.4 'Fraunces', serif;
font-variation-settings: 'opsz' 96, 'SOFT' 50;
letter-spacing: -.01em;
color: #14180f;
margin: 0 0 2.6rem;
}
.ab-manifesto-text em {
font-style: italic;
font-weight: 400;
color: #2a3822;
font-variation-settings: 'opsz' 96, 'SOFT' 80;
}
.ab-manifesto-closing {
font: 400 1.02rem/1.7 'Spectral', serif;
color: rgba(26,31,23,.75);
max-width: 560px;
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid rgba(42,56,34,.18);
}
.ab-manifesto-closing em {
font-family: 'Fraunces', serif;
font-variation-settings: 'opsz' 48, 'SOFT' 65;
font-style: italic;
font-size: 1.1em;
color: #2a3822;
}
/* ---------- SIGNATURE ---------- */
.ab-signature {
padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 3vw, 2rem);
background: #efece3;
text-align: center;
border-top: 1px solid rgba(42,56,34,.12);
}
.ab-signature-inner {
max-width: 620px;
margin: 0 auto;
}
.ab-signature-mark {
display: block;
font-size: 1.8rem;
color: rgba(42,56,34,.4);
margin-bottom: 1.4rem;
letter-spacing: .3em;
}
.ab-signature-title {
font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.2 'Fraunces', serif;
font-variation-settings: 'opsz' 96, 'SOFT' 40;
color: #14180f;
margin: 0 0 1.4rem;
letter-spacing: -.015em;
}
.ab-signature-title em {
font-style: italic;
font-weight: 400;
color: #2a3822;
font-variation-settings: 'opsz' 96, 'SOFT' 75;
}
.ab-signature-text {
font: 400 1rem/1.7 'Spectral', serif;
color: rgba(26,31,23,.75);
margin: 0 0 2rem;
}
.ab-signature-sign {
display: inline-block;
font: 400 .9rem/1 'Fraunces', serif;
font-variation-settings: 'opsz' 24, 'SOFT' 65;
font-style: italic;
color: rgba(42,56,34,.7);
letter-spacing: .04em;
padding-top: 1.4rem;
border-top: 1px solid rgba(42,56,34,.2);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
.ab-countries-row { grid-template-columns: repeat(3, 1fr); }
.ab-countries-row li:nth-child(3n) { border-right: none; }
.ab-countries-row li { border-bottom: 1px solid rgba(42,56,34,.12); }
.ab-countries-row li:nth-last-child(-n+3) { border-bottom: none; }
}
@media (max-width: 560px) {
.ab-countries-row { grid-template-columns: 1fr 1fr; }
.ab-countries-row li:nth-child(3n) { border-right: 1px solid rgba(42,56,34,.14); }
.ab-countries-row li:nth-child(2n) { border-right: none; }
.ab-countries-row li { border-bottom: 1px solid rgba(42,56,34,.12); }
.ab-countries-row li:nth-last-child(-n+2) { border-bottom: none; }
.ab-dropcap { font-size: 3.5rem; }
.ab-pullquote p { font-size: 1.1rem; }
}
/* ================================================================
FIN DROP 25 v2
================================================================ */
/* ================================================================
DROP 26 · PAGE À PROPOS — VARIANTES ÉDITORIALES
Même ADN que l'index (palette, typo, easing) mais 4 variantes
propres à /apropos pour affirmer un caractère distinct :
1. Hero centré avec monogramme EST. 1991
2. Stats en ruban éditorial horizontal
3. Year break XXL typographique
4. Piliers en 2×2 avec chiffres romains oversized
================================================================ */
/* ===============================================================
VARIANTE 1 · HERO ÉDITORIAL CENTRÉ (body.page-about .hero--about)
=============================================================== */
body.page-about .hero--about { position: relative; }
body.page-about .hero--about .ab-hero-content {
position: relative;
z-index: 3;
max-width: 960px;
margin: 0 auto;
padding: 0 clamp(1.4rem, 4vw, 2.6rem);
text-align: center;
color: #f6f4ee;
}
/* Monogramme "Est. 1991" */
.ab-hero-crest {
display: inline-flex;
align-items: center;
gap: 1.2rem;
margin: 0 auto 1.8rem;
opacity: 0;
transform: translateY(12px);
animation: ab-fade-up .9s .2s cubic-bezier(.22,1,.36,1) forwards;
}
.ab-hero-crest-line {
width: 48px;
height: 1px;
background: rgba(246,244,238,.5);
}
.ab-hero-crest-text {
font: 500 .78rem/1 'Fraunces', serif;
font-variation-settings: 'opsz' 24, 'SOFT' 45;
font-style: italic;
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(246,244,238,.85);
}
.ab-hero-crest-text em {
font-style: italic;
font-weight: 500;
color: #f6f4ee;
font-size: 1.05em;
letter-spacing: .12em;
}
.ab-hero-tag {
display: inline-block;
font: 500 .72rem/1 'Spectral', serif;
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(246,244,238,.7);
padding: .5rem 1rem;
border: 1px solid rgba(246,244,238,.25);
border-radius: 2px;
margin-bottom: 2.2rem;
opacity: 0;
transform: translateY(12px);
animation: ab-fade-up .9s .35s cubic-bezier(.22,1,.36,1) forwards;
}
.ab-hero-title {
font: 400 clamp(2.8rem, 7vw, 6rem)/1.02 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 28;
letter-spacing: -.025em;
color: #f6f4ee;
margin: 0 0 2.2rem;
opacity: 0;
transform: translateY(14px);
animation: ab-fade-up 1s .5s cubic-bezier(.22,1,.36,1) forwards;
}
.ab-hero-title em {
font-style: italic;
font-weight: 400;
color: #d9dcc7;
font-variation-settings: 'opsz' 144, 'SOFT' 78;
}
.ab-hero-sub {
max-width: 640px;
margin: 0 auto 2rem;
font: 400 clamp(1rem, 1.5vw, 1.15rem)/1.75 'Spectral', serif;
color: rgba(246,244,238,.82);
opacity: 0;
transform: translateY(12px);
animation: ab-fade-up .9s .7s cubic-bezier(.22,1,.36,1) forwards;
}
/* Signature éditoriale "— La famille Sula" */
.ab-hero-sign {
display: inline-flex;
align-items: center;
gap: 1rem;
margin: 0 auto 2.4rem;
opacity: 0;
transform: translateY(10px);
animation: ab-fade-up .9s .85s cubic-bezier(.22,1,.36,1) forwards;
}
.ab-hero-sign-line {
width: 40px;
height: 1px;
background: rgba(246,244,238,.4);
}
.ab-hero-sign-text {
font: 400 .95rem/1 'Fraunces', serif;
font-variation-settings: 'opsz' 24, 'SOFT' 75;
font-style: italic;
color: rgba(246,244,238,.85);
letter-spacing: .02em;
}
.ab-hero-cta {
display: inline-flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
transform: translateY(10px);
animation: ab-fade-up .9s 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ab-fade-up {
to { opacity: 1; transform: translateY(0); }
}
/* Masquer les éléments hero d'origine (hero-content/hero-tag) sur about */
body.page-about .hero--about > .hero-content { display: none; }
/* ===============================================================
VARIANTE 2 · STATS RIBBON éditorial horizontal
=============================================================== */
.ab-stats-ribbon {
background: #f6f4ee;
padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3vw, 2rem);
border-bottom: 1px solid rgba(42,56,34,.1);
}
.ab-stats-ribbon-inner {
list-style: none;
padding: 0;
margin: 0;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.ab-stats-ribbon-inner li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 1.2rem 1rem;
text-align: center;
border-right: 1px solid rgba(42,56,34,.14);
position: relative;
}
.ab-stats-ribbon-inner li:last-child { border-right: none; }
.ab-stats-n {
font: 400 clamp(1.9rem, 3.4vw, 2.6rem)/1 'Fraunces', serif;
font-variation-settings: 'opsz' 72, 'SOFT' 40;
color: #1a1f17;
letter-spacing: -.02em;
}
.ab-stats-l {
font: 500 .7rem/1.3 'Spectral', serif;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(42,56,34,.62);
}
/* ===============================================================
VARIANTE 3 · YEAR BREAK typographique XXL
=============================================================== */
.ab-year-break {
background: #efece3;
padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 3vw, 2rem);
display: flex;
align-items: baseline;
justify-content: center;
gap: clamp(.8rem, 2vw, 2rem);
flex-wrap: wrap;
color: #14180f;
border-top: 1px solid rgba(42,56,34,.1);
border-bottom: 1px solid rgba(42,56,34,.1);
position: relative;
overflow: hidden;
}
.ab-year-break::before,
.ab-year-break::after {
content: "";
position: absolute;
top: 50%;
width: clamp(2rem, 8vw, 6rem);
height: 1px;
background: rgba(42,56,34,.25);
}
.ab-year-break::before { left: 0; }
.ab-year-break::after { right: 0; }
.ab-year-break-label {
font: 500 .72rem/1 'Spectral', serif;
letter-spacing: .32em;
text-transform: uppercase;
color: rgba(42,56,34,.55);
padding-bottom: .6rem;
}
.ab-year-break-year {
font: 400 clamp(3.4rem, 10vw, 8rem)/1 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 35;
font-style: italic;
color: #2a3822;
letter-spacing: -.03em;
}
.ab-year-break-dash {
font: 400 clamp(2.4rem, 7vw, 5rem)/1 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 70;
color: rgba(42,56,34,.45);
padding-bottom: .4rem;
}
/* Story --closing : pas de top border doublé */
.ab-story--closing { padding-top: clamp(4rem, 8vw, 7rem); }
.ab-story--closing::before { display: none; }
/* ===============================================================
VARIANTE 4 · PILIERS 2×2 avec chiffres romains XXL
=============================================================== */
.process-sec--about .process-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
background: rgba(42,56,34,.12);
border: 1px solid rgba(42,56,34,.12);
}
.process-sec--about .process-step {
background: #f6f4ee;
padding: clamp(2rem, 4vw, 3.4rem) clamp(1.8rem, 3.5vw, 3rem) !important;
position: relative;
transition: background .4s ease;
min-height: 300px;
}
.process-sec--about .process-step:hover { background: #efece3; }
/* Chiffre romain oversize en arrière-plan */
.process-sec--about .process-step::before {
content: attr(data-roman);
position: absolute;
top: clamp(1rem, 2vw, 1.6rem);
right: clamp(1.2rem, 3vw, 2.4rem);
font: 400 clamp(5rem, 10vw, 8rem)/.85 'Fraunces', serif;
font-variation-settings: 'opsz' 144, 'SOFT' 45;
font-style: italic;
color: rgba(42,56,34,.08);
letter-spacing: -.04em;
pointer-events: none;
z-index: 0;
transition: color .4s ease;
}
.process-sec--about .process-step:hover::before { color: rgba(42,56,34,.15); }
.process-sec--about .process-step > * { position: relative; z-index: 1; }
.process-sec--about .process-step-nr {
margin-bottom: 1.4rem !important;
}
/* Responsive 2×2 → 1 col sur mobile */
@media (max-width: 720px) {
.process-sec--about .process-grid {
grid-template-columns: 1fr !important;
}
.process-sec--about .process-step { min-height: unset; }
}
/* ===============================================================
STATS RIBBON responsive
=============================================================== */
@media (max-width: 720px) {
.ab-stats-ribbon-inner { grid-template-columns: 1fr 1fr; gap: 0; }
.ab-stats-ribbon-inner li:nth-child(2n) { border-right: none; }
.ab-stats-ribbon-inner li:nth-child(-n+2) { border-bottom: 1px solid rgba(42,56,34,.14); }
}
/* ===============================================================
HERO responsive
=============================================================== */
@media (max-width: 720px) {
.ab-hero-crest-line { width: 28px; }
.ab-hero-crest-text { font-size: .68rem; letter-spacing: .24em; }
.ab-hero-title { font-size: clamp(2.2rem, 10vw, 3.4rem); }
.ab-hero-sign { margin-bottom: 1.8rem; }
.ab-hero-cta { gap: .7rem; }
}
/* ===============================================================
YEAR BREAK responsive
=============================================================== */
@media (max-width: 640px) {
.ab-year-break { flex-direction: column; gap: .4rem; padding: 3.5rem 1rem; }
.ab-year-break-dash { display: none; }
.ab-year-break-label { letter-spacing: .28em; }
.ab-year-break::before, .ab-year-break::after { display: none; }
}
/* ===============================================================
STORY · figures éditoriales (chapitres I et III)
Aligné sur le langage visuel du site :
- pas de border-radius (cohérence hero/.intro-sec)
- pas d'ombre cardy (le site est éditorial-flat)
- filter saturate(.95) comme .intro-bg
- figcaption en style eyebrow (uppercase letter-spacing) façon
.intro-link / .eyebrow / .cats-eyebrow
=============================================================== */
.ab-story-fig {
margin: clamp(2rem, 4vw, 3.2rem) auto;
max-width: min(1080px, 100%);
width: 100%;
}
.ab-story-fig img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
filter: saturate(.95);
opacity: 0;
transition: opacity var(--dur-md) var(--ease-out);
}
.ab-story-fig img.is-loaded,
.ab-story-fig img[data-loaded="true"] { opacity: 1; }
.ab-story-fig figcaption {
display: inline-flex;
align-items: center;
gap: .8rem;
margin-top: 1.1rem;
font-family: var(--fb);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: var(--olive);
}
.ab-story-fig figcaption::before {
content: "";
flex-shrink: 0;
width: 28px;
height: 1px;
background: var(--sage);
opacity: .85;
}
.ab-story-fig figcaption em {
font-style: normal;
color: var(--sage-d);
font-weight: 600;
}
@media (min-width: 980px) {
.ab-story-fig--wide {
width: min(calc(100% + clamp(4rem, 12vw, 11rem)), 100vw);
max-width: 100vw;
margin-left: calc(clamp(2rem, 6vw, 5.5rem) * -1);
margin-right: calc(clamp(2rem, 6vw, 5.5rem) * -1);
}
}
@media (max-width: 640px) {
.ab-story-fig img { aspect-ratio: 4 / 3; }
.ab-story-fig figcaption {
display: flex;
flex-wrap: wrap;
letter-spacing: .22em;
gap: .55rem .8rem;
font-size: .62rem;
}
.ab-story-fig figcaption::before { width: 18px; }
}
/* ===============================================================
STORY BREAK · bande photo full-width entre chapitres II et III
Reprend le pattern complet de .intro-sec :
- filter brightness(.78) saturate(.95) sur la photo
- intro-fade horizontal sombre→transparent
- ::before / ::after pour le raccord avec les sections crème
adjacentes (.ab-story #f6f4ee → .ab-year-break #efece3)
- caption en bas-droite, style .intro-caption (uppercase, sage)
=============================================================== */
.ab-story-break {
position: relative;
width: 100%;
min-height: clamp(280px, 42vw, 520px);
overflow: hidden;
background: var(--ink);
isolation: isolate;
display: flex;
align-items: center;
}
.ab-story-break-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
filter: brightness(.78) saturate(.95);
transform: scale(1.03);
opacity: 0;
transition:
transform var(--dur-xl) var(--ease-out-soft),
opacity var(--dur-md) var(--ease-out);
}
.ab-story-break-img.is-loaded,
.ab-story-break-img[data-loaded="true"] { opacity: 1; }
.ab-story-break.on .ab-story-break-img { transform: scale(1); }
/* fondu horizontal + dégradé bas-droite pour assurer le contraste de la caption
quelle que soit la zone claire de la photo (ciel, eau, neige) */
.ab-story-break-fade {
position: absolute;
inset: 0;
background:
linear-gradient(
to right,
rgba(26,31,23,.55) 0%,
rgba(26,31,23,.18) 45%,
rgba(26,31,23,0) 100%
),
radial-gradient(
ellipse at 88% 88%,
rgba(20,24,15,.55) 0%,
rgba(20,24,15,0) 55%
);
pointer-events: none;
}
/* raccord top/bottom avec les sections crème adjacentes */
.ab-story-break::before,
.ab-story-break::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 90px;
z-index: 3;
pointer-events: none;
}
.ab-story-break::before {
top: 0;
background: linear-gradient(to bottom, #f6f4ee 0%, transparent 100%);
}
.ab-story-break::after {
bottom: 0;
background: linear-gradient(to top, #efece3 0%, transparent 100%);
}
/* caption bas-droite, mêmes tokens typo que .intro-caption */
.ab-story-break-caption {
position: absolute;
right: clamp(1.4rem, 3vw, 2.4rem);
bottom: clamp(1.4rem, 3vw, 2.4rem);
z-index: 4;
max-width: min(560px, 65%);
font-family: var(--fb);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: rgba(245,243,239,.92);
text-align: right;
line-height: 1.7;
text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.ab-story-break-caption em {
font-style: normal;
color: var(--sage-l);
font-weight: 600;
letter-spacing: .26em;
}
@media (max-width: 768px) {
.ab-story-break { min-height: 320px; }
.ab-story-break-img { filter: brightness(.7) saturate(.9); }
.ab-story-break-fade {
background: linear-gradient(
to bottom,
rgba(26,31,23,.25) 0%,
rgba(26,31,23,.55) 60%,
rgba(26,31,23,.85) 100%
);
}
.ab-story-break::before,
.ab-story-break::after { height: 60px; }
.ab-story-break-caption {
right: 1.2rem;
bottom: 1rem;
max-width: 80%;
font-size: .62rem;
letter-spacing: .18em;
}
}
/* ================================================================
FIN DROP 26
================================================================ */
/* ════════════════════════════════════════════════════════════════
EMIL PASS · Foundation Motion + Brand Identity
Bloc final qui consolide : sticky-tap fix sur touch, eyebrow class
réutilisable, focus ring unifié.
════════════════════════════════════════════════════════════════ */
/* ─── Sticky-tap fix : annule les hovers transformatifs sur touch ───
Sur iPad/iPhone, :hover se déclenche au tap et reste collé jusqu'au
prochain tap ailleurs. Sur les éléments avec scale/translate au hover,
ça crée un état "stuck" disgracieux. On reset uniquement les transforms,
les couleurs/opacités peuvent rester (visibles brièvement, pas de stuck). */
@media (hover: none) and (pointer: coarse) {
.btn:hover,
.btn-sage:hover, .btn-ghost:hover, .btn-outline:hover,
.btn-ink:hover, .btn-outline-ink:hover, .btn-primary:hover,
.nav-cta:hover, .cta-btn:hover, .plant-modal-cta-btn:hover,
.shortlist-bar-cta:hover,
.specialty-card:hover, .cat-card:hover, .process-step:hover,
.contact-block:hover, .footer-cert-badge:hover {
transform: none !important;
}
}
/* ─── Eyebrow class réutilisable (brand identity) ───
À utiliser pour toutes nouvelles légendes / sur-titres pour rester
dans le langage. Les composants existants gardent leurs styles ad-hoc
pour ne pas casser, mais consomment les mêmes tokens. */
.eyebrow-fmt {
font-family: var(--fb);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
}
.eyebrow-fmt--with-bar {
display: inline-flex;
align-items: center;
gap: .8rem;
}
.eyebrow-fmt--with-bar::before {
content: "";
flex-shrink: 0;
width: 28px;
height: 1px;
background: var(--sage);
opacity: .85;
}
/* ─── prefers-reduced-motion (Emil-grade) ───
Garde les fade (aident la compréhension), supprime les mouvements.
Existait déjà partiellement, on consolide ici. */
@media (prefers-reduced-motion: reduce) {
.ab-story-break-img,
.ab-story-fig img {
transform: none !important;
}
.ab-story-break.on .ab-story-break-img { transform: none !important; }
}
/* ─────────────────────────────────────────────
AB-TERROIRS · Carte interactive d'Albanie
───────────────────────────────────────────── */
.ab-terroirs {
padding: 7rem 2rem 4rem;
background: var(--bg);
position: relative;
}
.ab-terroirs-inner {
max-width: 1380px;
margin: 0 auto;
}
.ab-terroirs-head {
max-width: 760px;
margin: 0 auto 4.5rem;
text-align: center;
}
.ab-terroirs-head .eyebrow {
display: inline-flex;
align-items: center;
gap: .8rem;
font-family: var(--fb);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: var(--sage-d);
margin-bottom: 1.4rem;
}
.ab-terroirs-head .eyebrow::before,
.ab-terroirs-head .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--sage);
}
.ab-terroirs-title {
font-family: var(--fd);
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
line-height: 1.05;
font-weight: 400;
color: var(--ink);
margin-bottom: 1.4rem;
}
.ab-terroirs-title em {
font-style: italic;
color: var(--sage-d);
}
.ab-terroirs-lead {
font-family: var(--fb);
color: var(--char);
opacity: .82;
font-size: 1.05rem;
line-height: 1.65;
max-width: 60ch;
margin: 0 auto;
}
.ab-terroirs-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 4.5rem;
align-items: center;
}
/* ─── Liste régions ─── */
.ab-terroirs-list {
list-style: none;
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.ab-terroir {
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 1.4rem;
align-items: center;
padding: 1.15rem 0 1.15rem 0;
border-bottom: 1px dashed rgba(107, 114, 97, .3);
cursor: pointer;
position: relative;
transition: padding-left var(--dur-md) var(--ease-out), background var(--dur-sm);
}
.ab-terroir::before {
content: "";
position: absolute;
left: -1.2rem;
top: 50%;
width: 0;
height: 1px;
background: var(--sage);
transition: width var(--dur-md) var(--ease-out);
}
.ab-terroir:hover,
.ab-terroir[data-active] {
padding-left: 1.2rem;
}
.ab-terroir:hover::before,
.ab-terroir[data-active]::before {
width: 1rem;
}
.ab-terroir-num {
font-family: var(--fd);
font-style: italic;
font-size: 1.6rem;
color: var(--sage-d);
transition: color var(--dur-sm);
}
.ab-terroir:hover .ab-terroir-num,
.ab-terroir[data-active] .ab-terroir-num {
color: var(--sage);
}
.ab-terroir-name {
font-family: var(--fd);
font-size: 1.45rem;
font-weight: 400;
color: var(--ink);
margin-bottom: .15rem;
transition: color var(--dur-sm);
}
.ab-terroir-meta {
display: block;
font-family: var(--fb);
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: .35rem;
}
.ab-terroir-meta em {
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-size: .82rem;
color: var(--char);
font-weight: 500;
}
.ab-terroir-tags {
font-family: var(--fb);
font-size: .92rem;
color: var(--char);
opacity: .75;
max-height: 0;
overflow: hidden;
margin-top: 0;
transition: max-height var(--dur-md) var(--ease-out), margin-top var(--dur-md);
}
.ab-terroir:hover .ab-terroir-tags,
.ab-terroir[data-active] .ab-terroir-tags {
max-height: 80px;
margin-top: .15rem;
}
.ab-terroir-alt {
font-family: var(--fb);
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--stone);
align-self: start;
padding-top: .55rem;
}
/* ─── Carte SVG ─── */
.ab-terroirs-map-wrap {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.ab-terroirs-map {
position: relative;
aspect-ratio: 5/6;
width: 100%;
max-width: 460px;
background: var(--bg2);
border: 1px solid var(--border);
padding: 22px;
}
.ab-terroirs-map svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.ab-terroirs-compass {
position: absolute;
top: 36px;
right: 36px;
width: 36px;
height: 36px;
display: grid;
place-items: center;
font-family: var(--fd);
font-style: italic;
font-size: 1.05rem;
color: var(--sage-d);
pointer-events: none;
}
.ab-terroirs-note {
font-family: var(--fb);
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--stone);
opacity: .7;
text-align: center;
}
.ab-map-pin { cursor: pointer; }
.ab-map-pin .ab-map-halo {
fill: var(--sage);
opacity: 0;
transform-origin: center;
transform-box: fill-box;
transition: opacity var(--dur-sm), transform var(--dur-md) var(--ease-out);
}
.ab-map-pin .ab-map-dot {
fill: var(--sage-d);
stroke: var(--ink);
stroke-width: 1.4;
transform-origin: center;
transform-box: fill-box;
transition: fill var(--dur-sm), transform var(--dur-md) var(--ease-out);
}
.ab-map-pin text {
font-family: var(--fd);
font-style: italic;
font-size: 13px;
fill: var(--ink);
pointer-events: none;
transition: fill var(--dur-sm);
}
.ab-map-pin:hover .ab-map-halo,
.ab-map-pin.is-active .ab-map-halo {
opacity: .22;
transform: scale(1.4);
}
.ab-map-pin:hover .ab-map-dot,
.ab-map-pin.is-active .ab-map-dot {
fill: var(--sage);
transform: scale(1.18);
}
.ab-map-pin:hover text,
.ab-map-pin.is-active text {
fill: var(--sage-d);
font-weight: 600;
}
@media (max-width: 1024px) {
.ab-terroirs-grid { grid-template-columns: 1fr; gap: 3rem; }
.ab-terroirs-map-wrap { order: -1; }
.ab-terroirs-map { max-width: 380px; }
}
@media (max-width: 600px) {
.ab-terroirs { padding: 4.5rem 1.2rem 3rem; }
.ab-terroirs-head { margin-bottom: 3rem; }
.ab-terroir { grid-template-columns: 38px 1fr; }
.ab-terroir-alt { display: none; }
}
/* ─────────────────────────────────────────────
AB-SAISONS · Calendrier de récolte
───────────────────────────────────────────── */
.ab-saisons {
padding: 5rem 2rem 8rem;
background: var(--bg);
position: relative;
}
.ab-saisons-inner {
max-width: 1320px;
margin: 0 auto;
}
.ab-saisons-head {
max-width: 720px;
margin: 0 auto 4rem;
text-align: center;
}
.ab-saisons-head .eyebrow {
display: inline-flex;
align-items: center;
gap: .8rem;
font-family: var(--fb);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: var(--sage-d);
margin-bottom: 1.2rem;
}
.ab-saisons-head .eyebrow::before,
.ab-saisons-head .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--sage);
}
.ab-saisons-title {
font-family: var(--fd);
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
line-height: 1.05;
font-weight: 400;
color: var(--ink);
margin-bottom: 1.2rem;
}
.ab-saisons-title em {
font-style: italic;
color: var(--sage-d);
}
.ab-saisons-lead {
font-family: var(--fb);
color: var(--char);
opacity: .82;
font-size: 1.02rem;
line-height: 1.65;
max-width: 56ch;
margin: 0 auto;
}
.ab-saisons-table {
background: var(--white);
border: 1px solid var(--border);
padding: 1.8rem 1.6rem;
}
.ab-saisons-header {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.4rem;
align-items: end;
padding-bottom: .9rem;
border-bottom: 1px solid var(--border);
margin-bottom: .6rem;
}
.ab-saisons-header-label {
font-family: var(--fb);
font-size: var(--eyebrow-size);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: var(--stone);
}
.ab-saisons-header-months {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.ab-saisons-header-months span {
font-family: var(--fb);
font-size: .65rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--stone);
text-align: center;
padding: .35rem .15rem;
cursor: pointer;
transition: color var(--dur-sm), background var(--dur-sm);
border-radius: 2px;
}
.ab-saisons-header-months span:hover,
.ab-saisons-header-months span.is-hover {
color: var(--sage-d);
background: rgba(138, 155, 117, .1);
}
.ab-saisons-rows {
list-style: none;
}
.ab-saisons-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.4rem;
align-items: center;
padding: .85rem 0;
border-bottom: 1px dashed rgba(107, 114, 97, .22);
position: relative;
transition: background var(--dur-sm);
}
.ab-saisons-row:last-child { border-bottom: 0; }
.ab-saisons-row:hover {
background: rgba(138, 155, 117, .05);
}
.ab-saisons-row-name {
display: flex;
flex-direction: column;
gap: .15rem;
padding-left: .25rem;
}
.ab-saisons-row-name strong {
font-family: var(--fd);
font-size: 1.15rem;
font-weight: 400;
color: var(--ink);
letter-spacing: -.005em;
}
.ab-saisons-row-name em {
font-family: var(--fb);
font-style: italic;
font-size: .78rem;
color: var(--stone);
}
.ab-saisons-bar {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.ab-saisons-bar span {
height: 22px;
background: rgba(107, 114, 97, .07);
border-radius: 2px;
position: relative;
transition: background var(--dur-sm), transform var(--dur-sm);
}
.ab-saisons-bar span.on {
background: var(--sage-l);
}
.ab-saisons-bar span.on.peak {
background: var(--sage);
}
.ab-saisons-bar span.on.peak::after {
content: "";
position: absolute;
inset: 4px 6px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.18));
border-radius: 1px;
}
/* col-hover et row-hover : états posés en JS */
.ab-saisons-bar span.is-col {
outline: 1.5px solid var(--sage-d);
outline-offset: -1px;
}
.ab-saisons-bar span.is-col.on { background: var(--sage-d); }
.ab-saisons-bar span.is-dim { opacity: .35; }
/* row-hover : highlight une ligne */
.ab-saisons-row.is-hover .ab-saisons-bar span.on {
transform: scaleY(1.15);
}
.ab-saisons-legend {
display: flex;
gap: 1.6rem;
align-items: center;
flex-wrap: wrap;
margin-top: 1.6rem;
padding-top: 1.2rem;
border-top: 1px solid var(--border);
font-family: var(--fb);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--stone);
}
.ab-leg-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 2px;
vertical-align: middle;
margin-right: .45rem;
transform: translateY(-1px);
}
.ab-leg-swatch--peak { background: var(--sage); }
.ab-leg-swatch--on { background: var(--sage-l); }
.ab-saisons-legend-cta {
margin-left: auto;
text-transform: none;
letter-spacing: 0;
font-size: .82rem;
color: var(--char);
}
.ab-saisons-legend-cta a {
color: var(--sage-d);
border-bottom: 1px solid currentColor;
transition: color var(--dur-sm);
}
.ab-saisons-legend-cta a:hover { color: var(--sage); }
@media (max-width: 900px) {
.ab-saisons { padding: 4rem 1rem 6rem; }
.ab-saisons-table { padding: 1.2rem .9rem; }
.ab-saisons-header,
.ab-saisons-row {
grid-template-columns: 1fr;
gap: .5rem;
}
.ab-saisons-header-label { display: none; }
.ab-saisons-row-name { padding: 0; }
.ab-saisons-row-name strong { font-size: 1.05rem; }
.ab-saisons-row { padding: 1rem 0; }
.ab-saisons-legend { font-size: .65rem; gap: 1rem; }
.ab-saisons-legend-cta { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
.ab-saisons-bar span { height: 16px; }
.ab-saisons-header-months span { font-size: .55rem; padding: .25rem .05rem; }
}
/* ─────────────────────────────────────────────
AB-SCROLLSPY · nav latérale chapitres (apropos)
───────────────────────────────────────────── */
.ab-scrollspy {
position: fixed;
right: 1.6rem;
top: 50%;
transform: translateY(-50%);
z-index: 60;
pointer-events: auto;
}
.ab-scrollspy[hidden] { display: block; }
.ab-scrollspy ol {
list-style: none;
display: flex;
flex-direction: column;
gap: .55rem;
padding: .85rem .65rem;
background: rgba(245, 243, 239, .82);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid var(--border);
border-radius: 100px;
}
.ab-scrollspy a {
display: flex;
align-items: center;
gap: .65rem;
padding: .35rem 0;
cursor: pointer;
position: relative;
}
.ab-spy-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--warm);
transition: background var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
flex-shrink: 0;
}
.ab-spy-label {
font-family: var(--fb);
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--char);
opacity: 0;
transform: translateX(-6px);
pointer-events: none;
transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
white-space: nowrap;
width: 0;
overflow: hidden;
}
.ab-scrollspy:hover .ab-spy-label {
opacity: .85;
transform: none;
width: auto;
margin-right: .4rem;
}
.ab-scrollspy a:hover .ab-spy-dot {
background: var(--sage-d);
transform: scale(1.25);
}
.ab-scrollspy a.is-current .ab-spy-dot {
background: var(--sage-d);
transform: scale(1.4);
box-shadow: 0 0 0 4px rgba(138, 155, 117, .25);
}
.ab-scrollspy a.is-current .ab-spy-label {
color: var(--sage-d);
font-weight: 600;
}
@media (max-width: 1024px) {
.ab-scrollspy { display: none; }
}
/* ─── Plant card : badge "en saison" ─── */
.catalog-item-season {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .55rem .3rem .45rem;
background: var(--sage-d);
color: var(--white);
font-family: var(--fb);
font-size: .55rem;
letter-spacing: .22em;
text-transform: uppercase;
border-radius: 999px;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
pointer-events: none;
}
.catalog-item.is-in-season .catalog-item-season {
opacity: 1;
transform: none;
}
.catalog-item-season::before {
content: "";
width: 6px;
height: 6px;
background: var(--sage-l);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 3px rgba(181, 196, 160, .25);
animation: seasonPulse 2.4s ease-in-out infinite;
}
@keyframes seasonPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
.catalog-item-season::before { animation: none; }
}
/* ─────────────────────────────────────────────
HOMEPAGE PREMIUM · Touches balkanes subtiles
───────────────────────────────────────────── */
/* ── Hero crest : Est. MCMXCI ── */
.hero-crest {
display: inline-flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.4rem;
color: rgba(245, 243, 239, .55);
opacity: 0;
animation: heroCrestIn 1s var(--ease-out-soft) .25s forwards;
}
.hero-crest-line {
width: 38px;
height: 1px;
background: currentColor;
opacity: .5;
}
.hero-crest-mark {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: var(--fb);
font-size: .68rem;
font-weight: 500;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--sage-l);
}
.hero-crest-mark em {
font-style: italic;
font-family: var(--fd);
font-weight: 400;
font-size: .82rem;
letter-spacing: .04em;
color: var(--sage-l);
text-transform: none;
font-feature-settings: "smcp", "onum";
}
.hero-crest-star {
width: 11px;
height: 11px;
fill: var(--sage-l);
opacity: .9;
flex-shrink: 0;
animation: heroCrestSpin 18s linear infinite;
}
@keyframes heroCrestIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@keyframes heroCrestSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-crest, .hero-crest-star { animation: none; opacity: 1; }
}
/* ── Scroll-hint refined ── */
.scroll-hint--refined {
display: flex;
flex-direction: column;
align-items: center;
gap: .8rem;
}
.scroll-hint--refined .sh-svg {
display: block;
width: 8px;
height: 56px;
color: rgba(245, 243, 239, .35);
}
.scroll-hint--refined .sh-svg svg {
width: 100%;
height: 100%;
display: block;
}
.scroll-hint--refined .sh-dot {
animation: shDotMove 2.4s ease-in-out infinite;
}
@keyframes shDotMove {
0% { transform: translateY(0); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(48px); opacity: 0; }
}
.sh-txt--ital {
font-family: var(--fd);
font-style: italic;
font-size: .82rem;
letter-spacing: .04em;
color: rgba(245, 243, 239, .58);
text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
.scroll-hint--refined .sh-dot { animation: none; opacity: .6; }
}
/* ── Cat-card : cross-stitch hover ornament ── */
/* Cross-stitch corner ornament — révélé seulement au hover */
.cat-card::before {
content: "";
position: absolute;
top: 18px;
left: 18px;
width: 18px;
height: 18px;
z-index: 4;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transform: translate(4px, 4px) scale(.6);
transform-origin: top left;
transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-lg) var(--ease-out-soft);
}
.cat-card::after {
content: "";
position: absolute;
bottom: 18px;
right: 18px;
width: 18px;
height: 18px;
z-index: 4;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transform: translate(-4px, -4px) scale(.6);
transform-origin: bottom right;
transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-lg) var(--ease-out-soft);
transition-delay: 60ms;
}
.cat-card:hover::before,
.cat-card:hover::after,
.cat-card:focus-visible::before,
.cat-card:focus-visible::after {
opacity: .75;
transform: none;
}
/* ── Pull-quote éditoriale ── */
.hm-quote {
position: relative;
padding: 7rem 2rem;
background: var(--bg);
text-align: center;
z-index: 2;
}
.hm-quote::before, .hm-quote::after {
content: "";
position: absolute;
left: 50%;
width: 1px;
height: 36px;
background: var(--sage);
opacity: .35;
transform: translateX(-50%);
}
.hm-quote::before { top: 2.4rem; }
.hm-quote::after { bottom: 2.4rem; }
.hm-quote-inner {
max-width: 920px;
margin: 0 auto;
position: relative;
}
.hm-quote-eyebrow {
display: inline-block;
font-family: var(--fb);
font-size: var(--eyebrow-size);
letter-spacing: var(--eyebrow-track);
text-transform: uppercase;
color: var(--sage-d);
margin-bottom: 2.2rem;
opacity: .85;
}
.hm-quote-orn {
display: block;
width: 64px;
height: 14px;
margin: 0 auto 2.4rem;
color: var(--sage-d);
}
.hm-quote-text {
font-family: var(--fd);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.32;
font-style: italic;
color: var(--ink);
font-weight: 400;
letter-spacing: -.005em;
margin-bottom: 2.6rem;
position: relative;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.hm-quote-text em {
color: var(--sage-d);
font-style: italic;
}
.hm-q-mark {
font-family: var(--fd);
font-style: italic;
font-size: 1.6em;
color: var(--sage);
opacity: .55;
vertical-align: -0.15em;
margin: 0 .12em 0 -.12em;
line-height: 0;
display: inline-block;
}
.hm-q-mark--end { margin: 0 -.12em 0 .12em; }
.hm-quote-attrib {
display: inline-flex;
align-items: center;
gap: 1rem;
color: var(--stone);
}
.hm-quote-attrib-line {
width: 38px;
height: 1px;
background: currentColor;
opacity: .45;
}
.hm-quote-attrib-text {
font-family: var(--fb);
font-size: .72rem;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 500;
}
.hm-quote-attrib-text em {
font-style: normal;
color: var(--sage-d);
margin: 0 .35em;
font-size: 1.2em;
vertical-align: -0.05em;
}
@media (max-width: 768px) {
.hm-quote { padding: 4.5rem 1.4rem; }
.hm-quote-text { font-size: clamp(1.3rem, 5vw, 1.7rem); }
.hm-quote::before, .hm-quote::after { height: 24px; }
}
/* ═══════════════════════════════════════════════════════════════════
▉ PREMIUM PASS · Cat-cards & ambient details
═══════════════════════════════════════════════════════════════════ */
/* ─── Cat-grid : respire un peu plus ─── */
.cat-grid {
gap: clamp(.6rem, 1.4vw, 1.4rem);
}
/* ─── Cat-card : surface précieuse ─── */
.cat-card {
/* perspective pour le 3D-tilt JS */
transform-style: preserve-3d;
perspective: 900px;
/* hairline outline qui s'allume au hover */
outline: 1px solid transparent;
outline-offset: -1px;
isolation: isolate;
}
.cat-card::before {
/* spotlight radial qui suit la souris (--mx --my en %) */
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: radial-gradient(
420px circle at var(--mx, 50%) var(--my, 30%),
rgba(181, 196, 160, .12) 0%,
rgba(181, 196, 160, .04) 35%,
transparent 65%
);
opacity: 0;
transition: opacity .55s var(--ease-out);
mix-blend-mode: screen;
}
.cat-card:hover {
outline-color: rgba(181, 196, 160, .28);
}
.cat-card:hover::before {
opacity: 1;
}
/* Image avec parallax inverse */
.cat-photo {
/* --px --py mis à jour en JS pour parallax inverse */
transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0) scale(1.04);
transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), filter .9s;
will-change: transform, filter;
filter: saturate(.9) brightness(.88) contrast(1.04);
}
.cat-card:hover .cat-photo {
transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0) scale(1.09);
filter: saturate(1) brightness(.95) contrast(1.08);
}
/* Vignette + grain léger sur l'image */
.cat-photo::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 75% 60% at 50% 60%, transparent 30%, rgba(20, 25, 18, .35) 75%, rgba(20, 25, 18, .65) 100%);
pointer-events: none;
z-index: 1;
}
/* Overlay : dégradé plus profond + tint sage subtil au hover */
.cat-overlay {
background: linear-gradient(170deg, rgba(20, 25, 18, .15) 0%, rgba(20, 25, 18, .55) 55%, rgba(20, 25, 18, .92) 100%);
transition: background .9s var(--ease-out);
}
.cat-card:hover .cat-overlay {
background: linear-gradient(170deg, rgba(20, 25, 18, .12) 0%, rgba(20, 25, 18, .50) 55%, rgba(20, 25, 18, .94) 100%);
}
/* ─── Cat-nr : amplifier le badge existant au hover ─── */
.cat-card .cat-nr {
transition: color .4s var(--ease-out),
letter-spacing .55s var(--ease-out) !important;
}
.cat-card:hover .cat-nr {
letter-spacing: .34em !important;
color: var(--sage-l) !important;
}
/* ─── Cat-name : axes variables Fraunces premium ─── */
.cat-card[data-modal] .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 90, "wght" 410 !important;
letter-spacing: -.012em !important;
line-height: 1.04;
text-wrap: balance;
transition: font-variation-settings .8s var(--ease-out-soft), letter-spacing .6s var(--ease-out);
}
.cat-card[data-modal]:hover .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 430 !important;
letter-spacing: -.015em !important;
}
/* ─── Cat-sub : refined ─── */
.cat-card .cat-sub {
font-family: var(--fb);
font-feature-settings: "ss01" 1, "cv11" 1;
letter-spacing: .04em;
}
/* ─── Cat-cta : flèche qui s'étire élégamment ─── */
.cat-card .cat-cta {
font-family: var(--fb);
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--sage-l);
transition: gap .5s var(--ease-out), color .35s, letter-spacing .5s var(--ease-out);
}
.cat-card:hover .cat-cta {
gap: 1rem;
letter-spacing: .3em;
color: var(--white);
}
/* ─── Cat-specs : reveal stagger plus posé ─── */
.cat-specs {
display: grid;
gap: 0;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid rgba(245, 243, 239, .12);
opacity: 0;
transform: translateY(8px);
transition: opacity .5s var(--ease-out), transform .55s var(--ease-out);
transition-delay: 60ms;
}
.cat-card:hover .cat-specs {
opacity: 1;
transform: none;
transition-delay: 200ms;
}
.cat-spec {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .35rem 0;
border-bottom: 1px dotted rgba(245, 243, 239, .1);
}
.cat-spec:last-child { border-bottom: 0; }
.cat-spec-label {
font-family: var(--fb);
font-size: .58rem;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(245, 243, 239, .42);
}
.cat-spec-val {
font-family: var(--fd);
font-style: italic;
font-size: .85rem;
color: rgba(245, 243, 239, .82);
font-variation-settings: "opsz" 24, "SOFT" 50;
}
/* ─── Cat-discover (chevron) : refined ─── */
.cat-card .cat-discover {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(245, 243, 239, .35);
display: grid;
place-items: center;
font-size: .82rem;
color: rgba(245, 243, 239, .8);
transition: transform .55s var(--ease-out-soft), background .35s, border-color .35s, color .35s;
position: absolute;
bottom: 24px;
right: 24px;
z-index: 4;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.cat-card:hover .cat-discover {
background: var(--sage);
border-color: var(--sage);
color: var(--ink);
transform: rotate(45deg) scale(1.05);
}
/* ─── Hero h1 : axes Fraunces plus expressifs ─── */
.hero h1 {
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380;
letter-spacing: -.025em;
}
.hero h1 em {
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
/* ─── Section title axes (cohérence) ─── */
.cats-title,
.process-title,
.timeline-title,
.contacts-band-title,
.chapter-break-title,
.intro-title {
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 410;
}
/* ─── Grain noise ambiant site-wide (très discret) ─── */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: .025;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* ─── Scroll progress bar refined ─── */
.progress {
height: 2px;
background: linear-gradient(90deg, var(--sage-l) 0%, var(--sage) 70%, var(--sage-d) 100%);
box-shadow: 0 0 12px rgba(138, 155, 117, .35);
}
/* ─── Respect reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
.cat-photo,
.cat-card .cat-discover,
.cat-card .cat-name,
.cat-card .cat-nr,
.cat-card .cat-cta,
.cat-specs {
transition: none !important;
}
body::after { display: none; }
}
/* ─── Mobile : effets réduits, tilts off ─── */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
.cat-card { transform: none !important; }
.cat-photo { transform: scale(1.04) !important; }
.cat-card::before { display: none; }
.cat-specs { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════
▉ CAT-CARDS · Refonte éditoriale bento (v2)
═══════════════════════════════════════════════════════════════════ */
/* ─── Bento asymétrique 12-col Z-pattern (grand écran) ─── */
@media (min-width: 901px) {
.cat-grid {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
grid-template-rows: 480px 480px !important;
grid-auto-rows: 480px !important;
gap: 1.4rem !important;
padding: 0 !important;
}
/* Row 1 : Plantes WIDE (7 cols) + Châtaignes narrow (5 cols) */
.cat-grid > .cat-card:nth-child(1) { grid-column: span 7 !important; grid-row: 1 !important; }
.cat-grid > .cat-card:nth-child(2) { grid-column: span 5 !important; grid-row: 1 !important; }
/* Row 2 : Fruits narrow (5 cols) + Escargots WIDE (7 cols) — Z-pattern */
.cat-grid > .cat-card:nth-child(3) { grid-column: span 5 !important; grid-row: 2 !important; }
.cat-grid > .cat-card:nth-child(4) { grid-column: span 7 !important; grid-row: 2 !important; }
}
@media (min-width: 901px) {
.cat-grid > .cat-card {
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
width: 100% !important;
max-width: none !important;
align-self: stretch !important;
}
}
/* ─── Vignette plus douce, typo plus aérée ─── */
.cat-card[data-modal] .cat-overlay {
background: linear-gradient(
to top,
rgba(20, 25, 18, .92) 0%,
rgba(20, 25, 18, .68) 22%,
rgba(20, 25, 18, .25) 50%,
rgba(20, 25, 18, 0) 75%
) !important;
}
/* Tint léger sage au hover (atmosphère) */
.cat-card[data-modal]:hover .cat-overlay {
background: linear-gradient(
to top,
rgba(28, 36, 22, .94) 0%,
rgba(28, 36, 22, .68) 24%,
rgba(28, 36, 22, .22) 52%,
rgba(28, 36, 22, 0) 75%
) !important;
}
/* ─── Hairline frame élégant ─── */
.cat-card[data-modal] {
outline: 1px solid rgba(245, 243, 239, .08) !important;
outline-offset: -1px !important;
transition: outline-color .5s var(--ease-out) !important;
}
.cat-card[data-modal]:hover {
outline-color: rgba(181, 196, 160, .4) !important;
}
/* ─── Cat-content : padding plus généreux ─── */
.cat-card[data-modal] .cat-content {
padding: 2rem 2rem 1.8rem !important;
}
/* ─── Cat-bottom layout ─── */
.cat-card[data-modal] .cat-bottom {
display: flex;
flex-direction: column;
gap: .55rem;
}
/* ─── Cat-name : XL premium Fraunces ─── */
.cat-card[data-modal] .cat-name {
font-size: clamp(1.9rem, 2.4vw, 2.6rem) !important;
font-variation-settings: "opsz" 144, "SOFT" 90, "wght" 410 !important;
letter-spacing: -.018em !important;
line-height: .98 !important;
color: var(--white);
margin-bottom: .15rem;
}
.cat-card[data-modal="chataignes"] .cat-name { font-size: clamp(1.7rem, 2.1vw, 2.3rem) !important; }
.cat-card[data-modal="escargots"] .cat-name { font-size: clamp(1.7rem, 2.1vw, 2.3rem) !important; }
.cat-card[data-modal="fruits"] .cat-name { font-size: clamp(1.7rem, 2.1vw, 2.3rem) !important; }
.cat-card[data-modal]:hover .cat-name {
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 430 !important;
}
/* ─── Cat-latin : nom scientifique italique ─── */
.cat-latin {
font-family: var(--fd);
font-style: italic;
font-size: .95rem;
letter-spacing: .005em;
color: rgba(181, 196, 160, .82);
font-variation-settings: "opsz" 24, "SOFT" 50;
margin-bottom: .85rem;
line-height: 1.2;
opacity: .9;
transform: translateY(0);
transition: color .4s var(--ease-out), opacity .4s var(--ease-out);
}
.cat-card[data-modal]:hover .cat-latin {
color: var(--sage-l);
opacity: 1;
}
.cat-latin em {
font-style: italic;
}
/* ─── Cat-sep : trait sage sous le bloc nom/latin ─── */
.cat-card[data-modal] .cat-sep {
width: 38px !important;
height: 1px !important;
background: rgba(181, 196, 160, .55) !important;
margin: .35rem 0 .9rem !important;
transition: width .55s var(--ease-out), background-color .35s !important;
}
.cat-card[data-modal]:hover .cat-sep {
width: 70px !important;
background: var(--sage-l) !important;
}
/* ─── Cat-sub : info de scale supplémentaire ─── */
.cat-card[data-modal] .cat-sub {
font-family: var(--fb) !important;
font-size: .75rem !important;
letter-spacing: .12em !important;
color: rgba(245, 243, 239, .58) !important;
text-transform: none !important;
font-weight: 400 !important;
max-height: 30px !important;
margin-bottom: .6rem !important;
}
/* ─── Cat-cta : élégant, pas de bouton ─── */
.cat-card[data-modal] .cat-cta {
font-family: var(--fb) !important;
font-size: .68rem !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: var(--sage-l) !important;
display: inline-flex !important;
align-items: center !important;
gap: .55rem !important;
margin-top: .4rem !important;
padding-bottom: .25rem !important;
border-bottom: 1px solid transparent !important;
align-self: flex-start;
transition: gap .5s var(--ease-out), color .35s, border-color .4s !important;
}
.cat-card[data-modal]:hover .cat-cta {
gap: 1rem !important;
color: var(--white) !important;
border-bottom-color: var(--sage-l) !important;
}
/* ─── Cat-nr : tag minimal top-left (épuré, sans dot, sans pill) ─── */
.cat-card[data-modal] > .cat-nr {
position: absolute !important;
top: 1.6rem !important;
left: 1.8rem !important;
right: auto !important;
bottom: auto !important;
z-index: 5 !important;
display: inline-block !important;
font-family: var(--fm) !important;
font-size: .58rem !important;
font-weight: 500 !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
color: rgba(245, 243, 239, .72) !important;
font-style: normal !important;
font-variation-settings: normal !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
pointer-events: none !important;
order: initial !important;
}
.cat-card[data-modal] > .cat-nr::before,
.cat-card[data-modal] > .cat-nr::after { display: none !important; content: none !important; }
/* Hide cat-nr that's still inside cat-content (par défaut, avant déplacement JS) */
.cat-card[data-modal] .cat-content > .cat-nr {
display: none !important;
}
/* Hide cat-discover (le rond avec flèche) — on garde juste le cat-cta texte */
.cat-card[data-modal] .cat-discover {
display: none !important;
}
/* ─── Cat-specs : reveal en bas, en row, plus minimal ─── */
.cat-card[data-modal] .cat-specs {
display: flex !important;
flex-direction: row !important;
gap: 0 !important;
padding: 0 2rem !important;
margin: 0 !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 0 !important;
background: rgba(28, 36, 22, .85) !important;
backdrop-filter: blur(10px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
overflow: hidden !important;
border-top: 1px solid rgba(181, 196, 160, .2) !important;
opacity: 0 !important;
transform: none !important;
transition: height .55s var(--ease-out-soft), opacity .4s var(--ease-out) !important;
z-index: 6 !important;
}
.cat-card[data-modal]:hover .cat-specs {
height: 56px !important;
opacity: 1 !important;
}
.cat-card[data-modal] .cat-spec {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
border-bottom: 0 !important;
border-right: 1px solid rgba(245, 243, 239, .08) !important;
padding: 0 1rem !important;
height: 100% !important;
gap: .15rem !important;
}
.cat-card[data-modal] .cat-spec:last-child { border-right: 0 !important; }
.cat-card[data-modal] .cat-spec-label {
font-family: var(--fb) !important;
font-size: .5rem !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: rgba(245, 243, 239, .42) !important;
margin: 0 !important;
}
.cat-card[data-modal] .cat-spec-val {
font-family: var(--fd) !important;
font-style: italic !important;
font-size: .82rem !important;
color: var(--white) !important;
font-variation-settings: "opsz" 24, "SOFT" 50 !important;
margin: 0 !important;
}
/* ─── Mobile : retour layout simple 1-col, vignette plus présente ─── */
@media (max-width: 900px) {
.cat-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.cat-card[data-modal] {
height: 380px !important;
aspect-ratio: auto !important;
}
.cat-card[data-modal] .cat-name {
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
}
.cat-card[data-modal] .cat-content {
padding: 1.4rem 1.4rem 1.2rem !important;
}
.cat-card[data-modal] .cat-specs {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ FLUIDITÉ ÉPURÉE · pass final · effets doux & lents
═══════════════════════════════════════════════════════════════════ */
:root {
--ease-silk: cubic-bezier(.16, 1, .3, 1); /* doux comme la soie */
--ease-glide: cubic-bezier(.22, 1, .36, 1); /* glissement aérien */
--dur-soft-md: 420ms;
--dur-soft-lg: 640ms;
--dur-soft-xl: 900ms;
}
/* ─── Cat-cards : filtre éditorial doux (slight desaturation + warm sepia tint) ─── */
.cat-card[data-modal] .cat-photo {
transform: translate3d(calc(var(--px, 0) * -3px), calc(var(--py, 0) * -2.5px), 0) scale(1.02) !important;
transition: transform 1.8s var(--ease-silk), filter 1.2s var(--ease-silk) !important;
filter: saturate(.82) brightness(.9) contrast(1.05) sepia(.06) hue-rotate(-4deg) !important;
}
.cat-card[data-modal]:hover .cat-photo {
transform: translate3d(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -3.5px), 0) scale(1.045) !important;
filter: saturate(.92) brightness(.96) contrast(1.06) sepia(.04) hue-rotate(-2deg) !important;
}
/* Spotlight gradient : fade plus long, intensité réduite */
.cat-card::before {
background: radial-gradient(
520px circle at var(--mx, 50%) var(--my, 30%),
rgba(181, 196, 160, .08) 0%,
rgba(181, 196, 160, .03) 38%,
transparent 70%
) !important;
transition: opacity .85s var(--ease-silk) !important;
}
/* Outline hairline : transition plus longue */
.cat-card[data-modal] {
transition: outline-color .85s var(--ease-silk),
transform 1.2s var(--ease-silk) !important;
}
/* Overlay : transition plus douce */
.cat-card[data-modal] .cat-overlay {
transition: background 1.2s var(--ease-silk) !important;
}
/* Cat-name axes : changement très lent et doux */
.cat-card[data-modal] .cat-name {
transition: font-variation-settings 1.4s var(--ease-silk),
letter-spacing 1.1s var(--ease-silk) !important;
}
/* Cat-latin : fade-in plus respiré */
.cat-latin {
transition: color .85s var(--ease-silk), opacity .85s var(--ease-silk) !important;
}
/* Cat-sep : étirement doux */
.cat-card[data-modal] .cat-sep {
transition: width 1s var(--ease-silk), background-color .7s var(--ease-silk) !important;
}
/* Cat-cta : flèche s'éloigne lentement */
.cat-card[data-modal] .cat-cta {
transition: gap .9s var(--ease-silk),
color .65s var(--ease-silk),
border-color .7s var(--ease-silk),
letter-spacing .9s var(--ease-silk) !important;
}
.cat-card[data-modal]:hover .cat-cta {
gap: .85rem !important; /* moins agressif que 1rem */
letter-spacing: .28em !important; /* moins agressif que .3em */
}
/* Cat-specs : reveal plus posé */
.cat-card[data-modal] .cat-specs {
transition: height .8s var(--ease-silk),
opacity .55s var(--ease-silk) !important;
}
/* Cat-nr badge : transition douce */
.cat-card[data-modal] > .cat-nr {
transition: color .6s var(--ease-silk),
border-color .6s var(--ease-silk),
background-color .6s var(--ease-silk) !important;
}
/* ─── Boutons site-wide : doux ─── */
.btn,
.btn-sage,
.btn-ghost,
.btn-outline-ink,
.btn-outline-dark {
transition: background-color .55s var(--ease-silk),
color .55s var(--ease-silk),
border-color .55s var(--ease-silk),
transform .65s var(--ease-silk),
box-shadow .55s var(--ease-silk) !important;
}
/* ─── Nav-links : underline glide doux ─── */
.nav-link::after,
.nav .nav-link::after {
transition: width .6s var(--ease-silk), background-color .6s var(--ease-silk) !important;
}
/* ─── Reveals : durée plus longue + ease silk ─── */
.rv {
transition: opacity 1.3s var(--ease-silk),
transform 1.3s var(--ease-silk) !important;
}
.rv-stagger.on > * {
transition: opacity 1.1s var(--ease-silk),
transform 1.1s var(--ease-silk) !important;
}
.rv-stagger.on > *:nth-child(1) { transition-delay: 0ms !important; }
.rv-stagger.on > *:nth-child(2) { transition-delay: 110ms !important; }
.rv-stagger.on > *:nth-child(3) { transition-delay: 220ms !important; }
.rv-stagger.on > *:nth-child(4) { transition-delay: 330ms !important; }
.rv-stagger.on > *:nth-child(5) { transition-delay: 440ms !important; }
.rv-stagger.on > *:nth-child(6) { transition-delay: 550ms !important; }
/* ─── Marquee : ralenti pour respirer ─── */
.marquee {
animation-duration: 72s !important;
}
/* ─── Hero crest star : rotation plus lente encore ─── */
.hero-crest-star {
animation-duration: 32s !important;
}
/* ─── Scroll progress : transition plus douce sur la largeur ─── */
.progress {
transition: width .15s linear !important;
/* (suit le scroll en temps réel mais avec un petit smoothing visuel) */
}
/* ─── Terroirs map pin : amplitude halo réduite, transition douce ─── */
.ab-map-pin .ab-map-halo {
transition: opacity .7s var(--ease-silk),
transform .85s var(--ease-silk) !important;
}
.ab-map-pin:hover .ab-map-halo,
.ab-map-pin.is-active .ab-map-halo {
transform: scale(1.25) !important; /* 1.4 → 1.25, plus subtil */
opacity: .18 !important; /* .22 → .18 */
}
.ab-map-pin .ab-map-dot {
transition: fill .55s var(--ease-silk),
transform .7s var(--ease-silk) !important;
}
.ab-map-pin:hover .ab-map-dot,
.ab-map-pin.is-active .ab-map-dot {
transform: scale(1.12) !important; /* 1.18 → 1.12 */
}
/* ─── Saisons : transitions plus douces ─── */
.ab-saisons-bar span {
transition: background .55s var(--ease-silk),
transform .55s var(--ease-silk),
opacity .55s var(--ease-silk),
outline-color .55s var(--ease-silk) !important;
}
.ab-saisons-row.is-hover .ab-saisons-bar span.on {
transform: scaleY(1.08) !important; /* 1.15 → 1.08 */
}
/* ─── Terroir list : glide doux ─── */
.ab-terroir {
transition: padding-left .65s var(--ease-silk),
background .55s var(--ease-silk) !important;
}
.ab-terroir-tags {
transition: max-height .7s var(--ease-silk),
margin-top .55s var(--ease-silk) !important;
}
/* ─── Scrollspy : glide ─── */
.ab-spy-dot {
transition: background-color .55s var(--ease-silk),
transform .65s var(--ease-silk),
box-shadow .55s var(--ease-silk) !important;
}
.ab-spy-label {
transition: opacity .55s var(--ease-silk),
transform .55s var(--ease-silk) !important;
}
/* ─── Reduce-motion : kill toutes les animations en plus ─── */
@media (prefers-reduced-motion: reduce) {
.cat-card[data-modal] .cat-photo,
.cat-card[data-modal]::before,
.marquee,
.hero-crest-star {
animation: none !important;
transform: none !important;
transition: opacity .3s ease !important;
}
}
/* ─── Désactive l'ancienne pill flottante 'Bio · Sauvage' au join image/content
(remplacée par notre badge top-left .cat-nr) ─── */
.cat-card > .cat-content::before,
.cat-card[data-modal] > .cat-content::before {
display: none !important;
content: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ CAT-CTA · FIX alignement (override final)
Rétablit le texte "Découvrir →" en inline gauche, aligné avec
le name/latin/sub. Annule l'ancien bouton circulaire absolute.
═══════════════════════════════════════════════════════════════════ */
.cat-card[data-modal] .cat-cta {
position: static !important;
bottom: auto !important;
right: auto !important;
top: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
border: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
font-family: var(--fm) !important;
font-size: .65rem !important;
font-weight: 500 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: rgba(245, 243, 239, .82) !important;
margin: 0 !important;
padding: 0 0 .2rem 0 !important;
border-top: 0 !important;
border-bottom: 1px solid transparent !important;
opacity: 1 !important;
transform: none !important;
gap: .55rem !important;
align-self: flex-start !important;
margin-top: .85rem !important;
z-index: auto !important;
transition: gap .55s var(--ease-silk),
color .45s var(--ease-silk),
border-color .45s var(--ease-silk),
letter-spacing .55s var(--ease-silk) !important;
}
/* Annule la flèche pseudo (le HTML contient déjà "Découvrir →") */
.cat-card[data-modal] .cat-cta::after {
content: none !important;
display: none !important;
}
.cat-card[data-modal]:hover .cat-cta {
gap: .85rem !important;
color: var(--white) !important;
border-bottom-color: rgba(181, 196, 160, .55) !important;
background: transparent !important;
border-color: transparent !important;
transform: none !important;
}
.cat-card[data-modal]:hover .cat-cta::after {
display: none !important;
content: none !important;
}
/* Remove the "→" content from the original .cat-cta text — keep just "Découvrir" */
/* (already in HTML as "Découvrir →" — we just make sure no double arrow) */
/* ═══════════════════════════════════════════════════════════════════
▉ CAT-CONTENT · FIX final overflow + alignement épuré
═══════════════════════════════════════════════════════════════════ */
/* La carte devient flex column pour pousser cat-content en bas */
.cat-card[data-modal] {
display: flex !important;
flex-direction: column !important;
}
/* RESTAURE le layout "frosted band en bas" : cat-content en flow, photo au-dessus visible */
.cat-card[data-modal] .cat-content {
position: relative !important;
inset: auto !important;
z-index: 2 !important;
padding: 1.6rem 1.8rem 1.7rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
gap: 0 !important;
margin-top: auto !important;
flex: 0 0 auto !important;
/* Hauteur identique sur les 4 cards — verrou visuel */
height: 232px !important;
min-height: 232px !important;
max-height: 232px !important;
pointer-events: auto;
}
.cat-card[data-modal] .cat-bottom {
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
}
/* Stack rythm épuré — distances précises entre éléments */
.cat-card[data-modal] .cat-name {
font-size: clamp(1.5rem, 2vw, 2rem) !important;
line-height: 1 !important;
margin: 0 0 .5rem 0 !important;
letter-spacing: -.012em !important;
}
.cat-card[data-modal="plantes"] .cat-name {
font-size: clamp(1.7rem, 2.3vw, 2.4rem) !important;
}
.cat-card[data-modal] .cat-latin {
margin: 0 0 .85rem 0 !important;
font-size: .9rem !important;
}
.cat-card[data-modal] .cat-sep {
margin: 0 0 .85rem 0 !important;
width: 32px !important;
height: 1px !important;
}
.cat-card[data-modal] .cat-sub {
margin: 0 0 1rem 0 !important;
font-size: .72rem !important;
letter-spacing: .14em !important;
color: rgba(245, 243, 239, .55) !important;
}
.cat-card[data-modal] .cat-cta {
margin: 0 !important;
font-size: .62rem !important;
letter-spacing: .26em !important;
align-self: flex-start !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ TYPOGRAPHY UNIFICATION PASS · cohérence cross-page A→Z
───────────────────────────────────────────────────────────────────
Système type final :
• Display (Fraunces variable opsz/SOFT/wght) — h1, h2, .hero-title, .ab-hero-title
• Body (Spectral serif) — p, .lead, .hero-sub, .cat-name (italic)
• Label (system mono) — .eyebrow, .label, .stat-l, .cat-nr, .cat-cta
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── Type scale ── */
--t-hero: clamp(2.6rem, 6vw, 5.4rem); /* hero h1 (display XL) */
--t-section: clamp(2rem, 4vw, 3.2rem); /* section h2 (display L) */
--t-card-title: clamp(1.5rem, 2.2vw, 2rem); /* card title (display M) */
--t-card-flag: clamp(1.7rem, 2.5vw, 2.4rem); /* flagship card (Plantes) */
--t-quote: clamp(1.6rem, 3vw, 2.4rem); /* large pull quote */
--t-body-lg: 1.12rem; /* hero-sub, intro */
--t-body: 1rem; /* body */
--t-body-sm: .9rem; /* small body, latin */
--t-caption: .82rem; /* attribs, captions */
--t-label: .68rem; /* eyebrow standard */
--t-label-sm: .58rem; /* mini label / tag */
/* ── Letter-spacing ── */
--ls-tight: -.018em; /* big display titles */
--ls-balanced: -.005em; /* medium titles */
--ls-body: 0; /* body */
--ls-label: .26em; /* eyebrow / mono */
--ls-label-tight:.18em; /* mono medium */
--ls-label-wide: .3em; /* mini tag / large eyebrow */
/* ── Line-heights ── */
--lh-display: 1; /* big titles */
--lh-tight: 1.06; /* card titles */
--lh-body: 1.7; /* body reading */
--lh-narrow: 1.5; /* short body */
--lh-label: 1; /* labels */
/* ── Fraunces axes (rythme uniforme) ── */
--fr-hero: "opsz" 144, "SOFT" 100, "wght" 400; /* hero display */
--fr-section: "opsz" 144, "SOFT" 90, "wght" 410; /* section */
--fr-card: "opsz" 144, "SOFT" 80, "wght" 410; /* card title */
--fr-italic: "opsz" 144, "SOFT" 100, "wght" 400; /* em italic accents */
}
/* ═══ DISPLAY (Fraunces) ═══ */
.hero h1, .ab-hero-title, h1.hero-title,
.cats-title, .ab-terroirs-title, .ab-saisons-title,
.contacts-band-title, .chapter-break-title, .ab-presence-title,
.process-title, .timeline-title, .featured-specialty-title,
.catalog-sec-title, .intro-title {
font-family: var(--fd) !important;
font-feature-settings: "ss01" 1, "ss02" 1;
}
.hero h1, .ab-hero-title {
font-size: var(--t-hero) !important;
line-height: var(--lh-display) !important;
letter-spacing: var(--ls-tight) !important;
font-variation-settings: var(--fr-hero) !important;
font-weight: 400 !important;
}
.cats-title, .ab-terroirs-title, .ab-saisons-title,
.contacts-band-title, .chapter-break-title, .ab-presence-title,
.process-title, .timeline-title, .featured-specialty-title,
.catalog-sec-title, .intro-title {
font-size: var(--t-section) !important;
line-height: var(--lh-tight) !important;
letter-spacing: var(--ls-balanced) !important;
font-variation-settings: var(--fr-section) !important;
font-weight: 400 !important;
}
/* Italic accents dans les titres */
.hero h1 em, .ab-hero-title em,
.cats-title em, .ab-terroirs-title em, .ab-saisons-title em,
.contacts-band-title em, .chapter-break-title em, .ab-presence-title em,
.process-title em, .timeline-title em, .featured-specialty-title em,
.catalog-sec-title em, .intro-title em {
font-style: italic !important;
font-variation-settings: var(--fr-italic) !important;
color: var(--sage-d);
}
/* ═══ BODY (Spectral) ═══ */
body, p, li, dd, dt, blockquote {
font-family: var(--fb) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hero-sub, .ab-hero-sub, .featured-specialty-head p,
.intro-lead, .ab-terroirs-lead, .ab-saisons-lead,
.contacts-band-intro, .ab-presence-lead, .chapter-break-sub {
font-family: var(--fb) !important;
font-size: var(--t-body-lg) !important;
line-height: var(--lh-body) !important;
letter-spacing: var(--ls-body) !important;
font-weight: 400 !important;
}
/* Italic body accents */
.hero-sub em, .ab-hero-sub em, p em, .lead em, blockquote em {
font-style: italic !important;
color: var(--sage-d);
}
/* ═══ LABELS / EYEBROWS / CAPTIONS (mono système) ═══ */
.eyebrow, .label,
.cats-eyebrow, .featured-specialty-eyebrow, .chapter-break-eyebrow,
.contacts-band-eyebrow, .ab-year-break-label, .ab-saisons-header-label,
.hero-crest-mark, .hero-tag, .ab-hero-tag,
.stat-l, .ab-stats-l,
.cat-spec-label, .specialty-card-spec-label, .plant-modal-spec-label,
.cat-modal-spec-label, .contacts-general-label,
.specialty-card-tag, .ab-spy-label,
.cat-cta, .specialty-card-cta {
font-family: var(--fm) !important;
font-size: var(--t-label) !important;
font-weight: 500 !important;
letter-spacing: var(--ls-label) !important;
text-transform: uppercase !important;
font-style: normal !important;
font-variation-settings: normal !important;
line-height: var(--lh-label) !important;
}
/* Mini-labels (catalog tag, badge) */
.catalog-item-bio, .catalog-item-cat, .catalog-item-nr,
.cat-card[data-modal] > .cat-nr,
.ab-stats-l, .stat-l {
font-family: var(--fm) !important;
font-size: var(--t-label-sm) !important;
letter-spacing: var(--ls-label-wide) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
}
/* Eyebrow standard (gardé italique pour signature manuscrite) */
.ab-hero-sign-text, .hm-quote-attrib em {
font-family: var(--fb) !important;
font-style: italic !important;
font-feature-settings: normal !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-size: var(--t-body-sm) !important;
}
/* ═══ NUMBERS / STATS (Fraunces italic, oldstyle figures) ═══ */
.stat-n, .ab-stats-n, .heritage-stat .num {
font-family: var(--fd) !important;
font-feature-settings: "onum" 1, "ss03" 1 !important;
font-variation-settings: var(--fr-section) !important;
font-weight: 400 !important;
letter-spacing: var(--ls-balanced) !important;
line-height: var(--lh-display) !important;
}
/* ═══ NAV LINKS ═══ */
.nav-link, .drawer-link {
font-family: var(--fm) !important;
font-size: var(--t-label) !important;
letter-spacing: var(--ls-label-tight) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
}
.logo {
font-family: var(--fd) !important;
font-variation-settings: var(--fr-section) !important;
letter-spacing: var(--ls-balanced) !important;
}
.logo em {
font-style: italic !important;
font-variation-settings: var(--fr-italic) !important;
}
/* ═══ BUTTONS (CTA) — mono uppercase épuré ═══ */
.btn, .btn-sage, .btn-ghost, .btn-outline-ink, .btn-outline-dark {
font-family: var(--fm) !important;
font-size: var(--t-label) !important;
font-weight: 500 !important;
letter-spacing: var(--ls-label-tight) !important;
text-transform: uppercase !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · HERO PRO — left-aligned, hero banner pattern uniforme
═══════════════════════════════════════════════════════════════════ */
body.page-about .hero--about {
min-height: 100vh;
position: relative;
}
body.page-about .hero--about .ab-hero-content {
position: relative;
z-index: 3;
max-width: 860px !important;
margin: 0 auto !important;
padding: 8rem 2.5rem 5rem !important;
text-align: left !important; /* left-aligned comme index/produits */
color: #f5f3ef;
display: block;
}
/* Crest left-aligned */
body.page-about .ab-hero-crest {
margin: 0 0 1.6rem !important;
display: inline-flex !important;
}
/* Tag mono left, sage rule before */
body.page-about .ab-hero-tag {
display: inline-flex !important;
align-items: center !important;
gap: .8rem !important;
margin-bottom: 1.8rem !important;
color: rgba(181, 196, 160, .65) !important;
letter-spacing: var(--ls-label) !important;
}
body.page-about .ab-hero-tag::before {
content: "" !important;
width: 28px !important;
height: 1px !important;
background: var(--sage) !important;
opacity: .6 !important;
}
/* Title aligned left */
body.page-about .ab-hero-title {
text-align: left !important;
margin: 0 0 1.6rem !important;
color: #f5f3ef !important;
max-width: 18ch !important;
}
/* Body left aligned */
body.page-about .ab-hero-sub {
text-align: left !important;
margin: 0 0 2.4rem !important;
max-width: 50ch !important;
color: rgba(245, 243, 239, .82) !important;
}
/* CTAs left aligned */
body.page-about .ab-hero-cta {
display: flex !important;
justify-content: flex-start !important;
gap: 1rem !important;
flex-wrap: wrap !important;
margin: 0 !important;
}
/* Hide the now-removed signature (defensive) */
body.page-about .ab-hero-sign { display: none !important; }
/* Mobile : keep left + reduce paddings */
@media (max-width: 768px) {
body.page-about .hero--about .ab-hero-content {
padding: 6rem 1.4rem 3.5rem !important;
}
body.page-about .ab-hero-title {
max-width: 14ch !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · STORY POLAROIDS — disposition mémoire familiale
═══════════════════════════════════════════════════════════════════ */
/* Polaroid frame : papier crème, padding bottom large pour caption */
.ab-story-fig {
position: relative;
display: block;
background: var(--white);
padding: 14px 14px 56px 14px;
box-shadow:
0 1px 1px rgba(20, 25, 18, .06),
0 12px 28px rgba(20, 25, 18, .22),
0 28px 56px rgba(20, 25, 18, .12);
border: none;
overflow: visible;
/* tilt léger pour l'effet polaroid posé sur table */
transform: rotate(-1.4deg);
transition: transform .8s var(--ease-silk), box-shadow .8s var(--ease-silk);
width: fit-content;
margin: 0 auto;
max-width: 100%;
/* texture papier subtile */
background-image:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(20, 25, 18, 0) 60%, rgba(20, 25, 18, .04) 100%);
}
/* Alternance de tilt entre chapitres */
.ab-story-chapter:nth-child(2n) .ab-story-fig {
transform: rotate(1.6deg);
}
.ab-story-chapter:nth-child(3n) .ab-story-fig {
transform: rotate(-0.8deg);
}
/* Hover : redresse subtilement et lève (sensation main qui ramasse) */
.ab-story-fig:hover {
transform: rotate(-0.3deg) translateY(-6px);
box-shadow:
0 1px 1px rgba(20, 25, 18, .08),
0 18px 38px rgba(20, 25, 18, .25),
0 38px 70px rgba(20, 25, 18, .14);
}
.ab-story-chapter:nth-child(2n) .ab-story-fig:hover {
transform: rotate(0.3deg) translateY(-6px);
}
/* Image dans le polaroid */
.ab-story-fig img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/5 !important;
object-fit: cover;
filter: saturate(.85) brightness(.96) contrast(1.04) sepia(.08);
opacity: 0;
transition: opacity .8s var(--ease-silk);
}
.ab-story-fig img.is-loaded {
opacity: 1;
}
/* Caption manuscrite en bas du polaroid (utilise figcaption si existe) */
.ab-story-fig figcaption {
position: absolute;
bottom: 16px;
left: 14px;
right: 14px;
text-align: center;
font-family: var(--fb);
font-style: italic;
font-size: .82rem;
color: var(--ink-soft);
letter-spacing: .005em;
line-height: 1.3;
padding: 0 .5rem;
}
/* Petite barre date sage au-dessus de caption (signature graphique) */
.ab-story-fig figcaption::before {
content: "";
display: block;
width: 26px;
height: 1px;
background: var(--sage);
opacity: .6;
margin: 0 auto .55rem;
}
/* ═══ STORY BREAK — polaroid panoramique full-width ═══ */
.ab-story-break {
padding: 4rem 0;
text-align: center;
}
.ab-story-break-img {
display: block;
width: 92%;
max-width: 1200px;
margin: 0 auto;
aspect-ratio: 16/9 !important;
object-fit: cover;
filter: saturate(.85) brightness(.94) contrast(1.05) sepia(.07);
background: var(--white);
padding: 18px 18px 56px;
box-shadow:
0 1px 1px rgba(20, 25, 18, .08),
0 18px 38px rgba(20, 25, 18, .22),
0 36px 72px rgba(20, 25, 18, .14);
transform: rotate(.5deg);
opacity: 0;
transition: opacity 1s var(--ease-silk), transform .8s var(--ease-silk);
}
.ab-story-break-img.is-loaded {
opacity: 1;
}
.ab-story-break-img:hover {
transform: rotate(0deg) translateY(-4px);
}
@media (max-width: 768px) {
.ab-story-fig {
padding: 10px 10px 44px;
transform: rotate(-1deg);
}
.ab-story-fig figcaption {
font-size: .72rem;
bottom: 12px;
}
.ab-story-break-img {
padding: 12px 12px 40px;
transform: rotate(.3deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ab-story-fig,
.ab-story-fig:hover,
.ab-story-break-img {
transform: none !important;
transition: opacity .3s ease !important;
}
}
/* Story break (full-width photo) : aspect-ratio cinematic */
.ab-story-break-img {
display: block;
width: 100%;
aspect-ratio: 21/9 !important;
object-fit: cover;
filter: saturate(.9) brightness(.92) contrast(1.05) sepia(.04);
opacity: 0;
transition: opacity 1s var(--ease-silk);
}
.ab-story-break-img.is-loaded {
opacity: 1;
}
/* Neutralise les anciens overrides ab-story-fig--wide qui débordent du container */
@media (min-width: 980px) {
.ab-story-fig--wide {
width: auto !important;
max-width: 480px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 640px) {
.ab-story-fig img {
aspect-ratio: 4/5 !important;
}
.ab-story-fig figcaption {
display: block !important;
flex-wrap: nowrap !important;
letter-spacing: .005em !important;
}
}
/* Polaroid figcaption : force le rendu manuscrit / éditorial */
.ab-story-fig figcaption {
display: block !important;
text-transform: none !important;
font-family: var(--fb) !important;
font-style: italic !important;
font-size: .8rem !important;
letter-spacing: .005em !important;
color: var(--ink-soft) !important;
font-weight: 400 !important;
margin-top: 0 !important;
}
.ab-story-fig figcaption em {
font-style: italic !important;
color: var(--sage-d) !important;
font-weight: 500 !important;
}
.ab-story-fig figcaption::before {
width: 24px !important;
display: block !important;
margin: 0 auto .55rem !important;
background: var(--sage) !important;
opacity: .55 !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · STORY CHAPTER · LAYOUT PORTFOLIO ÉDITORIAL
Texte d'un côté, polaroid de l'autre, alternance entre chapitres
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
.ab-story-chapter--with-fig {
display: grid !important;
grid-template-columns: 1.05fr 1fr !important;
gap: clamp(3rem, 6vw, 6rem) !important;
align-items: center !important;
max-width: 1280px;
margin: 0 auto !important;
padding: 3rem 0 !important;
}
/* Texte (num + title + paragraphes) en colonne 1 par défaut */
.ab-story-chapter--with-fig > .ab-story-num,
.ab-story-chapter--with-fig > .ab-story-chapter-title,
.ab-story-chapter--with-fig > .ab-story-lead,
.ab-story-chapter--with-fig > p {
grid-column: 1 !important;
max-width: 52ch;
}
/* Polaroid en colonne 2, sticky top (suit la lecture du texte) */
.ab-story-chapter--with-fig > .ab-story-fig {
grid-column: 2 !important;
grid-row: 1 / span 3 !important; /* couvre title + lead + 1er paragraphe */
align-self: start !important;
margin: 0 !important;
max-width: 420px !important;
width: 100% !important;
justify-self: center !important;
position: sticky !important;
top: 6rem !important; /* respire sous la nav */
}
/* ALTERNANCE : chapitre III (dans .ab-story--closing) → polaroid à GAUCHE */
.ab-story--closing .ab-story-chapter--with-fig {
grid-template-columns: 1fr 1.05fr !important;
}
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-num,
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-chapter-title,
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-lead,
.ab-story--closing .ab-story-chapter--with-fig > p {
grid-column: 2 !important;
}
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-fig {
grid-column: 1 !important;
}
/* Tilts différents sur les 2 chapitres pour casser la symétrie */
.ab-story-chapter--with-fig:not(.ab-story--closing *) > .ab-story-fig {
transform: rotate(-1.6deg);
}
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-fig {
transform: rotate(1.4deg);
}
}
/* Chapter II (sans fig) reste pleine largeur cool */
.ab-story-chapter:not(.ab-story-chapter--with-fig) {
max-width: 720px;
margin: 4rem auto !important;
}
/* Mobile : retour stack 1 col, polaroid en bas */
@media (max-width: 900px) {
.ab-story-chapter--with-fig,
.ab-story--closing .ab-story-chapter--with-fig {
display: block !important;
grid-template-columns: 1fr !important;
}
.ab-story-chapter--with-fig > * {
grid-column: 1 !important;
grid-row: auto !important;
}
.ab-story-chapter--with-fig > .ab-story-fig {
margin: 2rem auto !important;
max-width: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · STORY CHAPTERS · FLOAT ÉDITORIAL (zero gap)
Le polaroid flotte, le texte coule autour. Pas de zone vide.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
/* OVERRIDE : annule le grid précédent, retour en flow normal avec float */
.ab-story-chapter--with-fig {
display: block !important;
grid-template-columns: none !important;
max-width: 1080px !important;
margin: 4rem auto !important;
padding: 0 2rem !important;
}
/* Polaroid : float right par défaut, max 380px */
.ab-story-chapter--with-fig > .ab-story-fig {
float: right !important;
grid-column: auto !important;
grid-row: auto !important;
position: static !important;
align-self: auto !important;
margin: 0 0 1.4rem 3rem !important;
max-width: 360px !important;
width: 38% !important;
shape-outside: margin-box;
}
/* Alternance : chapter III → polaroid à GAUCHE */
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-fig {
float: left !important;
margin: 0 3rem 1.4rem 0 !important;
}
/* Texte en flow normal, plus de col 1/2 */
.ab-story-chapter--with-fig > .ab-story-num,
.ab-story-chapter--with-fig > .ab-story-chapter-title,
.ab-story-chapter--with-fig > .ab-story-lead,
.ab-story-chapter--with-fig > p {
grid-column: auto !important;
grid-row: auto !important;
max-width: none !important;
}
/* Clearfix pour le float */
.ab-story-chapter--with-fig::after {
content: "";
display: block;
clear: both;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · STORY-BREAK · BANNER 4x4 ÉPURÉ
Photo crisp full-width sans gradient, caption editorial sous l'image
═══════════════════════════════════════════════════════════════════ */
.ab-story-break {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
background: transparent !important;
display: block !important;
padding: 6rem 2rem 4rem !important;
overflow: visible !important;
isolation: auto !important;
}
.ab-story-break-img {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: 1280px !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
aspect-ratio: 21/9 !important;
object-fit: cover !important;
filter: saturate(.88) brightness(.95) contrast(1.04) sepia(.05) !important;
transform: none !important;
opacity: 0;
transition: opacity .9s var(--ease-silk) !important;
/* No padding, no polaroid, no shadow — clean cinematic photo */
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.ab-story-break-img.is-loaded { opacity: 1 !important; }
/* Plus de gradient overlay */
.ab-story-break-fade {
display: none !important;
}
/* Plus de transitions cremes en haut/bas */
.ab-story-break::before,
.ab-story-break::after {
display: none !important;
content: none !important;
}
/* Caption en dessous de l'image, italique discrète */
.ab-story-break-caption {
position: relative !important;
inset: auto !important;
margin: 1.4rem auto 0 !important;
max-width: 1280px !important;
padding: 0 .5rem !important;
display: block !important;
text-align: left !important;
font-family: var(--fb) !important;
font-style: italic !important;
font-size: .9rem !important;
letter-spacing: .005em !important;
color: var(--ink-soft) !important;
text-transform: none !important;
font-weight: 400 !important;
background: transparent !important;
}
.ab-story-break-caption em {
font-style: italic !important;
color: var(--sage-d) !important;
font-weight: 500 !important;
}
@media (max-width: 900px) {
/* Mobile : revenir à 1 col (pas de float) */
.ab-story-chapter--with-fig {
display: block !important;
padding: 0 1.2rem !important;
}
.ab-story-chapter--with-fig > .ab-story-fig,
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-fig {
float: none !important;
margin: 2rem auto !important;
max-width: 100% !important;
width: 100% !important;
}
.ab-story-break {
padding: 3rem 1rem 2rem !important;
}
.ab-story-break-img {
aspect-ratio: 16/10 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · STORY-BREAK · POLAROID PANORAMIQUE
Cohérent avec les polaroids portrait des chapitres
═══════════════════════════════════════════════════════════════════ */
.ab-story-break {
padding: 2.4rem 2rem 4rem !important; /* top réduit, photo remonte */
background: var(--bg) !important;
display: block !important;
text-align: center !important;
}
.ab-story-break-fig {
position: relative;
display: inline-block;
background: var(--white);
padding: 18px 18px 70px 18px;
margin: 0 auto;
max-width: 1080px;
width: 100%;
box-shadow:
0 1px 1px rgba(20, 25, 18, .06),
0 14px 32px rgba(20, 25, 18, .22),
0 32px 64px rgba(20, 25, 18, .14);
transform: rotate(.6deg);
transition: transform .8s var(--ease-silk), box-shadow .8s var(--ease-silk);
background-image:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(20, 25, 18, 0) 60%, rgba(20, 25, 18, .04) 100%);
}
.ab-story-break-fig:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow:
0 1px 1px rgba(20, 25, 18, .08),
0 22px 42px rgba(20, 25, 18, .26),
0 42px 78px rgba(20, 25, 18, .16);
}
.ab-story-break-fig .ab-story-break-img {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 !important;
aspect-ratio: 21/9 !important;
object-fit: cover !important;
object-position: center 50% !important;
filter: saturate(.85) brightness(.95) contrast(1.04) sepia(.06) !important;
transform: none !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
opacity: 0;
transition: opacity .9s var(--ease-silk) !important;
max-width: none !important;
}
.ab-story-break-fig .ab-story-break-img.is-loaded {
opacity: 1 !important;
}
/* Caption inside the polaroid (bottom centered) */
.ab-story-break-fig .ab-story-break-caption {
position: absolute !important;
bottom: 22px !important;
left: 18px !important;
right: 18px !important;
display: block !important;
text-align: center !important;
font-family: var(--fb) !important;
font-style: italic !important;
font-size: .9rem !important;
letter-spacing: .005em !important;
line-height: 1.3 !important;
color: var(--ink-soft) !important;
text-transform: none !important;
font-weight: 400 !important;
background: transparent !important;
margin: 0 !important;
padding: 0 .5rem !important;
}
.ab-story-break-fig .ab-story-break-caption::before {
content: "";
display: block;
width: 28px;
height: 1px;
background: var(--sage);
opacity: .55;
margin: 0 auto .55rem;
}
.ab-story-break-fig .ab-story-break-caption em {
font-style: italic !important;
color: var(--sage-d) !important;
font-weight: 500 !important;
}
@media (max-width: 900px) {
.ab-story-break {
padding: 3rem 1rem !important;
}
.ab-story-break-fig {
padding: 12px 12px 54px;
transform: rotate(.3deg);
}
.ab-story-break-fig .ab-story-break-img {
aspect-ratio: 16/10 !important;
}
.ab-story-break-fig .ab-story-break-caption {
font-size: .78rem !important;
bottom: 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ab-story-break-fig {
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · YEAR-BREAK reduced + tighter paragraphs
═══════════════════════════════════════════════════════════════════ */
/* Year-break beaucoup plus discret (pas un signpost XXL) */
.ab-year-break {
padding: clamp(2.4rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) !important;
gap: clamp(.6rem, 1.4vw, 1.2rem) !important;
}
.ab-year-break-year {
font-size: clamp(1.6rem, 3vw, 2.6rem) !important;
letter-spacing: -.005em !important;
}
.ab-year-break-dash {
font-size: clamp(1.2rem, 2.4vw, 1.8rem) !important;
}
.ab-year-break-label {
font-size: .65rem !important;
letter-spacing: .26em !important;
}
.ab-year-break::before,
.ab-year-break::after {
width: clamp(1.6rem, 4vw, 3rem) !important;
}
/* Paragraphes story · ÉQUIDISTANCE STRICTE (rythme = 1.1rem partout) */
.ab-story-chapter > * {
margin-top: 0 !important;
margin-bottom: 1.1rem !important;
}
.ab-story-chapter > *:last-child {
margin-bottom: 0 !important;
}
.ab-story-chapter p,
.ab-story-chapter .ab-story-lead {
line-height: 1.62 !important;
}
.ab-story-chapter-title {
margin-bottom: 1.4rem !important; /* titre = 1 cran de plus pour respirer */
}
.ab-story-num {
margin-bottom: .9rem !important; /* num: léger espace au-dessus du titre */
}
/* Pull-quote : marge symétrique */
.ab-pullquote {
margin: 2.4rem auto !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · POLAROIDS 3D · spline-scene premium feel
Perspective + tilt mouse + floating idle + reveal "drop into place"
═══════════════════════════════════════════════════════════════════ */
/* Perspective sur les containers parents */
.ab-story-inner,
.ab-story-break {
perspective: 1400px !important;
perspective-origin: 50% 30% !important;
}
/* Polaroid base : 3D layer, transform-style preserved */
.ab-story-fig,
.ab-story-break-fig {
transform-style: preserve-3d !important;
/* Variables CSS pilotées par JS pour tilt + lift */
--tx: 0deg;
--ty: 0deg;
--tz: 0px;
--bx: 12px; /* shadow x offset */
--by: 28px; /* shadow y offset */
/* Tilt initial préservé + variables JS additives */
will-change: transform, box-shadow;
transition:
transform 1.2s cubic-bezier(.16, 1, .3, 1),
box-shadow 1s cubic-bezier(.16, 1, .3, 1) !important;
}
/* Floating idle — subtle perpetual breathing */
@keyframes polaroidFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -5px; }
}
@keyframes polaroidFloatAlt {
0%, 100% { translate: 0 -2px; }
50% { translate: 0 4px; }
}
.ab-story-fig {
animation: polaroidFloat 7s ease-in-out infinite;
}
.ab-story-chapter:nth-child(2n) .ab-story-fig {
animation: polaroidFloatAlt 8s ease-in-out infinite;
animation-delay: -2s;
}
.ab-story-break-fig {
animation: polaroidFloat 9s ease-in-out infinite;
}
/* Override transform inline (composé) — combine tilt initial + JS values */
@media (hover: hover) and (pointer: fine) {
.ab-story-fig {
transform:
perspective(1400px)
translate3d(0, 0, var(--tz, 0px))
rotate(-1.6deg)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg)) !important;
}
.ab-story-chapter:nth-child(2n) .ab-story-fig {
transform:
perspective(1400px)
translate3d(0, 0, var(--tz, 0px))
rotate(1.6deg)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg)) !important;
}
.ab-story--closing .ab-story-chapter--with-fig > .ab-story-fig {
transform:
perspective(1400px)
translate3d(0, 0, var(--tz, 0px))
rotate(1.4deg)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg)) !important;
}
.ab-story-break-fig {
transform:
perspective(1400px)
translate3d(0, 0, var(--tz, 0px))
rotate(.6deg)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg)) !important;
}
}
/* Dynamic shadow — pilotée par --bx --by */
.ab-story-fig,
.ab-story-break-fig {
box-shadow:
0 1px 1px rgba(20, 25, 18, .06),
calc(var(--bx, 0px) * .4) calc(var(--by, 14px) * .9) 28px rgba(20, 25, 18, .22),
calc(var(--bx, 0px) * .8) calc(var(--by, 30px) * 1.4) 56px rgba(20, 25, 18, .14) !important;
}
/* Hover : lift + scale subtle */
@media (hover: hover) and (pointer: fine) {
.ab-story-fig:hover,
.ab-story-break-fig:hover {
--tz: 14px;
z-index: 10;
}
}
/* Reveal "drop into place" — fall from above with tilt overshoot */
.ab-story-fig.rv,
.ab-story-break-fig.rv,
.ab-story-fig:not(.on),
.ab-story-break-fig:not(.on) {
opacity: 0;
}
@keyframes polaroidDrop {
0% {
opacity: 0;
translate: 0 -40px;
rotate: -8deg;
scale: .92;
}
60% {
opacity: 1;
rotate: 1deg;
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, -1.6deg);
scale: 1;
}
}
.ab-story-fig.rv.on,
.ab-story-break-fig.rv.on,
.ab-story-fig.on,
.ab-story-break-fig.on {
opacity: 1;
animation:
polaroidDrop 1.4s cubic-bezier(.22, 1, .36, 1) forwards,
polaroidFloat 7s ease-in-out 1.4s infinite;
}
.ab-story-chapter:nth-child(2n) .ab-story-fig.on {
--final-rotate: 1.6deg;
}
.ab-story--closing .ab-story-fig.on {
--final-rotate: 1.4deg;
}
.ab-story-break-fig.on {
--final-rotate: .6deg;
}
/* Photo grain inner — ajoute du caractère papier/film */
.ab-story-fig::after,
.ab-story-break-fig::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 60% 50% at 50% 50%, transparent 60%, rgba(20, 25, 18, .08) 100%),
url("data:image/svg+xml;utf8,");
background-size: auto, 220px 220px;
mix-blend-mode: multiply;
opacity: .6;
}
/* Mobile : 3D désactivé (perf + accessibilité) */
@media (hover: none), (pointer: coarse) {
.ab-story-fig,
.ab-story-break-fig {
transform-style: flat !important;
animation: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ab-story-fig,
.ab-story-break-fig {
animation: none !important;
transition: opacity .3s ease !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ 4x4 POLAROID · 3D AMPLIFIÉ · spline-scene focal
Tilt plus fort + photo depth parallax + glare + drop dramatique
═══════════════════════════════════════════════════════════════════ */
.ab-story-break-fig {
/* Variables additionnelles pour photo parallax + glare */
--img-px: 0px;
--img-py: 0px;
--glare-x: 50%;
--glare-y: 50%;
--glare-opacity: 0;
}
/* Image INSIDE le cadre : parallax de profondeur (sens inverse) */
.ab-story-break-fig .ab-story-break-img {
transform: translate3d(var(--img-px, 0px), var(--img-py, 0px), 0) !important;
transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) !important;
will-change: transform;
}
/* Glare highlight qui suit la souris (effet brillance papier) */
.ab-story-break-fig::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: radial-gradient(
520px circle at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 255, 255, .12) 0%,
rgba(255, 255, 255, .04) 35%,
transparent 65%
);
opacity: var(--glare-opacity, 0);
mix-blend-mode: overlay;
transition: opacity .8s cubic-bezier(.16, 1, .3, 1);
}
/* Override transform pour avoir 3D plus dramatique sur le 4x4 */
@media (hover: hover) and (pointer: fine) {
.ab-story-break-fig {
transform:
perspective(1800px)
translate3d(0, 0, var(--tz, 0px))
rotate(.6deg)
rotateX(var(--ty, 0deg))
rotateY(var(--tx, 0deg)) !important;
}
.ab-story-break-fig:hover {
--tz: 22px;
--glare-opacity: 1;
}
}
/* Drop animation dramatique (plus pronounced pour le 4x4 focal) */
@keyframes polaroidDropDramatic {
0% {
opacity: 0;
translate: 0 -80px;
rotate: -12deg;
scale: .85;
filter: blur(4px);
}
50% {
opacity: 1;
rotate: 3deg;
scale: 1.02;
filter: blur(0);
}
75% {
rotate: -1deg;
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, .6deg);
scale: 1;
filter: blur(0);
}
}
.ab-story-break-fig.on,
.ab-story-break-fig.rv.on {
animation:
polaroidDropDramatic 1.8s cubic-bezier(.16, 1, .3, 1) forwards,
polaroidFloat 9s ease-in-out 1.8s infinite !important;
}
/* Floating idle plus marqué pour le 4x4 (focal = bouge davantage) */
@keyframes polaroidFloatBig {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
.ab-story-break-fig {
animation: polaroidFloatBig 9s ease-in-out infinite !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ FIX · ab-story-break-fig n'a pas la classe .on (sur parent)
On bypass le opacity:0 et on déclenche les anims via parent.on
═══════════════════════════════════════════════════════════════════ */
.ab-story-break-fig:not(.on) {
opacity: 1 !important; /* annule le hide initial */
}
/* Le parent .ab-story-break.on déclenche les anims sur le child fig */
.ab-story-break.on .ab-story-break-fig {
opacity: 1 !important;
animation:
polaroidDropDramatic 1.8s cubic-bezier(.16, 1, .3, 1) forwards,
polaroidFloatBig 9s ease-in-out 1.8s infinite !important;
}
/* Fallback : si le drop n'a pas joué, montre quand même */
.ab-story-break-fig {
opacity: 1;
animation: polaroidFloatBig 9s ease-in-out infinite !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ TERROIRS · CARTE 3D INTERACTIVE · spline-scene focal
Perspective + tilt mouse + pins en relief + hover lift
═══════════════════════════════════════════════════════════════════ */
.ab-terroirs-map-wrap {
perspective: 1600px !important;
perspective-origin: 50% 40% !important;
position: relative;
}
/* Map container : surface 3D pilotée par CSS variables JS */
.ab-terroirs-map {
--map-tx: 0deg;
--map-ty: 0deg;
--map-tz: 0px;
position: relative !important;
transform-style: preserve-3d !important;
transform:
perspective(1600px)
translate3d(0, 0, var(--map-tz, 0px))
rotateX(var(--map-ty, 0deg))
rotateY(var(--map-tx, 0deg)) !important;
transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) !important;
will-change: transform;
/* Floating idle subtil */
animation: mapFloat 12s ease-in-out infinite;
}
@keyframes mapFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -4px; }
}
/* Hover : la carte se soulève vers l'utilisateur */
@media (hover: hover) and (pointer: fine) {
.ab-terroirs-map-wrap:hover .ab-terroirs-map {
--map-tz: 12px;
}
}
/* Le SVG dans la carte garde transform-style 3D pour les pins */
.ab-terroirs-map svg {
transform-style: preserve-3d;
overflow: visible !important;
}
/* Pins : translateZ pour qu'ils SORTENT du plan de la carte */
.ab-terroirs-map .ab-map-pin {
transform-origin: center;
transform-box: fill-box;
transform: translateZ(20px);
transition: transform .8s cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
/* Hover pin : sort encore plus en relief */
.ab-terroirs-map .ab-map-pin:hover,
.ab-terroirs-map .ab-map-pin.is-active {
transform: translateZ(45px) scale(1.08);
z-index: 10;
}
/* Pin halo : floating layer encore plus haut */
.ab-terroirs-map .ab-map-pin .ab-map-halo {
transform-origin: center;
transform-box: fill-box;
transform: translateZ(30px);
transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s, fill .55s;
will-change: transform, opacity;
}
.ab-terroirs-map .ab-map-pin:hover .ab-map-halo,
.ab-terroirs-map .ab-map-pin.is-active .ab-map-halo {
transform: translateZ(55px) scale(1.4);
opacity: .25 !important;
}
/* Pulsing halo for active state */
@keyframes pinPulse {
0%, 100% { opacity: .25; }
50% { opacity: .12; }
}
.ab-terroirs-map .ab-map-pin.is-active .ab-map-halo {
animation: pinPulse 2.4s ease-in-out infinite;
}
/* Pin dot : relief visible */
.ab-terroirs-map .ab-map-pin .ab-map-dot {
transform-origin: center;
transform-box: fill-box;
transform: translateZ(35px);
transition: transform .8s cubic-bezier(.16, 1, .3, 1), fill .55s, r .4s;
filter: drop-shadow(0 4px 6px rgba(20, 25, 18, .35));
will-change: transform;
}
.ab-terroirs-map .ab-map-pin:hover .ab-map-dot,
.ab-terroirs-map .ab-map-pin.is-active .ab-map-dot {
transform: translateZ(60px) scale(1.18);
filter: drop-shadow(0 8px 12px rgba(20, 25, 18, .5));
}
/* Pin labels : un peu en relief aussi (texte flottant) */
.ab-terroirs-map .ab-map-pin text {
transform: translateZ(25px);
transform-box: fill-box;
transition: transform .8s cubic-bezier(.16, 1, .3, 1), fill .55s;
}
.ab-terroirs-map .ab-map-pin:hover text,
.ab-terroirs-map .ab-map-pin.is-active text {
transform: translateZ(50px);
}
/* Map dynamic shadow under the entire container */
.ab-terroirs-map::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(
ellipse 70% 30% at 50% 95%,
rgba(20, 25, 18, .25) 0%,
rgba(20, 25, 18, 0) 70%
);
filter: blur(20px);
transform: translateZ(-50px);
transition: opacity .8s, transform .8s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
.ab-terroirs-map-wrap:hover .ab-terroirs-map::before {
opacity: 1.2;
transform: translateZ(-80px) translateY(20px);
}
/* Compass : flotte aussi en relief */
.ab-terroirs-compass {
transform: translateZ(40px);
transform-style: preserve-3d;
}
/* Note sous la carte */
.ab-terroirs-note {
transform: translateZ(0);
font-style: italic;
opacity: .7;
}
/* Mobile / reduced-motion : 3D désactivé */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
.ab-terroirs-map {
animation: none !important;
transform: none !important;
}
.ab-terroirs-map .ab-map-pin,
.ab-terroirs-map .ab-map-pin .ab-map-dot,
.ab-terroirs-map .ab-map-pin .ab-map-halo,
.ab-terroirs-map .ab-map-pin text {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ab-terroirs-map {
animation: none !important;
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
▉ POLAROIDS 3D · ATTÉNUATION FINALE (plus subtil, plus premium)
═══════════════════════════════════════════════════════════════════ */
/* Floating idle plus discret */
@keyframes polaroidFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -2px; }
}
@keyframes polaroidFloatAlt {
0%, 100% { translate: 0 -1px; }
50% { translate: 0 2px; }
}
@keyframes polaroidFloatBig {
0%, 100% { translate: 0 0; }
50% { translate: 0 -3px; }
}
/* Drop animation atténuée */
@keyframes polaroidDrop {
0% {
opacity: 0;
translate: 0 -16px;
rotate: -3deg;
scale: .97;
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, -1.6deg);
scale: 1;
}
}
@keyframes polaroidDropDramatic {
0% {
opacity: 0;
translate: 0 -24px;
rotate: -4deg;
scale: .95;
filter: blur(1.5px);
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, .6deg);
scale: 1;
filter: blur(0);
}
}
/* Lift hover plus discret */
@media (hover: hover) and (pointer: fine) {
.ab-story-fig:hover,
.ab-story-break-fig:hover {
--tz: 6px; /* 14 → 6 */
}
.ab-story-break-fig:hover {
--tz: 10px; /* 22 → 10 */
}
}
/* Glare highlight encore plus discret */
.ab-story-break-fig::before {
background: radial-gradient(
400px circle at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 255, 255, .06) 0%,
rgba(255, 255, 255, .02) 35%,
transparent 65%
) !important;
}
/* ═══════════════════════════════════════════════════════════════════
▉ APROPOS · ATTÉNUATION FINALE GLOBALE
Animations gardées mais à 50% d'intensité
═══════════════════════════════════════════════════════════════════ */
/* ─── Polaroids : floating quasi-imperceptible ─── */
@keyframes polaroidFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -1px; }
}
@keyframes polaroidFloatAlt {
0%, 100% { translate: 0 0; }
50% { translate: 0 1px; }
}
@keyframes polaroidFloatBig {
0%, 100% { translate: 0 0; }
50% { translate: 0 -1.5px; }
}
/* ─── Polaroid drop : encore plus tranquille ─── */
@keyframes polaroidDrop {
0% {
opacity: 0;
translate: 0 -10px;
rotate: -1.5deg;
scale: .985;
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, -1.6deg);
scale: 1;
}
}
@keyframes polaroidDropDramatic {
0% {
opacity: 0;
translate: 0 -14px;
rotate: -2deg;
scale: .98;
filter: blur(0.8px);
}
100% {
opacity: 1;
translate: 0 0;
rotate: var(--final-rotate, .6deg);
scale: 1;
filter: blur(0);
}
}
/* ─── Lift hover polaroids : à peine perceptible ─── */
@media (hover: hover) and (pointer: fine) {
.ab-story-fig:hover {
--tz: 3px !important; /* 6 → 3 */
}
.ab-story-break-fig:hover {
--tz: 5px !important; /* 10 → 5 */
}
}
/* ─── Glare presque invisible ─── */
.ab-story-break-fig::before {
background: radial-gradient(
320px circle at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 255, 255, .03) 0%,
rgba(255, 255, 255, .01) 35%,
transparent 65%
) !important;
}
/* ─── Map 3D : tilt réduit ─── */
.ab-terroirs-map {
animation: mapFloatSubtle 14s ease-in-out infinite !important;
}
@keyframes mapFloatSubtle {
0%, 100% { translate: 0 0; }
50% { translate: 0 -2px; }
}
/* Pins relief Z réduit */
.ab-terroirs-map .ab-map-pin {
transform: translateZ(10px) !important;
}
.ab-terroirs-map .ab-map-pin .ab-map-halo {
transform: translateZ(15px) !important;
}
.ab-terroirs-map .ab-map-pin .ab-map-dot {
transform: translateZ(18px) !important;
}
.ab-terroirs-map .ab-map-pin text {
transform: translateZ(12px) !important;
}
/* Hover pin réduit */
.ab-terroirs-map .ab-map-pin:hover,
.ab-terroirs-map .ab-map-pin.is-active {
transform: translateZ(22px) scale(1.04) !important;
}
.ab-terroirs-map .ab-map-pin:hover .ab-map-halo,
.ab-terroirs-map .ab-map-pin.is-active .ab-map-halo {
transform: translateZ(28px) scale(1.2) !important;
opacity: .15 !important;
}
.ab-terroirs-map .ab-map-pin:hover .ab-map-dot,
.ab-terroirs-map .ab-map-pin.is-active .ab-map-dot {
transform: translateZ(30px) scale(1.1) !important;
}
.ab-terroirs-map .ab-map-pin:hover text,
.ab-terroirs-map .ab-map-pin.is-active text {
transform: translateZ(24px) !important;
}
/* Hover map lift moins prononcé */
@media (hover: hover) and (pointer: fine) {
.ab-terroirs-map-wrap:hover .ab-terroirs-map {
--map-tz: 6px !important; /* 12 → 6 */
}
}
/* Pulse halo plus discret */
@keyframes pinPulse {
0%, 100% { opacity: .15; }
50% { opacity: .08; }
}
/* Map shadow plus discret */
.ab-terroirs-map::before {
filter: blur(14px) !important;
}
/* ─── Reveals plus rapides et discrets ─── */
.rv {
transition: opacity 1s var(--ease-silk), transform 1s var(--ease-silk) !important;
transform: translateY(14px);
}
.rv-stagger.on > * {
transition: opacity .85s var(--ease-silk), transform .85s var(--ease-silk) !important;
}
/* Stagger delay réduit */
.rv-stagger.on > *:nth-child(1) { transition-delay: 0ms !important; }
.rv-stagger.on > *:nth-child(2) { transition-delay: 70ms !important; }
.rv-stagger.on > *:nth-child(3) { transition-delay: 140ms !important; }
.rv-stagger.on > *:nth-child(4) { transition-delay: 210ms !important; }
.rv-stagger.on > *:nth-child(5) { transition-delay: 280ms !important; }
.rv-stagger.on > *:nth-child(6) { transition-delay: 350ms !important; }
/* ─── Saisons : transitions plus discrètes ─── */
body.page-about .ab-saisons-row.is-hover .ab-saisons-bar span.on {
transform: scaleY(1.04) !important; /* 1.08 → 1.04 */
}
/* ─── Hero crest star : rotation extra-lente ─── */
body.page-about .hero-crest-star {
animation-duration: 48s !important; /* 32 → 48 */
}
/* ─── Marquee plus lent (apropos uniquement) ─── */
body.page-about .marquee {
animation-duration: 90s !important; /* 72 → 90 */
}
/* ═══════════════════════════════════════════════════════════════════
▉ CONTACT MODAL · popup interlocuteurs (cross-page)
═══════════════════════════════════════════════════════════════════ */
.contact-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity .35s var(--ease-silk);
}
.contact-modal-overlay[hidden] { display: none !important; }
.contact-modal-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.contact-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 25, 18, .55);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.contact-modal {
position: relative;
z-index: 1;
width: 100%;
max-width: 920px;
max-height: calc(100vh - 4rem);
overflow-y: auto;
background: var(--bg);
padding: clamp(2rem, 4vw, 3.5rem);
box-shadow:
0 24px 60px rgba(20, 25, 18, .35),
0 60px 120px rgba(20, 25, 18, .2);
transform: translateY(20px) scale(.98);
transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.contact-modal-overlay.is-open .contact-modal {
transform: translateY(0) scale(1);
}
/* Close button */
.contact-modal-close {
position: absolute;
top: 1.4rem;
right: 1.4rem;
width: 40px;
height: 40px;
border: 1px solid var(--border);
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .35s, border-color .35s, transform .35s;
color: var(--ink);
z-index: 2;
}
.contact-modal-close:hover {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
transform: rotate(90deg);
}
.contact-modal-close svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
/* Head */
.contact-modal-head {
margin-bottom: 2.4rem;
max-width: 36rem;
}
.contact-modal-eyebrow {
display: inline-block;
font-family: var(--fm);
font-size: var(--t-label, .68rem);
letter-spacing: var(--ls-label, .26em);
text-transform: uppercase;
color: var(--sage-d);
margin-bottom: 1rem;
}
.contact-modal-title {
font-family: var(--fd);
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
line-height: 1.05;
font-weight: 400;
color: var(--ink);
margin: 0 0 1rem;
letter-spacing: -.012em;
font-variation-settings: var(--fr-section, "opsz" 144, "SOFT" 90);
}
.contact-modal-title em {
font-style: italic;
color: var(--sage-d);
}
.contact-modal-intro {
font-family: var(--fb);
font-size: 1rem;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
max-width: 50ch;
}
/* Grid */
.contact-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.4rem;
margin-bottom: 2rem;
}
.contact-modal-block {
background: var(--white);
padding: 1.5rem 1.4rem;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: .6rem;
transition: border-color .35s, transform .35s, box-shadow .35s;
}
.contact-modal-block:hover {
border-color: var(--sage);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(20, 25, 18, .08);
}
.contact-modal-region {
font-family: var(--fm);
font-size: .58rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--sage-d);
font-weight: 500;
}
.contact-modal-name {
font-family: var(--fd);
font-size: 1.4rem;
line-height: 1.05;
font-weight: 400;
color: var(--ink);
margin: 0;
letter-spacing: -.012em;
}
.contact-modal-role {
font-family: var(--fb);
font-style: italic;
font-size: .82rem;
line-height: 1.4;
color: var(--stone);
margin: 0 0 .4rem;
}
.contact-modal-links {
display: flex;
flex-direction: column;
gap: .55rem;
border-top: 1px solid var(--border);
padding-top: .85rem;
margin-top: auto;
}
.contact-modal-link {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: var(--fb);
font-size: .85rem;
color: var(--ink);
text-decoration: none;
transition: color .25s;
word-break: break-all;
}
.contact-modal-link:hover {
color: var(--sage-d);
}
.contact-modal-link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
stroke: var(--sage-d);
stroke-width: 1.6;
fill: none;
}
/* Footer general info */
.contact-modal-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
padding-top: 1.6rem;
border-top: 1px solid var(--border);
}
.contact-modal-foot-item {
display: flex;
flex-direction: column;
gap: .25rem;
}
.contact-modal-foot-label {
font-family: var(--fm);
font-size: .58rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--stone);
}
.contact-modal-foot-val {
font-family: var(--fb);
font-size: .9rem;
color: var(--ink);
text-decoration: none;
}
a.contact-modal-foot-val:hover {
color: var(--sage-d);
}
@media (max-width: 700px) {
.contact-modal {
padding: 1.5rem 1.2rem;
max-height: 100vh;
}
.contact-modal-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-modal-foot {
grid-template-columns: 1fr;
}
.contact-modal-close {
top: 1rem;
right: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.contact-modal-overlay,
.contact-modal-overlay .contact-modal {
transition: opacity .15s linear !important;
transform: none !important;
}
}