/* ================================================================
* Cozy · Stella Lune — design system pour PrestaShop hummingbird (V1)
*
* Ordre de chargement :
* 1. hummingbird theme.css (bootstrap 5.3 + theme par défaut)
* 2. ce fichier — overrides Stella V1 édition Marine par défaut
*
* Toggle des autres éditions via
* ================================================================ */
/* ----------------------------------------------------------------
* 1. Design tokens — édition Marine (défaut)
* ---------------------------------------------------------------- */
/* ── Marine Lune (édition C / Lune) — défaut V1 ──────────────
* Palette officielle : page lavande perle, panel midnight ink,
* accent laiton chaud, ligne lavande douce.
* Référence : marine-variations/themes.jsx (Cozy DS)
*/
:root,
[data-edition="marine"],
[data-edition="lune"] {
--cozy-page: #E7E5EE;
--cozy-page-lt: #F1EFF5;
--cozy-card: #DAD7E0;
--cozy-panel: #1B2240;
--cozy-panel-dk: #11152A;
--cozy-ink: #16182A;
--cozy-graphite: #2D3050;
--cozy-smoke: #7E809A;
--cozy-line: #C8C5D1;
--cozy-accent: #C5AB6E;
--cozy-highlight: #D9C385;
}
[data-edition="argile"] {
--cozy-page: #F4E8D2; --cozy-page-lt: #FBF3DF; --cozy-card: #EFE0C5;
--cozy-panel: #BE5A2E; --cozy-panel-dk: #8F3F1B;
--cozy-ink: #241612; --cozy-graphite: #4A2F22; --cozy-smoke: #7A5E4F;
--cozy-line: #C9B292; --cozy-accent: #6C7048; --cozy-highlight: #E8C58A;
}
[data-edition="lichen"] {
--cozy-page: #EDE8D0; --cozy-page-lt: #F3F0DD; --cozy-card: #E5DFC4;
--cozy-panel: #5E6A3F; --cozy-panel-dk: #3D472A;
--cozy-ink: #1D1F11; --cozy-graphite: #3B402A; --cozy-smoke: #6A6E54;
--cozy-line: #B2B594; --cozy-accent: #C24A2E; --cozy-highlight: #D5B86A;
}
[data-edition="cognac"] {
--cozy-page: #F2E8D0; --cozy-page-lt: #F9F1DC; --cozy-card: #EADAB6;
--cozy-panel: #B58041; --cozy-panel-dk: #7F541F;
--cozy-ink: #2A1B12; --cozy-graphite: #4F3522; --cozy-smoke: #7E5D44;
--cozy-line: #C5A57F; --cozy-accent: #5C2228; --cozy-highlight: #E2B66B;
}
:root {
--cozy-font-display: "Italiana", "Cormorant Garamond", Georgia, serif;
--cozy-font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
--cozy-font-italic: "Cormorant", Georgia, serif;
--cozy-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
/* sémantique bootstrap mappée */
--bs-body-bg: var(--cozy-page);
--bs-body-color: var(--cozy-graphite);
--bs-primary: var(--cozy-ink);
--bs-primary-rgb: 15, 33, 40;
--bs-secondary: var(--cozy-accent);
--bs-secondary-rgb: 212, 74, 42;
--bs-link-color: var(--cozy-ink);
--bs-link-hover-color: var(--cozy-accent);
}
/* ----------------------------------------------------------------
* 2. Base
* ---------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 15px;
line-height: 1.65;
color: var(--cozy-graphite);
background: var(--cozy-page);
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings — Italiana display, mais tailles raisonnables par défaut
* Les grandes tailles XL (108-144px) sont réservées aux classes spécifiques :
* .cozy-hero-title (homepage)
* .cozy-display-xl (sections feature dédiées)
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--cozy-font-display);
font-weight: 400;
color: var(--cozy-ink);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 0.6rem;
}
h1, .h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
h2, .h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; margin-top: 1.5em; }
h3, .h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; margin-top: 1.2em; }
h4, .h4 { font-size: 19px; }
h5, .h5 { font-size: 17px; }
h6, .h6 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; }
/* Classes display XL — réservées aux blocs hero et features */
.cozy-hero-title,
.cozy-display-xl {
font-family: var(--cozy-font-display);
font-weight: 400;
color: var(--cozy-ink);
font-size: clamp(56px, 10vw, 144px);
line-height: 0.88;
letter-spacing: -0.025em;
margin: 0;
}
.cozy-display-l {
font-family: var(--cozy-font-display);
font-weight: 400;
color: var(--cozy-ink);
font-size: clamp(48px, 6vw, 88px);
line-height: 0.92;
letter-spacing: -0.015em;
}
/* Italique éditorial */
em, .cozy-italic {
font-family: var(--cozy-font-italic);
font-style: italic;
font-weight: 400;
}
/* Mono uppercase tags */
.cozy-tag, .cozy-sku, .cozy-mono,
.product-flag,
.product-flags li {
font-family: var(--cozy-font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-accent);
}
p { margin: 0 0 1rem; }
a {
color: var(--cozy-ink);
text-decoration: none;
transition: color 150ms ease-out;
}
a:hover, a:focus { color: var(--cozy-accent); text-decoration: none; }
/* ----------------------------------------------------------------
* 3. Header — Stella minimal nav
* ---------------------------------------------------------------- */
#header {
background: var(--cozy-page);
border-bottom: 0.5px solid var(--cozy-ink);
padding: 0;
box-shadow: none;
}
#header .header-top {
padding: 18px 56px;
display: flex; justify-content: space-between; align-items: center;
background: transparent;
}
#header .header-nav {
background: transparent;
border: none;
padding: 0;
}
/* Logo wordmark : remplacer ou compléter */
#_desktop_logo, .header-logo {
font-family: var(--cozy-font-display);
font-size: 32px;
letter-spacing: 0.05em;
color: var(--cozy-ink);
line-height: 1;
}
#_desktop_logo img { max-height: 36px; }
/* Nav links style Stella */
#header .nav-link,
#header .top-menu a {
font-family: var(--cozy-font-body);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-ink);
padding: 10px 14px;
}
#header .top-menu a:hover { color: var(--cozy-accent); }
/* Panier actif accent */
.cart-preview .header,
.header .cart-preview {
color: var(--cozy-accent);
font-weight: 600;
}
.cart-preview .header::before { content: "★ "; }
/* ----------------------------------------------------------------
* 4. Boutons
* ---------------------------------------------------------------- */
.btn,
button {
border-radius: 0;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
font-family: var(--cozy-font-body);
padding: 14px 24px;
transition: all 250ms ease-out;
border-width: 0.5px;
}
.btn-primary,
.btn.btn-primary {
background: var(--cozy-ink);
color: var(--cozy-page);
border-color: var(--cozy-ink);
}
.btn-primary:hover,
.btn.btn-primary:hover {
background: var(--cozy-graphite);
border-color: var(--cozy-graphite);
color: var(--cozy-page);
}
.btn-secondary,
.btn.btn-secondary {
background: transparent;
color: var(--cozy-ink);
border: 0.5px solid var(--cozy-ink);
}
.btn-secondary:hover {
background: var(--cozy-ink);
color: var(--cozy-page);
}
.btn-link {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--cozy-accent);
text-transform: uppercase;
padding: 0;
border: none;
background: transparent;
}
.btn-link::after { content: " →"; }
/* ----------------------------------------------------------------
* 5. Forms — minimal underline
* ---------------------------------------------------------------- */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
textarea, select {
background: transparent;
border: none;
border-bottom: 1px solid var(--cozy-ink);
border-radius: 0;
padding: 8px 0;
font-family: var(--cozy-font-body);
font-size: 15px;
font-weight: 300;
color: var(--cozy-ink);
box-shadow: none;
height: auto;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
outline: none;
border-bottom-color: var(--cozy-accent);
box-shadow: none;
background: transparent;
}
.form-label,
label {
font-family: var(--cozy-font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-smoke);
margin-bottom: 6px;
}
/* ----------------------------------------------------------------
* 6. Badges
* ---------------------------------------------------------------- */
.product-flag.new,
.product-flag.online-only,
.product-flag.discount,
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 0;
font-family: var(--cozy-font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.product-flag.new {
background: var(--cozy-accent);
color: var(--cozy-page);
}
.product-flag.new::before { content: "★ "; }
.product-flag.online-only {
background: var(--cozy-highlight);
color: var(--cozy-ink);
}
/* ----------------------------------------------------------------
* 7. Cards / produits
* ---------------------------------------------------------------- */
.card,
.product-miniature,
.thumbnail-container {
background: var(--cozy-card);
border: 0.5px solid var(--cozy-line);
border-radius: 0;
box-shadow: none;
padding: 0;
transition: box-shadow 250ms ease-out;
}
.card:hover,
.product-miniature:hover,
.thumbnail-container:hover {
box-shadow: 0 12px 32px rgba(15, 33, 40, 0.08);
}
.product-miniature .thumbnail,
.product-miniature .product-thumbnail {
background: var(--cozy-panel);
padding: 0;
}
.product-miniature .product-title {
font-family: var(--cozy-font-display);
font-size: 24px;
font-weight: 400;
color: var(--cozy-ink);
letter-spacing: -0.01em;
margin: 12px 14px 4px;
}
.product-miniature .product-title a { color: var(--cozy-ink); }
.product-miniature .product-price-and-shipping {
padding: 0 14px 14px;
font-family: var(--cozy-font-display);
font-weight: 400;
color: var(--cozy-ink);
}
.product-miniature .price {
font-family: var(--cozy-font-display);
font-size: 22px;
color: var(--cozy-ink);
font-weight: 400;
}
/* Mini-card SKU label au-dessus du nom (grammar Stella) */
.product-miniature .product-reference,
.product-miniature::before {
font-family: var(--cozy-font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-accent);
}
/* ----------------------------------------------------------------
* 8. Hero block (homepage)
* ---------------------------------------------------------------- */
.cozy-hero {
padding: 56px 56px 0;
display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px;
align-items: center;
}
.cozy-hero .tag-edition {
font-family: var(--cozy-font-mono);
font-size: 11px;
color: var(--cozy-accent);
letter-spacing: 0.32em;
margin-bottom: 22px;
text-transform: uppercase;
}
.cozy-hero h1.hero-title {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(56px, 10vw, 144px);
line-height: 0.88;
letter-spacing: -0.025em;
color: var(--cozy-ink);
margin: 0;
}
.cozy-hero h1.hero-title em {
font-family: var(--cozy-font-italic);
font-style: italic;
}
.cozy-hero-row {
display: flex; gap: 40px; margin-top: 32px; align-items: flex-end;
}
.cozy-hero-text {
font-size: 15px; font-weight: 300; line-height: 1.65;
color: var(--cozy-graphite); max-width: 340px;
}
.cozy-hero-text em { color: var(--cozy-accent); font-style: italic; font-family: var(--cozy-font-italic); }
.cozy-hero-panel {
aspect-ratio: 1/1.1;
background: var(--cozy-panel);
position: relative;
}
.cozy-hero-panel .panel-sku {
position: absolute; top: 18px; left: 18px;
font-family: var(--cozy-font-mono);
font-size: 10px; color: var(--cozy-highlight);
letter-spacing: 0.22em;
}
.cozy-hero-panel .panel-info {
position: absolute; bottom: 18px; right: 18px; text-align: right;
color: var(--cozy-page);
}
.cozy-hero-panel .panel-info .product-name {
font-family: var(--cozy-font-display);
font-size: 32px;
color: var(--cozy-page);
}
.cozy-hero-panel .panel-info .product-price {
font-family: var(--cozy-font-mono);
font-size: 10px;
color: var(--cozy-highlight);
letter-spacing: 0.18em;
margin-top: 4px;
}
/* ----------------------------------------------------------------
* 9. Triplet éditorial
* ---------------------------------------------------------------- */
.cozy-triplet {
padding: 40px 80px 60px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
margin: 24px auto 0;
border-top: 1px solid var(--cozy-ink);
max-width: 1320px;
box-sizing: border-box;
}
.cozy-triplet article { padding-top: 20px; }
.cozy-triplet .thumb {
aspect-ratio: 4/3; margin-bottom: 14px; background: var(--cozy-card);
}
.cozy-triplet .tag {
font-family: var(--cozy-font-mono);
font-size: 10px; color: var(--cozy-accent);
letter-spacing: 0.22em; text-transform: uppercase;
}
.cozy-triplet .tag::before { content: "★ "; }
.cozy-triplet h3 {
font-family: var(--cozy-font-display); font-weight: 400;
font-size: 28px; margin: 8px 0 4px; line-height: 1.05;
}
.cozy-triplet p {
font-family: var(--cozy-font-body);
font-size: 13px; color: var(--cozy-smoke); font-weight: 300;
}
/* ----------------------------------------------------------------
* 10. Product Detail Page (PDP)
* ---------------------------------------------------------------- */
.cozy-pdp {
display: grid; grid-template-columns: 1.15fr 1fr;
border-top: 1px solid var(--cozy-ink);
}
.cozy-pdp-gallery {
background: var(--cozy-panel); position: relative; padding: 36px;
display: flex; flex-direction: column; min-height: 600px;
}
.cozy-pdp-gallery .fig-label {
position: absolute; top: 22px; left: 22px;
font-family: var(--cozy-font-mono);
font-size: 10px; color: var(--cozy-highlight);
letter-spacing: 0.22em; text-transform: uppercase;
}
.cozy-pdp-gallery .fig-page {
position: absolute; top: 22px; right: 22px;
font-family: var(--cozy-font-mono);
font-size: 10px; color: var(--cozy-page);
letter-spacing: 0.18em; opacity: 0.8;
}
.cozy-pdp-buy {
padding: 48px;
display: flex; flex-direction: column; gap: 18px;
}
.cozy-pdp-buy .pdp-sku {
font-family: var(--cozy-font-mono);
font-size: 11px; color: var(--cozy-accent);
letter-spacing: 0.25em; text-transform: uppercase;
}
.cozy-pdp-buy .pdp-sku::before { content: "★ "; }
.cozy-pdp-buy h1 {
font-family: var(--cozy-font-display);
font-weight: 400; font-size: clamp(48px, 6vw, 88px);
line-height: 0.92; letter-spacing: -0.015em; color: var(--cozy-ink);
margin: 0;
}
.cozy-pdp-buy .pdp-tagline {
font-family: var(--cozy-font-italic); font-style: italic;
font-size: 20px; color: var(--cozy-graphite); margin-top: -6px;
}
.cozy-pdp-buy .pdp-price-row {
display: flex; align-items: baseline; gap: 14px;
}
.cozy-pdp-buy .pdp-price {
font-family: var(--cozy-font-display); font-size: 40px;
color: var(--cozy-ink); font-weight: 400;
}
.cozy-pdp-buy .pdp-price-info {
font-family: var(--cozy-font-mono); font-size: 10px;
color: var(--cozy-smoke); letter-spacing: 0.15em; text-transform: uppercase;
}
.cozy-pdp-buy .pdp-finitions {
display: flex; gap: 8px; flex-wrap: wrap;
}
.cozy-pdp-buy .pdp-finition {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
border: 0.5px solid var(--cozy-line);
background: transparent;
font-family: var(--cozy-font-mono); font-size: 10px;
letter-spacing: 0.15em; color: var(--cozy-ink);
cursor: pointer;
text-transform: uppercase;
}
.cozy-pdp-buy .pdp-finition.active { border: 1.5px solid var(--cozy-ink); }
.cozy-pdp-buy .pdp-finition .swatch {
width: 14px; height: 14px;
border: 0.5px solid var(--cozy-ink);
}
.cozy-pdp-buy .pdp-desc {
font-family: var(--cozy-font-body); font-weight: 300;
font-size: 14px; line-height: 1.7;
color: var(--cozy-graphite); max-width: 440px;
}
.cozy-pdp-buy .pdp-actions {
display: flex; gap: 8px;
}
.cozy-pdp-buy .pdp-add {
flex: 1;
background: var(--cozy-ink); color: var(--cozy-page);
padding: 19px 22px;
font-family: var(--cozy-font-body); font-size: 12px;
letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 500;
}
.cozy-pdp-buy .pdp-wish {
width: 54px; background: var(--cozy-accent); color: var(--cozy-page);
font-size: 18px; border: none;
}
.cozy-pdp-buy .pdp-facts {
border-top: 1px solid var(--cozy-ink);
padding-top: 14px; margin-top: 4px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.cozy-pdp-buy .pdp-facts .fact-label {
font-family: var(--cozy-font-mono);
font-size: 9px; color: var(--cozy-accent);
letter-spacing: 0.2em; text-transform: uppercase;
}
.cozy-pdp-buy .pdp-facts .fact-value {
font-family: var(--cozy-font-body); font-size: 13px;
margin-top: 4px; color: var(--cozy-ink);
}
/* ----------------------------------------------------------------
* 11. Cart / checkout (improvisé sur grammar Stella)
* ---------------------------------------------------------------- */
#checkout, #cart {
background: var(--cozy-page);
}
.cart-summary,
.cart-grid {
background: var(--cozy-page-lt);
border: 0.5px solid var(--cozy-line);
border-radius: 0;
padding: 24px;
}
.cart-item,
.product-line-info {
border-bottom: 0.5px solid var(--cozy-line);
padding: 16px 0;
}
.cart-item h4,
.product-line-info .product-line-info-title {
font-family: var(--cozy-font-display);
font-size: 22px;
font-weight: 400;
}
.cart-summary-line {
display: flex; justify-content: space-between;
font-family: var(--cozy-font-body);
padding: 8px 0;
font-size: 14px;
}
.cart-summary-line.cart-total {
border-top: 1px solid var(--cozy-ink);
padding-top: 16px; margin-top: 16px;
font-family: var(--cozy-font-display);
font-size: 28px;
}
.cart-summary-line.cart-total .value {
font-family: var(--cozy-font-display);
font-size: 32px;
color: var(--cozy-ink);
}
/* Checkout step headers */
.checkout-step .step-title {
font-family: var(--cozy-font-display);
font-size: 32px;
color: var(--cozy-ink);
letter-spacing: -0.01em;
}
.checkout-step.-current .step-title {
color: var(--cozy-accent);
}
/* ----------------------------------------------------------------
* 12. Account / customer
* ---------------------------------------------------------------- */
#customer-account .page-header h1,
#identity .page-header h1,
#authentication .page-header h1 {
font-family: var(--cozy-font-display);
font-size: clamp(48px, 6vw, 88px);
color: var(--cozy-ink);
letter-spacing: -0.015em;
}
.account-links a {
display: block;
padding: 18px 22px;
border-bottom: 0.5px solid var(--cozy-line);
font-family: var(--cozy-font-body);
font-size: 14px;
letter-spacing: 0.05em;
color: var(--cozy-ink);
}
.account-links a:hover {
background: var(--cozy-page-lt);
color: var(--cozy-accent);
}
/* ----------------------------------------------------------------
* 13. Breadcrumb
* ---------------------------------------------------------------- */
.breadcrumb {
background: transparent;
padding: 14px 0;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cozy-smoke);
}
.breadcrumb a { color: var(--cozy-smoke); }
.breadcrumb a:hover { color: var(--cozy-accent); }
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: var(--cozy-smoke);
padding: 0 8px;
}
/* ----------------------------------------------------------------
* 14. Footer
* ---------------------------------------------------------------- */
.footer-container,
#footer {
background: var(--cozy-ink);
color: var(--cozy-page);
padding: 60px 56px 40px;
border: none;
margin-top: 80px;
}
#footer a,
.footer-container a {
color: var(--cozy-page);
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
#footer a:hover { color: var(--cozy-highlight); }
#footer h3,
.footer-container h3 {
font-family: var(--cozy-font-mono);
font-size: 11px;
color: var(--cozy-highlight);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 18px;
}
/* ----------------------------------------------------------------
* 15. CMS pages (articles blog)
* ---------------------------------------------------------------- */
#cms .page-header h1,
.cms-page h1 {
font-family: var(--cozy-font-display);
font-size: clamp(56px, 8vw, 108px);
line-height: 0.9;
letter-spacing: -0.02em;
}
.cms-block {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
color: var(--cozy-graphite);
max-width: 720px;
margin: 0 auto;
padding: 40px 24px;
}
.cms-block h2 {
font-size: 36px;
margin: 48px 0 12px;
}
.cms-block h3 {
font-size: 24px;
margin: 32px 0 8px;
}
.cms-block blockquote {
border-left: 2px solid var(--cozy-accent);
padding-left: 18px;
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 19px;
color: var(--cozy-graphite);
margin: 24px 0;
}
/* ----------------------------------------------------------------
* 16. Notifications + alerts
* ---------------------------------------------------------------- */
.notification,
.alert {
border-radius: 0;
border: 0.5px solid var(--cozy-line);
background: var(--cozy-page-lt);
font-family: var(--cozy-font-body);
font-size: 14px;
color: var(--cozy-ink);
}
.alert-success { border-color: var(--cozy-accent); }
.alert-danger { border-color: var(--cozy-accent); color: var(--cozy-accent); }
/* ----------------------------------------------------------------
* 17. Pagination
* ---------------------------------------------------------------- */
.pagination {
font-family: var(--cozy-font-mono);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.pagination a, .pagination span {
border: 0.5px solid var(--cozy-line);
background: transparent;
color: var(--cozy-ink);
border-radius: 0;
padding: 8px 14px;
font-size: 11px;
}
.pagination .current a, .pagination .current span {
background: var(--cozy-ink);
color: var(--cozy-page);
border-color: var(--cozy-ink);
}
/* ----------------------------------------------------------------
* 18. Search / 404 / states
* ---------------------------------------------------------------- */
#pagenotfound,
.page-not-found,
.page-error {
background: var(--cozy-page);
text-align: center;
padding: 120px 24px;
}
.page-not-found h1 {
font-family: var(--cozy-font-display);
font-size: 144px;
color: var(--cozy-ink);
letter-spacing: -0.03em;
line-height: 0.9;
}
.page-not-found .lead {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 22px;
color: var(--cozy-graphite);
margin-top: 16px;
}
/* ----------------------------------------------------------------
* 19. Mobile breakpoints
* ---------------------------------------------------------------- */
@media (max-width: 991px) {
#header .header-top { padding: 14px 20px; }
.cozy-hero { padding: 28px 20px 0; grid-template-columns: 1fr; gap: 24px; }
.cozy-hero h1.hero-title { font-size: clamp(48px, 12vw, 88px); }
.cozy-hero-row { flex-direction: column; align-items: flex-start; gap: 20px; }
.cozy-triplet { padding: 24px 20px 40px; grid-template-columns: 1fr; gap: 24px; }
.cozy-pdp { grid-template-columns: 1fr; }
.cozy-pdp-gallery { min-height: 400px; padding: 20px; }
.cozy-pdp-buy { padding: 28px 20px; }
.footer-container, #footer { padding: 40px 20px 24px; }
}
@media (max-width: 575px) {
body { font-size: 14px; }
.cozy-hero h1.hero-title { font-size: clamp(40px, 14vw, 64px); }
}
/* ----------------------------------------------------------------
* 19. Pages CMS / contenu textuel — layout serré, hiérarchie lisible
*
* S'applique à /content/X-slug (CMS pages), pages produit "détails", blog.
* Le wrapper .container global PrestaShop est full-width 1280px ;
* on contraint la lecture à ~720px pour respect des standards typographie.
* ---------------------------------------------------------------- */
#cms .page-content,
#cms #content,
#cms .cms-block,
.page-cms #main,
.page-content--cms {
max-width: 760px;
margin: 0 auto;
padding: 56px 24px 80px;
}
#cms h1,
.page-cms h1 {
font-family: var(--cozy-font-display);
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 1rem;
}
#cms h2,
.page-cms h2 {
font-family: var(--cozy-font-display);
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 2.5em 0 0.6em;
padding-top: 1em;
border-top: 0.5px solid var(--cozy-line);
}
#cms h2:first-of-type,
.page-cms h2:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 1.5em;
}
#cms h3,
.page-cms h3 {
font-family: var(--cozy-font-display);
font-size: clamp(20px, 1.8vw, 22px);
line-height: 1.25;
margin: 1.5em 0 0.4em;
}
#cms p,
.page-cms p,
.cms-block p {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.75;
color: var(--cozy-graphite);
margin: 0 0 1.1em;
}
#cms ul, #cms ol,
.page-cms ul, .page-cms ol,
.cms-block ul, .cms-block ol {
margin: 0 0 1.2em 0;
padding: 0;
list-style: none;
}
#cms ul li, .page-cms ul li, .cms-block ul li {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--cozy-graphite);
padding: 4px 0 4px 22px;
position: relative;
}
#cms ul li::before, .page-cms ul li::before, .cms-block ul li::before {
content: "—";
position: absolute;
left: 0;
top: 4px;
color: var(--cozy-accent);
font-family: var(--cozy-font-mono);
font-size: 14px;
}
#cms ol li, .page-cms ol li, .cms-block ol li {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--cozy-graphite);
padding: 4px 0;
margin-left: 1.4em;
list-style: decimal;
}
#cms strong, .page-cms strong, .cms-block strong {
color: var(--cozy-ink);
font-weight: 500;
}
#cms em, .page-cms em, .cms-block em {
font-family: var(--cozy-font-italic);
font-style: italic;
font-weight: 400;
font-size: 1.06em;
color: var(--cozy-graphite);
}
/* Tag mono uppercase au-dessus du H1 (★ INFORMATIONS) */
#cms .cozy-tag,
.page-cms .cozy-tag,
.cms-block .cozy-tag {
display: block;
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-accent);
margin-bottom: 28px;
}
/* Le paragraphe italique juste après h1 (chapeau) */
#cms h1 + p em:only-child,
.page-cms h1 + p em:only-child,
.cms-block h1 + p em:only-child {
display: block;
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 21px;
line-height: 1.45;
color: var(--cozy-graphite);
margin: 0 0 2.5em;
}
/* Tables (politique RGPD) */
#cms table, .page-cms table, .cms-block table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0 2em;
font-size: 14px;
}
#cms thead th, .page-cms thead th, .cms-block thead th {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cozy-accent);
text-align: left;
padding: 10px 12px 10px 0;
border-bottom: 1px solid var(--cozy-ink);
font-weight: 500;
}
#cms tbody td, .page-cms tbody td, .cms-block tbody td {
padding: 12px 12px 12px 0;
border-bottom: 0.5px solid var(--cozy-line);
vertical-align: top;
font-family: var(--cozy-font-body);
font-size: 14px;
line-height: 1.5;
color: var(--cozy-graphite);
}
/* Liens externes (mailto, https://) */
#cms a, .page-cms a, .cms-block a {
color: var(--cozy-ink);
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 3px;
text-decoration-color: var(--cozy-line);
transition: all 200ms ease;
}
#cms a:hover, .page-cms a:hover, .cms-block a:hover {
color: var(--cozy-accent);
text-decoration-color: var(--cozy-accent);
}
/* Petite mention "Page mise à jour" en pied */
#cms .cozy-mono em,
.page-cms .cozy-mono em,
.cms-block .cozy-mono em {
font-family: var(--cozy-font-mono);
font-style: normal;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-smoke);
display: block;
margin-top: 3em;
padding-top: 1.5em;
border-top: 0.5px solid var(--cozy-line);
}
/* ----------------------------------------------------------------
* 19bis. Overrides hummingbird parent (réparations chir)
* ---------------------------------------------------------------- */
/* Header sticky parent — on neutralise pour notre layout flat */
.header.js-sticky-header {
position: relative;
box-shadow: none;
background: var(--cozy-page);
border-bottom: 0.5px solid var(--cozy-ink);
}
/* Cacher le breadcrumb sur la home (esthétique Stella) */
.page-index .breadcrumb__wrapper,
.page-index .breadcrumb,
body.page-index .breadcrumb__wrapper {
display: none !important;
}
/* Cacher le H1 page-title-section injecté par le layout — on a notre propre H1 dans le contenu */
.page-header .page-title-section,
.page-header h1.page-title-section,
.page-cms .page-header,
#cms > .page-header,
.page-index .page-header {
display: none !important;
}
/* Le bloc page-header peut rester vide sur d'autres pages (catégorie, PDP) — on garde l'option */
.page-header:empty { display: none; }
/* Le breadcrumb sur les autres pages : grammaire Stella mono uppercase */
.breadcrumb__wrapper {
background: transparent;
padding: 18px 0 8px;
border-bottom: 0.5px solid var(--cozy-line);
}
.breadcrumb__wrapper .breadcrumb {
padding: 0;
margin: 0;
}
/* Cacher le wrapper page-footer (hummingbird ajoute un footer vide) */
footer.page-footer:empty,
footer.page-footer {
display: none;
}
/* ================================================================
* Newsletter block (ps_emailsubscription en footer__before)
*
* Intégré dans le footer midnight — pas de sandwich light box.
* Layout : H3 Italiana gauche + form ligne droite, fondu doux.
* ================================================================ */
.footer__before {
background: var(--cozy-ink) !important;
padding: 48px 0 36px !important;
border-bottom: 0.5px solid var(--cozy-smoke);
border-top: 0.5px solid var(--cozy-smoke);
position: relative;
}
/* Forcer la transparence sur les ENFANTS du .footer__before
* (et pas sur le .footer__before lui-même qui garde son fond ink)
* Spécificité montée : body... + chaîne de classes Bootstrap */
body .footer__before > *,
body .footer__before > * > *,
body .footer__before section.ps-emailsubscription,
body .footer__before .ps-emailsubscription,
body .footer__before .ps-emailsubscription.bg-body-tertiary,
body section.ps-emailsubscription.bg-body-tertiary,
body .ps-emailsubscription.bg-body-tertiary,
.footer__before .ps-emailsubscription > *,
.footer__before .ps-emailsubscription .container,
.footer__before .ps-emailsubscription .row,
.footer__before .ps-emailsubscription .col,
.footer__before .ps-emailsubscription [class*="col-"],
.footer__before .ps-emailsubscription p,
.footer__before .ps-emailsubscription form,
.footer__before .ps-emailsubscription form > div {
background: transparent !important;
background-color: transparent !important;
--bs-bg-opacity: 0 !important;
box-shadow: none !important;
}
.ps-emailsubscription {
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Layout : flex horizontal — titre/tagline gauche | form droite */
.footer__before > .container,
.footer__before .ps-emailsubscription > .container {
max-width: 1320px !important;
margin: 0 auto !important;
padding: 0 56px !important;
}
.footer__before .ps-emailsubscription .row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 56px !important;
margin: 0 !important;
}
.footer__before .ps-emailsubscription .row > .h3,
.footer__before .ps-emailsubscription .row > p.h3,
.footer__before .ps-emailsubscription .row > [class*="col-"]:first-child {
flex: 0 0 auto !important;
max-width: 38% !important;
width: auto !important;
padding: 0 !important;
}
.footer__before .ps-emailsubscription .row > form,
.footer__before .ps-emailsubscription .row > [class*="col-"]:last-child {
flex: 1 1 auto !important;
max-width: 60% !important;
width: auto !important;
padding: 0 !important;
}
/* Heading "Recevez nos offres spéciales" */
.ps-emailsubscription .h3,
.ps-emailsubscription h3,
.ps-emailsubscription .col-md-12 h3 {
font-family: var(--cozy-font-display) !important;
font-size: clamp(28px, 2.6vw, 38px) !important;
color: var(--cozy-highlight) !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
margin: 0 0 8px 0 !important;
}
/* On lui ajoute un sous-titre italique via pseudo si pas présent */
.ps-emailsubscription .h3::after,
.ps-emailsubscription h3::after {
content: "★ Une lettre par mois. Rien d'autre.";
display: block;
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 15px;
color: var(--cozy-page);
letter-spacing: normal;
margin-top: 6px;
opacity: 0.75;
}
/* Form layout horizontal underline */
.ps-emailsubscription form {
margin: 0 !important;
padding: 0 !important;
}
.ps-emailsubscription form .d-flex,
.ps-emailsubscription form > .row,
.ps-emailsubscription form > div {
display: flex !important;
align-items: center;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid var(--cozy-highlight);
background: transparent !important;
}
.ps-emailsubscription form input[type="email"] {
flex: 1;
background: transparent !important;
border: none !important;
color: var(--cozy-page) !important;
font-family: var(--cozy-font-body) !important;
font-size: 15px !important;
font-weight: 300 !important;
padding: 4px 0 !important;
outline: none !important;
box-shadow: none !important;
width: 100%;
}
.ps-emailsubscription form input[type="email"]::placeholder {
color: var(--cozy-smoke) !important;
opacity: 0.7;
}
.ps-emailsubscription form input[type="email"]:focus {
outline: none !important;
box-shadow: none !important;
}
/* Bouton S'ABONNER → mono uppercase laiton */
.ps-emailsubscription form input[type="submit"],
.ps-emailsubscription form button[type="submit"] {
background: transparent !important;
border: none !important;
color: var(--cozy-highlight) !important;
font-family: var(--cozy-font-mono) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 8px 0 !important;
width: auto !important;
height: auto !important;
cursor: pointer;
transition: color 200ms ease, transform 200ms ease;
flex-shrink: 0;
}
.ps-emailsubscription form input[type="submit"]:hover,
.ps-emailsubscription form button[type="submit"]:hover {
color: var(--cozy-page) !important;
transform: translateX(3px);
}
.ps-emailsubscription form input[type="submit"]::after {
content: " →";
}
/* Mention "Vous pouvez vous désinscrire..." en petit mono dessous */
.ps-emailsubscription form .text-body-secondary,
.ps-emailsubscription .text-body-secondary,
.ps-emailsubscription form > p,
.ps-emailsubscription form > div + p,
.ps-emailsubscription small {
display: block;
color: var(--cozy-page) !important;
font-family: var(--cozy-font-body) !important;
font-size: 11.5px !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
line-height: 1.55 !important;
text-transform: none !important;
margin-top: 14px !important;
max-width: 520px;
opacity: 0.6;
}
.ps-emailsubscription form .text-body-secondary a,
.ps-emailsubscription .text-body-secondary a {
color: var(--cozy-highlight) !important;
text-decoration: none !important;
border-bottom: 0.5px dotted var(--cozy-highlight);
}
/* ★ ornement déco subtil à gauche du heading */
.ps-emailsubscription .h3::before,
.ps-emailsubscription h3::before {
content: "★";
display: inline-block;
font-family: var(--cozy-font-mono);
font-size: 11px;
color: var(--cozy-highlight);
vertical-align: super;
margin-right: 12px;
letter-spacing: normal;
opacity: 0.85;
}
/* Mobile : stack vertical */
@media (max-width: 991px) {
.footer__before { padding: 36px 0 28px; }
.ps-emailsubscription .container,
.ps-emailsubscription .row {
grid-template-columns: 1fr !important;
gap: 24px !important;
padding: 0 20px !important;
}
.ps-emailsubscription .h3,
.ps-emailsubscription h3 { font-size: 24px !important; }
}
/* ----------------------------------------------------------------
* 20. Helpers
* ---------------------------------------------------------------- */
.cozy-divider {
height: 1px;
background: var(--cozy-ink);
margin: 60px 0;
border: none;
}
.cozy-divider-thin {
height: 0.5px;
background: var(--cozy-line);
margin: 30px 0;
border: none;
}
/* Force tout texte sur fond panel à utiliser page color */
.cozy-panel-bg {
background: var(--cozy-panel);
color: var(--cozy-page);
}
.cozy-panel-bg h1,
.cozy-panel-bg h2,
.cozy-panel-bg h3 {
color: var(--cozy-page);
}
.cozy-panel-bg .cozy-tag,
.cozy-panel-bg .cozy-mono {
color: var(--cozy-highlight);
}
/* Tabular numbers pour les prix */
.price,
.product-price,
.cart-total,
.cart-summary-line .value {
font-variant-numeric: tabular-nums;
}
/* ================================================================
* 21. Charte Marine Lune — éléments graphiques spécifiques
*
* Cover : Pétrole, bone, persimmon
* Story : Profondeurs douces. Cabine de paquebot, lampe en laiton, persienne.
* SKU : SK—04 · MARINE · 11/120
* Soie : 19 momme
* ================================================================ */
/* — Tag édition mono uppercase ★ (réutilisable hero / footer / PDP) — */
.cozy-edition-tag {
display: inline-block;
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--cozy-accent);
padding: 0;
}
.cozy-edition-tag::before { content: "★ "; }
/* — Pill "SOIE 19 MOMME" laiton sur encre — */
.cozy-pill-silk {
display: inline-block;
padding: 5px 12px;
background: var(--cozy-highlight);
color: var(--cozy-ink);
font-family: var(--cozy-font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* — Pill "★ NOUVEAU" persimmon sur sable — */
.cozy-pill-new {
display: inline-block;
padding: 5px 12px;
background: var(--cozy-accent);
color: var(--cozy-page);
font-family: var(--cozy-font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.cozy-pill-new::before { content: "★ "; }
/* — Pill outline "ÉD 11/120" — */
.cozy-pill-edition {
display: inline-block;
padding: 5px 12px;
background: transparent;
color: var(--cozy-ink);
border: 0.5px solid var(--cozy-ink);
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* — Bloc story italique (Cormorant 20px) — *
* Usage : « le luxe, ici, c'est l'air entre les lettres. »
*/
.cozy-story {
font-family: var(--cozy-font-italic);
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--cozy-graphite);
max-width: 480px;
margin: 0;
padding: 0;
border: none;
quotes: "« " " »";
}
/* — Cover line mono uppercase (couleurs de l'édition) — *
* Usage : Pétrole · Bone · Persimmon
*/
.cozy-cover {
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-smoke);
margin-top: 14px;
}
/* — Hero : ajout cover line sous le tag édition — */
.cozy-hero .cozy-cover { margin: -12px 0 22px; color: var(--cozy-smoke); }
/* — Bande des 4 éditions Argile · Lichen · Cognac · Marine — */
.cozy-editions-strip {
padding: 50px 80px 60px;
background: var(--cozy-page-lt);
border-top: 1px solid var(--cozy-ink);
border-bottom: 1px solid var(--cozy-ink);
margin: 60px auto 0;
max-width: 1320px;
box-sizing: border-box;
}
.cozy-editions-strip .strip-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 32px;
gap: 24px;
}
.cozy-editions-strip .strip-title {
font-family: var(--cozy-font-display);
font-size: clamp(40px, 4.5vw, 64px);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--cozy-ink);
margin: 0;
}
.cozy-editions-strip .strip-title em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-accent);
}
.cozy-editions-strip .strip-sub {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 17px;
color: var(--cozy-graphite);
max-width: 360px;
margin: 0;
}
.cozy-editions-strip .strip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.cozy-editions-strip .strip-card {
position: relative;
display: block;
aspect-ratio: 3 / 4;
padding: 14px 14px 16px;
color: var(--cozy-page);
text-decoration: none;
border: 0.5px solid transparent;
transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.cozy-editions-strip .strip-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(15,33,40,0.18);
}
.cozy-editions-strip .strip-card .ed-num {
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
opacity: 0.8;
}
.cozy-editions-strip .strip-card .ed-name {
position: absolute;
bottom: 38px;
left: 14px;
right: 14px;
font-family: var(--cozy-font-display);
font-size: 28px;
line-height: 1;
color: inherit;
}
.cozy-editions-strip .strip-card .ed-product {
position: absolute;
bottom: 18px;
left: 14px;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
opacity: 0.85;
}
.cozy-editions-strip .strip-card .ed-price {
position: absolute;
bottom: 18px;
right: 14px;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
opacity: 0.85;
}
/* Carte courante (badge sélection) */
.cozy-editions-strip .strip-card.is-current::after {
content: "★ COURANT";
position: absolute;
top: 14px;
right: 14px;
font-family: var(--cozy-font-mono);
font-size: 9px;
letter-spacing: 0.2em;
color: var(--cozy-highlight, #D9C385);
}
/* Couleurs par édition (le strip est en dehors de [data-edition]) */
.cozy-editions-strip .strip-card.ed-argile { background: #BE5A2E; }
.cozy-editions-strip .strip-card.ed-argile .ed-num,
.cozy-editions-strip .strip-card.ed-argile .ed-product,
.cozy-editions-strip .strip-card.ed-argile .ed-price { color: #E8C58A; }
.cozy-editions-strip .strip-card.ed-lichen { background: #5E6A3F; }
.cozy-editions-strip .strip-card.ed-lichen .ed-num,
.cozy-editions-strip .strip-card.ed-lichen .ed-product,
.cozy-editions-strip .strip-card.ed-lichen .ed-price { color: #D5B86A; }
.cozy-editions-strip .strip-card.ed-cognac { background: #B58041; }
.cozy-editions-strip .strip-card.ed-cognac .ed-num,
.cozy-editions-strip .strip-card.ed-cognac .ed-product,
.cozy-editions-strip .strip-card.ed-cognac .ed-price { color: #E2B66B; }
.cozy-editions-strip .strip-card.ed-marine { background: #2D5A66; }
.cozy-editions-strip .strip-card.ed-marine .ed-num,
.cozy-editions-strip .strip-card.ed-marine .ed-product,
.cozy-editions-strip .strip-card.ed-marine .ed-price { color: #D9C385; }
/* — Texture panel : trames fines diagonales (effet soie tissée) — */
.cozy-panel-texture,
.cozy-hero-panel {
position: relative;
}
.cozy-panel-texture::before,
.cozy-hero-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 6px,
rgba(217, 195, 133, 0.04) 6px,
rgba(217, 195, 133, 0.04) 7px
);
z-index: 0;
}
.cozy-hero-panel > * { position: relative; z-index: 1; }
/* — Glyphes ornement ★ déco sur sections hero — */
.cozy-ornament-star {
display: inline-block;
color: var(--cozy-accent);
font-size: 10px;
letter-spacing: 0.4em;
vertical-align: middle;
margin: 0 6px;
}
.cozy-ornament-star::before { content: "★ ★ ★"; }
/* — Section "Atelier · Story" Marine (encart italique large) — */
.cozy-story-section {
padding: 80px 80px 70px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 48px;
align-items: center;
border-top: 1px solid var(--cozy-ink);
margin: 0 auto;
max-width: 1320px;
box-sizing: border-box;
}
.cozy-story-section .story-aside {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-accent);
}
.cozy-story-section .story-aside::before { content: "★ "; }
.cozy-story-section .story-aside strong {
display: block;
margin-top: 14px;
font-family: var(--cozy-font-display);
font-size: 64px;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--cozy-ink);
font-weight: 400;
}
.cozy-story-section .story-aside strong em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-accent);
}
.cozy-story-section .story-body {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 22px;
line-height: 1.55;
color: var(--cozy-graphite);
max-width: 560px;
margin: 0;
}
.cozy-story-section .story-body::before {
content: "« ";
color: var(--cozy-accent);
font-style: normal;
}
.cozy-story-section .story-body::after {
content: " »";
color: var(--cozy-accent);
font-style: normal;
}
.cozy-story-section .story-meta {
margin-top: 20px;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-smoke);
}
/* — Marquee mono "★ SOIE 19 MOMME · LIVRAISON 24H · ATELIER FR · 30 NUITS POUR ESSAYER ★" — */
.cozy-marquee {
background: var(--cozy-ink);
color: var(--cozy-page);
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
padding: 14px 0;
overflow: hidden;
position: relative;
/* Halo doux UNIQUEMENT sur les côtés gauche/droite.
* Les bords haut/bas restent nets sur toute la longueur centrale —
* seule l'extrémité H se dissout dans la lavande, en halo arrondi. */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
rgba(0,0,0,0.15) 20px,
rgba(0,0,0,0.55) 50px,
rgba(0,0,0,0.85) 80px,
#000 110px,
#000 calc(100% - 110px),
rgba(0,0,0,0.85) calc(100% - 80px),
rgba(0,0,0,0.55) calc(100% - 50px),
rgba(0,0,0,0.15) calc(100% - 20px),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
rgba(0,0,0,0.15) 20px,
rgba(0,0,0,0.55) 50px,
rgba(0,0,0,0.85) 80px,
#000 110px,
#000 calc(100% - 110px),
rgba(0,0,0,0.85) calc(100% - 80px),
rgba(0,0,0,0.55) calc(100% - 50px),
rgba(0,0,0,0.15) calc(100% - 20px),
transparent 100%
);
}
.cozy-marquee-track {
display: flex;
gap: 64px;
white-space: nowrap;
animation: cozy-marquee-scroll 40s linear infinite;
width: max-content;
}
.cozy-marquee-track span { color: var(--cozy-page); }
.cozy-marquee-track .sep { color: var(--cozy-highlight); }
@keyframes cozy-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Pseudo-éléments retirés : le mask-image gère le fondu sur les 4 côtés.
* Garder les overlays donnait des bords nets en V (haut/bas) parce que les
* pseudo-elements ::before/::after sont alignés top:0 bottom:0. */
/* — Brand swatch sample (cas isolé) — */
.cozy-swatch {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cozy-ink);
}
.cozy-swatch .dot {
width: 12px;
height: 12px;
border: 0.5px solid var(--cozy-ink);
display: inline-block;
}
/* — Categories page enrobé Stella — */
#category .page-header,
.page-category .page-header {
padding: 56px 56px 28px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
border-bottom: 1px solid var(--cozy-ink);
margin-bottom: 32px;
}
#category .page-header h1,
.page-category .page-header h1 {
font-family: var(--cozy-font-display);
font-size: clamp(56px, 7vw, 108px);
line-height: 0.9;
letter-spacing: -0.025em;
margin: 0;
display: block !important; /* override le hide global */
}
.page-category .page-header::after {
content: "★ STELLA LUNE · ÉDITION D — MARINE";
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-accent);
white-space: nowrap;
}
/* — Adaptations mobile (charte Marine) — */
@media (max-width: 991px) {
.cozy-editions-strip { padding: 32px 20px 40px; margin-top: 30px; }
.cozy-editions-strip .strip-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.cozy-editions-strip .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cozy-story-section { padding: 50px 20px 40px; grid-template-columns: 1fr; gap: 20px; }
.cozy-story-section .story-aside strong { font-size: 44px; }
.cozy-story-section .story-body { font-size: 19px; }
.cozy-marquee { font-size: 10px; padding: 12px 0; }
#category .page-header,
.page-category .page-header { padding: 28px 20px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
.page-category .page-header::after { font-size: 9px; letter-spacing: 0.22em; }
}
@media (max-width: 575px) {
.cozy-editions-strip .strip-card .ed-name { font-size: 22px; bottom: 32px; }
.cozy-story-section .story-aside strong { font-size: 36px; }
.cozy-story-section .story-body { font-size: 17px; }
}
/* ================================================================
* 22. Marine Lune — overrides spécifiques édition C (LUNE)
*
* Différences vs Marine teal :
* - Page : lavande perle (#E7E5EE)
* - Panel : midnight ink (#1B2240)
* - Accent : laiton chaud (#C5AB6E) — pas de persimmon rouge
* - Masque : wireframe contour, pas de gradient silk
* - Décor : étoiles + constellations sur fond ET dans panel
* ================================================================ */
/* — Décor constellation en arrière-plan absolu de la home — */
.cozy-stars-bg {
position: absolute !important;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.cozy-stars-bg svg {
width: 100%;
height: 100%;
display: block;
}
.cozy-home.cozy-lune {
position: relative;
/* Centrer le contenu home dans le wrapper full-width parent */
max-width: 1440px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.cozy-home.cozy-lune > *:not(.cozy-stars-bg) {
position: relative;
z-index: 1;
}
/* Le marquee, full-bleed à l'intérieur de la home, ne doit pas dépasser */
.cozy-home.cozy-lune > .cozy-marquee { width: 100%; }
/* — Panel midnight ink + masque wireframe — */
.cozy-panel-night {
background: var(--cozy-panel);
aspect-ratio: 1 / 1.05;
position: relative;
overflow: hidden;
}
.cozy-panel-night::before {
/* Trame de constellation tissée très subtile */
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 18% 22%, rgba(217,195,133,0.15) 0.6px, transparent 1.1px),
radial-gradient(circle at 78% 38%, rgba(217,195,133,0.12) 0.5px, transparent 1.0px),
radial-gradient(circle at 32% 78%, rgba(217,195,133,0.10) 0.6px, transparent 1.0px),
radial-gradient(circle at 88% 82%, rgba(217,195,133,0.12) 0.5px, transparent 0.9px);
background-size: 200px 180px, 240px 220px, 220px 200px, 260px 240px;
pointer-events: none;
}
.cozy-panel-night > * { position: relative; z-index: 1; }
.cozy-panel-night .panel-sku {
position: absolute;
top: 22px; left: 22px;
font-family: var(--cozy-font-mono);
font-size: 11px;
color: var(--cozy-highlight);
letter-spacing: 0.22em;
text-transform: uppercase;
}
.cozy-panel-night .panel-art {
position: absolute;
inset: 60px 60px 80px 60px;
display: flex; align-items: center; justify-content: center;
}
.cozy-panel-night .panel-art svg { width: 100%; height: 100%; }
.cozy-panel-night .panel-info {
position: absolute;
bottom: 22px; right: 26px;
text-align: right;
color: var(--cozy-page);
}
.cozy-panel-night .panel-info .product-name {
font-family: var(--cozy-font-display);
font-size: 42px;
line-height: 1;
color: var(--cozy-page);
letter-spacing: -0.01em;
}
.cozy-panel-night .panel-info .product-price {
font-family: var(--cozy-font-mono);
font-size: 11px;
color: var(--cozy-highlight);
letter-spacing: 0.22em;
margin-top: 6px;
}
/* — Hero Lune : grid 1.05/1, padding plus généreux, centré + max-width — */
.cozy-hero-lune {
padding: 60px 80px 24px;
gap: 64px;
align-items: start; /* start (pas center/stretch) : le panneau ne se recentre plus quand le texte se redéploie au swap de police → fix CLS (0.205) */
max-width: 1320px;
margin: 0 auto;
width: 100%;
overflow: hidden; /* sécurité anti-débord */
}
.cozy-hero-lune > * { min-width: 0; } /* permet aux cellules grid de rétrécir */
.cozy-hero-lune .cozy-hero-panel,
.cozy-hero-lune .cozy-panel-night {
width: 100%;
max-width: 100%;
}
.cozy-hero-lune .cozy-hero-left {
display: flex;
flex-direction: column;
justify-content: center;
}
.cozy-hero-lune h1.hero-title {
font-size: clamp(56px, 7.5vw, 124px);
letter-spacing: -0.03em;
line-height: 0.95;
/* Le titre ne doit pas dépasser sa colonne grid */
word-break: keep-all;
hyphens: none;
}
.cozy-hero-lune h1.hero-title em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-ink);
}
/* Header utility-bar (rappel mono uppercase sur fond page) */
.cozy-utility-bar {
padding: 8px 56px;
border-bottom: 0.5px solid var(--cozy-line);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--cozy-smoke);
text-transform: uppercase;
}
/* — Triplet thumbs adaptés Lune — */
.cozy-triplet .thumb.cozy-thumb-night {
background: var(--cozy-panel);
position: relative;
}
.cozy-triplet .thumb.cozy-thumb-page { background: var(--cozy-card); }
.cozy-triplet .thumb.cozy-thumb-soft { background: var(--cozy-page-lt); }
/* — Strip Lune : couleurs des 4 nuances Marine — */
.cozy-strip-lune .strip-grid { gap: 14px; }
.cozy-strip-lune .strip-card {
aspect-ratio: 4 / 5; /* plus compact que 3:4 */
display: flex;
flex-direction: column;
padding: 16px 16px 18px;
}
.cozy-strip-lune .strip-card .strip-art {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0;
position: relative;
}
.cozy-strip-lune .strip-card .strip-art svg {
width: 70%;
height: auto;
max-height: 140px;
display: block;
}
.cozy-strip-lune .strip-card .ed-name {
position: static;
bottom: auto;
left: auto;
right: auto;
margin-top: 6px;
}
.cozy-strip-lune .strip-card .ed-product,
.cozy-strip-lune .strip-card .ed-price {
position: static;
bottom: auto;
left: auto;
right: auto;
display: inline-block;
}
.cozy-strip-lune .strip-card .ed-product { margin-right: auto; }
.cozy-strip-lune .strip-card .ed-price {
float: right;
margin-top: -14px;
}
.cozy-strip-lune .strip-card.nuance-brume { background: #3C3F58; }
.cozy-strip-lune .strip-card.nuance-aube { background: #2C2F4A; }
.cozy-strip-lune .strip-card.nuance-lune { background: #1B2240; }
.cozy-strip-lune .strip-card.nuance-lagon { background: #11152A; }
.cozy-strip-lune .strip-card .ed-num,
.cozy-strip-lune .strip-card .ed-product,
.cozy-strip-lune .strip-card .ed-price { color: var(--cozy-highlight); }
.cozy-strip-lune .strip-card .ed-name { color: var(--cozy-page); }
.cozy-strip-lune .strip-card.is-current::after {
content: "★ COURANT";
position: absolute;
top: 14px; right: 14px;
font-family: var(--cozy-font-mono);
font-size: 9px;
letter-spacing: 0.2em;
color: var(--cozy-highlight);
}
/* — Story Lune : accent en laiton — */
.cozy-lune .cozy-story-section .story-aside strong em {
color: var(--cozy-accent);
}
.cozy-lune .cozy-story-section .story-body::before,
.cozy-lune .cozy-story-section .story-body::after {
color: var(--cozy-accent);
}
/* — Editions strip : fond plus clair sur Lune — */
.cozy-lune .cozy-editions-strip {
background: var(--cozy-page-lt);
border-top: 1px solid var(--cozy-line);
border-bottom: 1px solid var(--cozy-line);
}
/* — Marquee Lune : fond midnight + accent laiton — */
.cozy-lune .cozy-marquee {
background: var(--cozy-panel);
color: var(--cozy-page);
}
.cozy-lune .cozy-marquee-track .sep { color: var(--cozy-accent); }
/* — Tag édition couleur laiton — */
.cozy-lune .cozy-edition-tag { color: var(--cozy-accent); }
.cozy-lune .cozy-hero-text em { color: var(--cozy-accent); }
/* — Logo wordmark italique fin sur Lune — */
.cozy-lune #_desktop_logo,
.cozy-lune .header-logo .cozy-logo,
body.page-index .header-logo .cozy-logo {
font-family: var(--cozy-font-display);
font-size: 36px;
letter-spacing: 0.06em;
color: var(--cozy-ink);
font-weight: 400;
}
/* — PDP V2 Stella — overrides spécifiques — */
.cozy-pdp {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
min-height: 720px;
margin: 0;
padding: 0;
background: var(--cozy-page);
}
.cozy-pdp-gallery {
padding: 36px;
display: flex;
flex-direction: column;
min-height: 720px;
position: relative;
}
.cozy-pdp-gallery .fig-label,
.cozy-pdp-gallery .fig-page {
z-index: 2;
}
.cozy-pdp-gallery .pdp-art {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
z-index: 1;
}
.cozy-pdp-gallery .pdp-art svg,
.cozy-pdp-gallery .pdp-art .pdp-cover-img {
width: 100%;
height: auto;
max-height: 520px;
object-fit: contain;
}
.cozy-pdp-gallery .pdp-thumbs {
display: flex;
gap: 10px;
margin-top: 18px;
z-index: 2;
position: relative;
}
.cozy-pdp-gallery .pdp-thumb {
width: 64px;
height: 64px;
background: var(--cozy-panel-dk);
border: 0.5px solid rgba(255,255,255,0.15);
display: block;
overflow: hidden;
transition: border-color 200ms ease, transform 200ms ease;
}
.cozy-pdp-gallery .pdp-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
}
.cozy-pdp-gallery .pdp-thumb.is-current,
.cozy-pdp-gallery .pdp-thumb:hover {
border-color: var(--cozy-highlight);
transform: translateY(-2px);
}
.cozy-pdp-gallery .pdp-thumb.is-current img,
.cozy-pdp-gallery .pdp-thumb:hover img { opacity: 1; }
.cozy-pdp-buy {
padding: 56px 56px 64px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cozy-pdp-buy .pdp-tagline {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 20px;
color: var(--cozy-graphite);
margin: -4px 0 4px;
}
.cozy-pdp-buy .pdp-desc {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.7;
color: var(--cozy-graphite);
max-width: 480px;
}
.cozy-pdp-buy .pdp-desc p { margin: 0 0 0.6em; }
.cozy-pdp-buy .pdp-form { margin: 0; padding: 0; }
.cozy-pdp-buy .pdp-finitions {
margin: 4px 0 8px;
}
.cozy-pdp-buy .pdp-finition {
text-decoration: none;
cursor: pointer;
}
.cozy-pdp-buy .pdp-finition:hover {
border-color: var(--cozy-ink);
}
/* Description longue */
.cozy-pdp-detail {
background: var(--cozy-page-lt);
padding: 80px 56px;
border-top: 1px solid var(--cozy-line);
}
.cozy-pdp-detail .pdp-detail-inner {
max-width: 720px;
margin: 0 auto;
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.75;
color: var(--cozy-graphite);
}
.cozy-pdp-detail .pdp-detail-inner .cozy-tag {
margin-bottom: 24px;
display: block;
}
.cozy-pdp-detail .pdp-detail-inner p { margin: 0 0 1em; }
.cozy-pdp-detail .pdp-detail-inner em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-accent);
}
/* — Mobile Lune — */
@media (max-width: 991px) {
.cozy-pdp { grid-template-columns: 1fr; min-height: auto; }
.cozy-pdp-gallery { min-height: 480px; padding: 24px; }
.cozy-pdp-buy { padding: 32px 20px 48px; }
.cozy-pdp-detail { padding: 48px 20px; }
.cozy-hero-lune { padding: 28px 20px 16px; gap: 24px; }
.cozy-hero-lune h1.hero-title { font-size: clamp(48px, 13vw, 96px); }
.cozy-panel-night { aspect-ratio: 4 / 5; }
.cozy-panel-night .panel-info .product-name { font-size: 32px; }
.cozy-strip-lune .strip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.cozy-hero-lune h1.hero-title { font-size: clamp(40px, 15vw, 72px); }
.cozy-panel-night .panel-info .product-name { font-size: 26px; }
.cozy-stars-bg { display: none; }
}
/* ================================================================
* 23. Header v3 — utility-bar + nav 4-cols + wordmark Italiana
* ================================================================ */
/* — Utility bar : promesse + sélecteurs FR/€ — */
.header-utility {
padding: 9px 56px;
border-bottom: 0.5px solid var(--cozy-line);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--cozy-smoke);
text-transform: uppercase;
background: transparent;
position: relative;
/* Fondu doux H seul — la bar est transparente, pas de bord V à adoucir */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
rgba(0,0,0,0.45) 30px,
#000 80px,
#000 calc(100% - 80px),
rgba(0,0,0,0.45) calc(100% - 30px),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
rgba(0,0,0,0.45) 30px,
#000 80px,
#000 calc(100% - 80px),
rgba(0,0,0,0.45) calc(100% - 30px),
transparent 100%
);
}
.header-utility .util-promise { color: var(--cozy-smoke); }
.header-utility .util-meta {
display: flex;
gap: 18px;
}
.header-utility .util-meta a {
color: var(--cozy-smoke);
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.header-utility .util-meta a:hover { color: var(--cozy-accent); }
/* — Main header bar : grid 1fr auto 1fr (nav-l | logo | nav-r) — */
#header .header-top {
padding: 20px 56px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
background: transparent;
}
#header .header-nav-left {
display: flex;
gap: 28px;
justify-content: flex-start;
}
#header .header-nav-right {
display: flex;
gap: 22px;
justify-content: flex-end;
}
#header .nav-link {
font-family: var(--cozy-font-body);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-smoke);
padding: 6px 0;
transition: color 150ms ease;
}
#header .nav-link:hover { color: var(--cozy-ink); }
#header .nav-link.is-active { color: var(--cozy-ink); font-weight: 500; }
#header .nav-link.cart-preview-link {
color: var(--cozy-accent);
font-weight: 600;
}
#header .nav-link.cart-preview-link:hover { color: var(--cozy-accent); }
/* — Wordmark "cozy" centré Italiana — */
#header .header-logo {
text-align: center;
}
#header .header-logo a,
#header .header-wordmark-link {
display: inline-block;
text-decoration: none;
line-height: 1;
}
#header .header-logo .cozy-logo,
#header .cozy-logo {
font-family: var(--cozy-font-display);
font-size: 36px;
letter-spacing: 0.06em;
color: var(--cozy-ink);
font-weight: 400;
line-height: 1;
}
/* Si une image logo est forcée par PrestaShop, on la cache sur la home pour laisser le wordmark */
body.page-index #header .header-logo img,
body.page-index #header #_desktop_logo img {
display: none;
}
/* Sur les autres pages, on permet l'image MAIS on la rétrécit pour ne pas casser le grid */
#header .header-logo img {
max-height: 36px;
width: auto;
}
/* — Mobile header — */
.header-mobile {
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.5px solid var(--cozy-line);
}
.header-mobile-toggle {
background: transparent;
border: none;
color: var(--cozy-ink);
padding: 8px;
cursor: pointer;
}
.header-mobile-logo .cozy-logo {
font-family: var(--cozy-font-display);
font-size: 28px;
letter-spacing: 0.05em;
color: var(--cozy-ink);
}
.header-mobile-cart {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--cozy-accent);
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
}
/* — Mobile breakpoints header — */
@media (max-width: 991px) {
.header-utility { display: none !important; }
#header .header-top { display: none; }
.header-mobile { display: flex !important; }
}
@media (min-width: 992px) {
.header-mobile { display: none !important; }
}
/* — Page non-home : restaurer header en mode "compact" — */
body:not(.page-index) #header {
background: var(--cozy-page);
}
/* ================================================================
* 24. Journal — page index catégorie CMS Stella
* ================================================================ */
.cozy-journal-index {
max-width: 1320px;
margin: 0 auto;
padding: 40px 56px 80px;
}
.cozy-journal-hero {
padding: 36px 0 56px;
border-bottom: 1px solid var(--cozy-ink);
margin-bottom: 56px;
}
.cozy-journal-hero .cozy-edition-tag {
margin-bottom: 20px;
font-size: 11px;
display: block;
}
.cozy-journal-title {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(56px, 8vw, 132px);
line-height: 0.92;
letter-spacing: -0.025em;
color: var(--cozy-ink);
margin: 0;
}
.cozy-journal-title em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-accent);
}
.cozy-journal-desc,
.cozy-journal-desc-fallback {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 20px;
line-height: 1.55;
color: var(--cozy-graphite);
max-width: 640px;
margin: 28px 0 0;
}
.cozy-journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 0.5px solid var(--cozy-line);
}
.cozy-journal-card {
border-right: 0.5px solid var(--cozy-line);
border-bottom: 0.5px solid var(--cozy-line);
padding: 0;
background: transparent;
transition: background 250ms ease;
}
.cozy-journal-card:nth-child(3n) { border-right: none; }
.cozy-journal-card:hover { background: var(--cozy-page-lt); }
.cozy-journal-card-link {
display: block;
padding: 24px;
text-decoration: none;
color: inherit;
height: 100%;
}
.cozy-journal-thumb {
aspect-ratio: 4/3;
margin-bottom: 18px;
display: block;
}
.cozy-journal-card.cozy-thumb-midnight .cozy-journal-thumb { background: var(--cozy-panel); }
.cozy-journal-card.cozy-thumb-soft .cozy-journal-thumb { background: var(--cozy-card); }
.cozy-journal-card.cozy-thumb-page-lt .cozy-journal-thumb {
background: var(--cozy-page-lt);
border: 0.5px solid var(--cozy-line);
}
.cozy-journal-tag {
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-accent);
margin-bottom: 10px;
}
.cozy-journal-card-title {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--cozy-ink);
margin: 0 0 12px;
min-height: 60px;
}
.cozy-journal-card-excerpt {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 14px;
line-height: 1.6;
color: var(--cozy-smoke);
margin: 0 0 18px;
}
.cozy-journal-card-cta {
font-family: var(--cozy-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-accent);
transition: transform 200ms ease;
}
.cozy-journal-card:hover .cozy-journal-card-cta {
transform: translateX(4px);
}
.cozy-journal-empty {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 20px;
color: var(--cozy-graphite);
text-align: center;
padding: 80px 0;
}
.cozy-journal-product-cta {
margin-top: 80px;
padding: 56px 64px;
background: var(--cozy-page-lt);
border-top: 1px solid var(--cozy-ink);
border-bottom: 1px solid var(--cozy-ink);
text-align: center;
}
.cozy-journal-product-cta .cozy-edition-tag {
display: block;
margin-bottom: 18px;
font-size: 11px;
}
.cozy-journal-product-cta h3 {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(28px, 3vw, 44px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--cozy-ink);
margin: 0 auto 28px;
max-width: 640px;
}
.cozy-journal-product-cta .btn { display: inline-block; }
@media (max-width: 991px) {
.cozy-journal-index { padding: 24px 20px 56px; }
.cozy-journal-grid { grid-template-columns: repeat(2, 1fr); }
.cozy-journal-card:nth-child(3n) { border-right: 0.5px solid var(--cozy-line); }
.cozy-journal-card:nth-child(2n) { border-right: none; }
.cozy-journal-product-cta { padding: 40px 24px; margin-top: 48px; }
}
@media (max-width: 575px) {
.cozy-journal-grid { grid-template-columns: 1fr; }
.cozy-journal-card { border-right: none !important; }
.cozy-journal-title { font-size: clamp(40px, 12vw, 80px); }
}
/* ================================================================
* 25. Article CMS — tag Stella au-dessus + navigation retour
* ================================================================ */
.cozy-article-tag {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-accent);
margin-bottom: 28px;
display: block;
}
.cozy-article-tag a {
color: var(--cozy-accent);
text-decoration: none;
border: none;
transition: opacity 200ms ease;
}
.cozy-article-tag a:hover {
opacity: 0.7;
color: var(--cozy-accent);
}
.cozy-article-nav {
margin-top: 56px;
padding-top: 32px;
border-top: 0.5px solid var(--cozy-line);
display: flex;
justify-content: center;
}
.cozy-article-nav-back {
font-family: var(--cozy-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-accent);
text-decoration: none;
padding: 12px 24px;
border: 0.5px solid var(--cozy-line);
transition: all 200ms ease;
}
.cozy-article-nav-back:hover {
background: var(--cozy-ink);
color: var(--cozy-page);
border-color: var(--cozy-ink);
transform: translateX(-3px);
}
/* ── Meta article (dates publication + lecture) ── */
.cozy-article-meta {
font-family: var(--cozy-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cozy-smoke);
margin: 8px 0 32px;
padding-bottom: 24px;
border-bottom: 0.5px solid var(--cozy-line);
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.cozy-article-meta time {
color: var(--cozy-ink);
font-weight: 500;
}
.cozy-article-meta .cozy-article-sep {
color: var(--cozy-line);
margin: 0 4px;
}
.cozy-article-meta .cozy-article-read {
color: var(--cozy-accent);
}
/* ── TOC sticky desktop ── */
.cozy-article-toc {
display: none;
}
@media (min-width: 1280px) {
.page-content--cms { position: relative; }
.cozy-article-toc {
display: block;
position: fixed;
top: 140px;
left: calc((100vw - 760px) / 2 - 280px);
width: 240px;
max-height: calc(100vh - 200px);
overflow-y: auto;
padding-right: 12px;
z-index: 5;
}
.cozy-article-toc::-webkit-scrollbar { width: 4px; }
.cozy-article-toc::-webkit-scrollbar-thumb {
background: var(--cozy-line);
border-radius: 2px;
}
}
.cozy-article-toc-label {
font-family: var(--cozy-font-mono);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cozy-accent);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 0.5px solid var(--cozy-line);
}
.cozy-toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cozy-toc-list li {
padding: 0;
margin: 0;
}
.cozy-toc-list a {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 13px;
letter-spacing: 0.01em;
line-height: 1.4;
color: var(--cozy-smoke);
text-decoration: none;
display: block;
padding: 4px 0 4px 12px;
border-left: 1.5px solid transparent;
transition: all 200ms ease;
}
.cozy-toc-list a:hover {
color: var(--cozy-ink);
border-left-color: var(--cozy-line);
padding-left: 14px;
}
.cozy-toc-list a.is-current {
color: var(--cozy-accent);
border-left-color: var(--cozy-accent);
font-weight: 500;
padding-left: 14px;
}
/* CTA produit en bas d'article — déjà inséré via .cozy-cta-product dans le content */
.cozy-cta-product {
margin: 56px 0 0;
padding: 32px 0;
border-top: 1px solid var(--cozy-line);
text-align: center;
}
.cozy-cta-product a {
display: inline-block;
font-family: var(--cozy-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cozy-page);
background: var(--cozy-ink);
padding: 16px 28px;
text-decoration: none;
border: none;
transition: all 200ms ease;
}
.cozy-cta-product a:hover {
background: var(--cozy-accent);
transform: translateY(-2px);
}
.cozy-cta-product a strong {
font-weight: 600;
color: inherit;
}
body:not(.page-index) .header-utility {
/* on garde l'utility-bar sur toutes les pages desktop */
}
/* ================================================================
* 26. PDP V3 — fiche produit complete Stella Lune
* ================================================================ */
.cozy-pdp-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 0 56px 80px;
}
/* Breadcrumb */
.cozy-pdp-breadcrumb {
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-smoke);
padding: 24px 0 28px;
}
.cozy-pdp-breadcrumb a { color: var(--cozy-smoke); text-decoration: none; }
.cozy-pdp-breadcrumb a:hover { color: var(--cozy-accent); }
.cozy-pdp-breadcrumb .sep { margin: 0 8px; color: var(--cozy-line); }
.cozy-pdp-breadcrumb .current { color: var(--cozy-ink); }
/* Hero grid */
.cozy-pdp {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
border: 0.5px solid var(--cozy-line);
}
.cozy-pdp-gallery {
padding: 32px;
display: flex;
flex-direction: column;
min-height: 620px;
position: relative;
}
.cozy-pdp-gallery .pdp-art {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
position: relative;
z-index: 1;
}
.cozy-pdp-gallery .pdp-art svg,
.cozy-pdp-gallery .pdp-cover-img {
width: 100%;
height: auto;
max-height: 460px;
object-fit: contain;
}
.cozy-pdp-gallery .pdp-thumbs {
display: flex;
gap: 10px;
margin-top: 16px;
position: relative;
z-index: 2;
}
.cozy-pdp-gallery .pdp-thumb {
width: 60px; height: 60px;
border: 0.5px solid rgba(255,255,255,0.18);
overflow: hidden;
cursor: pointer;
transition: border-color 200ms ease;
}
.cozy-pdp-gallery .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.cozy-pdp-gallery .pdp-thumb.is-current,
.cozy-pdp-gallery .pdp-thumb:hover { border-color: var(--cozy-highlight); }
.cozy-pdp-gallery .pdp-thumb.is-current img { opacity: 1; }
/* Buy panel */
.cozy-pdp-buy {
padding: 48px 48px;
display: flex;
flex-direction: column;
gap: 14px;
background: var(--cozy-page);
}
.cozy-pdp-buy .pdp-sku {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cozy-accent);
}
.cozy-pdp-buy h1 {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(48px, 5.5vw, 84px);
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--cozy-ink);
margin: 0;
}
.cozy-pdp-buy .pdp-tagline {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 19px;
color: var(--cozy-graphite);
margin: -2px 0 6px;
}
.cozy-pdp-buy .pdp-price-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
padding: 6px 0 10px;
}
.cozy-pdp-buy .pdp-price {
font-family: var(--cozy-font-display);
font-size: 42px;
color: var(--cozy-ink);
}
.cozy-pdp-buy .pdp-price-info {
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cozy-smoke);
}
.cozy-pdp-buy .pdp-block { margin: 4px 0; }
.cozy-pdp-buy .pdp-block-label { display: block; margin-bottom: 10px; }
.cozy-pdp-buy .pdp-finitions { display: flex; gap: 8px; flex-wrap: wrap; }
.cozy-pdp-buy .pdp-finition {
display: flex; align-items: center; gap: 8px;
padding: 9px 13px;
border: 0.5px solid var(--cozy-line);
background: transparent;
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--cozy-ink);
text-decoration: none;
text-transform: uppercase;
transition: border-color 200ms ease;
}
.cozy-pdp-buy .pdp-finition:hover { border-color: var(--cozy-ink); }
.cozy-pdp-buy .pdp-finition .swatch {
width: 14px; height: 14px;
border: 0.5px solid var(--cozy-ink);
display: inline-block;
}
.cozy-pdp-buy .pdp-desc {
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.7;
color: var(--cozy-graphite);
}
.cozy-pdp-buy .pdp-desc p { margin: 0 0 0.6em; }
/* Form add-to-cart */
.cozy-pdp-buy .pdp-form { margin: 8px 0 0; }
.cozy-pdp-buy .pdp-buy-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.pdp-qty {
display: flex;
align-items: center;
border: 0.5px solid var(--cozy-ink);
}
.pdp-qty-btn {
width: 42px;
background: transparent;
border: none;
color: var(--cozy-ink);
font-size: 18px;
cursor: pointer;
padding: 0;
transition: background 150ms ease;
}
.pdp-qty-btn:hover { background: var(--cozy-page-lt); }
.pdp-qty-input {
width: 44px;
text-align: center;
border: none;
border-left: 0.5px solid var(--cozy-line);
border-right: 0.5px solid var(--cozy-line);
background: transparent;
font-family: var(--cozy-font-mono);
font-size: 14px;
color: var(--cozy-ink);
-moz-appearance: textfield;
padding: 13px 0;
}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cozy-pdp-buy .pdp-add {
flex: 1;
background: var(--cozy-ink);
color: var(--cozy-page);
border: none;
padding: 18px 22px;
font-family: var(--cozy-font-body);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: background 200ms ease;
}
.cozy-pdp-buy .pdp-add:hover { background: var(--cozy-accent); }
.cozy-pdp-buy .pdp-wishlink {
margin-top: 10px;
background: transparent;
border: none;
color: var(--cozy-smoke);
font-family: var(--cozy-font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
padding: 4px 0;
text-align: left;
transition: color 200ms ease;
}
.cozy-pdp-buy .pdp-wishlink:hover { color: var(--cozy-accent); }
/* Facts */
.cozy-pdp-buy .pdp-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 0.5px solid var(--cozy-line);
margin-top: 18px;
padding-top: 18px;
}
.cozy-pdp-buy .pdp-fact .fact-label {
font-family: var(--cozy-font-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cozy-accent);
}
.cozy-pdp-buy .pdp-fact .fact-value {
font-family: var(--cozy-font-body);
font-size: 13px;
color: var(--cozy-ink);
margin-top: 4px;
}
/* Bande reassurance */
.cozy-pdp-reassurance {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 0.5px solid var(--cozy-line);
border-top: none;
}
.cozy-pdp-reassurance .reassur-item {
padding: 28px 20px;
text-align: center;
border-right: 0.5px solid var(--cozy-line);
}
.cozy-pdp-reassurance .reassur-item:last-child { border-right: none; }
.cozy-pdp-reassurance .reassur-item svg {
width: 30px; height: 30px;
color: var(--cozy-accent);
margin-bottom: 12px;
}
.cozy-pdp-reassurance .reassur-title {
font-family: var(--cozy-font-display);
font-size: 19px;
color: var(--cozy-ink);
}
.cozy-pdp-reassurance .reassur-sub {
font-family: var(--cozy-font-mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cozy-smoke);
margin-top: 5px;
}
/* Accordeons */
.cozy-pdp-accordions {
margin-top: 56px;
max-width: 820px;
}
.pdp-accordion {
border-top: 1px solid var(--cozy-ink);
}
.pdp-accordion:last-child { border-bottom: 1px solid var(--cozy-ink); }
.pdp-accordion summary {
list-style: none;
cursor: pointer;
padding: 22px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary .cozy-tag { font-size: 12px; }
.pdp-accordion .acc-icon {
width: 14px; height: 14px;
position: relative;
flex-shrink: 0;
}
.pdp-accordion .acc-icon::before,
.pdp-accordion .acc-icon::after {
content: "";
position: absolute;
background: var(--cozy-accent);
}
.pdp-accordion .acc-icon::before { left: 0; top: 6px; width: 14px; height: 1.5px; }
.pdp-accordion .acc-icon::after { left: 6px; top: 0; width: 1.5px; height: 14px; transition: transform 200ms ease; }
.pdp-accordion[open] .acc-icon::after { transform: rotate(90deg); opacity: 0; }
.pdp-accordion .acc-body {
padding: 0 0 26px;
font-family: var(--cozy-font-body);
font-weight: 300;
font-size: 15px;
line-height: 1.75;
color: var(--cozy-graphite);
}
.pdp-accordion .acc-body p { margin: 0 0 0.8em; }
.pdp-accordion .acc-body ul { margin: 0; padding: 0; list-style: none; }
.pdp-accordion .acc-body li {
padding: 5px 0 5px 20px;
position: relative;
}
.pdp-accordion .acc-body li::before {
content: "—";
position: absolute; left: 0;
color: var(--cozy-accent);
}
.pdp-accordion .acc-body a {
color: var(--cozy-ink);
text-decoration: underline;
text-decoration-color: var(--cozy-line);
text-underline-offset: 3px;
}
.pdp-accordion .acc-body a:hover { color: var(--cozy-accent); }
/* Cross-sell collection */
.cozy-pdp-collection {
margin-top: 80px;
padding-top: 56px;
border-top: 1px solid var(--cozy-ink);
}
.cozy-pdp-collection .collection-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 32px;
}
.cozy-pdp-collection .collection-title {
font-family: var(--cozy-font-display);
font-weight: 400;
font-size: clamp(34px, 4vw, 56px);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--cozy-ink);
margin: 0;
}
.cozy-pdp-collection .collection-title em {
font-family: var(--cozy-font-italic);
font-style: italic;
color: var(--cozy-accent);
}
.cozy-pdp-collection .collection-sub {
font-family: var(--cozy-font-italic);
font-style: italic;
font-size: 16px;
color: var(--cozy-graphite);
max-width: 320px;
margin: 0;
}
.cozy-pdp-collection .collection-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cozy-pdp-collection .collection-card {
display: block;
text-decoration: none;
transition: transform 250ms ease;
}
.cozy-pdp-collection .collection-card:hover { transform: translateY(-4px); }
.cozy-pdp-collection .cc-art {
aspect-ratio: 4/5;
position: relative;
padding: 14px;
}
.cozy-pdp-collection .nuance-brume .cc-art { background: #3C3F58; }
.cozy-pdp-collection .nuance-aube .cc-art { background: #2C2F4A; }
.cozy-pdp-collection .nuance-lune .cc-art { background: #1B2240; }
.cozy-pdp-collection .nuance-lagon .cc-art { background: #11152A; }
.cozy-pdp-collection .cc-num {
font-family: var(--cozy-font-mono);
font-size: 9.5px;
letter-spacing: 0.2em;
color: var(--cozy-highlight);
}
.cozy-pdp-collection .cc-name {
font-family: var(--cozy-font-display);
font-size: 24px;
color: var(--cozy-ink);
margin-top: 10px;
}
.cozy-pdp-collection .cc-price {
font-family: var(--cozy-font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--cozy-smoke);
margin-top: 3px;
}
/* Avis clients */
.cozy-pdp-reviews {
margin-top: 72px;
padding-top: 40px;
border-top: 1px solid var(--cozy-ink);
}
.cozy-pdp-reviews .comments,
.cozy-pdp-reviews #product-comments-list { font-family: var(--cozy-font-body); }
/* Mobile PDP V3 */
@media (max-width: 991px) {
.cozy-pdp-wrap { padding: 0 20px 56px; }
.cozy-pdp { grid-template-columns: 1fr; }
.cozy-pdp-gallery { min-height: 420px; padding: 24px; }
.cozy-pdp-buy { padding: 32px 24px; }
.cozy-pdp-reassurance { grid-template-columns: repeat(2, 1fr); }
.cozy-pdp-reassurance .reassur-item:nth-child(2) { border-right: none; }
.cozy-pdp-reassurance .reassur-item:nth-child(1),
.cozy-pdp-reassurance .reassur-item:nth-child(2) { border-bottom: 0.5px solid var(--cozy-line); }
.cozy-pdp-collection .collection-grid { grid-template-columns: repeat(2, 1fr); }
.cozy-pdp-collection .collection-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 575px) {
.cozy-pdp-reassurance { grid-template-columns: 1fr; }
.cozy-pdp-reassurance .reassur-item { border-right: none; border-bottom: 0.5px solid var(--cozy-line); }
.cozy-pdp-collection .collection-grid { grid-template-columns: 1fr; }
.cozy-pdp-buy h1 { font-size: clamp(40px, 11vw, 60px); }
}
/* PDP V3 — masquer le breadcrumb natif PS (on a le nôtre dans le template) */
body#product .breadcrumb__wrapper,
body#product nav.breadcrumb,
body#product .breadcrumb {
display: none !important;
}