/* =====================================================================
STAN & CO — Custom theme styles (Figma pixel-perfect integration)
Built on Hummingbird (PrestaShop 9). Loaded globally via head.tpl.
Design reference: Figma "Stan & Co - Lien Client" (frame Accueil 1440px)
===================================================================== */
/* ----------------------------------------------------------------- */
/* 1. DESIGN TOKENS */
/* ----------------------------------------------------------------- */
:root {
/* Palette */
--sc-bg: #F9F6F1; /* page cream */
--sc-bg-beige: #EFE7DA; /* warm beige section (face guide) */
--sc-navy: #0B1937; /* dark brand navy */
--sc-navy-deep: #081229;
--sc-gold: #C2A46A; /* brand gold (buttons / espace pro) */
--sc-gold-dark: #B08A4A;
--sc-copper: #C0853D; /* text links / arrows */
--sc-heading: #0B1937; /* serif headings on light bg */
--sc-text: #4B4843; /* body text on light bg */
--sc-text-soft: #6F6A63;
--sc-line: #E7DFD2; /* hairline borders */
--sc-white: #FFFFFF;
/* Typography — swap --sc-serif to real "Granjon LT" if licensed */
--sc-serif: "Cormorant Garamond", "Granjon LT", "Times New Roman", Georgia, serif;
--sc-sans: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Layout */
--sc-container: 1344px; /* Figma content 1280px + 2×32px gutters (frame 1440, marges 80px) */
--sc-gutter: 32px;
}
/* ----------------------------------------------------------------- */
/* 2. BASE / RESET (scoped to home + custom blocks) */
/* ----------------------------------------------------------------- */
body#index {
background: var(--sc-bg);
font-family: var(--sc-sans);
color: var(--sc-text);
}
/* Neutralise le wrapper Bootstrap par défaut sur la home (sections full-bleed) */
body#index #wrapper,
body#index .wrapper { padding: 0; }
body#index #main-content { display: none; }
body#index .page-content--home { overflow: clip; display: block; } /* kill hummingbird grid gap 40px (Figma: 104px gérés par sections) */
.sc-home * { box-sizing: border-box; }
.sc-home img { max-width: 100%; display: block; }
.sc-home a { text-decoration: none; color: inherit; }
/* Conteneur centré pixel-perfect */
.sc-container {
width: 100%;
max-width: var(--sc-container);
margin-inline: auto;
padding-inline: var(--sc-gutter);
}
/* ----------------------------------------------------------------- */
/* 3. HELPERS TYPO (réutilisables) */
/* ----------------------------------------------------------------- */
.sc-eyebrow {
font-family: var(--sc-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sc-gold-dark);
margin: 0 0 14px;
}
.sc-h2 {
font-family: var(--sc-serif);
font-weight: 600;
font-size: 48px;
line-height: 1.1;
letter-spacing: .01em;
color: var(--sc-heading);
margin: 0;
}
.sc-sub {
font-family: var(--sc-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--sc-text-soft);
margin: 18px 0 0;
}
.sc-section-head { text-align: center; max-width: 760px; margin-inline: auto; }
/* Home (Figma frame Accueil) : labels 10px, sous-titres 16px #3D4352, têtes ~840px */
.sc-home .sc-eyebrow { font-weight: 500; font-size: 10px; letter-spacing: .16em; margin: 0 0 8px; }
.sc-home .sc-sub { font-size: 16px; color: #3D4352; margin-top: 16px; }
.sc-home .sc-section-head { max-width: 880px; }
/* ----------------------------------------------------------------- */
/* 4. BOUTONS */
/* ----------------------------------------------------------------- */
.sc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--sc-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: .08em; /* Figma Button component */
text-transform: uppercase;
padding: 15px 34px 14px;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
transition: all .25s ease;
white-space: nowrap;
}
.sc-btn.sc-btn--gold { background: var(--sc-gold); color: #fff; }
.sc-btn.sc-btn--gold:hover { background: var(--sc-gold-dark); color: #fff; }
.sc-btn.sc-btn--dark { background: var(--sc-navy); color: #fff; }
.sc-btn.sc-btn--dark:hover { background: var(--sc-navy-deep); color: #fff; }
.sc-btn.sc-btn--light { background: #fff; color: var(--sc-navy); }
.sc-btn.sc-btn--light:hover{ background: #f1ece3; color: var(--sc-navy); }
.sc-btn.sc-btn--outline-dark { background: transparent; color: var(--sc-navy); border-color: var(--sc-navy); }
.sc-btn.sc-btn--outline-dark:hover { background: var(--sc-navy); color: #fff; }
.sc-btn.sc-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.sc-btn.sc-btn--outline-light:hover { background: #fff; color: var(--sc-navy); }
.sc-btn.sc-btn--outline-gold { background: transparent; color: var(--sc-gold-dark); border-color: var(--sc-gold); }
.sc-btn.sc-btn--outline-gold:hover { background: var(--sc-gold); color: #fff; }
/* Lien fléché type "Voir les solaires →" */
.sc-arrow-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; letter-spacing: .02em;
color: var(--sc-copper);
}
.sc-arrow-link svg, .sc-arrow-link i { transition: transform .25s ease; }
.sc-arrow-link:hover svg, .sc-arrow-link:hover i { transform: translateX(4px); }
/* ----------------------------------------------------------------- */
/* 5. HEADER (announcement bar + navigation) */
/* ----------------------------------------------------------------- */
#header { position: relative; z-index: 60; border: 0; box-shadow: none; }
.sc-header { font-family: var(--sc-sans); }
/* Announcement bar */
.sc-topbar { background: var(--sc-navy); color: #fff; }
.sc-topbar__inner {
display: flex; align-items: center; justify-content: center;
gap: 14px; height: 50px; font-size: 14px; letter-spacing: .01em; /* Figma: barre 50px */
}
.sc-topbar__dot { opacity: .55; }
.sc-topbar__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sc-topbar__link:hover { color: var(--sc-gold); }
/* Nav bar */
.sc-nav { background: var(--sc-navy); transition: background .3s ease, box-shadow .3s ease; }
.sc-nav__inner {
display: flex; align-items: center; gap: 32px;
max-width: 1440px; margin-inline: auto; padding: 15px 80px; /* Figma nav: 15px 80px */
position: relative;
}
.sc-logo { display: inline-flex; align-items: center; }
.sc-logo__mark { height: 100px; width: auto; } /* Figma: logo 70×100 */
.sc-nav__menu {
display: flex; align-items: center; gap: 32px;
list-style: none; margin: 0 auto; padding: 0;
}
.sc-nav__link {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255,255,255,.92); font-size: 15px; font-weight: 400;
letter-spacing: .01em; padding: 6px 0; position: relative; transition: color .2s;
}
.sc-nav__link:hover { color: #fff; }
.sc-nav__link.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 1.5px; background: currentColor;
}
.sc-caret { opacity: .8; }
.sc-nav__actions { display: flex; align-items: center; gap: 26px; } /* Figma: 32px (icônes + bouton) */
.sc-nav__icon { display: inline-flex; color: #fff; opacity: .92; position: relative; transition: opacity .2s; }
.sc-nav__icon:hover { opacity: 1; }
.sc-nav__cart { margin-right: 4px; }
.sc-nav__badge {
position: absolute; top: -7px; right: -9px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50%;
background: var(--sc-gold); color: #fff; font-size: 10px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.sc-nav__pro { margin-left: 6px; padding: 13px 26px; letter-spacing: .1em; }
/* --- Dropdown submenus (Vue / Soleil → genres) --- */
.sc-nav__item { position: relative; }
.sc-submenu {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
min-width: 196px; margin: 0; padding: 10px 0; list-style: none;
background: #fff; box-shadow: 0 16px 38px rgba(11,25,55,.16);
opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; z-index: 60;
}
.sc-submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.sc-nav__item.sc-has-sub:hover .sc-submenu,
.sc-nav__item.sc-has-sub:focus-within .sc-submenu {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sc-submenu a {
display: block; padding: 9px 26px; font-size: 14px; color: var(--sc-navy);
white-space: nowrap; transition: background .18s, color .18s;
}
.sc-submenu a:hover { background: var(--sc-bg); color: var(--sc-gold); }
.sc-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.sc-burger span { width: 24px; height: 2px; background: #fff; display: block; }
/* --- Home: transparent nav overlaying the hero --- */
body#index .sc-nav {
position: absolute; left: 0; right: 0; top: 50px; z-index: 55;
background: transparent;
border-bottom: .5px solid rgba(255,255,255,.6); /* Figma: 0.5px blanc 60% */
}
/* Scrolled state (added by JS) → solid sticky nav */
body#index #header.sc-header--solid .sc-nav {
position: fixed; top: 0;
background: var(--sc-navy);
border-bottom: 0;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
/* ----------------------------------------------------------------- */
/* 6. HERO */
/* ----------------------------------------------------------------- */
.sc-hero {
position: relative; min-height: 800px;
display: flex; align-items: center; justify-content: center;
text-align: center; color: #fff; overflow: hidden;
}
.sc-hero__slides, .sc-hero__overlay { position: absolute; inset: 0; }
.sc-hero__slide {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.1s ease;
}
.sc-hero__slide.is-active { opacity: 1; }
.sc-hero__overlay { background: rgba(10,13,28,.34); z-index: 2; }
.sc-hero__content { position: relative; z-index: 3; max-width: 900px; padding: 80px 24px 0; }
.sc-hero__logo { height: 98px; width: auto; margin: 0 auto 23px; } /* Figma: gap 23px */
.sc-hero__title {
font-family: var(--sc-serif); font-weight: 700; font-size: 70px;
line-height: 1; letter-spacing: .005em; text-transform: uppercase; margin: 0;
}
.sc-hero__sub {
font-size: 16px; line-height: 1.6; max-width: 800px;
margin: 16px auto 0; color: #fff; /* Figma: 16px, gap 16, blanc */
}
.sc-hero__btns { display: flex; gap: 24px; justify-content: center; margin-top: 32px; } /* Figma: gap 24, ↕32 */
.sc-hero__arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
width: 60px; height: 60px; border-radius: 50%; /* Figma: 60px */
border: .5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.02); color: rgba(255,255,255,.9);
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background .25s, border-color .25s;
}
.sc-hero__arrow:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.sc-hero__arrow--prev { left: 84px; }
.sc-hero__arrow--next { right: 80px; }
/* Figma : points 6px blanc 50%, actif = anneau 13px, gap 16 */
.sc-hero__dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 16px; }
.sc-hero__dot { width: 6px; height: 6px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s; }
.sc-hero__dot.is-active { width: 13px; height: 13px; background: transparent; border: .5px solid #fff; }
/* ----------------------------------------------------------------- */
/* 7. SECTION GENERIC + COLLECTIONS */
/* ----------------------------------------------------------------- */
/* Figma : 104px entre sections (52+52), sections à fond pleine largeur gérées par marges */
.sc-sec { padding: 52px 0; }
.sc-section-head { margin-bottom: 56px; }
.sc-collections { padding-top: 80px; } /* Figma : hero → section 80px */
.sc-collections .sc-section-head { margin-bottom: 48px; }
.sc-collections__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* Figma: gap 32 */
.sc-coll-card { text-align: center; display: block; } /* Figma: cartes centrées */
.sc-coll-card__media { aspect-ratio: 296 / 395; overflow: hidden; background: #eceae6; } /* Figma: 296×395 */
.sc-coll-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.sc-coll-card:hover .sc-coll-card__media img { transform: scale(1.05); }
.sc-coll-card__title {
font-family: var(--sc-serif); font-weight: 500; font-size: 20px; line-height: 1.2;
letter-spacing: .04em; text-transform: uppercase; color: var(--sc-heading);
margin: 20px 0 12px; /* Figma: gaps 20 / 12 */
}
/* ----------------------------------------------------------------- */
/* 8. BEST SELLERS */
/* ----------------------------------------------------------------- */
/* Figma : barre d'onglets 624px, 5 cellules égales, soulignement par cellule */
.sc-tabs {
display: flex; justify-content: center;
max-width: 624px; margin: 0 auto 40px;
}
.sc-tabs__tab {
flex: 1; background: none; border: 0; border-bottom: 1px solid #D8D0C4;
padding: 0 2px 10px; cursor: pointer;
font-family: var(--sc-sans); font-size: 15px; color: var(--sc-text-soft);
position: relative; transition: color .2s;
}
.sc-tabs__tab:hover { color: var(--sc-heading); }
.sc-tabs__tab.is-active { color: var(--sc-heading); font-weight: 600; border-bottom: 2px solid var(--sc-heading); padding-bottom: 9px; }
.sc-bs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* Figma: gap 32 */
.sc-product { background: #fff; }
.sc-product__media {
position: relative; aspect-ratio: 405 / 300; background: #FAFAF8;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sc-product__media img { width: 80%; height: 80%; object-fit: contain; }
.sc-product__actions {
position: absolute; left: 0; right: 0; bottom: 14px;
display: flex; gap: 10px; justify-content: center; align-items: center;
opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s;
}
.sc-product:hover .sc-product__actions { opacity: 1; transform: none; }
.sc-product__icon {
width: 42px; height: 42px; border: 1px solid var(--sc-line); background: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sc-navy);
transition: background .2s, color .2s;
}
.sc-product__icon:hover { background: var(--sc-navy); color: #fff; }
.sc-product__add {
height: 42px; padding: 0 22px; border: 1px solid var(--sc-line); background: #fff;
font-family: var(--sc-sans); font-size: 11px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; cursor: pointer; color: var(--sc-navy); white-space: nowrap;
transition: background .2s, color .2s;
}
.sc-product__add:hover { background: var(--sc-navy); color: #fff; }
.sc-product__body { padding: 22px 16px 26px; text-align: center; }
.sc-product__swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 14px; min-height: 11px; }
.sc-swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(11, 25, 55, .18); background-size: cover; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.sc-swatch--active { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--sc-gold); }
a.sc-swatch:hover, a.sc-swatch:focus-visible { transform: scale(1.35); box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--sc-navy); }
.sc-product__name { font-family: var(--sc-serif); font-weight: 600; font-size: 21px; color: var(--sc-heading); margin: 0 0 8px; }
.sc-product__meta { font-size: 13px; color: var(--sc-text-soft); margin: 0 0 12px; }
.sc-product__price { font-size: 15px; color: var(--sc-copper); font-weight: 500; margin: 0; }
.sc-product__imglink { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sc-product__addform { display: contents; }
.sc-product__name a { color: inherit; text-decoration: none; }
.sc-product__name a:hover { color: var(--sc-copper); }
.sc-bs__empty { grid-column: 1 / -1; text-align: center; color: var(--sc-text-soft); padding: 40px 0; }
.sc-bs__cta { text-align: center; margin-top: 32px; } /* Figma: 32px */
/* shared light-on-dark helpers */
.sc-eyebrow--gold { color: var(--sc-gold); }
.sc-h2--light { color: #fff; }
.sc-p { font-size: 16px; line-height: 1.7; color: var(--sc-text); margin: 20px 0 0; }
.sc-p--light { color: rgba(255,255,255,.78); }
/* ----------------------------------------------------------------- */
/* 9. BANNER (navy presence) */
/* ----------------------------------------------------------------- */
/* Figma : bandeau 1440×700, texte 624px à x=736 */
.sc-banner { background: var(--sc-navy); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; color: #fff; min-height: 700px; margin-block: 52px; }
.sc-banner__media { overflow: hidden; }
.sc-banner__media img { width: 100%; height: 100%; min-height: 700px; object-fit: cover; }
.sc-banner__text { align-self: center; padding: 60px 80px 60px 16px; max-width: 720px; }
.sc-banner__text .sc-h2 { font-size: 50px; line-height: 1.1; margin-top: 8px; } /* Figma: 50px, gap 8 */
.sc-banner__text .sc-p { font-weight: 300; color: #fff; margin-top: 16px; }
.sc-banner__btns { display: flex; gap: 24px; margin-top: 40px; flex-wrap: wrap; } /* Figma: 24 / ↕40 */
/* ----------------------------------------------------------------- */
/* 10. FEATURES */
/* ----------------------------------------------------------------- */
.sc-features { background: var(--sc-bg); }
.sc-features .sc-section-head { margin-bottom: 48px; }
.sc-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sc-feature { background: #FDFDFB; padding: 24px; text-align: center; } /* Figma: #FDFDFB, padding 24 */
.sc-feature__icon {
width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--sc-gold);
color: var(--sc-gold); display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
}
.sc-feature__title { font-family: var(--sc-serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--sc-heading); margin: 0 0 14px; } /* Figma: 26px Medium */
.sc-feature__text { font-size: 14px; line-height: 1.6; color: #3D4352; margin: 0; } /* Figma: 14px #3D4352 */
/* ----------------------------------------------------------------- */
/* 11. PROFILES (Femme / Enfant / Homme) */
/* ----------------------------------------------------------------- */
/* Figma : 3 cartes blanches 405×(535 image + texte), cartes latérales décalées de +100px */
.sc-profiles { background: var(--sc-bg); }
.sc-profiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.sc-profile { display: block; background: #FDFDFC; padding-bottom: 24px; }
.sc-profile__media { overflow: hidden; background: #eceae6; aspect-ratio: 405 / 535; }
.sc-profile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.sc-profile:hover .sc-profile__media img { transform: scale(1.05); }
.sc-profile--tall { margin-top: 100px; } /* Figma : Femme / Homme abaissés de 100px */
.sc-profile__title {
font-family: var(--sc-serif); font-weight: 500; font-size: 24px; line-height: 1.2;
letter-spacing: .02em; text-transform: uppercase; color: var(--sc-heading); margin: 24px 24px 14px;
}
.sc-profile .sc-arrow-link { margin-inline: 24px; }
/* ----------------------------------------------------------------- */
/* 12. UNIVERSE SPLIT (optique / solaire) */
/* ----------------------------------------------------------------- */
.sc-universe .sc-section-head { margin-bottom: 56px; } /* Figma: 56 */
.sc-split { display: grid; grid-template-columns: 616px 1fr; gap: 48px; align-items: center; margin-bottom: 56px; } /* Figma: image 616, gap 48, entre splits 56 */
.sc-split:last-child { margin-bottom: 0; }
.sc-split__media { aspect-ratio: 1 / 1; overflow: hidden; background: #e7e3dc; }
.sc-split__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-split--reverse { grid-template-columns: 1fr 616px; }
.sc-split--reverse .sc-split__media { order: 2; }
.sc-split--reverse .sc-split__text { order: 1; }
.sc-split__text { max-width: 515px; justify-self: center; width: 100%; } /* Figma: colonne texte 515px centrée */
.sc-split__title { font-family: var(--sc-serif); font-weight: 600; font-size: 40px; color: var(--sc-heading); margin: 0 0 4px; }
.sc-split .sc-p { margin-top: 16px; }
.sc-split .sc-btn { margin-top: 32px; }
/* ----------------------------------------------------------------- */
/* 13. FACE SHAPE GUIDE */
/* ----------------------------------------------------------------- */
/* Figma : bande #F0EAE0 padding 70px, cercles 230px #FCFAF8, icônes ~75px, labels 20px */
.sc-faces { background: #F0EAE0; }
.sc-faces.sc-sec { padding: 70px 0; margin-block: 52px; }
.sc-faces__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.sc-face { text-align: center; display: block; }
.sc-face__circle {
width: 100%; max-width: 230px; aspect-ratio: 1 / 1; border-radius: 50%;
background: #FCFAF8; display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px; transition: background .3s ease, transform .3s ease;
}
.sc-face__circle img { width: 33%; height: auto; }
.sc-face:hover .sc-face__circle { background: #fff; transform: translateY(-5px); }
.sc-face__label { font-family: var(--sc-serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--sc-heading); }
/* ----------------------------------------------------------------- */
/* 14. BRAND DNA (navy) */
/* ----------------------------------------------------------------- */
/* Figma : padding 72px, colonnes 624/595 gap 61, image 595×744, stats fond blanc 8% sans bordure */
.sc-dna { background: var(--sc-navy); color: #fff; margin-block: 52px; }
.sc-dna__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 61px; align-items: stretch; padding-block: 72px; }
.sc-dna__text { align-self: center; max-width: 624px; }
.sc-dna .sc-p--light { color: rgba(255,255,255,.6); line-height: 1.6; }
.sc-p--light strong { color: #fff; font-weight: 600; }
.sc-dna__btns { display: flex; gap: 24px; margin-top: 48px; flex-wrap: wrap; } /* Figma: gap 24 / ↕48 */
.sc-dna__stats { display: flex; margin-top: 64px; background: rgba(255,255,255,.08); } /* Figma: ↕64, fond 8%, sans bordure */
.sc-stat { flex: 1; padding: 28px 18px; text-align: center; }
.sc-stat__num { display: block; font-family: var(--sc-serif); font-weight: 500; font-size: 39px; color: #fff; line-height: 1; } /* Figma: 39px Medium */
.sc-stat__label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-top: 8px; } /* Figma: 10px blanc */
.sc-dna__media { overflow: hidden; }
.sc-dna__media img { width: 100%; height: 100%; min-height: 744px; object-fit: cover; } /* Figma: image 744px */
/* ----------------------------------------------------------------- */
/* 15. CONTACT */
/* ----------------------------------------------------------------- */
.sc-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* Figma: gap 64 */
.sc-contact__map { overflow: hidden; aspect-ratio: 608 / 508; background: #F5F5F3; box-shadow: 0 0 16px rgba(0,0,0,.08); } /* Figma: 508px + ombre */
.sc-contact__map img,
.sc-contact__map iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.sc-contact__text { max-width: 560px; }
.sc-contact .sc-p { margin-top: 24px; } /* Figma: titre → texte 24 */
.sc-contact__list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } /* Figma: 32 / 24 */
.sc-contact__row { display: flex; gap: 16px; align-items: flex-start; } /* Figma: 16 */
.sc-contact__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--sc-line); display: flex; align-items: center; justify-content: center; color: var(--sc-navy); }
.sc-contact__k { font-family: var(--sc-sans); font-weight: 600; font-size: 15px; color: var(--sc-heading); margin: 0 0 5px; }
.sc-contact__v { font-size: 15px; color: var(--sc-text); margin: 0; line-height: 1.5; }
.sc-contact__mail { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--sc-text-soft); }
.sc-contact__link { margin-top: 7px; }
.sc-contact__btns { display: flex; gap: 27px; margin-top: 40px; flex-wrap: wrap; } /* Figma: gap 27 / ↕40 */
/* ----------------------------------------------------------------- */
/* 16. INSTAGRAM GALLERY */
/* ----------------------------------------------------------------- */
.sc-ig__gallery { display: grid; grid-template-columns: 636fr 312fr 312fr; grid-template-rows: 395px 395px; gap: 10px; } /* Figma: 636/312/312, rangées 395, gap 10 */
.sc-ig__item { overflow: hidden; display: block; background: #e7e3dc; }
.sc-ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.sc-ig__item:hover img { transform: scale(1.06); }
.sc-ig__item--big { grid-row: 1 / span 2; }
.sc-ig__cta { text-align: center; margin-top: 48px; } /* Figma: 48 */
.sc-ig__cta .sc-arrow-link { text-decoration: underline; text-underline-offset: 5px; }
/* ----------------------------------------------------------------- */
/* 17. TRUST BAR */
/* ----------------------------------------------------------------- */
.sc-trust { background: #FDFDFB; } /* Figma: #FDFDFB, padding 41px, sans bordure */
body#index .sc-trust { margin-top: 52px; } /* Figma: 104px après la galerie IG */
.sc-trust__inner { display: flex; justify-content: space-between; gap: 24px; padding: 41px 0; }
.sc-trust__item { display: flex; align-items: center; gap: 14px; color: #08132A; font-size: 16px; font-weight: 400; }
.sc-trust__item svg { color: var(--sc-gold); flex: 0 0 auto; }
/* ----------------------------------------------------------------- */
/* 18. FOOTER */
/* ----------------------------------------------------------------- */
.sc-footer { background: #08132A; color: #fff; padding-top: 70px; overflow: hidden; } /* Figma: #08132A, 70px */
.sc-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.7fr; gap: 50px; padding-bottom: 52px; }
.sc-footer__logo { height: 76px; width: auto; margin-bottom: 24px; }
.sc-footer__tag { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.62); max-width: 300px; margin: 0; }
.sc-footer__h { font-family: var(--sc-serif); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 22px; line-height: 1.3; }
.sc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-footer__col a { color: rgba(255,255,255,.7); font-size: 15px; transition: color .2s; }
.sc-footer__col a:hover { color: #fff; }
.sc-footer__news-p { font-size: 14px; color: rgba(255,255,255,.6); margin: 0 0 20px; }
.sc-news { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.sc-news__input { background: transparent; border: 1px solid rgba(255,255,255,.25); padding: 14px 16px; color: #fff; font-family: var(--sc-sans); font-size: 14px; }
.sc-news__input::placeholder { color: rgba(255,255,255,.45); }
.sc-news__btn { align-self: flex-start; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 13px 28px; font-family: var(--sc-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.sc-news__btn:hover { background: #fff; color: var(--sc-navy); }
.sc-socials { display: flex; gap: 14px; margin-top: 26px; }
.sc-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; color: #fff; transition: all .2s; }
.sc-socials a:hover { background: #fff; color: var(--sc-navy); }
.sc-footer__divider { height: 1px; background: rgba(255,255,255,.14); }
.sc-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0 36px; font-size: 13px; color: rgba(255,255,255,.55); }
.sc-footer__bottom a { color: rgba(255,255,255,.85); text-decoration: underline; }
.sc-footer__wordmark {
font-family: var(--sc-serif); font-weight: 600; text-align: center;
color: #F9F6F1; font-size: clamp(56px, 15.4vw, 224px); letter-spacing: .03em; /* Figma: #F9F6F1 */
line-height: .92; white-space: nowrap; padding-bottom: 18px;
}
/* override hummingbird default footer wrapper paddings */
#footer { background: transparent; }
#footer .footer { margin: 0; padding: 0; }
/* ================================================================= */
/* 19. RESPONSIVE */
/* ================================================================= */
body#index { overflow-x: hidden; }
/* ---- Large desktop down ---- */
@media (max-width: 1300px) {
:root { --sc-gutter: 28px; }
.sc-banner__text, .sc-dna__inner { padding-inline: 28px; }
}
/* ---- Tablet (<= 991px) ---- */
@media (max-width: 991px) {
.sc-sec { padding: 64px 0; }
.sc-h2 { font-size: 36px; }
.sc-section-head { margin-bottom: 40px; }
/* Header → burger menu */
.sc-burger { display: flex; order: -1; }
.sc-nav__inner { padding: 14px 20px; gap: 12px; }
.sc-logo { margin-right: auto; }
.sc-logo__mark { height: 48px; }
.sc-nav__menu {
position: fixed; inset: 0 auto 0 0; width: 282px; max-width: 84vw;
flex-direction: column; align-items: flex-start; gap: 0; margin: 0;
padding: 96px 28px 28px; background: var(--sc-navy);
transform: translateX(-100%); transition: transform .3s ease; z-index: 200;
}
body.sc-menu-open .sc-nav__menu { transform: none; }
body.sc-menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
.sc-nav__menu li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
.sc-nav__link { padding: 16px 0; font-size: 17px; width: 100%; justify-content: space-between; }
.sc-nav__link.is-active::after { display: none; }
/* Submenus expand inline inside the mobile drawer */
.sc-nav__item.sc-has-sub { flex-direction: column; align-items: flex-start; }
.sc-submenu {
position: static; transform: none; opacity: 1; visibility: visible;
width: 100%; min-width: 0; background: transparent; box-shadow: none;
padding: 0 0 12px;
}
.sc-submenu::before { display: none; }
.sc-submenu li { width: 100%; border-bottom: 0; }
.sc-submenu a { color: rgba(255,255,255,.7); padding: 11px 0 11px 18px; font-size: 15px; }
.sc-submenu a:hover { background: transparent; color: #fff; }
.sc-nav__actions { gap: 16px; }
.sc-nav__pro { display: none; }
.sc-nav__icon[aria-label="Mon compte"], .sc-nav__icon[aria-label="Favoris"] { display: none; }
body#index .sc-nav { border-bottom: 1px solid rgba(255,255,255,.14); }
/* Hero */
.sc-hero { min-height: 600px; }
.sc-hero__title { font-size: 46px; }
.sc-hero__arrow { display: none; }
.sc-hero__content { padding-top: 40px; }
/* Grids collapse */
.sc-collections__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sc-bs__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sc-features__grid { grid-template-columns: repeat(2, 1fr); }
.sc-tabs { gap: 26px; flex-wrap: wrap; }
/* Profiles → no stagger */
.sc-profiles__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.sc-profile--short, .sc-profile--tall { margin-top: 0; }
.sc-profile--tall .sc-profile__media,
.sc-profile--short .sc-profile__media { aspect-ratio: 3 / 4; }
/* Banner / split / dna / contact stack */
.sc-banner { grid-template-columns: 1fr; min-height: 0; }
.sc-banner__media img { min-height: 320px; }
.sc-banner__text { padding: 48px 28px; max-width: none; }
.sc-banner__text .sc-h2, .sc-dna__text .sc-h2, .sc-contact .sc-h2 { font-size: 34px; }
.sc-split, .sc-split--reverse { grid-template-columns: 1fr; gap: 26px; margin-bottom: 48px; }
.sc-split--reverse .sc-split__media, .sc-split--reverse .sc-split__text { order: 0; }
.sc-split__media { aspect-ratio: 4 / 3; }
.sc-faces__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 32px; }
.sc-dna__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 60px; }
.sc-dna__media { order: -1; }
.sc-dna__media img { min-height: 320px; }
.sc-contact__inner { grid-template-columns: 1fr; gap: 32px; }
.sc-contact__map { order: -1; }
/* Instagram reflow */
.sc-ig__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px; }
.sc-ig__item { aspect-ratio: 1 / 1; }
.sc-ig__item--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
/* Trust + footer */
.sc-trust__inner { flex-wrap: wrap; gap: 18px; }
.sc-trust__item { flex: 1 1 42%; }
.sc-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
/* ---- Mobile (<= 575px) ---- */
@media (max-width: 575px) {
.sc-sec { padding: 52px 0; }
.sc-h2 { font-size: 30px; }
.sc-hero__title { font-size: 34px; }
.sc-hero__sub { font-size: 15px; }
.sc-hero__btns { flex-direction: column; align-items: stretch; gap: 12px; }
.sc-hero__btns .sc-btn { width: 100%; }
.sc-collections__grid { gap: 16px; }
.sc-bs__grid { grid-template-columns: 1fr; }
.sc-features__grid { grid-template-columns: 1fr; }
.sc-profiles__grid { grid-template-columns: 1fr; gap: 26px; }
.sc-profile--tall .sc-profile__media, .sc-profile--short .sc-profile__media { aspect-ratio: 16 / 11; }
.sc-faces__grid { grid-template-columns: repeat(2, 1fr); }
.sc-banner__btns, .sc-dna__btns, .sc-contact__btns { flex-direction: column; align-items: stretch; }
.sc-banner__btns .sc-btn, .sc-dna__btns .sc-btn, .sc-contact__btns .sc-btn { width: 100%; }
.sc-dna__stats { flex-direction: column; }
.sc-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.sc-stat:last-child { border-bottom: 0; }
.sc-ig__gallery { grid-template-columns: 1fr; }
.sc-footer__top { grid-template-columns: 1fr; gap: 32px; }
.sc-footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
.sc-trust__item { flex: 1 1 100%; justify-content: center; }
}
/* =====================================================================
20. LISTE DE PRODUITS — page catégorie (Figma "Produits")
===================================================================== */
/* 20.1 — Header blanc sur pages internes + nav fixe navy au scroll (20.1bis) */
.sc-logo__mark--dark { display: none; }
body:not(#index) .sc-logo__mark--light { display: none; }
body:not(#index) .sc-logo__mark--dark { display: block; }
body:not(#index) .sc-nav { background: #fff; border-bottom: 1px solid rgba(56,42,18,.18); }
body:not(#index) .sc-nav__link { color: var(--sc-navy); }
body:not(#index) .sc-nav__link:hover { color: var(--sc-gold-dark); }
body:not(#index) .sc-nav__icon { color: var(--sc-navy); opacity: 1; }
body:not(#index) .sc-burger span { background: var(--sc-navy); }
/* 20.1bis — Nav fixe au scroll sur toutes les pages (même comportement que l'accueil) */
/* compense la nav sortie du flux (sauf pages à nav déjà absolue : contact, cms/Notre Histoire) */
body:not(#index):not(#contact):not(#cms) #header.sc-header--solid { padding-bottom: 101px; }
body:not(#index) #header.sc-header--solid .sc-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: var(--sc-navy); border-bottom: 0;
box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
body:not(#index) #header.sc-header--solid .sc-nav__link { color: rgba(255,255,255,.92); }
body:not(#index) #header.sc-header--solid .sc-nav__link:hover { color: #fff; }
body:not(#index) #header.sc-header--solid .sc-nav__icon { color: #fff; }
body:not(#index) #header.sc-header--solid .sc-burger span { background: #fff; }
body:not(#index) #header.sc-header--solid .sc-logo__mark--dark { display: none; }
body:not(#index) #header.sc-header--solid .sc-logo__mark--light { display: block; }
/* 20.2 — Contenu pleine largeur (neutralise la colonne gauche) */
body.page-category .columns-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body.page-category #left-column { display: none; }
body.page-category #center-column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body.page-category .breadcrumb { display: none; }
body.page-category #products { padding-bottom: 80px; }
/* 20.3 — Bannière catégorie */
.sc-cat-banner {
position: relative; height: 450px; background-size: cover; background-position: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: #fff; overflow: hidden;
}
.sc-cat-banner__overlay { position: absolute; inset: 0; background: rgba(11,25,55,.42); }
.sc-cat-banner__crumb {
position: absolute; top: 26px; left: max(24px, calc((100% - var(--sc-container)) / 2 + var(--sc-gutter)));
z-index: 2; font-family: var(--sc-sans); font-size: 14px; color: rgba(255,255,255,.85);
display: flex; gap: 9px; align-items: center;
}
.sc-cat-banner__crumb a { color: rgba(255,255,255,.85); }
.sc-cat-banner__crumb a:hover { color: #fff; }
.sc-cat-banner__crumb .is-current { color: #fff; }
.sc-cat-banner__content { position: relative; z-index: 2; max-width: 840px; padding: 0 24px; }
.sc-cat-banner__title {
font-family: var(--sc-serif); font-weight: 600; text-transform: uppercase;
font-size: 52px; line-height: 1.06; color: #fff; margin: 12px 0 14px;
}
.sc-cat-banner__sub { font-family: var(--sc-sans); font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; }
/* 20.4 — Intro + chips */
.sc-cat-intro { padding-top: 72px; text-align: center; }
.sc-cat-intro__title { margin: 0 0 42px; }
.sc-cat-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sc-chip {
display: flex; align-items: center; gap: 14px; background: #fff;
border: 1px solid var(--sc-line); padding: 12px 16px 12px 12px;
transition: border-color .2s, box-shadow .2s;
}
.sc-chip:hover { border-color: var(--sc-gold); box-shadow: 0 10px 26px rgba(11,25,55,.07); }
.sc-chip.is-active { border-color: var(--sc-navy); }
.sc-chip__media { width: 58px; height: 44px; flex: 0 0 auto; background: var(--sc-bg); display: flex; align-items: center; justify-content: center; }
.sc-chip__media img { width: 82%; height: 82%; object-fit: contain; }
.sc-chip__label { font-family: var(--sc-serif); font-size: 18px; font-weight: 600; color: var(--sc-heading); line-height: 1.2; text-align: left; }
/* 20.5 — Barre filtres / tri */
.sc-listing-top { margin-top: 54px; }
.sc-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.sc-filterbar__filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-filterbar__label { font-family: var(--sc-sans); font-weight: 600; font-size: 15px; color: var(--sc-heading); }
.sc-filter-pill {
display: inline-flex; align-items: center; gap: 10px; background: #fff;
border: 1px solid var(--sc-line); padding: 11px 18px;
font-family: var(--sc-sans); font-size: 14px; color: var(--sc-navy); cursor: pointer; transition: border-color .2s;
}
.sc-filter-pill:hover { border-color: var(--sc-gold); }
/* Faceted dropdown pills */
.sc-facets { display: contents; }
#js-active-search-filters { display: none; }
.sc-ffacet { position: relative; }
.sc-ffacet .sc-filter-pill.is-active { border-color: var(--sc-navy); }
.sc-filter-pill__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50%; background: var(--sc-gold); color: #fff; font-size: 10px; font-weight: 600; }
.sc-ffacet .sc-caret { transition: transform .2s; }
.sc-ffacet.is-open .sc-caret { transform: rotate(180deg); }
.sc-fpop {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 220px; max-height: 320px; overflow-y: auto;
background: #fff; border: 1px solid var(--sc-line); box-shadow: 0 16px 38px rgba(11,25,55,.14);
padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s;
}
.sc-ffacet.is-open .sc-fpop { opacity: 1; visibility: visible; transform: none; }
.sc-fpop__item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 14px; color: var(--sc-navy); white-space: nowrap; transition: background .15s; }
.sc-fpop__item:hover { background: var(--sc-bg); }
.sc-fpop__item.is-active { font-weight: 600; color: var(--sc-gold-dark); }
.sc-fpop__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; background-size: cover; }
.sc-fpop__label { flex: 1; }
.sc-fpop__count { color: var(--sc-text-soft); font-size: 12px; }
.sc-filter-clear { font-size: 13px; color: var(--sc-copper); text-decoration: underline; align-self: center; white-space: nowrap; }
.sc-filter-clear:hover { color: var(--sc-navy); }
.sc-filterbar__right { display: flex; align-items: center; gap: 24px; }
.sc-sort { display: flex; align-items: center; gap: 10px; }
.sc-sort__label { font-family: var(--sc-sans); font-size: 14px; color: var(--sc-text-soft); white-space: nowrap; }
.sc-sort__field { position: relative; display: inline-flex; align-items: center; }
.sc-sort__select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background: #fff; border: 1px solid var(--sc-line); padding: 11px 40px 11px 16px;
font-family: var(--sc-sans); font-size: 14px; color: var(--sc-navy); cursor: pointer;
}
.sc-sort__field .sc-caret { position: absolute; right: 16px; pointer-events: none; color: var(--sc-navy); }
.sc-filterbar__count { font-family: var(--sc-serif); font-style: italic; font-size: 17px; color: var(--sc-copper); white-space: nowrap; }
/* 20.6 — Grille produits (réutilise .sc-product) + pagination */
.sc-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
width: 100%; max-width: var(--sc-container); margin: 38px auto 0;
padding-inline: var(--sc-gutter); box-sizing: border-box;
}
.products__pagination {
width: 100%; max-width: var(--sc-container); margin: 54px auto 0;
padding-inline: var(--sc-gutter); box-sizing: border-box;
}
.products__pagination .pagination__number { display: none; }
.products__pagination .pagination { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.products__pagination .page-item { display: inline-flex; }
.products__pagination .page-link {
min-width: 46px; height: 46px; padding: 0 12px; border: 1px solid var(--sc-line); background: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy); cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.products__pagination .page-item.active .page-link { background: var(--sc-navy); color: #fff; border-color: var(--sc-navy); }
.products__pagination .page-link:hover { border-color: var(--sc-navy); }
.products__pagination .page-item.disabled .page-link { opacity: .4; cursor: default; }
/* 20.7 — Responsive */
@media (max-width: 991px) {
.sc-cat-banner { height: 380px; }
.sc-cat-banner__title { font-size: 38px; }
.sc-cat-banner__crumb { left: 20px; top: 18px; }
.sc-cat-chips { grid-template-columns: repeat(3, 1fr); }
.sc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 576px) {
.sc-cat-banner { height: 320px; }
.sc-cat-banner__title { font-size: 30px; }
.sc-cat-chips { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sc-chip { padding: 10px 16px 10px 10px; gap: 10px; }
.sc-chip__label { font-size: 15px; }
.sc-filterbar__right { width: 100%; justify-content: space-between; }
}
/* =====================================================================
21. FICHE PRODUIT (Figma "Fiche produit")
===================================================================== */
/* 21.1 — Contenu pleine largeur */
/* Fond crème (maquette Figma : frames Produits fiche + liste = #F9F6F1) */
body.page-product, body.page-category, body.page-search { background: var(--sc-bg); }
body.page-product .columns-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body.page-product #left-column, body.page-product #right-column { display: none; }
body.page-product #center-column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body.page-product .breadcrumb { display: none; }
.sc-product-page { padding-bottom: 90px; }
/* 21.2 — Breadcrumb */
.sc-pbreadcrumb { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--sc-text-soft); padding-top: 26px; padding-bottom: 26px; }
.sc-pbreadcrumb a { color: var(--sc-text-soft); }
.sc-pbreadcrumb a:hover { color: var(--sc-navy); }
.sc-pbreadcrumb .is-current { color: var(--sc-copper); }
/* 21.3 — Main : gallery | info */
.sc-pmain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* Gallery */
.sc-pgallery .product__images { display: block; }
.sc-pgallery .product__carousel { position: relative; background: #FEFDFC; border: 1px solid var(--sc-line); }
.sc-pgallery .carousel-inner { aspect-ratio: 1 / 1; }
.sc-pgallery .carousel-item { height: 100%; }
.sc-pgallery .carousel-item.active { display: flex; align-items: center; justify-content: center; }
.sc-pgallery .carousel-item img { width: 80% !important; height: auto; max-height: 80%; object-fit: contain; }
.sc-pgallery .carousel-control-prev,
.sc-pgallery .carousel-control-next {
width: 48px; height: 48px; top: auto; bottom: 18px; opacity: 1;
background: #fff; border: 1px solid var(--sc-line); border-radius: 50%;
}
.sc-pgallery .carousel-control-prev { left: 18px; right: auto; }
.sc-pgallery .carousel-control-next { right: 18px; left: auto; }
.sc-pgallery .carousel-control-prev-icon,
.sc-pgallery .carousel-control-next-icon { filter: invert(1) grayscale(1); width: 18px; height: 18px; }
.sc-pgallery .product__zoom { display: none; }
.sc-pgallery .product__thumbnails-list { display: flex; gap: 14px; list-style: none; margin: 14px 0 0; padding: 0; flex-wrap: wrap; }
.sc-pgallery .product__thumbnail {
width: 104px; height: 104px; padding: 0; border: 1px solid var(--sc-line); background: #fff;
cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sc-pgallery .product__thumbnail.active,
.sc-pgallery .product__thumbnail:hover { border-color: var(--sc-navy); }
.sc-pgallery .product__thumbnail img { width: 80%; height: 80%; object-fit: contain; }
/* Info */
.sc-pinfo__title { font-family: var(--sc-serif); font-weight: 600; font-size: 44px; line-height: 1.08; color: var(--sc-heading); margin: 0 0 12px; }
.sc-prating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.sc-stars { color: var(--sc-gold); letter-spacing: 3px; font-size: 16px; }
.sc-pinfo .product__prices { margin: 0 0 4px; }
.sc-pinfo .product__price { font-family: var(--sc-sans); font-size: 28px; font-weight: 600; color: var(--sc-copper); }
.sc-pinfo .product__regular-price { color: var(--sc-text-soft); text-decoration: line-through; font-weight: 400; font-size: 18px; margin-right: 10px; }
.sc-pinfo .product__tax-infos { font-size: 12px; color: var(--sc-text-soft); }
.sc-prule { border: 0; border-top: 1px solid var(--sc-line); margin: 22px 0; }
.sc-pinfo__desc { font-family: var(--sc-sans); font-size: 15px; line-height: 1.7; color: var(--sc-text); }
/* Variants */
.sc-pinfo .product__variants { margin: 0 0 22px; }
.sc-pinfo .product-variant { border: 0; padding: 0; margin: 0 0 16px; }
.sc-pinfo .product-variant__legend { font-family: var(--sc-sans); font-weight: 600; font-size: 15px; color: var(--sc-heading); margin-bottom: 10px; padding: 0; }
.sc-pinfo .product-variant__selected { color: var(--sc-text-soft); font-weight: 400; }
.sc-pinfo .product-variant__radios { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-pinfo .product-variant__radio { margin: 0; padding: 0; min-height: 0; }
.sc-pinfo .product-variant__radio .form-check-input { display: none; }
.sc-pinfo .product-variant__radio label,
.sc-pinfo .product-variant__radio .form-check-label {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
border: 1px solid var(--sc-line); padding: 9px 18px; font-size: 14px; color: var(--sc-navy); background: #fff;
}
.sc-pinfo .product-variant__radio .form-check-input:checked + label,
.sc-pinfo .product-variant__radio .form-check-input:checked + .form-check-label { border-color: var(--sc-navy); }
.sc-pinfo .product-variant__label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px; }
.sc-pinfo .product-variant__legend { float: none; width: auto; margin: 0; font-weight: 600; color: var(--sc-navy); }
.sc-pinfo .product-variant__selected { color: var(--sc-text-soft); }
.sc-pinfo .product-variant__colors { clear: both; display: flex; flex-wrap: wrap; gap: 14px; padding: 3px 0 0 3px; }
.sc-pinfo .input-color__label {
width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(11, 25, 55, .18);
padding: 0; overflow: hidden; cursor: pointer; display: block;
transition: transform .15s, box-shadow .15s;
}
.sc-pinfo .input-color__label .color { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sc-pinfo .input-color__label:hover { transform: scale(1.12); }
.sc-pinfo .input-color__input:checked + .input-color__label { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sc-gold); border-color: transparent; }
.sc-pinfo .input-color__input:focus-visible + .input-color__label { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sc-navy); }
.sc-pinfo select.form-select { border: 1px solid var(--sc-line); padding: 11px 16px; font-family: var(--sc-sans); font-size: 14px; color: var(--sc-navy); background: #fff; max-width: 280px; }
/* Quantity + add to cart */
.sc-pinfo .product__actions-qty-add { display: flex; align-items: stretch; gap: 14px; margin: 6px 0 0; }
.sc-pinfo .quantity-button__group { display: inline-flex; align-items: center; border: 1px solid var(--sc-line); height: 54px; background: #fff; }
.sc-pinfo .quantity-button__group .btn { width: 44px; height: 100%; border: 0; background: none; color: var(--sc-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sc-pinfo .quantity-button__group input { width: 46px; height: 100%; border: 0; text-align: center; font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy); background: none; }
.sc-pinfo .product__add-to-cart { flex: 1; display: flex; }
.sc-pinfo .product__add-to-cart-button {
flex: 1; height: 54px; border: 0; background: var(--sc-gold); color: #fff;
font-family: var(--sc-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s;
}
.sc-pinfo .product__add-to-cart-button:hover { background: var(--sc-gold-dark); }
.sc-pinfo .product__add-to-cart-button .material-icons { display: none; }
.sc-buy-now {
display: block; width: 100%; height: 54px; margin-top: 14px; background: #fff;
border: 1px solid var(--sc-navy); color: var(--sc-navy);
font-family: var(--sc-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
cursor: pointer; transition: background .2s, color .2s;
}
.sc-buy-now:hover { background: var(--sc-navy); color: #fff; }
.sc-pinfo .product__availability { margin-top: 14px; font-size: 13px; }
/* Meta + trust */
.sc-pmeta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 24px 0 18px; padding-top: 22px; border-top: 1px solid var(--sc-line); font-size: 14px; color: var(--sc-text-soft); }
.sc-pmeta__row strong { color: var(--sc-heading); font-weight: 600; }
.sc-ptrust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sc-ptrust li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--sc-navy); }
.sc-ptrust svg { color: var(--sc-gold); flex: 0 0 auto; }
/* 21.4 — Tabs */
.sc-ptabs { margin-top: 80px; }
.sc-ptabs__nav { display: flex; gap: 40px; border-bottom: 1px solid var(--sc-line); }
.sc-ptabs__tab {
position: relative; background: none; border: 0; padding: 0 0 16px; cursor: pointer;
font-family: var(--sc-serif); font-size: 21px; font-weight: 600; color: var(--sc-text-soft); transition: color .2s;
}
.sc-ptabs__tab.is-active { color: var(--sc-heading); }
.sc-ptabs__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sc-heading); }
.sc-ptabs__panel { display: none; padding: 34px 0 0; font-family: var(--sc-sans); font-size: 15px; line-height: 1.8; color: var(--sc-text); max-width: 960px; }
.sc-ptabs__panel.is-active { display: block; }
.sc-pspecs { list-style: none; margin: 0; padding: 0; }
.sc-pspecs li { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--sc-line); }
.sc-pspecs li span:first-child { flex: 0 0 220px; font-weight: 600; color: var(--sc-heading); }
.sc-pspecs li span:last-child { color: var(--sc-text-soft); }
/* 21.5 — Responsive */
@media (max-width: 991px) {
.sc-pmain { grid-template-columns: 1fr; gap: 32px; }
.sc-pinfo__title { font-size: 34px; }
.sc-ptabs__nav { gap: 22px; }
.sc-ptabs__tab { font-size: 18px; }
.sc-pspecs li span:first-child { flex-basis: 140px; }
}
@media (max-width: 576px) {
.sc-pinfo .product__actions-qty-add { flex-wrap: wrap; }
.sc-pinfo .product__add-to-cart { flex-basis: 100%; }
}
/* 21.6 — Masquage des éléments PrestaShop hors maquette */
.sc-pgallery .product-flags { display: none; }
body.page-product .product-comments-wrapper,
body.page-product #product-comments-list-footer { display: none; }
/* 21.7 — Avis clients (testimonial) */
.sc-ptesti { background: #fff; margin-top: 90px; }
.sc-ptesti__row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 12px; }
.sc-stars--lg { font-size: 20px; }
.sc-ptesti__quote blockquote { font-family: var(--sc-serif); font-size: 26px; line-height: 1.5; color: var(--sc-heading); margin: 22px 0 20px; font-style: italic; }
.sc-ptesti__quote cite { font-family: var(--sc-sans); font-size: 14px; font-weight: 600; color: var(--sc-text-soft); font-style: normal; }
.sc-ptesti__media { aspect-ratio: 4 / 3.4; overflow: hidden; }
.sc-ptesti__media img { width: 100%; height: 100%; object-fit: cover; }
/* 21.8 — Best-sellers liés */
.sc-prelated .products,
.sc-prelated .sc-grid { margin-top: 6px; }
@media (max-width: 991px) {
.sc-ptesti__row { grid-template-columns: 1fr; gap: 28px; }
.sc-ptesti__quote blockquote { font-size: 21px; }
}
/* =====================================================================
22. NOTRE HISTOIRE (page CMS id 6, Figma)
===================================================================== */
/* 22.1 — Page full-width + header transparent (hero) */
body#cms.cms-id-6 { background: var(--sc-bg); }
.sc-history { font-family: var(--sc-sans); color: var(--sc-text); }
body#cms.cms-id-6 .columns-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body#cms.cms-id-6 #left-column, body#cms.cms-id-6 #right-column { display: none; }
body#cms.cms-id-6 #center-column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body#cms.cms-id-6 .breadcrumb, body#cms.cms-id-6 .breadcrumb__wrapper, body#cms.cms-id-6 .page-header { display: none; }
body#cms.cms-id-6 .sc-nav {
position: absolute; left: 0; right: 0; top: 46px; z-index: 55;
background: transparent; border-bottom: 1px solid rgba(255,255,255,.14);
}
body#cms.cms-id-6 #header.sc-header--solid .sc-nav {
position: fixed; top: 0; background: var(--sc-navy); border-bottom: 0; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
body#cms.cms-id-6 .sc-logo__mark--dark { display: none; }
body#cms.cms-id-6 .sc-logo__mark--light { display: block; }
body#cms.cms-id-6 .sc-nav__link { color: rgba(255,255,255,.92); }
body#cms.cms-id-6 .sc-nav__link:hover { color: #fff; }
body#cms.cms-id-6 .sc-nav__icon { color: #fff; opacity: .92; }
body#cms.cms-id-6 .sc-burger span { background: #fff; }
/* 22.2 — Hero */
.sc-hh-hero { position: relative; min-height: 760px; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; overflow: hidden; }
.sc-hh-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,25,55,.66) 0%, rgba(11,25,55,.28) 55%, rgba(11,25,55,.1) 100%); }
.sc-hh-hero__inner { position: relative; z-index: 2; }
.sc-hh-hero__title { font-family: var(--sc-serif); font-weight: 600; text-transform: uppercase; font-size: 66px; line-height: 1.04; color: #fff; margin: 14px 0 18px; max-width: 760px; }
.sc-hh-hero__sub { font-family: var(--sc-sans); font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 540px; margin: 0 0 32px; }
.sc-hh-hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* 22.3 — Intro split */
.sc-hh-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sc-hh-intro__logo { width: 104px; height: auto; margin-bottom: 22px; }
.sc-hh-intro__text .sc-btn { margin-top: 26px; }
.sc-hh-intro__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.4; }
/* 22.4 — Navy CTA banner */
.sc-hh-cta { position: relative; background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.sc-hh-cta__overlay { position: absolute; inset: 0; background: rgba(11,25,55,.64); }
.sc-hh-cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 120px 0; }
.sc-hh-cta__text { max-width: 640px; }
.sc-hh-cta__btn { flex: 0 0 auto; }
/* 22.5 — L'art du regard */
.sc-hh-art__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sc-hh-art__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-hh-art__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4.4; }
.sc-hh-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 28px 0 30px; }
.sc-hh-feat { display: flex; align-items: center; gap: 14px; }
.sc-hh-feat__icon { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sc-gold); color: var(--sc-gold); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc-hh-feat__label { font-family: var(--sc-sans); font-size: 15px; color: var(--sc-heading); }
/* 22.6 — Collections overlay cards */
.sc-ovgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 12px; }
.sc-ov-card { position: relative; display: block; overflow: hidden; }
.sc-ov-card--third { grid-column: span 2; aspect-ratio: 1 / 1.12; }
.sc-ov-card--half { grid-column: span 3; aspect-ratio: 16 / 9.4; }
.sc-ov-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sc-ov-card:hover img { transform: scale(1.04); }
.sc-ov-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,25,55,.62) 0%, rgba(11,25,55,0) 56%); }
.sc-ov-card__body { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; text-align: center; color: #fff; padding: 0 16px; }
.sc-ov-card__title { display: block; font-family: var(--sc-serif); font-size: 23px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.sc-arrow-link--light { color: #fff; justify-content: center; }
.sc-arrow-link--light:hover { color: var(--sc-gold); }
/* 22.7 — Product spotlight */
.sc-hh-spot__grid { display: grid; grid-template-columns: 360px 1fr; gap: 60px; align-items: center; }
.sc-hh-spot__text { text-align: center; }
.sc-hh-spot__name { font-family: var(--sc-serif); font-size: 26px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-heading); margin: 0 0 18px; }
.sc-hh-spot__mark { width: 160px; height: auto; margin: 0 auto 22px; display: block; object-fit: contain; }
.sc-hh-spot__text .sc-p { margin-bottom: 24px; }
.sc-hh-spot__text .sc-btn { width: 100%; }
.sc-hh-spot__media { background: #fff; border: 1px solid var(--sc-line); padding: 40px; }
.sc-hh-spot__main { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.sc-hh-spot__main img { max-width: 72%; max-height: 100%; object-fit: contain; }
.sc-hh-spot__thumbs { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.sc-hh-spot__thumb { width: 92px; height: 70px; border: 1px solid var(--sc-line); display: flex; align-items: center; justify-content: center; background: #fff; }
.sc-hh-spot__thumb.is-active { border-color: var(--sc-navy); }
.sc-hh-spot__thumb img { width: 70%; height: 70%; object-fit: contain; }
/* 22.8 — Responsive */
@media (max-width: 991px) {
.sc-hh-hero { min-height: 560px; }
.sc-hh-hero__title { font-size: 42px; }
.sc-hh-intro__grid, .sc-hh-art__grid, .sc-hh-spot__grid { grid-template-columns: 1fr; gap: 32px; }
.sc-hh-cta__inner { flex-direction: column; align-items: flex-start; padding: 80px 0; }
.sc-ovgrid { grid-template-columns: 1fr 1fr; }
.sc-ov-card--third, .sc-ov-card--half { grid-column: span 1; aspect-ratio: 1 / 1; }
}
@media (max-width: 576px) {
.sc-hh-hero__title { font-size: 33px; }
.sc-hh-art__media { grid-template-columns: 1fr; }
.sc-hh-feats { grid-template-columns: 1fr; }
.sc-ovgrid { grid-template-columns: 1fr; }
}
/* =====================================================================
23. CONTACT (Figma)
===================================================================== */
/* 23.1 — Full-width + header transparent (hero) */
body#contact { background: var(--sc-bg); }
body#contact .columns-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body#contact #left-column, body#contact #right-column { display: none; }
body#contact #center-column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body#contact .breadcrumb, body#contact .breadcrumb__wrapper, body#contact .page-header { display: none; }
body#contact .sc-nav { position: absolute; left: 0; right: 0; top: 46px; z-index: 55; background: transparent; border-bottom: 1px solid rgba(255,255,255,.14); }
body#contact #header.sc-header--solid .sc-nav { position: fixed; top: 0; background: var(--sc-navy); border-bottom: 0; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
body#contact .sc-logo__mark--dark { display: none; }
body#contact .sc-logo__mark--light { display: block; }
body#contact .sc-nav__link { color: rgba(255,255,255,.92); }
body#contact .sc-nav__link:hover { color: #fff; }
body#contact .sc-nav__icon { color: #fff; opacity: .92; }
body#contact .sc-burger span { background: #fff; }
/* 23.2 — Hero split */
.sc-cn-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; }
.sc-cn-hero__media { background-size: cover; background-position: center; background-color: var(--sc-navy); }
.sc-cn-hero__panel { background: var(--sc-navy); display: flex; align-items: center; padding: 90px 80px; }
.sc-cn-hero__inner { max-width: 560px; color: #fff; }
.sc-cn-hero__title { font-family: var(--sc-serif); font-weight: 600; text-transform: uppercase; font-size: 50px; line-height: 1.07; color: #fff; margin: 14px 0 18px; }
.sc-cn-hero__sub { font-family: var(--sc-sans); font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 30px; }
.sc-cn-hero__phone { letter-spacing: .08em; }
/* 23.3 — Contact methods */
.sc-cn-methods { background: #fff; border-bottom: 1px solid var(--sc-line); }
.sc-cn-methods__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 48px; padding-bottom: 48px; }
.sc-cn-method { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; }
.sc-cn-method__ic { grid-column: 1; grid-row: 1; color: var(--sc-navy); }
.sc-cn-method__title { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--sc-serif); font-size: 22px; font-weight: 600; color: var(--sc-heading); margin: 0 0 10px; }
.sc-cn-method__v { grid-column: 2; grid-row: 2; font-size: 14px; color: var(--sc-navy); font-weight: 500; margin: 0 0 6px; }
.sc-cn-method__t { grid-column: 2; grid-row: 3; font-size: 13px; color: var(--sc-text-soft); line-height: 1.5; margin: 0; }
/* 23.4 — Message form */
.sc-cn-form__card { background: #fff; padding: 60px 56px 64px; max-width: 1040px; margin: 0 auto; box-shadow: 0 24px 60px rgba(11,25,55,.06); }
.sc-cform { margin-top: 18px; }
.sc-cform__form { display: flex; flex-direction: column; gap: 18px; max-width: 900px; margin: 0 auto; }
.sc-cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sc-input { width: 100%; border: 1px solid var(--sc-line); background: #fff; padding: 15px 18px; font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy); }
.sc-input::placeholder { color: var(--sc-text-soft); }
.sc-input:focus { outline: none; border-color: var(--sc-navy); }
.sc-textarea { resize: vertical; min-height: 150px; }
.sc-cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sc-cform__actions { text-align: center; margin-top: 6px; }
.sc-cform__submit { min-width: 260px; }
.sc-cform__alert { padding: 14px 18px; font-size: 14px; }
.sc-cform__alert ul { list-style: none; margin: 0; padding: 0; }
.sc-cform__alert.alert-success { background: #e9f3ec; color: #1f6b3b; border: 1px solid #bcdcc8; }
.sc-cform__alert.alert-danger { background: #f8eaea; color: #9b2c2c; border: 1px solid #e3c2c2; }
/* 23.5 — Map + store card */
.sc-cn-map { position: relative; }
.sc-cn-map__frame { display: block; width: 100%; height: 560px; border: 0; }
.sc-cn-map__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; pointer-events: none; }
.sc-cn-store { background: #fff; padding: 46px 42px; max-width: 400px; text-align: center; pointer-events: auto; box-shadow: 0 24px 56px rgba(11,25,55,.16); }
.sc-cn-store__title { font-family: var(--sc-serif); font-size: 28px; font-weight: 600; color: var(--sc-heading); margin: 0 0 18px; }
.sc-cn-store__addr { font-size: 16px; color: var(--sc-navy); margin: 0 0 16px; }
.sc-cn-store__hours p { font-size: 14px; color: var(--sc-text-soft); margin: 0 0 4px; }
.sc-cn-store__btn { margin-top: 24px; width: 100%; }
/* 23.6 — FAQ */
.sc-cn-faq .sc-section-head { margin-bottom: 18px; }
.sc-faq { max-width: 1000px; margin: 0 auto; }
.sc-faq__item { border-bottom: 1px solid var(--sc-line); }
.sc-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; padding: 26px 6px; cursor: pointer; text-align: left; font-family: var(--sc-serif); font-size: 19px; font-weight: 600; color: var(--sc-heading); }
.sc-faq__sign { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.sc-faq__sign::before, .sc-faq__sign::after { content: ""; position: absolute; background: var(--sc-navy); }
.sc-faq__sign::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.sc-faq__sign::after { top: 0; bottom: 0; left: 7px; width: 1.5px; transition: opacity .2s; }
.sc-faq__item.is-open .sc-faq__sign::after { opacity: 0; }
.sc-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.sc-faq__item.is-open .sc-faq__a { max-height: 320px; }
.sc-faq__a p { padding: 0 6px 26px; margin: 0; font-family: var(--sc-sans); font-size: 15px; line-height: 1.7; color: var(--sc-text-soft); max-width: 92%; }
/* 23.7 — Responsive */
@media (max-width: 991px) {
.sc-cn-hero { grid-template-columns: 1fr; min-height: 0; }
.sc-cn-hero__media { min-height: 320px; }
.sc-cn-hero__panel { padding: 56px 28px; }
.sc-cn-hero__title { font-size: 36px; }
.sc-cn-methods__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.sc-cn-form__card { padding: 40px 24px; }
}
@media (max-width: 576px) {
.sc-cform__grid { grid-template-columns: 1fr; }
.sc-cn-methods__grid { grid-template-columns: 1fr; }
.sc-cn-map__overlay { justify-content: center; padding: 0 16px; }
.sc-cn-store { max-width: 100%; }
}
/* =====================================================================
24. COMPTE & TUNNEL DE COMMANDE (connexion / inscription / panier /
checkout / confirmation) — Figma-aligned editorial styling
===================================================================== */
/* 24.0 — Full-width neutralisation (comme contact/catégorie) */
body#authentication, body#registration, body#cart,
body#order, body#order-confirmation { background: var(--sc-bg); }
body#authentication .columns-container, body#registration .columns-container,
body#cart .columns-container, body#order .columns-container,
body#order-confirmation .columns-container { max-width: none; width: 100%; margin: 0; padding: 0; }
body#authentication #left-column, body#authentication #right-column,
body#registration #left-column, body#registration #right-column,
body#cart #left-column, body#cart #right-column,
body#order #left-column, body#order #right-column,
body#order-confirmation #left-column, body#order-confirmation #right-column { display: none; }
body#authentication #center-column, body#registration #center-column,
body#cart #center-column, body#order #center-column,
body#order-confirmation #center-column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body#authentication .breadcrumb, body#registration .breadcrumb,
body#cart .breadcrumb, body#order .breadcrumb,
body#order-confirmation .breadcrumb,
body#cart .page-header, body#order .page-header { display: none; }
/* 24.1 — Champs de formulaire partagés (Bootstrap markup → look Stan & Co) */
.sc-auth .form-control, .sc-auth .form-select,
.sc-cart-page .form-control, .sc-cart-page .form-select,
.sc-checkout-page .form-control, .sc-checkout-page .form-select,
.sc-confirm-page .form-control, .sc-confirm-page .form-select {
width: 100%; border: 1px solid var(--sc-line); background: #fff; border-radius: 0;
padding: 14px 16px; font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy);
box-shadow: none; transition: border-color .2s;
}
.sc-auth .form-control:focus, .sc-auth .form-select:focus,
.sc-cart-page .form-control:focus, .sc-checkout-page .form-control:focus,
.sc-checkout-page .form-select:focus, .sc-confirm-page .form-control:focus {
outline: none; border-color: var(--sc-navy); box-shadow: none;
}
.sc-auth .form-control::placeholder { color: var(--sc-text-soft); }
.sc-auth .form-label, .sc-checkout-page .form-label, .sc-cart-page .form-label {
font-family: var(--sc-sans); font-weight: 600; font-size: 13px; letter-spacing: .03em;
color: var(--sc-heading); margin-bottom: 8px; display: block;
}
.sc-auth .form-label.required::after,
.sc-checkout-page .form-label.required::after { content: " *"; color: var(--sc-copper); }
.sc-auth .mb-3, .sc-checkout-page .mb-3 { margin-bottom: 18px !important; }
.sc-auth .form-text, .sc-auth .help-block,
.sc-checkout-page .form-text { font-size: 12px; color: var(--sc-text-soft); margin-top: 6px; }
/* password input-group + show/hide button
⚠️ le width:100% du .form-control (24.1) faisait wrapper le bouton sous l'input (540×2px) */
.sc-auth .input-group, .sc-checkout-page .input-group { display: flex; flex-wrap: nowrap; }
.sc-auth .input-group .form-control, .sc-checkout-page .input-group .form-control { flex: 1 1 auto; width: auto; min-width: 0; border-right: 0; }
.sc-auth .input-group .input-group-text,
.sc-auth .input-group .btn,
.sc-checkout-page .input-group .input-group-text,
.sc-checkout-page .input-group .btn {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 52px; border: 1px solid var(--sc-line); border-left: 0; border-radius: 0;
background: #fff; color: var(--sc-navy); padding: 0; box-shadow: none;
}
.sc-auth .input-group .btn:hover, .sc-checkout-page .input-group .btn:hover { background: var(--sc-navy); color: #fff; border-color: var(--sc-navy); }
.sc-auth .input-group:focus-within .form-control, .sc-checkout-page .input-group:focus-within .form-control { border-color: var(--sc-navy); }
.sc-auth .input-group:focus-within .btn, .sc-checkout-page .input-group:focus-within .btn { border-color: var(--sc-navy); }
.sc-auth .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 0; min-height: 0; }
.sc-auth .form-check-input, .sc-checkout-page .form-check-input {
width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid var(--sc-line); border-radius: 3px;
flex: 0 0 auto; cursor: pointer;
}
.sc-auth .form-check-input:checked, .sc-checkout-page .form-check-input:checked {
background-color: var(--sc-navy); border-color: var(--sc-navy);
}
.sc-auth .form-check-input:focus, .sc-checkout-page .form-check-input:focus { box-shadow: none; border-color: var(--sc-navy); }
.sc-auth .form-check-label, .sc-checkout-page .form-check-label {
font-size: 14px; line-height: 1.5; color: var(--sc-text); cursor: pointer;
}
.sc-auth .radio-inline, .sc-auth .form-check-inline { display: inline-flex; margin-right: 20px; }
/* primary submit → gold uppercase button (login + register + address) */
.sc-auth .btn-primary, .sc-auth .form-control-submit,
.sc-checkout-page .form-footer .btn-primary,
.sc-checkout-page #customer-form .btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
background: var(--sc-gold); color: #fff; border: 1px solid var(--sc-gold); border-radius: 0;
font-family: var(--sc-sans); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
padding: 16px 28px; transition: background .2s, border-color .2s; cursor: pointer;
}
.sc-auth .btn-primary:hover, .sc-auth .form-control-submit:hover,
.sc-checkout-page #customer-form .btn-primary:hover { background: var(--sc-gold-dark); border-color: var(--sc-gold-dark); color: #fff; }
.sc-auth .btn-primary .material-icons, .sc-checkout-page #customer-form .btn-primary .material-icons { display: none; }
/* ⚠️ la règle ci-dessus (avec #customer-form, spéc. 1,2,0) attrape AUSSI le bouton œil du
mot de passe → exception avec l'ID pour le re-fixer à 52px blanc */
.sc-auth #customer-form .input-group .btn,
.sc-checkout-page #customer-form .input-group .btn {
flex: 0 0 52px; width: 52px; padding: 0; letter-spacing: 0; gap: 0;
background: #fff; color: var(--sc-navy); border: 1px solid var(--sc-line); border-left: 0;
}
.sc-auth #customer-form .input-group .btn:hover,
.sc-checkout-page #customer-form .input-group .btn:hover { background: var(--sc-navy); color: #fff; border-color: var(--sc-navy); }
/* =====================================================================
25. CONNEXION / INSCRIPTION — split éditorial
===================================================================== */
/* Le breadcrumb (vide, h=0) garde un margin-bottom qui fuit au-dessus du
wrapper (margin-collapse) → bande crème de 40px sous le header. */
body#authentication .breadcrumb__wrapper,
body#registration .breadcrumb__wrapper { margin-bottom: 0; }
/* tabs Particulier / Professionnel (inscription) */
.sc-auth__tabs { display: inline-flex; border: 1px solid var(--sc-line); margin-bottom: 28px; }
.sc-auth__tab { padding: 11px 26px; font-family: var(--sc-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-soft); transition: color .2s, background .2s; }
.sc-auth__tab:hover { color: var(--sc-navy); }
.sc-auth__tab.is-active { background: var(--sc-navy); color: #fff; }
.sc-auth { display: grid; grid-template-columns: 0.88fr 1.12fr; min-height: 720px; font-family: var(--sc-sans); }
.sc-auth__media { position: relative; display: flex; align-items: flex-end; padding: 60px; background-size: cover; background-position: center; background-color: var(--sc-navy); overflow: hidden; }
.sc-auth__media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,25,55,.42) 0%, rgba(8,18,41,.82) 100%); }
.sc-auth__media-inner { position: relative; z-index: 2; color: #fff; max-width: 460px; }
.sc-auth__media-title { font-family: var(--sc-serif); font-weight: 600; font-size: 42px; line-height: 1.1; color: #fff; margin: 12px 0 16px; }
.sc-auth__media-text { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 0 28px; }
.sc-auth__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-auth__perks li { display: flex; align-items: center; gap: 13px; font-size: 15px; color: rgba(255,255,255,.92); }
.sc-auth__perks-ic { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sc-gold); color: var(--sc-gold); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc-auth__panel { display: flex; align-items: center; justify-content: center; padding: 80px 48px; }
.sc-auth__card { width: 100%; max-width: 440px; }
.sc-auth__card--wide { max-width: 540px; }
.sc-auth__title { font-family: var(--sc-serif); font-weight: 600; font-size: 42px; line-height: 1.08; color: var(--sc-heading); margin: 6px 0 12px; }
.sc-auth__lead { font-size: 16px; line-height: 1.6; color: var(--sc-text-soft); margin: 0 0 30px; }
.sc-auth__form { margin-top: 4px; }
/* login form buttons row → stacked (submit prominent, forgot link below) */
.sc-auth .buttons-wrapper--split { display: flex; flex-direction: column-reverse; gap: 16px; margin-top: 8px; }
.sc-auth .btn-basic { align-self: center; background: none; border: 0; padding: 0; font-size: 14px; color: var(--sc-copper); text-decoration: underline; }
.sc-auth .btn-basic:hover { color: var(--sc-navy); }
.sc-auth .buttons-wrapper--end { display: block; margin-top: 8px; }
.sc-auth__alt { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--sc-line); text-align: center; }
.sc-auth__alt-label { display: block; font-size: 15px; color: var(--sc-text-soft); margin-bottom: 14px; }
.sc-auth__alt-btn { width: 100%; }
.sc-auth .alert { border-radius: 0; border: 1px solid #e3c2c2; background: #f8eaea; color: #9b2c2c; padding: 14px 18px; font-size: 14px; margin-bottom: 20px; }
.sc-auth .alert ul { margin: 0; padding-left: 18px; }
.sc-auth hr { display: none; }
/* hide PrestaShop password-strength noise but keep field usable */
.sc-auth .password-policy, .sc-auth .form-text-container { font-size: 12px; color: var(--sc-text-soft); }
/* =====================================================================
26. BANDEAU DE PAGE + INDICATEUR D'ÉTAPES (panier/checkout/confirmation)
===================================================================== */
.sc-page-band { background: #fff; border-bottom: 1px solid var(--sc-line); }
.sc-page-band__inner { text-align: center; padding: 50px 0 42px; }
.sc-page-band__crumb { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .04em; color: var(--sc-text-soft); margin-bottom: 14px; }
.sc-page-band__crumb a { color: var(--sc-text-soft); }
.sc-page-band__crumb a:hover { color: var(--sc-navy); }
.sc-page-band__crumb .is-current { color: var(--sc-copper); }
.sc-page-band__title { font-family: var(--sc-serif); font-weight: 600; font-size: 46px; line-height: 1.06; color: var(--sc-heading); margin: 0; }
.sc-steps { display: flex; justify-content: center; align-items: center; list-style: none; margin: 32px 0 0; padding: 0; flex-wrap: wrap; gap: 8px 0; }
.sc-steps__item { display: flex; align-items: center; gap: 11px; font-family: var(--sc-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-soft); }
.sc-steps__item:not(:last-child)::after { content: ""; width: 46px; height: 1px; background: var(--sc-line); margin: 0 20px; }
.sc-steps__dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sc-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--sc-text-soft); flex: 0 0 auto; }
.sc-steps__item.is-current { color: var(--sc-navy); }
.sc-steps__item.is-current .sc-steps__dot { border-color: var(--sc-navy); background: var(--sc-navy); color: #fff; }
.sc-steps__item.is-done { color: var(--sc-gold-dark); }
.sc-steps__item.is-done .sc-steps__dot { border-color: var(--sc-gold); background: var(--sc-gold); color: #fff; }
/* =====================================================================
27. PANIER
===================================================================== */
.sc-cart-wrap { padding-top: 50px; padding-bottom: 90px; }
.sc-cart-page .product-line { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--sc-line); }
.sc-cart-page .product-line:first-child { padding-top: 4px; }
.sc-cart-page .product-line__image { flex: 0 0 116px; width: 116px; }
.sc-cart-page .product-line__image a { display: flex; align-items: center; justify-content: center; height: 116px; background: #fff; border: 1px solid var(--sc-line); }
.sc-cart-page .product-line__img { width: 82%; height: 82%; object-fit: contain; }
.sc-cart-page .product-line__content { flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "left right" "actions actions"; column-gap: 22px; align-items: start; }
.sc-cart-page .product-line__content-left { grid-area: left; }
.sc-cart-page .product-line__content-right { grid-area: right; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.sc-cart-page .product-line__actions { grid-area: actions; margin-top: 12px; }
.sc-cart-page .product-line__title { font-family: var(--sc-serif); font-weight: 600; font-size: 21px; color: var(--sc-heading); display: inline-block; margin-bottom: 8px; }
.sc-cart-page .product-line__title:hover { color: var(--sc-gold-dark); }
.sc-cart-page .product-line__item--info { font-size: 13px; color: var(--sc-text-soft); margin-bottom: 3px; }
.sc-cart-page .product-line__item-label { font-weight: 600; color: var(--sc-text); }
.sc-cart-page .product-line__item--prices { margin-top: 10px; }
.sc-cart-page .product-line__item-price { font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy); }
.sc-cart-page .product-line__item-regular-price { color: var(--sc-text-soft); text-decoration: line-through; font-size: 13px; margin-left: 8px; }
.sc-cart-page .product-line__price { font-family: var(--sc-sans); font-size: 20px; font-weight: 600; color: var(--sc-copper); }
.sc-cart-page .quantity-button, .sc-cart-page .product-line__quantity-button { display: inline-flex; align-items: center; border: 1px solid var(--sc-line); height: 46px; background: #fff; }
.sc-cart-page .quantity-button .btn, .sc-cart-page .product-line__quantity-button .btn { width: 38px; height: 100%; border: 0; background: none; color: var(--sc-navy); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.sc-cart-page .quantity-button input, .sc-cart-page .product-line__quantity-button input { width: 44px; height: 100%; border: 0; text-align: center; font-family: var(--sc-sans); font-size: 15px; color: var(--sc-navy); background: none; box-shadow: none; padding: 0; }
/* l'input-group intermédiaire (h auto) empêchait le height:100% de l'input → chiffre décentré */
.sc-cart-page .quantity-button .input-group, .sc-cart-page .product-line__quantity-button .input-group { height: 100%; flex-wrap: nowrap; align-items: stretch; }
/* centre le packshot dans sa case (l'![]()
vit dans un block, pas dans le lien flex) */
.sc-cart-page .product-line__image picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sc-cart-page .product-line__actions .js-remove-from-cart { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sc-text-soft); text-decoration: underline; }
.sc-cart-page .product-line__actions .js-remove-from-cart:hover { color: #9b2c2c; }
.sc-cart-page .cart__continue-shopping { margin-top: 30px; }
/* Cart summary aside (shared card style for cart + checkout) */
.sc-cart-summary { background: #fff; border: 1px solid var(--sc-line); padding: 32px 30px; }
/* top dégagé sous la nav fixe au scroll (101px) ; z-index sous la nav (z:100) —
le thème met z-index:1020 sur .cart-grid__aside-wrapper → passait AU-DESSUS du header */
body#cart .sc-cart-summary { position: sticky; top: 125px; z-index: 1; }
.sc-cart-summary__title { font-family: var(--sc-serif); font-weight: 600; font-size: 26px; color: var(--sc-heading); margin: 0 0 22px; padding: 0; background: none; border: 0; box-shadow: none; }
.sc-cart-summary__title::after { display: none; }
.cart-summary__line, .sc-cart-summary .cart-summary__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; font-size: 15px; color: var(--sc-text); }
.cart-summary__label { color: var(--sc-text-soft); }
.cart-summary__value { color: var(--sc-navy); font-weight: 500; }
.sc-cart-summary .cart-total .cart-summary__line, .sc-cart-summary .cart-summary__line.cart-total {
border-top: 1px solid var(--sc-line); margin-top: 8px; padding-top: 18px;
}
.sc-cart-summary .cart-total .cart-summary__label, .sc-cart-summary .cart-total .value, .sc-cart-summary .cart-summary__value--bold {
font-family: var(--sc-serif); font-size: 22px; font-weight: 600; color: var(--sc-heading);
}
.sc-cart-summary .cart-summary__products { border-bottom: 1px solid var(--sc-line); padding-bottom: 10px; margin-bottom: 10px; }
/* voucher / promo accordion */
.sc-cart-summary .cart-voucher__accordion-button, .sc-cart-summary .accordion-button {
background: none; border: 0; box-shadow: none; padding: 14px 0; font-family: var(--sc-sans); font-size: 14px; font-weight: 600; color: var(--sc-navy);
}
.sc-cart-summary .cart-voucher__accordion-button::after { filter: grayscale(1); }
.sc-cart-summary .accordion-body { padding: 6px 0 14px; }
/* proceed to checkout button */
.sc-cart-summary .cart-summary__actions { margin-top: 22px; }
.sc-cart-summary .cart-summary__actions .btn-primary,
.sc-cart-page .cart-summary__actions .btn-primary {
display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 0;
background: var(--sc-gold); color: #fff; border: 1px solid var(--sc-gold);
font-family: var(--sc-sans); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 16px 24px;
}
.sc-cart-summary .cart-summary__actions .btn-primary:hover { background: var(--sc-gold-dark); border-color: var(--sc-gold-dark); }
.sc-cart-summary .cart-summary__actions .btn-primary.disabled, .sc-cart-summary .cart-summary__actions .btn-primary:disabled { background: var(--sc-line); border-color: var(--sc-line); color: var(--sc-text-soft); cursor: default; }
/* reassurance block — markup maison (override displayBlockProduct.tpl, panier + checkout) */
.sc-reassure { margin-top: 26px; border-top: 1px solid var(--sc-line); padding-top: 22px; display: flex; flex-direction: column; gap: 15px; }
.sc-reassure__item { display: flex; align-items: center; gap: 13px; }
.sc-reassure__ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sc-gold); color: var(--sc-gold-dark); background: var(--sc-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sc-reassure__text { display: flex; flex-direction: column; gap: 1px; }
.sc-reassure__title { font-family: var(--sc-sans); font-size: 13.5px; font-weight: 600; color: var(--sc-navy); }
.sc-reassure__desc { font-size: 12.5px; color: var(--sc-text-soft); }
/* produits phares (cross-selling panier / confirmation) — respiration + bouton centré */
.sc-cart-page .ps-featuredproducts { margin-top: 70px; }
.ps-featuredproducts .module-products__buttons { display: flex; justify-content: center; margin-top: 34px; }
/* empty cart */
body#cart.cart-empty .cart-grid__aside { display: none; }
body#cart.cart-empty .cart-grid__content { width: 100%; flex: 0 0 100%; max-width: 720px; margin: 0 auto; text-align: center; }
body#cart.cart-empty .cart__continue-shopping { margin-top: 18px; justify-content: center; }
/* =====================================================================
28. CHECKOUT (one-page) + CONFIRMATION
===================================================================== */
.sc-checkout-wrap { padding-top: 40px; padding-bottom: 90px; }
/* steps navigation bar */
.sc-checkout-page .checkout-steps { margin-bottom: 36px; background: transparent; border: 0; padding: 24px 0 0; }
/* le conteneur du thème limite la barre d'étapes à 720px → les 4 étapes (≈885px) wrappaient */
.sc-checkout-page .checkout-steps, .sc-checkout-page .checkout-steps__desktop { max-width: none; width: 100%; }
.sc-checkout-page .checkout-steps__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; list-style: none; margin: 0; padding: 0 0 22px; border-bottom: 1px solid var(--sc-line); }
.sc-checkout-page .checkout-steps__step { position: static; display: flex; align-items: center; gap: 12px; padding: 0; }
.sc-checkout-page .checkout-steps__number { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sc-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sc-sans); font-size: 13px; font-weight: 600; color: var(--sc-text-soft); flex: 0 0 auto; }
.sc-checkout-page .checkout-steps__btn { background: none; border: 0; padding: 0; font-family: var(--sc-sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-text-soft); text-decoration: none; white-space: nowrap; }
.sc-checkout-page .checkout-steps__step--current .checkout-steps__number { border-color: var(--sc-navy); background: var(--sc-navy); color: #fff; }
.sc-checkout-page .checkout-steps__step--current .checkout-steps__btn { color: var(--sc-navy); }
.sc-checkout-page .checkout-steps__step--success .checkout-steps__number { border-color: var(--sc-gold); background: var(--sc-gold); color: #fff; }
.sc-checkout-page .checkout-steps__step--success .checkout-steps__btn { color: var(--sc-gold-dark); }
/* connecteur du thème = ::before absolu (90×2px) qui BARRAIT les libellés →
remplacé par un trait statique dans le flux flex, entre les étapes */
.sc-checkout-page .checkout-steps__step::before {
content: ""; position: static; top: auto; left: auto; transform: none;
display: block; width: 46px; height: 1px; background: var(--sc-line); margin: 0 22px 0 2px;
}
.sc-checkout-page .checkout-steps__step:first-child::before { display: none; }
.sc-checkout-page .checkout-steps__step::after { display: none; }
.sc-checkout-page .checkout-steps__step--current::before,
.sc-checkout-page .checkout-steps__step--success::before { background: var(--sc-gold); }
/* step panels */
.sc-checkout-page .step { background: #fff; border: 1px solid var(--sc-line); padding: 0; margin-bottom: 20px; }
.sc-checkout-page .step__title { padding: 22px 28px; margin: 0; }
.sc-checkout-page .step__title .page-title-section, .sc-checkout-page .step__title h1, .sc-checkout-page .step__title p { font-family: var(--sc-serif); font-weight: 600; font-size: 24px; color: var(--sc-heading); margin: 0; }
.sc-checkout-page .step__title hr { display: none; }
.sc-checkout-page .step:not(.step--current) .step__title { border-bottom: 0; opacity: .65; }
.sc-checkout-page .step--current .step__title { border-bottom: 1px solid var(--sc-line); }
.sc-checkout-page .step--complete .step__title .page-title-section::after { content: " ✓"; color: var(--sc-gold-dark); }
.sc-checkout-page .step__content { padding: 26px 28px 30px; }
.sc-checkout-page .step:not(.step--current) .step__content { display: none; }
/* personal info tabs (signin/register inside step 1) — markup réel = .nav-underline */
.sc-checkout-page .nav-underline, .sc-checkout-page .nav-inline, .sc-checkout-page .checkout-step .nav-tabs { border-bottom: 1px solid var(--sc-line); margin-bottom: 18px; gap: 26px; }
.sc-checkout-page .nav-underline .nav-link, .sc-checkout-page .checkout-step .nav-tabs .nav-link { border: 0; border-radius: 0; background: none; padding: 0 0 14px; font-family: var(--sc-serif); font-size: 19px; font-weight: 600; color: var(--sc-text-soft); }
.sc-checkout-page .nav-underline .nav-link:hover { color: var(--sc-heading); }
.sc-checkout-page .nav-underline .nav-link.active, .sc-checkout-page .checkout-step .nav-tabs .nav-link.active { color: var(--sc-heading); border-bottom: 2px solid var(--sc-heading); background: none; }
/* address selector + blocks (markup réel = article.address-card) */
.sc-checkout-page .address-card { border: 1px solid var(--sc-line); border-radius: 0; background: #fff; margin-bottom: 14px; box-shadow: none; transition: border-color .2s; }
.sc-checkout-page .address-card.selected { border-color: var(--sc-navy); box-shadow: none; }
.sc-checkout-page .address-card__container { display: block; padding: 20px 22px 14px; margin: 0; cursor: pointer; }
.sc-checkout-page .address-card .form-check-input:checked { background-color: var(--sc-navy); border-color: var(--sc-navy); }
.sc-checkout-page .address-card a { color: var(--sc-text-soft); font-size: 13px; text-decoration: underline; }
.sc-checkout-page .address-card a:hover { color: var(--sc-navy); }
.sc-checkout-page .address-card a[data-link-action="delete-address"], .sc-checkout-page .address-card .js-delete-address { color: var(--sc-text-soft); }
.sc-checkout-page .address-card a[data-link-action="delete-address"]:hover, .sc-checkout-page .address-card .js-delete-address:hover { color: #9b2c2c; }
/* delivery options */
.sc-checkout-page .delivery-options__list { display: flex; flex-direction: column; gap: 12px; }
.sc-checkout-page .delivery-option__label { display: flex; align-items: center; gap: 18px; border: 1px solid var(--sc-line); padding: 18px 22px; margin: 0; cursor: pointer; transition: border-color .2s; }
.sc-checkout-page .delivery-option__item:has(.form-check-input:checked) .delivery-option__label { border-color: var(--sc-navy); }
.sc-checkout-page .delivery-option__left { display: flex; align-items: center; gap: 14px; flex: 1; }
.sc-checkout-page .delivery-option__carrier-name { font-family: var(--sc-sans); font-weight: 600; font-size: 15px; color: var(--sc-heading); }
.sc-checkout-page .delivery-option__content { font-size: 13px; color: var(--sc-text-soft); }
.sc-checkout-page .delivery-option__price { font-family: var(--sc-sans); font-weight: 600; font-size: 16px; color: var(--sc-copper); }
/* payment options (markup réel = .payment-options__list > .payment-option) */
.sc-checkout-page .payment-options__list { display: flex; flex-direction: column; gap: 12px; }
.sc-checkout-page .payment-option { border: 1px solid var(--sc-line); background: #fff; padding: 18px 22px; margin: 0; transition: border-color .2s; }
.sc-checkout-page .payment-option:has(.form-check-input:checked) { border-color: var(--sc-navy); }
.sc-checkout-page .payment-option .form-check { margin: 0; align-items: center; }
.sc-checkout-page .payment-option__label { font-family: var(--sc-sans); font-weight: 600; font-size: 15px; color: var(--sc-heading); margin: 0; }
.sc-checkout-page .js-additional-information, .sc-checkout-page .additional-information { font-size: 14px; color: var(--sc-text-soft); }
.sc-checkout-page #conditions-to-approve { margin: 24px 0 4px; }
/* checkboxes : Bootstrap (padding-left + float) désalignait les labels longs → flex */
.sc-checkout-page .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; }
.sc-checkout-page .form-check .form-check-input { flex: 0 0 auto; float: none; margin: 3px 0 0; border-radius: 0; }
.sc-checkout-page .form-check .form-check-input:checked { background-color: var(--sc-navy); border-color: var(--sc-navy); }
.sc-checkout-page .form-check-label { margin: 0; }
/* mode B2B global : champs Société/SIRET/TVA masqués dans le tunnel (parcours B2C —
les pros ont ces infos sur leur compte via l'Espace Pro) */
.sc-checkout-page .sc-field-company, .sc-checkout-page .sc-field-siret, .sc-checkout-page .sc-field-vat_number { display: none; }
/* 3e onglet « Créer un compte pro » (étape 1) — bascule le pane invité en mode pro, sans redirection */
.sc-checkout-page .nav-underline .nav-link.sc-nav-link-pro { color: var(--sc-gold-dark); }
.sc-checkout-page .nav-underline .nav-link.sc-nav-link-pro:hover { color: var(--sc-navy); border-bottom: 2px solid var(--sc-gold); }
.sc-checkout-page .nav-underline .nav-link.sc-nav-link-pro.active { color: var(--sc-gold-dark); border-bottom: 2px solid var(--sc-gold); }
/* mode pro : réaffiche Société/SIRET (masqués en B2C) et force le bloc mot de passe */
.sc-checkout-page .sc-pro-mode .sc-field-company,
.sc-checkout-page .sc-pro-mode .sc-field-siret { display: block; }
.sc-checkout-page .sc-pro-mode .form-check:has(.js-password-form__check) { display: none; }
.sc-checkout-page .sc-pro-mode .js-password-form__input-wrapper { display: block !important; margin-top: 0 !important; }
/* boutons : tous les btn-primary/outline du tunnel au style maison (ils restaient bleu Bootstrap)
⚠️ le wrapper d'étape est section.step (PAS .checkout-step) */
.sc-checkout-page .step .btn-primary,
.sc-checkout-page #payment-confirmation .btn,
.sc-checkout-page .continue {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 0;
background: var(--sc-gold); color: #fff; border: 1px solid var(--sc-gold);
font-family: var(--sc-sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 16px 34px;
}
.sc-checkout-page .step .btn-primary:hover,
.sc-checkout-page #payment-confirmation .btn:hover, .sc-checkout-page .continue:hover { background: var(--sc-gold-dark); border-color: var(--sc-gold-dark); color: #fff; }
.sc-checkout-page .step .btn-outline-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 0;
background: transparent; color: var(--sc-navy); border: 1px solid var(--sc-navy);
font-family: var(--sc-sans); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 26px;
}
.sc-checkout-page .step .btn-outline-primary:hover { background: var(--sc-navy); color: #fff; }
.sc-checkout-page .step .btn .material-icons { font-size: 17px; }
/* ⚠️ la règle or `.step .btn-primary` attrapait aussi le bouton œil du champ mot de passe
(input-group) → il s'étalait en doré sur toute la largeur. On le re-fixe ici (plus spécifique). */
.sc-checkout-page .step .input-group .btn,
.sc-checkout-page .step .input-group .btn-primary {
flex: 0 0 52px; width: 52px; padding: 0; letter-spacing: 0;
background: #fff; color: var(--sc-navy); border: 1px solid var(--sc-line); border-left: 0;
}
.sc-checkout-page .step .input-group .btn:hover { background: var(--sc-navy); color: #fff; border-color: var(--sc-navy); }
.sc-checkout-page .step .input-group .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
.sc-checkout-page .step__edit-button, .sc-checkout-page .step-edit { color: var(--sc-copper); font-size: 13px; }
/* checkout aside: not sticky-collapsed accordion styling reuse */
body#order .sc-cart-summary { position: sticky; top: 30px; }
body#order .checkout__summary-accordion .accordion-button { background: none; box-shadow: none; }
body#order .checkout__summary-accordion .accordion-button::after { display: none; }
/* 28.x — CONFIRMATION */
.sc-confirm-wrap { padding-top: 50px; padding-bottom: 90px; max-width: 900px; }
.sc-confirm-hero { background: #fff; border: 1px solid var(--sc-line); text-align: center; padding: 54px 40px 50px; margin-bottom: 24px; }
.sc-confirm-hero__check { width: 74px; height: 74px; border-radius: 50%; background: rgba(194,164,106,.14); color: var(--sc-gold-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.sc-confirm-hero__title { font-family: var(--sc-serif); font-weight: 600; font-size: 38px; line-height: 1.1; color: var(--sc-heading); margin: 6px 0 14px; }
.sc-confirm-hero__text { font-size: 16px; line-height: 1.6; color: var(--sc-text-soft); margin: 0; max-width: 560px; margin-inline: auto; }
.sc-confirm-hero__invoice { margin-top: 18px; }
.sc-confirm-card { background: #fff; border: 1px solid var(--sc-line); padding: 34px 36px; margin-bottom: 24px; }
.sc-confirm-card__title { font-family: var(--sc-serif); font-weight: 600; font-size: 26px; color: var(--sc-heading); margin: 0 0 22px; }
.sc-confirm-meta { list-style: none; margin: 0 0 24px; padding: 0 0 8px; border-bottom: 1px solid var(--sc-line); }
.sc-confirm-meta li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; font-size: 15px; }
.sc-confirm-meta li span { color: var(--sc-text-soft); }
.sc-confirm-meta li strong { color: var(--sc-heading); font-weight: 600; text-align: right; }
.sc-confirm-actions { text-align: center; margin-top: 30px; }
/* =====================================================================
29. RESPONSIVE — compte & tunnel
===================================================================== */
@media (max-width: 991px) {
.sc-auth { grid-template-columns: 1fr; min-height: 0; }
.sc-auth__media { min-height: 280px; padding: 40px; }
.sc-auth__media-title { font-size: 30px; }
.sc-auth__panel { padding: 52px 28px; }
.sc-auth__title { font-size: 34px; }
.sc-page-band__title { font-size: 34px; }
.sc-checkout-page .checkout-steps__step { padding-right: 18px; }
.sc-checkout-page .checkout-steps__btn { font-size: 13px; }
body#cart .sc-cart-summary, body#order .sc-cart-summary { position: static; margin-top: 28px; }
.sc-cart-summary { position: static !important; }
}
@media (max-width: 576px) {
.sc-auth__panel { padding: 40px 20px; }
.sc-auth__title { font-size: 28px; }
.sc-page-band__inner { padding: 36px 0 30px; }
.sc-page-band__title { font-size: 28px; }
.sc-steps__item .sc-steps__label { display: none; }
.sc-steps__item:not(:last-child)::after { width: 22px; margin: 0 8px; }
.sc-cart-page .product-line { flex-direction: column; gap: 14px; }
.sc-cart-page .product-line__image { width: 96px; flex-basis: 96px; }
.sc-cart-page .product-line__content { grid-template-columns: 1fr; grid-template-areas: "left" "right" "actions"; gap: 12px; }
.sc-cart-page .product-line__content-right { align-items: flex-start; }
.sc-confirm-hero__title { font-size: 28px; }
.sc-confirm-card { padding: 24px 20px; }
.sc-confirm-meta li { flex-direction: column; gap: 2px; }
.sc-confirm-meta li strong { text-align: left; }
}
/* ----------------------------------------------------------------- */
/* 30. FICHE PRODUIT — sections modules (même collection / déjà vus) */
/* ----------------------------------------------------------------- */
.ps-categoryproducts, .ps-viewedproduct { padding: 85px 0 10px; }
.ps-viewedproduct { padding-bottom: 100px; }
.ps-categoryproducts .section-title, .ps-viewedproduct .section-title { display: none; }
@media (max-width: 768px) {
.ps-categoryproducts, .ps-viewedproduct { padding-top: 56px; }
.ps-viewedproduct { padding-bottom: 64px; }
}
/* ----------------------------------------------------------------- */
/* 31. FICHE PRODUIT — carousel avis clients */
/* ----------------------------------------------------------------- */
.sc-ptesti__slide { display: none; }
.sc-ptesti__slide.is-active { display: block; animation: scFadeIn .45s ease; }
@keyframes scFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-ptesti__nav { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.sc-ptesti__arrow {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sc-line);
background: #fff; color: var(--sc-navy); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.sc-ptesti__arrow:hover { background: var(--sc-navy); color: #fff; }
.sc-ptesti__dots { display: flex; gap: 8px; }
.sc-ptesti__dot {
width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
background: var(--sc-line); cursor: pointer; transition: background .2s;
}
.sc-ptesti__dot.is-active { background: var(--sc-gold); }
/* ----------------------------------------------------------------- */
/* 32. FICHE PRODUIT — bouton favoris (à côté d'ajouter au panier) */
/* ----------------------------------------------------------------- */
.sc-fav-btn {
width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid var(--sc-line);
background: #fff; color: var(--sc-navy); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color .2s, border-color .2s, transform .15s;
}
.sc-fav-btn:hover { border-color: var(--sc-navy); transform: translateY(-1px); }
.sc-fav-btn.is-active { color: var(--sc-gold); border-color: var(--sc-gold); }
.sc-fav-btn.is-active svg path { fill: currentColor; }
.sc-product__icon[data-sc-fav].is-active { color: var(--sc-gold); }
.sc-product__icon[data-sc-fav].is-active svg path { fill: currentColor; }
/* ----------------------------------------------------------------- */
/* 33. QUICKVIEW (aperçu rapide) — alignement design */
/* ----------------------------------------------------------------- */
.quickview .modal-content { border: none; border-radius: 0; font-family: var(--sc-sans); color: var(--sc-text); }
.quickview .product__name { font-family: var(--sc-serif); font-weight: 600; color: var(--sc-heading); }
.quickview .product__prices .current-price, .quickview .current-price-display { color: var(--sc-heading); font-family: var(--sc-serif); }
.quickview .product-flags { display: none; }
.quickview .btn-primary {
background: var(--sc-gold); border-color: var(--sc-gold);
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 0;
}
.quickview .btn-primary:hover, .quickview .btn-primary:focus { background: var(--sc-gold-dark); border-color: var(--sc-gold-dark); }
.quickview .btn-primary .material-icons { display: none; }
.quickview .product-variant__legend { float: none; width: auto; margin: 0; font-weight: 600; color: var(--sc-navy); }
.quickview .product-variant__label { display: flex; align-items: baseline; gap: 5px; }
.quickview .product-variant__colors { clear: both; }
.quickview .input-color__label { border-radius: 50%; overflow: hidden; }
.quickview .input-color__label .color { border-radius: 50%; }
.quickview .product__actions-qty-add { display: flex; align-items: stretch; gap: 12px; }
.quickview .quantity-button__group { border-radius: 0; height: 48px; }
.quickview .product__add-to-cart { flex: 1; display: flex; }
.quickview .product__add-to-cart-button { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.quickview .sc-fav-btn { width: 48px; height: 48px; flex: 0 0 48px; }
/* ----------------------------------------------------------------- */
/* 34. RECHERCHE — overlay AJAX */
/* ----------------------------------------------------------------- */
.sc-search {
position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
background: #fff; box-shadow: 0 18px 50px rgba(11, 25, 55, .14);
padding: 34px 0 28px; max-height: 100vh; overflow-y: auto;
}
body.sc-search-open { overflow: hidden; }
.sc-search__form { display: flex; align-items: center; gap: 14px; border-bottom: 1.5px solid var(--sc-navy); padding-bottom: 12px; }
.sc-search__icon { color: var(--sc-navy); flex: 0 0 auto; }
.sc-search__input { flex: 1; border: 0; outline: none; font-family: var(--sc-sans); font-size: 18px; color: var(--sc-navy); background: none; }
.sc-search__input::placeholder { color: var(--sc-text-soft); }
.sc-search__input::-webkit-search-cancel-button { display: none; }
.sc-search__close { border: 0; background: none; color: var(--sc-navy); cursor: pointer; padding: 6px; }
.sc-search__close:hover { color: var(--sc-copper); }
.sc-search__meta { margin-top: 18px; font-size: 14px; color: var(--sc-text-soft); }
.sc-search__meta a { color: var(--sc-copper); }
.sc-search__results { margin-top: 4px; }
.sc-search__results .sc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; padding-inline: 0; max-width: none; }
.sc-search__results .products__pagination { display: none; }
.sc-search__results .sc-product__name { font-size: 17px; }
@media (max-width: 768px) {
.sc-search { padding-top: 22px; }
.sc-search__results .sc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* ==================================================================== */
/* 35. ESPACE PRO — inscription B2B (?pro=1) */
/* Le mode PS_B2B_ENABLE ajoute Société + SIRET au customer-form : */
/* on ne les montre que sur la variante pro de la page d'inscription. */
/* ==================================================================== */
.sc-auth--register:not(.sc-auth--pro) .sc-field-company,
.sc-auth--register:not(.sc-auth--pro) .sc-field-siret { display: none; }