/* ============================================================
   EVIDECO DESIGN SYSTEM — Direction A « Maison française »
   Map these tokens 1:1 into the Divi/WordPress theme.
   ============================================================ */
:root {
  /* Brand palette — straight from the Evideco logo mosaic */
  --brand-yellow:  #F9C513;
  --brand-green:   #6FBE2E;
  --brand-red:     #EF3B24;
  --brand-blue:    #2E77BC;
  --brand-pink:    #E5157A;

  /* Colors */
  --bg:            #FFFDF8;   /* warm white page background */
  --surface:       #FFFFFF;   /* cards, panels */
  --surface-warm:  #FBF4E4;   /* buttercream section background */
  --ink:           #1D1D1B;   /* logo black — headings */
  --text:          #3F3E3A;   /* body text */
  --muted:         #8B877D;   /* secondary text */
  --border:        #EBE4D6;   /* hairlines, card borders */
  --primary:       var(--brand-blue);   /* CTAs, links */
  --primary-dark:  #1F5E9E;   /* hover state */
  --primary-soft:  #E4F0FB;   /* tinted backgrounds */
  --accent:        var(--brand-pink);   /* details, eyebrows, highlights */
  --success:       var(--brand-green);  /* in stock, confirmations */
  --sale:          var(--brand-red);    /* sale badges & prices */
  --star:          #F0A70A;   /* ratings */

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, Segoe UI, sans-serif;
  --font-script: "Caveat", cursive;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(38,37,31,.07);
  --shadow-md: 0 6px 20px rgba(38,37,31,.09);
  --shadow-lg: 0 16px 40px rgba(38,37,31,.13);

  /* Layout */
  --container-max: 1240px;
  --header-h: 64px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 500; line-height: 1.15; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .container { padding: 0 var(--sp-6); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Mockup view switcher (dev-only bar, remove for prod) ---------- */
.mock-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap;
  background: var(--ink); padding: var(--sp-2) var(--sp-3);
}
.mock-bar button {
  background: transparent; color: #CFC9BC; border: 1px solid #4A4940;
  border-radius: var(--r-pill); padding: 5px 14px; font-size: .8rem; font-weight: 600;
  letter-spacing: .03em;
}
.mock-bar button:hover { color: #fff; border-color: #8B857A; }
.mock-bar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.view { display: none; padding-bottom: 56px; }
.view.is-active { display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  border-radius: var(--r-pill); padding: 13px 28px; border: 1.5px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
/* Texte FONCE et non blanc : sur un orange assez vif pour ne pas etre lu comme
   du rouge, le blanc plafonne a 2,4:1 — tres en dessous des 4,5 exiges. En
   encre on monte a 7,86:1, soit AAA. */
.btn-cta { background: var(--cta); color: var(--cta-ink); }
.btn-cta:hover { background: var(--cta-hover); color: var(--cta-ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-light:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: .85rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-sm);
}
.badge-sale { background: var(--sale); color: #fff; }
.badge-new { background: var(--brand-green); color: #fff; }
.badge-oos { background: var(--surface-warm); color: var(--muted); border: 1px solid var(--border); }

/* ---------- Section headings ---------- */
.eyebrow {
  display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--sp-3);
}
.section { padding: var(--sp-8) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.section-head .link-all { font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* ---------- Header ---------- */
.announce {
  background: var(--brand-yellow); color: var(--ink); text-align: center;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; padding: 8px var(--sp-4);
}
.announce strong { color: var(--brand-red); }
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,253,248,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* signature rainbow hairline under the header — echoes the logo mosaic */
.site-header::after {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg,
    var(--brand-yellow) 0 20%, var(--brand-green) 20% 40%, var(--brand-red) 40% 60%,
    var(--brand-blue) 60% 80%, var(--brand-pink) 80% 100%);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--header-h);
}
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo .logo-mark { width: 38px; height: 38px; flex: none; }
.logo .logo-text {
  font-family: var(--font-body); font-size: 1.42rem; font-weight: 800;
  color: var(--ink); letter-spacing: .04em; line-height: 1;
}
.logo small {
  display: block; font-family: var(--font-script); font-size: .95rem; font-weight: 700;
  letter-spacing: .02em; text-transform: none; color: var(--brand-red); margin-top: 0;
  line-height: 1;
}

.main-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-pill);
  background: transparent; border: none; color: var(--ink);
}
.icon-btn:hover { background: var(--surface-warm); }
.icon-btn svg { width: 21px; height: 21px; }
.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px;
  background: var(--sale); color: #fff; font-size: .66rem; font-weight: 700;
  border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.header-search { display: none; flex: 1; max-width: 380px; }
.header-search .search-wrap { position: relative; width: 100%; }
.header-search input {
  width: 100%; padding: 10px 16px 10px 42px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface); font-size: .92rem;
}
.header-search input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.header-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }

@media (min-width: 1024px) {
  .main-nav { display: flex; gap: var(--sp-5); }
  .main-nav a { color: var(--ink); font-weight: 600; font-size: .92rem; padding: 6px 0; border-bottom: 2px solid transparent; }
  .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
  .header-search { display: block; margin-left: auto; }
  .header-actions { margin-left: 0; }
  .burger { display: none !important; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(38,37,31,.45); opacity: 0; transition: opacity .25s; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw);
  background: var(--surface); padding: var(--sp-5); overflow-y: auto;
  transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-panel .logo { margin-bottom: var(--sp-2); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  color: var(--ink); font-weight: 600; padding: 13px 0; font-size: 1.02rem;
  border-bottom: 1px solid var(--border);
}
.drawer-close { align-self: flex-end; }
.drawer-panel .search-wrap { position: relative; }
.drawer-panel .search-wrap input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--border); border-radius: var(--r-pill); }
.drawer-panel .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }

/* ---------- Product placeholder "photos" ---------- */
.ph {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}
.ph svg.ph-icon { width: 34%; height: 34%; color: rgba(38,37,31,.34); stroke-width: 1.3; }
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 55%);
}
.ph-wide { aspect-ratio: 4 / 3; }
.ph-tall { aspect-ratio: 3 / 4; }
/* colorful "photography" tints — pastels of the logo palette */
.t-linen   { background: linear-gradient(145deg, #FDF2C8, #F6DC82); }  /* sunny yellow */
.t-blue    { background: linear-gradient(145deg, #DDEBF9, #A6CAEB); }  /* sky blue */
.t-sage    { background: linear-gradient(145deg, #E5F4D2, #B3DF89); }  /* fresh green */
.t-taupe   { background: linear-gradient(145deg, #FCE9D2, #F2C596); }  /* peach */
.t-navy    { background: linear-gradient(145deg, #BED9F1, #6FA3D8); }  /* bold blue */
.t-clay    { background: linear-gradient(145deg, #FBDEE9, #F0A6C4); }  /* rose */
.t-cream   { background: linear-gradient(145deg, #FFF6DE, #F3E1AC); }  /* cream */
.t-stone   { background: linear-gradient(145deg, #EFEAF7, #CDC2E5); }  /* lilac */

/* ---------- Product card ---------- */
.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
}
@media (min-width: 768px)  { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.product-card .card-media { position: relative; border-radius: 0; }
.product-card .card-badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: var(--sp-1); z-index: 2; }
.card-wish {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 2;
  width: 36px; height: 36px; border-radius: var(--r-pill); border: none;
  background: rgba(255,255,255,.9); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.card-wish svg { width: 17px; height: 17px; }
.product-card:hover .card-wish, .card-wish:focus-visible { opacity: 1; }
.card-quickadd {
  /* 🔴 Ne PAS remettre `btn-block` (width:100%) ici : sur un element en
     `position:absolute` ancre a gauche ET a droite, `width:100%` se calcule sur
     la largeur du CONTENEUR et non sur la boite definie par les deux ancrages.
     Le bouton restait cale a gauche et debordait de var(--sp-3) a droite. */
  position: absolute; left: 0; right: 0; bottom: var(--sp-3); z-index: 2;
  width: fit-content; margin-inline: auto; max-width: calc(100% - var(--sp-6));
  padding: 9px 20px; font-size: .82rem;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.product-card:hover .card-quickadd, .card-quickadd:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .card-quickadd, .card-wish { opacity: 1; transform: none; } }
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-title { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.card-title a { color: inherit; }
.card-title a:hover { color: var(--primary); }
.stars { display: inline-flex; align-items: center; gap: 6px; color: var(--star); font-size: .85rem; letter-spacing: 2px; }
.stars .count { color: var(--muted); font-size: .8rem; letter-spacing: 0; }
.card-price { margin-top: auto; padding-top: 4px; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.card-price .was { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: .88rem; margin-right: 6px; }
.card-price.on-sale { color: var(--sale); }
.card-oos { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #B8B2A6; margin-top: var(--sp-8); }
.footer-newsletter { border-bottom: 1px solid #3B3A33; padding: var(--sp-7) 0; }
.footer-newsletter .inner { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-newsletter h3 { color: #fff; font-size: 1.5rem; }
.footer-newsletter p { max-width: 46ch; }
.newsletter-form { display: flex; gap: var(--sp-2); width: 100%; max-width: 460px; }
.newsletter-form input {
  flex: 1; min-width: 0; padding: 13px 18px; border-radius: var(--r-pill);
  border: 1px solid #4A4940; background: #34332C; color: #fff;
}
.newsletter-form input::placeholder { color: #8B857A; }
.newsletter-form .btn { background: var(--accent); color: #fff; border: none; }
.newsletter-form .btn:hover { background: #C00E65; }
@media (min-width: 900px) {
  .footer-newsletter .inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5);
  /* ⚠️ Surtout PAS le raccourci `padding: X 0` : ces blocs portent AUSSI la
     classe .container, qui fournit la marge laterale (var(--sp-4)). Le
     raccourci la remettait a zero et collait tout le pied de page au bord
     gauche sous ~1240px de viewport. */
  padding-top: var(--sp-7); padding-bottom: var(--sp-7);
}
@media (min-width: 900px) { .footer-cols { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.footer-brand p { font-size: .92rem; max-width: 30ch; margin-top: var(--sp-3); }
.footer-brand .logo-text { color: #fff; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-col a { display: block; color: #B8B2A6; padding: 5px 0; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid #3B3A33;
  padding-top: var(--sp-4); padding-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: center;
  font-size: .8rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.pay-icons { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pay-chip {
  background: #fff; color: var(--ink); font-size: .68rem; font-weight: 700;
  border-radius: 4px; padding: 4px 9px; letter-spacing: .02em;
}
/* ============================================================
   VIEW: HOME
   ============================================================ */
.hero { background: var(--surface-warm); overflow: hidden; position: relative; }
/* confetti mosaic squares — echo of the logo */
.hero::before {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 4px;
  top: 14%; left: 44%; background: var(--brand-yellow); transform: rotate(14deg);
  box-shadow:
    -60px  190px 0 -2px var(--brand-pink),
     40px  320px 0 -4px var(--brand-green),
    -180px  60px 0 -5px var(--brand-blue),
     90px   40px 0 -3px var(--brand-red),
    -110px 300px 0 -6px var(--brand-yellow);
  pointer-events: none;
}
@media (max-width: 899px) { .hero::before { display: none; } }
.hero-inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  /* ⚠️ Voir .footer-cols : .hero-inner porte AUSSI .container. Pas de
     raccourci `padding`, il ecraserait la marge laterale. */
  padding-top: var(--sp-7); padding-bottom: var(--sp-7);
  align-items: center;
}
.hero-copy h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin: var(--sp-3) 0 var(--sp-4); }
.hero-copy h1 em {
  font-style: italic; color: var(--brand-blue);
  background: linear-gradient(transparent 70%, rgba(249,197,19,.5) 70%);
}
.hero-copy p { font-size: 1.08rem; max-width: 48ch; margin-bottom: var(--sp-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-media { position: relative; }
.hero-media .ph { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero-card {
  position: absolute; bottom: -14px; left: var(--sp-4);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  font-size: .85rem;
}
.hero-card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}

/* Category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 768px)  { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(6, 1fr); } }
.cat-tile {
  display: flex; flex-direction: column; gap: var(--sp-2);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); padding: var(--sp-2);
  transition: box-shadow .2s, transform .2s;
}
.cat-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* one logo color per category tile */
.cat-grid .cat-tile:nth-child(6n+1) { border-top: 3px solid var(--brand-blue); }
.cat-grid .cat-tile:nth-child(6n+2) { border-top: 3px solid var(--brand-yellow); }
.cat-grid .cat-tile:nth-child(6n+3) { border-top: 3px solid var(--brand-red); }
.cat-grid .cat-tile:nth-child(6n+4) { border-top: 3px solid var(--brand-green); }
.cat-grid .cat-tile:nth-child(6n+5) { border-top: 3px solid var(--brand-pink); }
.cat-grid .cat-tile:nth-child(6n+6) { border-top: 3px solid var(--brand-blue); }
.cat-tile .ph { border-radius: var(--r-sm); }
.cat-tile .label {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  color: var(--ink); font-weight: 600; font-size: .88rem;
}
.cat-tile .label svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* Reassurance */
.reassure { background: var(--surface-warm); }
.reassure-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
@media (min-width: 700px) { .reassure-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reassure-grid { grid-template-columns: repeat(4, 1fr); } }
.reassure-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.reassure-item .ic {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--primary);
}
/* one logo color per reassurance item */
.reassure-item:nth-child(1) .ic { color: var(--brand-blue);  background: #E4F0FB; border-color: transparent; }
.reassure-item:nth-child(2) .ic { color: var(--brand-green); background: #EAF6DC; border-color: transparent; }
.reassure-item:nth-child(3) .ic { color: var(--brand-red);   background: #FDE8E4; border-color: transparent; }
.reassure-item:nth-child(4) .ic { color: var(--brand-pink);  background: #FCE3F0; border-color: transparent; }
.reassure-item .ic svg { width: 21px; height: 21px; }
.reassure-item h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; }
.reassure-item p { font-size: .87rem; color: var(--muted); }

/* Editorial */
.editorial { }
.editorial-inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center;
}
@media (min-width: 900px) { .editorial-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.editorial .ph { border-radius: var(--r-lg); }
.editorial h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: var(--sp-4); }
.editorial p { margin-bottom: var(--sp-4); max-width: 55ch; }
.editorial blockquote {
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: var(--sp-4); margin: var(--sp-5) 0;
}

/* ============================================================
   VIEW: CATALOG
   ============================================================ */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: .84rem; color: var(--muted); padding: var(--sp-4) 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.catalog-hero { padding-bottom: var(--sp-5); }
.catalog-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--sp-2); }
.catalog-hero p { max-width: 62ch; color: var(--muted); }

.catalog-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .catalog-layout { grid-template-columns: 250px 1fr; } }

.filters-toggle { display: inline-flex; }
@media (min-width: 1024px) { .filters-toggle { display: none; } }
.filters {
  display: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.filters.is-open { display: block; }
@media (min-width: 1024px) { .filters { display: block; position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.filter-group { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.filter-group:first-child { border-top: 0; padding-top: 0; }
.filter-group h3 { font-family: var(--font-body); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.filter-option { display: flex; align-items: center; gap: var(--sp-2); padding: 5px 0; font-size: .92rem; color: var(--text); }
.filter-option input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }
.filter-option .n { color: var(--muted); font-size: .8rem; margin-left: auto; }
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  width: 28px; height: 28px; border-radius: var(--r-pill); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0;
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.price-inputs { display: flex; align-items: center; gap: var(--sp-2); }
.price-inputs input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .9rem; background: var(--bg);
}
.filters .clear-link { font-size: .85rem; }

.catalog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.catalog-toolbar .count { color: var(--muted); font-size: .9rem; margin-right: auto; }
.sort-select {
  padding: 9px 36px 9px 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2345433C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; font-size: .9rem; font-weight: 600; color: var(--ink);
}
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft); color: var(--primary-dark);
  border: none; border-radius: var(--r-pill); padding: 6px 12px; font-size: .82rem; font-weight: 600;
}
.chip svg { width: 12px; height: 12px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.page-btn {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: .9rem; padding: 0 var(--sp-3);
}
.page-btn:hover { border-color: var(--ink); }
.page-btn[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-btn[disabled] { opacity: .4; cursor: default; }

/* ============================================================
   VIEW: PRODUCT
   ============================================================ */
.pdp-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 1024px) { .pdp-layout { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); } }

.pdp-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp-main { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.pdp-main .badge { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pdp-thumb {
  border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent;
  padding: 0; background: none; cursor: pointer;
}
.pdp-thumb[aria-pressed="true"] { border-color: var(--primary); }
.pdp-thumb:hover { border-color: var(--border); }
.pdp-thumb[aria-pressed="true"]:hover { border-color: var(--primary); }

.pdp-info h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: var(--sp-2) 0 var(--sp-3); }
.pdp-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0; }
.pdp-price .now { font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.pdp-price .was { color: var(--muted); text-decoration: line-through; font-size: 1.05rem; }
.pdp-price .save { color: var(--sale); font-weight: 700; font-size: .9rem; }
.pdp-stock { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--success); margin-bottom: var(--sp-4); }
.pdp-stock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }

.option-block { margin-bottom: var(--sp-4); }
.option-block .opt-label { display: flex; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); }
.option-block .opt-label .val { color: var(--muted); font-weight: 500; }
.size-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.size-btn {
  padding: 10px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--border);
  background: var(--surface); font-weight: 600; font-size: .88rem; color: var(--ink);
}
.size-btn:hover { border-color: var(--ink); }
.size-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.size-btn[disabled] { color: var(--muted); background: var(--bg); text-decoration: line-through; cursor: not-allowed; }

.buy-row { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); flex-wrap: wrap; }
.qty {
  display: inline-flex; align-items: center; border: 1.5px solid var(--border);
  border-radius: var(--r-pill); overflow: hidden; background: var(--surface); flex: none;
}
.qty button { width: 44px; height: 50px; border: none; background: none; font-size: 1.15rem; color: var(--ink); }
.qty button:hover { background: var(--surface-warm); }
.qty input { width: 44px; text-align: center; border: none; font-weight: 700; font-size: 1rem; background: transparent; }
.buy-row .btn-primary { flex: 1; min-width: 200px; }
.pdp-perks { display: flex; flex-direction: column; gap: 8px; margin: var(--sp-4) 0; padding: var(--sp-4); background: var(--surface-warm); border-radius: var(--r-md); font-size: .88rem; }
.pdp-perks li { display: flex; gap: 10px; align-items: center; list-style: none; }
.pdp-perks svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

/* Accordion */
.accordion { border-top: 1px solid var(--border); margin-top: var(--sp-5); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: none; border: none; padding: var(--sp-4) 0;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink); text-align: left;
}
.acc-trigger svg { width: 16px; height: 16px; flex: none; transition: transform .2s; color: var(--muted); }
.acc-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-panel { display: none; padding: 0 0 var(--sp-4); font-size: .95rem; }
.acc-panel.is-open { display: block; }
.acc-panel ul { padding-left: 1.2em; margin: var(--sp-2) 0; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--border); }
.spec-table th { color: var(--muted); font-weight: 600; width: 42%; }

/* ============================================================
   VIEW: CART
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: 1.6fr 1fr; gap: var(--sp-7); } }
.cart-lines { display: flex; flex-direction: column; }
.cart-line {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-4);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--border);
}
.cart-line .ph { border-radius: var(--r-sm); }
.cart-line-body { display: flex; flex-direction: column; gap: 6px; }
.cart-line-top { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.cart-line h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 600; }
.cart-line .variant { font-size: .84rem; color: var(--muted); }
.cart-line .line-price { font-weight: 700; white-space: nowrap; }
.cart-line-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: auto; padding-top: var(--sp-2); }
.cart-line .qty button { height: 38px; width: 36px; }
.cart-line .qty input { width: 34px; font-size: .9rem; }
.link-remove { background: none; border: none; color: var(--muted); font-size: .84rem; text-decoration: underline; padding: 0; }
.link-remove:hover { color: var(--sale); }

.summary-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.summary-card h2 { font-size: 1.3rem; margin-bottom: var(--sp-4); }
.promo-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.promo-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); }
.summary-rows { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4) 0; border-top: 1px solid var(--border); font-size: .95rem; }
.summary-rows .row { display: flex; justify-content: space-between; }
.summary-rows .hint { color: var(--muted); font-size: .84rem; }
.summary-rows .discount { color: var(--success); font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; padding: var(--sp-4) 0; border-top: 1px solid var(--border); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: var(--sp-4); }
.pay-methods-inline { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.cart-note { text-align: center; font-size: .82rem; color: var(--muted); margin-top: var(--sp-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cart-note svg { width: 14px; height: 14px; }
.free-ship-bar { background: var(--primary-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: .88rem; color: var(--primary-dark); margin-bottom: var(--sp-4); }
.free-ship-bar .track { height: 6px; background: #fff; border-radius: var(--r-pill); margin-top: 8px; overflow: hidden; }
.free-ship-bar .fill { height: 100%; width: 100%; background: var(--success); border-radius: var(--r-pill); }

/* ============================================================
   VIEW: CHECKOUT
   ============================================================ */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) { .checkout-layout { grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); } }
.checkout-steps { display: flex; gap: var(--sp-2); align-items: center; font-size: .84rem; color: var(--muted); flex-wrap: wrap; padding-bottom: var(--sp-4); }
.checkout-steps .step { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.checkout-steps .num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
}
.checkout-steps .step.done .num, .checkout-steps .step.current .num { background: var(--primary); color: #fff; }
.checkout-steps .step.current { color: var(--ink); }
.checkout-steps svg { width: 13px; height: 13px; }

.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.form-card h2 { font-size: 1.25rem; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 10px; }
.form-card h2 svg { width: 19px; height: 19px; color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); font-size: .95rem;
}
.field input:focus, .field select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface); }
.field .help { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.check-row input { width: 17px; height: 17px; accent-color: var(--primary); }

.radio-card { display: block; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); cursor: pointer; transition: border-color .15s, background .15s; }
.radio-card + .radio-card { margin-top: var(--sp-3); }
.radio-card:hover { border-color: var(--muted); }
.radio-card.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.radio-card .rc-head { display: flex; align-items: center; gap: var(--sp-3); }
.radio-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.radio-card .rc-title { font-weight: 700; color: var(--ink); font-size: .95rem; }
.radio-card .rc-sub { font-size: .84rem; color: var(--muted); }
.radio-card .rc-price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.radio-card .rc-body { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); display: none; }
.radio-card.is-selected .rc-body { display: block; }
.rc-logos { display: flex; gap: var(--sp-2); margin-left: auto; }

.order-summary {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5);
}
@media (min-width: 1024px) { .order-summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.order-summary h2 { font-size: 1.25rem; margin-bottom: var(--sp-4); }
.os-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.os-line .ph { border-radius: var(--r-sm); position: relative; }
.os-line .thumb { position: relative; }
.os-line .qty-pin {
  position: absolute; top: -7px; right: -7px; z-index: 2; min-width: 20px; height: 20px;
  background: var(--muted); color: #fff; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.os-line .t { font-weight: 600; color: var(--ink); line-height: 1.3; }
.os-line .v { color: var(--muted); font-size: .8rem; }
.os-line .p { font-weight: 700; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; } .text-center { text-align: center; }
.icon-16 { width: 16px; height: 16px; }

/* ============================================================
   VERSION B — category-first navigation & department home
   ============================================================ */
.header-search { max-width: 300px; }

.allcats-btn {
  display: none; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border: none;
  border-radius: var(--r-pill); padding: 11px 20px; font-weight: 700; font-size: .9rem;
}
.allcats-btn svg { width: 17px; height: 17px; }
.allcats-btn:hover { background: #000; }
.allcats-btn .caret { width: 12px; height: 12px; transition: transform .2s; }
.allcats-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
@media (min-width: 1024px) { .allcats-btn { display: inline-flex; } }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: none; z-index: 400;
}
.mega.is-open { display: block; }
.mega-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.mega-col h4 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--dept, var(--brand-blue)); color: var(--ink);
}
.mega-col a { display: block; color: var(--text); font-size: .87rem; padding: 4px 0; }
.mega-col a:hover { color: var(--primary); }
.mega-col .more { color: var(--dept, var(--primary)); font-weight: 700; margin-top: 8px; }

.chip-bar-wrap { background: var(--surface); border-bottom: 1px solid var(--border); }
.chip-bar { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 10px var(--sp-4); scrollbar-width: none; }
.chip-bar::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chip-bar { padding: 10px var(--sp-6); } }
.cat-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  border-radius: var(--r-pill); padding: 7px 15px; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.cat-chip:hover { border-color: var(--ink); }
.cat-chip .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* compact hero banner */
.hero-b .hero-inner { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
@media (min-width: 900px) { .hero-b .hero-inner { padding-top: var(--sp-7); padding-bottom: var(--sp-7); grid-template-columns: 1.3fr 1fr; } }
.hero-b .hero-copy h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); }
.hero-b .ph-wide { aspect-ratio: 16 / 10; }

/* department directory cards */
.dir-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 700px)  { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }
.dir-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  border-top: 4px solid var(--dept, var(--brand-blue));
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: box-shadow .2s, transform .2s;
}
.dir-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.dir-card h3 { font-size: 1.12rem; display: flex; align-items: center; gap: 11px; }
.dir-card h3 .ic {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dept) 14%, white); color: var(--dept);
}
.dir-card h3 .ic svg { width: 21px; height: 21px; }
.dir-links { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.dir-card { color: var(--text); }
.dir-card:hover h3 { color: var(--dept); }
.dir-links span { font-size: .86rem; color: var(--text); }
.dir-links span:nth-child(even) { color: var(--border); }
.dir-card .shop-all { margin-top: auto; padding-top: var(--sp-1); font-weight: 700; font-size: .88rem; color: var(--dept, var(--primary)); }

/* department product rows */
.dept-row { padding-top: var(--sp-7); }
.dept-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dept-head .bar { width: 24px; height: 24px; border-radius: 7px; background: var(--dept, var(--brand-blue)); flex: none; }
.dept-head h2 { font-size: 1.45rem; margin-right: auto; }
.dept-head .sublinks { display: none; gap: var(--sp-3); }
@media (min-width: 1100px) { .dept-head .sublinks { display: flex; } }
.dept-head .sublinks a { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dept-head .sublinks a:hover { color: var(--primary); }
.dept-head .link-all { font-weight: 700; font-size: .88rem; white-space: nowrap; color: var(--dept, var(--primary)); }
.dept-row .product-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .dept-row .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* catalog sidebar dept tree + drawer groups */
.dept-label { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); margin: var(--sp-3) 0 3px; text-transform: uppercase; }
.dept-label .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.filter-group .filter-option { padding-left: 17px; }
.drawer-group h5 { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--sp-4) 0 2px; }
.drawer-group a { font-size: .95rem; padding: 10px 0; }

/* ============================================================
   VERSION C — sober palette overrides
   Layout identical to version B; the logo keeps its vivid
   colors, the UI switches to muted, dusty tones.
   ============================================================ */
:root {
  /* --cta : reserve a L'ACTION D'ACHAT et a rien d'autre (2026-08-11).
     26 boutons de /shop/ partageaient le meme bleu --primary, dont « Add to
     cart », « Apply filters » ET « Accept all » du bandeau cookies : le bouton
     qui rapporte avait l'apparence de celui qui accepte les cookies.
     🔴 1re tentative REJETEE : l'encre #1D1D1B. Excellente sur le papier
     (16,9:1 avec le blanc) mais c'est EXACTEMENT `--ink`, la couleur du titre
     et des textes de la carte — contraste 1,0 avec eux, donc zero distinction.
     Un CTA doit etre l'element le plus saillant de la carte, pas se fondre dans
     la typographie. Juger un CTA sur son seul contraste avec le FOND est une
     erreur : ce qui compte est sa distinction avec TOUT ce qui l'entoure.
     🔴 2e tentative REJETEE : orange brule #B84E15. Teinte 21 degres, donc
     « orange » sur le papier — mais a cette luminosite l'oeil lit du ROUGE
     BRIQUE, et le rouge signale l'urgence ou l'erreur, pas l'achat. La teinte
     calculee ne dit pas comment une couleur est PERCUE : c'est le rendu qui
     tranche, pas le HSL.
     Retenu : orange ambre #F59E0B avec texte FONCE (modele Amazon). Teinte 38
     degres — aucune lecture possible en rouge — et surtout **7,86:1 avec le
     texte encre, soit AAA** (qui demande 7). Le piege qu'il fallait contourner :
     un orange assez vif pour ne pas virer au rouge ne passe jamais 4,5:1 avec
     du texte BLANC (mesure : 2,0 a 2,8). La reponse e-commerce standard est
     d'inverser le texte, pas d'assombrir le fond.
     Verifie : aucun produit n'est en promo aujourd'hui, le badge `--sale`
     #B04A35 n'apparait donc sur aucune carte.
     ⚠️ Declare ICI et pas dans tokens.css : ce fichier n'est PAS enqueue par
     functions.php, c'est du code mort. Les tokens vivants sont dans mockup.css,
     et c'est ce second bloc :root qui l'emporte sur celui de la ligne 5. */
  --cta:#F59E0B; --cta-hover:#DC8A05; --cta-ink:#1D1D1B;

  /* muted brand tones — used for departments, chips, hairline */
  --brand-yellow:  #D9B65C;
  --brand-green:   #7C9B6E;
  --brand-red:     #BC5F51;
  --brand-blue:    #47749F;
  --brand-pink:    #A96E88;

  /* core tokens, calmed down */
  --bg:            #FBF9F4;
  --surface-warm:  #F4EFE5;
  --border:        #E7E1D4;
  --text:          #45433C;
  --muted:         #8B857A;
  --primary:       #3D6899;
  --primary-dark:  #2C4F77;
  --primary-soft:  #E9EFF5;
  --accent:        #A98253;   /* warm brass for eyebrows & details */
  --success:       #5F7D5C;
  --sale:          #B04A35;
  --star:          #D9A441;
}

/* announcement bar back to charcoal */
.announce { background: var(--ink); color: #E9E4D8; font-weight: 500; }
.announce strong { color: #F2C94C; }

/* thinner, dustier signature hairline */
.site-header::after { height: 3px; opacity: .85; }

/* calm the hero: no confetti, no marker highlight */
.hero::before { display: none; }
.hero-copy h1 em { background: none; color: var(--primary); }

/* neutral warm product placeholders (photography will replace these) */
.t-linen   { background: linear-gradient(145deg, #EFE7DA, #DDD0BC); }
.t-blue    { background: linear-gradient(145deg, #DCE5EF, #B9C9DC); }
.t-sage    { background: linear-gradient(145deg, #E2E7DC, #C4CFB9); }
.t-taupe   { background: linear-gradient(145deg, #E8E0D4, #CBBBA4); }
.t-navy    { background: linear-gradient(145deg, #C7D2E2, #8FA3BF); }
.t-clay    { background: linear-gradient(145deg, #EDDFD3, #D4B49C); }
.t-cream   { background: linear-gradient(145deg, #F6F1E6, #E4D9C4); }
.t-stone   { background: linear-gradient(145deg, #E6E4DE, #C9C5BA); }

/* reassurance icons: single quiet tint */
.reassure-item:nth-child(1) .ic,
.reassure-item:nth-child(2) .ic,
.reassure-item:nth-child(3) .ic,
.reassure-item:nth-child(4) .ic {
  color: var(--primary); background: var(--primary-soft); border-color: transparent;
}

/* badges: New joins the blue family, Sale stays functional red */
.badge-new { background: var(--primary); }

/* chips: quieter dots */
.cat-chip { background: var(--surface); }

/* newsletter CTA follows the primary color instead of pink */
.newsletter-form .btn { background: var(--accent); }
.newsletter-form .btn:hover { background: #93703F; }
.mock-bar button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }