/* =========================================================
Mersier Pâtisserie — Style v2
Palette cuivré Pantone · Macondo Swash Caps · Baskerville · Inter
Style new-yorkais moderne, airy, raffiné
========================================================= */
:root {
/* ============ Palette cuivré (Pantone-inspired) ============ */
--copper-50: #FAF6F1;
--copper-100: #F5ECDF;
--copper-200: #E8D3B7;
--copper-300: #D8B186;
--copper-400: #C9885E;
--copper-500: #B87333; /* Cuivre principal */
--copper-600: #9A5E2A;
--copper-700: #7C4920;
--copper-800: #5E3717;
--copper-900: #3F250F;
/* ============ Neutres ============ */
--white: #FFFFFF;
--off-white: #FBFAF7;
--cream: #F5EFE8;
--paper: #F9F4EC;
--border: #ECE3D5;
--border-strong: #D9CBB4;
--ink-900: #1A130D; /* 17:1 sur blanc — texte principal */
--ink-700: #3D2F23; /* 11:1 sur blanc — paragraphes */
--ink-500: #6B5947; /* 6:1 sur blanc — muted, lisible AAA */
--ink-400: #877262; /* 4.6:1 sur blanc — muted minimal AA */
--ink-300: #A89685; /* 3.0:1 — décoratif, JAMAIS pour texte de lecture */
/* ============ Aliases sémantiques ============ */
--color-primary: var(--copper-500);
--color-primary-dark: var(--copper-700);
--color-primary-light: var(--copper-400);
--color-accent: var(--copper-300);
--color-bg: var(--off-white);
--color-surface: var(--white);
--color-text: var(--ink-900);
--color-text-muted: var(--ink-500);
--color-success: #4A7C59;
--color-error: #B33A3A;
--color-warning: var(--copper-500);
/* ============ Typo ============ */
--font-brand: 'Macondo Swash Caps', 'Baskerville', Georgia, serif;
--font-serif: 'Libre Baskerville', 'Baskerville', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
/* ============ Ombres ============ */
--shadow-xs: 0 1px 2px rgba(26, 19, 13, 0.04);
--shadow-sm: 0 2px 8px rgba(26, 19, 13, 0.06);
--shadow-md: 0 8px 24px rgba(26, 19, 13, 0.08);
--shadow-lg: 0 24px 56px rgba(26, 19, 13, 0.12);
--shadow-copper: 0 12px 32px rgba(184, 115, 51, 0.18);
/* ============ Radius & transitions ============ */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ============ Palette logo — beige parchemin + chocolat ============ */
--parchment: #CBB18C;
--parchment-light: #D3BE9C;
--parchment-pale: #E2D2B8;
--parchment-cream: #F6EFE4;
--chocolat: #3A2418;
--chocolat-mid: #5A3926;
--caramel: #A87545;
--caramel-soft: #C49A6C;
--hero-brown: #8C572A; /* brun cuivré — marque hero + titres de pages */
/* ============ Layout ============ */
--container: 1340px;
--container-narrow: 880px;
--header-h: 88px;
}
/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
/* ============ Typographie ============ */
h1, h2, h3, h4, h5 {
font-family: var(--font-serif);
font-weight: 400;
color: var(--ink-900);
margin: 0 0 0.4em;
letter-spacing: -0.01em;
line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -0.02em; color: var(--chocolat); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--ink-700); }
a { color: var(--copper-600); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--copper-800); }
::selection { background: var(--copper-200); color: var(--ink-900); }
/* Eyebrow & display (Macondo Swash Caps) */
.eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-600);
margin-bottom: 1rem;
}
.display {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--copper-700);
}
/* ============ Layout helpers ============ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; }
.section-tight { padding: 80px 0; }
.section-title { text-align: center; margin-bottom: 64px; }
.section-title h2 { margin-bottom: 0; }
.section-title .eyebrow { margin-bottom: 0.75rem; }
.divider {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
margin: 56px auto;
width: 80%;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mt-4 { margin-top: 24px; }
/* ============ Header ============ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(251, 250, 247, 0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(217, 203, 180, 0.4);
transition: background .3s, border-color .3s;
}
.site-header--transparent {
background: transparent;
border-bottom-color: transparent;
position: fixed;
left: 0; right: 0;
}
.site-header--transparent .header-top {
background: rgba(26, 19, 13, 0.5);
}
.site-header--transparent .main-nav a { color: rgba(255, 255, 255, 0.92); }
.site-header--transparent .main-nav a:hover { color: var(--copper-300); }
.site-header--transparent .main-nav a::after { background: var(--copper-300); }
.site-header--transparent .btn-icon { color: white; }
.site-header--transparent .btn-icon:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: white;
}
.site-header--transparent .brand-logo--dark { display: none; }
.site-header--transparent .brand-logo--white { display: block; }
.site-header--transparent .brand-name { color: white; }
.site-header--transparent .brand-tagline { color: rgba(255, 255, 255, 0.7); }
.site-header--transparent.is-scrolled {
background: rgba(251, 250, 247, 0.95);
border-bottom-color: rgba(217, 203, 180, 0.4);
}
.site-header--transparent.is-scrolled .header-top { background: var(--ink-900); }
.site-header--transparent.is-scrolled .main-nav a { color: var(--ink-700); }
.site-header--transparent.is-scrolled .main-nav a:hover { color: var(--copper-600); }
.site-header--transparent.is-scrolled .main-nav a::after { background: var(--copper-500); }
.site-header--transparent.is-scrolled .btn-icon { color: var(--ink-700); }
.site-header--transparent.is-scrolled .brand-logo--dark { display: block; }
.site-header--transparent.is-scrolled .brand-logo--white { display: none; }
.site-header--transparent.is-scrolled .brand-name { color: var(--ink-900); }
.site-header--transparent.is-scrolled .brand-tagline { color: var(--ink-500); }
.header-top {
background: var(--ink-900);
color: var(--copper-100);
font-size: 0.78rem;
padding: 8px 0;
letter-spacing: 0.04em;
}
.header-top a { color: var(--copper-200); }
.header-top a:hover { color: var(--copper-400); }
.header-top .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.header-main {
height: var(--header-h);
padding: 0 32px;
max-width: var(--container);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
text-decoration: none;
line-height: 1;
}
.brand-logo {
width: 65px;
height: 65px;
object-fit: contain;
}
.brand-logo--white { display: none; }
.brand-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.brand-name {
font-family: var(--font-serif);
font-size: 1.7rem;
color: var(--ink-900);
letter-spacing: 0.02em;
line-height: 0.9;
transition: color .3s;
}
.brand-tagline {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-500);
transition: color .3s;
}
.brand:hover .brand-name { color: var(--copper-600); }
.main-nav {
display: flex;
align-items: center;
gap: 36px;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.main-nav a {
color: var(--ink-700);
position: relative;
padding: 8px 0;
transition: color .25s var(--ease);
}
.main-nav a:hover { color: var(--copper-600); }
.main-nav a.active { color: var(--copper-700); }
.main-nav a::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background: var(--copper-500);
transition: all .3s var(--ease-out);
transform: translateX(-50%);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
color: var(--ink-700);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: all .25s var(--ease);
text-decoration: none;
}
.btn-icon:hover { border-color: var(--copper-300); background: var(--copper-50); color: var(--copper-700); }
.cart-badge {
position: absolute;
top: 2px; right: 2px;
background: var(--copper-500);
color: white;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 600;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans);
}
.menu-toggle { display: none; background: none; border: none; color: var(--ink-900); }
/* ============ Hero ============ */
.hero {
position: relative;
min-height: calc(100vh - var(--header-h) - 38px);
display: grid;
place-items: center;
overflow: hidden;
background: var(--ink-900);
color: white;
}
.hero--fullscreen {
min-height: 100vh;
margin-top: calc(-1 * (var(--header-h) + 38px));
padding-top: calc(var(--header-h) + 38px);
}
.hero-logo {
width: 96px;
height: 96px;
margin: 0 auto 24px;
display: block;
opacity: 0.95;
}
.hero-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
transform: scale(1.02);
transition: transform 8s var(--ease-out);
}
.hero:hover .hero-image { transform: scale(1.05); }
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(26, 19, 13, 0.15) 0%,
rgba(26, 19, 13, 0.4) 60%,
rgba(26, 19, 13, 0.75) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 880px;
padding: 80px 32px;
text-align: center;
color: white;
}
.hero-content .eyebrow { color: var(--copper-300); }
.hero h1 {
font-family: var(--font-serif);
font-size: clamp(3rem, 7vw, 5.5rem);
color: white;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 0.3em;
line-height: 1.05;
}
.hero h1 .accent {
display: block;
font-family: var(--font-serif);
color: var(--copper-300);
font-size: 0.85em;
letter-spacing: 0.02em;
margin-top: 0.1em;
}
.hero-subtitle {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: rgba(255, 255, 255, 0.85);
font-weight: 300;
max-width: 620px;
margin: 0 auto 40px;
line-height: 1.6;
}
.hero-cta {
display: inline-flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
pointer-events: none;
user-select: none;
}
.hero-scroll span { white-space: nowrap; }
.hero-scroll svg { display: none; } /* on remplace l'ancien icône par un trait animé */
.hero-scroll::after {
content: '';
display: block;
width: 1px;
height: 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.15) 100%);
position: relative;
overflow: hidden;
}
.hero-scroll::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 16px;
background: var(--copper-300);
transform: translateX(-50%);
animation: scrollDot 2.2s var(--ease-out) infinite;
z-index: 1;
}
@keyframes scrollDot {
0% { transform: translate(-50%, -48px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translate(-50%, 0); opacity: 0; }
}
/* ============ Buttons ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
border: 1px solid transparent;
border-radius: var(--radius-xs);
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all .3s var(--ease);
line-height: 1;
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--chocolat);
color: var(--parchment-cream);
border-color: var(--chocolat);
}
.btn-primary:hover {
background: var(--chocolat-mid);
border-color: var(--chocolat-mid);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(58, 36, 24, 0.25);
}
.btn-outline {
background: transparent;
color: var(--copper-700);
border-color: var(--copper-400);
}
.btn-outline:hover {
background: var(--copper-500);
border-color: var(--copper-500);
color: white;
}
.btn-outline-light {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover {
background: white;
color: var(--ink-900);
border-color: white;
}
.btn-ghost {
background: transparent;
color: var(--ink-500);
border-color: transparent;
}
.btn-ghost:hover { color: var(--copper-600); }
.btn-danger {
background: var(--color-error);
color: white;
border-color: var(--color-error);
}
.btn-danger:hover { background: #8B2929; border-color: #8B2929; }
.btn-sm { padding: 10px 20px; font-size: 0.72rem; }
.btn-lg { padding: 18px 40px; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ============ Product card ============ */
.products-grid {
display: grid;
/* auto-fit + max 320px : si on a moins d'items que de colonnes possibles,
les colonnes vides s'effondrent et justify-content:center les recentre */
grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
gap: 40px 32px;
justify-content: center;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
.product-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: all .4s var(--ease-out);
display: flex;
flex-direction: column;
position: relative;
}
.product-card:hover {
transform: translateY(-6px);
border-color: var(--copper-200);
box-shadow: var(--shadow-lg);
}
.product-card > a {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.product-card-image {
aspect-ratio: 4 / 5;
background: var(--copper-50);
overflow: hidden;
position: relative;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease-out);
}
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-card-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--copper-50) 0%, var(--cream) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.product-card-placeholder img {
width: 45% !important;
height: auto !important;
opacity: 0.7;
object-fit: contain !important;
transition: transform .8s var(--ease-out), opacity .4s !important;
}
.product-card:hover .product-card-placeholder img { opacity: 0.9; transform: scale(1.08) !important; }
.product-card-body {
padding: 24px;
flex: 1;
display: grid;
/* Grid rows fixes : category / name / desc(1fr) / tags / footer
→ tous les éléments s'alignent verticalement entre cards adjacentes */
grid-template-rows: auto auto 1fr auto auto;
gap: 0;
}
.product-card-category {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-600);
margin-bottom: 10px;
font-weight: 500;
}
.product-card-name {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.25rem;
color: var(--chocolat);
margin: 0 0 8px;
letter-spacing: -0.005em;
}
.product-card-desc {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0 0 18px;
}
.product-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.product-card-price {
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--copper-700);
font-weight: 500;
}
.product-card-price small {
display: block;
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-500);
font-weight: 400;
margin-bottom: 2px;
}
.product-card-link {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--copper-700);
font-weight: 500;
}
/* Badges */
/* ============ MARQUEUR PREMIUM (Signature / Nouveauté) ============ */
.card-marker {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 12px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 14px rgba(26, 19, 13, 0.10);
color: var(--copper-800);
white-space: nowrap;
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.product-card:hover .card-marker {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(26, 19, 13, 0.14);
}
.card-marker-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--copper-600);
flex-shrink: 0;
}
.card-marker.is-new .card-marker-dot {
background: #4A7C59;
animation: cardMarkerPulse 2s ease-in-out infinite;
}
.card-marker.is-new {
color: #2D5A3F;
}
@keyframes cardMarkerPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.45); }
50% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(74, 124, 89, 0); }
}
/* Legacy : ancien composant .product-badges / .badge maintenu pour
compatibilité avec d'autres vues (product/show, etc.) — voir plus bas. */
.product-badges {
position: absolute;
top: 16px;
left: 16px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
}
.badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
background: var(--white);
color: var(--ink-700);
border: 1px solid var(--border);
}
.badge-new { background: var(--copper-700); color: white; border-color: var(--copper-700); }
.badge-signature { background: var(--copper-300); color: var(--ink-900); border-color: var(--copper-300); }
.badge-seasonal { background: var(--copper-100); color: var(--copper-800); border-color: var(--copper-200); }
.badge-gluten { background: white; color: var(--ink-700); }
/* ============ Categories pills ============ */
.cat-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.cat-pill {
padding: 10px 22px;
border-radius: var(--radius-pill);
background: transparent;
border: 1px solid var(--border-strong);
color: var(--ink-700);
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: all .25s var(--ease);
}
.cat-pill:hover {
border-color: var(--copper-500);
color: var(--copper-700);
}
.cat-pill.active {
background: var(--copper-500);
color: white;
border-color: var(--copper-500);
}
/* ============ Forms ============ */
.form-group { margin-bottom: 24px; }
.form-group label {
display: block;
margin-bottom: 8px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-700);
}
.form-group label .required { color: var(--copper-600); }
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="datetime-local"], select, textarea {
width: 100%;
padding: 13px 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--ink-900);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: all .2s var(--ease);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
outline: none;
border-color: var(--copper-500);
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.form-help { font-size: 0.78rem; color: var(--ink-500); margin-top: 6px; }
.form-error { color: var(--color-error); font-size: 0.82rem; margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--font-sans);
font-size: 0.92rem;
cursor: pointer;
color: var(--ink-700);
}
.form-checkbox input { width: auto; margin-top: 3px; accent-color: var(--copper-500); }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
/* ============ Alerts ============ */
.alert {
padding: 16px 20px;
border-radius: var(--radius-sm);
margin-bottom: 24px;
border-left: 3px solid;
background: white;
font-size: 0.92rem;
}
.alert-success { border-color: var(--color-success); background: #F3F8F4; color: #2D5A3F; }
.alert-error { border-color: var(--color-error); background: #FBF3F3; color: #7A2929; }
.alert-warning { border-color: var(--copper-500); background: var(--copper-50); color: var(--copper-800); }
.alert-info { border-color: var(--copper-400); background: var(--copper-50); color: var(--copper-800); }
/* ============ TOAST NOTIFICATIONS (flash messages) ============ */
.toast-stack {
position: fixed;
top: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
max-width: calc(100vw - 48px);
width: 380px;
}
.toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 14px;
background: #fff;
border-radius: 12px;
padding: 16px 20px 16px 18px;
box-shadow:
0 1px 2px rgba(26, 19, 13, 0.06),
0 12px 32px rgba(26, 19, 13, 0.16);
border: 1px solid var(--border);
border-left: 4px solid var(--copper-500);
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-900);
opacity: 0;
transform: translateX(40px) scale(0.96);
transition:
opacity .35s var(--ease-out),
transform .45s var(--ease-out);
}
.toast.is-visible {
opacity: 1;
transform: translateX(0) scale(1);
}
.toast.is-leaving {
opacity: 0;
transform: translateX(60px) scale(0.94);
transition:
opacity .3s var(--ease),
transform .3s var(--ease);
}
.toast-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
margin-top: -1px;
}
.toast-body {
flex: 1;
min-width: 0;
padding-top: 4px;
word-wrap: break-word;
}
.toast-close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--ink-400);
font-size: 1.4rem;
line-height: 1;
padding: 0 4px;
margin-top: -2px;
transition: color .2s var(--ease);
}
.toast-close:hover { color: var(--ink-900); }
/* Variants */
.toast--success {
border-left-color: #4A7C59;
}
.toast--success .toast-icon {
background: #E8F5EC;
color: #2D5A3F;
}
.toast--error {
border-left-color: #B33A3A;
}
.toast--error .toast-icon {
background: #FBEAEA;
color: #7A2929;
}
.toast--info {
border-left-color: var(--copper-500);
}
.toast--info .toast-icon {
background: var(--copper-50);
color: var(--copper-700);
}
@media (max-width: 640px) {
.toast-stack {
top: 16px;
right: 16px;
left: 16px;
width: auto;
max-width: none;
}
.toast {
padding: 14px 16px;
font-size: 0.88rem;
border-radius: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity .15s; transform: none !important; }
}
/* ============ Footer ============ */
.site-footer {
background: var(--copper-900);
color: var(--copper-100);
padding: 96px 0 32px;
margin-top: 120px;
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--copper-500), transparent);
}
.site-footer h4 {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-400);
margin-bottom: 18px;
font-weight: 500;
}
.site-footer a { color: rgba(255, 255, 255, 0.75); transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--copper-300); }
.site-footer p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.footer-brand {
font-family: var(--font-serif);
font-size: 2.5rem;
color: var(--copper-300);
margin-bottom: 16px;
display: inline-block;
}
.footer-logo {
width: 72px;
height: 72px;
opacity: 0.95;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 56px;
margin-bottom: 64px;
}
.footer-newsletter form {
display: flex;
gap: 0;
margin-top: 16px;
border-bottom: 1px solid rgba(216, 177, 134, 0.3);
}
.footer-newsletter input {
background: transparent;
border: 0;
color: white;
padding: 12px 0;
flex: 1;
border-radius: 0;
}
.footer-newsletter input:focus { box-shadow: none; border-bottom-color: var(--copper-400); }
.footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-newsletter button {
background: transparent;
border: 0;
color: var(--copper-300);
padding: 0 0 0 16px;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: color .25s;
}
.footer-newsletter button:hover { color: var(--copper-200); }
.footer-bottom {
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.5);
}
.footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.footer-links a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.82rem;
}
/* ============ Cart / Order ============ */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
text-align: left;
padding: 16px 12px;
border-bottom: 1px solid var(--border-strong);
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-500);
}
.cart-table td {
padding: 24px 12px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.cart-item-image {
width: 96px; height: 96px;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.cart-summary {
background: var(--cream);
padding: 32px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.cart-summary h3 {
font-family: var(--font-serif);
margin-top: 0;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-strong);
}
.cart-summary-line {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
}
.cart-summary-line:last-of-type {
border-bottom: 0;
padding-top: 20px;
margin-top: 8px;
border-top: 2px solid var(--ink-900);
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--copper-700);
font-weight: 500;
}
.qty-control {
display: inline-flex;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
}
.qty-control button {
background: transparent;
border: 0;
padding: 10px 14px;
cursor: pointer;
color: var(--ink-700);
transition: all .2s;
}
.qty-control button:hover { background: var(--copper-50); color: var(--copper-700); }
.qty-control input {
width: 56px;
text-align: center;
border: 0;
padding: 10px 0;
background: transparent;
}
.qty-control input:focus { box-shadow: none; }
/* ============ Product detail ============ */
.product-detail {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
margin-bottom: 96px;
}
.product-detail-image {
background: var(--copper-50);
border-radius: var(--radius-md);
aspect-ratio: 1;
overflow: hidden;
position: relative;
}
.product-detail-image img {
width: 100%; height: 100%; object-fit: cover;
}
.product-detail-eyebrow {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-600);
margin-bottom: 16px;
font-weight: 500;
}
.product-detail-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
margin: 0 0 16px;
font-weight: 400;
line-height: 1.1;
}
.product-detail-short {
font-size: 1.1rem;
color: var(--ink-500);
line-height: 1.6;
margin-bottom: 32px;
}
.product-detail-price {
font-family: var(--font-serif);
font-size: 2.2rem;
color: var(--copper-700);
font-weight: 500;
margin-bottom: 36px;
}
.product-variants {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
.variant-btn {
padding: 12px 22px;
border: 1px solid var(--border-strong);
background: white;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.88rem;
color: var(--ink-700);
transition: all .25s var(--ease);
}
.variant-btn:hover { border-color: var(--copper-500); color: var(--copper-700); }
.variant-btn.active {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.product-tabs {
border-top: 1px solid var(--border);
margin-top: 64px;
padding-top: 64px;
}
.product-tabs h3 {
font-family: var(--font-serif);
margin: 32px 0 16px;
font-size: 1.4rem;
}
.allergens-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.allergen-tag {
display: inline-block;
padding: 6px 14px;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: 0.78rem;
color: var(--ink-700);
letter-spacing: 0.04em;
}
/* ============ Checkout ============ */
.checkout-layout {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 64px;
}
.checkout-section { margin-bottom: 48px; }
.checkout-section h2 {
font-family: var(--font-serif);
font-size: 1.45rem;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.delivery-method-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
}
.method-card {
padding: 24px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: white;
cursor: pointer;
transition: all .25s var(--ease);
}
.method-card:hover { border-color: var(--copper-400); }
.method-card.active {
border-color: var(--copper-500);
background: var(--copper-50);
box-shadow: var(--shadow-sm);
}
.method-card h4 {
font-family: var(--font-serif);
font-size: 1.05rem;
margin: 0 0 6px;
}
.method-card small {
color: var(--ink-500);
display: block;
}
.stripe-element {
padding: 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: white;
}
/* ============ Pagination ============ */
.pagination {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 56px;
flex-wrap: wrap;
}
.pagination a, .pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px; height: 40px;
padding: 0 14px;
border: 1px solid var(--border-strong);
background: white;
text-decoration: none;
color: var(--ink-700);
font-family: var(--font-sans);
font-size: 0.88rem;
border-radius: var(--radius-sm);
transition: all .2s;
}
.pagination a:hover { border-color: var(--copper-500); color: var(--copper-700); }
.pagination .current {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
/* ============ Shop layout ============ */
.shop-header {
background: var(--cream);
padding: 72px 0 48px;
border-bottom: 1px solid var(--border);
}
.shop-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 56px;
}
.shop-sidebar h4 {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-500);
margin: 0 0 16px;
font-weight: 500;
}
.filter-group {
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: 0; }
.filter-group a {
display: block;
padding: 6px 0;
color: var(--ink-700);
font-size: 0.92rem;
transition: color .2s;
}
.filter-group a:hover, .filter-group a.active { color: var(--copper-700); }
.filter-group a small { color: var(--ink-300); margin-left: 6px; }
.shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
gap: 16px;
}
.shop-toolbar select {
width: auto;
padding: 8px 32px 8px 14px;
font-size: 0.88rem;
}
/* ============ Status badges ============ */
.status-badge {
display: inline-block;
padding: 5px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.status-pending { background: #FFF4E0; color: #8C5A0F; }
.status-paid { background: #DDEEDB; color: #2D5A3F; }
.status-preparing { background: #DCEAF5; color: #1F4670; }
.status-ready { background: #DAEEEC; color: #1A5A56; }
.status-delivered { background: #DDEEDB; color: #2D5A3F; }
.status-cancelled { background: #F5DDDC; color: #7A2929; }
.status-refunded { background: #E8E5E0; color: #5A4F45; }
/* ============ Tables ============ */
.table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border);
}
.table th {
padding: 14px 18px;
background: var(--copper-50);
border-bottom: 1px solid var(--border);
text-align: left;
font-family: var(--font-sans);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-500);
font-weight: 500;
}
.table td {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
font-size: 0.92rem;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--off-white); }
/* ============ Empty state ============ */
.empty-state {
text-align: center;
padding: 80px 20px;
color: var(--ink-500);
}
.empty-state h3 {
font-family: var(--font-serif);
color: var(--ink-700);
margin-bottom: 16px;
}
/* ============ Spinner ============ */
.spinner {
display: inline-block;
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* =========================================================
Responsive · mobile-first · v3
Architecture: base = desktop (≥901px), surcharges < 900px
========================================================= */
/* ─── Safety net : aucun débordement horizontal global ─── */
html, body {
overflow-x: hidden;
max-width: 100%;
}
img, video, iframe { max-width: 100%; height: auto; }
/* Éviter qu'un long mot casse la mise en page */
.product-card-name, .product-card-desc, .carte-name, .carte-desc,
h1, h2, h3, p {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* ─── Améliorations contraste (s'applique à toutes tailles) ─── */
.eyebrow { color: var(--copper-700); }
.section--dark .eyebrow,
.hero .eyebrow,
[style*="ink-900"] .eyebrow { color: var(--copper-300); }
.product-card-price,
.product-card-link,
.product-detail-price,
.carte-price { color: var(--copper-800); }
.carte-num { color: var(--copper-700); }
.footer-bottom { color: rgba(255, 255, 255, 0.7); }
.footer-links a { color: rgba(255, 255, 255, 0.7); }
.footer-links a:hover { color: var(--copper-300); }
.site-footer p { color: rgba(255, 255, 255, 0.82); }
.site-header--transparent .brand-tagline { color: rgba(255, 255, 255, 0.85); }
.text-muted,
.product-card-desc { color: var(--ink-500); }
input::placeholder, textarea::placeholder {
color: var(--ink-500);
opacity: 0.9;
}
/* Focus accessible */
:focus-visible {
outline: 2px solid var(--copper-500);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* Touch targets : 44px minimum (Apple HIG) */
.btn { min-height: 44px; }
.btn-icon { width: 44px; height: 44px; }
input, select, textarea { min-height: 48px; font-size: 1rem; }
/* Badges réajustés contraste */
.badge-new { background: var(--copper-800); color: white; }
.badge-signature { background: var(--copper-600); color: white; }
.badge-seasonal { background: white; color: var(--copper-900); border: 1px solid var(--copper-400); }
.badge-gluten { background: white; color: var(--ink-700); }
/* Status badges contraste AA */
.status-pending { background: #FEF3C7; color: #78350F; }
.status-paid { background: #D1FAE5; color: #064E3B; }
.status-preparing { background: #DBEAFE; color: #1E3A8A; }
.status-ready { background: #CCFBF1; color: #134E4A; }
.status-delivered { background: #D1FAE5; color: #064E3B; }
.status-cancelled { background: #FEE2E2; color: #7F1D1D; }
.status-refunded { background: #E5E7EB; color: #1F2937; }
/* Animations respectent l'accessibilité */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================
Tablette · ≤ 1024px
========================================================= */
@media (max-width: 1024px) {
.container { padding: 0 28px; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-title { margin-bottom: 48px; }
/* Header un peu plus compact */
:root { --header-h: 78px; }
/* Carte (menu) un peu plus serré */
.section--carte { padding: 96px 0; }
/* Grilles complexes : passer en 1 colonne quand trop étroit */
.product-detail { grid-template-columns: 1fr; gap: 48px; }
.product-detail-image { aspect-ratio: 4/3; max-width: 600px; margin: 0 auto; }
.checkout-layout { grid-template-columns: 1fr; gap: 40px; }
.shop-layout { grid-template-columns: 220px 1fr; gap: 32px; }
.about-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
.visit-grid { grid-template-columns: 1fr; }
.visit-info { padding: 64px 40px; }
.visit-map .map { min-height: 380px; }
.contact-layout { grid-template-columns: 1fr; gap: 32px; max-width: 720px; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-newsletter { grid-column: span 3; max-width: 480px; }
.pillars-grid { gap: 40px; }
/* Products grid : 3 colonnes au lieu de 4+ */
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 28px;
}
}
/* =========================================================
Mobile · ≤ 900px
========================================================= */
@media (max-width: 900px) {
:root { --header-h: 64px; }
.container { padding: 0 20px; }
/* ─── Header mobile : compact ─── */
.header-top { display: none; }
.header-main {
height: 64px;
padding: 0 16px;
max-width: 100%;
}
.brand { gap: 10px; }
.brand-logo { width: 45px; height: 45px; }
.brand-name { font-size: 1.25rem; }
.brand-tagline {
font-size: 0.5rem;
letter-spacing: 0.2em;
}
/* Sur mobile : masquer le tagline pour gagner de la place */
@media (max-width: 480px) {
.brand-tagline { display: none; }
.brand-logo { width: 40px; height: 40px; }
.brand-name { font-size: 1.1rem; }
}
.header-actions { gap: 4px; }
.btn-icon { width: 40px; height: 40px; }
/* ─── BURGER MENU · implémentation propre ─── */
.menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
z-index: 1002;
position: relative;
}
/* Masquer nav par défaut : drawer slide-in depuis la droite */
.main-nav {
position: fixed;
top: 0;
right: 0;
width: min(320px, 88vw);
max-width: 320px;
height: 100dvh;
height: 100vh;
background: var(--white);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 88px 28px 32px;
box-shadow: -20px 0 60px rgba(26, 19, 13, 0.18);
transform: translate3d(100%, 0, 0);
transition: transform .3s ease-out;
overflow-y: auto;
overscroll-behavior: contain;
z-index: 1001;
border: 0;
margin: 0;
}
.main-nav.open {
transform: translate3d(0, 0, 0);
}
/* Liens dans le drawer : style propre, dark sur fond blanc */
.main-nav a {
color: var(--ink-900) !important;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 18px 0;
border-bottom: 1px solid var(--border);
display: block;
text-align: left;
}
.main-nav a::after { display: none !important; }
.main-nav a:last-child { border-bottom: 0; }
.main-nav a:hover,
.main-nav a.active { color: var(--copper-700) !important; }
.main-nav a.active { font-weight: 600; }
/* Overlay sombre derrière le drawer ouvert */
body.menu-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(26, 19, 13, 0.5);
z-index: 1000;
animation: fadeIn .25s ease-out;
}
body.menu-open { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Quand le menu est ouvert : le toggle reste visible et accessible.
Le header transparent passe en solide pour que le burger soit lisible. */
body.menu-open .site-header,
body.menu-open .site-header--transparent {
background: rgba(251, 250, 247, 0.96) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
body.menu-open .site-header .btn-icon,
body.menu-open .site-header .menu-toggle,
body.menu-open .site-header--transparent .btn-icon,
body.menu-open .site-header--transparent .menu-toggle {
color: var(--ink-900) !important;
}
body.menu-open .brand-name,
body.menu-open .site-header--transparent .brand-name {
color: var(--ink-900) !important;
}
body.menu-open .site-header--transparent .brand-logo--dark { display: block; }
body.menu-open .site-header--transparent .brand-logo--white { display: none; }
/* Icône burger → croix quand menu ouvert */
body.menu-open .menu-toggle svg {
transform: rotate(90deg);
opacity: 0.4;
transition: all .2s;
}
body.menu-open .menu-toggle::before {
content: '×';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 28px;
font-weight: 300;
line-height: 1;
color: var(--ink-900);
}
body.menu-open .menu-toggle svg { display: none; }
/* ─── Typographie mobile ─── */
h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.55rem, 5.5vw, 2rem); line-height: 1.2; }
h3 { font-size: 1.2rem; }
/* ─── Sections : padding plus serré ─── */
.section { padding: 64px 0; }
.section-tight { padding: 36px 0; }
.section-title { margin-bottom: 36px; padding: 0 8px; }
/* ─── HERO mobile : design soigné ─── */
.hero {
min-height: 100svh;
min-height: 100vh;
}
.hero--fullscreen {
margin-top: calc(-1 * var(--header-h));
padding-top: var(--header-h);
}
.hero-image {
background-position: center center;
background-size: cover;
}
/* Mobile : overlay plus léger pour que le gâteau reste visible
en arrière-plan. Avant : 0.40 → 0.55 → 0.85 (presque noir en bas).
Maintenant : 0.20 → 0.35 → 0.55, avec un voile cuivré localisé
derrière le texte central via radial pour préserver la lisibilité. */
.hero::before {
background:
radial-gradient(ellipse 80% 60% at center 60%, rgba(26, 19, 13, 0.55) 0%, rgba(26, 19, 13, 0) 80%),
linear-gradient(180deg,
rgba(26, 19, 13, 0.20) 0%,
rgba(26, 19, 13, 0.30) 50%,
rgba(26, 19, 13, 0.55) 100%);
}
/* Sur mobile : on retire aussi le voile noir foncé du haut (.hero::after)
qui s'additionnait au ::before et masquait la moitié haute de l'image. */
.hero::after {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.10) 60%,
rgba(0, 0, 0, 0) 100%) !important;
height: 160px !important;
}
.hero-content {
padding: 32px 24px 100px;
width: 100%;
max-width: 480px;
}
.hero-logo { width: 64px; height: 64px; margin: 0 auto 18px; }
.hero h1 {
font-size: clamp(2rem, 9vw, 3rem);
line-height: 1.05;
margin-bottom: 16px;
letter-spacing: -0.015em;
text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero h1 .accent {
font-size: 0.7em;
margin-top: 0.15em;
}
.hero-subtitle {
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 28px;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
padding: 0 4px;
}
.hero-cta {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.hero-cta .btn {
width: 100%;
padding: 14px 20px;
font-size: 0.78rem;
}
.hero-scroll {
bottom: 24px;
font-size: 0.62rem;
letter-spacing: 0.24em;
}
.hero-scroll::after { height: 32px; }
/* ─── Pills catégories ─── */
.cat-pills {
gap: 8px;
padding: 0;
justify-content: center;
}
.cat-pill {
font-size: 0.7rem;
letter-spacing: 0.06em;
padding: 9px 14px;
min-height: 36px;
}
/* ─── Products grid : 2 colonnes serrées sur mobile ─── */
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.product-card-body { padding: 14px 12px; }
.product-card-category { font-size: 0.6rem; letter-spacing: 0.14em; }
.product-card-name { font-size: 0.98rem; line-height: 1.25; margin-bottom: 4px; }
.product-card-desc {
font-size: 0.78rem;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card-price { font-size: 0.98rem; }
.product-card-price small { font-size: 0.55rem; letter-spacing: 0.08em; }
.product-card-footer { padding-top: 10px; gap: 6px; }
.product-card-link { font-size: 0.6rem; padding-right: 12px; letter-spacing: 0.1em; }
.product-card-link::after { font-size: 0.85em; }
/* Badges plus discrets sur mobile */
.product-badges {
top: 10px;
left: 10px;
gap: 4px;
}
.badge {
font-size: 0.55rem;
padding: 3px 8px;
letter-spacing: 0.08em;
}
/* ─── Carte (menu) mobile ─── */
.section--carte { padding: 64px 0; }
.carte-item-link {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 20px 8px;
}
.carte-num { display: none; }
.carte-content { width: 100%; }
.carte-head {
flex-wrap: wrap;
gap: 6px 12px;
align-items: baseline;
}
.carte-name { font-size: 1.1rem; line-height: 1.25; }
.carte-dots { display: none; }
.carte-price { font-size: 1rem; }
.carte-desc { font-size: 0.85rem; max-width: 100%; line-height: 1.55; }
/* ─── Section histoire (about) ─── */
.section--dark { padding: 64px 0; }
.about-mark { width: 100px; }
.about-mark-label { position: static; margin-top: 14px; }
.about-mark-label strong { font-size: 1.5rem; }
.about-glow { display: none; }
/* ─── Trois exigences ─── */
.pillars-grid { grid-template-columns: 1fr; gap: 32px; }
.pillar { text-align: center; padding: 0 8px; }
.pillar-num {
font-size: 1.8rem;
min-width: auto;
border-bottom: 0;
margin-bottom: 12px;
padding-bottom: 0;
}
.pillar h3 { font-size: 1.2rem; margin-bottom: 10px; }
.pillar p { font-size: 0.9rem; line-height: 1.65; }
/* ─── Visite (boutique + map) ─── */
.section--visit .visit-info { padding: 48px 20px; }
.visit-meta { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
.visit-map .map { min-height: 280px; }
/* ─── Contact ─── */
.contact-form { padding: 28px 20px; }
.contact-info-block { padding-bottom: 18px; }
/* ─── Forms ─── */
.form-row, .form-row-3 { grid-template-columns: 1fr !important; gap: 14px; }
.form-group { margin-bottom: 18px; }
.form-group label { font-size: 0.82rem; }
/* ─── Page produit détail ─── */
.product-detail { gap: 24px; }
.product-detail-image { aspect-ratio: 1; max-width: 100%; }
.product-detail-title { font-size: 1.7rem; line-height: 1.1; }
.product-detail-short { font-size: 0.95rem; }
.product-detail-price { font-size: 1.6rem; margin-bottom: 24px; }
.product-variants { gap: 6px; }
.variant-btn { padding: 10px 14px; font-size: 0.85rem; }
.product-tabs { margin-top: 36px; padding-top: 36px; }
/* ─── Panier ─── */
.cart-table thead { display: none; }
.cart-table, .cart-table tbody, .cart-table tr {
display: block;
width: 100%;
}
.cart-table td {
display: block;
padding: 6px 0;
border: 0;
text-align: left !important;
}
.cart-table tr {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
margin-bottom: 14px;
background: var(--white);
}
.cart-item-image { width: 64px; height: 64px; }
.qty-control input { width: 50px; }
/* Le layout 2-colonnes panier devient 1-colonne */
.cart-page-layout { grid-template-columns: 1fr !important; }
/* ─── Boutique (shop) ─── */
.shop-layout { grid-template-columns: 1fr; gap: 20px; }
.shop-sidebar {
background: var(--cream);
padding: 20px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.shop-toolbar { gap: 12px; }
.shop-toolbar form { width: 100%; justify-content: space-between; }
/* ─── Footer ─── */
.site-footer { padding: 56px 0 28px; margin-top: 64px; }
.footer-grid {
grid-template-columns: 1fr !important;
gap: 32px;
margin-bottom: 32px;
}
.footer-newsletter { max-width: 100%; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
font-size: 0.78rem;
text-align: left;
}
.footer-links { gap: 16px; }
/* ─── Tables (admin orders, etc.) ─── */
.table {
display: block;
overflow-x: auto;
white-space: nowrap;
font-size: 0.85rem;
}
.table th, .table td { padding: 10px 12px; }
/* ─── Pagination ─── */
.pagination a, .pagination span {
min-width: 36px;
height: 36px;
font-size: 0.85rem;
padding: 0 10px;
}
}
/* =========================================================
Phone · ≤ 480px : très petit écran
========================================================= */
@media (max-width: 480px) {
h1 { font-size: clamp(1.7rem, 8.5vw, 2.2rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
/* 1 colonne pour les produits sur très petit écran (plus de respect du contenu) */
.products-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.product-card-image { aspect-ratio: 4 / 3; }
.product-card-name { font-size: 1.1rem; }
.product-card-desc { -webkit-line-clamp: 3; font-size: 0.85rem; }
.container { padding: 0 16px; }
/* Boutons compacts */
.btn { padding: 12px 20px; font-size: 0.78rem; }
.btn-lg { padding: 14px 24px; font-size: 0.82rem; }
/* Carte (menu) sur phone */
.carte-item-link { padding: 18px 4px; }
/* Hero ajustements ultra-mobile */
.hero-content { padding: 24px 16px 90px; }
.hero h1 { font-size: 1.9rem; }
.hero-subtitle { font-size: 0.9rem; }
/* Section padding */
.section { padding: 48px 0; }
/* Forms */
.contact-form { padding: 24px 18px; }
}
/* =========================================================
Print
========================================================= */
@media print {
.site-header, .site-footer, .hero, .btn, .menu-toggle { display: none !important; }
body { background: white; color: black; }
.container { max-width: 100%; padding: 0; }
}
/* =========================================================
v3.1 · Fix demandés : eyebrow, Mersier, scroll, footer, menu, carte, pâtissière
========================================================= */
/* ─── HERO : eyebrow lisible + brand Mersier en Macondo ─── */
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.eyebrow--hero {
color: var(--copper-300);
font-weight: 600;
letter-spacing: 0.32em;
font-size: 0.74rem;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
margin-bottom: 16px;
padding: 6px 16px;
border-top: 1px solid rgba(216, 177, 134, 0.5);
border-bottom: 1px solid rgba(216, 177, 134, 0.5);
}
.hero-brand {
font-family: var(--font-serif);
font-size: clamp(4rem, 12vw, 7rem);
color: white;
margin: 0 0 0.05em;
line-height: 0.9;
letter-spacing: 0.02em;
text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 400;
color: rgba(255, 255, 255, 0.95);
font-style: italic;
margin: 0 0 24px;
letter-spacing: -0.01em;
line-height: 1.2;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.hero-subtitle {
max-width: 580px;
font-size: 1.05rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
font-weight: 400;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
margin-bottom: 36px;
}
/* On retire l'ancien hero-logo (remplacé par hero-brand texte) */
.hero-logo { display: none; }
/* ─── HERO scroll : simple flèche, plus de barre verticale ─── */
.hero-scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.92);
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
text-decoration: none;
user-select: none;
transition: opacity .2s;
}
.hero-scroll:hover { color: white; opacity: 1; }
.hero-scroll svg {
display: block;
animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll::before,
.hero-scroll::after {
/* on supprime explicitement les artefacts de v2 */
display: none !important;
content: none;
}
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(4px); opacity: 1; }
}
/* ─── BURGER MENU · plus de fuite "lumière" depuis le header ─── */
/* Quand le menu mobile est ouvert : le header garde un fond opaque (pas de blur)
ET on neutralise tous les text-shadow / drop-shadow hérités du mode transparent
(sinon les liens du drawer ont un effet "glow" moche sur fond blanc). */
@media (max-width: 900px) {
body.menu-open .site-header,
body.menu-open .site-header--transparent {
background: var(--white) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(26, 19, 13, 0.06);
}
/* Reset complet du text-shadow / color blanc hérité du hero transparent */
body.menu-open .site-header--transparent .main-nav a,
body.menu-open .site-header--transparent .brand-name,
body.menu-open .site-header--transparent .brand-tagline,
body.menu-open .main-nav a {
text-shadow: none !important;
color: var(--ink-900) !important;
}
body.menu-open .site-header--transparent .brand-tagline {
color: var(--ink-500) !important;
}
body.menu-open .site-header--transparent .main-nav a:hover,
body.menu-open .site-header--transparent .main-nav a.active,
body.menu-open .main-nav a:hover,
body.menu-open .main-nav a.active {
color: var(--copper-700) !important;
}
body.menu-open .site-header--transparent .btn-icon,
body.menu-open .site-header--transparent .menu-toggle {
filter: none !important;
color: var(--ink-900) !important;
}
/* Drawer : un peu plus large + ombre + transition plus douce */
.main-nav {
width: min(340px, 90vw);
padding: 96px 32px 40px;
box-shadow: -20px 0 60px rgba(26, 19, 13, 0.25);
}
/* Le drawer doit recouvrir l'effet header — assurer aucun pixel de fuite */
body.menu-open .main-nav {
/* z-index supérieur à tout sauf le toggle */
z-index: 1001;
}
/* Burger → X plus net (caractère unicode plus propre) */
body.menu-open .menu-toggle::before {
content: '';
width: 22px;
height: 22px;
background:
linear-gradient(45deg, transparent calc(50% - 1px), var(--ink-900) calc(50% - 1px), var(--ink-900) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(-45deg, transparent calc(50% - 1px), var(--ink-900) calc(50% - 1px), var(--ink-900) calc(50% + 1px), transparent calc(50% + 1px));
background-size: 22px 22px;
background-position: center;
background-repeat: no-repeat;
position: static;
display: block;
}
}
/* ─── SECTION PÂTISSIÈRE · présentation Patrycja Mersier ─── */
.section--patissiere {
background: var(--white);
padding: 120px 0;
position: relative;
}
.section--patissiere::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--copper-300), transparent);
}
.patissiere-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.patissiere-portrait {
position: relative;
border-radius: var(--radius-md);
overflow: visible;
aspect-ratio: 4 / 5;
}
.patissiere-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-md);
display: block;
}
.patissiere-signature {
position: absolute;
right: -24px;
bottom: 32px;
background: var(--copper-700);
color: white;
padding: 18px 28px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.patissiere-signature span {
display: block;
font-family: var(--font-sans);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-200);
margin-bottom: 4px;
}
.patissiere-signature strong {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.02em;
color: white;
line-height: 1;
display: block;
}
.patissiere-text .eyebrow { color: var(--copper-700); }
.patissiere-name {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
color: var(--chocolat);
font-weight: 400;
margin: 8px 0 28px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.1;
}
.patissiere-bio {
font-size: 1.05rem;
line-height: 1.75;
color: var(--ink-700);
}
.patissiere-bio p { margin-bottom: 1em; }
.patissiere-bio p:last-child { margin-bottom: 0; }
.patissiere-cta { margin-top: 36px; }
/* ─── LA CARTE · lisibilité forcée ─── */
.section--carte {
background: var(--white);
}
.carte-list {
border-top: 1px solid var(--border);
}
.carte-item {
border-bottom: 1px solid var(--border);
transition: background .2s;
}
.carte-item:hover { background: var(--cream); }
.carte-item-link {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: baseline;
gap: 24px;
padding: 26px 16px;
color: inherit;
text-decoration: none;
}
.carte-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
color: var(--copper-700);
font-weight: 400;
}
.carte-content { display: flex; flex-direction: column; gap: 8px; }
.carte-head {
display: flex;
align-items: baseline;
gap: 16px;
}
.carte-name {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: var(--chocolat);
margin: 0;
line-height: 1.2;
letter-spacing: -0.005em;
flex: 0 0 auto;
}
.carte-item:hover .carte-name { color: var(--copper-700); }
.carte-dots {
flex: 1;
border-bottom: 1px dotted var(--border-strong);
align-self: end;
margin-bottom: 8px;
min-width: 24px;
}
.carte-price {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 500;
color: var(--copper-800);
white-space: nowrap;
text-align: right;
}
.carte-price small {
display: inline-block;
margin-right: 6px;
font-family: var(--font-sans);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-500);
font-weight: 500;
}
.carte-desc {
font-size: 0.98rem;
line-height: 1.6;
color: var(--ink-500);
margin: 0;
max-width: 78%;
}
/* ─── FOOTER · responsive correct ─── */
.site-footer { padding: 80px 0 32px; }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 56px;
margin-bottom: 64px;
max-width: 100%;
}
/* Tablette : 2 colonnes */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 40px !important;
margin-bottom: 48px;
}
.footer-newsletter { grid-column: span 2; max-width: 480px; }
}
/* Mobile : 1 colonne pleine largeur */
@media (max-width: 700px) {
.site-footer {
padding: 56px 0 28px;
margin-top: 64px;
}
.footer-grid {
grid-template-columns: 1fr !important;
gap: 36px !important;
margin-bottom: 32px;
text-align: left;
}
.footer-newsletter {
grid-column: span 1 !important;
max-width: 100%;
}
.footer-newsletter form { max-width: 100%; }
.footer-logo { width: 56px; height: 56px; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
font-size: 0.78rem;
text-align: left;
padding-top: 24px;
}
.footer-links { gap: 14px; flex-wrap: wrap; }
}
/* ─── PATISSIÈRE responsive ─── */
@media (max-width: 1024px) {
.patissiere-grid {
grid-template-columns: 1fr;
gap: 56px;
max-width: 640px;
}
.section--patissiere { padding: 80px 0; }
}
@media (max-width: 700px) {
.patissiere-portrait { aspect-ratio: 4 / 5; max-width: 360px; margin: 0 auto; }
.patissiere-signature {
right: -12px;
bottom: 20px;
padding: 14px 20px;
}
.patissiere-signature strong { font-size: 1.25rem; }
.patissiere-name { margin: 6px 0 20px; }
.patissiere-bio { font-size: 0.98rem; }
}
/* ─── CARTE mobile : compact mais lisible ─── */
@media (max-width: 700px) {
.carte-item-link {
grid-template-columns: 1fr;
gap: 6px;
padding: 22px 4px;
}
.carte-num { display: none; }
.carte-head { gap: 12px; flex-wrap: wrap; }
.carte-name { font-size: 1.2rem; }
.carte-dots { display: none; }
.carte-price { font-size: 1.05rem; text-align: left; margin-left: auto; }
.carte-desc { max-width: 100%; font-size: 0.9rem; }
}
/* ─── HERO mobile responsive (refresh) ─── */
@media (max-width: 700px) {
.hero-brand { font-size: clamp(3.5rem, 16vw, 5rem); }
.hero-title { font-size: clamp(1.15rem, 4.5vw, 1.5rem); margin-bottom: 18px; }
.hero-subtitle { font-size: 0.95rem; max-width: 100%; margin-bottom: 28px; }
.eyebrow--hero { font-size: 0.65rem; letter-spacing: 0.24em; padding: 5px 12px; }
.hero-content { padding: 32px 24px 100px; }
}
/* =========================================================
v3.2 · Burger plein écran + Selection signature mobile
========================================================= */
@media (max-width: 900px) {
/* ─── DRAWER PLEIN ÉCRAN ─── */
/* Plus de problème de z-index avec Leaflet ou tout autre élément.
Le menu prend 100% de l'écran quand il s'ouvre. */
.main-nav {
position: fixed !important;
inset: 0;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100% !important;
max-width: 100% !important;
height: 100dvh;
height: 100vh;
background: var(--white);
padding: 0;
margin: 0;
z-index: 9990;
transform: translate3d(0, -100%, 0);
transition: transform .35s var(--ease-out), visibility 0s linear .35s;
visibility: hidden;
opacity: 1;
box-shadow: none;
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.main-nav.open {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform .35s var(--ease-out), visibility 0s;
}
/* Plus besoin du overlay sombre — le drawer couvre tout */
body.menu-open::after { display: none !important; content: none !important; }
body.menu-open { overflow: hidden; }
/* Header au-dessus du drawer pour que le X reste cliquable */
body.menu-open .site-header,
body.menu-open .site-header--transparent {
background: var(--white) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid var(--border);
box-shadow: none;
z-index: 9991; /* au-dessus du drawer */
}
/* Drawer : padding-top pour ne pas être caché par le header */
.main-nav {
padding-top: calc(var(--header-h) + 24px);
padding-bottom: 64px;
padding-left: 32px;
padding-right: 32px;
align-items: center;
justify-content: flex-start;
}
/* Liens du menu : style centré, plus aéré */
.main-nav a {
color: var(--ink-900) !important;
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
padding: 22px 0;
border-bottom: 1px solid var(--border);
display: block;
text-align: center;
width: 100%;
max-width: 320px;
transition: color .2s;
}
.main-nav a:last-child { border-bottom: 0; }
.main-nav a:hover,
.main-nav a.active { color: var(--copper-700) !important; }
.main-nav a.active { font-weight: 600; }
/* Drawer : pas de sceau en bas (évite scroll inutile).
Le logo M reste visible dans le header (top-left) au-dessus du drawer. */
.main-nav::after { content: none; display: none; }
/* Croix X bien lisible en haut à droite */
body.menu-open .menu-toggle {
color: var(--ink-900) !important;
}
/* Le panier et le compte restent visibles quand menu ouvert (utile) */
body.menu-open .header-actions {
pointer-events: auto;
}
body.menu-open .header-actions .btn-icon:not(.menu-toggle) {
color: var(--ink-900) !important;
}
/* Brand reste visible en haut à gauche pendant menu ouvert */
body.menu-open .brand-name {
color: var(--ink-900) !important;
}
body.menu-open .site-header--transparent .brand-logo--white { display: none !important; }
body.menu-open .site-header--transparent .brand-logo--dark { display: block !important; }
}
/* =========================================================
v3.2 · SECTION SÉLECTION SIGNATURE · mobile parfait
========================================================= */
@media (max-width: 700px) {
/* Section title plus aéré sur mobile */
.section--carte {
padding: 56px 0 64px;
}
.section--carte .section-title {
margin-bottom: 32px;
padding: 0 12px;
}
.section--carte .section-title .eyebrow {
font-size: 0.68rem;
letter-spacing: 0.22em;
color: var(--copper-700);
}
.section--carte .section-title h2 {
font-size: clamp(1.7rem, 7vw, 2.1rem);
margin-bottom: 12px;
}
.section--carte .section-title p {
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-500);
margin: 0;
}
/* Liste : items mieux espacés, bordures haut + bas */
.carte-list {
border-top: 1px solid var(--border);
margin: 0 -4px;
}
.carte-item {
border-bottom: 1px solid var(--border);
}
.carte-item:last-child { border-bottom: 1px solid var(--border); }
.carte-item-link {
grid-template-columns: 1fr;
gap: 10px;
padding: 24px 16px;
}
.carte-num { display: none; }
.carte-content { gap: 10px; }
/* Head : nom à gauche + prix à droite sur une vraie ligne */
.carte-head {
display: flex;
align-items: baseline;
gap: 14px;
justify-content: space-between;
flex-wrap: nowrap;
}
.carte-name {
font-family: var(--font-serif);
font-size: 1.32rem;
font-weight: 400;
color: var(--ink-900);
line-height: 1.2;
flex: 1 1 auto;
margin: 0;
}
.carte-dots { display: none; }
.carte-price {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--copper-800);
white-space: nowrap;
text-align: right;
flex: 0 0 auto;
line-height: 1.2;
}
.carte-price small {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-500);
font-weight: 500;
margin-right: 4px;
}
.carte-desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--ink-500);
margin: 0;
max-width: 100%;
}
/* Hover devient un état "active" plus subtil sur tactile */
.carte-item:hover {
background: var(--cream);
}
/* Bouton "Toute la carte" mieux mis en valeur */
.section--carte .text-center {
margin-top: 32px;
}
}
/* Légère amélioration desktop tablette pour la carte (≤900) */
@media (max-width: 900px) and (min-width: 701px) {
.carte-item-link {
grid-template-columns: 36px 1fr auto;
gap: 20px;
padding: 22px 14px;
}
.carte-num { font-size: 0.85rem; }
.carte-name { font-size: 1.35rem; }
.carte-price { font-size: 1.15rem; }
.carte-desc { font-size: 0.92rem; max-width: 85%; }
}
/* =========================================================
v3.3 · Brand texte mobile (pas de logo M)
========================================================= */
@media (max-width: 700px) {
.brand { gap: 0; }
}
/* Menu ouvert : garder le texte visible */
@media (max-width: 900px) {
body.menu-open .brand-text { display: flex !important; }
body.menu-open .brand-name { font-size: 1.1rem; }
}
/* =========================================================
v3.4 · PANIER · mobile-first
========================================================= */
.cart-section { padding: 56px 0 80px; }
.cart-header {
text-align: center;
margin-bottom: 40px;
}
.cart-header h1 {
font-family: var(--font-serif);
margin: 8px 0 8px;
font-size: clamp(2rem, 5vw, 2.8rem);
}
.cart-header .text-muted { font-size: 0.92rem; }
.cart-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 20px;
background: var(--cream);
border-radius: var(--radius-md);
max-width: 480px;
margin: 0 auto;
}
.cart-empty h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--ink-900);
margin-bottom: 12px;
}
.cart-empty p {
color: var(--ink-500);
margin-bottom: 28px;
}
/* Layout : mobile-first = 1 colonne. Desktop = 2 colonnes */
.cart-layout {
display: flex;
flex-direction: column;
gap: 24px;
}
.cart-items {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Carte article ── */
.cart-item {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 16px;
padding: 16px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
align-items: center;
transition: border-color .2s;
}
.cart-item:hover { border-color: var(--copper-200); }
.cart-item-img {
width: 88px;
height: 88px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--copper-50);
display: block;
flex-shrink: 0;
}
.cart-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-item-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-item-name {
font-family: var(--font-serif);
font-size: 1.08rem;
font-weight: 400;
color: var(--chocolat);
text-decoration: none;
line-height: 1.25;
}
.cart-item-name:hover { color: var(--copper-700); }
.cart-item-variant {
font-size: 0.82rem;
color: var(--copper-700);
font-weight: 500;
letter-spacing: 0.02em;
}
.cart-item-unit {
font-size: 0.82rem;
color: var(--ink-500);
}
.cart-item-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
flex-wrap: wrap;
}
/* Compteur quantité */
.cart-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--white);
}
.cart-qty-btn {
background: transparent;
border: 0;
width: 34px;
height: 34px;
font-size: 1rem;
cursor: pointer;
color: var(--ink-700);
transition: background .15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cart-qty-btn:hover:not(:disabled) {
background: var(--copper-50);
color: var(--copper-700);
}
.cart-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty-value {
min-width: 32px;
text-align: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
color: var(--ink-900);
border-left: 1px solid var(--border-strong);
border-right: 1px solid var(--border-strong);
line-height: 34px;
padding: 0 6px;
}
/* Bouton retirer */
.cart-remove {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 6px 10px;
font-family: var(--font-sans);
font-size: 0.78rem;
color: var(--ink-500);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color .15s, background .15s;
}
.cart-remove:hover {
color: var(--color-error);
background: rgba(179, 58, 58, 0.05);
}
.cart-remove svg { flex-shrink: 0; }
.cart-item-total {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 500;
color: var(--copper-800);
white-space: nowrap;
align-self: start;
padding-top: 4px;
}
.cart-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
gap: 12px;
flex-wrap: wrap;
}
/* ── Aside (résumé + promo + livraison) ── */
.cart-aside {
display: flex;
flex-direction: column;
gap: 16px;
}
.cart-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
}
.cart-card h3 {
font-family: var(--font-serif);
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
font-size: 1.3rem;
}
.cart-card h4 {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--copper-700);
margin: 0 0 14px;
font-weight: 600;
}
.cart-card--summary {
background: var(--cream);
border-color: var(--border-strong);
}
.cart-line {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
font-size: 0.95rem;
color: var(--ink-700);
}
.cart-line:last-of-type { border-bottom: 0; }
.cart-line-value {
font-weight: 500;
color: var(--ink-900);
white-space: nowrap;
}
.cart-line--discount { color: var(--color-success); }
.cart-line--discount .cart-line-value { color: var(--color-success); font-weight: 600; }
.cart-line--discount small { color: var(--color-success); opacity: 0.7; margin-left: 4px; }
.cart-line--total {
padding-top: 18px;
margin-top: 6px;
border-top: 2px solid var(--ink-900);
border-bottom: 0;
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--ink-900);
}
.cart-line--total .cart-line-value {
color: var(--copper-800);
font-weight: 500;
font-size: 1.4rem;
}
.cart-checkout-btn { margin-top: 24px; }
.cart-secure {
text-align: center;
font-size: 0.78rem;
color: var(--ink-500);
margin: 16px 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cart-secure svg { color: var(--copper-600); }
/* Promo */
.cart-promo-form {
display: flex;
gap: 8px;
}
.cart-promo-form input {
flex: 1;
text-transform: uppercase;
font-family: var(--font-sans);
letter-spacing: 0.05em;
min-height: 44px;
}
.cart-promo-applied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--copper-50);
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--copper-200);
}
.cart-promo-applied strong {
display: block;
font-family: var(--font-sans);
letter-spacing: 0.06em;
color: var(--copper-800);
font-size: 0.95rem;
}
.cart-promo-applied small {
display: block;
color: var(--ink-500);
font-size: 0.78rem;
margin-top: 2px;
}
/* ── Mobile (≤700px) : panier optimisé ── */
@media (max-width: 700px) {
.cart-section { padding: 32px 0 56px; }
.cart-header { margin-bottom: 28px; padding: 0 8px; }
.cart-item {
grid-template-columns: 72px 1fr;
gap: 12px;
padding: 14px;
}
.cart-item-img { width: 72px; height: 72px; }
.cart-item-total {
grid-column: 1 / -1;
text-align: right;
border-top: 1px dashed var(--border);
padding-top: 10px;
margin-top: 4px;
font-size: 1.1rem;
}
.cart-item-name { font-size: 1rem; }
.cart-item-actions { margin-top: 6px; }
.cart-card { padding: 20px; }
.cart-line--total,
.cart-line--total .cart-line-value { font-size: 1.2rem; }
.cart-toolbar {
flex-direction: column;
align-items: stretch;
}
.cart-toolbar .btn { width: 100%; }
}
/* ── Desktop (≥1024px) : 2 colonnes ── */
@media (min-width: 1024px) {
.cart-layout {
flex-direction: row;
align-items: flex-start;
gap: 40px;
}
.cart-items {
flex: 1 1 auto;
min-width: 0;
}
.cart-aside {
flex: 0 0 380px;
position: sticky;
top: 100px;
}
}
/* =========================================================
v3.4 · BOUTIQUE / FILTRES · mobile-first
========================================================= */
.shop-header-bar {
background: var(--cream);
padding: 48px 0 32px;
border-bottom: 1px solid var(--border);
}
.shop-header-bar h1 {
margin: 6px 0 6px;
font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.shop-header-desc {
color: var(--ink-500);
margin: 0;
max-width: 640px;
}
.shop-section { padding: 28px 0 80px; }
/* Toolbar : filtre + tri sur une ligne */
.shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.shop-toolbar-left {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.shop-filter-toggle {
display: inline-flex !important;
align-items: center;
gap: 8px;
position: relative;
}
.shop-filter-badge {
background: var(--copper-700);
color: white;
border-radius: 100px;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
padding: 0 6px;
margin-left: 4px;
}
.shop-count {
font-family: var(--font-sans);
font-size: 0.88rem;
color: var(--ink-500);
}
.shop-sort select {
min-height: 40px;
padding: 8px 36px 8px 14px;
font-size: 0.88rem;
font-family: var(--font-sans);
background: var(--white);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
cursor: pointer;
}
/* Sr-only utility */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Layout : mobile-first = 1 colonne */
.shop-layout {
display: flex;
flex-direction: column;
gap: 24px;
}
.shop-filters {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
}
.shop-filters-head {
display: none; /* visible uniquement en mode drawer mobile */
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
}
.shop-filters-head h2 {
margin: 0;
font-family: var(--font-serif);
font-size: 1.3rem;
}
.shop-filters-close {
background: transparent;
border: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink-900);
border-radius: var(--radius-sm);
}
.shop-filters-close:hover { background: var(--cream); }
.shop-filter-group {
border: 0;
padding: 0;
margin: 0 0 24px;
}
.shop-filter-group legend {
display: block;
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--copper-700);
font-weight: 600;
margin-bottom: 12px;
padding: 0;
}
.shop-filter-link {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 10px 0;
color: var(--ink-700);
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.05);
font-size: 0.95rem;
}
.shop-filter-link:last-of-type { border-bottom: 0; }
.shop-filter-link:hover { color: var(--copper-700); }
.shop-filter-link.active {
color: var(--copper-800);
font-weight: 600;
}
.shop-filter-link small {
color: var(--ink-400);
font-size: 0.78rem;
}
.shop-filter-check {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
cursor: pointer;
font-size: 0.95rem;
color: var(--ink-700);
}
.shop-filter-check input { width: 18px; height: 18px; margin: 0; }
.shop-filter-check:hover { color: var(--copper-700); }
.shop-filters-actions {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── Mobile (≤900px) : filtres en drawer slide-up ── */
@media (max-width: 900px) {
.shop-filter-toggle { display: inline-flex !important; }
/* Le panneau passe en drawer bottom-sheet */
.shop-filters {
position: fixed;
inset: auto 0 0 0;
z-index: 9990;
max-height: 90vh;
background: var(--white);
border: 0;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 24px 24px 32px;
transform: translateY(100%);
transition: transform .35s var(--ease-out), visibility 0s linear .35s;
visibility: hidden;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 -20px 60px rgba(26, 19, 13, 0.2);
}
.shop-filters.open {
transform: translateY(0);
visibility: visible;
transition: transform .35s var(--ease-out), visibility 0s;
}
.shop-filters-head { display: flex; }
body.shop-filters-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(26, 19, 13, 0.5);
z-index: 9989;
animation: fadeIn .25s ease-out;
}
body.shop-filters-open { overflow: hidden; }
/* Liste catégories : style pills horizontal scroll sur mobile */
.shop-filter-group:first-child .shop-filter-link {
padding: 12px 0;
}
}
/* ── Desktop (≥901px) : sidebar fixe à gauche ── */
@media (min-width: 901px) {
.shop-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
}
.shop-filter-toggle { display: none !important; }
.shop-filters {
position: sticky;
top: 100px;
}
.shop-filters-actions { display: block; }
}
/* ── Mobile très petit (≤480px) ── */
@media (max-width: 480px) {
.shop-toolbar-left { gap: 10px; flex: 1; }
.shop-count { font-size: 0.78rem; }
.shop-sort select { font-size: 0.82rem; padding: 8px 32px 8px 12px; }
}
/* =========================================================
v3.5 · Header transparent : lisibilité desktop forcée
========================================================= */
/* Gradient sombre par-dessus le hero, sous le header,
pour que le nav reste lisible même quand le gâteau (zone claire)
est juste en dessous. */
.hero::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 220px;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0) 100%);
z-index: 1;
pointer-events: none;
}
/* Quand le header est transparent (sur le hero), ajouter un soupçon
de dégradé propre et un text-shadow fort sur tout le texte du nav. */
.site-header--transparent {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.12) 60%,
rgba(0, 0, 0, 0) 100%) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header--transparent .main-nav a,
.site-header--transparent .brand-name {
color: white !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
}
.site-header--transparent .brand-tagline {
color: rgba(255, 255, 255, 0.95) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
font-weight: 500;
}
.site-header--transparent .btn-icon {
color: white !important;
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
.site-header--transparent .main-nav a.active {
color: var(--copper-300) !important;
}
.site-header--transparent .main-nav a:hover {
color: var(--copper-200) !important;
}
/* Quand on a scrollé : redevient propre */
.site-header--transparent.is-scrolled {
background: rgba(251, 250, 247, 0.96) !important;
backdrop-filter: saturate(180%) blur(12px) !important;
-webkit-backdrop-filter: saturate(180%) blur(12px) !important;
border-bottom: 1px solid var(--border) !important;
}
.site-header--transparent.is-scrolled .main-nav a,
.site-header--transparent.is-scrolled .brand-name {
color: var(--ink-900) !important;
text-shadow: none;
}
.site-header--transparent.is-scrolled .brand-tagline {
color: var(--ink-500) !important;
text-shadow: none;
}
.site-header--transparent.is-scrolled .btn-icon {
color: var(--ink-700) !important;
filter: none;
}
.site-header--transparent.is-scrolled .main-nav a.active {
color: var(--copper-700) !important;
}
.site-header--transparent.is-scrolled .main-nav a:hover {
color: var(--copper-700) !important;
}
/* Hero "FAIRE DÉFILER" : ombre forte pour rester lisible sur fond clair */
.hero-scroll {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5);
font-weight: 700;
}
.hero-scroll svg {
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
/* Eyebrow hero : encadrement plus visible */
.eyebrow--hero {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top: 1px solid rgba(216, 177, 134, 0.5);
border-bottom: 1px solid rgba(216, 177, 134, 0.5);
}
/* =========================================================
v3.6 · Hero plein écran vraiment plein
========================================================= */
/* La bande "+33 5..." disparait sur la home (laisse la photo monter à y=0). */
.site-header--transparent .header-top {
display: none;
}
/* Le hero plein écran prend EXACTEMENT la hauteur visible du viewport
(dvh = dynamic viewport height, respecte la barre URL mobile). */
.hero--fullscreen {
height: 100vh; /* fallback */
height: 100dvh; /* moderne, exclut la chrome mobile */
min-height: 100vh;
min-height: 100dvh;
margin-top: 0;
padding-top: 0;
display: grid;
place-items: center;
}
/* La photo couvre l'intégralité du hero, edge to edge. */
.hero--fullscreen .hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
/* Hero en ![]()
natif (v6.1 SEO/LCP) — remplace progressivement le bg CSS
pour permettre au navigateur d'identifier le vrai LCP element et beneficier
du preload+fetchpriority=high. */
.hero-image--img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
transform: scale(1.02);
transition: transform 8s var(--ease-out, ease-out);
}
.hero:hover .hero-image--img { transform: scale(1.05); }
/* Le contenu garde son padding-top pour ne pas être caché par le header
(header en position: fixed). */
.hero--fullscreen .hero-content {
padding-top: calc(var(--header-h) + 24px);
padding-bottom: 80px;
}
/* Renforcer le gradient pour que tout reste lisible avec la photo qui
monte jusqu'à y=0 (plus de bande noire qui aidait avant). */
.hero::after {
height: 260px; /* avant 220 */
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.45) 35%,
rgba(0, 0, 0, 0.15) 70%,
rgba(0, 0, 0, 0) 100%);
}
/* Sur mobile : même chose, exact 100dvh, photo plein écran. */
@media (max-width: 900px) {
.hero--fullscreen {
height: 100dvh;
min-height: 100dvh;
}
.hero--fullscreen .hero-content {
padding-top: calc(var(--header-h) + 16px);
padding-bottom: 96px;
}
}
/* =========================================================
v3.7 · Fix séparateur navbar (plus de ligne noire/dure)
========================================================= */
/* Header : retirer la bordure dure, utiliser une ombre douce */
.site-header {
border-bottom: 0;
box-shadow: 0 1px 0 rgba(217, 203, 180, 0.3);
}
.site-header--transparent {
border-bottom: 0 !important;
box-shadow: none;
}
.site-header--transparent.is-scrolled {
border-bottom: 0 !important;
box-shadow: 0 2px 14px rgba(26, 19, 13, 0.06) !important;
}
/* Section catégories pills juste après le hero :
pas de bordure horizontale, transition douce */
.section-tight + .section,
.hero + .section-tight {
border-top: 0 !important;
}
/* Override de la règle inline sur la section pills accueil */
section.section-tight[style*="border-bottom"] {
border-bottom: 0 !important;
}
/* =========================================================
v3.8 · Affichage du nom complet "Mersier Pâtisserie Fine"
========================================================= */
/* Header brand — nom principal + qualificatif plus discret */
.brand-name {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
line-height: 1;
}
.brand-name-sub {
font-family: var(--font-serif);
font-size: 0.62em;
font-weight: 400;
font-style: italic;
letter-spacing: 0;
color: var(--copper-700);
white-space: nowrap;
}
.site-header--transparent .brand-name-sub {
color: var(--copper-300);
}
.site-header--transparent.is-scrolled .brand-name-sub {
color: var(--copper-700);
}
/* Mobile : on cache .brand-text complet (déjà fait), donc .brand-name-sub
est caché aussi (héritage). RAS. */
/* Hero brand · décomposé en deux lignes typographiques */
.hero-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0 0 12px;
line-height: 1;
}
.hero-brand-main {
font-family: var(--font-serif);
font-size: clamp(3.8rem, 12vw, 7rem);
color: white;
letter-spacing: 0.01em;
text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
font-weight: 400;
line-height: 0.9;
}
.hero-brand-sub {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2.2vw, 1.6rem);
color: var(--copper-200);
font-style: italic;
letter-spacing: 0.04em;
font-weight: 400;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
margin-top: 2px;
}
/* Mobile : ajuster les tailles pour rester équilibré */
@media (max-width: 700px) {
.hero-brand-main { font-size: clamp(3rem, 14vw, 4.5rem); }
.hero-brand-sub { font-size: clamp(0.95rem, 4vw, 1.2rem); }
}
/* =========================================================
v3.9 · Typographie brand alignée sur le logo
"MERSIER" + "PÂTISSERIE FINE" même police, uppercase, espacé
========================================================= */
/* Hero brand : Mersier en Baskerville propre, casse normale */
.hero-brand-main {
font-family: var(--font-serif) !important;
font-size: clamp(3.4rem, 11vw, 6.5rem) !important;
color: white !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
line-height: 1 !important;
text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}
/* Hero brand-sub : identique au header (uppercase tracking cuivré),
juste adapté à la photo (couleur copper-200 plus claire pour
ressortir sur le fond sombre + text-shadow). */
.hero-brand-sub {
font-family: var(--font-serif) !important;
font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
font-weight: 400 !important;
font-style: normal !important;
text-transform: uppercase !important;
letter-spacing: 0.22em !important;
color: var(--copper-200) !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
margin-top: 12px;
padding-left: 0;
}
@media (max-width: 700px) {
.hero-brand-main { font-size: clamp(2.6rem, 13vw, 4rem) !important; letter-spacing: 0.04em; }
.hero-brand-sub { font-size: clamp(0.7rem, 3vw, 0.9rem) !important; letter-spacing: 0.22em !important; margin-top: 10px; }
}
/* Header brand : Mersier + Pâtisserie Fine en Baskerville */
.brand-text {
align-items: center;
}
.brand-name {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 3px !important;
font-family: var(--font-serif) !important;
font-size: 1.5rem;
font-weight: 400;
color: var(--ink-700);
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
line-height: 1 !important;
}
.brand-name-sub {
font-family: var(--font-serif) !important;
font-size: 0.42em !important; /* ~ 0.63rem */
font-weight: 400 !important;
font-style: normal !important;
text-transform: uppercase;
letter-spacing: 0.22em !important;
color: var(--ink-500) !important;
line-height: 1;
margin-top: 0;
}
.brand-tagline {
display: none !important; /* retiré : pas de texte superficiel */
}
.site-header--transparent .brand-name { color: var(--ink-700) !important; text-shadow: none; }
.site-header--transparent .brand-name-sub { color: var(--ink-500) !important; }
.site-header--transparent.is-scrolled .brand-name { color: var(--ink-700) !important; text-shadow: none; }
.site-header--transparent.is-scrolled .brand-name-sub { color: var(--ink-500) !important; }
/* =========================================================
v5.37 · Header : petit dot vert sur icône compte si connecté
+ petit icône logout discret à côté
========================================================= */
/* Icône compte avec petit dot vert "connecté" en bas-droite */
.btn-icon--logged {
position: relative;
}
.btn-icon--logged::after {
content: '';
position: absolute;
bottom: 8px; right: 8px;
width: 8px; height: 8px;
background: #4A7C59;
border: 2px solid var(--white);
border-radius: 50%;
z-index: 1;
box-shadow: 0 0 0 1px rgba(74, 124, 89, 0.25);
}
/* Sur header transparent (hero), le dot reste visible avec bordure
adaptée au fond sombre */
.site-header--transparent:not(.is-scrolled) .btn-icon--logged::after {
border-color: rgba(255, 255, 255, 0.95);
}
/* Bouton logout : style btn-icon mais légèrement plus discret */
.btn-icon--logout {
background: transparent;
border: 0;
cursor: pointer;
opacity: 0.7;
transition: opacity .25s var(--ease), color .25s var(--ease);
}
.btn-icon--logout:hover {
opacity: 1;
color: #B33A3A;
}
/* =========================================================
v3.10 · Fiche produit avec galerie 3 photos
========================================================= */
.product-show { padding: 56px 0 80px; }
.breadcrumb {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--ink-500);
margin-bottom: 32px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.breadcrumb a {
color: var(--ink-500);
text-decoration: none;
}
.breadcrumb a:hover { color: var(--copper-700); }
.breadcrumb-current { color: var(--ink-900); font-weight: 500; }
.breadcrumb span { color: var(--ink-300); }
.product-detail-image {
position: relative;
}
.product-detail-image .product-badges {
top: 16px;
left: 16px;
}
.product-detail-info {
display: flex;
flex-direction: column;
}
.product-detail-eyebrow {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-700);
font-weight: 600;
margin-bottom: 12px;
}
.product-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 24px;
}
.product-variants-wrap { margin: 24px 0; }
.product-variants-wrap .eyebrow {
display: block;
margin-bottom: 12px;
font-size: 0.7rem;
color: var(--ink-500);
}
.product-add-form {
display: flex;
gap: 12px;
align-items: stretch;
margin-top: 24px;
flex-wrap: wrap;
}
.product-add-form .qty-control { flex-shrink: 0; }
/* ─── Section "story" : description + photo détail côte à côte ─── */
.product-story {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: start;
margin: 96px 0;
padding: 0;
}
.product-story-image {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--copper-50);
position: sticky;
top: 100px;
}
.product-story-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-story-text {
padding: 12px 0;
}
.product-story-text .eyebrow {
display: block;
color: var(--copper-700);
margin-bottom: 12px;
}
.product-story-text h2 {
font-family: var(--font-serif);
font-size: clamp(1.7rem, 3vw, 2.4rem);
margin: 0 0 24px;
color: var(--ink-900);
}
.product-story-body {
font-size: 1.02rem;
line-height: 1.8;
color: var(--ink-700);
}
.product-story-body p { margin-bottom: 1em; }
.product-info-block {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.product-info-block h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
margin: 0 0 12px;
color: var(--chocolat);
}
.product-info-block p {
color: var(--ink-700);
line-height: 1.7;
}
/* ─── Bandeau photo bonus full-width ─── */
.product-banner {
position: relative;
margin: 96px calc(50% - 50vw);
width: 100vw;
height: 60vh;
min-height: 420px;
max-height: 640px;
overflow: hidden;
}
.product-banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-banner figcaption {
position: absolute;
bottom: 48px;
left: 50%;
transform: translateX(-50%);
text-align: center;
max-width: 560px;
padding: 28px 40px;
background: rgba(26, 19, 13, 0.85);
color: white;
backdrop-filter: blur(8px);
border-radius: var(--radius-sm);
}
.product-banner figcaption .eyebrow {
color: var(--copper-300);
margin-bottom: 8px;
}
.product-banner figcaption p {
color: white;
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
margin: 0;
line-height: 1.4;
}
/* ─── Section produits liés ─── */
.product-related {
margin-top: 96px;
padding-top: 64px;
border-top: 1px solid var(--border);
}
/* ─── Mobile ─── */
@media (max-width: 900px) {
.product-story {
grid-template-columns: 1fr;
gap: 36px;
margin: 64px 0;
}
.product-story-image {
aspect-ratio: 4 / 3;
position: static;
max-width: 100%;
}
.product-banner {
height: 50vh;
min-height: 320px;
}
.product-banner figcaption {
bottom: 24px;
left: 16px;
right: 16px;
transform: none;
padding: 20px 24px;
max-width: none;
}
.product-banner figcaption p { font-size: 1rem; }
}
@media (max-width: 600px) {
.product-show { padding: 32px 0 56px; }
.breadcrumb { margin-bottom: 20px; font-size: 0.76rem; }
.product-banner {
margin: 56px calc(50% - 50vw);
min-height: 280px;
}
.product-related { margin-top: 56px; padding-top: 40px; }
}
/* =========================================================
v3.11 · Section livraison · 3 zones + autocomplete BAN
========================================================= */
.section--delivery {
background: var(--cream);
padding: 96px 0;
}
.delivery-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 48px;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
/* ── Légende des 3 zones ── */
.delivery-tiers-legend {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 32px;
}
.tier-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color .2s;
}
.tier-card > div { flex: 1; min-width: 0; }
.tier-card strong {
display: block;
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--ink-900);
font-weight: 400;
line-height: 1.2;
}
.tier-card small {
display: block;
font-size: 0.78rem;
color: var(--ink-500);
margin-top: 2px;
}
.tier-price {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--copper-800);
font-weight: 500;
white-space: nowrap;
}
.tier-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid white;
box-shadow: 0 0 0 2px var(--copper-300);
}
.tier-card--1 .tier-dot { background: #B87333; box-shadow: 0 0 0 2px #B87333; }
.tier-card--2 .tier-dot { background: #C9885E; box-shadow: 0 0 0 2px #C9885E; }
.tier-card--3 .tier-dot { background: #D8B186; box-shadow: 0 0 0 2px #D8B186; }
/* ── Champ de recherche d'adresse ── */
.delivery-search { position: relative; margin-bottom: 24px; }
.delivery-search label { display: block; margin-bottom: 8px; }
.delivery-search-input {
position: relative;
display: flex;
align-items: center;
}
.delivery-search-input > svg {
position: absolute;
left: 14px;
color: var(--copper-700);
pointer-events: none;
z-index: 1;
}
.delivery-search-input input {
width: 100%;
padding-left: 42px;
padding-right: 42px;
min-height: 50px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: white;
font-size: 1rem;
color: var(--ink-900);
}
.delivery-search-spinner {
position: absolute;
right: 14px;
width: 16px;
height: 16px;
border: 2px solid var(--copper-200);
border-top-color: var(--copper-700);
border-radius: 50%;
opacity: 0;
transition: opacity .2s;
pointer-events: none;
animation: spin 0.7s linear infinite;
}
.delivery-search-spinner.active { opacity: 1; }
.delivery-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid var(--border-strong);
border-top: 0;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
list-style: none;
margin: 0;
padding: 0;
max-height: 320px;
overflow-y: auto;
z-index: 100;
display: none;
box-shadow: 0 12px 32px rgba(26, 19, 13, 0.1);
}
.delivery-suggestions.open { display: block; }
.delivery-suggestions li {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.delivery-suggestions li:last-child { border-bottom: 0; }
.delivery-suggestions li:hover { background: var(--copper-50); }
.delivery-suggestions li strong {
display: block;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-900);
line-height: 1.3;
}
.delivery-suggestions li small {
display: block;
font-size: 0.82rem;
color: var(--ink-500);
margin-top: 2px;
}
.delivery-suggestions .suggestion-empty,
.delivery-suggestions .suggestion-error {
padding: 16px;
color: var(--ink-500);
font-size: 0.9rem;
text-align: center;
}
/* ── Résultat ── */
.delivery-result {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
margin-top: 24px;
}
.delivery-result-head {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 16px;
}
.delivery-result-head > svg { flex-shrink: 0; margin-top: 2px; }
.delivery-result-head strong {
display: block;
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--ink-900);
margin-bottom: 4px;
}
.delivery-result-head p { color: var(--ink-700); font-size: 0.92rem; margin: 4px 0 0; line-height: 1.55; }
.delivery-result-head p:first-of-type { color: var(--ink-900); font-weight: 500; }
.delivery-result--ok .delivery-result-head > svg { color: var(--color-success); }
.delivery-result--far .delivery-result-head > svg { color: var(--copper-700); }
.tier-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 100px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 6px;
color: white;
}
.tier-badge--1 { background: #B87333; }
.tier-badge--2 { background: #C9885E; color: var(--ink-900); }
.tier-badge--3 { background: #D8B186; color: var(--ink-900); }
.delivery-result-fee {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: var(--copper-50);
border-radius: var(--radius-sm);
margin: 16px 0;
}
.delivery-result-fee span { color: var(--ink-700); font-size: 0.92rem; }
.delivery-result-fee strong {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--copper-800);
font-weight: 500;
}
.delivery-result-cta { margin-top: 16px; }
.delivery-result-cta p {
font-size: 0.9rem;
color: var(--ink-700);
margin-bottom: 14px;
line-height: 1.6;
}
/* ── Carte ── */
.delivery-map-wrap {
position: relative;
/* plus de sticky : la map reste alignée avec la colonne gauche au scroll */
}
.delivery-map {
width: 100%;
height: 100%;
min-height: 480px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--copper-50);
}
/* Grid : étirer les deux colonnes à la même hauteur */
.delivery-grid {
align-items: stretch !important;
}
/* Marker boutique - rouge cuivré */
.map-pin-shop .map-pin-dot {
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
background: var(--copper-700);
border: 3px solid white;
box-shadow: 0 4px 14px rgba(184, 115, 51, 0.5);
}
/* Marker client - sombre */
.map-pin-customer .customer-dot {
width: 16px; height: 16px;
display: block;
background: var(--ink-900);
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* ── Visite (sous la grid) ── */
.delivery-visit {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 56px;
padding-top: 40px;
border-top: 1px solid var(--border-strong);
}
.delivery-visit h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
margin: 6px 0 8px;
color: var(--ink-900);
}
.delivery-visit p {
margin: 0;
font-size: 0.95rem;
color: var(--ink-700);
line-height: 1.6;
}
.delivery-visit a { color: var(--ink-900); }
.delivery-visit a:hover { color: var(--copper-700); }
/* ── Responsive ── */
@media (max-width: 900px) {
.section--delivery { padding: 64px 0; }
.delivery-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.delivery-map-wrap { position: static; }
.delivery-map { height: 360px; }
.delivery-visit {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 40px;
padding-top: 32px;
}
}
@media (max-width: 600px) {
.tier-card { padding: 12px; gap: 10px; }
.tier-card strong { font-size: 0.98rem; }
.delivery-map { height: 300px; }
.delivery-result { padding: 20px; }
.delivery-result-fee strong { font-size: 1.3rem; }
}
/* =========================================================
v3.12 · Layout produit alternant + hero réduit + map renforcée
========================================================= */
/* ─── Hero : "Mersier" plus petit, plus élégant, moins "billboard" ─── */
.hero-brand-main {
font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
letter-spacing: 0.06em !important;
}
.hero-brand-sub {
font-size: clamp(0.78rem, 1.2vw, 1rem) !important;
letter-spacing: 0.22em !important;
margin-top: 12px;
padding-left: 0.22em;
}
.hero-content {
gap: 0;
}
.hero-brand { margin-bottom: 24px; }
.hero-title {
font-size: clamp(1.3rem, 2.6vw, 1.9rem) !important;
margin-top: 6px !important;
}
.hero-subtitle {
font-size: 1rem !important;
max-width: 540px;
}
@media (max-width: 700px) {
.hero-brand-main { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
.hero-brand-sub { font-size: clamp(0.62rem, 2.6vw, 0.78rem) !important; letter-spacing: 0.4em !important; }
.hero-title { font-size: clamp(1.05rem, 4vw, 1.3rem) !important; }
}
/* ─── Layout produit : 3 sections alternées avec photos 1:1 ─── */
/* Reset l'ancien layout */
.product-detail,
.product-story,
.product-banner { display: none !important; }
.product-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin: 80px 0;
}
.product-row--text-left {
/* Photo à droite, texte à gauche (alternance) */
grid-template-columns: 1fr 1fr;
}
.product-row--text-left > .product-row-body { order: 1; }
.product-row--text-left > .product-row-img { order: 2; }
/* Image carrée 1:1 forcée */
.product-row-img {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--copper-50);
box-shadow: 0 24px 60px rgba(26, 19, 13, 0.1);
}
.product-row-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-row-img--large {
/* photo principale : grande, presque pleine largeur de sa colonne */
max-width: 100%;
}
.product-row-img--small {
/* photos secondaires : plus petites, ancrées sur leur côté */
max-width: 440px;
width: 100%;
}
.product-row--main .product-row-img--small {
/* Quand petite photo est à gauche : align left */
justify-self: start;
}
.product-row--text-left .product-row-img--small {
/* Quand petite photo est à droite : align right */
justify-self: end;
}
.product-row-body {
display: flex;
flex-direction: column;
justify-content: center;
}
.product-row-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
font-weight: 400;
margin: 6px 0 24px;
color: var(--chocolat);
}
.product-row-text {
font-size: 1.02rem;
line-height: 1.8;
color: var(--ink-700);
}
.product-row-text p { margin-bottom: 1em; }
.product-row-text p:last-child { margin-bottom: 0; }
/* Le bloc principal : photo + achat - première section, plus aérée */
.product-row--main:first-of-type {
margin-top: 32px;
}
/* Petits écrans : tout en colonne */
@media (max-width: 900px) {
.product-row,
.product-row--text-left {
grid-template-columns: 1fr;
gap: 32px;
margin: 56px 0;
}
.product-row--text-left > .product-row-body { order: 2; }
.product-row--text-left > .product-row-img { order: 1; }
.product-row-img--large,
.product-row-img--small {
max-width: 100%;
justify-self: stretch !important;
}
.product-row-title { margin: 6px 0 18px; }
}
@media (max-width: 600px) {
.product-row { margin: 40px 0; gap: 24px; }
}
/* ─── Carte livraison : rayons plus visibles + pâtisserie en valeur ─── */
/* Cercles zones plus marqués (override les styles inline JS) */
.delivery-map .leaflet-overlay-pane path {
/* renforcement global par défaut, surchargé en JS aussi */
stroke-width: 2.5px !important;
}
/* Pin SVG de la pâtisserie (teardrop) */
.map-pin-shop {
width: 36px !important;
height: 48px !important;
background: none !important;
}
.map-pin-shop .pin-svg {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 48px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
pointer-events: none;
}
.map-pin-shop .pin-svg .pin-body { fill: #B85C38; } /* teardrop principal */
.map-pin-shop .pin-svg .pin-inner { fill: white; } /* cercle blanc intérieur */
.map-pin-shop .pin-svg .pin-letter {
fill: #B85C38;
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 14px;
font-weight: 700;
text-anchor: middle;
}
.shop-label {
position: absolute;
left: 50%;
bottom: -28px;
transform: translateX(-50%);
background: var(--ink-900);
color: white;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-pill);
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
pointer-events: none;
z-index: 1100;
}
/* Marker client : pin sombre */
.map-pin-customer { background: none !important; }
.map-pin-customer .pin-svg .pin-body { fill: var(--ink-900); }
/* Pulse subtil sous le pin (cercle qui s'agrandit) */
.map-pin-shop::after {
content: '';
position: absolute;
left: 50%;
bottom: 4px;
width: 18px;
height: 6px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
transform: translateX(-50%);
filter: blur(2px);
z-index: -1;
}
/* Légende des zones sur la carte : utilise le système de control Leaflet */
.leaflet-control.delivery-map-legend,
.delivery-map-legend {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-sm);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.78rem;
color: var(--ink-900);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
margin: 12px !important;
border: 1px solid var(--border);
font-family: var(--font-sans);
}
.delivery-map-legend-item {
display: flex;
align-items: center;
gap: 10px;
line-height: 1.3;
}
.delivery-map-legend-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
}
.delivery-map-wrap { position: relative; }
@media (max-width: 600px) {
.delivery-map-legend {
font-size: 0.7rem;
padding: 9px 12px;
}
.delivery-map-legend-dot { width: 11px; height: 11px; }
}
/* =========================================================
v3.13 · Couleurs cercles livraison plus vives + pins SVG
========================================================= */
/* Tier cards (légende gauche) : mêmes couleurs que la map */
.tier-card--1 .tier-dot { background: #B83C2E !important; box-shadow: 0 0 0 2px #B83C2E !important; }
.tier-card--2 .tier-dot { background: #D87A33 !important; box-shadow: 0 0 0 2px #D87A33 !important; }
.tier-card--3 .tier-dot { background: #E8B048 !important; box-shadow: 0 0 0 2px #E8B048 !important; }
/* Badges résultat */
.tier-badge--1 { background: #B83C2E !important; color: white !important; }
.tier-badge--2 { background: #D87A33 !important; color: white !important; }
.tier-badge--3 { background: #E8B048 !important; color: var(--ink-900) !important; }
/* Customer pin label (optionnel) — n'utilise pas de label pour rester sobre */
.map-pin-customer .pin-svg .pin-body { fill: var(--ink-900) !important; }
.map-pin-customer { background: none !important; }
.map-pin-customer .pin-svg {
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* =========================================================
v3.14 · Fix z-index Leaflet + bouton géolocalisation
========================================================= */
/* Empêcher la map Leaflet de monter par-dessus header/menu.
isolation: isolate crée un stacking context contenu,
et on plafonne explicitement les panes Leaflet. */
.delivery-map-wrap {
position: relative;
z-index: 0;
isolation: isolate;
}
.delivery-map { position: relative; z-index: 0; }
.delivery-map .leaflet-pane,
.delivery-map .leaflet-control,
.delivery-map .leaflet-top,
.delivery-map .leaflet-bottom,
.delivery-map .leaflet-control-zoom,
.delivery-map .leaflet-control-attribution {
z-index: auto !important; /* reset les z-index Leaflet hauts (400-800) */
}
/* Pareil pour la map de contact */
.map-section,
.visit-map { position: relative; z-index: 0; isolation: isolate; }
.map-section .leaflet-pane,
.visit-map .leaflet-pane,
.map-section .leaflet-control,
.visit-map .leaflet-control,
.map-section .leaflet-top,
.visit-map .leaflet-top,
.map-section .leaflet-bottom,
.visit-map .leaflet-bottom {
z-index: auto !important;
}
/* ─── Bouton "Me localiser" ─── */
.delivery-geolocate {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 10px 16px;
background: var(--white);
border: 1px solid var(--copper-300);
border-radius: var(--radius-sm);
color: var(--copper-800);
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 500;
cursor: pointer;
transition: all .2s;
}
.delivery-geolocate:hover {
background: var(--copper-50);
border-color: var(--copper-500);
}
.delivery-geolocate:disabled {
opacity: 0.6;
cursor: progress;
}
.delivery-geolocate svg {
flex-shrink: 0;
}
.delivery-geolocate-error {
margin-top: 10px;
font-size: 0.82rem;
color: var(--color-error);
}
/* =========================================================
v3.15 · Modal consentement géolocalisation
========================================================= */
.modal-geo {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(26, 19, 13, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: modalFadeIn .25s var(--ease-out);
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-geo-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 32px 28px 28px;
max-width: 440px;
width: 100%;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
position: relative;
animation: modalSlideUp .35s var(--ease-out);
}
@keyframes modalSlideUp {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-geo-card .modal-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--copper-50);
color: var(--copper-700);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.modal-geo-card h3 {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--ink-900);
text-align: center;
margin: 0 0 12px;
font-weight: 400;
}
.modal-geo-card p {
color: var(--ink-700);
font-size: 0.94rem;
line-height: 1.6;
text-align: center;
margin: 0 0 24px;
}
.modal-geo-card .modal-actions {
display: flex;
gap: 12px;
justify-content: stretch;
}
.modal-geo-card .modal-actions .btn { flex: 1; }
.modal-geo-card .modal-privacy {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 0.78rem;
color: var(--ink-500);
text-align: center;
line-height: 1.5;
}
.modal-geo-card .modal-privacy strong {
color: var(--copper-700);
font-weight: 600;
}
@media (max-width: 480px) {
.modal-geo-card {
padding: 24px 20px 20px;
}
.modal-geo-card .modal-actions {
flex-direction: column-reverse;
}
}
body.modal-open { overflow: hidden; }
/* =========================================================
v3.16 · Message d'erreur géoloc (avec instructions)
========================================================= */
.delivery-geolocate-error {
margin-top: 12px;
padding: 14px 16px;
background: #FEF3F2;
border: 1px solid #FECDD3;
border-radius: var(--radius-sm);
font-size: 0.86rem;
line-height: 1.55;
color: #7A2929;
}
.delivery-geolocate-error strong {
color: #5A1F1F;
}
/* =========================================================
v4.4 · Section "Nos univers" — cartes catégories visuelles
Remplace les cat-pills basiques du haut de la home
========================================================= */
.section--cat-showcase {
background: var(--white);
padding: 110px 0 100px;
}
.cat-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px 28px;
max-width: 1240px;
margin: 0 auto;
}
.cat-tile {
display: block;
text-decoration: none;
color: inherit;
position: relative;
transition: transform .5s var(--ease-out);
}
.cat-tile:hover { transform: translateY(-6px); }
.cat-tile-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--cream);
border-radius: 2px;
margin-bottom: 18px;
}
.cat-tile-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out), filter .5s var(--ease);
filter: saturate(0.95) contrast(1.02);
}
.cat-tile:hover .cat-tile-media img {
transform: scale(1.07);
filter: saturate(1.05) contrast(1.05);
}
.cat-tile-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(26, 19, 13, 0) 50%,
rgba(26, 19, 13, 0.4) 100%
);
transition: background .4s var(--ease);
pointer-events: none;
}
.cat-tile:hover .cat-tile-overlay {
background: linear-gradient(
180deg,
rgba(184, 115, 51, 0) 40%,
rgba(184, 115, 51, 0.55) 100%
);
}
.cat-tile-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 4px;
}
.cat-tile-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.85rem;
color: var(--copper-500);
letter-spacing: 0.06em;
min-width: 26px;
}
.cat-tile-name {
flex: 1;
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.2rem;
margin: 0;
color: var(--ink-900);
letter-spacing: -0.005em;
transition: color .25s var(--ease);
}
.cat-tile:hover .cat-tile-name { color: var(--copper-700); }
.cat-tile-arrow {
color: var(--copper-500);
display: inline-flex;
align-items: center;
transition: transform .35s var(--ease-out), color .25s var(--ease);
}
.cat-tile:hover .cat-tile-arrow {
color: var(--copper-700);
transform: translateX(6px);
}
@media (max-width: 640px) {
.section--cat-showcase { padding: 80px 0 70px; }
.cat-showcase { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.cat-tile-name { font-size: 1rem; }
}
/* ============ TAGS PRODUIT — rectangles modernes ============ */
.card-tags {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-self: start;
min-height: 28px; /* garantit symétrie verticale entre cards (0 ou n tags) */
}
.card-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--copper-800);
background: var(--copper-50);
border: 1px solid var(--copper-200);
border-radius: 3px;
white-space: nowrap;
transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.card-tag svg {
color: var(--copper-600);
flex-shrink: 0;
width: 12px; height: 12px;
transition: color .25s var(--ease);
}
.product-card:hover .card-tag {
background: var(--white);
border-color: var(--copper-400);
color: var(--copper-900);
}
.product-card:hover .card-tag svg { color: var(--copper-700); }
/* Variantes contextuelles : couleur d'accent par type de tag */
.card-tag[data-type="season"] {
background: #F0F5EC;
border-color: #C8DFB8;
color: #3D5C2A;
}
.card-tag[data-type="season"] svg { color: #6B9C42; }
.product-card:hover .card-tag[data-type="season"] {
background: #fff;
border-color: #6B9C42;
color: #2A4118;
}
.card-tag[data-type="prep"] {
background: #FAF6F1;
border-color: var(--copper-200);
color: var(--copper-800);
}
/* Variante page produit (plus aérée, taille un peu plus grande) */
.card-tags--detail {
margin: 18px 0 24px;
min-height: 0;
gap: 8px;
}
.card-tags--detail .card-tag {
padding: 9px 14px;
font-size: 0.72rem;
letter-spacing: 0.1em;
}
.card-tags--detail .card-tag svg { width: 13px; height: 13px; }
/* ============ Producteurs liés à un produit ============ */
.product-producers {
margin: 80px 0 0;
padding: 80px 0 40px;
border-top: 1px solid var(--border);
}
.producers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
.producer-mini {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--white);
border: 1px solid var(--border);
transition: border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.producer-mini:hover {
border-color: var(--copper-300);
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(184,115,51,0.10);
}
.producer-mini-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cream);
}
.producer-mini-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.producer-mini:hover .producer-mini-img img { transform: scale(1.06); }
.producer-mini-body {
padding: 22px 24px 26px;
display: flex; flex-direction: column;
flex: 1;
}
.producer-mini-body .eyebrow {
margin-bottom: 10px;
color: var(--copper-600);
}
.producer-mini-body h3 {
margin: 0 0 12px;
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.2rem;
color: var(--chocolat);
letter-spacing: -0.005em;
}
.producer-mini-body p {
margin: 0 0 18px;
font-size: 0.9rem;
line-height: 1.6;
color: var(--ink-500);
}
.producer-mini-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-700);
transition: gap .3s var(--ease-out);
}
.producer-mini:hover .producer-mini-link {
gap: 16px;
color: var(--copper-900);
}
/* =========================================================
v5.17 · Boutique style éditorial centré (inspiration Claire Heitzler)
Titre large centré + boutons catégories rectangles + dropdowns inline
========================================================= */
/* ====== TITRE BOUTIQUE (aligné sur producteurs / autres pages) ====== */
.section--shop-head {
padding: 88px 0 32px;
background: var(--off-white);
}
.section--shop-head .section-title {
margin-bottom: 48px;
}
.section--shop-head .section-title h1 {
/* Identique au h1 par défaut, qu'on retrouve sur producteurs */
margin-bottom: 18px;
}
.shop-head-lede {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.02rem;
color: var(--ink-500);
max-width: 620px;
margin: 0 auto !important;
line-height: 1.65;
}
/* ====== BOUTONS CATÉGORIES (rectangles centrés) ====== */
.shop-cats-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 1100px;
margin: 0 auto;
}
.shop-cat-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-900);
background: transparent;
border: 1px solid var(--copper-300);
text-decoration: none;
transition: all .25s var(--ease-out);
white-space: nowrap;
}
.shop-cat-btn:hover {
background: var(--white);
border-color: var(--copper-700);
color: var(--copper-800);
}
.shop-cat-btn.is-active {
background: var(--copper-700);
border-color: var(--copper-700);
color: #fff;
}
/* ====== FILTRES INLINE (custom dropdowns) ====== */
.shop-tools {
background: var(--off-white);
padding: 0 0 32px;
}
.shop-tools-form {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 22px 28px;
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto 18px;
padding: 22px 28px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(26, 19, 13, 0.04);
}
/* Custom dropdown */
.dd {
position: relative;
display: inline-flex;
flex-direction: column;
gap: 6px;
min-width: 150px;
}
.dd-label {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-700);
}
.dd-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 14px;
background: var(--white);
border: 1px solid var(--copper-200);
border-radius: 4px;
font-family: var(--font-serif);
font-size: 0.98rem;
color: var(--ink-900);
cursor: pointer;
transition: all .2s var(--ease);
width: 100%;
text-align: left;
letter-spacing: -0.005em;
}
.dd-trigger:hover {
border-color: var(--copper-500);
}
.dd-trigger:focus-visible {
outline: none;
border-color: var(--copper-500);
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.15);
}
.dd-trigger svg {
color: var(--copper-700);
transition: transform .25s var(--ease);
flex-shrink: 0;
}
.dd.is-open .dd-trigger {
border-color: var(--copper-600);
background: var(--copper-50);
}
.dd.is-open .dd-trigger svg {
transform: rotate(180deg);
}
/* Panel dropdown */
.dd-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 100%;
background: var(--white);
border: 1px solid var(--copper-200);
border-radius: 4px;
box-shadow: 0 12px 32px rgba(26, 19, 13, 0.10);
list-style: none;
margin: 0;
padding: 6px;
z-index: 50;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease-out);
}
.dd.is-open .dd-panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.dd-panel li { margin: 0; }
.dd-panel a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
font-family: var(--font-sans);
font-size: 0.88rem;
color: var(--ink-700);
text-decoration: none;
border-radius: 3px;
transition: background .15s var(--ease), color .15s var(--ease);
letter-spacing: 0.01em;
}
.dd-panel a:hover {
background: var(--copper-50);
color: var(--copper-800);
}
.dd-panel a.is-active {
background: var(--copper-700);
color: #fff;
font-weight: 500;
}
.dd-panel a.is-active::after {
content: '';
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Bouton "Réinitialiser" */
.shop-tools-clear {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-end;
padding: 11px 16px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-500);
background: transparent;
border: 1px solid var(--copper-300);
border-radius: 4px;
text-decoration: none;
transition: all .2s var(--ease);
white-space: nowrap;
}
.shop-tools-clear:hover {
color: #B33A3A;
border-color: #B33A3A;
background: #fff;
}
.shop-tools-count {
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
color: var(--ink-500);
}
/* ====== GRILLE PRODUITS ====== */
.shop-products-section {
background: var(--off-white);
padding: 32px 0 100px;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 48px 32px;
max-width: 1280px;
margin: 0 auto;
}
/* Cards éditoriales : pas de border, pas d'ombre, juste l'image + texte */
.shop-products-section .product-card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.shop-products-section .product-card:hover {
transform: translateY(-4px);
box-shadow: none;
border: 0;
}
.shop-products-section .product-card-image {
border-radius: 4px;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.shop-products-section .product-card-body {
padding: 22px 4px 0;
background: transparent;
}
/* Le marker "Signature/Nouveauté" est utile sur la home mais redondant
ici puisqu'on a déjà un dropdown "Sélection" pour ça. On le masque. */
.shop-products-section .card-marker { display: none !important; }
/* Responsive */
@media (max-width: 760px) {
.section--shop-head { padding: 56px 0 24px; }
.section--shop-head .section-title { margin-bottom: 32px; }
.shop-cats-row { gap: 8px; padding: 0 16px; }
.shop-cat-btn { padding: 10px 16px; font-size: 0.7rem; letter-spacing: 0.16em; }
.shop-tools-form { gap: 16px; padding: 18px 20px; }
.dd { min-width: calc(50% - 9px); flex: 1 1 calc(50% - 9px); }
.shop-tools-clear { width: 100%; justify-content: center; align-self: stretch; }
.shop-products-section { padding: 24px 0 64px; }
.shop-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media (max-width: 480px) {
.shop-grid { grid-template-columns: 1fr; gap: 32px; }
.dd { min-width: 100%; flex: 1 1 100%; }
}
/* Anciens éléments masqués (layout 2 colonnes + drawer mobile retirés) */
.shop-layout, .shop-sidebar, .shop-mobile-toolbar, .shop-list-header, .shop-products,
.shop-filterbar, .shop-toolbar { display: none !important; }
/* Garde l'ancien bloc CSS pour rétro-compat (non utilisé désormais) */
.shop-section--legacy { padding: 32px 0 100px; }
.shop-section { padding: 0; }
/* Layout 2 colonnes : sidebar 280px + grille produits */
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: start;
}
.shop-mobile-toolbar { display: none; }
/* ====== SIDEBAR — CARD GLOBAL ====== */
.shop-sidebar {
position: sticky;
top: 110px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(26, 19, 13, 0.04);
}
/* Header card */
.shop-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
background: linear-gradient(180deg, var(--copper-50) 0%, var(--white) 100%);
border-bottom: 1px solid var(--border);
}
.shop-sidebar-head .eyebrow {
margin: 0;
color: var(--copper-700);
font-size: 0.7rem;
letter-spacing: 0.24em;
}
.shop-filters-close {
display: none;
background: transparent;
border: 0;
color: var(--ink-700);
cursor: pointer;
padding: 4px;
}
/* Form contenu */
.shop-sidebar-form {
display: flex;
flex-direction: column;
padding: 8px 22px 22px;
}
/* Groupe de filtres */
.filter-group {
border: 0;
margin: 0;
padding: 18px 0;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.filter-group:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.filter-group:first-of-type { padding-top: 14px; }
.filter-group legend {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-700);
margin: 0 0 12px;
padding: 0;
width: 100%;
}
/* ====== Liens catégories (propres et alignés) ====== */
.filter-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
margin: 1px -12px;
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 400;
color: var(--ink-700);
text-decoration: none;
letter-spacing: 0.005em;
border-radius: 6px;
position: relative;
transition: background .2s var(--ease), color .2s var(--ease);
}
.filter-link::before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 2px;
background: transparent;
border-radius: 0 2px 2px 0;
transition: background .2s var(--ease);
}
.filter-link:hover {
background: var(--copper-50);
color: var(--copper-800);
}
.filter-link.is-active {
background: var(--copper-50);
color: var(--copper-900);
font-weight: 600;
}
.filter-link.is-active::before {
background: var(--copper-600);
}
.filter-link-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-link-count {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 26px;
height: 22px;
padding: 0 7px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
color: var(--ink-500);
background: var(--off-white);
border: 1px solid var(--border);
border-radius: 999px;
flex-shrink: 0;
}
.filter-link.is-active .filter-link-count {
color: var(--white);
background: var(--copper-600);
border-color: var(--copper-600);
}
/* ====== Toggle checkbox (icône + label + cocher) ====== */
.filter-toggle {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px;
margin: 1px -12px;
cursor: pointer;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 400;
color: var(--ink-700);
letter-spacing: 0.005em;
transition: background .2s var(--ease), color .2s var(--ease);
user-select: none;
position: relative;
}
.filter-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.filter-toggle:hover {
background: var(--copper-50);
color: var(--ink-900);
}
.filter-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 6px;
background: var(--copper-50);
color: var(--copper-700);
flex-shrink: 0;
transition: background .25s var(--ease), color .25s var(--ease);
}
.filter-toggle-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-toggle-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: #fff;
color: transparent;
flex-shrink: 0;
transition: all .2s var(--ease);
}
.filter-toggle.is-active {
color: var(--ink-900);
font-weight: 600;
background: var(--copper-50);
}
.filter-toggle.is-active .filter-toggle-icon {
background: var(--copper-700);
color: #fff;
}
.filter-toggle.is-active .filter-toggle-mark {
background: var(--copper-700);
border-color: var(--copper-700);
color: #fff;
}
/* Lien "Effacer les filtres" — pleine largeur sous la card */
.filter-clear-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
padding: 11px 14px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-700);
background: var(--off-white);
border: 1px solid var(--border);
border-radius: 6px;
text-decoration: none;
transition: all .2s var(--ease);
width: 100%;
box-sizing: border-box;
}
.filter-clear-link:hover {
color: #B33A3A;
border-color: #FCA5A5;
background: #FEF2F2;
}
/* ─── Liste produits : header (count + sort) ─── */
.shop-list-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding-bottom: 22px;
margin-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.shop-list-count {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--ink-700);
letter-spacing: -0.005em;
}
.shop-list-count em {
font-style: italic;
color: var(--copper-700);
}
.shop-list-sort {
display: flex;
align-items: center;
gap: 10px;
}
.shop-list-sort label {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--copper-600);
}
.shop-list-sort-select {
position: relative;
display: inline-flex;
align-items: center;
}
.shop-list-sort-select select {
appearance: none;
-webkit-appearance: none;
background: var(--white);
border: 1px solid var(--border);
border-radius: 3px;
padding: 8px 32px 8px 14px;
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--ink-700);
cursor: pointer;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.shop-list-sort-select select:focus {
outline: none;
border-color: var(--copper-500);
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.shop-list-sort-select svg {
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
color: var(--copper-600);
pointer-events: none;
}
/* ─── Responsive : drawer mobile ─── */
@media (max-width: 960px) {
.shop-layout { grid-template-columns: 1fr; gap: 20px; }
.shop-mobile-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.shop-filter-badge {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 20px; height: 20px;
margin-left: 6px;
padding: 0 6px;
background: var(--copper-700);
color: #fff;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
}
.shop-count-mobile {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-500);
}
.shop-sidebar {
position: fixed;
top: 0; right: 0;
width: min(360px, 90vw);
height: 100dvh;
height: 100vh;
background: var(--white);
border: 0;
border-radius: 0;
padding: 0;
overflow-y: auto;
transform: translateX(100%);
transition: transform .3s var(--ease-out);
z-index: 1100;
box-shadow: -20px 0 60px rgba(26, 19, 13, 0.18);
}
.shop-sidebar.is-open { transform: translateX(0); }
.shop-filters-close { display: inline-flex; }
.shop-sidebar-head { padding: 22px 24px; }
.shop-sidebar-form { padding: 8px 24px 32px; }
body.shop-filters-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(26, 19, 13, 0.5);
z-index: 1099;
animation: fadeIn .25s ease-out;
}
}
/* Masque les anciens éléments éventuels */
.shop-toolbar, .shop-filterbar { display: none !important; }
.shop-filters { /* legacy */ }
.shop-filters > .shop-filters-form { /* legacy */ }
.filterbar-row {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
}
.filterbar-row + .filterbar-row {
border-top: 1px solid var(--border);
background: linear-gradient(180deg, var(--copper-50) 0%, var(--white) 100%);
}
/* Ligne 1 : pills catégories — scroll horizontal sur mobile */
.filterbar-row--cats {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--copper-300) transparent;
-webkit-overflow-scrolling: touch;
padding-right: 22px;
}
.filterbar-row--cats::-webkit-scrollbar { height: 6px; }
.filterbar-row--cats::-webkit-scrollbar-track { background: transparent; }
.filterbar-row--cats::-webkit-scrollbar-thumb {
background: var(--copper-200);
border-radius: 999px;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-700);
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease-out);
}
.filter-pill:hover {
border-color: var(--copper-400);
color: var(--copper-800);
transform: translateY(-1px);
}
.filter-pill small {
display: inline-block;
padding: 1px 7px;
background: var(--copper-50);
color: var(--copper-700);
font-size: 0.66rem;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.05em;
transition: background .25s var(--ease), color .25s var(--ease);
}
.filter-pill.is-active {
background: var(--ink-900);
border-color: var(--ink-900);
color: #fff;
}
.filter-pill.is-active small {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.85);
}
/* Ligne 2 : chips toggle + sort */
.filterbar-row--chips {
flex-wrap: wrap;
justify-content: space-between;
}
.filterbar-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
flex: 1;
min-width: 0;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-500);
background: #fff;
border: 1px solid var(--border);
border-radius: 3px;
cursor: pointer;
user-select: none;
transition: all .25s var(--ease-out);
white-space: nowrap;
}
.filter-chip input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.filter-chip svg {
color: var(--copper-500);
flex-shrink: 0;
transition: color .25s var(--ease);
}
.filter-chip:hover {
border-color: var(--copper-400);
color: var(--ink-900);
}
.filter-chip.is-active {
background: var(--copper-800);
color: #fff;
border-color: var(--copper-800);
box-shadow: 0 2px 8px rgba(184, 115, 51, 0.25);
}
.filter-chip.is-active svg { color: #fff; }
.filter-chip-clear {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 4px;
padding: 7px 12px;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-500);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.filter-chip-clear:hover {
color: #B33A3A;
border-bottom-color: #B33A3A;
}
/* Fin de la ligne 2 : count + sort */
.filterbar-end {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.filterbar-count {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-500);
white-space: nowrap;
}
.filterbar-sort {
position: relative;
display: inline-flex;
align-items: center;
}
.filterbar-sort select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #fff;
border: 1px solid var(--border);
border-radius: 3px;
padding: 8px 32px 8px 14px;
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--ink-700);
cursor: pointer;
transition: border-color .25s var(--ease);
}
.filterbar-sort select:focus {
outline: none;
border-color: var(--copper-500);
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}
.filterbar-sort-icon {
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
color: var(--copper-600);
pointer-events: none;
}
@media (max-width: 720px) {
.filterbar-row { padding: 14px 16px; }
.filterbar-row--chips { flex-direction: column; align-items: stretch; gap: 14px; }
.filterbar-end { justify-content: space-between; width: 100%; }
.filter-pill { padding: 8px 14px; font-size: 0.74rem; }
}
/* Masque les anciens éléments shop-toolbar/shop-filters s'ils traînent */
/* Masque uniquement les vieux éléments legacy (toolbar isolée + filters
form sans sidebar wrapper). NE PAS masquer .shop-layout > aside :
c'est la nouvelle sidebar #shop-sidebar utilisée maintenant. */
.shop-section > .container > .shop-toolbar { display: none !important; }
/* =========================================================
v5.21 · Page Producteurs · refonte éditoriale
========================================================= */
.section--producers-head {
padding: 88px 0 32px;
background: var(--off-white);
}
.producers-head-lede {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.02rem;
color: var(--ink-500);
max-width: 580px;
margin: 16px auto 0 !important;
line-height: 1.65;
}
.producers-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin: 48px auto 0;
flex-wrap: wrap;
}
.producers-stat {
text-align: center;
}
.producers-stat strong {
display: block;
font-family: var(--font-serif);
font-weight: 400;
font-size: 2rem;
color: var(--copper-700);
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: 6px;
}
.producers-stat span {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-500);
}
.producers-stat-divider {
width: 1px;
height: 36px;
background: var(--copper-300);
}
/* GRILLE PRODUCTEURS */
.section--producers-list {
padding: 56px 0 80px;
background: var(--off-white);
}
.producers-grid-editorial {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 64px 32px;
max-width: 1240px;
margin: 0 auto;
}
.producer-card-editorial {
display: block;
text-decoration: none;
color: inherit;
position: relative;
transition: transform .4s var(--ease-out);
}
.producer-card-editorial:hover {
transform: translateY(-6px);
}
.producer-card-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--cream);
margin-bottom: 24px;
border-radius: 4px;
}
.producer-card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.producer-card-editorial:hover .producer-card-media img {
transform: scale(1.06);
}
.producer-card-num {
position: absolute;
bottom: 16px; left: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50%;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.92rem;
color: var(--copper-700);
letter-spacing: 0;
}
.producer-card-body {
padding: 0 4px;
}
.producer-card-eyebrow {
display: flex;
align-items: center;
gap: 8px;
color: var(--copper-700);
margin-bottom: 10px;
letter-spacing: 0.18em;
}
.producer-dot {
display: inline-block;
width: 3px; height: 3px;
background: var(--copper-400);
border-radius: 50%;
}
.producer-card-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.4rem;
margin: 0 0 12px;
color: var(--ink-900);
letter-spacing: -0.005em;
}
.producer-card-desc {
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-500);
margin: 0 0 16px;
}
.producer-card-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-700);
transition: gap .3s var(--ease-out), color .25s var(--ease);
}
.producer-card-editorial:hover .producer-card-link {
gap: 16px;
color: var(--copper-900);
}
/* VALEURS / DÉMARCHE */
.section--producers-values {
padding: 80px 0 100px;
background: var(--white);
}
.producers-values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px 60px;
max-width: 880px;
margin: 56px auto 0;
}
.producers-value {
text-align: left;
}
.producers-value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: var(--copper-50);
border-radius: 50%;
color: var(--copper-700);
margin-bottom: 16px;
}
.producers-value h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.2rem;
margin: 0 0 8px;
color: var(--ink-900);
}
.producers-value p {
margin: 0;
font-size: 0.94rem;
line-height: 1.7;
color: var(--ink-500);
}
@media (max-width: 760px) {
.section--producers-head { padding: 56px 0 24px; }
.producers-stats { gap: 24px; margin-top: 32px; }
.producers-stat strong { font-size: 1.6rem; }
.producers-stat-divider { height: 28px; }
.section--producers-list { padding: 32px 0 60px; }
.producers-grid-editorial { grid-template-columns: 1fr; gap: 48px; max-width: 440px; }
.producers-values-grid { grid-template-columns: 1fr; gap: 36px; max-width: 480px; }
}
/* =========================================================
v5.21 · Page Notre histoire · refonte éditoriale
========================================================= */
.section--about-head {
padding: 88px 0 24px;
background: var(--off-white);
}
.about-head-lede {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.08rem;
color: var(--ink-500);
max-width: 620px;
margin: 16px auto 0 !important;
line-height: 1.65;
}
.section--about-portrait {
padding: 56px 0 96px;
background: var(--off-white);
}
.about-portrait-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.about-portrait-media {
position: relative;
}
.about-portrait-media img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(26, 19, 13, 0.18);
}
.about-portrait-caption {
position: absolute;
bottom: -28px;
right: -28px;
background: var(--white);
padding: 22px 28px;
box-shadow: 0 8px 24px rgba(26, 19, 13, 0.12);
text-align: right;
}
.about-portrait-caption .eyebrow {
display: block;
color: var(--copper-700);
margin-bottom: 6px;
}
.about-portrait-caption strong {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.15rem;
color: var(--ink-900);
font-style: italic;
}
.about-portrait-text .eyebrow {
color: var(--copper-700);
margin-bottom: 16px;
}
.about-portrait-text h2 {
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
margin: 0 0 28px;
letter-spacing: -0.012em;
}
.about-story {
font-size: 1.02rem;
line-height: 1.85;
color: var(--ink-700);
}
.about-story p { margin: 0 0 1.1em; }
/* TIMELINE */
.section--about-timeline {
padding: 88px 0;
background: var(--white);
position: relative;
}
.section--about-timeline::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--copper-300), transparent);
}
.about-timeline {
list-style: none;
margin: 56px 0 0;
padding: 0;
position: relative;
}
.about-timeline::before {
content: '';
position: absolute;
left: 140px; top: 12px; bottom: 12px;
width: 1px;
background: var(--copper-200);
}
.about-timeline-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 48px;
padding: 24px 0 32px;
position: relative;
}
.about-timeline-item::before {
content: '';
position: absolute;
left: 135px; top: 32px;
width: 12px; height: 12px;
background: var(--white);
border: 1.5px solid var(--copper-400);
border-radius: 50%;
}
.about-timeline-item.is-current::before {
background: var(--copper-500);
border-color: var(--copper-500);
box-shadow: 0 0 0 4px var(--copper-100);
animation: timelinePulseAbout 2.4s ease-in-out infinite;
}
@keyframes timelinePulseAbout {
0%, 100% { box-shadow: 0 0 0 4px rgba(184,115,51,0.20); }
50% { box-shadow: 0 0 0 9px rgba(184,115,51,0.05); }
}
.about-timeline-year {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.35rem;
color: var(--copper-700);
text-align: right;
padding-right: 8px;
letter-spacing: -0.005em;
}
.about-timeline-body h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.3rem;
margin: 0 0 8px;
color: var(--ink-900);
letter-spacing: -0.005em;
}
.about-timeline-body p {
margin: 0;
font-size: 0.98rem;
line-height: 1.7;
color: var(--ink-500);
max-width: 560px;
}
/* CITATION */
.section--about-quote {
padding: 88px 0;
background: var(--copper-50);
text-align: center;
}
.about-quote {
margin: 0;
padding: 0;
position: relative;
}
.about-quote-mark {
display: block;
margin: 0 auto 24px;
color: var(--copper-400);
opacity: 0.7;
}
.about-quote p {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.4rem, 2.8vw, 1.9rem);
line-height: 1.5;
color: var(--ink-900);
margin: 0 auto 28px;
max-width: 680px;
letter-spacing: -0.005em;
}
.about-quote cite {
font-style: normal;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--copper-700);
}
/* CTA VISITE */
.section--about-cta {
padding: 80px 0 100px;
background: var(--white);
}
.about-cta {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 64px;
align-items: start;
max-width: 980px;
margin: 0 auto;
}
.about-cta h2 {
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
letter-spacing: -0.012em;
margin: 8px 0 16px;
}
.about-cta-info p {
margin: 0 0 22px;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-700);
}
.about-cta-info p:last-child { margin-bottom: 0; }
.about-cta-info .eyebrow {
display: block;
color: var(--copper-700);
margin-bottom: 6px;
}
.about-cta-info a {
color: var(--ink-900);
border-bottom: 1px solid var(--copper-300);
transition: color .2s, border-color .2s;
}
.about-cta-info a:hover {
color: var(--copper-700);
border-bottom-color: var(--copper-700);
}
@media (max-width: 900px) {
.section--about-portrait { padding: 32px 0 80px; }
.about-portrait-grid { grid-template-columns: 1fr; gap: 56px; }
.about-portrait-caption { right: 16px; bottom: -20px; padding: 16px 22px; }
.about-timeline::before { left: 8px; }
.about-timeline-item { grid-template-columns: 1fr; gap: 8px; padding-left: 32px; }
.about-timeline-item::before { left: 3px; top: 30px; }
.about-timeline-year { text-align: left; padding-right: 0; font-size: 1.2rem; }
.about-cta { grid-template-columns: 1fr; gap: 40px; }
}
/* =========================================================
v5.26 · Page Contact · refonte éditoriale moderne
========================================================= */
.section--contact-head {
padding: 88px 0 32px;
background: var(--off-white);
}
.contact-head-lede {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--ink-500);
max-width: 620px;
margin: 16px auto 0 !important;
line-height: 1.65;
}
.section--contact-body {
padding: 24px 0 88px;
background: var(--off-white);
}
.contact-layout-v2 {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
/* Carte formulaire */
.contact-form-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 40px 44px;
box-shadow: 0 1px 3px rgba(26, 19, 13, 0.04);
}
.contact-form-header {
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.contact-form-header .eyebrow {
color: var(--copper-700);
margin-bottom: 10px;
}
.contact-form-header h2 {
margin: 0 0 8px;
font-size: 1.6rem;
letter-spacing: -0.005em;
}
.contact-form-header p {
margin: 0;
color: var(--ink-500);
font-size: 0.92rem;
font-style: italic;
}
.contact-form-card .form-row {
display: flex;
gap: 18px;
}
.contact-form-card .form-row .form-group { flex: 1; }
.contact-form-card .btn-lg {
margin-top: 8px;
width: auto;
min-width: 240px;
}
.contact-form-help {
margin: 16px 0 0;
font-size: 0.82rem;
color: var(--ink-500);
}
/* Aside infos */
.contact-aside {
display: flex;
flex-direction: column;
gap: 22px;
}
.contact-aside-block {
display: flex;
align-items: flex-start;
gap: 16px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 22px 24px;
transition: border-color .25s var(--ease), transform .25s var(--ease-out);
}
.contact-aside-block:hover {
border-color: var(--copper-300);
transform: translateX(2px);
}
.contact-aside-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--copper-50);
border-radius: 50%;
color: var(--copper-700);
flex-shrink: 0;
}
.contact-aside-block > div {
flex: 1;
min-width: 0;
}
.contact-aside-block .eyebrow {
display: block;
color: var(--copper-700);
margin-bottom: 6px;
}
.contact-aside-block p {
margin: 0;
font-size: 0.96rem;
line-height: 1.55;
color: var(--ink-700);
}
.contact-aside-block p a {
color: var(--ink-900);
border-bottom: 1px solid var(--copper-300);
transition: border-color .25s, color .25s;
}
.contact-aside-block p a:hover {
color: var(--copper-700);
border-bottom-color: var(--copper-700);
}
/* La grille horaires dans l'aside reste compacte */
.contact-aside-block .schedule--grid .schedule-row {
font-size: 0.85rem;
padding: 5px 0;
}
/* Carte pleine largeur */
.section--contact-map {
padding: 0 0 96px;
background: var(--off-white);
}
.contact-map-header {
text-align: center;
margin-bottom: 28px;
}
.contact-map-header .eyebrow {
display: block;
color: var(--copper-700);
margin-bottom: 8px;
}
.contact-map-header h2 {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2rem);
}
.contact-map {
width: 100%;
height: 400px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
}
@media (max-width: 900px) {
.contact-layout-v2 { grid-template-columns: 1fr; gap: 24px; }
.contact-form-card { padding: 32px 28px; }
.contact-form-card .form-row { flex-direction: column; gap: 0; }
.contact-map { height: 300px; }
}
/* =========================================================
v5.22 · Horaires lisibles (jour par jour) — render_schedule_html()
========================================================= */
.schedule { margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--font-sans); }
/* Variante grid : ligne par jour avec pointillés au milieu */
.schedule--grid {
display: flex;
flex-direction: column;
gap: 2px;
}
.schedule--grid .schedule-row {
display: grid;
grid-template-columns: minmax(80px, auto) 1fr auto;
align-items: baseline;
gap: 10px;
padding: 7px 0;
font-size: 0.9rem;
border-bottom: 1px dashed transparent;
}
.schedule--grid .schedule-row + .schedule-row {
border-top: 1px solid var(--border);
}
.schedule--grid .schedule-day {
color: var(--ink-700);
font-weight: 500;
letter-spacing: 0.02em;
}
.schedule--grid .schedule-dots {
border-bottom: 1px dotted var(--copper-200);
align-self: end;
margin-bottom: 5px;
}
.schedule--grid .schedule-time {
color: var(--ink-900);
font-family: var(--font-serif);
font-style: italic;
font-size: 0.96rem;
letter-spacing: -0.005em;
white-space: nowrap;
}
.schedule--grid .schedule-row.is-closed .schedule-time {
color: var(--ink-400);
font-style: italic;
}
.schedule--grid .schedule-row.is-today {
background: var(--copper-50);
margin: 0 -10px;
padding-left: 12px;
padding-right: 12px;
border-left: 2px solid var(--copper-500);
border-radius: 2px;
}
.schedule--grid .schedule-row.is-today .schedule-day,
.schedule--grid .schedule-row.is-today .schedule-time {
color: var(--copper-800);
font-weight: 600;
}
.schedule--grid .schedule-row.is-today .schedule-time { font-weight: 500; }
.schedule--grid .schedule-row.is-today .schedule-dots {
border-color: var(--copper-400);
}
/* Variante list compacte (footer) */
.schedule--list { display: flex; flex-direction: column; gap: 2px; }
.schedule--list .schedule-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 4px 0;
font-size: 0.86rem;
}
.schedule--list .schedule-day {
color: var(--ink-500);
}
.schedule--list .schedule-time {
color: var(--ink-300);
font-family: var(--font-serif);
font-style: italic;
white-space: nowrap;
}
.site-footer .schedule--list .schedule-day { color: rgba(255,255,255,0.85); }
.site-footer .schedule--list .schedule-time { color: rgba(255,255,255,0.55); }
.site-footer .schedule--list .schedule-row.is-today .schedule-day,
.site-footer .schedule--list .schedule-row.is-today .schedule-time {
color: var(--copper-300) !important;
font-weight: 600;
}
/* Variante inline (très compact) */
.schedule--inline {
font-size: 0.82rem;
color: var(--ink-500);
font-family: var(--font-serif);
font-style: italic;
}
/* =========================================================
v5.20 · Masquage global du marker Signature/Nouveauté sur les cards
========================================================= */
/* Le marker était utile au début mais devient redondant maintenant que
les flags "Signature" / "Nouveauté" sont accessibles via filtres et
tags inline dans la card. On le retire de partout. */
.card-marker { display: none !important; }
/* =========================================================
v5.20 · Section "L'exigence en trois principes" (refonte pillars)
========================================================= */
.section--principles {
background: var(--off-white);
padding: 100px 0;
position: relative;
}
.section--principles::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--copper-300), transparent);
}
.principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 1080px;
margin: 64px auto 0;
background: var(--white);
border: 1px solid var(--copper-100);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(26, 19, 13, 0.04);
}
.principle {
position: relative;
padding: 52px 38px 48px;
text-align: center;
border-right: 1px solid var(--copper-100);
background: var(--white);
transition: background .35s var(--ease);
}
.principle:last-child { border-right: 0; }
.principle:hover {
background: var(--copper-50);
}
.principle-num {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.15rem;
color: var(--copper-600);
letter-spacing: 0.05em;
margin-bottom: 10px;
}
.principle-rule {
display: block;
width: 36px;
height: 1px;
background: var(--copper-400);
margin: 0 auto 26px;
}
.principle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid var(--copper-300);
border-radius: 50%;
color: var(--copper-700);
margin-bottom: 24px;
transition: background .35s var(--ease), color .35s var(--ease), transform .4s var(--ease-out);
}
.principle:hover .principle-icon {
background: var(--copper-700);
color: #fff;
transform: scale(1.05);
}
.principle h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--ink-900);
}
.principle p {
margin: 0;
font-size: 0.96rem;
line-height: 1.7;
color: var(--ink-500);
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.section--principles { padding: 72px 0; }
.principles-grid { grid-template-columns: 1fr; max-width: 520px; margin-top: 40px; }
.principle { padding: 40px 32px; border-right: 0; border-bottom: 1px solid var(--copper-100); }
.principle:last-child { border-bottom: 0; }
.principle p { max-width: none; }
}
/* ──────────────────────────────────────────────────────────────────
Breadcrumbs (fil d'Ariane) — v6.0 SEO
Affichage entre le header et le contenu principal sur toutes les
pages internes. Lecture rapide + signal SEO (BreadcrumbList schema).
────────────────────────────────────────────────────────────────── */
.breadcrumbs {
background: var(--cream, #f5efe8);
border-bottom: 1px solid var(--copper-100, rgba(107,26,46,0.08));
padding: 14px 0;
font-family: var(--font-sans, system-ui);
font-size: 0.82rem;
}
.breadcrumbs-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
}
.breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
color: var(--ink-500, #6b6358);
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.breadcrumbs li:not(:last-child)::after {
content: '›';
margin-left: 8px;
color: var(--copper-400, #b5876a);
font-size: 0.95rem;
line-height: 1;
}
.breadcrumbs a {
color: var(--ink-700, #3a3128);
text-decoration: none;
transition: color 0.15s;
}
.breadcrumbs a:hover {
color: var(--copper-700, #6b1a2e);
text-decoration: underline;
}
.breadcrumbs span[aria-current="page"] {
color: var(--ink-900, #1A130D);
font-weight: 500;
}
@media (max-width: 700px) {
.breadcrumbs { padding: 10px 0; font-size: 0.76rem; }
.breadcrumbs-inner { padding: 0 18px; }
.breadcrumbs ol { gap: 6px; }
.breadcrumbs li:not(:last-child)::after { margin-left: 6px; }
/* Sur mobile, ne montrer que le parent + page courante */
.breadcrumbs li:not(:nth-last-child(-n+2)) { display: none; }
}
/* =========================================================
v6.4 · Reveal au scroll — fade-in + slide-up
Pilote par JS (IntersectionObserver) qui ajoute .reveal
puis .is-revealed quand l'element entre dans le viewport.
========================================================= */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
.reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Accessibilite : on coupe l'effet pour les utilisateurs qui ont demande
"reduced motion" dans leur OS. Sans JS, la classe .reveal n'est jamais
ajoutee, donc les elements restent visibles : pas de fallback necessaire. */
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =========================================================
v6.5 · Micro-interactions : boutons, cartes, liens
Finitions cosmétiques cohérentes avec le reveal au scroll.
========================================================= */
/* ─── Boutons : effet "shine" diagonal au hover + effet "press" actif ─── */
/* isolation:isolate crée un stacking context, z-index:-1 garde le shine
sous le texte (qui reste parfaitement net) tout en restant à l'intérieur
du bouton (jamais derrière le fond de page). */
.btn { isolation: isolate; }
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, 0.20) 50%,
transparent 70%);
transform: translateX(-130%);
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: -1;
}
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(1px); }
/* Sur les boutons outline (fond clair), un shine cuivré plus visible que blanc */
.btn-outline::before {
background: linear-gradient(115deg,
transparent 30%,
rgba(184, 115, 51, 0.16) 50%,
transparent 70%);
}
/* ─── Cartes produits : flèche → animée après "Découvrir" ─── */
.product-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .25s var(--ease);
}
.product-card-link::after {
content: '→';
display: inline-block;
font-size: 1em;
line-height: 1;
transform: translateX(0);
transition: transform .35s var(--ease-out);
}
.product-card:hover .product-card-link {
color: var(--copper-500);
}
.product-card:hover .product-card-link::after {
transform: translateX(5px);
}
/* Eyebrow cuivre : tracking légèrement plus aéré au hover */
.product-card-category {
transition: letter-spacing .35s var(--ease-out), color .25s var(--ease);
}
.product-card:hover .product-card-category {
letter-spacing: 0.22em;
}
/* ─── Brand (logo header) : tracking subtil au hover ─── */
.brand-name {
transition: color .3s var(--ease-out), letter-spacing .3s var(--ease-out);
}
.brand:hover .brand-name {
letter-spacing: 0.035em;
}
/* ─── Respect des préférences utilisateur ─── */
@media (prefers-reduced-motion: reduce) {
.btn::before { display: none !important; }
.product-card-link::after,
.product-card-category,
.brand-name {
transition: none !important;
}
.product-card:hover .product-card-link::after {
transform: none !important;
}
}
/* =========================================================
v6.7 · Pages légales (mentions, CGV, confidentialité, cookies)
Style éditorial : sommaire, sections numérotées, cards de
méta-données, tableaux propres, typographie aérée.
========================================================= */
.legal-page {
max-width: 820px;
margin: 0 auto;
padding: 64px 24px 96px;
font-family: var(--font-sans);
color: var(--ink-700);
}
/* ─── Header ─── */
.legal-header {
text-align: center;
padding-bottom: 40px;
margin-bottom: 48px;
border-bottom: 1px solid var(--border);
}
.legal-header .eyebrow {
color: var(--copper-700);
margin-bottom: 16px;
}
.legal-header h1 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(2rem, 4.5vw, 3rem);
color: var(--ink-900);
margin: 0 0 12px;
letter-spacing: -0.015em;
line-height: 1.15;
}
.legal-updated {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-500);
margin: 0;
}
/* ─── Sommaire (TOC) ─── */
.legal-toc {
background: var(--cream);
border-left: 3px solid var(--copper-500);
padding: 24px 28px 28px;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: 0 0 48px;
}
.legal-toc-title {
display: block;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper-700);
margin-bottom: 14px;
}
.legal-toc ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: legaltoc;
columns: 2;
column-gap: 28px;
}
.legal-toc ol li {
counter-increment: legaltoc;
padding: 4px 0;
break-inside: avoid;
}
.legal-toc ol li::before {
content: counter(legaltoc, decimal-leading-zero);
display: inline-block;
width: 32px;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
color: var(--copper-500);
letter-spacing: 0.05em;
}
.legal-toc a {
font-family: var(--font-serif);
font-size: 0.96rem;
color: var(--ink-900);
text-decoration: none;
transition: color .25s;
}
.legal-toc a:hover {
color: var(--copper-700);
}
/* ─── Contenu : sections numérotées ─── */
.legal-content {
counter-reset: legalsection;
}
.legal-section {
padding: 32px 0;
border-top: 1px solid var(--border);
scroll-margin-top: 100px; /* offset header fixed pour les ancres */
}
.legal-section:first-child {
border-top: 0;
padding-top: 0;
}
.legal-section h2 {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 2.5vw, 1.7rem);
color: var(--ink-900);
margin: 0 0 18px;
letter-spacing: -0.01em;
line-height: 1.25;
}
.legal-section h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.12rem;
color: var(--ink-900);
margin: 24px 0 10px;
letter-spacing: -0.005em;
}
.legal-section p {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.8;
color: var(--ink-700);
margin: 0 0 1.1em;
text-align: justify;
hyphens: auto;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
color: var(--copper-700);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: color .25s;
}
.legal-section a:hover {
color: var(--copper-900);
}
.legal-section strong {
color: var(--ink-900);
font-weight: 700;
}
.legal-section code {
font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
font-size: 0.86em;
background: var(--copper-50);
color: var(--copper-800);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--copper-100);
}
/* Listes ordonnées et non ordonnées dans une section */
.legal-section ol,
.legal-section ul,
.legal-list {
margin: 0 0 1.2em;
padding-left: 1.4em;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.75;
}
.legal-section ol li,
.legal-section ul li,
.legal-list li {
margin-bottom: 0.5em;
color: var(--ink-700);
}
.legal-section ul li::marker,
.legal-list li::marker {
color: var(--copper-500);
}
.legal-section ol li::marker {
color: var(--copper-700);
font-weight: 600;
}
/* Section "à mettre en avant" (ex: rétractation EXCLU) */
.legal-section--highlight {
background: var(--copper-50);
border: 1px solid var(--copper-200);
border-radius: var(--radius-md);
padding: 28px 32px;
margin: 16px 0;
border-top: 1px solid var(--copper-200) !important;
}
.legal-section--highlight h2 {
color: var(--copper-800);
}
/* ─── Card "carte d'identité" (dl horizontal) ─── */
.legal-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 24px;
margin: 18px 0;
padding: 22px 26px;
background: var(--off-white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.94rem;
}
.legal-card dt {
font-weight: 600;
color: var(--copper-700);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding-top: 2px;
}
.legal-card dd {
margin: 0;
color: var(--ink-900);
line-height: 1.55;
}
.legal-card a {
color: var(--copper-700);
text-decoration: none;
}
.legal-card a:hover {
color: var(--copper-900);
text-decoration: underline;
}
/* ─── Tableaux (cookies, durées de conservation) ─── */
.legal-table {
width: 100%;
border-collapse: collapse;
margin: 18px 0 22px;
font-family: var(--font-sans);
font-size: 0.92rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.legal-table thead {
background: var(--ink-900);
color: var(--copper-200);
}
.legal-table th {
text-align: left;
padding: 12px 16px;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.legal-table td {
padding: 12px 16px;
border-top: 1px solid var(--border);
color: var(--ink-700);
vertical-align: top;
line-height: 1.55;
}
.legal-table tbody tr:nth-child(even) td {
background: var(--off-white);
}
.legal-table code {
font-size: 0.84em;
}
/* ─── Footer de page légale ─── */
.legal-footer {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--border);
font-family: var(--font-serif);
font-style: italic;
font-size: 0.94rem;
color: var(--ink-500);
text-align: center;
line-height: 1.7;
}
.legal-footer a {
color: var(--copper-700);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ─── Bouton dans le contenu (réafficher bandeau cookies) ─── */
.legal-section .btn-outline {
margin: 6px 0;
}
/* ─── Responsive ─── */
@media (max-width: 720px) {
.legal-page {
padding: 40px 18px 64px;
}
.legal-toc {
padding: 20px 22px 24px;
margin-bottom: 36px;
}
.legal-toc ol {
columns: 1;
}
.legal-card {
grid-template-columns: 1fr;
gap: 2px 0;
padding: 18px 20px;
}
.legal-card dt {
margin-top: 12px;
}
.legal-card dt:first-child {
margin-top: 0;
}
.legal-section--highlight {
padding: 22px 22px;
}
.legal-table {
font-size: 0.86rem;
}
.legal-table th, .legal-table td {
padding: 10px 12px;
}
/* Tables scrollables si trop larges */
.legal-content {
overflow-x: auto;
}
.legal-section p {
text-align: left;
}
}
/* =====================================================================
v8.0 · Hero d'accueil — DA logo : beige parchemin + chocolat profond
Ambiance pâtisserie fine française, luxe discret, chaleur artisanale.
Navbar : texte chocolat sur fond clair (pas blanc sur sombre).
===================================================================== */
.hero--editorial {
position: relative;
overflow: hidden;
background: var(--cream);
color: var(--chocolat);
}
/* Neutraliser les voiles sombres hérités du hero photo générique */
.hero--editorial::before,
.hero--editorial::after { display: none !important; content: none !important; background: none !important; }
.hero--editorial .hero-bg { display: none !important; }
.hero--editorial .hero-blob { position: absolute; border-radius: 50%; will-change: transform, opacity; }
/* ─── Coin haut-droite : ombre chocolat qui pulse doucement ─── */
.hero--editorial .hero-blob--1 {
top: -15%; right: -12%;
width: min(60vw, 720px); height: min(60vw, 720px);
background: radial-gradient(circle at 40% 40%,
rgba(58, 36, 24, 0.28),
rgba(58, 36, 24, 0.12) 40%,
rgba(90, 57, 38, 0.06) 65%,
transparent 80%);
filter: blur(30px);
animation: heroFloat1 12s ease-in-out infinite;
}
/* ─── Coin bas-gauche : ombre chocolat profonde, mouvement lent ─── */
.hero--editorial .hero-blob--2 {
bottom: -18%; left: -14%;
width: min(55vw, 640px); height: min(55vw, 640px);
background: radial-gradient(circle at 55% 50%,
rgba(58, 36, 24, 0.32),
rgba(58, 36, 24, 0.15) 38%,
rgba(90, 57, 38, 0.05) 60%,
transparent 78%);
filter: blur(28px);
animation: heroFloat2 14s ease-in-out infinite;
}
/* ─── Coin haut-gauche : ombre plus légère, dérive subtile ─── */
.hero--editorial .hero-blob--3 {
top: -10%; left: -10%;
width: min(45vw, 520px); height: min(45vw, 520px);
background: radial-gradient(circle at 60% 55%,
rgba(58, 36, 24, 0.22),
rgba(58, 36, 24, 0.08) 45%,
transparent 72%);
filter: blur(35px);
animation: heroFloat3 16s ease-in-out infinite;
}
/* ─── Coin bas-droite : ombre chocolat chaude, respiration lente ─── */
.hero--editorial .hero-blob--4 {
bottom: -12%; right: -8%;
width: min(50vw, 580px); height: min(50vw, 580px);
background: radial-gradient(circle at 45% 48%,
rgba(58, 36, 24, 0.25),
rgba(90, 57, 38, 0.10) 42%,
rgba(168, 117, 69, 0.04) 65%,
transparent 80%);
filter: blur(32px);
animation: heroFloat4 18s ease-in-out infinite;
}
/* ─── Vignette chocolat noir — cadre épuré premium ─── */
.hero--editorial .hero-vignette {
position: absolute;
inset: 0;
background:
/* Coins renforcés */
radial-gradient(ellipse 80% 70% at 0% 0%, rgba(42, 26, 16, 0.30), transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 0%, rgba(42, 26, 16, 0.25), transparent 55%),
radial-gradient(ellipse 80% 70% at 0% 100%, rgba(42, 26, 16, 0.28), transparent 55%),
radial-gradient(ellipse 80% 70% at 100% 100%, rgba(42, 26, 16, 0.22), transparent 55%),
/* Vignette globale douce */
radial-gradient(ellipse 85% 80% at 50% 45%, transparent 40%, rgba(42, 26, 16, 0.18) 100%);
animation: heroVignettePulse 10s ease-in-out infinite;
}
/* Grain papier subtil → texture artisanale premium */
.hero--editorial .hero-grain {
position: absolute; inset: 0; opacity: 0.4;
background-image: radial-gradient(rgba(58, 36, 24, 0.07) 1px, transparent 1px);
background-size: 3px 3px;
}
/* Vignette additionnelle via ::after du hero-bg */
.hero--editorial .hero-bg::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(130% 120% at 50% 42%, transparent 45%, rgba(58, 36, 24, 0.15) 100%);
}
/* ─── Animations dynamiques des ombres ─── */
@keyframes heroFloat1 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
25% { transform: translate(-12px, 8px) scale(1.04); opacity: 1; }
50% { transform: translate(-6px, 15px) scale(0.97); opacity: 0.75; }
75% { transform: translate(8px, 5px) scale(1.02); opacity: 0.95; }
}
@keyframes heroFloat2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
30% { transform: translate(15px, -10px) scale(1.06); opacity: 1; }
60% { transform: translate(8px, -18px) scale(0.96); opacity: 0.7; }
80% { transform: translate(-5px, -6px) scale(1.03); opacity: 0.9; }
}
@keyframes heroFloat3 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
35% { transform: translate(10px, 12px) scale(1.05); opacity: 0.9; }
65% { transform: translate(18px, 6px) scale(0.95); opacity: 0.65; }
85% { transform: translate(5px, -4px) scale(1.02); opacity: 0.85; }
}
@keyframes heroFloat4 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
20% { transform: translate(-10px, -8px) scale(1.03); opacity: 0.95; }
50% { transform: translate(-16px, -14px) scale(0.98); opacity: 0.65; }
75% { transform: translate(-4px, -5px) scale(1.04); opacity: 0.88; }
}
@keyframes heroVignettePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}
/* Accessibilité : stopper les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
.hero--editorial .hero-blob,
.hero--editorial .hero-vignette {
animation: none !important;
}
}
.hero--editorial .hero-content {
position: relative; z-index: 2; text-align: center;
color: var(--chocolat);
}
/* Filet décoratif — caramel discret */
.hero--editorial .hero-rule {
display: block; width: 72px; height: 1px; margin: 0 auto 30px;
background: linear-gradient(90deg, transparent, var(--caramel), transparent);
opacity: 0.7;
}
/* Monogramme M — Macondo Swash Caps, gras, grande taille */
.hero--editorial .hero-brand-logo {
display: block;
font-family: 'Macondo Swash Caps', cursive;
font-weight: 400;
font-size: clamp(7.5rem, 20vw, 13.5rem);
line-height: 0.95;
color: var(--chocolat);
text-align: center;
margin: 0 auto clamp(22px, 3.5vw, 42px);
}
/* Nom de marque — reproduction exacte du lockup header "MERSIER / PÂTISSERIE FINE" */
.hero--editorial .hero-brand-main {
color: var(--chocolat) !important;
font-family: var(--font-serif) !important;
font-size: clamp(1.6rem, 5vw, 3.1rem) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
line-height: 1 !important;
text-shadow: none !important;
}
.hero--editorial .hero-brand-sub {
color: var(--chocolat) !important;
font-family: var(--font-serif) !important;
/* 42% de MERSIER — proportion identique au header (0.42em) */
font-size: clamp(0.68rem, 2.1vw, 1.32rem) !important;
font-weight: 400 !important;
font-style: normal !important;
text-transform: uppercase !important;
letter-spacing: 0.22em !important;
line-height: 1 !important;
margin-top: clamp(6px, 1.2vw, 14px) !important;
text-shadow: none !important;
}
/* Scroll indicator — marron chaud */
.hero--editorial .hero-scroll {
color: var(--ink-500);
text-shadow: none;
}
.hero--editorial .hero-scroll:hover { color: var(--ink-700); }
.hero--editorial .hero-scroll svg {
filter: none;
}
/* ─── Hero CTA buttons — marron chaud / caramel ─── */
.hero--editorial .btn-primary {
background: var(--chocolat) !important;
border-color: var(--chocolat) !important;
color: var(--parchment-cream) !important;
}
.hero--editorial .btn-primary:hover {
background: var(--chocolat-mid) !important;
border-color: var(--chocolat-mid) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(58, 36, 24, 0.25);
}
/* Bouton secondaire outline marron */
.btn-outline-hero {
background: transparent;
color: var(--ink-700);
border-color: var(--ink-500);
}
.btn-outline-hero:hover {
background: var(--ink-700);
border-color: var(--ink-700);
color: var(--parchment-cream);
}
/* ─── Navbar sur hero beige — texte chocolat au lieu de blanc ─── */
.hero--editorial ~ .site-header--transparent,
.hero--editorial .site-header--transparent { /* selector safety */ }
/* On cible directement le header sur la home avec hero--editorial.
Le body.hero-beige flag sera ajouté par JS ou on utilise :has(). */
body:has(.hero--editorial) .site-header--transparent {
background: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body:has(.hero--editorial) .site-header--transparent .main-nav a,
body:has(.hero--editorial) .site-header--transparent .brand-name {
color: var(--ink-700) !important;
text-shadow: none;
}
body:has(.hero--editorial) .site-header--transparent .brand-tagline {
color: var(--ink-500) !important;
text-shadow: none;
}
body:has(.hero--editorial) .site-header--transparent .btn-icon {
color: var(--ink-700) !important;
filter: none;
}
body:has(.hero--editorial) .site-header--transparent .main-nav a.active {
color: var(--caramel) !important;
}
body:has(.hero--editorial) .site-header--transparent .main-nav a:hover {
color: var(--caramel) !important;
}
body:has(.hero--editorial) .site-header--transparent .main-nav a::after {
background: var(--caramel);
}
/* Header brand-name-sub : marron sur fond beige */
body:has(.hero--editorial) .site-header--transparent .brand-name-sub {
color: var(--ink-500) !important;
}
/* Quand on a scrollé — transition normale vers fond blanc */
body:has(.hero--editorial) .site-header--transparent.is-scrolled {
background: rgba(251, 250, 247, 0.96) !important;
backdrop-filter: saturate(180%) blur(12px) !important;
-webkit-backdrop-filter: saturate(180%) blur(12px) !important;
border-bottom: 1px solid var(--border) !important;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .main-nav a,
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-name {
color: var(--ink-900) !important;
text-shadow: none;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-tagline {
color: var(--ink-500) !important;
text-shadow: none;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .btn-icon {
color: var(--ink-700) !important;
filter: none;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .main-nav a.active {
color: var(--copper-700) !important;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .main-nav a:hover {
color: var(--copper-700) !important;
}
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-logo--dark { display: block; }
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-logo--white { display: none; }
/* ─── Mobile : hero-beige drawer reset ─── */
@media (max-width: 900px) {
body.menu-open:has(.hero--editorial) .site-header--transparent {
background: var(--white) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.menu-open:has(.hero--editorial) .site-header--transparent .main-nav a {
color: var(--ink-900) !important;
text-shadow: none !important;
}
body.menu-open:has(.hero--editorial) .site-header--transparent .main-nav a:hover,
body.menu-open:has(.hero--editorial) .site-header--transparent .main-nav a.active {
color: var(--caramel) !important;
}
}
/* Garde-fou mobile : éviter tout débordement de "Mersier" */
@media (max-width: 700px) {
.hero--editorial .hero-brand-main { font-size: clamp(1.3rem, 6.2vw, 2rem) !important; }
.hero--editorial .hero-brand-logo { margin-bottom: 20px; }
}
@media (max-width: 380px) {
.hero--editorial .hero-brand-main { font-size: clamp(1.1rem, 5.8vw, 1.6rem) !important; }
}
/* ─── Logo header : +25% toutes tailles ─── */
.brand-logo { width: 65px !important; height: 65px !important; }
@media (max-width: 900px) {
.brand-logo { width: 45px !important; height: 45px !important; }
}
@media (max-width: 700px) {
.brand-logo { width: 48px !important; height: 48px !important; }
}
@media (max-width: 480px) {
.brand-logo { width: 40px !important; height: 40px !important; }
}
/* ─── Logo M : masqué sur desktop, visible uniquement sur mobile (≤900px) ─── */
.site-header .brand-logo { display: none !important; }
@media (max-width: 900px) {
.site-header .brand-logo--dark { display: block !important; width: 60px !important; height: 60px !important; }
.site-header .brand-logo--white { display: none !important; }
.site-header .brand { gap: 8px; }
.site-header .brand-text { display: none !important; }
}
/* ─── Marque header (haut-gauche) sur l'accueil — chocolat (identique au hero) ─── */
body:has(.hero--editorial) .site-header--transparent .brand-name,
body:has(.hero--editorial) .site-header--transparent .brand-name-sub,
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-name,
body:has(.hero--editorial) .site-header--transparent.is-scrolled .brand-name-sub {
color: var(--chocolat) !important;
}
/* ─── Titres "hero" de toutes les pages (histoire, producteurs, boutique, pro,
contact, panier, recherche, newsletter…) + titres de sections de l'accueil
(h2 dans .section-title) — Baskerville, maj, chocolat, taille réduite unifiée ─── */
.section-title h1,
.section-title h2,
.cart-header h1,
.page-title {
font-family: var(--font-serif) !important;
font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
color: var(--chocolat);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* /professionnels : titre unifié sur deux lignes (même taille), lockup resserré */
.section--pro-head .section-title h1 {
line-height: 1.2;
}
/* ─── Bande slogan — séparation propre entre le hero et la 1re section ─── */
.hero-slogan-band {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(18px, 4vw, 46px);
padding: clamp(38px, 7vw, 76px) 24px;
background: var(--cream);
}
.hero-slogan-rule {
flex: 1;
max-width: 110px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--hero-brown), transparent);
opacity: 0.45;
}
.hero-slogan {
margin: 0;
flex: 0 1 auto;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.05rem, 2.3vw, 1.5rem);
line-height: 1.4;
color: var(--chocolat-mid);
text-align: center;
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.hero-slogan-rule { max-width: 40px; }
.hero-slogan-band { gap: 14px; padding: 34px 18px; }
}
/* ─── Noms produits du détail commande (compte) en Baskerville ─── */
.order-item-name {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--chocolat);
line-height: 1.3;
}
/* ─── Titres de contenu "Notre histoire" (portrait + CTA) en chocolat,
comme le titre de page "NOTRE HISTOIRE" ─── */
.about-portrait-text h2,
.section--about-cta h2 {
color: var(--chocolat);
}
/* =====================================================================
Corrections client (juillet) : couleurs marron carte + cases CGU
===================================================================== */
/* Titre de la carte contact en marron foncé */
.contact-map-title { color: var(--copper-800) !important; }
/* Carte : pin + label en marron, "M" façon logo (Macondo) */
.map-pin-shop .pin-svg .pin-body { fill: #5E3717; } /* teardrop marron foncé */
.map-pin-shop .pin-svg .pin-letter {
fill: #5E3717;
font-family: 'Macondo Swash Caps', cursive;
font-size: 16px;
}
.shop-label {
background: #3F250F; /* marron très foncé */
color: #F5EFE8;
}
/* Cases à cocher "conditions générales" (contact + pro) */
.contact-consent, .pro-consent {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 16px 0 6px;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink-500);
cursor: pointer;
}
.contact-consent input[type="checkbox"],
.pro-consent input[type="checkbox"] {
width: 17px; height: 17px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--copper-700);
cursor: pointer;
}
/* =====================================================================
Header : logo (M) visible en desktop — il était masqué par le travail
parallèle. Le fond crème et le texte chocolat restent gérés par les
règles existantes (hero crème). Le logo foncé ressort bien sur le crème.
===================================================================== */
@media (min-width: 901px) {
.site-header .brand-logo--dark { display: block !important; width: 44px !important; height: 44px !important; }
.site-header .brand-logo--white { display: none !important; }
}
/* =====================================================================
Hero accueil · Carrousel photos (remplace le hero crème + monogramme)
Les voiles sombres .hero::before / .hero::after existants assurent
déjà la lisibilité du nav et du lockup : on ne les neutralise pas.
===================================================================== */
.hero--carousel {
background: var(--ink-900);
color: #fff;
}
/* Piste horizontale : chaque diapo occupe 100 % de la largeur du hero */
.hero--carousel .hero-slides {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
transition: transform 1s cubic-bezier(0.65, 0.05, 0.36, 1);
will-change: transform;
}
.hero--carousel .hero-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: var(--ink-900);
}
.hero--carousel .hero-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.015);
}
/* Respiration lente sur la diapo visible — mouvement « maison », pas un diaporama */
.hero--carousel .hero-slide.is-active img {
animation: heroKenBurns 9s ease-out forwards;
}
/* Zoom volontairement discret : les photos de la boutique sont des plans
serrés sur la pièce, un mouvement trop ample recadrerait encore. */
@keyframes heroKenBurns {
from { transform: scale(1.01); }
to { transform: scale(1.045); }
}
/* ─── Flèches ─── */
.hero--carousel .hero-nav {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(26, 19, 13, 0.22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
opacity: 0.75;
transition: opacity .25s var(--ease), background .25s var(--ease),
border-color .25s var(--ease), transform .25s var(--ease-out);
}
.hero--carousel .hero-nav:hover {
opacity: 1;
background: rgba(26, 19, 13, 0.42);
border-color: rgba(255, 255, 255, 0.8);
}
.hero--carousel .hero-nav--prev { left: clamp(14px, 3vw, 40px); }
.hero--carousel .hero-nav--next { right: clamp(14px, 3vw, 40px); }
.hero--carousel .hero-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero--carousel .hero-nav--next:hover { transform: translateY(-50%) translateX(2px); }
/* ─── Pastilles ─── */
.hero--carousel .hero-dots {
position: absolute;
z-index: 3;
left: 50%;
bottom: clamp(74px, 11vh, 118px);
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
}
.hero--carousel .hero-dot {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background .3s var(--ease), transform .3s var(--ease-out),
border-color .3s var(--ease);
}
.hero--carousel .hero-dot:hover { background: rgba(255, 255, 255, 0.5); }
.hero--carousel .hero-dot.is-active {
background: var(--copper-200);
border-color: var(--copper-200);
transform: scale(1.3);
}
/* Accessibilité : focus visible sur fond photo */
.hero--carousel .hero-nav:focus-visible,
.hero--carousel .hero-dot:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Mouvement réduit : plus de glissement ni de zoom, on garde la navigation */
@media (prefers-reduced-motion: reduce) {
.hero--carousel .hero-slides { transition: none; }
.hero--carousel .hero-slide.is-active img { animation: none; transform: scale(1.015); }
}
/* Mobile : flèches masquées (le swipe prend le relais), pastilles resserrées */
@media (max-width: 700px) {
.hero--carousel .hero-nav { display: none; }
.hero--carousel .hero-dots { bottom: clamp(60px, 9vh, 86px); gap: 10px; }
}
/* =====================================================================
Header sur le hero photo : marque et logo blancs, foncés au scroll
(les règles « crème » précédentes étaient conditionnées à
.hero--editorial, qui n'existe plus sur l'accueil.)
===================================================================== */
@media (min-width: 901px) {
body:has(.hero--carousel) .site-header--transparent .brand-logo--white {
display: block !important;
width: 44px !important;
height: 44px !important;
}
body:has(.hero--carousel) .site-header--transparent .brand-logo--dark { display: none !important; }
body:has(.hero--carousel) .site-header--transparent.is-scrolled .brand-logo--white { display: none !important; }
body:has(.hero--carousel) .site-header--transparent.is-scrolled .brand-logo--dark {
display: block !important;
width: 44px !important;
height: 44px !important;
}
}
body:has(.hero--carousel) .site-header--transparent .brand-name {
color: #fff !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important;
}
body:has(.hero--carousel) .site-header--transparent .brand-name-sub {
color: var(--copper-200) !important;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45) !important;
}
body:has(.hero--carousel) .site-header--transparent .main-nav a { color: rgba(255, 255, 255, 0.94) !important; }
body:has(.hero--carousel) .site-header--transparent .main-nav a.active,
body:has(.hero--carousel) .site-header--transparent .main-nav a:hover { color: var(--copper-200) !important; }
body:has(.hero--carousel) .site-header--transparent .main-nav a::after { background: var(--copper-200); }
body:has(.hero--carousel) .site-header--transparent .btn-icon { color: #fff !important; }
/* Au scroll : retour au header clair */
body:has(.hero--carousel) .site-header--transparent.is-scrolled .brand-name {
color: var(--ink-900) !important;
text-shadow: none !important;
}
body:has(.hero--carousel) .site-header--transparent.is-scrolled .brand-name-sub {
color: var(--ink-500) !important;
text-shadow: none !important;
}
body:has(.hero--carousel) .site-header--transparent.is-scrolled .main-nav a { color: var(--ink-700) !important; }
body:has(.hero--carousel) .site-header--transparent.is-scrolled .main-nav a.active,
body:has(.hero--carousel) .site-header--transparent.is-scrolled .main-nav a:hover { color: var(--copper-700) !important; }
body:has(.hero--carousel) .site-header--transparent.is-scrolled .btn-icon { color: var(--ink-700) !important; }
/* Menu mobile ouvert : fond blanc, texte foncé (sinon illisible) */
@media (max-width: 900px) {
body.menu-open:has(.hero--carousel) .site-header--transparent .main-nav a { color: var(--ink-900) !important; }
body.menu-open:has(.hero--carousel) .site-header--transparent .main-nav a.active,
body.menu-open:has(.hero--carousel) .site-header--transparent .main-nav a:hover { color: var(--copper-700) !important; }
}
/* Mobile : sur le hero photo, c'est le logo blanc qui doit sortir
(le logo foncé se perdait dans le dégradé sombre du haut de photo). */
@media (max-width: 900px) {
body:has(.hero--carousel) .site-header--transparent:not(.is-scrolled) .brand-logo--white {
display: block !important;
width: 60px !important;
height: 60px !important;
}
body:has(.hero--carousel) .site-header--transparent:not(.is-scrolled) .brand-logo--dark { display: none !important; }
body.menu-open:has(.hero--carousel) .site-header--transparent .brand-logo--white { display: none !important; }
body.menu-open:has(.hero--carousel) .site-header--transparent .brand-logo--dark {
display: block !important;
width: 60px !important;
height: 60px !important;
}
}
/* =====================================================================
Grille produits/producteurs · 4 colonnes en desktop
Avant : colonnes plafonnées à 320 px + gap 32 dans 1240 px → seules
3 colonnes tenaient, d'où la ligne de 3 suivie d'une ligne de 1 sur
l'accueil. 4 × 296 + 3 × 28 = 1268 px, soit la largeur utile du
conteneur (1340 − 2 × 32). Encadré en min-width pour ne pas écraser
les règles mobiles définies plus haut dans la feuille.
===================================================================== */
@media (min-width: 1025px) {
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
gap: 40px 24px;
max-width: 1192px;
}
}
/* =====================================================================
Page Producteurs · typographie alignée sur le reste du site
(titre de carte 1,4 rem et texte 0,95 rem détonnaient face aux
cartes produits en 1,25 rem / 0,88 rem).
===================================================================== */
.producer-card-title { font-size: 1.25rem; }
.producer-card-desc { font-size: 0.88rem; line-height: 1.6; }
.producers-head-lede { font-size: 0.95rem; }
.producers-stat strong { font-size: 1.6rem; }
.producers-stat span { font-size: 0.66rem; letter-spacing: 0.18em; }
.producers-value h3 { font-size: 1.1rem; }
.producers-value p { font-size: 0.88rem; line-height: 1.65; }
@media (max-width: 760px) {
.producers-stat strong { font-size: 1.35rem; }
.producer-card-title { font-size: 1.15rem; }
}
/* =====================================================================
Formulaires contact & pro · champs