/* ==========================================================================
TANGER CARREAUX — Design system
Carrelage, sanitaire, robinetterie, mosaïque & pierre — Tanger / Casablanca
========================================================================== */
:root {
/* Palette de marque — vert forêt profond, blanc pur & noir mat (haut contraste, sans rouge) */
--ink: #101210;
--charcoal: #0c0e0c;
--charcoal-2: #ffffff;
--panel-dark: #10130f;
--stone-50: #ffffff;
--stone-100: #f2f4f1;
--stone-200: #e3e7e2;
--stone-300: #c9d1c6;
--muted: #545b53;
--muted-light: #aab5ab;
--terracotta: #163a2c;
--terracotta-dark: #0d2318;
--gold: #2f6b4e;
--gold-light: #7fcaa3;
--emerald: #1f7a52;
--emerald-light: #34a374;
--line: rgba(16, 18, 16, 0.1);
--line-light: rgba(255, 255, 255, 0.14);
--shadow: 0 24px 55px -22px rgba(16, 18, 16, 0.32);
--shadow-soft: 0 12px 32px -16px rgba(16, 18, 16, 0.18);
--radius: 4px;
--radius-lg: 2px;
--ff-serif: "Instrument Serif", "Georgia", serif;
--ff-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ff-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* Lenis (js/vendor/lenis.min.js) gère elle-même le scroll fluide une fois active --
neutralise le scroll-behavior natif seulement dans ce cas précis (classe "lenis"
posée par la librairie elle-même sur , jamais par notre propre code) pour
éviter un double-lissage. Si Lenis ne s'active pas (tactile, reduced-motion, CDN
indisponible), scroll-behavior:smooth ci-dessus reste le fallback natif. */
html.lenis { scroll-behavior: auto; height: auto; }
html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
margin: 0;
font-family: var(--ff-sans);
color: var(--ink);
background: var(--stone-50);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
overflow-x: hidden;
width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--ff-serif);
font-weight: 400;
line-height: 1.1;
margin: 0;
color: inherit;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ff-sans);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--terracotta);
font-weight: 600;
margin-bottom: 16px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--terracotta);
}
.section {
padding: 96px 0;
}
.section--tight { padding: 64px 0; }
.section--dark {
background: var(--charcoal);
color: var(--muted-light);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--stone-50); }
.section--stone { background: var(--stone-100); }
.section-head {
max-width: 640px;
margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.6;
max-width: 68ch;
margin-top: 16px;
}
.section--dark .section-head p { color: var(--muted-light); }
h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1.05; }
h1 { font-size: clamp(2.125rem, 5vw, 3.625rem); line-height: 0.95; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 30px;
font-size: 0.85rem;
letter-spacing: 0.04em;
font-weight: 600;
border-radius: var(--radius);
border: 1px solid transparent;
transition: all 0.25s ease;
white-space: nowrap;
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Fondu liquide : le remplissage se révèle depuis le haut, comme un cercle qui grandit */
.btn::before {
content: "";
position: absolute;
inset: -20% -20%;
background: var(--btn-fill, var(--terracotta-dark));
border-radius: 50%;
transform: scale(0);
transform-origin: 50% 0%;
transition: transform 0.55s cubic-bezier(.65, 0, .35, 1);
z-index: -1;
pointer-events: none;
}
.btn:hover::before,
.btn:focus-visible::before { transform: scale(2.6); }
.btn-primary {
background: var(--terracotta);
color: #fff;
--btn-fill: var(--terracotta-dark);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline {
border-color: currentColor;
color: var(--ink);
--btn-fill: var(--terracotta);
}
.btn-outline:hover { color: #fff; border-color: var(--terracotta); }
.btn-gold {
background: transparent;
border-color: var(--gold);
color: var(--gold-light);
--btn-fill: var(--gold);
}
.btn-gold:hover { color: var(--charcoal); border-color: var(--gold); }
.btn-sm { padding: 11px 20px; font-size: 0.78rem; }
.btn-block { width: 100%; }
@media (prefers-reduced-motion: reduce) {
.btn::before { transition: none; }
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(247, 243, 236, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.topbar {
background: var(--charcoal);
color: var(--muted-light);
font-size: 0.78rem;
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
gap: 16px;
flex-wrap: wrap;
}
.topbar a { color: var(--stone-200); transition: color 0.2s ease; }
.topbar a:hover { color: var(--emerald-light); }
.topbar-contacts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-contacts span { color: var(--muted-light); margin-right: 4px; }
.topbar-contacts a i,
.topbar-social a i {
color: #fff;
margin-right: 7px;
font-size: 0.85rem;
transition: color 0.2s ease;
}
.topbar-contacts a:hover i,
.topbar-social a:hover i { color: var(--emerald-light); }
.topbar-social { display: flex; gap: 14px; align-items: center; }
.topbar-social a { display: inline-flex; align-items: center; }
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--ink);
}
.brand-text { display: flex; align-items: center; }
.brand-text strong {
font-family: var(--ff-serif);
font-size: 1.7rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
line-height: 1;
}
.footer-brand .brand-text strong { color: var(--ink); }
/* Taille fluide (clamp) : le logo grossit avec l'écran au lieu d'une taille fixe, sans jamais
descendre sous la taille actuelle ni dépasser un plafond raisonnable. Le fond du SVG reste
transparent, donc il continue de se fondre dans la couleur de son emplacement (en-tête, pied
de page...) quel que soit l'endroit où il est affiché. */
.brand-mark { height: clamp(42px, 4vw, 58px); width: auto; display: block; }
.footer-brand .brand-mark { height: clamp(36px, 3vw, 48px); }
.nav-links {
display: flex;
align-items: center;
gap: 42px;
}
.nav-links a {
color: var(--ink);
font-family: var(--ff-sans);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--terracotta);
transform: scaleX(0);
transition: transform 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a.active { color: var(--terracotta); }
/* Sous-menu "Produits" */
.nav-item-dropdown { position: relative; }
.nav-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--ink);
font-family: var(--ff-sans);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 0;
}
.nav-dropdown-toggle svg { width: 11px; height: 11px; transition: transform 0.25s ease; }
.nav-dropdown {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 220px;
background: var(--charcoal-2);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 10px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 10;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.open .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-item-dropdown:hover .nav-dropdown-toggle svg,
.nav-item-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-toggle.active,
.nav-item-dropdown:hover .nav-dropdown-toggle,
.nav-item-dropdown.open .nav-dropdown-toggle { color: var(--terracotta); }
.nav-dropdown a {
padding: 10px 14px;
border-radius: 3px;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: none;
font-weight: 500;
white-space: nowrap;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--stone-100); color: var(--terracotta); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--line);
color: var(--ink);
width: 42px;
height: 42px;
border-radius: 3px;
align-items: center;
justify-content: center;
}
@media (max-width: 960px) {
.nav-links {
position: fixed;
inset: 0 0 0 auto;
top: 0;
height: 100vh;
width: min(320px, 84vw);
background: var(--charcoal);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 100px 32px 40px;
gap: 26px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -20px 0 50px rgba(0,0,0,0.3);
}
.nav-links.open { transform: translateX(0); }
.nav-links a { color: #fff; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-light); }
.nav-toggle { display: inline-flex; }
.topbar-contacts { display: none; }
.nav-item-dropdown { width: 100%; }
.nav-dropdown-toggle { color: #fff; }
.nav-dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
background: none;
border: none;
box-shadow: none;
padding: 14px 0 0 16px;
display: none;
min-width: 0;
}
.nav-item-dropdown.open .nav-dropdown { display: flex; }
.nav-item-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown a { padding: 8px 0; color: var(--muted-light); }
.nav-dropdown a:hover { background: none; color: var(--gold-light); }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
background: var(--charcoal) center/cover no-repeat;
color: #fff;
overflow: hidden;
min-height: 92vh;
display: flex;
align-items: flex-end;
padding: 110px 0 64px;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(6,7,7,0.88) 0%, rgba(6,7,7,0.5) 32%, rgba(6,7,7,0.08) 62%, rgba(6,7,7,0.02) 100%),
linear-gradient(100deg, rgba(6,7,7,0.55) 0%, rgba(6,7,7,0.1) 45%, rgba(6,7,7,0) 70%);
}
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-content { max-width: 860px; }
.hero-content .eyebrow { color: var(--gold-light); }
.hero-content h1 {
font-size: clamp(2.9rem, 7.2vw, 6.4rem);
line-height: 1.01;
letter-spacing: -0.01em;
text-shadow: 0 6px 30px rgba(0, 0, 0, 0.28);
}
.hero p.lead {
font-size: 1.15rem;
color: var(--stone-200);
margin: 22px 0 36px;
max-width: 560px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-cta .btn {
border-radius: 999px;
padding: 16px 30px;
background: rgba(255,255,255,0.94);
color: #0e100f;
border-color: transparent;
transition: background 0.35s ease, color 0.35s ease, transform 0.25s ease, box-shadow 0.35s ease;
}
.hero-cta .btn:hover {
background: #2f7a54;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px -10px rgba(47, 122, 84, 0.55);
}
.hero-cta .btn.btn-outline {
background: rgba(20,22,21,0.35);
color: #fff;
border-color: rgba(255,255,255,0.55);
backdrop-filter: blur(2px);
}
.hero-cta .btn.btn-outline:hover { background: rgba(20,22,21,0.55); border-color: #fff; }
.hero-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line-light);
border-top: 1px solid var(--line-light);
}
.hero-stats div {
background: var(--charcoal);
padding: 22px 20px 6px;
}
.hero-stats strong {
display: block;
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 1.75rem;
color: var(--gold-light);
}
.hero-stats span {
font-size: 0.76rem;
color: var(--muted-light);
letter-spacing: 0.03em;
}
@media (max-width: 720px) {
.hero { min-height: 78vh; }
.hero-stats { grid-template-columns: repeat(2, 1fr); }
.hero-tiles { display: none; }
}
/* ---------- Hero "Luxe" (accueil — bloc asymétrique clair, inspiré Tots) ---------- */
.hero-luxe { background: #f6f1e8; padding: 100px 0 84px; overflow: hidden; }
.hero-luxe-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.hero-luxe-copy .eyebrow { color: var(--emerald); }
.hero-luxe-copy h1 {
font-family: var(--ff-serif);
font-weight: 400;
font-size: clamp(2.125rem, 4vw, 3.625rem);
line-height: 0.95;
color: var(--ink);
margin: 14px 0 20px;
}
.hero-luxe-copy .lead { color: #5c665f; font-size: 1.05rem; max-width: 440px; margin-bottom: 34px; }
.btn-luxe {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: #00b074;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 14px 30px -14px rgba(0, 176, 116, 0.55);
}
.btn-luxe:hover { background: #00875a; transform: translateY(-2px); }
.hero-luxe-scene { position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero-luxe-scene img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; display: block; }
.hero-luxe-tag {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.94);
color: #14231c;
padding: 8px 15px;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 10px 22px -10px rgba(20, 35, 28, 0.4);
white-space: nowrap;
}
.hero-luxe-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #00b074; flex-shrink: 0; }
@media (max-width: 900px) {
.hero-luxe-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
.hero-luxe { padding: 64px 0 48px; }
.hero-luxe-tag { display: none; }
}
/* Page header (sous-pages) */
.page-hero {
background: var(--charcoal) center/cover no-repeat;
color: #fff;
padding: 76px 0 60px;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute; inset: 0;
/* Voile très léger (juste assez pour garder le texte blanc lisible) au lieu du fond
* quasi noir précédent (0.92/0.72/0.55) qui masquait la photo -- demande explicite. */
background: linear-gradient(100deg, rgba(8,9,9,0.4) 0%, rgba(8,9,9,0.22) 45%, rgba(8,9,9,0.08) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
/* Le voile étant beaucoup plus léger, on garde le texte lisible sur une photo claire
* avec une ombre portée plutôt qu'un fond sombre plein. */
.page-hero h1, .page-hero .eyebrow, .page-hero .breadcrumb, .page-hero p.lead {
text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.breadcrumb {
font-size: 0.78rem;
color: var(--muted-light);
margin-bottom: 18px;
letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--stone-200); }
.breadcrumb a:hover { color: var(--gold-light); }
.page-hero p.lead { color: var(--stone-200); max-width: 620px; margin-top: 16px; font-size: 1.05rem; }
/* Variante claire "Luxe" du page-hero (beige crème, inspirée Tots) — opt-in via .page-hero--luxe, n'affecte pas les autres pages */
.page-hero.page-hero--luxe { background-color: #f6f1e8; color: var(--ink); }
.page-hero.page-hero--luxe::before {
background: linear-gradient(100deg, rgba(246, 241, 232, 0.95) 0%, rgba(246, 241, 232, 0.6) 45%, rgba(246, 241, 232, 0.15) 100%);
}
.page-hero--luxe .breadcrumb { color: #5c665f; }
.page-hero--luxe .breadcrumb a { color: var(--ink); }
.page-hero--luxe .breadcrumb a:hover { color: var(--emerald); }
.page-hero--luxe .eyebrow { color: var(--emerald); }
.page-hero--luxe h1 { color: var(--ink); text-shadow: none; }
.page-hero--luxe p.lead { color: #4b5550; }
/* ---------- Cards ---------- */
.grid {
display: grid;
gap: 28px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.card {
background: var(--charcoal-2);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.tile-swatch {
height: 190px;
position: relative;
overflow: hidden;
}
.card-photo {
height: 190px;
overflow: hidden;
}
.card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.card:hover .card-photo img { transform: scale(1.06); }
.tile-swatch .grid-pattern {
position: absolute; inset: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 3px;
padding: 3px;
}
.tile-swatch .grid-pattern div { background: rgba(255,255,255,0.5); }
.category-card {
padding: 30px 26px;
background: var(--stone-100);
}
.category-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.category-card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 18px; }
.category-card p.has-sub-list { margin-bottom: 12px; }
.category-card ul.sub-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: grid;
gap: 7px;
}
.category-card ul.sub-list li {
position: relative;
padding-left: 16px;
font-size: 0.85rem;
line-height: 1.45;
color: var(--muted);
}
.category-card ul.sub-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terracotta);
}
.category-card ul.sub-list strong { color: var(--ink); font-weight: 600; }
.category-card .link-arrow {
font-size: 0.82rem;
font-weight: 600;
color: var(--terracotta);
display: inline-flex;
align-items: center;
gap: 8px;
}
.category-card .link-arrow svg { transition: transform 0.25s ease; }
.category-card:hover .link-arrow svg { transform: translateX(4px); }
.icon-badge {
width: 52px; height: 52px;
border-radius: 3px;
background: var(--charcoal);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.icon-badge svg { width: 24px; height: 24px; stroke: var(--gold-light); }
/* ---------- Product cards ---------- */
.product-grid { margin-top: 8px; }
.product-card {
background: var(--charcoal-2);
display: flex;
flex-direction: column;
}
.product-visual {
height: 180px;
background: var(--stone-100);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-visual svg { width: 84px; height: 84px; transition: transform 0.35s cubic-bezier(.2,.9,.3,1.1); }
.product-card:hover .product-visual svg { transform: translateY(-3px) scale(1.05); }
.product-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover .product-visual img { transform: scale(1.06); }
.product-tag {
position: absolute;
top: 12px;
left: 12px;
font-size: 0.64rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink);
background: rgba(253, 250, 244, 0.92);
padding: 4px 9px;
border-radius: 20px;
}
/* Étiquette + bouton d'ajout au survol de l'image */
.product-hover-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 16px 14px 12px;
background: linear-gradient(0deg, rgba(23,19,16,0.85) 0%, rgba(23,19,16,0.35) 55%, rgba(23,19,16,0) 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.product-card:hover .product-hover-overlay,
.product-card:focus-within .product-hover-overlay {
opacity: 1;
transform: translateY(0);
}
.product-hover-label {
color: #fff;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.35;
}
.product-hover-add {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #fff;
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.product-hover-add:hover { background: var(--terracotta); color: #fff; transform: scale(1.08); }
.product-hover-add svg { width: 14px; height: 14px; }
.product-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-body h4 {
font-family: var(--ff-sans);
font-size: 1.1875rem;
font-weight: 600;
margin: 0 0 6px;
}
.product-body p {
color: var(--muted);
font-size: 0.85rem;
margin: 0 0 16px;
flex: 1;
}
.product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.product-price {
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
}
.product-price span {
display: block;
font-family: var(--ff-sans);
font-size: 0.7rem;
font-weight: 600;
color: var(--muted-light);
text-transform: uppercase;
letter-spacing: 0.14em;
}
.product-price.has-promo { color: var(--terracotta); }
.product-price .admin-old-price {
display: inline-block;
margin-left: 6px;
font-size: 0.72rem;
font-weight: 400;
color: var(--muted);
text-decoration: line-through;
}
.product-quote-link {
font-size: 0.78rem;
font-weight: 600;
color: var(--terracotta);
white-space: nowrap;
}
.product-note {
color: var(--muted);
font-size: 0.92rem;
margin-top: -8px;
}
/* ---------- Mise en page "Market" (façon marketplace, pilote sur carrelage.html) ----------
Sidebar catégories/prix/facettes + grille de résultats, plutôt que des rangées
horizontales par catégorie. Les cartes produit ne sont pas dupliquées : elles restent
déclarées dans leurs .product-row d'origine (voir le HTML) et sont déplacées dans
#marketGrid en JS au chargement — .product-row d'origine masquées une fois vidées. */
.market-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 36px;
align-items: start;
margin: 28px 0 8px;
}
@media (max-width: 860px) {
.market-layout { grid-template-columns: 1fr; }
}
.market-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 860px) { .market-sidebar { position: static; } }
.market-sidebar-block h4 {
font-family: var(--ff-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 12px;
}
.market-cat-tree { list-style: none; margin: 0; padding: 0; }
.market-cat-tree .market-cat-group {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: var(--muted);
margin: 16px 0 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.market-cat-tree li:first-child .market-cat-group { margin-top: 0; }
.market-cat-tree ul { list-style: none; margin: 0; padding: 0; }
.market-cat-link {
display: block;
width: 100%;
text-align: left;
padding: 7px 10px;
border: none;
background: none;
border-radius: 3px;
font-family: inherit;
font-size: 0.88rem;
color: var(--ink);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.market-cat-link:hover { background: var(--stone-100); }
.market-cat-link.is-active { background: var(--terracotta); color: #fff; font-weight: 600; }
.market-cat-link .market-cat-count { float: right; color: var(--muted-light); font-size: 0.78rem; }
.market-cat-link.is-active .market-cat-count { color: rgba(255, 255, 255, 0.75); }
.market-price-range { display: flex; align-items: center; gap: 8px; }
.market-price-range input {
width: 0;
flex: 1;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 3px;
font-family: inherit;
font-size: 0.86rem;
color: var(--ink);
background: var(--stone-50);
}
.market-price-range input:focus { outline: none; border-color: var(--terracotta); }
.market-price-range span { color: var(--muted-light); font-size: 0.8rem; }
.market-price-apply {
margin-top: 10px;
width: 100%;
padding: 8px;
border: 1px solid var(--line);
border-radius: 3px;
background: var(--stone-100);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.market-price-apply:hover { border-color: var(--terracotta); color: var(--terracotta); }
#marketFacetsBlock .product-filter-bar { flex-direction: column; margin: 0; }
#marketFacetsBlock .product-filter-field select { width: 100%; }
.market-content { min-width: 0; }
.market-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.market-count { margin: 0; font-size: 0.86rem; color: var(--muted); }
.market-count strong { color: var(--ink); font-family: var(--ff-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.market-sort select {
padding: 9px 34px 9px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--stone-100) url('data:image/svg+xml;utf8,') no-repeat right 12px center;
background-size: 12px;
font-family: inherit;
font-size: 0.86rem;
color: var(--ink);
cursor: pointer;
}
.market-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.market-grid .product-card { width: auto; border-radius: var(--radius); }
.market-grid .product-visual { height: 220px; }
body.has-market-layout .product-row { display: none; }
/* ---------- Recherche produit ---------- */
.product-search {
position: relative;
max-width: 420px;
margin: 28px 0 8px;
}
.product-search input {
width: 100%;
padding: 13px 44px 13px 44px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--stone-100);
font-family: inherit;
font-size: 0.92rem;
color: var(--ink);
transition: border-color 0.2s ease, background 0.2s ease;
}
.product-search input:focus {
outline: none;
border-color: var(--terracotta);
background: #fff;
}
.product-search svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
stroke: var(--muted);
pointer-events: none;
}
.product-search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: var(--stone-100);
color: var(--muted);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-search-clear svg { width: 12px; height: 12px; }
.product-search.has-value .product-search-clear { display: flex; }
.product-search-empty {
display: none;
color: var(--muted);
font-size: 0.95rem;
padding: 12px 0 4px;
}
/* ---------- Filtres catalogue (catégorie / format / couleur / finition) ---------- */
.product-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 22px;
}
.product-filter-bar:empty { display: none; }
.product-filter-field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px 34px 10px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--stone-100) url('data:image/svg+xml;utf8,') no-repeat right 12px center;
background-size: 12px;
font-family: inherit;
font-size: 0.86rem;
color: var(--ink);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.product-filter-field select:hover {
border-color: var(--line-light);
}
.product-filter-field select:focus {
outline: none;
border-color: var(--terracotta);
background-color: #fff;
}
.product-filter-field select.is-active {
border-color: var(--terracotta);
background-color: #fff;
color: var(--terracotta-dark);
font-weight: 600;
}
/* ---------- Bouton favoris ---------- */
.product-fav-btn {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
display: flex;
align-items: center;
justify-content: center;
color: #0e100f;
box-shadow: var(--shadow-soft);
cursor: pointer;
z-index: 2;
transition: background 0.2s ease, transform 0.2s ease;
}
.product-fav-btn svg { width: 17px; height: 17px; transition: fill 0.2s ease; }
.product-fav-btn:hover { transform: scale(1.08); background: #fff; }
.product-fav-btn.active { color: var(--terracotta); }
.product-fav-btn.active svg { fill: var(--terracotta); }
/* ---------- Rangées de produits par catégorie (façon Shop) ---------- */
.product-row + .product-row { margin-top: 52px; }
.product-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.product-row-head h3 { font-size: 1.35rem; }
.scroll-arrows { display: flex; gap: 10px; flex: 0 0 auto; }
.scroll-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--charcoal-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: background 0.2s ease, border-color 0.2s ease;
}
.scroll-arrow svg { width: 16px; height: 16px; }
.scroll-arrow:hover { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.scroll-arrow:disabled { opacity: 0.35; pointer-events: none; }
.scroll-cards {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
scrollbar-width: thin;
}
.scroll-cards .product-card {
flex: 0 0 300px;
scroll-snap-align: start;
border-radius: var(--radius);
}
.scroll-cards .product-visual { height: 220px; }
.scroll-cards .product-visual svg { width: 108px; height: 108px; }
.product-visual::after {
content: "";
position: absolute;
bottom: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: rgba(255,255,255,0.92);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e100f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
box-shadow: var(--shadow-soft);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.product-card:hover .product-visual::after,
.product-card:focus-visible .product-visual::after {
opacity: 1;
transform: translateY(0);
}
.scroll-cards .product-body { padding: 24px 24px 26px; }
/* Titres produit unifiés en sans (Archivo) partout, y compris dans les rangs défilants — plus de variante serif ici. */
.scroll-cards .product-body p { font-size: 0.9rem; }
.product-card.dark {
--ink: var(--stone-100);
background: var(--charcoal);
}
.product-card.dark .product-visual { background: var(--panel-dark); }
.product-card.dark .product-body h4 { color: #fff; }
.product-card.dark .product-body p { color: var(--muted-light); }
.product-card.dark .product-tag { background: rgba(255,255,255,0.14); color: var(--gold-light); }
.product-card.dark .product-price-row { border-top-color: var(--line-light); }
.product-card.dark .product-price { color: #fff; }
.product-card.dark .product-price span { color: var(--muted-light); }
.product-card.dark .product-quote-link { color: var(--gold-light); }
.product-card.dark:focus-visible { outline-color: var(--gold-light); }
@media (max-width: 640px) {
.scroll-cards .product-card { flex-basis: 78vw; }
}
.product-card { cursor: pointer; }
.product-card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
/* ---------- Product modal (fiche produit) ---------- */
.product-modal {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.product-modal.open {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
.product-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 11, 11, 0.65);
backdrop-filter: blur(2px);
}
.product-modal-dialog {
position: relative;
background: var(--charcoal-2);
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow-y: auto;
border-radius: var(--radius);
box-shadow: var(--shadow);
transform: translateY(18px) scale(0.97);
opacity: 0;
transition: transform 0.4s cubic-bezier(.2,.9,.3,1.1), opacity 0.35s ease;
}
.product-modal.open .product-modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.product-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--stone-100);
color: var(--ink);
font-size: 1.3rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.2s ease, color 0.2s ease;
}
.product-modal-close:hover { background: var(--terracotta); color: #fff; }
.product-modal-visual {
height: 240px;
background: var(--stone-100);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-modal-visual img { width: 100%; height: 100%; object-fit: cover; }
.product-modal-visual svg { width: 130px; height: 130px; stroke: var(--terracotta); }
.product-modal-body { padding: 26px 28px 28px; }
.product-modal-tag {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--terracotta);
margin: 0 0 8px;
}
.product-modal-body h3 { font-size: 1.5rem; margin-bottom: 12px; }
.product-modal-desc { color: var(--muted); font-size: 0.98rem; margin: 0 0 22px; }
.product-modal-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
@media (max-width: 480px) {
.product-modal-price-row { flex-direction: column; align-items: stretch; }
.product-modal-price-row .btn { width: 100%; }
}
/* ---------- Showroom cards ---------- */
.showroom-card {
background: var(--charcoal-2);
border: 1px solid var(--line);
padding: 36px;
border-radius: var(--radius);
}
.showroom-card .city-tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
background: var(--terracotta);
padding: 5px 12px;
border-radius: 2px;
margin-bottom: 18px;
}
.showroom-card h3 { font-size: 1.6rem; margin-bottom: 18px; }
.showroom-detail {
display: flex;
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.showroom-detail:first-of-type { border-top: none; }
.showroom-detail svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--terracotta); margin-top: 2px; }
.showroom-detail strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 3px; }
.showroom-detail a, .showroom-detail span.value { font-size: 0.98rem; color: var(--ink); }
.showroom-detail a { color: var(--emerald); font-weight: 600; }
.showroom-detail a:hover { color: var(--emerald-light); }
.map-embed {
width: 100%;
height: 320px;
border: 0;
border-radius: var(--radius);
filter: grayscale(20%) contrast(1.05);
}
/* ---------- Feature strip / trust ---------- */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 56px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; gap: 16px; align-items: flex-start; }
.trust-item svg { width: 26px; height: 26px; stroke: var(--terracotta); flex-shrink: 0; margin-top: 2px; }
.trust-item h4 { font-size: 0.98rem; margin-bottom: 6px; }
.trust-item p { margin: 0; font-size: 0.86rem; color: var(--muted); }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-strip { grid-template-columns: 1fr; } }
/* ---------- Instagram block ---------- */
.instagram-block {
background: linear-gradient(135deg, var(--charcoal) 0%, #000 100%);
color: #fff;
border-radius: var(--radius);
padding: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.instagram-block .ig-count { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 3rem; color: var(--gold-light); }
.instagram-block .ig-copy { max-width: 480px; }
.instagram-block .ig-copy p { color: rgba(255,255,255,0.82); }
/* ---------- Two-column split ---------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split-visual {
aspect-ratio: 4/3;
border-radius: var(--radius);
background: linear-gradient(150deg, var(--stone-100), var(--stone-200));
position: relative;
overflow: hidden;
}
.split-visual .grid-pattern {
position: absolute; inset: 0;
display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr);
gap: 4px; padding: 16px;
}
.split-visual .grid-pattern div { background: rgba(23,19,16,0.08); border-radius: 1px; }
.split-visual .grid-pattern div:nth-child(7n) { background: rgba(184,135,58,0.4); }
.split-visual .grid-pattern div:nth-child(5n) { background: rgba(23,19,16,0.18); }
.split-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Values / about ---------- */
.value-card {
padding: 34px 28px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--charcoal-2);
}
.value-card .num {
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--stone-300);
font-size: 2.4rem;
margin-bottom: 10px;
}
.value-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 0.9rem; margin: 0; }
/* ---------- Timeline (à propos) ---------- */
.timeline { position: relative; padding-left: 32px; border-left: 1px solid var(--line); }
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
content: "";
position: absolute; left: -37px; top: 4px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--terracotta);
border: 3px solid var(--stone-50);
box-shadow: 0 0 0 1px var(--terracotta);
}
.timeline-item h4 { font-size: 1.05rem; margin-bottom: 6px; }
.timeline-item p { color: var(--muted); margin: 0; font-size: 0.92rem; }
/* ---------- Forms ---------- */
.form-panel {
background: var(--charcoal-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 20px; }
.field label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
font-weight: 600;
}
.field input, .field select, .field textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 3px;
padding: 13px 14px;
font-family: inherit;
font-size: 0.95rem;
background: var(--stone-50);
color: var(--ink);
transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--terracotta);
background: #fff;
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.82rem; color: var(--muted-light); margin-top: 14px; }
.form-status { margin-top: 16px; font-size: 0.9rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { color: var(--emerald); }
/* ---------- Espace client ---------- */
.account-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.account-tab {
flex: 1;
padding: 12px;
border: 1px solid var(--line);
border-radius: 3px;
background: none;
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--muted);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.account-tab.is-active { border-color: var(--terracotta); color: var(--terracotta); background: var(--stone-100); }
.account-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.order-history-item {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
margin-bottom: 14px;
}
.order-history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.order-history-head strong { font-size: 0.95rem; }
.order-history-head span { font-size: 0.82rem; color: var(--muted); }
.order-history-status {
display: inline-block;
margin-top: 8px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: var(--stone-100);
color: var(--muted);
}
.order-history-items { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.order-history-total { margin-top: 8px; font-weight: 600; }
.order-recap-note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); background: var(--stone-100); border-radius: 3px; padding: 12px 14px; }
/* ---------- Ratings (avis) ---------- */
.rating-card {
background: var(--charcoal-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px 32px;
text-align: center;
}
.rating-card .rating-number {
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 3rem;
color: var(--ink);
line-height: 1;
}
.rating-card .rating-number span {
font-size: 1.3rem;
color: var(--muted);
font-family: var(--ff-mono);
}
.stars { display: flex; justify-content: center; gap: 4px; margin: 16px 0; }
.stars svg { width: 20px; height: 20px; }
.stars svg.filled { fill: var(--gold); }
.stars svg.empty { fill: var(--stone-300); }
.rating-card .count { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }
/* ---------- Avis (reviews) ---------- */
.review-empty {
border: 1px dashed var(--line);
border-radius: var(--radius);
padding: 60px 40px;
text-align: center;
background: var(--stone-100);
}
.review-empty svg { width: 40px; height: 40px; stroke: var(--muted-light); margin: 0 auto 20px; }
.review-empty h3 { margin-bottom: 12px; }
.review-empty p { color: var(--muted); max-width: 460px; margin: 0 auto 26px; }
/* ---------- CTA banner ---------- */
.cta-banner {
background: var(--charcoal);
color: #fff;
border-radius: var(--radius);
padding: 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(195,154,84,0.2), transparent 60%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: 16px; }
.cta-banner p { color: var(--stone-200); max-width: 520px; margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ---------- Footer ---------- */
.site-footer { background: var(--stone-100); color: var(--muted); padding-top: 72px; border-top: 1px solid var(--line); }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 {
color: var(--ink);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 600;
}
.footer-grid p { font-size: 0.88rem; line-height: 1.7; }
.footer-grid ul li { margin-bottom: 11px; }
.footer-grid a { font-size: 0.88rem; }
.footer-grid a:hover { color: var(--terracotta); }
.footer-grid a[href^="tel:"],
.footer-grid a[href^="mailto:"] {
color: var(--emerald);
font-weight: 600;
}
.footer-grid a[href^="tel:"]:hover,
.footer-grid a[href^="mailto:"]:hover {
color: var(--emerald-light);
}
.footer-brand p { max-width: 320px; margin: 18px 0 22px; font-size: 0.88rem; }
.footer-social { display: flex; gap: 18px; align-items: center; }
.footer-social a {
display: flex; align-items: center; justify-content: center;
color: var(--muted);
font-size: 1.1rem;
transition: color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { color: var(--terracotta); transform: translateY(-2px); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
font-size: 0.78rem;
color: var(--muted);
flex-wrap: wrap;
gap: 10px;
}
.footer-bottom a:hover { color: var(--terracotta); }
/* ---------- Floating actions ---------- */
.float-actions {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 90;
display: flex;
flex-direction: column;
gap: 12px;
}
.float-btn {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.float-btn.whatsapp {
background: #2f7a54;
box-shadow: 0 6px 18px -4px rgba(37, 211, 102, 0.55), 0 0 0 4px rgba(37, 211, 102, 0.12);
}
.float-btn.whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px -4px rgba(37, 211, 102, 0.65), 0 0 0 6px rgba(37, 211, 102, 0.14);
}
.float-btn svg { width: 24px; height: 24px; stroke: #fff; fill: none; }
.float-btn.assistant {
background: var(--charcoal);
border: none;
cursor: pointer;
box-shadow: 0 6px 18px -4px rgba(16, 18, 16, 0.35), 0 0 0 4px rgba(16, 18, 16, 0.08);
}
.float-btn.assistant:hover { transform: translateY(-2px); background: var(--ink); }
.float-btn.assistant svg { width: 22px; height: 22px; }
/* ---------- Assistant (site public) — format standard d'un widget de chat ---------- */
.assistant-panel {
position: fixed;
right: 24px;
bottom: 170px; /* dégage la colonne des boutons flottants (bulle assistant + WhatsApp) */
z-index: 150; /* au-dessus du header sticky (z-index:100) : le bouton Fermer reste toujours cliquable */
width: 380px;
max-width: calc(100vw - 40px);
height: min(640px, calc(100vh - 310px)); /* hauteur fixe, comme un widget de chat classique -- ne remonte jamais jusqu'au header sur un écran bas */
min-height: 260px; /* garantit que l'en-tête + le formulaire ne sont jamais rognés, même sur une fenêtre très courte */
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 20px 48px -12px rgba(16, 18, 16, 0.28);
display: flex;
flex-direction: column;
overflow: hidden; /* filet de sécurité : jamais de contenu qui "flotte" hors du cadre */
opacity: 0;
transform: translateY(12px) scale(0.98);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.assistant-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.assistant-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
background: var(--charcoal);
color: #fff;
border-radius: 16px 16px 0 0;
flex-shrink: 0;
}
.assistant-head strong { display: block; font-size: 1.02rem; }
.assistant-head span { display: block; font-size: 0.78rem; color: var(--stone-200); margin-top: 2px; }
.assistant-close { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px; }
.assistant-log {
flex: 1 1 auto;
min-height: 0; /* laisse le journal se comprimer en premier -- jamais la tête ni le formulaire */
overflow-y: auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.assistant-msg { font-size: 1rem; line-height: 1.6; padding: 10px 14px; border-radius: var(--radius); max-width: 92%; }
.assistant-msg.bot { background: var(--stone-100); color: var(--ink); align-self: flex-start; }
.assistant-msg.bot a { color: var(--emerald); text-decoration: underline; }
.assistant-msg.user { background: var(--emerald); color: #fff; align-self: flex-end; }
.assistant-msg.typing { opacity: 0.5; animation: assistantTyping 1.1s ease-in-out infinite; }
@keyframes assistantTyping { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 0; flex-shrink: 0; }
.assistant-chip {
font-size: 0.8rem;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: none;
color: var(--muted);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.assistant-chip:hover { border-color: var(--emerald); color: var(--emerald); }
.assistant-form { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); flex-shrink: 0; }
.assistant-form input {
flex: 1;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 11px 14px;
font-size: 1rem;
font-family: inherit;
}
.assistant-form input:focus { outline: none; border-color: var(--emerald); }
.assistant-form button {
width: 42px; height: 42px;
border-radius: var(--radius);
border: none;
background: var(--emerald);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(31, 122, 82, 0.45); /* repère visuel net, quel que soit le fond derrière */
}
.assistant-form button svg { width: 18px; height: 18px; }
.assistant-form button:hover { background: var(--emerald-light); }
@media (max-width: 640px) {
/* Format standard des widgets de chat sur mobile : plein écran, comme sur la plupart des sites. */
.assistant-panel {
right: 0; left: 0; top: 0; bottom: 0;
width: auto; height: auto;
max-width: 100vw;
border-radius: 0;
}
.assistant-head { border-radius: 0; }
}
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
/* When GSAP ScrollTrigger drives .reveal directly, let it fully own the animation */
html.gsap-active .reveal { transition: none; }
/* ---------- Page transition ---------- */
.page-transition {
position: fixed;
inset: 0;
background: var(--charcoal);
z-index: 9999;
transform: scaleY(1);
transform-origin: bottom;
pointer-events: none;
transition: transform 0.6s cubic-bezier(.76,0,.24,1);
}
body.page-loaded .page-transition { transform: scaleY(0); }
body.page-leaving .page-transition {
transform: scaleY(1);
transform-origin: top;
pointer-events: all;
transition: transform 0.45s cubic-bezier(.76,0,.24,1);
}
@media (prefers-reduced-motion: reduce) {
.page-transition { display: none; }
}
/* ---------- Magnetic buttons ---------- */
.btn { transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), background 0.25s ease, color 0.3s ease 0.05s, border-color 0.3s ease; will-change: transform; }
/* ---------- Marquee ---------- */
.marquee {
overflow: hidden;
background: var(--charcoal);
padding: 16px 0;
white-space: nowrap;
border-top: 1px solid var(--line-light);
border-bottom: 1px solid var(--line-light);
}
.marquee-track {
display: inline-flex;
gap: 28px;
animation: marquee-scroll 24s linear infinite;
}
.marquee-track span {
color: var(--stone-300);
font-family: var(--ff-sans);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.marquee-track span.dot { color: var(--terracotta); }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* ---------- Hero 3D — carreaux flottants ---------- */
.hero-3d-stage {
position: absolute;
inset: 0;
z-index: 0;
perspective: 1600px;
overflow: hidden;
}
.floating-tile {
position: absolute;
border-radius: 6px;
border: 7px solid;
border-image: linear-gradient(135deg, #f0d38a, #b8873a) 1;
background-size: cover;
background-position: center;
box-shadow: 0 30px 60px -18px rgba(0,0,0,0.65);
transform-style: preserve-3d;
animation: float-tile 9s ease-in-out infinite;
}
.floating-tile.t1 { width: 168px; height: 168px; top: 8%; right: 6%; animation-delay: 0s; --rx: 10deg; --ry: -14deg; }
.floating-tile.t2 { width: 132px; height: 132px; top: 42%; right: 26%; animation-delay: 1.4s; --rx: -8deg; --ry: 10deg; }
.floating-tile.t3 { width: 148px; height: 148px; top: 60%; right: 2%; animation-delay: 2.6s; --rx: 12deg; --ry: 8deg; }
.floating-tile.t4 { width: 108px; height: 108px; top: 6%; right: 34%; animation-delay: 0.8s; --rx: -10deg; --ry: -6deg; }
.floating-tile.t5 { width: 118px; height: 118px; top: 78%; right: 30%; animation-delay: 2s; --rx: 6deg; --ry: -12deg; }
@keyframes float-tile {
0%, 100% { transform: translateY(0) rotate3d(1, 1, 0, var(--rx)); }
50% { transform: translateY(-24px) rotate3d(1, 1, 0, calc(var(--rx) * -0.6)); }
}
.glass-sphere {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(126,232,196,0.16) 55%, rgba(0,0,0,0.05) 100%);
box-shadow: inset 0 0 18px rgba(255,255,255,0.25), 0 12px 30px rgba(0,0,0,0.35);
animation: float-sphere 7s ease-in-out infinite;
}
.glass-sphere.s1 { width: 46px; height: 46px; top: 30%; right: 46%; animation-delay: 0.5s; }
.glass-sphere.s2 { width: 28px; height: 28px; top: 68%; right: 14%; animation-delay: 1.8s; }
.glass-sphere.s3 { width: 34px; height: 34px; top: 14%; right: 22%; animation-delay: 3s; }
@keyframes float-sphere {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-16px); }
}
@media (max-width: 960px) {
.hero-3d-stage { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.floating-tile, .glass-sphere { animation: none; }
}
/* ---------- Photo wall (galerie 3D) ---------- */
.photo-wall { background: var(--charcoal); padding: 96px 0; overflow: hidden; }
.photo-wall-head { text-align: center; margin-bottom: 56px; }
.photo-wall-stage { perspective: 1200px; }
.photo-wall-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
transform: rotateX(14deg) rotateZ(-4deg) rotateY(3deg);
transform-style: preserve-3d;
height: 560px;
}
.photo-col { overflow: hidden; border-radius: 4px; height: 100%; }
.photo-col-inner { display: flex; flex-direction: column; gap: 16px; }
.photo-col-inner img { width: 100%; height: 260px; object-fit: cover; border-radius: 4px; display: block; }
.photo-col-1 .photo-col-inner { animation: scroll-up 28s linear infinite; }
.photo-col-2 .photo-col-inner { animation: scroll-down 34s linear infinite; }
.photo-col-3 .photo-col-inner { animation: scroll-up 24s linear infinite; }
@keyframes scroll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 860px) {
.photo-wall-grid { transform: none; height: 420px; grid-template-columns: repeat(2, 1fr); }
.photo-col:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.photo-col-inner { animation: none; }
}
/* ---------- Hero title word reveal ---------- */
.word-split { display: inline-block; overflow: hidden; vertical-align: top; }
.word-split > span { display: inline-block; }
/* ---------- Misc ---------- */
.divider-line { height: 1px; background: var(--line); border: none; margin: 0; }
.pill {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 20px;
background: var(--stone-100);
color: var(--ink);
font-weight: 600;
}
.tel-links { display: flex; flex-direction: column; gap: 2px; }
.tel-links a { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.section { padding: 64px 0; }
.instagram-block { padding: 36px 26px; text-align: center; justify-content: center; }
.cta-banner { padding: 44px 26px; }
.form-panel { padding: 26px; }
}
/* ---------- Panier (icône header) ---------- */
.cart-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 3px;
border: 1px solid var(--line);
background: none;
color: var(--ink);
transition: border-color 0.2s ease, color 0.2s ease;
}
.cart-toggle:hover { border-color: var(--terracotta); color: var(--terracotta); }
.account-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 3px;
border: 1px solid var(--line);
background: none;
color: var(--ink);
transition: border-color 0.2s ease, color 0.2s ease;
}
.account-link:hover { border-color: var(--terracotta); color: var(--terracotta); }
.account-link svg { width: 22px; height: 22px; }
.cart-toggle svg { width: 23px; height: 23px; }
.cart-toggle.bump { animation: cart-bump 0.45s cubic-bezier(.3,.7,.4,1.5); }
@keyframes cart-bump {
0% { transform: scale(1); }
35% { transform: scale(1.22); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.cart-toggle.bump { animation: none; }
}
.cart-count {
position: absolute;
top: -7px;
right: -7px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--terracotta);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 2px solid var(--stone-50);
}
/* ---------- Bouton "Ajouter au panier" (fiches produits) ---------- */
.product-add-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 10px 16px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: none;
color: var(--ink);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.product-add-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.product-add-btn:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.product-add-btn.added { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.product-card.dark .product-add-btn { border-color: var(--line-light); color: #fff; }
.product-modal-price-row .product-add-btn { width: auto; margin-top: 0; }
/* ---------- Tiroir panier ---------- */
.cart-drawer {
position: fixed;
inset: 0;
z-index: 600;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.cart-drawer.open {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
.cart-drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 11, 11, 0.65);
backdrop-filter: blur(2px);
}
.cart-drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100vw);
background: var(--charcoal-2);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(.2,.9,.3,1.1);
}
.cart-drawer.open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.cart-drawer-head h3 { font-size: 1.3rem; }
.cart-drawer-close {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--stone-100);
color: var(--ink);
font-size: 1.3rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s ease, color 0.2s ease;
}
.cart-drawer-close:hover { background: var(--terracotta); color: #fff; }
.cart-drawer-body {
flex: 1;
overflow-y: auto;
padding: 6px 24px 20px;
}
.cart-empty {
color: var(--muted);
font-size: 0.95rem;
text-align: center;
padding: 60px 10px;
}
.cart-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.cart-item-visual {
width: 64px;
height: 64px;
border-radius: var(--radius);
overflow: hidden;
background: var(--stone-100);
flex-shrink: 0;
}
.cart-item-visual img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-size: 0.9rem; font-weight: 600; margin: 0 0 2px; }
.cart-item-unit-price { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; }
.cart-item-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.cart-item-qty button {
width: 26px;
height: 26px;
background: none;
border: none;
color: var(--ink);
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-qty button:hover { color: var(--terracotta); }
.cart-item-qty span { min-width: 26px; text-align: center; font-size: 0.82rem; font-weight: 600; }
.cart-item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; height: 100%; justify-content: space-between; }
.cart-item-total { font-size: 0.88rem; font-weight: 700; }
.cart-item-remove {
background: none;
border: none;
color: var(--muted);
font-size: 0.74rem;
text-decoration: underline;
}
.cart-item-remove:hover { color: var(--terracotta); }
.cart-drawer-foot {
flex-shrink: 0;
padding: 18px 24px 26px;
border-top: 1px solid var(--line);
}
.cart-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1rem;
margin-bottom: 6px;
}
.cart-note { font-size: 0.78rem; color: var(--muted-light); margin: 0 0 16px; }
@media (max-width: 480px) {
.cart-item { grid-template-columns: 52px 1fr auto; }
.cart-item-visual { width: 52px; height: 52px; }
}
/* ---------- Tunnel de commande — carte claire style "Notion" ---------- */
.checkout-modal {
position: fixed;
inset: 0;
z-index: 650;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.checkout-modal.open {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
.checkout-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 11, 11, 0.7);
backdrop-filter: blur(2px);
}
.checkout-modal-dialog {
position: relative;
background: #ffffff;
color: var(--ink);
width: 100%;
max-width: 940px;
max-height: 90vh;
overflow-y: auto;
border-radius: 20px;
box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
padding: 0;
transform: translateY(18px) scale(0.97);
opacity: 0;
transition: transform 0.4s cubic-bezier(.2,.9,.3,1.1), opacity 0.35s ease;
}
.checkout-modal.open .checkout-modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.checkout-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--stone-100);
color: var(--ink);
font-size: 1.3rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.2s ease, color 0.2s ease;
}
.checkout-modal-close:hover { background: var(--terracotta); color: #fff; }
.checkout-step { padding: 42px 40px 36px; }
.checkout-step .eyebrow { color: var(--terracotta); }
.checkout-step .eyebrow::before { background: var(--terracotta); }
.checkout-modal-dialog h3 { font-size: 1.4rem; margin: 4px 0 20px; color: var(--ink); }
#checkoutStepRecap { max-width: 460px; margin: 0 auto; }
/* Tunnel de commande : deux colonnes — récap à gauche, formulaire à droite */
#checkoutStepForm { padding: 0; }
.checkout-layout {
display: grid;
grid-template-columns: 340px 1fr;
min-height: 100%;
}
.checkout-summary-col {
background: var(--stone-100);
border-right: 1px solid var(--stone-200);
padding: 44px 30px;
display: flex;
flex-direction: column;
}
.checkout-form-col { padding: 44px 40px 36px; }
@media (max-width: 860px) {
.checkout-layout { grid-template-columns: 1fr; }
.checkout-summary-col { border-right: none; border-bottom: 1px solid var(--stone-200); padding: 34px 28px 26px; }
.checkout-form-col { padding: 30px 28px 28px; }
}
.checkout-summary-mini { font-size: 0.85rem; margin-bottom: 18px; }
.checkout-summary-mini-total strong, .cart-total-row strong { font-family: var(--ff-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout-summary-mini-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--stone-200);
}
.checkout-summary-mini-row:first-child { padding-top: 0; }
.cs-thumb {
width: 46px;
height: 46px;
border-radius: 8px;
object-fit: cover;
background: var(--stone-200);
flex-shrink: 0;
}
.cs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-name {
font-size: 0.84rem;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cs-qty { font-size: 0.74rem; color: var(--muted); }
.cs-price { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 0.84rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.checkout-summary-mini-total {
display: flex;
justify-content: space-between;
font-size: 1.02rem;
font-weight: 700;
color: var(--ink);
padding-top: 16px;
margin-top: auto;
}
.billing-label {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin: 0 0 14px;
}
.billing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 8px;
}
.billing-grid--fields { margin-top: 22px; margin-bottom: 0; }
.billing-col .field:last-child { margin-bottom: 0; }
.checkout-step .field label {
color: var(--muted);
font-size: 0.72rem;
}
.checkout-step .field input,
.checkout-step .field select {
background: var(--stone-100);
border: 1px solid var(--stone-200);
color: var(--ink);
border-radius: 10px;
appearance: none;
-webkit-appearance: none;
}
.checkout-step .field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b68' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 15px;
padding-right: 38px;
}
.checkout-step .field input:focus,
.checkout-step .field select:focus {
outline: none;
border-color: var(--terracotta);
background-color: #fff;
}
#ckAddressField.is-hidden { display: none; }
.youcanpay-panel {
margin: 18px 0 6px;
padding: 18px;
border: 1.5px solid var(--stone-200);
border-radius: 14px;
background: var(--charcoal-2);
}
#youcanPayPanel.is-hidden { display: none; }
.youcanpay-note { font-size: 0.85rem; color: var(--muted); margin: 0; }
.youcanpay-note:empty { display: none; }
.billing-divider { border: none; border-top: 1px solid var(--stone-200); margin: 26px 0; }
.billing-section-title {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin: 0 0 14px;
}
.payment-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 6px;
}
.payment-tab {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 22px 12px;
border: 1.5px solid var(--stone-200);
border-radius: 14px;
cursor: pointer;
background: var(--charcoal-2);
transition: border-color 0.2s ease, background 0.2s ease;
}
.payment-tab input { position: absolute; opacity: 0; width: 0; height: 0; }
.payment-tab svg { width: 24px; height: 24px; stroke: var(--muted); transition: stroke 0.2s ease; }
.payment-tab span { font-size: 0.84rem; font-weight: 600; color: var(--ink); text-align: center; }
.payment-tab:hover { border-color: var(--stone-300); }
.payment-tab.is-checked { border-color: var(--terracotta); background: rgba(23, 19, 16, 0.05); }
.payment-tab.is-checked svg { stroke: var(--terracotta); }
.checkout-form-error {
display: none;
color: #d1435b;
font-size: 0.85rem;
margin: 20px 0 0;
}
.checkout-form-error.show { display: block; }
.btn-confirm-order {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 26px;
padding: 17px;
border-radius: 12px;
border: none;
background: var(--terracotta);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.btn-confirm-order:hover { background: var(--terracotta-dark); transform: translateY(-1px); }
.checkout-step-sub { color: var(--muted); font-size: 0.92rem; margin: 0 0 22px; }
.checkout-recap-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--emerald);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.checkout-recap-icon svg { width: 26px; height: 26px; stroke: #fff; }
.order-recap {
background: var(--stone-100);
border: 1px solid var(--stone-200);
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 22px;
}
.order-recap-ref {
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
.order-recap-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.order-recap-item {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.86rem;
}
.order-recap-item .oi-name { color: var(--ink); }
.order-recap-item .oi-name small { display: block; color: var(--muted); font-size: 0.74rem; }
.order-recap-item .oi-qty { color: var(--muted); white-space: nowrap; }
.order-recap-item .oi-total { font-weight: 700; white-space: nowrap; }
.order-recap-total {
display: flex;
justify-content: space-between;
font-size: 1rem;
font-weight: 700;
padding-top: 12px;
border-top: 1px solid var(--stone-200);
margin-bottom: 16px;
color: var(--ink);
}
.order-recap-client { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--stone-200); padding-top: 14px; }
.order-recap-client div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; }
.order-recap-client strong { color: var(--muted); font-weight: 600; }
.order-recap-client span { color: var(--ink); text-align: right; }
.checkout-recap-actions { display: flex; gap: 12px; margin-bottom: 16px; }
.checkout-recap-actions .btn { flex: 1; }
.btn-text-close {
display: block;
width: 100%;
text-align: center;
background: none;
border: none;
color: var(--muted);
font-size: 0.85rem;
text-decoration: underline;
padding: 6px 0;
}
.btn-text-close:hover { color: var(--terracotta); }
@media (max-width: 560px) {
.checkout-step { padding: 58px 22px 28px; }
.billing-grid { grid-template-columns: 1fr; gap: 18px; }
.payment-tabs { grid-template-columns: 1fr; }
.checkout-recap-actions { flex-direction: column; }
}
/* ---------- Grain de film (texture subtile, pages hors catalogue uniquement) ----------
Statique (non animé) volontairement : un grain qui scintille coûte un repaint par frame
sur un overlay plein écran, un risque de jank évitable. Désactivé sur les 7 pages
catalogue (carrelage/sanitaire/robinetterie/mosaique-pierre/meubles-salle-de-bain/
miroirs-led/destockage) où une texture par-dessus les photos produit nuirait à l'UX
d'achat — voir body.has-grain, ajouté uniquement sur les 6 autres pages. */
body.has-grain::after {
content: "";
position: fixed;
inset: 0;
z-index: 15;
pointer-events: none;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url('data:image/svg+xml;utf8,');
background-size: 180px 180px;
}